﻿
@media all and (min-width: 955px) and (max-width: 1040px){
	#sectHomeImage img{
		 width: 97%!important;
	}
	
	#sectImageTitle{
	    width: 97.5%!important;
	}

	#sectImageTitle img {
	    /*width: 930px !important;*/
	    width: 100%!important;
	}

	#sectWideColumn img{
	max-width:100%;
	}

	#sectMainColumn img{
	max-width:100%;
	}

}


@media (min-width: 768px) and (max-width: 1024px){
	.s4-search input.ms-sbplain{
		width: 	140px!important;
	}

	#footerDept{
		padding: 15px 47px;
		overflow: hidden;
	}
	
	#footerGT {
		padding: 5px 47px;
	}
	#footerGTLinks {
		line-height: 12px;
	}

	#footerContact, #footerOtherContact, #footerVisitor {
		margin-right: 15px;
		overflow: hidden;
	}
	
	#footerCS img, #footerContact img, #footerOtherContact img, #footerVisitor img{
		width: 125px;
	}
	
	#headerAudience {
		width: 53%;
	}
	
	#headerGT {
	    margin: 0 47px;
	}
	
	#headerGTMain{
		display: none;
	}
	
	#headerLogo {
	    margin: 0 47px;
	}
	
	#headerLogo img{
		/*width: 40%;*/
	}
	
	#headerSocialButtons {
		width: 45%;
	}
	
	#navMain, #navMain div.menu ul.dynamic {
		margin: 0 0 0 47px;
		height: 45px;
		width: 87%;
	}
	
	#navMenu{
		height: 30px;
		width: 100%;
		text-align: center;
	}

	#navLogin {
		width: 100%;
		height: 30px;
		text-align: center;
	}

	
	#page{
		width: 95%;
		margin: auto;
	}
	#pageMainContent{
		padding: 0px 47px;	
	}
	#sectGetToKnow, #borderGetToKnow, #borderBlue{
		margin-left: -47px;
	    padding-right: 95px;
	    width: 100%;
	}
	#sectGTKContent{
		margin: 0 47px;
		padding: 0px;
	}

	#sectPageTitle{
		font-size: 24px;
		top: 230px;
	    margin: 30px 55px;
	}

	#sectSubLayout{
		width: 70%;
	}
	
	#sectRotateContent{
		width: 100%;
	}	
	
	#sectRotateContent img{
		width: 100%;
	}
	#sectHomeImage{
		margin-top: -125px;
		width: 100%;
	}
	#sectHomeImage img{
		/*width: 870px;*/
		width: 100%;
	}
	
	 #sectImageTitle img{
		/*width: 1015px!important;*/
		width: 100%;
	}

	#sectImageTitle{
	    margin-left: -5px;
	    margin-top: -129px;
	    overflow: hidden;
	    width: 100%;
	}

	#sectFAQ img{
		width: 95%;
	}

	
	#userLogin {
		width: 48%;
		text-align: left;
		padding-left: 15px;
	}
	
	.ms-rteStyle-SectionTitle {
	    font-size: 16px;
	}
	
	.ms-rteStyle-SectionTitle img{
	   width: 25px!important;
	}
	
	img.NewsListImage{
		width: 60px;
	}
	
	#sectWideColumn img{
	max-width:100%;
	}

	#sectMainColumn img{
	max-width:100%;
	}
	
	#primary-menus-toggle{
	display:none;
	}
}

