@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');



/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

header, nav {display: block;}
div {
  box-sizing:border-box;
}
/* =============================================================================
   Lists
   ========================================================================== */

ul, ol {margin: 1em 0; padding: 0 0 0 40px;}
nav ul, nav ol {list-style: none; list-style-image: none; margin: 0; padding: 0;}

a:link {color: inherit; text-decoration:none; font-weight:normal; }
a:active {color: inherit; text-decoration:none; font-weight:normal;}
a:visited {color: inherit; text-decoration:none; font-weight:normal;}
a:hover {color:inherit ; text-decoration:underline; font-weight:normal;}

h1 {
 font-weight: normal;
 color: #fff;
 font-size: 2em;
 background-color: /*#104a2e*/ /*#edddd0*/ #dcbea3;
 text-align: center;
 margin-top:14px;
 margin-bottom: 20px;
 margin-left: 0px;
 margin-right: 0px;
 line-height: 1.125em;
 text-transform: uppercase;
 padding: 1%;
 border-radius: 10px;
 -moz-border-radius: 10px; /* firefox */
 -webkit-border-radius: 10px; /* safari, chrome */
}
h2 {
font-weight:normal;
/*color:#217945*/;
font-size:1.5em;
}

.clear {
clear:both;
max-width:100%;
height:10px;
}
.clearsottile {
clear:both;
max-width:100%;
height:4px;
}
.clearrighina {
clear:both;
max-width:100%;
border-top:solid 1px #999;
height:10px;
}
.divdx{
display:inline;
float:right;
max-width:50%;
margin-left:10px
}
.divsx {
display:inline;
float:left;
max-width:50%;
margin-right:10px
}
.img99 {
max-width:98%;
border:0em;
}
.img100 {
max-width:100%;
border:0em;
}
.imgarr {
 border-radius: 10px;
 -moz-border-radius: 10px; /* firefox */
 -webkit-border-radius: 10px; /* safari, chrome */
 border: 0px;
 max-width: 100%;
}

.imgrot {
 border-radius: 200px;
 -moz-border-radius: 200px; /* firefox */
 -webkit-border-radius: 200px; /* safari, chrome */
 border: 0px;
 max-width: 100%;
}

.imgcam{  /*usata solo in saletta colazione e fitness*/
width:400px;
border-width: 0px;
max-width:90%;
padding:3px;
border:1px solid #999;
background-color:#fff;
-moz-box-shadow:0 0 2px #333;
-webkit-box-shadow:0 0 2px #333;
}
.menulinkinbasso{
font-size:0.8em;
text-align:center;
color:#000000;
margin-top:6px;
margin-bottom:6px;
margin-right:0px;
margin-left:0px;
text-transform:uppercase;
line-height:2em;
}
.menulinkinbasso a:link {color: inherit; text-decoration:none; font-weight:normal; }
.menulinkinbasso a:active {color: inherit; text-decoration:none; font-weight:normal;}
.menulinkinbasso a:visited {color: inherit; text-decoration:none; font-weight:normal;}
.menulinkinbasso a:hover {color: #f18e0d; text-decoration:underline; font-weight:normal;}

.messaggiookinvio {
font-size:2em;
color:red;
}

.testoace {
font-size:1em;
/*line-height:1.375em;*/
margin-top:0px;
margin-right:0px;
margin-bottom:6px;
margin-left:0px;
text-align:center;
}
.testoadx {
font-size:1em;
/*line-height:1.375em;*/
margin-top:0px;
margin-right:0px;
margin-bottom:6px;
margin-left:0px;
text-align:right;
}
.testogiu {
font-size:1em;
/*line-height:1.375em;*/
margin-top:0px;
margin-right:0px;
margin-bottom:6px;
margin-left:0px;
text-align:justify;
-webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
}
.testoasx {
font-size:1em;
/*line-height:1.375em;*/
margin-top:0px;
margin-right:0px;
margin-bottom:6px;
margin-left:0px;
text-align:left;
}



/* Responsive Video iFrame */
.video-responsive {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}

.video-responsive iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}






