/*
 Theme Name:   Clark Child
 Theme URI:    http://clarkcommunications.ca
 Description:  An agency theme build for CLARK
 Author:       Clark Communications
 Author URI:   http://clarkcommunications.ca
 Template:     clark
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  clark-child
*/

@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: 'Gotham';
  src: url('fonts/gotham-bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/gotham-bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/gotham-bold.woff') format('woff'), /* Modern Browsers */
     url('fonts/gotham-bold.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fonts/gotham-bold.svg#svgFontName') format('svg'); /* Legacy iOS */
   font-weight: 700;
   font-style: normal;
 }

html { background-color: #1e232a !important; }

h1,h2,h3,h4,h5,h6 { font-family: 'Gotham', "Helvetica Neue",Helvetica,Arial,sans-serif }

a, a:visited { color: #999 }
a:hover,
a:focus { color: #f29733}

h1 { text-transform: uppercase; color: #f48a32 }
h2 { color: #7f3179 }
h2 a { text-transform: uppercase; color: #f48a32 !important }

.hentry { margin: 0 }
.entry-content { margin: 0 }

.entry-meta,
.entry-meta a { color: #ccc; font-style: italic !important; }

h1.entry-title { margin-bottom: 5px; }

ol.comment-list {
margin: 0px;
list-style: none;
padding-left: 0px;
}

input#author, input#email, input#url { display: block; width: 100%; background-color: #efefef }


/* ---- WPCF7 Contact Form 7 Styles ---- */

.wpcf7 label { width: 100% !important }

#comments #comment,
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background: #efefef !important;
border: none !important;
width: 100% !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 14px;
font-weight: normal;
color: #1e232a !important;
padding: 14px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required {
    width: 100%;
    height: 47px;
    font-weight: normal;
    padding-left: 10px;
    font-size: 14px;
}

div#comments.comments-area, div#comments .comment-respond {
	padding-top: 80px
}


.comment-author .fn {
    position: relative;
    top: -7px;
}

.comment-metadata a {
    font-size: 80%;
    color: #bbb;
    margin-left: 37px;
    top: -20px;
    position: relative;
}

.reply { margin-bottom: 30px;}

.says { display: none }

.form-submit .submit, .wpcf7-submit {
color: #fff !important;
margin: 8px auto 0;
cursor: pointer;
font-size: 20px !important;
font-weight: 700;
-moz-border-radius: 0px !important;
-webkit-border-radius: 0px !important;
border-radius: 0px !important;
padding: 16px 30px !important; 
line-height: 1.7em;
background-color: #912b87 !important;
border: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
width: 100%;
}
.form-submit .submit:hover, .wpcf7-submit:hover { 
color: #fff !important;
background-color: #f28a3e !important; 
box-shadow: none !important;
border: 0 !important
}

.form-submit .submit { 
padding: 7px 20px !important; 
width: auto !important;
font-size: 18px !important;
}

/* ---- WIDGETS ---- */

.widget-title {
margin-top: 0;
font-size: 20px;
text-transform: uppercase;
color: #1e232a;
}

.widget-area ul {
    margin: 0
}

.widget-area ul li a {
    color: #999
}


/* ---- NAVIGATION ---- */

.navigation.post-navigation, .cat-links { display: none }

#site-navigation { margin-top: 20px; margin-bottom: 20px }
#primary-menu { float: right }

#masthead { background: #1e232a }
.site-content { background: #fff }
footer.site-footer { background: #1e232a; padding: 70px 0 90px }

footer.site-footer a { color: #919396 }

.main-navigation li,
.footer-navigation li { font-family: 'Gotham' !important; font-weight: normal; text-transform: uppercase }
.main-navigation li a,
.footer-navigation li a { padding: 5px 10px; color: #919396; text-decoration: none }
.main-navigation li a:hover,
.main-navigation li a:focus,
.footer-navigation li a:hover,
.footer-navigation li a:focus { color: #eee }

.footer-navigation li > ul { display: none }
.footer-navigation ul { padding-left: 0px; margin-left: 0; margin-top: .7em }
.footer-navigation li { display: inline }

.main-navigation #primary-menu > li.menu-item-has-children:hover,
.main-navigation #primary-menu > li.menu-item-has-children:focus { background-color: #6d6e71 }

.main-navigation #primary-menu > li.menu-item-has-children:hover a,
.main-navigation #primary-menu > li.menu-item-has-children:focus a { color: #fff !important }

#primary-menu .sub-menu { background-color: #6d6e71; padding-top: 10px; padding-bottom: 10px }
.main-navigation #primary-menu ul ul { top: 2em !important }

.main-navigation #primary-menu > li.menu-item-has-children ul.sub-menu > li:hover > a, .main-navigation #primary-menu > li.menu-item-has-children ul.sub-menu > li.current-menu-item > a { 
	color: #f58522 !important
}

.site-branding { width: 93%; float: left }
.site-branding h1.site-title { margin-bottom: 20px; margin-top: 0px; }
.site-branding img { -webkit-filter: drop-shadow( 0 0 5px #000 );filter: drop-shadow( 0 0 6px #000 ); /* Same syntax as box-shadow */ }

.social-header { width: 5%; float: right }

.social-header img { -webkit-filter: drop-shadow( 0 0 5px #000 );filter: drop-shadow( 0 0 5px #000 ); /* Same syntax as box-shadow */
	margin-bottom: 45% }

.vc_btn3.vc_btn3-color-juicy-pink, .vc_btn3.vc_btn3-color-juicy-pink.vc_btn3-style-flat {
 background-color: #94297d !important; border-radius: 0; font-weight: bold; text-transform: uppercase; }

.vc_btn3.vc_btn3-color-juicy-pink:hover, .vc_btn3.vc_btn3-color-juicy-pink.vc_btn3-style-flat:hover {
 background-color: #f28a3e !important
}

blockquote { margin-bottom: 15px; }

.background-bottom .vc_column-inner {
    background-position: bottom center !important;
}

.background-right .vc_column-inner {
    background-position: right center !important;
}
.background-left .vc_column-inner {
    background-position: left center !important;
}

.service a { text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7); }
.service a:hover { text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); }

.staff { text-shadow: 0 0 20px rgba(0,0,0,0.7) }
.staff .wpb_wrapper {
    position: relative;
    bottom: -90px;
    transition: .25s;
    -moz-transition: .25s;
    -webkit-transition: .25s;
}

.staff:hover .wpb_wrapper,
.staff:focus .wpb_wrapper {
    bottom: 0;
}

.staff.orange .wpb_wrapper {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ee4335+0,f58522+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(238,67,53,0) 0%, rgba(245,133,34,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(238,67,53,0) 0%,rgba(245,133,34,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(238,67,53,0) 0%,rgba(245,133,34,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ee4335', endColorstr='#f58522',GradientType=0 ); /* IE6-9 */
}

.staff.pink .wpb_wrapper {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ee4036+0,ec297b+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(238,64,54,0) 0%, rgba(236,41,123,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(238,64,54,0) 0%,rgba(236,41,123,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(238,64,54,0) 0%,rgba(236,41,123,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ee4036', endColorstr='#ec297b',GradientType=0 ); /* IE6-9 */
}

.staff.green .wpb_wrapper {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8dc63e+0,d6de23+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(141,198,62,0) 0%, rgba(214,222,35,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(141,198,62,0) 0%,rgba(214,222,35,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(141,198,62,0) 0%,rgba(214,222,35,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008dc63e', endColorstr='#d6de23',GradientType=0 ); /* IE6-9 */
}

.staff.blue .wpb_wrapper {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#25a6de+1,1b75bb+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(37,166,222,0) 0%, rgba(37,166,222,0.01) 1%, rgba(27,117,187,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(37,166,222,0) 0%,rgba(37,166,222,0.01) 1%,rgba(27,117,187,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(37,166,222,0) 0%,rgba(37,166,222,0.01) 1%,rgba(27,117,187,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0025a6de', endColorstr='#1b75bb',GradientType=0 ); /* IE6-9 */
}

.staff.purple .wpb_wrapper {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#96237b+0,90278e+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(150,35,123,0) 0%, rgba(144,39,142,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(150,35,123,0) 0%,rgba(144,39,142,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(150,35,123,0) 0%,rgba(144,39,142,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0096237b', endColorstr='#90278e',GradientType=0 ); /* IE6-9 */
}


.staff-description {
    visibility: hidden;
    opacity: 0.01;
    transition: .25s;
    -moz-transition: .25s;
    -webkit-transition: .25s;	font-size: 19px !important;
}

.staff:hover .staff-description,
.staff:focus .staff-description {
    visibility: visible;
    opacity: 1;
    transition: .25s;
    -moz-transition: .25s;
    -webkit-transition: .25s;
}

.orange-theme h1,
.orange-theme h2,
.orange-theme a:hover { color: #f58522 !important }

.blue-theme h1,
.blue-theme h2,
.blue-theme a:hover { color: #239cd7 !important }

.purple-theme h1,
.purple-theme h2,
.purple-theme a:hover { color: #932686 !important }

.green-theme h1,
.green-theme h2,
.green-theme a:hover { color: #b4ce4c !important }

.pink-theme h1,
.pink-theme h2,
.pink-theme a:hover { color: #ec297b !important }

.parallax-box .vc_column-inner { padding-top: 0 !important }

.parallax-box .wpb_content_element { margin-bottom: 20px; }


/* ---- WEB PRICING PAGE ---- */

.center-pricing-block {
    max-width: 780px;
    margin: 0 auto;
}

#pricing-blocks > .vc_column_container > .vc_column-inner > .wpb_wrapper {
    background-color: #f38632;
	transition: .25s;
	-moz-transition: .25s;
	-webkit-transition: .25s;
	position: relative;
	top: 0;
    border-radius: 10px;
    color: #ffffff;
    padding: 20px;
    box-shadow: 0px 0px 10px #ddd;
	margin-bottom: 40px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f48f32+0,ee5d39+100 */
	background: #f48f32; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #f48f32 0%, #ee5d39 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #f48f32 0%,#ee5d39 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #f48f32 0%,#ee5d39 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f48f32', endColorstr='#ee5d39',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


#pricing-blocks .wpb_row.pricing-list .wpb_content_element { margin-bottom:0 !important }
#pricing-blocks .wpb_row.pricing-list { margin-bottom: 35px }

#pricing-blocks.purple > .vc_column_container > .vc_column-inner > .wpb_wrapper {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8f2c8b+0,98256f+100 */
	background: #8f2c8b; /* Old browsers */
	background: -moz-linear-gradient(45deg, #8f2c8b 0%, #98256f 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, #8f2c8b 0%,#98256f 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, #8f2c8b 0%,#98256f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8f2c8b', endColorstr='#98256f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#pricing-toggle { display: inline-block; top: 15px; background-color: #d2db3c; width: 80px; height: 40px; border-radius: 50px; padding: 3px; box-sizing: border-box; position: relative; margin: 0 auto; transition: .25s }
#pricing-toggle:hover { cursor: pointer;  }
#pricing-toggle:hover .switch { box-shadow: 0 0 10px #00000052; }
#pricing-toggle .switch { width: 34px; height: 34px; background-color: #fff; border-radius: 50%; position: relative; left: 40px;display: block; transition: .25s }
#pricing-toggle.off { background-color: #dddddd }
#pricing-toggle.off .switch { width: 34px; height: 34px; background-color: #fff; border-radius: 50%; position: relative; left: 0;display: block; transition: .25s }


.pricing-monthly { display:none }
.pricing-monthly.on { display: inline-block}
.pricing-annual { display: inline-block}
.pricing-annual.off { display: none}

.billed-annual { opacity: .85; font-size: 14px; display: block; }
.billed-annual.off { display: none !important }

#pricing-blocks .recommended-snipe { left: 0; top: 0; position: absolute; width: 150px; pointer-events: none; }

#pricing-blocks > .wpb_column:nth-of-type(2n) > .vc_column-inner > .wpb_wrapper {
	    background-color: #e9326d;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e92f7c+0,ea385e+100 */
background: #e92f7c; /* Old browsers */
background: -moz-linear-gradient(-45deg, #e92f7c 0%, #ea385e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #e92f7c 0%,#ea385e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #e92f7c 0%,#ea385e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e92f7c', endColorstr='#ea385e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#pricing-blocks > .wpb_column:nth-of-type(3n) > .vc_column-inner > .wpb_wrapper {
	    background-color: #2a8fcb;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2fa8dc+0,2379b9+100 */
background: #2fa8dc; /* Old browsers */
background: -moz-linear-gradient(-45deg, #2fa8dc 0%, #2379b9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #2fa8dc 0%,#2379b9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #2fa8dc 0%,#2379b9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2fa8dc', endColorstr='#2379b9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
}
#pricing-blocks h2 {
    color: #ffffff;
	font-size: 22px;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.5em
}

ul, ol {
    margin: 0 0 1.5em 0em;
}

.fa-ul li i.fa {
    position: absolute;
    left: -20px;
    top: 3px;
}

#pricing-blocks hr { background-color: rgba(255, 255, 255,.2) }

/* ---- CLIENT LOGOS PAGE ---- */

.page-id-16 .vc_row-o-content-middle .vc_column_container>.vc_column-inner { padding: 0 !important }
.page-id-16 .vc_row-o-content-middle .vc_column_container>.vc_column-inner .wpb_single_image { margin-bottom: 0 !important } 

.page-id-16 .vc_row-o-content-middle .vc_column_container>.vc_column-inner .wpb_single_image a img { 
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
	transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	opacity: 0.7; 
	position: relative;
	bottom: 0;
} 

.page-id-16 .vc_row-o-content-middle .vc_column_container>.vc_column-inner .wpb_single_image a img:hover { 
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
	transition: .25s;
	-moz-transition: .25s;
	-webkit-transition: .25s;
	opacity: 1;
	position: relative;
	bottom: 5px;	
} 

.page-id-16 .wpb_single_image .vc_figure-caption {
	top: 70px;
	width: 100%;
	position: absolute;
	color: white;
	z-index: -1;
}

@media (max-width: 767px) {
	.page-id-16 .vc_row-o-content-middle .vc_column_container>.vc_column-inner .wpb_single_image a img { 
		-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
		filter: grayscale(0%);
		opacity: 1
	}
}


/* ---- END CLIENT LOGOS PAGE ---- */

#footer-menu .menu-item-1661,
#primary-menu .menu-item-1661 { display: none }
	
@media (max-width: 991px) {	
	.parallax-box h2 { font-size: 30px !important }
	.parallax-box .vc_empty_space { height: 60px !important }
	.footer-navigation ul { text-align: center !important }
}
	
@media (max-width: 599px) {

	.parallax-box h2 { font-size: 20px !important }
	.parallax-box .vc_empty_space { height: 30px !important }
	.staff .wpb_wrapper {
	    bottom: -25px }
	.staff .staff-description { 
	    visibility: visible;
	    opacity: 1
	}

	.service a { padding-top: 70px !important; padding-bottom: 70px !important; }
	.service { max-height: 166px !important }

	#site-navigation { float: right; margin: 0  }
	#site-navigation button { background: transparent !important; box-shadow: none; border: none; position: absolute; right: 0px; width: 20%; margin-top: 20px; padding: 0}
	#site-navigation button img { width: 35px }
	.site-branding { float: left; width: 200px; margin-top: 15px }
	.social-header { display: none; width: 50%; float: none; position: absolute; top: 15px; left: 18px }
	.social-header a { float: left }
	.social-header .vimeo { margin-right: 10px }
	
	.menu-toggle { float: right }
	#site-navigation.main-navigation { height: 20%; overflow:hidden; transition: .25s; -moz-transition: .25s; -webkit-transition: .25s; }
	#site-navigation.main-navigation.toggled button { float: right; margin-top: 22px }
	#site-navigation img.close-menu { display: none }	
	#site-navigation img.menu { display: inline-block }
	#site-navigation.main-navigation.toggled img.close-menu { display: inline-block }
	#site-navigation.main-navigation.toggled img.menu { display: none }
	
	.main-navigation #primary-menu > li.menu-item-has-children:hover,
	.main-navigation #primary-menu > li.menu-item-has-children:focus { background-color: transparent }
	
	#site-navigation.main-navigation.toggled { position: absolute; left: 0px; z-index: 99; height: 100%;  width: 100%; background-color: #000;overflow: scroll }
	#primary-menu { float: none;margin-top: 20%;padding-left: 0;position: relative;}
	.main-navigation li { float: none; font-size: 30px; text-align: center }
	
	#site-navigation.main-navigation.toggled { position: fixed; }
	#menu-item-1661 { display: block !important }
	#menu-item-25 { display: none !important }
	#primary-menu .sub-menu { width: 100%; position: relative; top: 0; display: none }
	#primary-menu .sub-menu li { width: 100%; }
	#primary-menu .sub-menu li a { width: 100%; }

}

@media (max-width: 479px) {
	
}
.site-branding .logo:hover { -webkit-filter: drop-shadow( 0 0px 20px #000 );filter: drop-shadow( 0 0px 20px #000 ) /* Same syntax as box-shadow */ }
.social-header .vimeo img:hover { -webkit-filter: drop-shadow( 0 0 25px #169edb );filter: drop-shadow( 0 0 25px #169edb ); /* Same syntax as box-shadow */ }
.social-header .twitter img:hover { -webkit-filter: drop-shadow( 0 0 25px #efa4ef );filter: drop-shadow( 0 0 25px #efa4ef ); /* Same syntax as box-shadow */ }
.social-header .facebook img:hover { -webkit-filter: drop-shadow( 0 0 25px #efa0ef );filter: drop-shadow( 0 0 25px #efa0ef ); /* Same syntax as box-shadow */ }

#page { transform: translate3d(0, 0, 0); }
.social-header .img { transition: .5s; -webkit-transition: .5s; -moz-transition: .5s }