/* 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*/
.vc_row.fifty-fifty {background:#333; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; }
/* .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;} */

.vc_row.fifty-fifty .vc_column_container { background: #333; }
.vc_row.fifty-fifty .vc_column_container.image { background: none; min-height: 300px; background-size: 50% !important; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; }
.vc_row.fifty-fifty .vc_column_container.image:hover { transition: all 0.9s ease; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease; }

.vc_row.fifty-fifty .vc_column_container.image.left { background-position: left !important; }
.vc_row.fifty-fifty .vc_column_container.image.right { background-position: right !important; }

.vc_row.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; background: none; }
.vc_row.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: 400px; }

/*this binds the two fifty fifty containers to the same height*/
.vc_row.fifty-fifty {width:100%; max-width:100%; margin-left:0 !important; margin-right:0 !important; margin:auto !important; display:flex; display:-webkit-flex; display:-ms-flexbox;}
.vc_row.fifty-fifty .vc_column_container {display:flex; display:-webkit-flex; display:-ms-flexbox;}
.vc_row.fifty-fifty .vc_column-inner {display:flex; display:-webkit-flex; display:-ms-flexbox; flex-direction:column;}
.vc_row.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*/
.vc_row.fifty-fifty .vc_column_container:nth-child(1) {padding-left:12%; padding-right:40px;}
.vc_row.fifty-fifty .vc_column_container:nth-child(2) {padding-right:12%; padding-left:40px;}
.vc_row.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*/

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


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

/* Set min height for fifty fifty */

.vc_row.fifty-fifty .vc_column_container .vc_column-inner { padding: 80px !important; }

.vc_row.fifty-fifty .vc_column_container.image { min-height: 500px; padding: 0 !important; } 

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

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

}


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

/* Set min height for fifty fifty */

.vc_row.fifty-fifty .vc_column_container .vc_column-inner { padding: 60px !important; }
.vc_row.fifty-fifty .vc_column_container.image { min-height: 500px; padding: 0 !important; }

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

.vc_row.fifty-fifty .vc_column_container:nth-child(1) {width:50% !important; max-width:50% !important; padding-left:0; padding-right:0;}
.vc_row.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){

.vc_row.fifty-fifty .vc_column_container.image { min-height: 400px; }

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

.vc_row.fifty-fifty .vc_column_container:nth-child(1) {width:100% !important; max-width:100% !important; padding-left:0; padding-right:0;}
.vc_row.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.fifty-fifty {display:flex; flex-flow:row wrap;}
.vc_row.fifty-fifty .vc_column_container {order:2; -webkit-order:2;}
.vc_row.fifty-fifty .vc_column_container.image {order:1; -webkit-order:1; min-height:400px; }

.vc_row.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.fifty-fifty .vc_column_container.image { min-height:200px; }

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


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


}