html, body {
  height: 100%;
  margin: 0;
}

.page-wrapper {
  display: table;
	table-layout: fixed;
  height: 100%;
  width: 100%;
}
.page-content {
  display: table-row;
  height: 100%;
}
.page-footer {
  display: table-row;
}

/*------Preloader------*/
#preloader {
  position: fixed;
  top: -20rem;
  left: 0;
  right: 0;
  bottom: -20rem;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 19999;
  /* makes sure it stays on top */
}

#status {
  width: 48px;
  height: 48px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  margin: -24px 0 0 -24px;
  /* is width and height divided by two */
}

/*------Header------*/
header {
	height: 100px;
}
.logo-container {
	float: left;
	width: 228px;
	height: 45px;
}
#logo {
	display: block;
	margin-top: 28px;
	width: 228px;
  height: 45px;
  background: url(../images/logo.svg) center / 228px 45px no-repeat;
}
.no-svg #logo {
	display: block;	
	margin-top: 28px;
	width: 228px;
  height: 45px;
  background: url(../images/logo.png) center / 228px 45px no-repeat;
}
#contact-nav {
	height: 90px;
	overflow: hidden;
}
#header-contact {
	float: right;
	display: block;	
  margin-top: 15px;
	width: 100%;
	color: #424242;
}
#header-contact a  {
	margin: 0;
	padding: 0;
	color: #424242;
	font-size: 1rem;
	line-height: 22px;
	font-weight: 600;
	vertical-align: middle;
}
#header-contact i {
	margin: 0 8px 0 40px;
	padding: 0;
	color: #424242;
	font-size: 22px;
	line-height: 22px;
	vertical-align: middle;
}
.flag-image {
	margin-right: 8px;
	margin-left: 40px;
	width: 24px;
	height: 18px;
	vertical-align: text-bottom;
	border: solid 1px #d1d3d4;
}
nav {
	float: right;
	width: 100%;
	text-align: center;
}
.nav-wrapper {
	display:inline-block;
	margin-top: 18px;
}
nav ul a {
  padding: 0 18px;
}


/*------Modal-----*/
.modal {  
  width: 40%;
  min-width: 280px;
	max-width: 360px;
}

.modal .modal-content {
  padding: 24px;
	background-color: #f5f5f5;
}
.modal-top {
	display: block;
	position: relative;
	width: 100%;
	padding: 24px 24px 20px;
	background-color: #fff;
	border-bottom: solid 1px #d1d3d4;
	overflow: hidden !important;
}
.modal-bottom {
	display: block;
	position: relative;
	width: 100%;
	padding: 20px 24px;
	background-color: #fff;
	border-top: solid 1px #d1d3d4;
	overflow: hidden !important;
}
.flag-image2 {
	margin-right: 12px;
	width: 32px;
	height: 24px;
	vertical-align: text-bottom;
	border: solid 1px #d1d3d4;
}

/*------Main------*/
.fluid-ratio-resize { 
	margin: 0 auto;	
	max-width: 1920px; /* actual img width */
	*height: 600px; /* actual img height - IE7 */
	background-image: url(../images/home-banner.jpg);
	background-size: cover;
	background-position: 30% 50%;
	box-sizing: content-box;
} /* target 800px 400px */
.fluid-ratio-resize:after {
	content: " ";
	display: block; 
	width: 100%; 
	padding-top: 17.857%; /* slope */
	height: 257.143px; /* start height */
}
.flexbox {		
  display: -webkit-flex;		
  display: -ms-flexbox;		
  display: flex;
  overflow: visible !important;
}
.flexbox .flex-col {
  flex: 1;
	background-color: #f5f5f5;
	border: solid 1px #d1d3d4;	
}
.thumb-box {
	max-width: 480px;
	margin: 0 auto;
	border: solid 1px #d1d3d4;
}
.thumb-box:hover .box-bottom, .thumb-box:hover .thumb, .flex-col:hover .box-bottom, .flex-col:hover .thumb {
  filter: alpha(opacity=50); /* internet explorer */
  opacity: 0.5;           /* fx, safari, opera, chrome */
}
.box-bottom {
	display: block;
	margin-top: -0.2667rem;
	width: 100%;
	max-width: 600px;
	padding: 0.75rem;
	background-color: #f5f5f5;
	border-top: 0.2667rem solid #8496af;
	overflow: hidden !important;
}
.thumb {
	display: block;
	max-width: 1920px; /* actual img width */
	*height: 340px; /* actual img height - IE7 */
	background-image: url(../images/home-banner.jpg);
	background-size: cover;
	background-position: 50% 50%;
	box-sizing: content-box;
}
.thumb:after {
	content: " ";
	display: block; 
	width: 100%;
	padding-top: 8.125%; /* slope */
	height: 184px; /* start height */
}
.thumb1 {
	background-image: url(../images/what-we-do-banner.jpg);
	background-position: 77% 50%;
}
.thumb2 {
	background-image: url(../images/why-tasc-banner.jpg);
	background-position: 52% 50%;
}
.thumb3 {
	background-image: url(../images/how-it-works-banner.jpg);
	background-position: 50% 50%;
}
.svg-container {
	display: block;
	width: 100%;
	margin: 0;
	overflow: hidden;
}
#home-icons {
	box-sizing:content-box;
	display: block;
	margin: 1.5rem auto 0;
	padding: 0 2.5%;
	width: 95%;
	max-width: 945.61px;
	min-width: 720px;
	fill: none;
	stroke: #FFF;
	stroke-miterlimit: 2;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.tasc-blue-text {
	color: #8496af;
}
.tasc-blue {
	background: #8496af;
}

