@font-face {
    font-family: "Le Havre Primary";
    src: url("../font/LeHavreLayers-Primary.otf");
}

@font-face {
    font-family: "Fontastique";
    src: url("../font/fontastique.ttf");
}

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');



*{
    margin: 0px;
    padding: 0px;
}

body{
    margin-left: 0px;
    margin-right: 0px;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body img{
    pointer-events: none;
    
}

header{
    display: flex;
    flex-flow: wrap;
    position: fixed;
    width: 100%;
    height: 100px;
    color: rgb(68,66,66);
    text-align: center;
    background: white;
    z-index: 2;
    transition: top 0.3s;
   
}

#menubar {
    width: 100%;
    margin-top: 15px;
    
}

#navbar{
    width: 100%;
    height: 35px;
    background-color: #fff;
    padding-top: 5px;
    border-bottom: 1px solid #ddd;
}


#navbar a{
    
    margin: 30px;
    font-family: 'Lato', sans-serif;
    font-size: 1.2em;
    text-decoration: none;
    color: rgb(68,66,66);
}

#navbar a:hover{
    border-bottom: 2px solid #009cdd; 
    cursor: pointer;
}


#mexadevil{
    width: 210px;
    margin-top: -10px;
    margin-left: auto;
    margin-right: auto;
    
}


.parallax {
    /* The image used */
    

    /* Set a specific height */
    height: 100px;
    padding: 50px;
    
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position:center;
    background-repeat: no-repeat;
    background-size:cover;
    border-bottom: 1px solid #ddd;
  
}

.parallax h1{
    margin-top: 20%;
    position: absolute;
    margin-left: 50%;
    margin-right: 50%;
    transform: translate(-50%, -50%);
    color: white;
    width: 400px;
    text-align: center;
    font-family: 'Fontastique', sans-serif;
    font-size: 3em;
    font-weight: bold;
    transition: 0.3s;
    text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5), 0px 0px 1px #000000, 0px 0px 1px #EFEFEF;
}

section{
    margin: 30px;
    margin-top: 40px;
    margin-bottom: 40px;
}

h2{
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: 1.8em;
    color: #009cdd;
    text-align: center;
    margin: 10px;
}
section p{
    font-family: 'Roboto', sans-serif;
    margin: 10px;
}

.icon-up-open{
    display: none;
}



.icon-down-open{
    display: none;
    
}

#dir{
    display: none;
}

label{
    font-size: 1.8em;
   
}

label:hover{
    cursor: pointer;
    
}


#dir:checked ~ #barra{
       transform: translateY(-1.1%);
   
}



#dir:checked ~ .icon-up-open{
    display: block;
}

#dir:checked ~ .icon-down-open{
    display: none;
}

#inicio{
    display: flex;
    flex-wrap: wrap;
    background: linear-gradient(rgba(40,40,40,.4), rgba(40,40,40,.5)), url("../img/p9.webp");
    background-attachment: fixed;
    background-size: cover;
    margin-left: 0;
    margin-right: auto;
    padding: 20px;
}

#estacionamiento{
    width: 40%;
    border: 1px solid #ddd;
    border-radius: 20px;
    background-color: #fff;
    margin-left: 10px;
    margin-right: auto;
    color: #333;
    font-family: 'Lato', sans-serif;
    transition: 0.3s;
}
#estacionamiento h3{
    color:#009cdd;
}

#estacionamiento a{
    font-size: 1.2em;
}

#estacionamiento img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    width: 300px;
}

#estacionamiento div{
    width: 100%;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

#fb{
    margin: 0 auto;
    margin-left: auto;
    margin-right: 10px;
    height: 500px;
    
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #999; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #777; 
}


#loading {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: block;
  opacity: 0.98;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#logoloading{
    width: 200px;
    margin-top: 50px;
}

#imgloading {
  position: absolute;
  top: 150px;
  left: 45%;
  z-index: 100;
}

#cargando { 
    margin-top: 50px;
}

#gtop {
  display: none;
  position: fixed;
  bottom: 100px;
  right: 25px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #009cdd;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#gtop:hover {
  background-color: #0089c2;
    
}


