/*
= IMPORTING STUFF AND SETTING DEFAULT STYLES
-------------------------------------------------------------------------------------- */
@import url("reset.css");

/*
= FONT EMBEDING
-------------------------------------------------------------------------------------- */
@import url(../fonts/font-awesome-4.5.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,600&subset=latin,latin-ext);

/*
= COMMON
-------------------------------------------------------------------------------------- */
.wrapper{
  width: 1000px;
  margin: 0 auto;
}
body{
    background: #ECECEC;
    background-color: rgb(245,245,245,0.5);
    font-family: 'Titillium Web', sans-serif;
}
.mob-nav-main{display: none;}

.spec-quo{
    position: relative;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    margin-top: 40px;
    }
    .spec-quo a{
       color: #d48826; text-decoration: none; 
    }
    .spec-quo a:hover{text-decoration: underline;}
    .spec-quo a::before {
        color: #317b88;
        content: "“";
        font-family: "Source Sans Pro",Helvetica,Arial,sans-serif;
        font-size: 60px;
        font-style: italic;
        font-weight: bold;
        left: 50%;
        margin-left: -25px;
        position: absolute;
        text-align: center;
        top: -51px;
        }
    .spec-quo a::after {
        color: #317b88;
        content: "”";
        font-family: "Source Sans Pro",Helvetica,Arial,sans-serif;
        font-size: 60px;
        font-style: italic;
        font-weight: bold;
        left: 50%;
        position: absolute;
        text-align: center;
        top: -40px;
        }

