body{
    height: 100vh;
    width: 100vw;
    background-color: white;
    overflow-x: hidden;
    margin:0;
    padding:0;
    background-color: black; 
}
.titulo{
    font-family: "Varela Round", sans-serif;
    font-weight: 400;
    font-style: normal;
}


.ciz{
   
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 90vh;
    width: 40vw;
    background-color: rgb(255, 255, 255);
}
.tituloA{
    animation: tituloanimate;
    animation-timeline: view();
    

}
.cder{
    
   
    animation: laptop  ;
    animation-timeline: scroll();
    height: 90vh;
    width: 60vw;
   
    background-position: center;
    background-size: cover;
    background-image:url("../img/f2.png");
    
}
.textop{

    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;

}
.redCompaq{
   color: rgba(229, 25, 55, 1);
}


.splite{
  
    background-color: rgba(229, 25, 55, 1);
    height: 10vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
    text-align: center;
    
}


.cuadro{
   
   
    
  padding: 12px;
    border-radius: 7%;
  
 
}
.C1{
   
   
    display: flex;
    
    align-items: center;
    justify-content: center;
    background-color: rgb(255, 255, 255); 
    height: 90vh;

    width: 100vw;
   
   
}
.contProxi{
    animation: Proximamente  ;
    animation-timeline: view();
 width: 100%;
 background-color: rgba(255, 255, 255, 0.832);
 -webkit-box-shadow: -1px 7px 46px 5px rgba(255, 255, 255, 0.75);
-moz-box-shadow: -1px 7px 46px 5px rgba(255, 255, 255, 0.75);
box-shadow: -1px 7px 46px 5px rgba(255, 255, 255, 0.75);
}
.cabezera{
   
height: 10vh;
width: 100vw;
background-color: rgba(229, 25, 55, 1);;
}
.C2{

    background-color: white;

    animation: appear  ;
    animation-timeline: view();
  
    background-position: center;
   
    height: 90vh;
    width: 100vw;
    text-align: center;
    justify-content: center;
    align-content: center;
    color: aliceblue;

    background-size: cover;
    background-image:url("../img/f1.png");
}
@keyframes tituloanimate{
    from{
     
    }
    to{
        transform: translateY(10px);
    }
}
@keyframes Proximamente{
    from{
        opacity: 0;
    }
    to{
        transition-duration: 1s;
        opacity: 100;
    }
}

@keyframes laptop{
    from{
     
    }
    to{
        transform: translateX(2500px) translateY(200px);
        
    }
}
@keyframes appear{
    from {
        opacity: 0;
        -webkit-box-shadow: inset -3px 36px 300px 200px rgba(0,0,0,1);
        -moz-box-shadow: inset -3px 36px 300px 200px rgba(0,0,0,1);
        box-shadow: inset -3px 36px 300px 200px rgba(0,0,0,1);
         }
    to {
        opacity: 100;
        -webkit-box-shadow: inset -3px 36px 28px 16px rgba(0,0,0,0.51);
        -moz-box-shadow: inset -3px 36px 28px 16px rgba(0,0,0,0.51);
        box-shadow: inset -3px 36px 28px 16px rgba(0,0,0,0.51);  
       }
}
 
/*
 *  STYLE 1
 */

 body::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0);
}

body::-webkit-scrollbar
{
	width: 14px;
	background-color: rgba(0, 0, 0, 0);
}

body::-webkit-scrollbar-thumb
{
	background-color: rgba(229, 25, 55, 1);
}
@media (max-width: 600px) {

    .C1{
        height: 85vh;
    }
   
    .ciz{
       
        z-index: 1;
       
        width: 90vw;
        background-color: rgba(0,0,0,0);
        
    }
    .cuadro{
    
        padding-top: 140px;
        height: 50vh;

    }
    


    .cder{
        margin-top: 250px;
        z-index: 2;
        position: fixed;
        height: 40vh;
        width: 100vw;

    }

    @keyframes tituloanimate{
        from{
         
        }
        to{
            transform: translateY(20px);
        }
    }
   
}

/* Estilos para tablets y laptops pequeñas */
@media (min-width: 601px) and (max-width: 1024px) {

}

/* Estilos para laptops grandes y PCs */
@media (min-width: 1025px) {
   
}