/* Grid container
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
/*.container { width:96%; max-width: 960px; }
.lte-ie8 .container { max-width:960px; } */

/* Design for a width of less than 1024 px
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* width < 1024px */
@media only screen and (max-width: 1023px) {
	/* Hide */
	.hide-below-1024 { display:none !important; }
}

/* Tablet (Portrait) - design for a width of 768px
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* Adujust sidebar */

/* Adujust sidebar */
/*@media only screen and (min-width: 1700px) and (max-width: 1925px) {
	.control-nav.control-paging { right: 450px; }
}
@media only screen and (min-width: 1500px) and (max-width: 1700px) {
	.control-nav.control-paging { right: 300px; }
}*/
@media only screen and (min-width: 1201px) and (max-width: 1350px) {
	.main.container.show-bg { min-height:1000px;}
}

@media only screen and (min-width: 981px) and (max-width: 1200px) {
	.main.container.show-bg { min-height:1020px;}
}

/* 768px <= width < 960px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.container { max-width:737px; }
	/* Hide */
	.hide-below-960 { display:none !important; }
}

@media only screen and (max-width: 959px) {
	.sidebar-wrap.container { max-width: 100%; padding: 0; width: 100%; }
	.left-menu { margin-bottom: 0px; }
	.slide_content { right:17px;}
	.banner-small .slide-top-text {font-size: 24px;}
	.banner-small .slide-middle-text {font-size: 11px; }
	.banner-small .slide-bottom-text { font-size: 10px; margin-left:30px;}
	.banner-small .slide_content { width:280px !important; right:12px; }
}
/* All mobile - design for a width of less than 768px
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

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

	.col-main { min-height: inherit; }
	/*.slide_content { top:74px; }*/
	/* For Inner page */
	.banner-small .footer-container { margin-top:0px;}
	.footer-container { margin-top:0px;}
	#mobnav { display: block !important; }
	#menu-option { display: none; }
	.other-logos .ieee-logo img { width: 100px; }
	.other-logos .ieee-logo-process img { width: 200px; }
	
	/* Grid units below 768px screen size are 100% wide with no margin. Padding compensates lack of margin. */
	.container { width:92%; padding-left:2%; padding-right:2%; }
	.nested-container { width:100%; margin-left:auto; }

	/* Nav container with outline (if nav container has background color).
	   Apply the same vertical margins, as container's side padding. */
	.nav.has-outline > .grid-full { margin-top: 2%; margin-bottom: 2%; }
	
	/* Stretch all grid units */
	.grid12-1,
	.grid12-2,
	.grid12-3,
	.grid12-4,
	.grid12-5,
	.grid12-6,
	.grid12-7,
	.grid12-8,
	.grid12-9,
	.grid12-10,
	.grid12-11,
	.grid12-12,
	
	.grid4-1,
	.grid4-2,
	.grid4-3,
	
	.grid2-1,
	
	.grid-full,
	
	.grid-col2-sidebar,
	.grid-col2-main,
	.grid-col3-sidebar,
	.grid-col3-main
	{
		width:100% !important; /* Added "!important" to override units with "no-gutter" */
		margin-left:0;
		margin-right:0;
	}

	.header .logo-wrapper { text-align: center; }
	.header .logo { left: 0; }
	.header .ieee-logo { margin: 0; text-align: center; }
	.top-link { float: none; margin-bottom: 25px; margin-top: 25px; text-align: center; }
	.gallery { text-align: center; }

	.sidebar { position: inherit; width: 27%; z-index: 99; }
	.sidebar .menu-contain { background: none repeat scroll 0 0 #404247; }
	.twiter-box { display: none; }
	.mb-twiter-box { display: block; margin-top: 30px; }
	#mobnav-trigger { font-size: 20px; color: #fff; }
	
	/* Vertically aligned grid
	-------------------------------------------------------------- */
	.v-grid-container { display:block; }
	.v-grid { float:inherit; display:block; width:100%; }
}
@media only screen and (max-width: 639px) {	
	.slide-top-text {font-size: 24px;}	
	.slide-middle-text {font-size: 11px; }
	.slide-bottom-text { font-size: 10px; margin-left:30px;}
	.slide_content { width:280px !important; right:12px; }
	.control-nav.control-paging {right: 12px;top: 100px;}
}