/*
= HEADER
-------------------------------------------------------------------------------------- */
header{ background-color: #D48826;}

.logo{
    float: left;
    display: block;
    margin: 35px 0;
    width: 157px; height: 52px;
    text-indent: -9999px;
    background: url(../img/logo.png) 0 50% no-repeat;
    background-size: cover;
}
nav{
    float: right;
    margin-top: 20px;
}
.phone-h{
    position: relative; 
    float: right;
    margin-bottom: 20px; padding-left: 27px; margin-right: 29px;
    font-size: 15px;
    font-weight: 600;  
    color: #fff;
    }
    .phone-h:after{
        content: "\f095";
        position: absolute; top: -3px; left: 0;
        padding-right: 3px;
        font-family: FontAwesome; font-size: 25px;
        vertical-align: middle;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;        
        }
.main-nav{
    clear: both;
    margin: 0;
    list-style-type: none;
    text-align: center;
}
    .main-nav li{
        display: inline-block;
        margin: 0 30px;
    }
        .main-nav li a{
            display: block;
            padding: 7px 12px;
            font-size: 14px; color: #fff; font-weight: 600;
            text-decoration: none; text-transform: uppercase;
            border-radius: 5px;
            -webkit-transition: background-color 0.5s;
            -moz-transition: background-color 0.5s;
            -o-transition: background-color 0.5s;
            -ms-transition: background-color 0.5s;
            transition: background-color 0.5s;
        }
            .main-nav li a:hover{
                background-color: rgba(255, 255, 255, 0.15);
                /*border-radius: 5px;*/
            }
            .main-nav li.current-menu-item a{
                background-color: rgba(255, 255, 255, 0.25);
                /*border-radius: 5px;*/
            }
/*
= HOME
-------------------------------------------------------------------------------------- */
.moto-section{
    padding: 40px 0 80px 0;
    background-color: #E0E0E0;
}
    .moto-section h2{
        padding-top: 5px; margin-bottom: 20px;
        font-size: 38px; font-weight: 700; line-height: 48px;
        color: #317B88;
    }
    .moto-section p{
        margin-bottom: 15px;
        font-size: 14px; font-weight: 400; line-height: 18px;
        color: #545454;
    }
    .moto-section em{ font-size: 18px; font-style: normal; font-weight: bold;}
    .moto-section ul{ margin-bottom: 15px;}
    .moto-section ul li{
        font-size: 18px;
    }
    .moto-section a{color: #d48826;}
    .moto-section a:hover{background: none; text-decoration: underline;}
    .btn, .moto-section .btn{
        display: inline-block;
        padding: 7px 12px;
        font-size: 13px; font-weight: 700; text-decoration: none; text-transform: uppercase;
        color: #fff;
        background-color: #317B88;
        border-radius: 8px; border: none;
        -webkit-transition: background-color 0.5s;
        -moz-transition: background-color 0.5s;
        -o-transition: background-color 0.5s;
        -ms-transition: background-color 0.5s;
        transition: background-color 0.5s;
        -webkit-appearance: none;
    }
        .btn:hover, .moto-section .btn:hover{
            background-color: #255F69;
            text-decoration: none !important;
        }
    /*slider*/
    .moto-section .homepage-slider{
        display: block; float: right;
        width: 500px;
        margin-left: 40px;
    }
        .moto-section .homepage-slider ul{
            margin: 0;
            list-style-type: none;
        }

        .moto-section .homepage-slider img{
            display: block;
            width: 100%; height: auto;
            border-radius: 10px;
        }

    .cycle-pager{ 
      width: 100%;
      text-align: center; 
      overflow: hidden;
    }
        .cycle-pager span{
          display: inline-block;
          width: 25px; 
          font-size: 25px; font-family: sans-serif;
          color: #B4C1C5; cursor: pointer; 
        }
        .cycle-pager span.cycle-pager-active{color: #d48826;}
/*
= category-section
-------------------------------------------------------------------------------------- */
.category-section{
    margin-top: -30px;
}
.category-list{
    width: 100%;
    margin: 0px 0 25px 0;
    list-style-type: none;
}
    .category-list li{
        position: relative; top: 0;
        display: block; float: left;
        width: 32%;
        margin-bottom: 2%;
        background: #fff;
        -moz-box-shadow:    0 2px 6px 0 rgba(0, 0, 0, 0.15);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
        box-shadow:         0 2px 6px 0 rgba(0, 0, 0, 0.15);
        box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
        webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }
        .category-list li:nth-child(3n-1){
            margin: 0 2% 2% 2%;
        }

        .category-list li:hover{
            top: -4px;
            -moz-box-shadow:    0 4px 12px 0 rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
            box-shadow:         0 4px 12px 0 rgba(0, 0, 0, 0.1);
            }

        .category-list li a{
            display: block;
            padding: 20px 30px;
            text-decoration: none; text-align: center;
            box-sizing:border-box;
        }
            .category-list li a h4{
                width: 100%; height: 38px;
                margin-bottom: 15px;
                font-size: 20px; font-weight: 600;
                color: #317B88;
                border-bottom: 6px solid #e5e0e5;
            }
            .category-list li a img{
                display: block;
                width: 100%; height: auto;
            }

.map{
    margin-bottom: 40px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
}

/*
= PAGE
-------------------------------------------------------------------------------------- */
.entry{
    padding: 20px 30px; margin: 30px auto;
    background-color: #efeeef;
    -moz-box-shadow:    0 2px 6px 0 rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
    box-shadow:         0 2px 6px 0 rgba(0, 0, 0, 0.15);
    box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
}
.entry article{
    width: 67%;
    box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
}
.page-template-tpl-products .entry article,
.page-template-tpl-fullwidth .entry article { width: 100%;}

.cycle-overlay{opacity: 0.8}
.cycle-overlay > div{
    font-size: 15px; font-weight: 600; color: #fff; text-align: center;
    }
.etl-slider #prev-next{ text-align: right;}

.entry aside{
    float: right;
    width: 29%;
    box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
}
    .entry aside .widget{ margin-bottom: 50px;}
.entry h1{
    padding: 25px 0; margin-bottom: 20px;
    font-size: 26px; font-weight: 600;
    color: #317b88;
    border-bottom: 6px solid #e5e0e5;
}
.entry h2{
    font-size: 22px; font-weight: 600;
    margin-bottom: 20px;
    color: #21111f;
}
.entry h3{
    font-size: 18px; font-weight: 600;
    margin-bottom: 20px;
    color: #21111f;
}
.entry h4{
    font-size: 16px; font-weight: 600;
    margin-bottom: 20px;
    color: #21111f;
}
.entry h5{
    font-size: 15px; font-weight: 600;
    margin-bottom: 20px;
    color: #21111f;
}
.entry h6{
    font-size: 14px; font-weight: 600;
    margin-bottom: 20px;
    color: #21111f;
}
.entry p{
    font-size: 15px;
    line-height: 30px;
    margin-bottom: 20px;
}
.entry p a, .moto-section a{
    color: #d48826;
    text-decoration: none;
}
    .entry p a:hover{
        text-decoration: underline;
    }
.entry ul{
    margin: 0 0 20px 25px;
}
    .entry ul li{
        line-height: 25px; font-size: 15px;
    }
.entry img{
    display: block;
    margin-bottom: 10px; padding: 2px;
    border:  2px solid #cfcfcf;
    box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
}
.entry aside img{
    width: 100%; height: auto; 
    border: none;
}

.entry .alignleft{ float: left; margin-right: 20px;}
.entry .alignright{ float: right; margin-left: 20px;}

/*
= etl-slider
-------------------------------------------------------------------------------------- */
.etl-slider{ margin-bottom: 40px;}
    .etl-slider .slides img{ cursor: zoom-in;}


/*
= products - gallery
-------------------------------------------------------------------------------------- */
#gallery-1 img {
    width: 100%; height: auto;
}
.entry #gallery-1 .gallery-item {
    width: 32%;
    margin: 0 0 10px 0;
}
    .entry #gallery-1 .gallery-item:nth-child(4n-2){
        margin-left: 2%; margin-right: 2%;
    }