/*------What we do------*/
.fluid-ratio-resize-what-we-do { 
	margin: 0 auto;	
	max-width: 1920px; /* actual img width */
	*height: 300px; /* actual img height - IE7 */
	background-image: url(../images/what-we-do-banner.jpg);
	background-size: cover;
	background-position: 50% 50%;
	box-sizing: content-box;
} /* target 800px 400px */
.fluid-ratio-resize-what-we-do:after {
	content: " ";
	display: block; 
	width: 100%; 
	padding-top: 8.929%; /* slope */
	height: 128.571px; /* start height */
}

/*------Why TASC------*/
.fluid-ratio-resize-why-tasc { 
	margin: 0 auto;	
	max-width: 1920px; /* actual img width */
	*height: 300px; /* actual img height - IE7 */
	background-image: url(../images/why-tasc-banner.jpg);
	background-size: cover;
	background-position: 50% 50%;
	box-sizing: content-box;
} /* target 800px 400px */
.fluid-ratio-resize-why-tasc:after {
	content: " ";
	display: block; 
	width: 100%; 
	padding-top: 8.929%; /* slope */
	height: 128.571px; /* start height */
}
#why-tasc-icons1 {
	box-sizing:content-box;
	display: block;
	margin: 1.5rem auto 0;
	padding: 0 2.5%;
	width: 95%;
	max-width: 358.66px;
	min-width: 220px;
	fill: none;
	stroke: #8496af;
	stroke-miterlimit: 2;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.pull-up-l {
	margin-bottom: -4rem;
}
#why-tasc-icons2 {
	box-sizing:content-box;
	display: block;
	margin: 1.5rem auto 0;
	padding: 0 2.5%;
	width: 95%;
	max-width: 354.17px;
	min-width: 220px;
	fill: none;
	stroke: #fff;
	stroke-miterlimit: 2;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*------How it works------*/
.fluid-ratio-resize-how-it-works { 
	margin: 0 auto;	
	max-width: 1920px; /* actual img width */
	*height: 300px; /* actual img height - IE7 */
	background-image: url(../images/how-it-works-banner.jpg);
	background-size: cover;
	background-position: 50% 50%;
	box-sizing: content-box;
} /* target 800px 400px */
.fluid-ratio-resize-how-it-works:after {
	content: " ";
	display: block; 
	width: 100%; 
	padding-top: 8.929%; /* slope */
	height: 128.571px; /* start height */
}

h2.right-underline {
	float: right;
}

.triangle {
	box-sizing: content-box;
	display: block;
	position:absolute;
	width: 60%;
	margin: 0 20%;
	max-width: 80px;
	min-width: 40px;	
}
#how-it-works-icons1 {
	box-sizing:content-box;
	display: block;
	margin: 1.5rem auto 0;
	padding: 0 2.5%;
	width: 95%;
	max-width: 354.17px;
	min-width: 220px;
	fill: none;
	stroke: #fff;
	stroke-miterlimit: 2;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
#how-it-works-icons2 {
	box-sizing:content-box;
	display: block;
	margin: 1.5rem auto 0;
	padding: 0 2.5%;
	width: 95%;
	max-width: 358.66px;
	min-width: 220px;
	fill: none;
	stroke: #8496af;
	stroke-miterlimit: 2;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