.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #009cdd;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  margin-left:auto;
  margin-right:auto;
  margin-top: 80px;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}




/* Responsive Diseño */

@media (max-width:700px){ /* Menu Responsive - Ocutlar | Mostrar*/
  
    
    #barra{
        width: 100%;
        background-color: #fff;
        margin-right: 0px;
        text-align: center;
        z-index: 1;
        height: 280px;
        overflow: hidden;
        transition: 0.2s;
        transform: translateY(-150%);
        border-bottom: 1px solid #ddd;
    }
    header a{
        width: 100vh;
        height: 35px;
        display: flex;
        margin: 0px; 
    }
    
    .icon-down-open{
    display: block;
    }
    

    
    .parallax{
        width: 100%;
        
    }
    
    #imgloading {
    position: absolute;
    top: 150px;
    left: 20%;
    z-index: 100;
    }
    
    #menubar{
        margin-left: 0;
        margin-right: 0;
    }
    
    
    
}


@media (min-width:320px){
    .parallax{
        width: 100%;
        margin-left: 0px;
        height: 300px;
        background-position: top;
        padding: 0;
       
        
    
    }
    
    .parallax h1{
        margin-top: 90vw;
        font-size: 2em;
        width: 300px;
        margin-left: 0px;
    }
    
}

@media (min-width:380px){
    .parallax{
        width: 100%;
        margin-left: 0px;
        height: 500px;
    }
    
    .parallax h1{
        margin-top: 70vw;
        font-size: 2em;
        width: 300px;
    }
    

}






@media (min-width:600px){
    .parallax{
        width: 100%;
        height: 600px;
        margin-left: 0px;
        
    }
    
    .parallax h1{
        margin-top: 50vw;
        font-size: 2em;
        width: 300px;
    }
    
    #dir:checked ~ .icon-up-open::before{
        display: none;
        
    }
    
     #dir:checked ~ .icon-down-open::before{
        display: none;
        
    }
    
    #dir:checked ~ nav{
        transform: translateY(-122%);
    }
    
}

@media (min-width:800px){
    
    
    .parallax h1{
        margin-top: 40vw;
        font-size: 2em;
        width: 300px;
    }
}

@media (min-width:1000px){
    
    .parallax{
        width: 100%;
        height: 600px;
    }
    .parallax h1{
        margin-top: 30vw;
        font-size: 2em;
        width: 300px;
    }
}

@media (min-width:1200px){
    .parallax{
        width: 100%;
        height: 600px;
    }
    
    .parallax h1{
        margin-top: 25vw;
        text-align: center;
        font-size: 2em;
        width: 300px;
    }
}

@media (min-width:1920px){
    .parallax{
        width: 100%;
        height: 600px;
        
    }
    
    
    .parallax h1{
        margin-top: 18vw;
        font-size: 2em;
        width: 400px;
    }
}


#fb1{
    display: block;
}

#fb2{
    display: none;
}

#fb3{
    display: none;
}


@media (max-width:920px){
    #estacionamiento{
        width: 100%;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }
    
    #fb{
        margin: 0 auto;
        width: 500px;
    }
    
    #estacionamiento img{
        width: 220px;
    }
}


@media (min-width:320px){
   #fb{
        margin: 0 auto;
        width: 300px;
       
    }
    
    #estacionamiento{
        width: 100%;
        
    }

}


@media (min-width:400px){
   #fb{
        margin: 0 auto;
        width: 420px;
    }
    
    #fb1{
        display: none;
    }
    
    #fb2{
        display: block;
    }
    
    #estacionamiento{
        width: 100%;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }

}

@media (min-width:700px){
   #fb{
        margin: 0 auto;
        width: 500px;
    }
    
    #fb1{
        display: none;
    }
    
    #fb2{
        display: none;
    }
    
    #fb3{
        display: block;
    }
  
}

@media (min-width:921px){
    #estacionamiento{
        width: 40%;
        height: 500px;
        margin-left: 0;
        margin-right: auto;
        margin-top: 0px;
    }
    
    #fb{
    margin: 0 auto;
    margin-left: auto;
    margin-right: 10px;
    height: 500px;
    
}
    
 
}