body{font-family: 'Dosis', sans-serif; margin: 0px; overflow-x: hidden; background-color: #fff} 



#wrapper{width: 1000px; margin:auto; position: relative;}

#container{width: 100%; position: relative; height: 100vh;}

h1{color: #555; margin:25px 0px 20px; font-size: 60px; line-height: 45px; font-family: 'Amatic SC', cursive;} 

h3{color: #777; margin:0px 0px; font-weight: 100}
h2{color: #777; margin:0px 0px 30px; font-weight: 100;font-family: 'Amatic SC', cursive; text-align: center; font-size: 47px;} 

#fotoab{width: 400px; margin:auto;}

header{text-align: center;
    left: 0px;
	
cursor: pointer; 
margin-bottom: 30px;

position: fixed;

width: 100%;

background-color: #fff;
z-index: 999999999;}

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


.logo-page{width: 200px}
.col-sx{width: 30%;
float: left;}
.col-dx{width: 60%;
float: right;}


footer{width: 100%;

text-align: center;

padding: 14px 0px;

position: fixed;

bottom: 0px;

background-color: #fafafa;
z-index: 999999999;}

footer a{color: #666;} 



#cerchio-iniziale{position: absolute;

width: 300px;

left: 350px;

top: 200px;

font-family: 'Amatic SC', cursive;
-webkit-animation-duration: 0.7s;

-moz-animation-duration: 0.7s;

animation-duration: 0.7s;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

animation-iteration-count: infinite; 

height: 300px;

border-radius: 150px;

cursor:pointer;
z-index: 10} 

.satellite-prima{opacity:0;}

.satellite{position: absolute;

width: 120px;

height: 120px;

background-color: aqua;

border-radius: 60px;

text-align: center;

line-height: 119px;


-webkit-animation-duration: 0.7s;

-moz-animation-duration: 0.7s;

animation-duration: 0.7s;

 -webkit-animation-timing-function: ease-in-out;
 -moz-animation-timing-function: ease-in-out;
 animation-timing-function: ease-in-out;}  

.satellite a{ color: #fff; text-decoration: none;font-family: 'Amatic SC', cursive;font-size: 29px; }

#chi-sono{top: 400px;left: 200px; background-color: #a95b49;}

#cosa-faccio{top:550px;left:440px; background-color: #31b082} 	 

#cosa-ho-fatto{top: 400px;left: 700px; background-color: #d7b418}
 
.section{height: 100vh;padding-top: 150px;} 

.up{width: 40px;

height: 40px;

border-radius: 25px;

background-color: red;

padding: 5px; 
position: absolute;

}

.contenitore{margin-bottom: 80px;

line-height: 40px;position: relative; text-align: justify; }

.satellite-link{position: relative;

width: 120px;

height: 120px;

background-color: aqua;

border-radius: 60px;

text-align: center;

line-height: 105px;

margin:30px auto;

-webkit-animation-duration: 0.7s;

-moz-animation-duration: 0.7s;

animation-duration: 0.7s;

 -webkit-animation-timing-function: ease-in-out;
 -moz-animation-timing-function: ease-in-out;
 animation-timing-function: ease-in-out;
 
 display: none;}  

.satellite-link a{ color: #fff; text-decoration: none;font-family: 'Amatic SC', cursive;font-size: 20px; }

.mob{display: none}



.subsatellite{position: absolute;

width: 100px;

height: 100px;

background-color: #6bc7c7;

border-radius: 50px;

text-align: center;

line-height: 97px;

left:710px;
-webkit-animation-duration: 0.7s;

-moz-animation-duration: 0.7s;

animation-duration: 0.7s;

 -webkit-animation-timing-function: ease-in-out;
 -moz-animation-timing-function: ease-in-out;
 animation-timing-function: ease-in-out;}  

.subsatellite a{ color: #fff; text-decoration: none;font-family: 'Amatic SC', cursive;font-size: 25px; }


.satellite:hover, .subsatellite:hover, .subsatellite-b:hover{
-ms-transform: scale(1.1, 1.1); /* IE 9 */
  -webkit-transform: scale(1.1, 1.1); /* Safari */
  -moz-transform: scale(1.1, 1.1); /* Safari */
  transform: scale(1.1, 1.1);
  
  -ms-transition-duration:0.3s;
  -webkit-transition-duration:0.3s;
  -moz-transition-duration:0.3s;
  transition-duration:0.3s;}

.subsatellite-b{position: absolute; 

width: 100px;

height: 100px;

background-color: #6bc7c7;

border-radius: 50px;

text-align: center;

line-height: 97px;

left:710px;
-webkit-animation-duration: 0.7s;

-moz-animation-duration: 0.7s;

animation-duration: 0.7s;

 -webkit-animation-timing-function: ease-in-out;
 -moz-animation-timing-function: ease-in-out;
 animation-timing-function: ease-in-out;}  

.subsatellite-b a{ color: #fff; text-decoration: none;font-family: 'Amatic SC', cursive;font-size: 22px; }






#sub1{top: 680px;
left: 359px;
width: 110px;
height: 110px;
border-radius: 55px; 
line-height: 109px;}

#sub5{top: 669px; 
left: 528px;
width: 100px;
height: 100px;
border-radius: 50px;
line-height: 26px;}

#sub2{top:330px; left:825px}
#sub3{top:480px; left:840px;width: 110px; height: 110px; border-radius: 55px;line-height: 110px; }

#sub3 a{font-size: 24px;}
#sub4{top:545px;width: 110px; height: 110px; border-radius: 55px;line-height: 110px;}
 #sub4 a{font-size: 26px;}


.subsub{background-color: #e77597}



.subsatellite-section{position: relative;

width: 100px;

height: 100px;

background-color: #6bc7c7;

border-radius: 50px;

text-align: center;

line-height: 97px;

left:710px;
-webkit-animation-duration: 0.7s;

-moz-animation-duration: 0.7s;

animation-duration: 0.7s;

 -webkit-animation-timing-function: ease-in-out;
 -moz-animation-timing-function: ease-in-out;
 animation-timing-function: ease-in-out;}  

.subsatellite-section a{ color: #fff; text-decoration: none;font-family: 'Amatic SC', cursive;font-size: 22px; }


/*--------- IPAD -------------*/

@media screen and (max-width: 790px) {

body{overflow-x: hidden;}

#wrapper{width:100%}





#cerchio-iniziale {

    position: absolute;
    width: 40%;
left: 30%;
top: 250px;
   
    height: 300px;
    border-radius: 150px;
    cursor: pointer;
    z-index: 1;

}

.satellite {
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 65px;
    text-align: center;
    line-height: 130px;
    z-index: 100;} 
    
    .satellite a { font-size: 24px;}

#chi-sono {
    top: 600px;
left: 17%;}
    
#cosa-faccio {
   top: 650px;
left: 41%;}
    
#cosa-ho-fatto {
    top: 600px;
    left: 65%;}
    
.subsatellite-b a {
  font-size: 18px;}

#sub4{top: 702px;
width: 110px;
height: 110px;
border-radius: 55px;
line-height: 110px;
left: 81%;}    
#sub1{top: 800px;
left: 258px;} 

#sub5 {
    top: 769px;
    left: 448px;}  
    
    #sub3{
    top: 480px;
    left: 77%;}
#sub2 {
    top: 760px;
    left: 63%;}

