/*
Theme Name: UdiCortes
Theme URI: http://udicortes.com.br/
Author: Marcelo Martins
Author URI: https://m3studio.com.br/
Description: Website configurado para adaptar aos vários dispositivos mobile e desktops.
Version: 1.0
License: Privada
Tags: Cortes Personalizados, uberlândia, rapidez, agilidade, qualidade, variedade.
Text Domain: Udicortes
*/

@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800';
@import 'assets/fontastic/styles.css';
@import 'assets/css/page.css';
@import 'assets/css/contato.css';
@import 'assets/css/category.css';
@import 'assets/css/single.css';



*{
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;    
}



img{
    display: block;
    max-width: 100%;
}

body{ 
    margin: 0;
    padding: 0;
}

.conteudo{
    margin: auto;
    width: 95%;
}





/*ANCORAS*/
#ofertas{
    height: 70px;
}

#produtos{
    height: 50px;
}

#contato{
    height: 20px;
}




/*HEADER***********************/

.header{
    height: 50px;    
    background: #fff;
    margin: 0px 0 0 0 !important;
}

 .header .conteudo{
    background: #fff;
    width: 100%;
    border-bottom: 2px solid #FC870D;    
}

.logo{ 
    margin: 5px; 
    font-size: 20px;
    z-index: 100;
}

.logo img{
    width: 80%;
    margin: 0 0 0 5px;
}

.header .conteudo{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;    
    position: fixed;
    z-index: 100;    
}

.icon-menu{
    display: block;
    width: 42px;
    height: 40px;
    font-size: 25px;
    color: #fff;
    background: #FC860C;
    text-align: center;
    line-height: 40px;
    padding: 5px;
    margin: 5px;
    margin-left: auto;
    cursor: pointer;
    z-index: 100;
}

.nav{
    position: absolute;
    top: 50px;
    left: -100%;
    width: 100%;
    -webkit-transition: all 0.4s;
    transition: all 0.4s; 
    z-index: 100;
}


.menu{
    list-style: none;
    margin: 0;
    padding: 0;    
}

.menu li a{
    display: block;
    padding: 15px;
    background-color: rgba(252,134,12,0.9);
    text-decoration: none;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    font-size: 15px;
    font-weight: 400;
    text-align: center;
}
.menu li a:hover{
    background-color: rgba(252,134,12,1);
    color: #fff;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    text-decoration: none;
}

.mostrar{
    left: 0;
}






/*BANNER***********************/


.banner{
    margin-top: 0px;
    position: relative;    
}

.banner img{
    max-height: 715px;
    width: 100%;
}








.emp{
    text-align: center;
    padding: 7px 0;
    font-weight: 800;
    font-size: 34px;
}

.emp1{    
    color: #FC860C;
}

.emp2{ 
    color: #323231;
}

.empresa{
    text-align: center;
    background: url(assets/images/temp/bg-emp.jpg) center center no-repeat fixed;
    padding: 10px 0 20px 0;
    color: #fff;
}










.youtube{
    margin: 20px 0;
}

.tube_titulo{
    font-size: 23px;
    color: #202020;
    font-weight: 800;
    text-align: center;
    margin: 10px 0;
}

.tube_titulo a{
    text-decoration: none;   
}

.tube_titulo a:hover{
    text-decoration: none;   
}



.tube-bloc{        
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
}


.tube1{
    color: #FC860C;
}

.tube2{
    color: #323231;
}

.icon-tube{
    color: #D21A1A;
    font-size: 50px;
    margin: 0 0 -13px 0 !important;
}

.tube_video{
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px; 
    overflow: hidden;
}


.tube_video iframe,
.tube_video object,
.tube_video embed{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}








.produtos{
    text-align: center;
    background: url(assets/images/temp/bg-prod.jpg) center center no-repeat fixed;
    padding: 20px 0;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
}

.prod{
    margin: 20px 0;
}

.prod-bloc{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.prod-bloc-center{
    display: block;
}

.prod-bloc-center a{
    text-decoration: none;
}

.prod-bloc-center a:hover{
    text-decoration: none;
    transition: all 0.4s; 
}


.prod-bloc-center a:hover p{    
    background: #FC870D;
    color: #fff;
    transition: all 0.4s; 
}

.prod-bloc-center p{
    font-size: 20px;
    text-align: center;
    color: #323231;
}


.prod-bloc-center img {
    opacity: 0.7;
    filter: alpha(opacity=40); /* For IE8 and earlier */
    transition: all 0.4s;
}

.prod-bloc-center img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    transition: all 0.4s;
}














/*CONTATO***********************/

.contato{
    background: url(assets/images/temp/bg-contact.jpg);
    padding: 10px 0 !important;
}

.text-center{
    color: #fff;
    font-weight: 700;
    font-size: 35px;
    margin: 0 0 40px 0;
}

.contato .btn{
    width: 140px;
    background: #FC870D;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding: 10px;
    text-align: center;
}

