/*
	34 Responsive Grid System
	Multi-state, responsive CSS grid system

	Developer	: Kemal Yılmaz
	URL			: http://34grid.com
	Contact		: http://kemalyilmaz.com
				: http://twitter.com/xkema
				: http://www.facebook.com/pages/34Grid/401562963236958
	Version		: 1.0

	LICENSED UNDER Creative Commons Attribution 3.0 Unported License.
*/



/* 
	===================================== DESKTOP, LARGE SCREENS ====
*/
@media only screen and (min-width: 1200px) {
	
	/* user styles goes here */

}



/* 
	=========================================== DESKTOP < 1200px ====
*/
@media only screen and (max-width: 1200px) {

	/* user styles goes here */

}



/* 
	============================================= IPAD LANDSCAPE ====
*/
@media only screen and (max-width: 1024px) {

	/* user styles goes here */
	div.third{width: 50% !important;}
}

/* 
	============================================== IPAD PORTRAIT ====
*/
@media handheld, only screen and (max-width: 800px) {

	/* user styles goes here */
	div.menu > ul.nav{
		width: 100%;
	}
	div.search_div{
		width: 100%;
	}
	div.search_div form input.search {
		width: 90%; float: none; margin:auto; 
	}
	ul.options > li{
		min-width: 80px;
	}
	ul.options > li#loan {
		width: 22%;
		height:9.25em;
	}
	ul.options > li#money-transfer {
		width: 22%;
		height:7.5em;
	}
	ul.options > li#main-local-accounts {
		width: 22%;
		height:8.75em;
	}
	ul.options > li > a > p, ul.options > li > p, ul.hover > li > a > p, ul.hover > li > p{
		font-size: 64%;
	}
	/*ul.options > li > a > img, ul.options > li > img, ul.hover > li > a > img, ul.hover > li > img {
		width: 75%;
	}*/
	ul.tabs-list > li {
		/*padding: .25em .1em !important;*/
		margin-right: 1%;
		font-size: 75%;
	}
	div.desc > div.accordion > ul.accordion-list {
		margin: 0;
	}
	div.downloads > ul > li {
		/*font-size: 50%;
		height: 4em;*/
	}
	div.tabs-container > div > ol > li > a {
		font-size: 50%;
	}
	ul.tabs-list.main-tabs{
		font-size: 87%;
	}
	ul.tabs-list.main-tabs > li{
		padding: .5em 1em;
	}
	div.image-links > div > div img {
		width: 100%;
	}
	div.footer {
		padding-bottom: 2em;
	}
	div.footer > div > ul {
		/*margin-right: 1em;
		position: absolute;
		left: .75em;*/
	}
}

@media handheld, only screen and (max-width: 640px) {
	div.half, div.third{width: 100% !important;}
	div.half.actions{width: 50% !important;}
}

/* 
	=========================================== IPHONE LANDSCAPE ====
*/
@media handheld, only screen and (max-width: 480px) {

	/* autogenerated styles */
	.col_2 { width:98%; }

	.col_2c { width: 98%; }

	/* user styles goes here */
	/*div.top > img{
		max-width: 75px;
	}*/
	div.content{
		padding: 0;
		margin: 0 auto;
	}
	button, a button {
		padding: .45em 1.25em;
		margin-top: .5em;
	}
	ul.options > li, ul.hover > li {
		width: 22%;
		min-height:110px;
	}
	ul.hover > li{
		height:110px;
	}
	ul.options > li#security{
		height: 135px;
	}
	ul.tabs-list{
		margin:0 !important;
	}
	ul.tabs-list > li {
		padding: .2em;
		margin-right: 1%;
		font-size: 60%;
	}
	ul.tabs-list.main-tabs > li{
		padding: .5em .75em;
	}
	ul.tabs-list.main-tabs{
		font-size: 100%;
	}
	div.downloads > ul > li {
		/*font-size: 70%;
		height: 3em;*/
	}
	div.tabs-container > div > ol > li > a {
		font-size: 70%;
	}
	div.sidebar{
		border-left: none;
	}
	div.image-links > div > div.row{
		/*width: 50%;
		float: left;
		margin-top: 0em;*/
	}
	div.image-links > div > div.row > img, div.image-links > div > div.row > a img{
		width: 100%;
	}
	div.accordion-container > div.table{
		padding: 0;
	}
	div.tr.thead{
		display: none;
	}
	div.tr > div{
		width: 100%;
		float: none;
	}
}



/* 
	============================================ IPHONE PORTRAIT ====
*/
@media handheld, only screen and (max-width: 320px) {

	/* autogenerated styles */
	/* reset .container width and max-width (in case user defines an explicit #id for her/his .container classes) */
	.container { width: 100% !important; max-width: 100% !important; }

	.col_1,
	.col_2,
	.col_3, .col_3c {
			width		: 92%;
			margin-left	: 0%;
			margin-right	: 0%;
			padding-left	: 4%;
			padding-right	: 4%;
	}

	/* user styles goes here */
	div.image-links > div > div.row{
		width: 100% !important;
		float: none;
	}
	ul.options > li, ul.hover > li{
		width: 30%;
		height: 130px;
	}
	ul.options > li > a > p, ul.options > li > p, ul.hover > li > a > p, ul.hover > li > p{
		/*font-size: 70%;
		letter-spacing: .1em;
		font-family: 'dinregular';*/	}
	button, a button{
		font-size: 75%;
	}
	div.tabs-container > div.local-accounts > ol, div.tabs-container > div.foreign-accounts > ol {
		font-family: 'dinregular';
		font-size: 75%;
		letter-spacing: .1em;
	}
	div.local-accounts ol li{
		padding: .5em 0;
		font-size: 120%;
	}
}

/* 
	============================================ SO SMALL PHONES ====
*/
@media handheld, only screen and (max-width: 240px) {
	
	/* user styles goes here */
	div.banner{
		display: none;
	}
	div{
		letter-spacing: 1px;
		font-size: 120%;
	}
	ul.options > li, ul.hover > li {
		width: 48% !important;
	}
	div.image-links > div > div.row{
		width: 100% !important;
		float: none;
	}
	button, a button{
		background-image: none;
	}

}