#sub6 {
    top: 109px;
    left: -2%;
    width: 90px;
    height: 90px;
    border-radius: 45px;
    line-height: 93px;
}

#sub7 {
    top: -79px;
    left: 30%;
    width: 120px;
    height: 120px;
    border-radius: 60px;
    line-height: 120px;
}

#sub8 {
top: -98px;
left: 60%;
width: 110px;
height: 110px;
border-radius: 55px;
line-height: 110px;
}

#sub9 {
top: 50px;
left: 10%;
width: 110px;
height: 110px;
border-radius: 55px;
line-height: 110px;
}

#sub10 {
top: -91px;
left: 60%;
width: 110px;
height: 110px;
border-radius: 55px;
line-height: 110px;
}
    
.section {
    min-height: 100vh;
    padding-top: 150px; 
    padding-left: 20px;
    padding-right: 20px;
    height: auto;
}



    
footer {font-size: 12px;} 

	
}


/*---------IPHONE---------*/

@media screen and (max-width: 750px) {

body{overflow-x: hidden;}

#wrapper{width:100%}

h1 {margin: 20px 0px ;
    font-size: 40px;
    line-height: 27px;
  }



#cerchio-iniziale {

    position: absolute;
    width: 60%;
    left: 20%;
    top: 150px;
   
    height: 300px;
    border-radius: 150px;
    cursor: pointer;
    z-index: 1;

}

.satellite {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    text-align: center;
    line-height: 103px;
    z-index: 100;}
    
    .satellite a { font-size: 24px;}

#chi-sono {
    top: 350px;
    left: 5%;}
    
#cosa-faccio {
    top: 390px;
    left: 36%;}
    
#cosa-ho-fatto {
    top: 350px;
    left: 68%;}
    
.subsatellite-b a {
  font-size: 18px;}
    
    


#sub6 {
    top: 109px;
    left: -2%;
    width: 90px;
    height: 90px;
    border-radius: 45px;
    line-height: 93px;
}

#sub7 {
    top: -79px;
    left: 30%;
    width: 120px;
    height: 120px;
    border-radius: 60px;
    line-height: 120px;
}

#sub8 {
top: -98px;
left: 60%;
width: 110px;
height: 110px;
border-radius: 55px;
line-height: 110px;
}

#sub9 {
top: 50px;
left: 10%;
width: 110px;
height: 110px;
border-radius: 55px;
line-height: 110px;
}

#sub10 {
top: -91px;
left: 60%;
width: 110px;
height: 110px;
border-radius: 55px;
line-height: 110px;
}
    
.section {
    min-height: 100vh;
    padding-top: 100px;
    padding-left: 20px;
    padding-right: 20px;
    height: auto;
}

.desk{display: none;}
.mob{display: block}

    
footer {font-size: 12px;} 

	
}




 @media only screen and  (max-width: 700px) {
	  .up {
    width: 40px;
    height: 40px;
    border-radius: 25px;
    background-color: red;
    padding: 5px;
    position: absolute;
   top: 26px;
z-index: 9999999999;
bottom: inherit !important;
left: 20px!important;
}
	 
	 #idh2{position: relative !important;margin-top: -150px;}
	 
.container {
 
    animation: inherit !important;
        animation-iteration-count: inherit;
    animation-iteration-count: infinite;
    opacity: 1;
    margin-top: 0px !important}
    
 #container2 ,  #container3 ,  #container4 {display: none}
 
 .imm-prodotto {
    width: 100%;
    display: inline-block;
    border-radius: 90px;
    overflow: hidden;
    height: auto;}
    .prodotto {
    width: 100%;
    margin-bottom: 30px;
    float: left;
}

#attiva-cerchio-4 , #attiva-5 , .cerchio{
  display: none}
    
.immagine {
    width: auto !important;
}
	 
	 
	 }