/*
Theme Name: AFS Consulting 2018
Theme URI: http://truedigitalcom.com
Description: The 2018 AFS Consulting Website
Author: Nicholas Rhodes | True Digital Communications
Version: 1
*/


/*CSS Reset*/
html, body, div, span, applet, object, iframe,
p, pre, abbr, acronym, address, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
tt, var, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

h1, h2, h3{margin: 0; padding: 0; font-weight: normal; font-size: 1em}

img.centered, .aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}

a{color: #bc3c53; text-decoration: none}
a:hover {color: #000; text-decoration: underline;}
a:hover, input#searchsubmit:hover{cursor: pointer;}


p{
margin: 0 0 20px 0;
}

.imageright {
text-align: right;
}

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

.clear{clear: both}

/*End of Reset*/
html, body{padding: 0; margin: 0;}
body{font-size: 16px; color: #767575; line-height: 1.3em; background-color: #fff; overflow-x: hidden; font-family: 'trebuchet ms', helvetica, sans-serif; font-weight: 400}
.wrap, .owl-nav{width: 92%; max-width: 1170px; margin: 0 auto; padding: 0 4%; position: relative; clear: both;}

ul.strip{margin: 0; padding: 0; list-style-type: none;}


#mobile{display: none; z-index: 999; color: #bc3c53; position: absolute; right: 4%; top: 80px; font-size: 2em;}
#mobile:hover{color: #000;}
#mobile.active{color: #fff; font-size: 2.5em; line-height: 50px;}
.mobile-only{display: none}


#hero{width: 100%; position: absolute; width: 100%; background-color: rgba(255,255,255,.95); z-index: 999; -webkit-box-shadow: 0px 0px 14px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 14px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 14px -1px rgba(0,0,0,0.75);}
#hero .nav-bar{padding: 0; height: 145px;}
#hero .logo{width: 120px; float: left; padding: 20px 0}
#hero a img{width: 120px; float: left}
#hero .wrap{position: relative; overflow: visible; z-index: 10; height: 100%; padding: 0}

.no-hero{height: 145px;}
.no-single{height: 180px;}


@media only screen and (max-width: 520px){
	#hero .logo{width: 100px; padding-top: 0;}
}

#utility{position: absolute; right: 0; top: 20px; width: 80%; text-align: right}
#utility li{display: inline-block; margin-left: 40px; margin-bottom: 10px;}
#utility li a{color: #000;}
#utility li a span.fas{display: inline-block; margin-right: 15px; position: relative; top: 2px;}
#utility li a:hover{color: #bc3c53; text-decoration: none}

@media only screen and (max-width: 520px){
	#utility{top: 10px;}
	#utility li a{font-size: .875em}
  #utility li a span.fas{display: inline-block; margin-right: 5px;}
}


#hero ul#primary-nav{position: absolute; bottom: 20px; right: 0; text-align: right;}
#hero ul#primary-nav li{display: inline-block; position: relative; margin-left: 2px; text-align: center;}
#hero ul#primary-nav li:first-child{margin-left: 0}
#hero ul#primary-nav a{display: block; position: relative; z-index: 100;  overflow: hidden; font-weight: 700; font-size: 1.125em; padding: 0 12px; color: #bc3c53;}
#hero ul#primary-nav a:hover{text-decoration: none; color: #000}
#hero ul#primary-nav li.parent a{background-color: #dd6227; color: #fff; padding: 0 20px}
#hero ul#primary-nav li.parent a:hover{background-color: #17478f; color: #fff}

@media only screen and (max-width: 1110px){
	#hero ul#primary-nav a{font-size: 1em; padding: 0 5px}
}

@media only screen and (min-width: 941px){
	#hero ul#primary-nav{display: block !important}
}
@media only screen and (max-width: 940px){
	#utility{margin-right: 4%}
	#hero .wrap{position: static; overflow: visible}
	#hero ul#primary-nav{position: absolute; z-index: 800; padding-bottom: 50px; border-bottom: 10px solid #000; padding-top: 150px; top: 0px; bottom: auto; left: 0; background-color: #bc3c53; display: none}
	#hero ul#primary-nav li{display: block;}
	#hero ul#primary-nav li a{color: #fff; padding: 20px 0; font-size: 1.5em}
	#mobile{display: block;}
	#mobile.active{top: 73px}
}




.hero{position: relative; clear: both; height: 465px; border-bottom: 15px solid #000; margin-bottom: 50px;}
.hero div.background{position: absolute; width: 100%; top: 0; left: 0; bottom: 0; right: 0; z-index: 10; background-size: cover; background-repeat: no-repeat; background-position: top center;}

.hero div.background{z-index: 10; }

.hero.hero-triptych{height: auto; position: relative;}
.hero.hero-triptych img{width: 33.33%; height: auto; float: left;}
.hero.hero-triptych .images{position: relative; width: 100%; overflow: hidden; max-height: 465px;}

@media only screen and (max-width: 1260px){
	.hero.hero-triptych{top: 145px;}
}


.hero .content{position: absolute;  top: 0; left: 0; right: 0; bottom: 0; width: 92%; overflow: hidden; padding: 0 4%; overflow: visible; z-index: 20}
.hero .content .wrap{position: static; overflow: visible}
.hero .c-wrap{position: absolute; bottom: 0px; left: 0; width: 100%;}
.hero .c-wrap .c-t{display: block; transform: translateY(50%); width: 400px; padding: 20px; background-color: #bc3c53; margin: 0 auto; text-align: center;}
.hero .c-wrap h1{font-size: 2em; font-weight: 700; line-height: 1em; color: #fff; margin: 0 0 20px 0; padding: 0}

.page .hero, .page .hero .content, .page .hero div.background{height: 350px; margin-bottom: 0; background-position: center center}
.home .hero, .home .hero .content, .home .hero div.background{height: 465px; margin-bottom: 50px; background-position: top center;}

.page .hero div.background{background-position: top center}

.home .hero, .home .hero .content, .home .hero div.background{height: 365px; background-position: center center; margin-bottom: 0}
.hero img{display: none}

@media only screen and (max-width: 640px){
	.hero img{display: block}
	.hero div.background{background-image: none !important; position: relative !important}
	.hero, .hero .content, .hero div.background{height: auto !important}
}


.home .hero-triptych, .home .hero-triptych div.background, .home .hero-triptych .content{height: auto;}
.home .hero-triptych .content{height: auto;}
.home .hero.hero-triptych div.background{height: 100%; margin-bottom: 100px; top: 50px;}
.home .hero.hero-triptych .c-wrap .c-t2{transform: translateY(0)}

@media only screen and (max-width: 1260px){
	.hero.hero-triptych{top: 145px; margin-bottom: 200px;}
}
@media only screen and (max-width: 540px){
	.home .hero.hero-triptych div.background{position: relative; clear: both; height: auto; top: auto; height: auto; margin-bottom: 0}
	.home .hero.hero-triptych .content{position: relative; padding: 0;  background-color: #bc3c53; width: 100%; margin-bottom: 0}
	.home .hero.hero-triptych .content .wrap{padding: 0}
	.hero .c-wrap .c-t{transform: translateY(0); width: auto; padding: 20px;}
	.hero .c-wrap{position: relative; bottom: auto; left: auto; width: 100%;}
	.hero.hero-triptych{top: 145px; margin-bottom: 100px;}


}


.hero a{display: inline-block; background-color: #fff; color: #bc3c53; width: 200px; height: 55px; line-height: 55px; text-align: center; text-transform: uppercase; border-radius: 5px;}
.hero a:hover{background-color: #d8aa3a; color: #fff; text-decoration: none;}

@media only screen and (max-width: 540px){
	.hero .c-wrap h1{font-size: 1.5em;}
	.hero .c-wrap .c-t{width: 92%; padding: 30px 4%;}
}

article.page h1{font-size: 2.25em; color: #000;  font-weight: 700; line-height: 1.3em; margin-bottom: 20px}

.btn{transition: all .5s ease; display: inline-block; background-color: #fff; color: #bc3c53; width: 200px; height: 55px; line-height: 55px; text-align: center; text-transform: uppercase; border-radius: 5px;}
.btn:hover{text-decoration: none; background-color: rgb(216,170,58); color: #fff;}

.gallery-item img{max-width: 90%; height: auto}

.single .basic-content{max-width: 770px; margin: 0 auto;}
.page:not(.page-id-16) .basic-content .wrap{max-width: 860px; margin: 0 auto;}
.basic-content{margin: 0; padding: 60px 0; overflow: hidden}
.home .basic-content{padding: 60px 0}
.basic-content h1, article.page h1{font-size: 2.25em; color: #000;  font-weight: 700; line-height: 1.3em; margin-bottom: 20px}
.basic-content h2, article.page h2{font-size: 1.5em; color: #767575;  font-weight: 700; line-height: 1.3em; margin-bottom: 25px;}
.basic-content h3, article.page h3{font-size: 1em; color: #767575; font-weight: 700; margin: 50px 0 25px 0}
.basic-content p, .basic-content ul{font-size: 1em; color: #767575; line-height: 1.3em; font-weight: 300}

.basic-content input[type="submit"]{background-color: #bc3c53; color: #fff; border: 0; padding: 0px 50px; line-height: 50px; text-transform: uppercase;}
.basic-content input[type="submit"]:hover{background-color: rgb(216,170,58); cursor: pointer}
.basic-content .btn{background-color: #bc3c53; color: #fff; border: 1px solid #bc3c53}
.basic-content .btn:hover{background-color: #fff; color: #bc3c53; }
.basic-content strong{font-weight: 700}

.content-Red{background-color: #bc3c53}
.content-Red .wrap  ul, .content-Red .wrap h1, .content-Red .wrap h2, .content-Red .wrap p, .content-Red{color: #fff}
.content-Red .btn{background-color: #fff; color: #bc3c53}
.content-Red .btn:hover{background-color: rgb(216,170,58); color: #fff}

.content-Gold{background-color: rgb(216,170,58);}
.content-Gold .wrap  ul, .content-Gold .wrap h1, .content-Gold .wrap h2, .content-Gold .wrap p, .content-Gold{color: #fff}
.testimonial.content-White .wrap  ul, .testimonial.content-White .wrap h1, .testimonial.content-White .wrap h2, .testimonial.content-White .wrap p, .testimonial.content-White, .testimonial.content-White blockquote, .testimonial.content-White  span{color: #767575}

.content-Gold .cta-wrap .btn, .basic-content.content-Gold .btn{background-color: #fff; color: #bc3c53; border: 0}
.content-Gold .cta-wrap .btn:hover, .basic-content.content-Gold .btn:hover{background-color: #bc3c53; color: #fff}

.single .basic-content ul li, .single .basic-content ol li{margin-bottom: 20px;}
.single .basic-content ul li p, .single .basic-content ol li p{margin-top: 20px;}

.cta{clear: both; position: relative;}
.cta-wrap{color: #fff; background-size: cover; background-position: center center; background-repeat: no-repeat; overflow: hidden}
.cta-wrap .wrap{position: static; max-width: 970px; min-height: 445px;}
.cta-wrap .content{width: 50%; height: 100%; float: right; position: relative  }
.cta-wrap h2, .cta-wrap h1{font-size: 2.25em; font-weight: 700; line-height: 1.3em; color: #000000; margin-bottom: 20px;}
.cta-wrap .description{font-size: 1em; line-height: 1.3em; color: #767575}
.cta-wrap .btn{color: #fff; background-color: #bc3c53}
.cta-wrap .btn:hover{background-color: rgb(216,170,58);}

.cta-wrap .image{position: absolute; top: 0; left: 0; bottom: 0; width: 50%; background-size: cover; background-position: center center; line-height: 0; }
.cta-wrap .image img{visibility: hidden}
.cta-wrap.cta-left .image{left: auto; right: 0}
.cta-wrap.cta-left .content{left: 0;}

.cta-wrap .t{display: table; height: 100%; max-width: 580px;  top: 0; left: 0; bottom: 0}
.cta-wrap.cta-left .t{position: absolute; right: 0; left: auto;}
.cta-wrap .td{display: table-cell; vertical-align: middle; padding-top: 50px; padding-left: 45px;}
.cta-wrap.cta-right .content{right: 0%}
.cta-wrap.cta-left .content .td{padding-left: 0%}
.cta-wrap.cta-left .content .td{padding-right: 0%}

@media screen and (max-width: 920px){
	.cta-wrap .description{font-size: 1.125em !important }
  .cta-wrap .wrap{position: static; max-width: 970px; min-height: 550px;}
	.cta-wrap h2{font-size: 2em;}
}


@media screen and (max-width: 820px){
	.cta-wrap .t, .cta-wrap .td, .cta-wrap.cta-left .t, .cta-wrap.cta-left .td{margin: 0 auto; padding: 0 !important; position: relative; display: block; max-width: 100%; height: auto; top: auto; left: auto; bottom: auto}
	.cta-wrap .image{position: relative; top: auto; left: -4%; bottom: auto; width: 110%; max-width: 110%;}
  .cta-wrap .content{width: 92%; height: auto; position: relative; left: auto;  padding: 30px 4%; right: 0 !important}
	.cta-wrap.cta-left .mobile-only{display: block; left: -5%;}
	.cta-wrap.cta-left .image:nth-child(3){display: none}
}

footer{background-color: #000; color: #fff; height: 55px;}
footer .copyright{font-size: .875em; line-height: 55px;}
footer .copyright p{margin: 0;}
footer a:hover{color: #d8aa3a; text-decoration: underline}


.two-column-section{color: #fff; line-height: 1.5em; overflow: hidden; height: 360px;}
.two-column-section h2, .two-column-section h1{font-size: 2.25em; line-height: 1.3em; margin-bottom: 25px;}
.two-column-section .text{width: 80%; margin: 0 auto}
.two-column-section .left{width: 50%; float: left; height: 360px; background-size: cover; background-position: top center;}
.two-column-section .right{width: 50%; float: right; height: 360px; background-size: cover; background-position: top center;}
.two-column-section  .t{display: table; height: 100%; width: 100%; max-width: 580px;}
.two-column-section  .td{display: table-cell; vertical-align: middle; text-align: center;}
.two-column-section .content{position: relative; height: 100%; width: 100%;}
.two-column-section .left .content{background-color: rgba(188,60,83,.9)}
.two-column-section .right .content{background-color: rgba(216,170,58,.9)}
.two-column-section .left .t{position: absolute; right: 0}
.two-column-section .right .t{position: absolute; left: 0}
.two-column-section .right .btn:hover{background-color: rgb(188,60,83)}

@media only screen and (max-width: 640px){
	.two-column-section{height: auto}
	.two-column-section .left,
	.two-column-section .right{width: 100%; float: none; margin: 0;}
  .two-column-section h2{font-size: 2em; line-height: 1.3em; margin-bottom: 25px; max-width: 92%; margin: 0 auto; margin-bottom: 25px;}
}


.contact-form{color: #fff; line-height: 1.5em; overflow: hidden; background-color: #bc3c53; position: relative; min-height: 900px;}
.contact-form h2{font-size: 2.25em; line-height: 1.3em; margin-bottom: 45px;}
.contact-form .left{padding: 65px 0; width: 50%; float: left;}
.contact-form .right{position: relative;  width: 50%; height: 100%; position: absolute; right: 0; top: 0; bottom: 0;}
.contact-form .content{position: relative;}
.contact-form .left .content{max-width: 460px; float: right; padding-right: 120px;}
.contact-form .right .content{position: relative; z-index: 100; max-width: 460px; padding: 65px 0 30px 70px;}
.contact-form .background{position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .2; background-size: cover; background-position: center center;}
.contact-form .gform_body .ginput_container input, 
.contact-form .gform_body .ginput_container textarea{height: 55px; padding: 20px 20px !important; border: 0; width: 100% !important;}
.contact-form .gform_body .ginput_container textarea{height: 150px;}
.contact-form .gform_body label{display: none !important}
.contact-form input[type="submit"]{transition: all .5s ease; display: inline-block; background-color: #fff; color: #bc3c53; width: 200px !important;  border: 0; height: 55px; line-height: 55px; text-align: center; text-transform: uppercase; border-radius: 5px;}
.contact-form input[type="submit"]:hover{text-decoration: none; background-color: rgb(216,170,58); color: #fff;}
.contact-form #field_1_5 label, .contact-form #field_1_7 label{display: block !important}
.contact-form #field_1_5 input, .contact-form #field_1_7 input{height: auto; padding: 0}
.contact-form #field_1_5 li label, .contact-form #field_1_7 li label{display: inline-block !important;}



@media only screen and (max-width: 1270px){
	.contact-form .left .content{padding: 0 0 65px 0px; float: none; margin-left: 8%; max-width: 88%}
	.contact-form .right .content{padding: 65px 0 65px 0px; float: right; margin-right: 8%; max-width: 88%}
	
}


@media only screen and (max-width: 640px){
	.contact-form{min-height: auto}
	.contact-form .left,
	.contact-form .right{width: 100%; float: none; margin: 0; position: relative; }
	.contact-form .left{padding-bottom: 0}
	.contact-form .right .content, .contact-form .left .content{float: none; margin: 0 8%}
}

.news-list{padding: 70px 0; background-color: #ebeaea; overflow: hidden;}
.news-list h2{font-size: 1.5em; font-weight: 700; text-align: center; line-height: 1.3em; max-width: 92%; margin: 0 auto;  margin-bottom: 50px; }
.news-list article{float: left; width: 29%; margin-bottom: 70px;}
.news-list article:nth-child(3n+2){margin: 0 6%}
.news-list article:nth-child(3n+1){clear: both}
.news-list article img{width: 100%; height: auto;}
.news-list h3 a{display: block; font-size: 1.5em; color: #bc3c53; font-weight: 700; padding: 15px 0; line-height: 1.3em}
.news-list .excerpt{font-size: .938em; padding-bottom: 15px;}
.news-list .excerpt p{margin: 0; padding: 0}
.news-list .read-more a{color: #bc3c53; font-size: .938em; text-transform: uppercase; font-weight: 700}
.news-list .read-more a:hover, .news-list h3 a:hover, .news-list a:hover{color: #d8aa3a; text-decoration: none}

@media only screen and (max-width: 720px){
  .news-list article:nth-child(3n+1){clear: none}
  .news-list article{float: left; width: 46%;}
  .news-list article:nth-child(3n+2){margin: 0}
  .news-list article:nth-child(2n+2){margin: 0; float: right;}
	.news-list article:nth-child(2n+1){clear: both;}
}

@media only screen and (max-width: 520px){
  .news-list article{float: left; width: 100%; margin-bottom: 0}
  .news-list article:nth-child(3n+2){margin: 40px 0; float: right;}
	.news-list article:nth-child(3n+3){clear: both; margin-top: 0;}
}


#news-load-more{clear: both; cursor: pointer; text-align: center; width: 200px; margin: 0 auto; padding-top: 50px; color: #bc3c53; font-weight: 700; font-size: .938em; text-transform: uppercase;}
#news-load-more span{display: block; border-radius: 1000px; border: 1px solid #bc3c53; width: 80px; height: 80px; line-height: 80px; font-size: 1.875em; margin: 0 auto; margin-bottom: 15px;}
#news-load-more:hover, #news-load-more:hover span{color: #d8aa3a; border-color: #d8aa3a}

#main-blog-list, #main-news-list{background-color: #fff; padding-top: 30px}

.cookie-notice-container a:hover{color: #d8aa3a; text-decoration: underline}



.testimonial{clear: both; position: relative; padding: 60px 0}
.testimonial .slide{z-index: 1}
.testimonial .slide .wrap{max-width: 860px;}
.testimonial .slide .photo{float: left; width: 300px; margin: 0 20px 20px 0}
.testimonial .slide .text{color: #fff; font-size: 1.3em; line-height: 1.3em}
.testimonial .slide blockquote{padding: 0; margin: 0}
.testimonial .author{display: block; margin: 20px 0; font-style: italic}
.owl-dots{position: absolute !important; z-index: 100; bottom: -30px; width: 100%; height: 20px;text-align: center;}
.owl-nav{position: relative; max-width: 1170px; background-color: red;}
.owl-nav .owl-prev{position: absolute; right: 0; top: 80px; color: #fff; font-size: 3em; width: 100px; line-height: 100px;  display: block; text-align: center;}
.owl-nav .owl-next{position: absolute; left: 0; top: 80px; color: #fff; font-size: 3em; width: 100px; line-height: 100px;  display: block; text-align: center;}
.owl-nav .owl-next:hover, .owl-nav .owl-prev:hover{color: #bc3c53}
.content-Red .owl-nav .owl-next:hover, .content-Red .owl-nav .owl-prev:hover{color: rgb(216,170,58)}
.testimonial h1{text-align: center; font-size: 2.25em; color: #fff;  font-weight: 700; line-height: 1.5em; margin-bottom: 25px;}


@media only screen and (max-width: 1020px){
	.owl-nav{position: absolute; bottom: 30px; z-index: 1000}
	.owl-nav .owl-prev{top: 0;}
  .owl-nav .owl-next{top: 0;}

}


@media only screen and (max-width: 640px){
  .testimonial .slide .photo{width: 40%;}
	
}
@media only screen and (max-width: 520px){
  .testimonial .slide .photo{float: none; width: 100%; margin: 0 0 20px 0}
	
}