body
{
	background-color:seagreen;
}

@font-face {
font-family: "Careof";
src: url("font/Careof-Medium.otf");
}

@media (max-width: 800px) {
  .row {
    padding-top:5%;
    width: auto;
    height:auto;
    background-color:white;
    margin-top:4%; 
    margin-bottom:4%;
    margin-left:5%;
    margin-right:5%;
  }
    #title{
        margin-top:0%;
        margin-bottom:0%;
    }
    
    #about{
        margin-top:4%;
        margin-bottom:0%;
    }
    
    #loco {
        margin-top:4%;
        margin-bottom:0%;    
    }
    
    button{
    text-decoration:none;
    border-radius: 60px;
    color:white;
    background-color:transparent;
    border:solid;
    border-width:2px;
    width:5%px;
    height:35px;
    text-align:center;
    padding-right:4%;
    
}
    #bande{
        display:none;
    }
    
    #loco {
        display:none;
    }
    
    
     #about1 {
        display:none;
    }
    
    #bottom {
    position: absolute;
    bottom: 0;
    background:transparent;
    vertical-align:bottom;
  float: none;
    }
    
    #text {
    
    width:auto;
    background: none;
    background-color:none;
    color:white;
    font-family: sans-serif;
    margin-top:2%; 
    margin-bottom:4%;
    font-size;4%;
    }
    
       #uno {
    padding-top:0%;
    padding-bottom:0%;
    width:auto;
    height:20%;
    background-color:white;
    margin-top:2%; 
  }
       #due {
    padding-top:0%;
    padding-bottom:0%;
    width:auto;
    height:20%;
    background-color:white;
    margin-top:2%;
    }
    
        #tre {
    padding-top:0%;
    padding-bottom:0%;
    width:auto;
    height:20%;
    background-color:white;
    margin-top:2%; 
    }
        #quattro {
    padding-top:0%;
    padding-bottom:0%;
    width:auto;
    height:auto;
    background-color:white;
    margin-top:2%; 
    }
    
        h3 {
        
        font-size:90%;
        color:white;
        margin-left:1%;
        margin-right:1%;
        z-index:1;
    }
    
        h2 {
        
        font-size:90%;
        color:white;
        margin-left:1%;
        margin-right:1%;
        z-index:1;
        text-align:center;
    }
    
    .fixed-bottom {
    position: fixed;
    padding-bottom: 2%;

    
}
}



@media (min-width: 800px) {
    
      .row {
    background-color:white;
    margin-top:0%; 
    margin-bottom:2%;
    margin-left:2%;
    margin-right:2%;
    z-index:5;
          
  }
    
    button{
    text-decoration:none;
    border-radius: 60px;
    color:white;
    background-color:transparent;
    border:solid;
    border-width:2px;
    width:5%px;
    height:35px;
    text-align:center;
    padding-right:5%;
}
    
    #opt {
    display:none;
    }
    
       #text {
    
    width:auto;
    background: none;
    color:white;
    font-size:2%;;
    margin-top:2%; 
    margin-bottom:0%;
    font-family: sans-serif;
    font-size;3%;
    }
    
    #bottom {
    position: absolute;
    bottom: 0;
    background:transparent;
    vertical-align:bottom;
  float: none;
    }
    
      #uno {
    padding-top:0%;
    padding-bottom:0%;
    width:auto;
    height:40%;
    background-color:white;
    margin-top:2%;
  }
       #due {
    padding-top:0%;
    padding-bottom:0%;
    width:auto;
    height:20%;
    background-color:white;
    margin-top:2%; 
    }
    
        #tre {
    padding-top:0%;
    padding-bottom:0%;
    width:auto;
    height:20%;
    background-color:white;
    margin-top:2%; 
    }
        #quattro {
    padding-top:0%;
    padding-bottom:0%;
    width:auto;
    height:auto;
    background-color:white;
    margin-top:2%; 
    }
    
    h2 {
        
        font-size:15px;
        color:white;
        margin-left:1%;
        margin-right:1%;
        z-index:1;
        text-align:center;
    }
    
    h3 {
        
        font-size:15px;
        color:white;
        margin-left:1%;
        margin-right:1%;
        z-index:1;
        text-align:left;
    }
    
    .fixed-bottom {
    position: fixed;
    padding-bottom: 2%;

    
}
}