/* == Stili di base - Mobile first =============================================================== */
body {
 font-size: 100%;
 font-family: Poppins;
 color: #333; /*#104a2e;*/
 background-color:#fff; /*#e7dbcc; */ /*sfondo marroncino chiaro*/
 padding-right:40px;
 padding-left:40px;
}
#container00{
 width: 100%;
 margin: 0 auto;
 padding: 0;
 }
#container01 {
 width: 100%;
 margin: 0 auto;
 padding: 0; 
}
#ContainerSlide {
 width: 100%;
 margin: 0 auto;
 padding: 0;
 /*border:solid 1px #fff;
 border-radius: 10px;
 -moz-border-radius: 10px;*/ /* firefox */
 /*-webkit-border-radius: 10px;*/ /* safari, chrome */
}
header {
 width: 100%;
 }
#logo {
 margin: 0;
 padding: /*0.35em*/ 0;
 }
#logo img {border-width: 0px;
  max-width: 100%;
}
#bandiere {
 margin: 0;
 padding: /*0.35em*/ 0;
 }
#bandiere img {border-width: 0px;
  max-width: 100%;
}
#container02 {
 width: 100%;
 margin: 0 auto;
 padding: 0;
}
.div01 {
display:block;
max-width:100%;
}
.div02 {
display:block;
max-width:100%;
}
.div2-01 {
display:block;
max-width:100%;
}
.div2-02 {
display:block;
max-width:100%;
}
.div3-01 {
display:block;
max-width:100%;
}
.div3-02 {
display:block;
max-width:100%;
}
.div3-03 {
display:block;
max-width:100%;
}
.div4-01 {
display:block;
max-width:100%;
}
.div4-02 {
display:block;
max-width:100%;
}
.div4-03 {
display:block;
max-width:100%;
}
.div4-04 {
display:block;
max-width:100%;
}
.divcol1{
display:block;
max-width:100%;
}
.divcol2{
display:block;
max-width:100%;
}

#divsx {
 display: block;
 max-width: 100%;
 /*background-color: #f2efeb;*/ /*sfondo dei menù*/
 
}
#divdx {
 max-width: 100%;
 display: block;
 background-color: #f2efeb; /*sfondo dei contenuti*/
 padding-left: 10px;
 padding-right: 10px;
 padding-top: 2px;
 padding-bottom:10px;
 border-radius: 10px;
 -moz-border-radius: 10px; /* firefox */
 -webkit-border-radius: 10px; /* safari, chrome */
}
.prodsx {
width:100%;
display:block;
}
.proddx {
width:100%;
display:block;
}

.DivSlide{
 padding-top:0px;
}







/* -----------------------------------
IPAD PORTRAIT
------------------------------------ */
@media only screen and (min-width: 768px) {

  /* Nascondiamo le sezioni che non vogliamo 
visualizzare su tablet e desktop        */

  #nav1 > h2, #around {
    display: none;
  }

  #nav2 > #around {
    display: none;
  }


  #container00 {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background-image: url(grafica/testata.jpg);
    background-size: 100% 42%;
    background-position: center 1.8em;
    background-repeat: no-repeat;
  }

  #container01 {
    position: relative;
    max-width: 100%; /*900px*/
    /*padding: 0 1.06382978723404%;*/
    margin: 0 auto;
  }

 #containerSlide {
  position: relative;
  /*max-width: 95%;
    padding: 0 1.06382978723404%;*/
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
 }


  


 #container02 {
  position: relative;
  max-width: 100%; /*900px*/
  /* padding: 0 1.06382978723404%;*/
  margin: 0 auto;
 }

  header {
    margin-bottom: 0em;
    padding-bottom:0em;
  }
  /*----------------------------------------------*/

.div01 {
display:inline-block;
float:left;
max-width:75%;
padding-right:10px;
}

