/* Extra small devices (phones, 600px and down) */
  @media (max-width: 600px) {
    #header{
        background-color: white;
        position: fixed;
        top:0%;
        left:0%;
        width:100%;
        height:12%;
        z-index: 1;
    }
    
    .container{
        position: absolute;
        top:15%;
        left:33%;
        width:50%;
        height:75%;
        border:none;
        display:inline-block;
    }
    
    .button{
        position: absolute;
        left:0%;
        width:70%;
        height:25%;
        background-color: #00adef;
        border:none;
        border-radius: 30px;
        color: white;
        font-size: 22px;
        font-weight: bold;
        box-shadow: 0 20px 20px 0 rgb(58, 57, 57), 0 20px 20px 0 grey;
    }
    
    .button1{
        top:0%;
    }
    
    .button2{
        top:35%;
    }
    
    .button3{
        top:70%;
    }
    
    #footer{
        background-color: white;
        position: fixed;
        top:90%;
        left:0%;
        width:100%;
        height:30%;
        z-index: 1;
    }

    .footer1{
        position:absolute; 
        top:-6%; 
        left:12.5%;  
        width:80%;
        height:60%;
        text-transform: uppercase; 
        text-align: center;   
        display: block;
        font-size: 12.5px;
    }
    
    .footer11{
        left:10%; 
        position: absolute;
        color:black; 
        text-decoration: none;   
        display: none;
    }
    
    .footer12{
        left:40%;  
        position: absolute;
        color:black; 
        text-decoration: none; 
        display: none;
    }
    
    .footer13{
        left:65%; 
        position: absolute;
        color:black; 
        text-decoration: none; 
        display: none;
    }
  
    .footer14{
        top:6%;
        left:32.5%; 
        position: absolute;
        color:black; 
        text-decoration: none; 
        font-size: 13px;
    }

    .boia{
        position:absolute;
        width:10%; 
        top:4%; 
        left:5%;
    }

    .copyright{
        position:absolute; 
        top:10%; 
        left:30%;  
        width:50%;
        text-transform: uppercase; 
        text-align: center;  
        font-size: 13px; 
    }

    #barraNav{
        position:absolute;
        width:2%; 
        height:18%;
        top:25%; 
        left:83%;
        border: none;
        display: inline;
        background-color: white;
       
    }

    .barraFooter{
        position:absolute; 
        width:80%; 
        top:12.5%; 
        left:15.5%;
    }

    .logo{
        position:absolute;
        width:200px; 
        top:20%; 
        left:5%;
    }

    /*MENU*/
    #ContainerMenu{
        position: absolute;
        background-color: black;
        opacity: 0.95;
        width:100%;
        height:100%;
        left:0%;
        top:0%;
        z-index: 0;
    }
    
    #Menu{
        position: absolute;
        top:15%;
        width:50%;
        height:40%;
        left:26%;
        color: white;
        font-weight: bold;
        font-size: 22px;
        text-align: center;
    }
    
    #cruz{
        position: absolute;
        top:0%;
        width:3%;
        height:5%;
        left:80%;
        background-color:black;
      border: none;
       
    }

  }

  @media (width:320px){
    #header{
        background-color: white;
        position: fixed;
        top:0%;
        left:0%;
        width:100%;
        height:14%;
        z-index: 1;
    }

    .footer14{
        top:0%;
        left:10%; 
        width:90%;
        position: absolute;
        color:black; 
        text-decoration: none; 
        font-size: 13px;
    }

    .copyright{
        position:absolute; 
        top:6%; 
        left:10%;  
        width:90%;
        text-transform: uppercase; 
        text-align: center;  
        font-size: 13px; 
    }

      /*Brevemente*/

      .buttonBreve{
        position: absolute;
        top:22.5%;
        width:140%;
        height:50%;
        left:-35%;
        background-color: #00adef;
        border:none;
        border-radius: 50px;
        color: white;
        font-size: 28px;
        font-weight: bold;
        box-shadow: 0 20px 20px 0 rgb(58, 57, 57), 0 20px 20px 0 grey;
    }
  }

  @media (width:360px){
    .footer14{
        top:3.5%;
        left:20%; 
        position: absolute;
        color:black; 
        text-decoration: none; 
    }

    .copyright{
        position:absolute; 
        top:8%; 
        left:5%;  
        width:100%;
        text-transform: uppercase; 
        text-align: center;  
        font-size: 12.5px; 
    }

    .boia{
        position:absolute;
        width:10%; 
        top:7%; 
        left:5%;
    }

    /*Brevemente*/

    .buttonBreve{
        position: absolute;
        top:22.5%;
        width:140%;
        height:50%;
        left:-35%;
        background-color: #00adef;
        border:none;
        border-radius: 50px;
        color: white;
        font-size: 28px;
        font-weight: bold;
        box-shadow: 0 20px 20px 0 rgb(58, 57, 57), 0 20px 20px 0 grey;
    }
  }

  @media (width:375px){
    .footer14{
        top:3.5%;
        left:20%; 
        position: absolute;
        color:black; 
        text-decoration: none; 
    }

    .copyright{
        position:absolute; 
        top:8%; 
        left:5%;  
        width:100%;
        text-transform: uppercase; 
        text-align: center;  
        font-size: 12.5px; 
    }

    .boia{
        position:absolute;
        width:10%; 
        top:7%; 
        left:5%;
    }

    /*Brevemente*/

    .buttonBreve{
        position: absolute;
        top:22.5%;
        width:140%;
        height:50%;
        left:-35%;
        background-color: #00adef;
        border:none;
        border-radius: 50px;
        color: white;
        font-size: 28px;
        font-weight: bold;
        box-shadow: 0 20px 20px 0 rgb(58, 57, 57), 0 20px 20px 0 grey;
    }
  }

  @media (width:411px){
    .footer14{
        top:5%;
        left:20%; 
        position: absolute;
        color:black; 
        text-decoration: none; 
    }

    .copyright{
        position:absolute; 
        top:10%; 
        left:5%;  
        width:100%;
        text-transform: uppercase; 
        text-align: center;  
        font-size: 12.5px; 
    }

    .boia{
        position:absolute;
        width:10%; 
        top:7%; 
        left:5%;
    }

    /*Brevemente*/

    .buttonBreve{
        position: absolute;
        top:22.5%;
        width:140%;
        height:50%;
        left:-35%;
        background-color: #00adef;
        border:none;
        border-radius: 50px;
        color: white;
        font-size: 28px;
        font-weight: bold;
        box-shadow: 0 20px 20px 0 rgb(58, 57, 57), 0 20px 20px 0 grey;
    }
  }

  @media (width:414px){
    .footer14{
        top:6%;
        left:20%; 
        position: absolute;
        color:black; 
        text-decoration: none; 
    }

    .copyright{
        position:absolute; 
        top:10%; 
        left:5%;  
        width:100%;
        text-transform: uppercase; 
        text-align: center;  
        font-size: 12.5px; 
    }

    .boia{
        position:absolute;
        width:10%; 
        top:7%; 
        left:5%;
    }

     /*Brevemente*/

     .buttonBreve{
        position: absolute;
        top:22.5%;
        width:140%;
        height:50%;
        left:-35%;
        background-color: #00adef;
        border:none;
        border-radius: 50px;
        color: white;
        font-size: 28px;
        font-weight: bold;
        box-shadow: 0 20px 20px 0 rgb(58, 57, 57), 0 20px 20px 0 grey;
    }
  }

  @media (width:375px) and (height:812px){
    .footer14{
        top:8%;
        left:20%; 
        position: absolute;
        color:black; 
        text-decoration: none; 
    }

    .copyright{
        position:absolute; 
        top:10%; 
        left:5%;  
        width:100%;
        text-transform: uppercase; 
        text-align: center;  
        font-size: 12.5px; 
    }

    .boia{
        position:absolute;
        width:10%; 
        top:7%; 
        left:5%;
    }
  }

  @media (max-width:1200px) and (min-width:600px){
    
    .container{
        position: absolute;
        top:43%;
        left:25%;
        width:50%;
        height:75%;
        border:none;
        display:inline-block;
    }
    
    .button{
        position: absolute;
        left:0%;
        width:30%;
        height:30%;
        background-color: #00adef;
        border:none;
        border-radius: 30px;
        color: white;
        font-size: 25px;
        font-weight: bold;
        box-shadow: 0 20px 20px 0 rgb(58, 57, 57), 0 20px 20px 0 grey;
    }

    .button1{
        left:0%;
    }
    
    .button2{
        left:35%;
    }
    
    .button3{
        left:70%;
    }

    .footer1{
        position:absolute; 
        top:-6%; 
        left:12.5%;  
        width:80%;
        height:60%;
        text-transform: uppercase; 
        text-align: center;   
        display: block;
        font-size: 12.5px;
    }
    
    .footer11{
        left:10%; 
        position: absolute;
        color:black; 
        text-decoration: none;   
        display: none;
    }
    
    .footer12{
        left:40%;  
        position: absolute;
        color:black; 
        text-decoration: none; 
        display: none;
    }
    
    .footer13{
        left:65%; 
        position: absolute;
        color:black; 
        text-decoration: none; 
        display: none;
    }
  
    .footer14{
        top:3%;
        left:40%; 
        position: absolute;
        color:black; 
        text-decoration: none; 
        font-size: 15px;
    }

    .copyright{
        position:absolute; 
        top:45%; 
        left:5%;  
        width:100%;
        text-transform: uppercase; 
        text-align: center;  
        font-size: 15px; 
    }

    .logo{
        position:absolute;
        width:300px; 
        top:20%; 
        left:5%;
    }
    
    .boia{
        position:absolute;
        width:5%; 
        top:25%; 
        left:1%;
    }

    /*MENU*/
    #ContainerMenu{
        position: absolute;
        background-color: black;
        opacity: 0.95;
        width:100%;
        height:100%;
        left:0%;
        top:0%;
        z-index: 0;
    }
    
    #Menu{
        position: absolute;
        top:15%;
        width:50%;
        height:40%;
        left:26%;
        color: white;
        font-weight: bold;
        font-size: 22px;
        text-align: center;
    }
    
    #cruz{
        position: absolute;
        top:6.5%;
        width:3%;
        height:5%;
        left:90%;
        background-color:black;
      border: none;
       
    }

    
  }
  
  @media (max-width:900px) and (min-width:600px){
    .container{
        position: absolute;
        top:43%;
        left:26.5%;
        width:50%;
        height:75%;
        border:none;
        display:inline-block;
    }
    
    .button{
        position: absolute;
        left:0%;
        width:35%;
        height:30%;
        background-color: #00adef;
        border:none;
        border-radius: 30px;
        color: white;
        font-size: 20px;
        font-weight: bold;
        box-shadow: 0 20px 20px 0 rgb(58, 57, 57), 0 20px 20px 0 grey;
    }

    .button1{
        left:0%;
    }
    
    .button2{
        left:38%;
    }
    
    .button3{
        left:77%;
    }
  }

  @media (max-width:1138px) and (min-width:600px){
    .container{
        position: absolute;
        top:43%;
        left:26.5%;
        width:50%;
        height:75%;
        border:none;
        display:inline-block;
    }
    
    .button{
        position: absolute;
        left:0%;
        width:35%;
        height:30%;
        background-color: #00adef;
        border:none;
        border-radius: 30px;
        color: white;
        font-size: 20px;
        font-weight: bold;
        box-shadow: 0 20px 20px 0 rgb(58, 57, 57), 0 20px 20px 0 grey;
    }

    .button1{
        left:0%;
    }
    
    .button2{
        left:38%;
    }
    
    .button3{
        left:77%;
    }
  }

  /* Small devices (portrait tablets and large phones, 600px and up) */
  @media only screen and (width: 768px) {
    #header{
        background-color: white;
        position: fixed;
        top:0%;
        left:0%;
        width:100%;
        height:15%;
        z-index: 1;
    }
    
    .container{
        position: absolute;
        top:40%;
        left:15%;
        width:70%;
        height:50%;
        border:none;
        display:inline-block;
    }

    .button{
        position: absolute;
        left:0%;
        width:32%;
        height:40%;
        background-color: #00adef;
        border:none;
        border-radius: 30px;
        color: white;
        font-size:25px;
        font-weight: bold;
        box-shadow: 0 20px 20px 0 rgb(58, 57, 57), 0 20px 20px 0 grey;
    }

    .button1{
        left: 0%;
    }
    
    .button2{
        left:35%;
    }
    
    .button3{
        left:70%;
    }
    
    #footer{
        background-color: white;
        position: absolute;
        top:90%;
        left:0%;
        width:100%;
        height:10%;
        z-index: 1;
    }
    
    .footer1{
        position:absolute; 
        top:-3%; 
        left:12.5%;  
        width:80%;
        height:60%;
        text-transform: uppercase; 
        text-align: center;   
        display: block;
        font-size: 15px;
    }
    
    .footer11{
        left:10%; 
        position: absolute;
        color:black; 
        text-decoration: none;
        display: none;   
        
    }
    
    .footer12{
        left:40%;  
        position: absolute;
        color:black; 
        text-decoration: none; 
        display: none;
    }
    
    .footer13{
        left:65%; 
        position: absolute;
        color:black; 
        text-decoration: none; 
        display: none;
    }
  
    .footer14{
        top:1%;
        left:30%; 
        position: absolute;
        color:black; 
        text-decoration: none; 
    }

    .boia{
        position:absolute;
        width:10%; 
        top:8.5%; 
        left:5%;
    }

    .copyright{
        position:absolute; 
        top:50%; 
        left:10%;  
        width:90%;
        text-transform: uppercase; 
        text-align: center;  
        font-size: 15px; 
    }

    .barraFooter{
        position:absolute; 
        width:70%; 
        top:46%; 
        left:20%;
    }

    #barraNav{
        position: absolute;;
        width:2%; 
        height:18%;
        top:37%; 
        left:90%;
        border: none;
        display: inline;
        background-color: white;
       
    }

