@charset "utf-8";

/*
-----------------------------
For 1600px or less
-----------------------------
*/
@media screen and (max-width: 1600px) {

	/** Header **/
	#header-nav								{ margin-left: 40px;}
	#header-nav	li							{ margin-left: 40px;}
	
}


/*
-----------------------------
For 1440px or less
-----------------------------
*/
@media screen and (max-width: 1440px) { 
}


/*
-----------------------------
For 1280px or less
-----------------------------
*/
@media screen and (max-width: 1280px) {
	
	#footer-inner .footer-nav li			{ margin: 5px 40px 5px 0; font-size: 1em; }
	#footer-inner .social-links li 			{ margin-left: 10px;}
	#footer-inner .social-links li a 		{ width: 36px; height: 36px; line-height: 36px; }

	#feedback-header  						{ background-position: 40% 50%;}
	#feedback-header .content h2 			{ font-size: 2.2em; }
	#feedback-header .content .fr-view		{ max-width: 400px;}
}


/*
-----------------------------
For 1024px or less
-----------------------------
*/
@media screen and (max-width: 1024px) {

	.mobile-element 							{ display: inherit;}
	.mobile-hidden								{ display: none;}
	
	/** Structure **/
	#container									{ padding-top: 54px;}

	/** Header **/
	#header-inner								{ padding-left: 50px; height: 54px; }
	#header-inner h1							{ margin: 0 auto;}
	#search-button 								{ font-size: 1.4em; opacity:.86; }
	#header-icons								{ margin-right: 20px;}
	
	#header-nav									{ display: none;}
	
	#header-corner-lt,
	#header-corner-rt 							{ display: none;}

	/** Nav **/
	#nav-wrapper								{ z-index: 1001; overflow-y: auto; position: fixed; left: 0; top:0; height: 100%; width: 100%; max-width: 400px; box-shadow: 0 0 4px rgba(0,0,0,.3); transform: translateX(-110%); transition: transform .4s;}

	#nav-inner									{ height: 100%; }
	#nav-inner ul li a 							{ opacity: .8; transition: all .2s;}
	#nav-inner ul li a:hover 					{ opacity: 1; }
	#nav-inner ul li.active a					{ border-bottom: 1px solid var(--light-border-color);}
	#nav-inner .nav-links 						{ margin: auto; }
	#nav-inner .nav-links li					{ margin: 2.5em 0; font-size: 1.33em;  }
	#nav-inner .nav-links li a					{ display: block; width: 100%; white-space: nowrap; letter-spacing: .2em; }
	#nav-inner .nav-links li i 					{ margin-right: .8em;}
	#nav-inner .social-links 					{ margin: 0 12% 12% 12%;}
	#nav-inner .social-links li 				{ margin-right: 15px; }
	#nav-inner .social-links li a 				{ display:inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; border: 1px solid var(--light-border-color);  }
	#nav-inner .social-links li i 				{ font-size: 1.33em;}
	
	#menu-button 								{ position: fixed; left: 4%; top: 17px; width: 24px; height: 18px; margin-left: 0; z-index: 1002; cursor: pointer; }
	#menu-button span 							{ display: block; position: absolute; height: 1px; width: 100%; background-color:#fff; opacity: .7; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; }
	#menu-button span:nth-child(1) 				{ top: 0px; transform-origin: left center; }
	#menu-button span:nth-child(2) 				{ top: 8px; transform-origin: left center; }
	#menu-button span:nth-child(3) 				{ top: 17px; transform-origin: left center; }

	.show-nav #nav-wrapper						{ transform: translateX(0);}
	.show-nav #menu-button span:nth-child(1) 	{ transform: rotate(45deg); }
	.show-nav #menu-button span:nth-child(2) 	{ width: 0%; opacity: 0; }
	.show-nav #menu-button span:nth-child(3) 	{ transform: rotate(-45deg); }
 
	.headroom #menu-button								{ will-change: transform;	transition: transform 400ms;}
	.headroom--unpinned:not(.show-nav) #menu-button		{ transform: translateY(-64px);}


	/** Main **/
	#main-wrapper								{ padding: 30px 0;}

	/** Footer **/
	#footer-wrapper								{ padding-top: 20px;}
	#footer-inner 								{ flex-direction: column; width: 92%;}
	#footer-inner .footer-links					{ width: 100%; margin-bottom: 20px; flex-wrap: wrap; justify-content: space-around; }
	#footer-inner .footer-links li				{ margin: 5px 10px;}
	#footer-inner .footer-nav					{ margin-bottom: 15px;}
	#footer-inner .footer-nav li				{ margin: 0 30px;}
	#footer-inner .social-links 				{ display: none;}

	#footer-copyright							{ text-align: center;}

}


/*
-----------------------------
For 920px or less
-----------------------------
*/
@media screen and (max-width: 920px) {
}


/*
-----------------------------
For 768px or less
-----------------------------
*/
@media screen and (max-width: 768px) {
}

/*
-----------------------------
For 640px or less
-----------------------------
*/
@media screen and (max-width: 640px) {

	/** Header **/
	#header-inner							{ padding-left: 40px;}
	#header-inner h1						{ width: 100px;}
	#header-icons							{ margin-right: 15px;}

	/** Footer **/
	#footer-wrapper							{ padding-top: 0;}
	#footer-inner .footer-nav li			{ margin: 0 20px;}
	
	/** Feedback **/
	#feedback-header						{ height: 300px; background-position: 30% 50%;}
	#feedback-header .content h2 			{ font-size: 1.6em; }
	.feedback-form input[type="text"],
	.feedback-form input[type="email"],
	.feedback-form input[type="password"],
	.feedback-form textarea,
	.feedback-form .select2-container--default .select2-selection--single { height: 38px; }
	.feedback-form .select2-container--default .select2-selection--single .select2-selection__rendered { height: 36px; line-height: 36px; }
	.feedback-form .select2-container--default .select2-selection--single .select2-selection__arrow	{ width: 38px; height: 38px;}
	.feedback-form textarea				{ height: 150px;}

}

/*
-----------------------------
For 480px or less
-----------------------------
*/
@media screen and (max-width: 480px) {
	
	/** Footer **/
	#footer-inner .footer-nav li			{ margin: 0 15px;}
	
}

/*
-----------------------------
For 360px or less
-----------------------------
*/

@media screen and (max-width: 360px) {
	
	/** Feedback **/
	#feedback-header						{ height: 270px; background-position: 28% 50%;}

}