@media only screen and (min-width:1200px) {
	.container {max-width: 1325px;}
}




@media only screen and (max-width:1450px) {
	.container {max-width: 1325px;}

	#header .menu-item a {font-size: 12px; padding: 0 15px;}
}

@media only screen and (max-width:1300px) {

	body {position: relative;}
	.container {padding-left: 30px; padding-right: 30px;}
	.container-fluid {padding-left: 0; padding-right: 0; overflow-x: hidden;}
	
	#teal-module .tag {margin-top: -35px !important;}

	#home #hero .box {min-height: 0;}
	.bx-controls {display: none;}
	#header {
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		transition: all .3s ease;
	}
	#header .menu-main-left-container {display: none;}
	#header .menu-main-right-container {display: none;}

	#hamburger {width: 50px; height: 40px; position: absolute; top: 55px; right: 15px; z-index: 9999; display: block; cursor: pointer;
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		transition: all .3s ease;
	}
	#hamburger .top {height: 5px; background: #FFF; top: 8px; position: absolute; width: 70%; left: 15%; background: #222539; border-radius: 10px;}
	#hamburger .middle {height: 5px; background: #FFF; top: 17px; position: absolute; width: 70%;left: 15%; background: #222539; border-radius: 10px;}
	#hamburger .bottom {height: 5px; background: #FFF; top: 26px; position: absolute; width: 70%;left: 15%; background: #222539; border-radius: 10px;}

	.affix #hamburger {top: 20px;}
	#header #logo img {width: 133px;
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		transition: all .3s ease;
	}
	#header.affix #logo img {width: 100px; margin-bottom: 20px;}

	#slide-out {position:fixed; width: 60%; right:-60%; top: 0; background: #11131D; height: 100%; z-index: 9999; overflow: scroll; display: block;
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		transition: all .3s ease;
	}
	#slide-out.active {right: 0;}
	#header.active {right: 60%;}
	#slide-out ul {background: transparent; top: auto; left: auto; position: relative; border-radius: 0; padding: 0; margin: 0;}
	#slide-out ul li {display: block; line-height: 25px; border-bottom: 1px solid #000; border-top: 1px solid #1c2128; float: none !important;}
	#slide-out ul li a {font-size: 13px; line-height: 28px; padding: 10px 20px; color:#FFF; display: block; text-transform: uppercase; font-weight: 700; letter-spacing: 1px;}
	#slide-out ul li .sub-menu {position: relative; width: auto; top: auto; box-shadow: 0;  background: #111; display: none; padding: 5px 0;}
	#slide-out ul li .sub-menu li {border-bottom: 0; border-top:0; margin-bottom: 20px;}
	#slide-out ul li .sub-menu li a {padding: 0 0 0 30px; font-size: 12px; line-height: 20px;}
	#slide-out ul li .sub-menu li .sub-menu li a {padding: 0 0 0 50px}

	#service #hero .box {padding-left: 90px; padding-right: 30px;}

	#teal-module {padding-left: 0; padding-right: 0;}
	#teal-module .frame {padding-left: 50px; padding-right: 0;}

	#content-area h1 {font-size: 46px; line-height: 58px;}

	#events .intro {height: 320px;}

}

@media only screen and (max-width:991px) {

	html {min-width: 320px;}
	
	h1 {font-size: 45px;}
	h2 {font-size: 35px;}
	h3 {font-size: 33px;}

	.spacer-xxl {height: 100px}

	#home #hero .box {padding-top: 100px; padding-bottom: 100px;}
	#home #hero .intro {font-size: 30px; line-height: 45px;}

	#teal-module .artwork {max-width: 110%;}

	#framed-content {padding-top: 80px; padding-bottom: 60px}

	#content-area h1 {font-size: 36px; line-height: 45px;}
	
	#interior #hero {height: 380px;}
	#interior #hero .box {margin: 0 auto; padding-top: 150px; padding-bottom: 150px;}

	#team img {max-width: 150px;}

	#interior #module-pair .inside {height: auto; padding: 40px 50px 20px;}

	.page-template-page-contact {background: inherit;}
	#contact-bg {background: none;}

	#contact #sidebar {background: #8DCBE9; margin-left: -30px; margin-right: -30px; padding: 30px; text-align: center;}
	
	#events .intro {height: auto;}
}


