/* se trovi qualcosa di più efficiente, prima lo guardiamo assieme, che per me se impari a fare bene i css, sei a posto */
/*body *{box-sizing:border-box;}*/
html,body {border:0;margin:0;padding:0;width:100%;height:100%;font-family: 'Fauna One', black}/*Fauna One*/
h1,h2,p{margin:0;padding:0;}
h1{font-size:unset;}
#div_header{
    /*font-family: 'Lobster', serif;*/
    background-color:#FFD800;color:#fff;font-size:40px;line-height:80px;text-align:center;
}
p{padding:10px 0 0 0;}
.titolo_home{font-size:30px/*;text-transform:capitalize*/}
.testo_home{font-size:20px/*;font-family:'Fauna One'*/;position:relative}
#div_footer,#div_form input,#div_form textarea,#div_form button{font-family:"Fauna One",black}
.testo_prodotto{
    position:absolute;
    padding:0 5px;
    top:0;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    min-height: 100px;
    width:95%;
    font-family:'Fauna One';
}
#div_form input{
    height:50px;
    font-size:30px;
    padding-left:5%;
}
#div_form textarea{
    height:200px;
    font-size:20px;
    padding-left:5%;
}
#div_form button{
    height:100px;
    font-size:40px;
    text-transform:uppercase;
    color:#FFD800;
}
.relative{position:relative}
.float_left,.float_left_responsive{float:left;}

.float_right{float:right;}/*
questa la lascio perché la usi sempre ma si dovrebbe usare solo nei siti in arabo, 
piuttosto usa la position absolute;width:X;right:X o qualcosa del genere
*/
.clear_both{clear:both;}

.w21{width:21%}/* le larghezze da adesso i poi sempre in %, tanto basta settare la larghezza a 960px del #div_content*/
.w20{width:20%}/* le larghezze da adesso i poi sempre in %, tanto basta settare la larghezza a 960px del #div_content*/
.w25{width:25%}/* le larghezze da adesso i poi sempre in %, tanto basta settare la larghezza a 960px del #div_content*/
.w33{width:33%}
.w50{width:50%}
.w50p2{width:46%;padding:2%}
.w100p2{width:96%;padding:2%}
.w80{width:80%}

.p2{padding:2%}
.m2{margin:2%}

.p2-ve{padding:2% 0}
.p10-ve1{padding:10% 0 0 0}
.m2-ve{margin:2% 0}

.p2-ho{padding:0 2%}
.p5-ho{padding:0 5%}
.m2-ho{margin:0 2%}

.display_none{display:none;}

a {text-decoration:none;}

.introduzione{
    font-size:200px;
}
.div_spezza{background-color:#FFD800;height:90px;font-size:80px;line-height:80px;width:100%;/*font-family: 'Lobster', serif;*/font-weight:bold/*#072E71*/;color:#fff;text-align:center;}
.div_content,.div_content_bis,.div_content_tris{margin:0 auto;padding:4% 0;color:#FFD800;background-color:rgba(255,255,255,0.9)}
.div_content{width:960px;}
.div_content_bis{width:100vw;}
.div_content_tris{width:100%;}
#div_header{/*height:75px;*/width:100%}
#div_header_responsive{/*height:40px;*/width:100%;display:none;position:fixed;bottom:0}

#div_content_footer{/*position:fixed;*/bottom:0;/*height:75px;*/width:100%} /* 
non mi piace il fixed del footer ma vabbe, poi dipende da che footer si usa 
*/
#div_offset_footer{/*height:75px;*/width:100%}

.input_contatti{width:95%;padding:0;margin:0;border:0;color:#fff;background-color:#FFD800;margin:5px 0;}

.div_lagna,.div_stupore{
    background-color:rgba(255,255,255,0.4);
    font-size:20px;
    /*left:30%;*/
    padding:10px;
    position:absolute;
    top:0;    
}
.div_lagna{
    /*transform:rotate(10deg)*/
}
.div_stupore{
    /*transform:rotate(340deg)*/
}

@media only screen and (max-width:1000px) {
    
    .div_content{width:90%;margin:0 5%}/*
    qui è l'unico punto in cui stare attenti, la larghezza non è 100% ma 90% perché bisogna tenere conto del 
    padding del 5% a dx e a sx. così si evita di usare la pseudo classe box sizing *.* qualcosa
    */
    
    body{font-size:+1.5em} /* queesto è figo: aumenta di Xem tutti i font (aumenta di!!!) */
    
    .float_left_responsive{width:100%;padding:0;margin:0;height:auto!important}
    
    .float_left_responsive1{width:80%;padding:10%}
    .float_left_responsive2{width:90%;color:#000}
    .float_left_responsive3{width:10%;background-image:url('')}
    .float_left_responsive4{width:50%;margin:0 auto}
    
    
    .titolo_home{font-size:15px;text-transform:capitalize}
    #div_header{
        font-size:25px/*;height:50px*/;line-height:50px;text-align:center;
    }
.div_spezza{height:60px;font-size:50px;line-height:50px}

    /*.input_contatti{width:100%;height:3%}*/

    .div_lagna,.div_stupore{
        font-size:20px;  
    }
}