#how-it-works-icons3 {
	box-sizing:content-box;
	display: block;
	margin: 1.5rem auto 0;
	padding: 0 2.5%;
	width: 95%;
	max-width: 353.3px;
	min-width: 220px;
	fill: none;
	stroke: #fff;
	stroke-miterlimit: 2;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
#how-it-works-icons4 {
	box-sizing:content-box;
	display: block;
	margin: 1.5rem auto 0;
	padding: 0 2.5%;
	width: 95%;
	max-width: 343.37px;
	min-width: 220px;
	fill: none;
	stroke: #8496af;
	stroke-miterlimit: 2;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
#how-it-works-icons5 {
	box-sizing:content-box;
	display: block;
	margin: 1.5rem auto 0;
	padding: 0 2.5%;
	width: 95%;
	max-width: 360.2px;
	min-width: 220px;
	fill: none;
	stroke: #fff;
	stroke-miterlimit: 2;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*------FAQs------*/
.fluid-ratio-resize-faqs { 
	margin: 0 auto;	
	max-width: 1920px; /* actual img width */
	*height: 300px; /* actual img height - IE7 */
	background-image: url(../images/faqs-banner.jpg);
	background-size: cover;
	background-position: 50% 50%;
	box-sizing: content-box;
} /* target 800px 400px */
.fluid-ratio-resize-faqs:after {
	content: " ";
	display: block; 
	width: 100%; 
	padding-top: 8.929%; /* slope */
	height: 128.571px; /* start height */
}
.collapsible.popout > li .question-mark:after {
	content: "help_outline";
}
.collapsible.popout > li.active .question-mark:after {
	content: "help"
}

/*------Contact------*/
.fluid-ratio-resize-contact { 
	margin: 0 auto;	
	max-width: 1920px; /* actual img width */
	*height: 300px; /* actual img height - IE7 */
	background-image: url(../images/contact-banner.jpg);
	background-size: cover;
	background-position: 50% 50%;
	box-sizing: content-box;
} /* target 800px 400px */
.fluid-ratio-resize-contact:after {
	content: " ";
	display: block; 
	width: 100%; 
	padding-top: 8.929%; /* slope */
	height: 128.571px; /* start height */
}
.contact-box {
	display: block;
	margin: 0 auto;
}
.address-box {
	display: inline-block;
	margin-right: 5%;
	vertical-align: text-top;
}

/*------Contact Form------*/
/* label color */
.input-field label {
	color: #9e9e9e;
}
/* label focus color */
.input-field input[type=text]:focus + label, .input-field input[type=email]:focus + label, .input-field input[type=tel]:focus + label, #message:focus + label {
	color: #8496af;
}
/* label underline focus color */
.input-field input[type=text]:focus, .input-field input[type=email]:focus, .input-field input[type=tel]:focus, #message:focus {
	border-bottom: 1px solid #9e9e9e;
	box-shadow: 0 1px 0 0 #9e9e9e;
}
/* valid color */
.input-field input[type=text].valid, .input-field input[type=email].valid, .input-field input[type=tel].valid, #message.valid {
	border-bottom: 1px solid #8bc34a;
	box-shadow: 0 1px 0 0 #8bc34a;
}
/* invalid color */
.input-field input[type=text].invalid, .input-field input[type=email].invalid, .input-field input[type=tel].invalid, #message.invalid {
	border-bottom: 1px solid #f44336;
	box-shadow: 0 1px 0 0 #f44336;
}
/* icon prefix focus color */
.input-field .prefix.active {
	color: #8496af;
}
.thank-you {
  font-size: 1.4rem;
	font-weight: 500;
  line-height: 120%;
	margin: 1rem 0 0;
}
 
/*------Footer------*/
.footer-copyright {
	border-top: solid 1px #d1d3d4;
}
footer h5 {
	display: inline-block;
	margin: 0.9rem 0;
	color: #9e9e9e;
	text-align: justify;
  text-justify: inter-word;
	line-height: 1.4rem;
}
.footer-links {
	float: right;
	display: inline-block;
}
.footer-link {
	display: inline-block;
}
footer a:link, footer a:visited, footer a:active {
	display: inline-block;
	color: #9e9e9e;
	vertical-align: baseline;
	text-decoration: none;
}
footer a:hover {
	filter: alpha(opacity=50); /* internet explorer */
  opacity: 0.5;           /* fx, safari, opera, chrome */
}
.wired {
	display: inline-block;
  font-family: 'TeXGyreAdventorRegular', Arial, sans-serif;
	font-size: 1rem;
	line-height: 1rem;
}
.wired span {
  font-family: 'TeXGyreAdventorBold', Arial, sans-serif;
}
.small-link {
	display: block;
	margin: 0.6rem 0;
	line-height: 1.8rem;
}