/* Landscape phones & some tablets*/
@media (min-width: 481px) and (max-width: 767px){
	.menu .menu-item, .menu .menu-item .additional-background, .menu .menu-item .additional-background .menu-item-text{
		font-size: 12px;
		font-weight: bold;
	}


	#footerDept{
		padding: 15px 10px;
		width: 97%;
	}
	
	#footerGT {
		height: auto;
		padding: 5px 10px;
		width: 97%;
	}
	
	#footerGTLogo {
		width: 100%;
		text-align: center;
	}
	
	#footerGTLinks {
		text-align: center;
		line-height: 16px;
		padding-top: 10px;
		width: 100%;
	}
	
	#footerCS li, #footerContact li, #footerOtherContact li, #footerVisitor li{
		padding-bottom: 7%;
	}

	#footerContact, #footerOtherContact, #footerVisitor {
		margin-right: 10px;
	}
	
	#footerContact, #footerOtherContact, #footerVisitor, #footerCS{
		float: left;
		margin-bottom: 20px;
		width: 48%;
	}
	
	#headerAudience {
		display: block!important;
		float: left;
		width: 100%;
		height: 50%;
		text-align:center;
	}
	
	#headerGT {
	    margin: 0px;
	    height: 60px;
	    padding: 0 10px;
	    width: 97%;
	}
	#headerGTMain {
	   	display: none;
	}

	#headerLogo {
	    padding: 0 10px;
		text-align: center;
	    width: 97%;
	    margin: 0px;
	    height: 100%;
	}
	
	#headerLogo img{
		padding: 10px;
	}
	
	#headerSocialButtons{
		display: block!important;
		float: left;
		width: 100%;
	}
	#headerSocialButtons ul{
		padding-left: 0px;
		text-align: center;
		font-weight: bold;
	}
	#headerSocialButtons img{
		border: 0px;
		width: 25px;
		vertical-align: middle;
	}
		
	#navMain, #navMain div.menu ul.dynamic {
		padding: 0 10px;
		margin: 0px;
		width: 97%;
		height: 100%;
	}
	#navMenu{
		width: 100%;
		height: 45px;
		display:none;
	}
	
	#navMenuMobile{
	display:none;
	}
		
	#navLogin {
	    float: left;
	    margin-left: -10px;
	    margin-top:10px;
	    padding-left: 10px;
	    padding-right: 10px;
	    text-align: left;
	    width: 100%;
    }
	
	#page{
		width: 95%;
		margin: auto;
	}
	#pageMainContent{
		padding: 0px 10px;	
		width: 96%;
	}

	#sectLinks{
		margin-bottom: 0px;
		margin-top: 10px;
		top: 0px;
		z-index: 0px;
		padding: 3% 2% 2%;	
	}

	#sectHomeImage{
		margin-top: 0px;
	}

	#sectHomeImage img{
		/*width: 730px;*/
		width: 100%;
	}

	#sectImageTitle{
		margin-top: 0px;
	}

	#sectImageTitle img{
		/* width: 730px; */
		width: 100%;
		margin: 0px!important;
		/*padding-top: 70px; */
	}

	#sectPageTitle{
		top: 75px;
		left: -60px;
	}
	
	#sectRightColumn{
		float: left;
		width: 100%;
	}
	
	#sectNews, #sectContact, #sectMainColumn{
		clear: left;
		float: none;
		width: 99%;
	}
	
	#sectTools, #sectFAQ{
		float: left;
		width: 48%;
	}
	
	#sectFAQ img{
		width: 80%;
	}

	#sectGetToKnow, #borderGetToKnow{
		margin-left: -10px;
	    width: 110%;
	}

	#sectGTKContent {
	    padding: 10px;
	    width: 91%;
	}
	#sectRotateContent img{
		width: 100%;
	}

	#sectSubLayout{
		width: 70%;
	}

	#titleGetToKnow{
		width: 40%;
	}
	
	#userLogin {
		text-align: left;
	}
	
	.img2Logo{
		float: none;
	}

	img.NewsListImage{
		width: 100px;
	}
	
	.ms-rteStyle-Announcements{
		margin-top: 3%;
		top: 0px;
		width: 91%;
	}
	
	.txtSocialMedia{
		display: inline;
	}

	#sectImageTitle{
	display:none;
	}


 
  /*Secondary Vertical Navigation menu for mobile*/
	#navMenuMobile{
	margin:35px 10px 0px 0px;
	display:none;
	background-color:#333333;
	padding:5px 0px 10px 15px;
	width:auto;
	border-radius:3px;
	border-top-left-radius:0px;
	
	}

	#navMenuMobile, .menuItemLevel1{
	color:white !important;
	
	}	

	.menuItemLevel1 a:hover{
	color:#eeb311 !important;
	font-size:1.2em !important;
	}

	.menuItemLevel2{
	background-color: rgba(200, 54, 54, 0.0) !important;
	color:#eeb311 !important;
	}


	#zz2_TopNavigationMenuV4Mobile{
	margin-top:5px;
	}

	.zz2_TopNavigationMenuV4Mobile_0{
	border-radius:3px;
	background-color:#333333 !important;
	}

	/*Mobile Menu Toggle button*/
	#primary-menus-toggle {
  	background: #333333 url(csImages/nav.svg) no-repeat 7% center;
  	color: #fff;
  	cursor: pointer;
  	display: block;
  	float: left;
  	padding: 6px 4px 6px 24px;
  	text-transform: uppercase;
  	margin:10px 0px 0px 0px;
  	border-radius:3px;
  	font-size:1.2em;
	}

	#sectImageTitle, #sectPageTitle{
	display:none;
	}
  

	#sectWideColumn img{
	max-width:100%;
	}

	#sectMainColumn img{
	max-width:100%;
	}

}


