/* ULL SCREEN STYLES */

/* Add a class of .fifty-fifty to the section */
/* Add a class of .image to the column where you want the background image


/* /////////////////////////////////// FIFTY-FIFTY VISUAL COMPOSER OVERIDES ////////////////////////////////////////// */

/*Generic styles for fifty fifty style*/
section .vc_section.fifty-fifty {background:#222; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease;}
section .vc_section.fifty-fifty:hover {background:#111; transition: all 0.9s ease; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease;}
section .vc_section.fifty-fifty .vc_column_container.image .vc_column-inner {transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease;}
section .vc_section.fifty-fifty:hover .vc_column_container.image .vc_column-inner {transform:scale(1.1); transition: all 0.9s ease; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease;}

/* Set min height for fifty fifty */
.fifty-fifty .image { min-height: 500px; }

/*this binds the two fifty fifty containers to the same height*/
.fifty-fifty .vc_row {width:100%; max-width:100%; margin-left:0 !important; margin-right:0 !important; margin:auto !important; display:flex; display:-webkit-flex; display:-ms-flexbox;}
.fifty-fifty .vc_column_container {display:flex; display:-webkit-flex; display:-ms-flexbox;}
.fifty-fifty .vc_column-inner {display:flex; display:-webkit-flex; display:-ms-flexbox; flex-direction:column;}
.fifty-fifty .vc_column_container .vc_column-inner { padding-left: 30px !important; padding-right: 30px !important; }


/*Add generic padding to text containers there is no wrapper the sections are 100% this adds 5% padding for the text to imitate a wrapper, no padding for images*/
.fifty-fifty .vc_column_container:nth-child(1) {padding-left:15%; padding-right:40px;}
.fifty-fifty .vc_column_container:nth-child(2) {padding-right:15%; padding-left:40px;}
.fifty-fifty .vc_column_container.image {padding-left:0; padding-right:0; overflow: hidden;} /*must be overflow:hidden; so image is croped when on hover with transform:scale(1.1);*/


/*Add generic padding to text*/

.fifty-fifty .vc_column-inner h1, 
.fifty-fifty .vc_column-inner h2, 
.fifty-fifty .vc_column-inner h3, 
.fifty-fifty .vc_column-inner h4, 
.fifty-fifty .vc_column-inner h5, 
.fifty-fifty .vc_column-inner p { padding:0 0px 20px 0px; margin: 0; }


/*header and link styles for fifty fifty sections, change according to your content*/

/* .fifty-fifty .vc_column-inner a {width:200px; display:block; color:#999; border:1px solid #999; padding:10px 0; text-align:center;}
.fifty-fifty .vc_column-inner a:hover {border:1px solid #FFF; color:#FFF;} */


@media all and (max-width: 1200px){

/* Set min height for fifty fifty */

.fifty-fifty .image { min-height: 300px; }

/*change visual composer lauout to 50% regadless of settings in the CMS*/

.fifty-fifty .vc_column_container:nth-child(1) {width:50% !important; max-width:50% !important; padding-left:0; padding-right:0;}
.fifty-fifty .vc_column_container:nth-child(2) {width:50% !important; max-width:50% !important; padding-right:0; padding-left:0;}

}


/* Media query 768px site styles and template overides 
---------------------------------------------------------------------------------------------------------------------------- */
@media all and (max-width: 768px){

/*change visual composer lauout to 100% regadless of settings in the CMS*/

.fifty-fifty .vc_column_container:nth-child(1) {width:100% !important; max-width:100% !important; padding-left:0; padding-right:0;}
.fifty-fifty .vc_column_container:nth-child(2) {width:100% !important; max-width:100% !important; padding-right:0; padding-left:0;}


/*IMPORTANT this will arrange the image to the top when they stack up for mobile */

.vc_row {display:flex; flex-flow:row wrap;}
.vc_row .vc_column_container {order:2; -webkit-order:2;}
.vc_row .vc_column_container.image {order:1; -webkit-order:1; height:400px;}

.fifty-fifty .vc_column_container .vc_column-inner { padding-left: 30px !important; padding-right: 30px !important; }


}

@media all and (max-width: 568px){

/*change h2 for mobiles, if not the same as your standard font styles*/

.vc_row .vc_column_container.image { height:300px; }

.fifty-fifty .vc_column_container .vc_column-inner { padding-left: 30px !important; padding-right: 30px !important; }


.vc_row .vc_column_container:nth-child(even) { background-color: #FFF; }


}