@media only screen and (min-width : 601px) and (max-width : 1280px) {

/*------Header------*/
header {
	height: 90px;
}
#logo {
	margin-top: 23px;
}
.no-svg #logo {
	margin-top: 23px;
}
#header-contact i {
	margin: 0 6px 0 24px;
}
.nav-wrapper {	
	margin-top: 16px;
}
nav ul a {
  padding: 0 15px;
}
	
}

@media only screen and (min-width : 801px) and (max-width : 1280px) {
.ml-xl-padding-right {
	margin-right: 1.5rem;
}
.ml-xl-padding-left {
	margin-left: 1.5rem;
}
}

@media only screen and (min-width: 993px) and (max-width: 1280px) {
/*------Contact------*/
.form-col1 {
	margin-right: 1.5rem;
}
.form-col2 {
	margin-left: 1.5rem;
}
}

@media only screen and (min-width : 0px) and (max-width : 992px) {
	
/*------Header------*/
header {
	height: auto;
}
.logo-container {
	float: none;
	width: 100%;
}
#logo {
	margin: 28px auto 0;
}
.no-svg #logo {
	margin: 28px auto 0;
}
#mobile-menu {
  display: inline-block;
	position: absolute;
	top: 15px;
  color: #424242; 
  font-family: "Roboto", sans-serif;
	font-weight: 600;
	line-height: 18px;
  vertical-align: middle;
	z-index: 100;
}
#mobile-menu .material-icons {
  display: inline-block;
	padding: 0;
  color: #424242;
	margin: 0;
	font-size: 22px;
	line-height: 18px;
	vertical-align: middle;
}
#contact-nav {
	margin: 0;
	height: auto;
	overflow: hidden;
}
.nav-container {
	height: 0;
}
h2.right-underline {
	float: none;
}
#mobile-header-contact {
	margin: 0;
	width: 100%;
	text-align: center;
}
#contact-box {
	display: inline-block;
	margin: 18px auto 3px;
}
.contact-detail {
	display: inline-block;
	margin: 0 15px 0;
	vertical-align: middle;	
}
#mobile-header-contact a  {
	margin: 0;
	padding: 0;
	color: #424242;
	font-size: 1rem;
	line-height: 22px;
	font-weight: 600;
	vertical-align: middle;
}
#mobile-header-contact i {
	margin: 0 8px 0 0;
	padding: 0;
	color: #424242;
	font-size: 18px;
	line-height: 22px;
	vertical-align: middle;
}

/*------Why TASC------*/
.pull-up-l {
	margin-bottom: 0;
}
}

/*------Text Styles------*/

@media only screen and (min-width: 0) {
html {
	font-size: 13px;
}
h1 {
  font-size: 2.4rem;
	margin: 0.8rem 0 0.64rem;
}
p {
	margin: 0;
	font-size: 0.9333rem;
  font-weight: 400;
  line-height: 130%;
  color: #424242;
}
}

@media only screen and (min-width: 601px) {
html {
	font-size: 14px;
}
h1 {
  font-size: 2.6rem;
}
}

@media only screen and (min-width: 993px) {
html {
	font-size: 14px;
}
h1 {
  font-size: 2.8rem;
}
}

@media only screen and (min-width: 1281px) {
	
html {
	font-size: 15px;
}

h1 {
  font-size: 2.8rem;
	font-weight: 700;
  line-height: 130%;
  margin: 0.8rem 0 0;
}
h2 {
  font-size: 2.4rem;
	font-weight: 300;
  line-height: 120%;
	margin: 0 0 1rem;
	color: #8496af;
}
h2.h2-alt {
  font-size: 1.6rem;
	font-weight: 500;
  line-height: 120%;
	margin: 1rem 0 0;
}
h3 {
  font-size: 1.2rem;
	font-weight: 500;
  line-height: 1.8rem;
  margin: 0;
}
h4 {
  font-size: 1rem;
  line-height: 110%;
  margin: 0;
}
h5 {
  font-size: 0.9333rem;
  line-height: 1rem;
  margin: 0;
}
h6 {
	font-size: 0.9333rem;
  line-height: 1rem;
  margin: 0;
}
p {
	margin: 0;
	font-size: 0.9333rem;
  font-weight: 400;
  line-height: 130%;
  color: #424242;
}

}