/*Phones*/
@media (max-width:480px){
	.menu .menu-item, .menu .menu-item .additional-background, .menu .menu-item .additional-background .menu-item-text{
		font-size: 12px;
		font-weight: bold;
	}
	
	.s4-search input.ms-sbplain{
		width: 100px!important;
	}

	/************************** classes *********************************************/	
	body{
		font-size: 13px;
		
	}
	#borderBlue{
		display: inline!important;
	}
	
	#footerDept{
		padding: 15px 10px;
		width: 95%;
		font-size: 13px;
	}
	
	#footerGT {
		height: 100%;
		padding: 10px;
		width: 95%;
	}
	
	#footerGTLogo {
		width: 100%;
		text-align: center;
		height: 100%;
	}
	
	#footerGTLinks {
		text-align: center;
		line-height: 16px;
		padding-top: 10px;
		width: 100%;
		height: 100%;
	}
	
	#footerCS li, #footerContact li, #footerOtherContact li, #footerVisitor li{
		padding-bottom: 3%;
	}
	
	#footerCS img, #footerContact img, #footerOtherContact img, #footerVisitor img{
		width: 175px;	
	}

	#footerContact, #footerOtherContact, #footerVisitor {
		margin-right: 5px;
	}
	#footerContact, #footerOtherContact, #footerVisitor, #footerCS{
		float: left;
		margin-bottom: 20px;
		width: 97%;
		overflow: hidden;
	}

	#headerAudience {
		display: block!important;
		float: left;
		width: 100%;
		height: 50%;
		text-align:center;
	}
	
	#mobileHeaderGT {
	    margin: 0px;
	    height: 100%;
	    padding: 15px;
	    width: 93%;
	}
	#headerGTMain, #headerGT{
	   	display: none;
	}

	#headerLogo {
	    padding: 0x;
		text-align: center;
	    width: 100%;
	    margin: 0px;
	    height: auto;
	}
	
	#headerLogo img{
		padding: 10px;
		width: 75%;
	}
	
	#headerSocialButtons{
		display: block!important;
		float: left;
		width: 100%;
		height: 100%;
	}
	#headerSocialButtons ul{
		padding-left: 0px;
		text-align: center;
		font-weight: bold;
	}
	#headerSocialButtons img, #mobileHeaderSocialButtons img{
		border: 0px;
		width: 25px;
		vertical-align: middle;
	}
		
	#mobileHeaderArea{
		display: inline!important;
	}
	#mobileHeaderSocialButtons{
		display: block!important;
		float: left;
		width: 100%;
		height: 100%;
		padding-top: 10px;
	}
	#mobileHeaderSocialButtons ul{
		padding-left: 0px;
		text-align: left;
		font-weight: bold;
	}

	#mobileHeaderSocialButtons li, #mobileHeaderSocialMedia li {
	    margin-right: 5px;
	}

	#navMain, #navMain div.menu ul.dynamic {
		padding: 0 10px;
		margin: 0px;
		width: 97%;
		height: 100%;
	}
	#navMenu{
		width: 100%;
		height: 45px;
		display:none;
	}
	#navMenuMobile{
	display:none;
}
	
	
	#navLogin {
	    float: left;
	    margin-left: -10px;
	    margin-top:10px;
	    padding-left: 10px;
	    padding-right: 10px;
	    text-align: left;
	    width: 100%;
    }
	
	#page{
		width: 95%;
		margin: auto;
	}
	#pageMainContent{
		padding: 0px 10px;	
		width: 96%;
	}

	#sectLinks{
		margin-bottom: 0px;
		margin-top: 10px;
		top: 0px;
		z-index: 0px;
		padding: 3% 2% 2%;	
	}
	
	#sectPageTitle{
	    font-size: 24px;
	    left: -75px;
	    top: 102px;
	   }
	
	#sectRightColumn{
		float: left;
		width: 100%;
	}
	
	#sectNews, #sectContact, #sectMainColumn, #sectTools, #sectFAQ{
		clear: left;
		float: none;
	    margin: 2%!important;
	    width: 96%;
	}

	#sectImageTitle, #sectHomeImage{
		margin-top: 0px;
	}

	#sectFAQ img, #sectTools img{
		width: 95%;
	}

	#sectHomeImage img{
		width: 100%;
	}

	#sectImageTitle img{
		/*width: 470px;*/
		width: 100%;
		margin: 0px!important;
		padding-top: 0px;
	}
	
	#sectGetToKnow, #borderGetToKnow, #borderBlue{
		margin-left: -10px;
	    width: 110%;
	}

	#sectGTKContent {
	    padding: 10px;
	    width: 91%;
	}
	
	#sectRotateContent{
		width: 100%;
	}
	
	#sectRotateContent img{
		width: 95%!important;
		margin: 0px!important;
	}
	
	#sectSubMenu {
	    width: 95%!important;
		display: none;
	}	
	#sectMobileSubMenu{
		width: 95%!important;
		display: inline!important;
		padding: 0px;
		margin-bottom: 20px;
		top: 0px;
		max-width: none;
	}

	#sectSubLayout{
		width: 95%;
	}


	#titleGetToKnow{
		width: 40%;
	}
	
	#userLogin {
		text-align: left;
	}

	.img2Logo{
		float: none;
	}
	
	.ms-rteStyle-Announcements{
		margin-top: 3%;
		top: 0px;
		width: 91%;
	}
	
	.ms-rteStyle-SectionTitle{
		font-size: 18px;
		padding: 10px 0px;
	}

	.ms-rteStyle-SectionTitle img{
		width: 25px!important;
	}
	
	.txtSocialMedia{
		display: inline;
	}

