/* Flex - Call to action box
....................................................................... */
.box_cta {
text-align: center;
background: #e5e5e5;
padding: 30px 0;
margin: 0 0 20px 0;
}
.box_cta h2,
.box_cta p {
color: #434343;
display: inline-block;
padding: 5px;
margin: 0;
}


/* Flex - Video
....................................................................... */
.video {
margin: 0 0 20px 0;
}


/* Flex - Articles
....................................................................... */
.article_vt .pic {
margin: 0 0 15px 0;
}
.article_vt .pic img {
display: block;
margin: 0 auto;
}
@media screen and (max-width: 1023px) {
	.article_vt {
	margin-bottom:  30px;
	}
}


/* Flex - Multi column lists
....................................................................... */
ul.col_list {
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;
}
ul.col_list > li {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
@media screen and (max-width: 1023px) {
	ul.col_list {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	}
}
@media screen and (max-width: 767px) {
	ul.col_list {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	}
}


/* Flex - Image lists
....................................................................... */
ul.image_list {
padding: 0;
margin: 0 0 5px 0;
}
.image_list li {
display: inline-block;
width: 50%;
box-sizing: border-box;
padding: 0 20px 0 140px;
margin: 5px -4px 25px 0;
}
.image_list li:before {
display: none;
}
.image_list li .pic {
display: inline-block;
vertical-align: middle;
width: 80px;
margin: 0 15px 0 -130px;
}
.image_list li .pic img {
display: block;
}
.image_list li .text {
display: inline-block;
vertical-align: middle;
}
.image_list li .text p:last-child {
margin: 0;
}
@media screen and (max-width: 767px) {
	.image_list li {
	display: block;
	width: auto;
	padding-right: 0;
	margin-right: 0;
	}
}
@media screen and (max-width: 479px) {
	.image_list li {
	padding: 0;
	}
	.image_list li .pic {
	display: block;
	width: 60px;
	margin: 0 auto 5px auto;
	}
	.image_list li .text {
	display: block;
	}
}


/* Flex - Callout text boxes
....................................................................... */
.callout {
padding: 30px;
margin: 0 0 20px 0;
}
.callout p:last-child {
margin: 0;
}
.callout.white {
border: 1px solid #e5e5e5;
}
.callout.light {
background: #e5e5e5;
}
.callout.dark {
background: #373737;
}
.callout.accent {
background: #f78e22;
}
.callout.dark,
.callout.dark h1,
.callout.dark h2,
.callout.dark h3,
.callout.dark h4,
.callout.dark a,
.callout.dark a.boldlink:hover,
.callout.dark label,
.callout.accent,
.callout.accent h1,
.callout.accent h2,
.callout.accent h3,
.callout.accent h4,
.callout.accent a,
.callout.accent a.boldlink:hover,
.callout.accent label {
color: #fff;
}
.callout.accent ul li:before {
color: #fff;
}
.callout.accent a.cta {
color: #fff;
background: #373737;
text-shadow: none;
}
.callout.accent a.cta:hover {
color: #434343;
background: #fff;
}


/* Flex - Newsletter
....................................................................... */
.box_newsletter {
background: #e5e5e5;
padding: 30px;
margin: 0 0 20px 0;
}
.box_newsletter form {
padding: 0;
margin: 0;
}


/* Flex - Contact form
....................................................................... */
.box_contact {
color: #fff;
background: #f78e22;
padding: 30px;
margin: 0 0 20px 0;
}
.box_contact h2,
.box_contact p,
.box_contact a {
color: #fff;
}
.box_contact form {
padding: 0;
margin: 0;
}
.box_contact label {
color: #fff;
}

.box_contact button,
.box_contact input.submit, 
.box_contact input[type=submit] {
color: #fff;
background: #373737;
text-shadow: none;
}
.box_contact button:hover,
.box_contact input.submit:hover, 
.box_contact input[type=submit]:hover {
color: #434343;
background: #fff;
}


/* Flex - Gen Z Form
....................................................................... */
.box_genzform {
color: #fff;
background: #373737;
padding: 30px;
margin: 0 0 20px 0;
}
.box_genzform h2,
.box_genzform p,
.box_genzform a {
color: #fff;
}
.box_genzform form {
padding: 0;
margin: 0;
}
.box_genzform label {
color: #fff;
}


/* Flex - Testimonials
....................................................................... */
.swiper_testimonials {
position: relative;
color: #fff;
background: #f78e22;
padding: 15px 20px 25px 20px;
margin: 0 0 20px 0;
}
.swiper_testimonials .swiper-container {
margin-bottom: 0;
}
.swiper_testimonials .swiper-pagination {
position: relative;
top: auto;
}
.swiper_testimonials .swiper-pagination-bullet {
width: 15px;
height: 15px;
margin: 0 5px;
}
.swiper_testimonials ul {
padding: 0;
margin: 0;
}
.swiper_testimonials li {
padding: 0;
margin: 0;
}
.swiper_testimonials li:before {
display: none;
}

.swiper_testimonials .testimonial .icon {
color: #fff;
}
.swiper_testimonials .testimonial h4 {
font-size: 1em;
color: #fff;
}
.swiper_testimonials .testimonial p {
font-size: 1.2em;
line-height: 1.2em;
margin-bottom: 20px;
color: #fff;
}


/* Flex - Clients
....................................................................... */
.swiper_clients {
background: #e5e5e5;
padding: 15px 20px 15px 20px;
}
.swiper_clients .swiper-container {
margin: 0;
}

.span9 .swiper_clients .client_list li,
.span12 .swiper_clients .client_list li {
width: 25%;
}
.span8 .swiper_clients .client_list li {
width: 33.333%;
}
.span6 .swiper_clients .client_list li {
width: 50%;
}
.span3 .swiper_clients .client_list li,
.span4 .swiper_clients .client_list li {
width: 50%;
}
@media screen and (max-width: 1023px) {
	.span9 .swiper_clients .client_list li,
	.span12 .swiper_clients .client_list li {
	width: 33.333%;
	}
	.span8 .swiper_clients .client_list li {
	width: 50%;
	}
}
@media screen and (max-width: 767px) {
	.swiper_clients .client_list li {
	width: 33.333% !important;
	}
}
@media screen and (max-width: 600px) {
	.swiper_clients .client_list li {
	width: 50% !important;
	}
}


/* Flex - Toggleable Boxes
....................................................................... */
.toggle_box {
border: 1px solid #e5e5e5;
margin: 0 0 20px 0;
}
.toggle_box h3 {
position: relative;
background: #f1f1f1;
padding: 30px 60px 30px 30px;
margin: 0;
transition: all 0.2s;
cursor: pointer;
}
.toggle_box h3:hover {
background: #e5e5e5;
}
.toggle_box h3:after {
content: '\f078';
position: absolute;
right: 30px;
top: 50%;
color: #f78e22;
display: inline-block;
font-family: FontAwesome;
font-feature-settings: normal;
font-kerning: auto;
font-language-override: normal;
font-size: inherit;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-synthesis: weight style;
font-variant: normal;
font-weight: normal;
line-height: 0.1;
text-rendering: auto;
font-size: 20px;
}
.toggle_box h3.open:after {
content: '\f077';
}
.toggle_content {
padding: 30px;
}
.toggle_content p:last-child {
margin: 0;
}
@media screen and (max-width: 600px) {
	.toggle_box h3 {
	font-size: 1.1em;
	padding: 15px 45px 15px 15px;
	}
	.toggle_box h3:after {
	font-size: 15px;
	right: 15px;
	}
	.toggle_content {
	padding: 20px 15px;
	}
}


/* Flex - Video Modal Links
....................................................................... */
.video_flex .videolink_container .pic {
position: relative;
margin: 0 0 15px 0;
}
.video_flex .videolink_container a {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: transparent url(img/play_arrow_small.png) 50% 50% no-repeat;
text-indent: -9999px;
z-index: 11;
opacity: 0.75;
transition: all 0.2s;
}
.video_flex .videolink_container a:hover {
background-color: rgba(0,0,0,0.33);
opacity: 1;
}
.video_flex .videolink_container .pic img {
width: 100%;
display: block;
}