.contato .btn:hover{
    -webkit-transition: all 0.4s;
    transition: all 0.4s;    
}


.contato .form-control{
    color: #FC870D !important;    
}

.contato label{
    color: #fff;
}





.wpcf7-mail-sent-ok{
    text-align: center;
    color: #0fd11e;
    border: 1px solid #0fd11e !important;
}


.wpcf7-validation-errors{
    text-align: center;
    color: #FC870D;
    border: 1px solid #FC870D !important;
}

.wpcf7-not-valid-tip{
    color: #FC870D !important;
}








/*FOOTER***********************/

.footer{
    padding: 10px 0;   
    text-align: center;
    background: #fff;
}

.footer-txt{
    color: #333333;
    font-size: 30px;
    font-weight: 800;
}

.footer-rig{
    background: #FC870D;
    color: #fff;
    padding: 10px;
    font-weight: 300;
    margin: 20px 0 0 0;
}

.footer-rig p{
    font-weight: 800;
    margin: 5px 0 0 0;
}

.footer-flex{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}



.backtopo{ 
    width:50px; 
    height:50px; 
    background:url(assets/images/icon_back.png) no-repeat; 
    cursor:pointer; 
    position:fixed;
    z-index:1000; 
    bottom:20px; 
    right:10px; 
    display:none;
}
.backtopo:hover{ 
    /*background:url(assets/images/icon_back2.png) no-repeat;*/
    -webkit-transition: all 0.4s;
    transition: all 0.4s; 
}








/*RESPONSIVO 480*************************************************************************************************************************/
@media(min-width:480px){
    
    .logo img{
        width: 55%;
        margin: -1px 0 0 20px;
    }  
    
    
    .youtube{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
    
    
    .tube-bloc{        
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    } 
    

    
}








/********************************************************************************************************************************************/
@media(min-width:768px){ 
    
    .produtos{
        font-size: 35px;
    }

    
    
    .backtopo{     
        right: 40px;
    }
    
    .header{
        margin: 0px 0 0 0 !important;
    }
    
       
    
}













/*******************************************************************************************************************************************/
@media(min-width:1024px){     
    
    header{
        background: #fff;
        float: left;
        width: 100%;
    }
    .header .conteudo{        
        background-color: #fff;
        float: left;
        width: 100%;
    }
    
    
    
    .logo{
        margin: 30px 0 0 30px;
        width: 200px;
    }
    
    .logo img{
        width: 90%;
        margin: -20px 0 7px 40px;
    }
        
    
    
    
    .nav{
        position: static;
        width: auto;
        margin: 35px 0;
    }
    
    .icon-menu{
        display: none;
    }
    
    .menu{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: -13px 50px 0 0 !important; 
    }    
    
    
    

    .menu li a{
        background: none;        
        color: #333;        
        padding: 11px 15px;        
        text-decoration: none;       
        border-bottom: none;
        font-size: 14px;
        font-weight: 300;
    }
    
    .menu li a:hover{
        background: #FC860C;
        color: #fff;
    }
    
    
    .menu li a:after{
        content: "";
        display: table;
        width: 0%;
        height: 1px;
        background: #fff;
        margin: 5px auto 0;
        
        -webkit-transition: all 0.4s ease;
        
        transition: all 0.4s ease;
    }    
  
        
    .menu li a:hover:after{
        width: 70%;        
    }
    
    .tube_titulo{
        font-size: 30px;
    }
    
    
    .emp{   
        font-size: 60px;
        margin: 30px 0 0 0;
    }
    
    .empresa{
        padding: 80px 0;
        font-size: 20px;
        font-weight: 300; 
        margin: 0 0 60px 0;
    }
    
  
    .empresa h2{
        font-size: 40px;
        font-weight: 800;
    }
    
    .produtos{
        padding: 30px 0;
    }
    
    
    .prod-bloc{        
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: center;
        
        margin: 20px 0 10px 0;
    }
    
    .prod-bloc-center{
        margin: 0 0 15px 0;
    }
    
    .footer-txt{
        font-size: 40px;
    }
    
    .footer-rig{        
        width: 480px;
        padding: 30px;        
        margin: 0px 0 0 0;
        font-size: 22px;
        float: right;
    }

    .footer-rig p{        
        margin: 10px 0 0 0;
        font-size: 13px;
    }
    
    
    .footer img{
        margin: 15px 0 0 0;
    }
    
    .contato{        
        padding: 30px 0 !important;
    }
    
    

}











/*******************************************************************************************************************************************/
@media(min-width:1280px){    
    
   .header .conteudo{      
        height: 80px;
        background-color: #fff;
        float: left;
        width: 100%;
    }
    
    .logo{
        width: 328px;
    }
    
    .logo img{
        width: 100% !important;        
        margin: -28px 0 7px 70px;
    }
    
    .nav{
        margin: 45px 20px 40px 0;
    }
    
     .contato{        
        padding: 70px 0 50px 0 !important;
    }

    
    
}