#sectImageTitle,#sectPageTitle{
	display:none;
}

 
  /*Secondary Vertical Navigation menu for mobile*/
#navMenuMobile{
	margin:35px 10px 0px 0px;
	display:none;
	background-color:#333333;
	padding:5px 0px 10px 15px;
	width:auto;
	border-radius:3px;
	border-top-left-radius:0px;
	
}

#navMenuMobile, .menuItemLevel1{
color:white !important;
	
}

.menuItemLevel1 a:hover{
color:#eeb311 !important;
font-size:1.2em !important;
}

.menuItemLevel2{
	background-color: rgba(200, 54, 54, 0.0) !important;
	color:#eeb311 !important;
	
	
}


#zz2_TopNavigationMenuV4Mobile{
	margin-top:5px;
}

.zz2_TopNavigationMenuV4Mobile_0{
	border-radius:3px;
	background-color:#333333 !important;
}

/*Mobile Menu Toggle button*/
#primary-menus-toggle {
  background: #333333 url(csImages/nav.svg) no-repeat 7% center;
  color: #fff;
  cursor: pointer;
  display: block;
  float: left;
  padding: 6px 4px 6px 24px;
  text-transform: uppercase;
  margin:10px 0px 0px 0px;
  border-radius:3px;
  font-size:1.2em;
}

#sectImageTitle, #sectPageTitle{
	display:none;
}
  
#sectWideColumn img{
	max-width:100%;
}

#sectMainColumn img{
	max-width:100%;
}

}


/**
 * Media Query Breakpoints for Mobile Menu
 *
 * Breakpoints are calculated based on a browser default font-size of 16px and NOT what the base
 * font-size is set to be (which is ~14px in this case of this page.) Plus, if the user decides to
 * increase their default font size for their browser the layout will drop down to a lower
 * breakpoint (provided font size is increased enough), thus making for a more usable page!
 */

/* ~496px and less */
@media only screen and (max-width: 31em) {
  
  /* Utilities */
  .hide-for-mobile { display: none !important; }
  
  /*Secondary Vertical Navigation menu for mobile*/
#navMenuMobile{
	margin:35px 10px 0px 0px;
	display:none;
	background-color:#333333;
	padding:5px 0px 10px 15px;
	width:auto;
	border-radius:3px;
	border-top-left-radius:0px;
	
}

#navMenuMobile, .menuItemLevel1{
color:white !important;
	
}

.menuItemLevel1 a:hover{
color:#eeb311 !important;
font-size:1.2em !important;
}

.menuItemLevel2{
	background-color: rgba(200, 54, 54, 0.0) !important;
	color:#eeb311 !important;
	
	
}


#zz2_TopNavigationMenuV4Mobile{
	margin-top:5px;
}

.zz2_TopNavigationMenuV4Mobile_0{
	border-radius:3px;
	background-color:#333333 !important;
}

/*Mobile Menu Toggle button*/
#primary-menus-toggle {
  background: #333333 url(csImages/nav.svg) no-repeat 7% center;
  color: #fff;
  cursor: pointer;
  display: block;
  float: left;
  padding: 6px 4px 6px 24px;
  text-transform: uppercase;
  margin:10px 0px 0px 0px;
  border-radius:3px;
  font-size:1.2em;
}

#sectImageTitle, #sectPageTitle{
	display:none;
}
  
}

/* ~496px to ~816px */
@media only screen and (min-width: 31em) and (max-width: 51em) {
  
  /* Utilities */
  .hide-for-mobile { display: none !important; }
 

 
}

/* ~816px or more */
@media only screen and (min-width: 51em) {
  
  /* Utilities */
  .hide-for-desktop { display: none !important; }

}

/* ~1024px or more */
@media only screen and (min-width: 64em) {
  
  /* Utilities */
  .hide-for-desktop { display: none !important; }

}