.div02 {
display:inline-block;
float:right;
width:25%;
padding-left:10px;
}
.div2-01 {
display:inline-block;
float:left;
max-width:70%;
padding-right:10px;
}
.div2-02 {
display:inline-block;
float:right;
width:30%;
padding-left:10px;
}

.div3-01 {
display:inline-block;
float:left;
max-width:50%;
padding-right:10px;
}
.div3-02 {
display:inline-block;
float:right;
width:25%;
padding-left:10px;
}
.div3-03 {
display:inline-block;
float:right;
width:25%;
padding-left:10px;
}
.div4-01 {
display:inline-block;
float:left;
max-width:40%;
padding-right:10px;
}
.div4-02 {
display:inline-block;
float:right;
width:20%;
padding-right:10px;
}
.div4-03 {
display:inline-block;
float:right;
width:20%;
padding-right:10px;
}
.div4-04 {
display:inline-block;
float:right;
width:20%;
padding-right:10px;
}
.divcol1{
display:inline-block;
max-width:50%;
float:left;
}
.divcol2{
display:inline-block;
max-width:50%;
float:left;
}
 #divsx {
  display: inline;
  float: left;
  width: 20%;
  /*background-color:#fff;*/ /*sfondo dei menù*/
  padding-right: 10px;
  /*background-color: #f2efeb;*/ /*sfondo dei menù*/
 
 }

 #divdx {
  display: inline;
  float: right;
  width: 80%;
  background-color: #f2efeb; /*sfondo dei contenuti*/
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0px;
  margin-top: 20px;
  border-radius: 10px;
  -moz-border-radius: 10px; /* firefox */
  -webkit-border-radius: 10px; /* safari, chrome */
 }
.prodsx {
width:35%;
display:inline;
float:left;
}
.proddx {
width:65%;
display:inline;
float:right;
padding-left:2%;
}
.prod1 {
width:100%;
display:block;
}
.prod2 {
width:100%;
display:block;
}
.prod3 {
width:100%;
display:block;
}
.prod1 {
width:50%;
display:inline;
float:left;
margin-left:auto;
margin-right:auto;
margin-top:0em;
margin-bottom:0em;
}
.prod2 {
width:50%;
display:inline;
float:left;
margin-left:auto;
margin-right:auto;
margin-top:0em;
margin-bottom:0em;
}
.prod3 {
width:50%;
display:inline;
float:left;
margin-left:auto;
margin-right:auto;
margin-top:0em;
margin-bottom:0em;
}
}











/* -----------------------------------
IPAD LANDSCAPE + NETBOOK
------------------------------------ */
@media only screen and (min-width: 1024px) {
#catfer {display:  normal;}
 #container01 {
  max-width: 100%; /*900px*/
 }

#containerSlide {
 max-width: 95%;
}
 #container02 {
  max-width: 100%; /*900px*/
 }
#logo {
 float:left;
  margin: 0;
 padding: 0.35em 0;
 }
#logo img {border-width: 0px;
  max-width: 100%;
}
#bandiere {
 float:right;
  margin: 0;
 padding: 0.35em 0;
 }
#bandiere img {border-width: 0px;
  max-width: 100%;
  margin-top:35px;
  margin-left:0px;
}

.prod1 {
width:30%;
display:inline;
float:left;
margin-left:0em;
margin-right:1em;
margin-top:0em;
margin-bottom:0em;
}
.prod2 {
width:30%;
display:inline;
float:left;
margin-left:0em;
margin-right:1em;
margin-top:0em;
margin-bottom:0em;
}
.prod3 {
width:30%;
display:inline;
float:left;
margin-left:0em;
margin-right:1em;
margin-top:0em;
margin-bottom:0em;
}

 .DivSlide {
  padding-top: 100px;
 }






}












/* -----------------------------------
DESKTOP
------------------------------------ */
@media only screen and (min-width: 1200px) {

 #container01 {
  max-width: 100%; /*1140px*/
  /*max-width:1000px;*/
 }

 #container02 {
  max-width: 100%; /*1140px*/
  /*max-width:1000px;*/
 }



}