


@media only screen and (max-width:1200px) {

	#hero h1 .lower {font-size: 60px; letter-spacing: 4px;}
	#introduction h2 {font-size: 45px; line-height: 62px;}
	
	#primary-roles {padding: 60px 0 30px; text-align: center;}
	#primary-roles h3 {padding: 0 0 30px; text-align: center;}
	#primary-roles h3 br {display: none;}
	#primary-roles .right br {display: none;}
	#primary-roles .box {margin: 50px 15px;}

	#featured .lower {height: 300px;}

	#main-menu .menu-item a {font-size: 12px; padding: 0 15px;}

}

@media only screen and (max-width:991px) {

	/*html {min-width: 320px;}*/
	body {position: relative;}
	.container {width: auto}

	.spacer-xxl {height: 45px;}

	#header.affix #hamburger {top: 13px;}

	#hamburger {width: 50px; height: 40px; position: absolute; top: 20px; right: 0; z-index: 9999; display: block; cursor: pointer}
	#hamburger .top {height: 5px; background: #FFF; top: 8px; position: absolute; width: 70%; left: 15%; background: #D0021B; border-radius: 10px;}
	#hamburger .middle {height: 5px; background: #FFF; top: 17px; position: absolute; width: 70%;left: 15%; background: #D0021B; border-radius: 10px;}
	#hamburger .bottom {height: 5px; background: #FFF; top: 26px; position: absolute; width: 70%;left: 15%; background: #D0021B; border-radius: 10px;}

	#slide-out {position:fixed; width: 60%; right:-60%; top: 0; background: #0b0c0d; height: 100%; z-index: 9999; overflow: scroll;
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		transition: all .3s ease;
	}
	#slide-out.active {right: 0;}
	#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 {display: block; text-align: left; padding: 0 20px; color: #CCC; line-height: 44px; font-size: 15px;}
	#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;}
	#slide-out ul li .sub-menu li a {padding: 0 0 0 30px; font-size: 14px; line-height: 30px;}
	#slide-out ul li .sub-menu li .sub-menu li a {padding: 0 0 0 50px}
	
	#hero h1 {line-height: 60px;}
	#hero h1 .upper {font-size: 30px; letter-spacing: 1.5px;}
	#hero h1 .lower {font-size: 45px; letter-spacing: 3px;}

	#hero .valign {height: 700px;}

	#modules .mod {margin-bottom: 30px;}
	#introduction .stripes {top:80px;}
	#introduction .left {margin-bottom: 30px;}
	
	#primary-roles {padding-bottom: 60px;}
	#primary-roles h3 {white-space: normal;}
	#primary-roles .box {margin-bottom: 10px;}

	#featured .lower {height: auto;}
	#featured .row > div {margin-bottom: 30px;}
	
	#footer .logo {display: block; margin: 0 auto;}
	#footer .right {text-align: center; line-height: 20px; padding-top: 30px; font-size: 10px;}
	#footer {text-align: center;}
}


@media (max-width: 768px) {
	
	body {min-width: 320px;}
		
	.spacer-lg {height: 15px;}

	#hero .valign {text-align: center;}
	#hero h1 {line-height: 50px;}
/*	#hero h1 .upper {font-size:20px; line-height: 37px; padding-top: 10px; padding-bottom: 30px;}*/
	#hero h1 .upper {font-size:20px; line-height: 37px; padding-top: 10px;}
	#hero h1 .lower {font-size: 24px; letter-spacing: 2px;}

	#header #logo {height: 60px;}
	#header.affix #logo {height: 40px; margin-bottom: 10px;}
	
	#modules .mod {margin-bottom: 5px;}
	#modules .mod .inside {height: 80px; background-size: center center; background: #222 !important;}
	#modules .mod .inside h3 {font-size: 22px; padding-bottom: 6px;}

	#introduction {text-align: center;}
	#introduction h2 {font-size: 25px; line-height: 32px; margin-top: -80px;}

	#introduction .stripes {display: none}
	
	#feed {padding: 40px 0 0}
	#feed h2 {font-size: 25px;}
	#feed #filters li:first-child {display: none}
	#feed #filters li {margin: 0;}
	.bx-controls {display: none}
	#feed #we-text {left: -100px; top:90px;}
	#feed #filters {margin: 50px 0 0; padding: 0}

	#primary-roles h3 {font-size: 25px; line-height: 35px;}
	
	#page-upper .stripes {display: none;}
	#page-upper {padding: 3px 0; margin-top: 90px}
	#page-upper .breadcrumb {display: none}

	#content {padding-bottom: 0; padding-top: 30px;}

	#page-content h1 {font-size: 34px;}
	#page-content h2 {font-size: 15px;}
	#page-content h3 {font-size: 25px;}
	#page-content ol,
	#page-content ul {padding-left: 0;}
	#page-content .content-image {width: 100%; margin-bottom: 30px !important}

	#page-content .call-out {margin-right: 0; padding: 15px;}
	#page-content .call-out h4 {margin-right: -25px; margin-left: -15px; font-size: 17px; line-height: 27px;}
	#page-content .call-out ul {padding-left: 0;}

	#next-steps .lower {height: auto}
	#next-steps .row > div {margin-bottom: 80px;}

	#accordion .card-header h5 button {white-space: normal; padding-right: 60px; line-height: 20px; padding-left: 0;}

	.lp #page-content h1 {font-size: 30px;}
	.lp #page-content h2 {font-size: 20px;}
	.lp #cta {padding: 70px 0 30px; margin-bottom: 10px}
	.lp #cta .btn {padding: 7px; font-size: 15px;}
	.lp .aligncenter {max-width: 260px; width: 260px;}

	.lp .we {display: none;}

}

@media (max-width: 576px) {}






