/*
Theme Name: Shoptimizer Child Theme
Theme URI: 
Description: Child theme of Shoptimizer
Author: CommerceGurus
Author URI: 
Template: shoptimizer
Version: 1.1.0
*/

img.custom-logo {
    image-rendering: auto;
}

iframe {
border: none!important}

.iframe-container {
    position: relative;
    overflow: hidden;
    padding-top: 86.25%;
}
.iframe-container iframe {
    position: absolute;
    top: 0;
    border: 0;
    height: 100%;
    width: 100%;
}

#cmplz-document {
max-width: 100%!important}

.bannerpage .entry-header {
    display: none
}
.content-area hr {
display: block; clear: both; width: 100%}
h2, h3 {
font-weight: 400!important}
.banner:before {
     position: absolute;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    ;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 0;
    content: ""
}
.page-template-template-fullwidth-contained .site-content {
    padding: 40px 0
}
.page-template-template-fullwidth-no-heading .site-content .fivecol-four h3 {
    color: #a7a9ac!important;  font-family: Baskervville!important; font-weight: 600!important
}

.page-template-template-fullwidth-no-heading .site-content .fivecol-four, .page-template-template-fullwidth-no-heading .site-content .fivecol-one {
margin-top: 30px; margin-bottom: 30px}
.bannertext {
position: relative; z-index: 1}
.banner {
padding: 8% 0 20% 0; background-size: cover!important; margin-bottom: 60px;
background-position: center center!important; position: relative}

.banner h1, .banner, .banner p, .banner a {
color: #fff}

.banner p {
    font-size: 18px
}

.button {
background: #676d88!important; font-size: 18px; }

.button:hover {
opacity: .7}

.bannertext p{
max-width: 480px}

.banner a {
display: inline-block; margin: 20px 0; padding: 10px 15px; border: 2px solid #fff}

.banner a:hover {
color: #fff; background: #262641}

.full-width-header.header-4 .header-4-container.fixed .site-branding {
    margin-top: 0!important
}
.fullwidthsection {
clear: both; padding: 30px 0}

.fourcolumns > h2 {
text-align: center}

.fourcolumns .button {
float: right}

.column {
width: 100%; padding: 40px 20px; background: #d0d0d9; clear: both; float: left; margin: 10px 0
}

.column:nth-child(odd) {
background: #fff}

#padding {
max-width: 800px; margin: 0 auto}


.column_text {
width: 65%; float: left}

.column_image {
float: left; width: 30%; margin-right: 5%}
.below-content {
    background: #74899d; text-align: center; border-bottom: 40px solid #192e4e
}




.below-content .widget .widget-title {
color: #fff; font-size: 40px!important ;   font-weight: 300!important;   font-family: Baskervville; margin-bottom: 20px!important;
padding-top: 40px}

.below-content .widget p, .below-content .widget a, .below-content .widget {
color: #fff}

.below-content .widget  a.button {
background: none; padding: 10px 20px; border: 2px solid #fff; color: #fff; font-size: 21px;
display: inline-block; clear: both; margin: 20px 0}

    .imagebox {
width: 100%; float: left; height: 280px; clear: both; background-size: cover!important; margin-bottom: 30px}

.socials {
clear: both; float: right}

.socials a {
color: #fff; font-size: 30px}

.below-content .widget  a.button:hover {
    background: #262641
}
footer {
    background: rgb(20,50,84);
background: radial-gradient(circle, rgba(20,50,84,1) 0%, rgba(38,38,65,1) 100%);
}
footer.copyright p, footer.copyright a {
    font-size: 14px
}
footer.copyright {
border-top: 1px solid #ccc}

/* DESKTOP STYLES
-----------------
Add styles inside the media query below that you only want to be applied to the desktop layout of your site */

@media only screen and (min-width: 983px) {
    
    .column:nth-child(odd) .column_image {
float: right; margin-left: 5%; margin-right: 0}
    
    
    
    .site-header .site-branding {
margin-top: -20px!important}
    /* Desktop styles go below this line */
    
    .menu-primary-menu-container {
float: right; margin-right: 40px}
    

    
    .main-navigation ul li, .secondary-navigation ul li {
float: right}
    

    .top-bar .col-full {
        max-width: 100%; display: block; font-size: 30px; position: relative; z-index: 100
    }
    .full-width-header.header-4 .header-4-container {
        margin-top: -40px; z-index: 99
    }

}

@media only screen and (max-width: 1235px) {
    
    .header-4 .site-header .custom-logo-link img {
height: 80px!important}
    .menu-primary-menu-container {
margin-right: 0px!important}
    
        .site-branding {
margin-top: -20px}
    
    .menu-primary-menu-container>ul.menu {
margin-top: 20px}
   
    
}

@media only screen and (max-width: 1107px) {
    
    .header-4 .site-header .custom-logo-link img {
height: 55px!important}
   
        .site-branding {
margin-top: -20px}
    
    .menu-primary-menu-container>ul.menu {
margin-top: 20px}
   
    .top-bar .col-full {
font-size: 20px}
    
    .header-4 .header-4-container {
    height: 90px!important;
}
    
}




/* Smartphones (landscape & portait) ----------- */

@media only screen and (max-width: 993px) {
    
        .header-4 .header-4-container {
    height: auto!important;
}
    
       
   footer .col-full {
    display: block !important;
    padding-right: 1em !important;
    padding-left: 1em !important;
    max-width: 100% !important;
}
    footer .widget {
        width: 100%!important; margin-bottom: 30px!important
    }
    
   .full-width-header.header-4 .header-4-container {
margin-top: 0px}
}


@media only screen and (min-width: 780px) {
.textbox {
width: 60%; float: left}
    
    .imagebox {
width: 35%; float: right; height: 280px}
    
    }



/* Smartphones (portait) ----------- */

@media only screen and (max-width: 680px) {
    
    .column_text, .column_image {
width: 100%}
    
    .column_image {
margin-bottom: 20px}
    
    .banner {
    padding: 10% 0 5% 0;
    background-size: cover!important;
    margin-bottom: 60px;
    background-position: center center!important;
    position: relative;
}
    
    
}