/*
= SIDEBAR
-------------------------------------------------------------------------------------- */
.widget-area h3{
    margin-bottom: 15px;
    font-size: 18px;
    text-align: center;
}
.widget-area ul{
    margin: 0;
    list-style-type: none;
}
    .widget-area ul li{
        margin-bottom: 10px; margin-left: 15px;
        background-color: #e5e0e5;
        box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
        -webkit-transition: background-color 0.8s;
        -moz-transition: background-color 0.8s;
        -o-transition: background-color 0.8s;
        -ms-transition: background-color 0.8s;
        transition: background-color 0.8s;
    }
    .widget-area ul li.parent{ margin-left: 0; font-weight: bold;}
        .widget-area ul li a{
            display: block;
            width: 100%;
            padding: 12px 9px;
            text-decoration: none; font-size: 13px; text-transform: uppercase;
            color: #231f20;
            box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;

        }
    .widget-area li.current_page_item, .widget-area li:hover{
        background-color: #d2cfd3;
    }
/*
= FORMA
-------------------------------------------------------------------------------------- */
.wrapper .heading-gallery{margin: 50px 0 0;}
form .form-style{
    width: 100%;
    margin: 25px auto 0 auto; padding: 0;
    list-style-type: none;
}
.page-template-tpl-fullwidth form .form-style{
    width: 50%;
}
.page-template-tpl-fullwidth .entry h4{
    width: 50%;
    margin: 0 auto;
}
    form .form-style li{
        width: 100%;
        margin: 0 0 12px 0; padding: 0;
        font-size: 14px; line-height: 17px; color: #333; letter-spacing: normal; text-transform: none;
        background: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        }
    form .form-style li em{color: red; font-style: normal;}
        form .form-style li span{display: block;}
        form .form-style li input[type="text"],
        form .form-style li input[type="email"],
        form .form-style li textarea,
        form .form-style li select{
                width: 100%;
                margin: 5px 0 0; padding: 5px;
                color:#666;
                background:#F9F9F9;
                border-color:#D9D9D9 #EAEAEA #FFFFFF; border-style:solid; border-width:2px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                }
        form .form-style li textarea{ resize:none;}

        form .form-style li .wpcf7-list-item{display: block;}

        form .form-style li.captcha-list{width: 100%;}

            form .form-style li.captcha-list span,
            form .form-style li.captcha-list img{
                    display: block;
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                }
            form .form-style li.captcha-list img{
                    width: auto;
                    margin: 0; padding: 0;
                    border: none;
                }

        form .form-style span.wpcf7-not-valid-tip {
                background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
                border: medium none;
                color: red;
                display: inline-block !important;
                left: auto;
                margin: 0 !important;
                padding: 0;
                position: relative;
                top: auto;
                width: auto;
                z-index: 100;
                opacity: 1 !important;
                }
        form .form-style img.ajax-loader{ width: 16px; height: 16px;}

        div.wpcf7-validation-errors {
            border-color: red;
        }
        form .form-style li input.wpcf7-quiz{
            display: inline-block;
            width: 20%;
        }
        form .form-style li span.wpcf7-quiz-label{ display: inline-block; margin-right: 10px;}

    aside .form-style li:hover{ background-color: transparent;}

/*
= FOOTER
-------------------------------------------------------------------------------------- */
footer{
    padding: 10px;
    text-align: center;
    background-color: #DADADA;
}
    footer .wrapper{ position: relative;}

    .top-btn{
        position: absolute; top: -30px; right: 20px;
        display: block;
        width: 35px; height: 35px;
        text-indent: -9999px;
        background: url(../img/back-to-top.png) 0 50% no-repeat;
        background-size: cover;
    }
    footer .logo{
        width: 151px; height: 50px;
        margin: 0;
    }
    .location-info{
        margin: 0;
        list-style-type: none;
        position: relative;
    }
        .location-info li {
            display: inline-block;
            margin-right:15px;
            text-align: center; font-size: 16px; line-height: 38px;
        }
            .location-info li.location:before{
                content: "\f041";
                padding-right: 3px;
                font-family: FontAwesome; font-size: 25px;
                vertical-align: middle;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
            .location-info li.phone:before{
                content: "\f095";
                padding-right: 3px;
                font-family: FontAwesome; font-size: 25px;
                vertical-align: middle;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
            .location-info li.email:before{
                content: "\f0e0";
                padding-right: 3px;
                font-family: FontAwesome; font-size: 25px;
                vertical-align: middle;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
                .location-info li.email a{
                    text-decoration: none;
                    color: inherit;
                }
                    .location-info li.email a:hover{ color: #d48826;}

/*
= Mobile devices
-------------------------------------------------------------------------------------- */
@media screen and (max-width:1020px){
    .wrapper{ width: 840px;}
    .main-nav li{ margin: 0 15px;}

    /*moto-section*/
        .moto-section{ padding: 40px 0 60px 0;}
       
        .moto-section h2{ font-size: 28px; line-height: 32px;}
        .moto-section em{ font-size: 16px;}
        .moto-section ul li{ font-size: 16px;}

        .widget-area ul li{ text-align: center;}
        .widget-area .wpcf7 ul li{ text-align: left;}

        .moto-section .homepage-slider{ width: 430px; margin-left: 20px;}

}
@media screen and (max-width:860px){
    .wrapper{
        width: 90%;
    }

    /*header*/
    header{ padding: 10px 0;}
    .logo, footer .logo{
        float: none;
        margin: 0 auto;
    }
    nav{
        text-align: center;
        float: none;
        margin-top: 15px;
    }

    .phone-h{
        display: inline-block;
        *display: inline;
        *zoom: 1;
        float: none;
        margin: 15px 0 20px;
        }
    .main-nav li{ margin: 0 4px;}

    /*moto-section*/
    .moto-section{ text-align: center;}
    .moto-section .homepage-slider{
        display: inline-block;
        float: none;
        margin-bottom: 15px; margin-left: 0;
    }
    .moto-section ul{ list-style-type: none;}

    /*category-list home*/
    .category-list li{ transition: none;}
    .category-list li:hover{
        top: 0;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
    }
    .category-list li a{ padding: 20px 15px;}
    /*.category-list li a h4{ height: 55px;}*/

    /*sidebar down*/
        .entry article{ width: 100%;}
        .entry aside{ width: 100%;}
            .entry aside img{ width: 250px; margin: 0 auto;}

    .page-template-tpl-fullwidth form .form-style,
    .page-template-tpl-fullwidth .entry h4{
        width: 80%;
    }
    
}

@media screen and (max-width:600px){  /*dropdown-menu*/
    footer{ padding: 20px;}
    .entry h1{ font-size: 23px;}
    
    .mob-nav-main{display: block;}
    .main-nav{ display: none;}

    .moto-section .homepage-slider{
        width: 100%; height: auto;
    }
    .entry img{
        width: 100%; height: auto;
    }
    .entry img.alignleft{ margin-right: 0;}
    .entry img.alignright{ margin-left: 0;}
    .entry h1{ text-align: center;}

    /*category-list home*/
        .category-list li{
            width: 90%;
            margin: 8px 5% !important;
        }
        .category-list li a{ padding: 20px;}
    /*products*/
        .entry #gallery-1 .gallery-item {
            margin: 0 5% 10px !important;
            width: 90%;
        }

    /*main dropdown*/
        .ui-dropdownized {
            position: relative;
            width: 100% !important; height: 36px;
            border: 1px solid #cfcfcf;
            background: #fafafa none repeat scroll 0 0;
            box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
        }
            .ui-dropdownized div{
                display: block; float: left;
                width: 100%; height: 34px;
                line-height: 34px !important;
                overflow: hidden;
                text-indent: 10px; font-size: 18px; text-align: center; font-family: 'Titillium Web', sans-serif;
            }
            .ui-dropdownized::after {
                display: block; position: absolute; right: 16px; top: 50%;
                content: "";
                width: 9px; height: 7px;
                margin-top: -3px;
                background: rgba(0, 0, 0, 0) url("/wp-content/themes/mrezesr/assets/img/bgr-dropdown.png") no-repeat scroll 0 0;
            }
    .top-btn{
        right: 50%; top: -45px;
        margin-right: -17px;
    }

    /*map*/
        .map{
            padding: 0 5%;
            box-shadow: none;
            box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
        }
        
    .cycle-pager{ display: none;}
    #prev-next{ display: none;}

    .page-template-tpl-fullwidth form .form-style,
    .page-template-tpl-fullwidth .entry h4{
        width: 100%;
    }


}

/*
= Print
-------------------------------------------------------------------------------------- */
@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; }
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}