@media (max-width: 768px) {

	img {max-width: 100%; height: auto;}

	body {padding-top: 100px !important}

	h1 {font-size: 25px;}
	h2 {font-size: 20px; line-height: 28px;}
	h3 {font-size: 24px;}
	p {font-size: 15px;}
	li {font-size: 15px;}


	#header {height: 110px !important}
	#header #logo img {margin: 30px auto 0;}
	#header.affix {height: 80px !important}

	#hamburger {top: 35px; right: 5px;}

		
	.container {padding-left: 15px; padding-right: 15px;}
	.spacer-xxl {height: 70px;}
	.spacer-xl {height: 60px;}
	.spacer-lg {height: 50px;}

	#home #hero .box {padding: 60px 40px; margin-left: 0; margin-right: 0;}
	#home #hero .box h1 {font-size: 30px; margin: 0; padding: 0;}
	#home #hero .box h3 {font-size: 15px; line-height: 22px; display: none;}

	#home #hero .intro {font-size: 20px; line-height: 30px;}
	#home #hero img {width: 100px;}
	
	#interior #hero {height: 210px; margin-bottom: 120px}
	#interior #hero .box {margin: 0 auto; padding:90px 50px 70px; max-width: 375px;}
	#interior #hero .box h1 {font-size: 42px;}
	.page-id-9 #interior #hero {margin-bottom: 155px;}

	#service #hero {padding-bottom: 60px;}
	#service #hero .box {padding: 45px; background-image:none;}
	#service #hero img {max-width: 200px; max-height: 300px; margin: 30px auto 0;}
	#service #hero .box .intro {font-size: 15px; line-height: 22px;}
	#service #hero #bg {height: 100%;}
	.page-id-119 #service #hero h1 {font-size: 25px;}
	.page-id-125 #service #hero img,
	.page-id-119 #service #hero img {margin: 30px auto 0;}	
	#service #teal-module .right img {margin: 30px auto 0; max-height: 300px;}
	#service #teal-module .title {margin: 0;}

	#teal-module  {padding-top: 60px;}
	#teal-module .tag {margin-top: -100px}
	#teal-module .frame {background-image: none; padding: 0;}
	#teal-module .content ul {column-count: 1}
	#teal-module .content ul li {margin-bottom: 5px}
	#teal-module .artwork {max-width: 200px; margin: 0 auto; display: block;}
	#teal-module .sep {margin-bottom: 30px;}

	#wavy-module {padding: 60px 0; background-size: 200% 100%}
	#wavy-module h3 {font-size: 25px; padding-left: 30px; padding-right: 30px;}
	#service #wavy-module, #interior #wavy-module { background-size: 200% 100% }

	#services-resources-module .btn {width: 260px; margin: 0 0 20px}
	#services-resources-module .btn .valign div {height: 100px; font-size: 24px; line-height: 32px;}
	
	#framed-content {padding-top: 60px}
	#framed-content .container {padding-left: 60px; padding-right: 60px;}
	#framed-content .line-2 {font-size: 18px; line-height: 25px;}
	
	#content-area {padding: 30px 0;}
	#content-area h1 {font-size: 26px; line-height: 32px;}
	#content-area h3 {font-size: 18px; line-height: 25px;}
	#content-area p {font-size: 15px;}
	#content-area p.two-column {column-count: 1}

	#module-pair .inside {padding: 30px;}
	#module-pair .left .inside {padding: 30px}
	#module-pair .inside {height: auto}

	#team {background-size: 220% 400px;}
	
	#contact #sidebar {margin-left: -15px; margin-right: -15px;}
	#contact input[type="submit"] {width: 100%;}

	#footer {padding: 50px 0; text-align: center;}
	#footer ul {column-count: 2; margin-bottom: 30px;}
	#footer .upper a {font-size: 12px;}
	#footer .social {}
	
	#footer .colophon {font-size: 12px;}
	#footer .right {text-align: center;}

	#events .event h3 {font-size: 20px; line-height: 30px; padding: 11px 0;}
	#events .event .date .mon {font-size: 15px; line-height: 23px;}
	#events .event .date .day {font-size: 30px; line-height: 30px;}

	.fsBody .fsForm .fsSectionHeading {padding-top: 0 !important;}

}




@media (max-width: 415px) {
	#interior #hero .box {margin: 0 30px;}
}


@media (max-width: 375px) {
	#interior #hero .box h1 {font-size: 32px;}
	#home #hero .box h1 {font-size: 27px;}
}