/* Innerpage for small-banner */
@media only screen and (min-width: 480px) and (max-width: 639px) {
	.banner-small .slide > img {height: 120px;}
}
/* Mobile (Landscape) - design for a width of 480px
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* 480px <= width < 768px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	/* For large banner bor slider-text */
	.container { max-width:440px; }
	.header .logo .logo-img { width: 100%;}
	
	/* Hide */
	.hide-below-960 { display:none !important; }
	.hide-below-768 { display:none !important; }
	
	/* Deprecated: persistent grid units (will be removed in the next update)
	-------------------------------------------------------------- */
	/* Half */
	.persistent-grid2-1 { width:48%; margin-left:1%; margin-right:1%; }
	
	/* One-third + two-thirds */
	.persistent-grid3-1 { width:31.33%; margin-left:1%; margin-right:1%; }
	.persistent-grid3-2 { width:64.67%; margin-left:1%; margin-right:1%; }
	
	/* One-fourth + two-fourths + three-fourths */
	.persistent-grid4-1 { width:23%; margin-left:1%; margin-right:1%; }
	.persistent-grid4-2 { width:48%; margin-left:1%; margin-right:1%; }
	.persistent-grid4-3 { width:73%; margin-left:1%; margin-right:1%; }

	/* Mobile grid - modify units on mobile devices
	-------------------------------------------------------------- */
	.mobile-grid.grid12-1 { width:14.66% !important;	margin-left:1%; margin-right:1%; } /* .grid12-1 to .grid12-2 */
	.mobile-grid.grid12-2 { width:31.33% !important;	margin-left:1%; margin-right:1%; } /* .grid12-2 to .grid12-4 */
	.mobile-grid.grid12-3 { width:48% !important;		margin-left:1%; margin-right:1%; } /* .grid12-3 to .grid12-6 */
	
	/**/
	.mobile-grid-half { width:48% !important; margin-left:1%; margin-right:1%; }
}

/* Mobile (Landscape, iPhone 4 Portrait) - design for a width of 640px
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
/* 640px <= width < 768px */
@media only screen and (min-width: 640px) and (max-width: 767px) {
	
		.container { max-width:590px; }
	}

/* Design for a width of less than 480px (small mobile)
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* width < 480px */
@media only screen and (max-width: 479px) {
	
	.slides .slide img { height:120px; width:100%;}
	
	.header .logo .logo-img { max-width: 100%; }
	
	/* For small banner bor slider-text */
	.banner-small .slide-content .slide-top-text {font-size: 20px; text-align:right;}
	.banner-small .slide-content .slide-middle-text {font-size: 15px;}
	.banner-small .slide-content .slide-bottom-text {font-size: 10px;  padding-top: 1px;}
	
	/* Stretch containers to full width and add side padding */
	.container { max-width:none !important; width:94%; padding-left:3%; padding-right:3%; }

	/* Nav container with outline (if nav container has background color).
	   Apply the same vertical margins, as container's side padding. */
	.nav.has-outline > .grid-full { margin-top: 3%; margin-bottom: 3%; }
	
	.slide-content .slide-top-text {font-size: 18px; text-align:right; margin-left:60px;}
	.slide-content .slide-middle-text { font-size: 14px;}
	.slide-content .slide-bottom-text { font-size:12px;}
	
}

/* Mobile (Portrait) - design for a width of 320px
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* 320px <= width < 480px */
@media only screen and (min-width: 320px) and (max-width: 479px) {

	/* .container { max-width:301px; } */
	.org-detail { margin-top: 15px; }

	/* Hide */
	.hide-below-960 { display:none !important; }
	.hide-below-768 { display:none !important; }
	.hide-below-480 { display:none !important; }
}

/* Mobile (Portrait) - design for a width of less than 320px
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* width < 320px */
@media only screen and (max-width: 319px) {

		/* .container { max-width:226px; } */
		
	
	.container { max-width:none !important; width:92%; padding-left:4%; padding-right:4%; }

	/* Nav container with outline (if nav container has background color).
	   Apply the same vertical margins, as container's side padding. */
	.nav.has-outline > .grid-full { margin-top: 4%; margin-bottom: 4%; }

	/* Hide */
	.hide-below-960 { display:none !important; }
	.hide-below-768 { display:none !important; }
	.hide-below-480 { display:none !important; }
	.hide-below-320 { display:none !important; }
}