body,html{
font-family: 'Lato', sans-serif;
margin: 0;
font-size: 13px;
}
@media(max-width:1280px){
body, html{
font-size: 12px;
}
}
@media(max-width:1024px){
body, html{
font-size: 11px;
}
}
@media(max-width:575px){
body, html{
font-size: 10px;
}
}
#backToTop{
position:fixed;
bottom: 10%;
right: 1%;
z-index: 100;
border: none;
padding:15px;
font-size: 1em;
cursor: pointer;
background-color: #5A2D15;
}
h1,h2,h3,h4,h5{
font-family: 'Alegreya SC', serif;
}
h2{
font-size: 3em;
}
h3{
font-size: 2.5em;
}
@media(max-width:575px){
h2{
margin-bottom:0;
}
}
p{
font-size:1.25em;
line-height: 1.5em;
margin-bottom: 2em; text-align: justify;
}
@media(max-width:575px){
p{
margin-bottom:1em;
}
}
ul{
padding-left: 0;
}
a{
text-decoration: none;
color:#000000;
}
a:visited{ }
a:hover{
color:#000000;
}
.orange-color{
color:#EE7402;
}
.orange-bg{
background-color: #EE7402;
background-color: rgba(238,116,2,0.75);
}
.grey-bg{
background-color: #DADADA;
}
.brown-color{
color:#381300;
}
.brown-bg{
background-color: #381300 !important;
}
.white-color{
color:#ffffff;
}
.sand-color{
color:#F0D6A5;
}
.sand-bg{
background-color:#F0D6A5;
}
.wrapper{
}
.content-wrapper{ margin: 0 auto;
background-color: #ffffff;
}
.full-width{
width:100%;
}
.full-height{
height: 100vh;
}
.third-height{
height: 33vh;
}
.half-height{
height: 50vh;
} .p-t-5{
padding-top:5% !important;
}
.p-t-10{
padding-top:10% !important;
}
.p-b-5{ padding-bottom:5% !important;
}
.p-b-10{ padding-bottom:10% !important;
}
.p-tb-2{ padding:2vw 0;
}
.p-tb-5{ padding:5vw 0;
}
.p-lr-2{ padding:0 2vw;
}
.p-lr-5{ padding:0 5vw;
}
.p-tb-10{ padding:10vw 0;
}
.p-lr-10{ padding:0 10vw;
}
.padding-h10w{
padding:0 10vw;
}
.p-r-5{ padding-right: 5vw;
}
.p-l-5{ padding-left: 5vw;
}
.space-10{
height: 10px;
} .b-right{
border-right: 4px solid #1A4462;
}
@media(max-width:575px){
.b-right{
border:none;
}
}
.container{
width:75%;
margin: auto;
}
@media(max-width:575px){
.container{
width:90%;
margin: auto;
}
}
.flex-container{
display: flex; position: relative;
overflow: hidden;
}
.text-center{
text-align: center !important;
}
.text-right{
text-align: right !important;
}
.text-left{
text-align: left !important;
}
.text-justify{
text-align: justify;
}
.img-responsive{
max-width: 100%;
width: 85%;
}
.flex-block-25{
width:25%;
}
.flex-block-50{
width:50%;
}
.flex-block-75{
width:75%;
}
.flex-block-80{
width:80%;
}
.flex-block-90{
width:90%;
}
.flex-block-100{
width:100%;
}
@media(max-width:575px){
.flex-block-25,.flex-block-50, .flex-block-75, .flex-block-80, .flex-block-90{
width:auto;
padding: 0 15px;
}
}
.flex-center-h{ justify-content: center;
}
.flex-center-v{ align-items: center;
}
.flex-start{
justify-content: flex-start;
}
.flex-row{
flex-direction: row;
}
.flex-row-reverse{
flex-direction: row-reverse;
}
.flex-column{
flex-direction: column;
}
.flex-column-mobile{}
.flex-column-mobile-reverse{}
@media(max-width:575px){
.flex-column-mobile{
flex-direction: column !important;
align-items: center;
}
.flex-column-mobile-reverse{
flex-direction: column-reverse !important;
}
}
.row-reverse{
flex-direction: row-reverse;
}
.flex-mobile-space{}
@media(max-width:575px){
.flex-mobile-space{
justify-content: space-between !important;
}
}
.bg-squares{
position: absolute;
background-size: cover;
width: 100%;
height: 270px;
z-index: 1;
}
@media(max-width:575px){
.bg-squares{
display: none;
}
}
#wall{
width:90%;
height: 90vh;
margin:0 auto;
padding:10px;
}
@media(max-width:575px){
#wall{
display: none;
}
}
#wall-mobile{
display: none;
}
@media(max-width:575px){
#wall-mobile{
display: flex;
}
}
.flex-left-column{
width:33%;
height: 100%;
margin:10px;
}
.flex-right-column{
width:66%;
height: 100%;
margin:10px;
}
.flex-right-column .first-row{
width:100%;
height: 50%;
margin-bottom:10px;
}
.flex-right-column .second-row{
width:100%;
height: 50%;
margin-top:10px;
}
.flex-masonry{
flex-flow:column wrap;
} .item:nth-child(2n +1) { order: 1; }
.item:nth-child(2n +2) { order: 2; }
.item:nth-child(2n +3) { order: 3; }
.item:nth-child(2n +4) { order: 3; }
.flex-masonry::before,
.flex-masonry::after {
content: "";
flex-basis: 100%;
width: 0; } .header{
position: absolute;
background-color: #fff;
width:100%;
height: auto;
z-index: 100;
padding: 2% 0;
}
.hdr-logo{
padding-left: 5%;
width:10%;
align-items: center;
display: flex;
}
.hdr-logo a{
width:100%;
height: auto;
}
.btn-contattaci{
width:15%;
}
.home .header{ }
.header .content-wrapper, .credits .content-wrapper{
background-image: url(); }
.hdr-logo{
flex: 0 10%;
text-align: center;
}
@media(max-width:575px){
.hdr-logo{
flex: 0 50%;
}
footer .hdr-logo{
padding: 0;
width:auto;
}
} .logo-big{
width:30vw;
}
@media(max-width:575px){
.logo-big{width:35vh;}
}
.logo-menu{
width:100%;
}
.logo-footer{
width:125px;
} .header-navigation{
display: flex;
width:100%;
}
@media(max-width:575px){
.header-navigation{
justify-content: space-between;
align-items: center;
}
}
.nav-main{ flex: 0 85%;
}
.mobile-toggle{
display: none;
width: 40px;
height: 40px;
padding-right: 5%;
}
.mobile-toggle img{
width: 100%;
}
@media(max-width:575px){
.nav-main{
display: none;
}
.footer-navigation .nav-main{
display: flex;
}
.mobile-toggle{
display: block;
}
}
#close-menu{
position: absolute;
top:5%;
right:5%;
width: 40px;
height: 40px;
z-index: inherit;
cursor: pointer;
}
#close-menu img{
width: 100%;
}
#menu-mobile{
position: fixed;
top:0;
left:100%;
width:100%;
height: 100%;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
overflow: scroll;
}
#menu-mobile.open{
left:0;
}
#menu-mobile .nav-main{
display: flex;
flex-direction: column;
width: 100%;
color: #ffffff;
text-align: center;
list-style: none;
}
#menu-mobile .nav-main li{
font-size: 2em;
margin: 5% 0;
text-transform: uppercase;
}
#menu-mobile .nav-main li a{
color: #ffffff;
}
#menu-mobile .nav-main ul.nav-drop{
display: flex;
position: relative;
background-color: transparent;
width:auto;
height: auto;
text-align: center;
top:0;
align-items: center;
}
#menu-mobile .nav-main ul.nav-drop li{
font-size: 0.75em;
margin:0;
text-align: center;
}
.nav-main ul{
display: flex;
justify-content: center;
list-style: none;
color: #381300;
height: 100%;
align-items: center;
margin: 0;
padding: 0;
position: relative;
}
.nav-main ul.nav-drop{
display: none;
position: absolute;
height: auto;
width: 20vw;
flex-direction: column;
text-align: left;
align-items: start;
background-color: #fff;
top: 70px;
left:0;
padding: 0 7%;
z-index: inherit;
}
.nav-main ul li{
padding: 0 2%;
font-size: 1.25em;
font-family: 'Lato', sans-serif;
font-weight: 400;
text-transform: uppercase;
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.nav-main ul li.menu-item-has-children:hover ul.nav-drop{
display: flex;
}
.nav-main ul.nav-drop li{  font-size:0.75em;
padding: 2%;
display: block;
z-index: inherit;
}
.nav-main ul li a{
color: #381300;
text-decoration: none;
}
#menu-mobile .nav-main img {
width: 70px;
}
.nav-main .current-menu-item a, #menu-mobile .current-menu-item a{
color:#F47A20 !important;
} #footer{
}
.footer-navigation{
display: flex;
width:100%;
}
.footer-navigation .nav-main{
flex: 0 100%;
}
.footer-navigation .nav-main ul{
display: flex;
flex-direction: column;
justify-content: start;
list-style: none;
height: 100%;
align-items: flex-start;
margin: 0;
padding: 0;
position: relative;
}
.footer-navigation .nav-main ul.nav-drop{
display: none !important;
position: absolute;
top:40px;
}
.footer-navigation .nav-main ul li{
padding: 2% 0; font-size: 1em;
font-family: 'Lato';
font-weight: 400;
text-transform: uppercase;
}
.footer-navigation .nav-main ul li i{
display: none !important;
}
.footer-navigation .nav-main ul li a{
color: #381300;
text-decoration: none;
}
.social{
list-style: none;
display: flex;
}
.icona-social{
width:50px;
margin-right: 15px;
}
.credits{
display: flex;
align-content: center;
align-items: center;
justify-content: center;
padding: 15px 5vw;
}
.credits img{
width:200px;
height: auto;
}
.footer-block{
width:20%;
}
@media(max-width:575px){
.footer-block{
width:auto;
}
}
footer .policy{
list-style: none;
}
footer .policy li{
margin:5px 0;
} .cta{
margin: 1vw 0;
}
.btn-small{}
.btn-medium{}
.btn-big{}
.btn{
font-family: 'Lato', sans-serif;
font-size:1em;
text-decoration: none;
text-transform: uppercase;
color:#ffffff;
background-color:#EE7402;
padding:6px 18px;
border-radius: 8px;
z-index: 5;
font-weight: regular;
}
@media(max-width:575px){
.btn{
font-size: 1em;
padding:8px 12px;
}
}
.btn:hover{
text-decoration: none;
color:#ffffff;
} .title-section{}
.title-section h1{
font-size: 3em;
line-height: 1em;
line-height: auto;
position: relative;
}
.title-section h2{
font-size: 3.5em;
position: relative;
}
.title-section h2::after{
height: 4px;
width: 5%;
background-color: #fff;
position: relative;
bottom: 0px;
content: '';
left: 0;
display: block;
margin: 10px auto;
}
.title-section h5{
font-size: 1.5em;
}
.blocco h4{
font-size:2.5em;
}
.blocco h4 span{
color: #000000 !important;
}
.contattaci h2{
font-size: 3em;
} .light-modal-content{
background-color: #000000;
width:96%;
height: 100%;
max-height: 90%;
}
.light-modal-body{
height: 100%;
max-height: 100%;
text-align: center;
}
.light-modal-close-btn, .light-modal-close-icon{
background-color: #381300;
}
#video-reel {
width: auto;
height: 100%;
margin: 0 auto;
}
@media(max-width:575px){
#video-reel {
width: 100%;
height: auto;
margin: 0 auto;
}
} .hero{
background-size: cover;
background-position: center;
color:#ffffff;
}
.value-proposition{ flex:0 50%;
}
@media(max-width:575px){
.value-proposition{
flex:0 30%;
padding-top:10vh;
}
}
.value-proposition h1{
font-size: 4em;
line-height: 1em;
line-height: auto;
}
@media(max-width:575px){
.value-proposition h1{
font-size: 2.75em;
}
}
.value-proposition p{
font-size: 1.5em;
} #cta-video{
flex:0 30%;
cursor:pointer;
}
#cta-video .cta-wrapper{
width:200px;
}
.cta-wrapper img{
text-align: center;
margin: 0 auto;
max-width:100px;
} #home-tradizione-artigianale{
width:100%;
height: 100%;
}
#home-grano-italiano{
width:100%;
height: 100%;
}
#home-salute-benessere{
width:50%;
height: 100%;
margin-right:10px;
}
#home-farine-qualita{
width:50%;
height: 100%;
margin-left:10px;
}
.card{
width:100%;
height: 100%;
background-size: cover;
background-position: center center;
border-radius: 25px;
overflow: hidden;
}
.card .body{
background-color: rgba(56,19,0,0);
width: 100%;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
transition: all 0.3s;
position: relative;
}
.card-title{
color:#fff;
text-align: center;
font-size: 3em;
line-height: 1em;
width: 80%;
margin: 0 auto;
position:absolute;
transition: all 0.3s;
transform: translateY(0%);
}
.card-excerpt{
color:#fff;
text-align: justify;
width:70%;
opacity:0;
transition: all 0.5s;
padding-bottom:2%;
}
.card-btn{
opacity:0;
text-align: left;
transition: all 0.5s;
}
.card:hover .body{
background-color: rgba(56,19,0,0.7);
}
.card:hover .card-title{
position:relative;
}
.card:hover .card-excerpt, .card:hover .card-btn{
opacity: 1;
}
.card-thumbnail-mobile{
width:100%;
height: 50vh;
background-position: center top;
background-size: cover;
}
.card-title-mobile{}
.card-excerpt-mobile{}
.card-btn-mobile{} #home-farine{
background-color: #EE7402;
background-color: rgba(238,116,2,0.75);
height: 100%;
width:100%;
}
.card-farina{
overflow: hidden;
border-radius: 10px; background-color: #FFFFFF;
height: auto; border: 10px solid #FFFFFF;
align-items: center;
margin:0 15px;
width: 150px;
padding-bottom: 15px;
position: relative;
}
@media(max-width:1336px){
.card-farina{
width: 130px;
}
}
@media(max-width:1200px){
.card-farina{
width: 120px;
}
}
@media(max-width:1024px){
.card-farina{
width: 105px;
border-radius: 12px;
border: 8px solid #ffffff;
margin: 0 10px;
}
}
@media(max-width:575px){
.card-farina{
width:60vw;
margin:2.5vh auto;
height: auto;
padding-bottom: 0;
}
}
.card-farina .thumbnail-farina{
width:100%; 
height: auto;
border-radius: 10px;
}
.card-farina .info-cta{
text-align: center;
}
@media(max-width:575px){
.card-farina .thumbnail-farina{
margin-top:0vh;
}
.card-farina .info-cta{
position: absolute;
bottom:10px;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
padding-bottom: 0px;
}
}
.card-farina .tipo-farina{
text-align: center;
font-size: 1.5em;
}
@media(max-width:1336px){
.card-farina .tipo-farina{
font-size:1.25em;
}
}
@media(max-width:1200px){
.card-farina .tipo-farina{
font-size:1.2em;
}
}
@media(max-width:575px){
.card-farina .tipo-farina{
font-size:2.75em;
margin-bottom: 0.5em;
color:#ffffff;
}
}
#farine-tradizionali{ flex:0 70%;
}
#farine-speciali{
flex:0 35%;
}
#farine-speciali .card-farina, #farine-speciali-mobile .card-farina{ border: 10px solid #c29436;
background: #c29436;
margin: 0px;
} .mappa{
flex: 0 60%;
padding:5%;
}
.info{
flex:0 50%;
padding:5%;
}
.info ul{
list-style: none;
margin-left:20px;
}
.info ul li{
display: flex;
align-items: center;
margin: 5% 0;
font-size:1.25em;
}
.info ul li span{
padding-left:2.5%;
}
.info ul li span a{
width: 100%;
color:#ffffff;
text-decoration: underline;
} .content-row{
margin-top: 0px;
margin-bottom: -5px;
}
.content-row .testo, .content-row .gallery{
flex:0 50%;
}
.content-row .testo p{
padding:0 20%;
font-size:1.5em;
}
@media(max-width:575px){
.content-row .testo p{
padding:0 5%;
}
}
.gallery{
width:50vw;
position: relative;
overflow: hidden;
}
@media(max-width:575px){
.gallery{
width:100%;
}
}
.gallery .slideshow{
width:100%;
position: relative;
}
.gallery .slideshow .swiper-horizontal{
width:100%;
height: auto;
}
.gallery .slideshow .swiper-horizontal .swiper-wrapper{
width:100%;
height: 100%;
} .content-farina{
background-color:#f3f3f3;
}
.content-farina .slideshow{
flex:0 60%;
}
.content-farina .slideshow .swiper{
width:720px;
height: auto;
}
.p-lr-5-mobile{}
@media(max-width:575px){
.p-lr-5-mobile{
padding: 0 5%;
}
}
@media(max-width:575px){
.content-farina .slideshow .swiper, .content-farina .slideshow .swiper-farina{
width:100%;
height: auto;
}
}
.swiper .swiper-wrapper, .swiper-farina .swiper-wrapper{
width:100%;
height: 100%;
}
.content-farina .informazioni-farina{
flex:0 35%;
}
.informazioni-farina ul{
list-style: none;
}
.informazioni-farina h2{
font-size: 1.25em;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
color:#EE7402;
}
.swiper-button-next, .swiper-button-prev{
color:#ffffff;
outline:none;
}
.swiper-button-next:focus, .swiper-button-prev:focus {
outline-color: -webkit-focus-ring-color;
outline-style: auto;
outline-width: 0px;
outline:none;
} .insetticidi{ margin: auto;
background-color: #F0F2F2;
}
@media(max-width:575px){
.insetticidi{
width:100%;
}
}
.insetticidi ul{
width: auto;
}
.insetticidi ul{ font-size: 1.25em;
line-height: 1.5em;
}
@media(max-width:575px){
.insetticidi ul{
width:84%; }
}
.insetticidi h3{ }
.display-desktop{}
.display-mobile{display:none;}
@media(max-width:575px){
.display-desktop{display:none !important;}
.display-mobile{display: block!important;}
}
#slider-farine-home{
width:100%;
}
#slider-farine-home .swiper-wrapper{
width:100%;
}
#slider-farine-home .card-farina{
width:60vw !important;
}
.swiper-button-prev {
content:'' !important;
background-image: url(https://molinomandelli.com/wp-content/themes/molino-mandelli-theme/static/img/prev.png) !important;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width:50px;
height: 50px;
}
.swiper-button-next {
content:'' !important;
background-image: url(https://molinomandelli.com/wp-content/themes/molino-mandelli-theme/static/img/next.png) !important;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width:50px;
height: 50px;
}
.swiper-button-prev::after, .swiper-button-next::after{
content: '' !important;
}