/*Menu*/
    #ContainerMenu{
        position: absolute;
        background-color: black;
        opacity: 0.95;
        width:100%;
        height:100%;
        left:0%;
        top:0%;
        z-index: 0;
    }
    
    #Menu{
        position: absolute;
        top:15%;
        width:50%;
        height:40%;
        left:26%;
        color: white;
        font-weight: bold;
        font-size: 22px;
        text-align: center;
    }
    
    #cruz{
        position: absolute;
        top:3%;
        width:3%;
        height:5%;
        left:90%;
        background-color:black;
      border: none;
       
    }


  }
  
  /* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (width:1024px){
    #header{
        background-color: white;
        position: fixed;
        top:0%;
        left:0%;
        width:100%;
        height:15%;
        z-index: 1;
    }

    .container{
        position: absolute;
        top:40%;
        left:15%;
        width:70%;
        height:50%;
        border:none;
        display:inline-block;
    }

    .button{
        position: absolute;
        left:0%;
        width:32%;
        height:35%;
        background-color: #00adef;
        border:none;
        border-radius: 30px;
        color: white;
        font-size:30px;
        font-weight: bold;
        box-shadow: 0 20px 20px 0 rgb(58, 57, 57), 0 20px 20px 0 grey;
    }

    .button1{
        left: 0%;
    }
    
    .button2{
        left:35%;
    }
    
    .button3{
        left:70%;
    }

    .footer1{
        position:absolute; 
        top:-5%; 
        left:6%;  
        width:80%;
        height:60%;
        text-transform: uppercase; 
        text-align: center;   
        display: block;
        font-size: 20px;
    }

    .footer11{
        left:10%; 
        position: absolute;
        color:black; 
        text-decoration: none;
        display: none;   
        
    }
    
    .footer12{
        left:40%;  
        position: absolute;
        color:black; 
        text-decoration: none; 
        display: none;
    }
    
    .footer13{
        left:65%; 
        position: absolute;
        color:black; 
        text-decoration: none; 
        display: none;
    }
  
    .footer14{
        top:15%;
        left:45%; 
        color:black; 
        text-decoration: none; 
    }
    
    .barraFooter{
        position:absolute; 
        width:70%; 
        top:46%; 
        left:20%;
    }
    
    .boia{
        position:absolute;
        width:10%; 
        top:8.5%; 
        left:5%;
    }

    .copyright{
        position:absolute; 
        top:50%; 
        left:10%;  
        width:90%;
        text-transform: uppercase; 
        text-align: center;  
        font-size: 18px; 
    }

     /*Brevemente*/

     .buttonBreve{
        position: absolute;
        top:0%;
        width:100%;
        height:50%;
        left:0%;
        background-color: #00adef;
        border:none;
        border-radius: 80px;
        color: white;
        font-size: 28px;
        font-weight: bold;
        box-shadow: 0 20px 20px 0 rgb(58, 57, 57), 0 20px 20px 0 grey;
    }
  } 

  @media (min-width:1200px){
    .logo{
        position:absolute;
        width:300px; 
        top:20%; 
        left:5%;
    }
  }