html,
body {
  height: 100%;
    width: 100%
}

body{
   background: #241706e0 no-repeat center center fixed;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
    margin: 0;
    height: 106%;
    width: 106%;
   box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
}



                                            /*Inspiracle*/
@media screen and (min-width: 1025px){
#imagen{
    height: 10%;
    width: 15%;
    background-image: url(logo.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 20%;
    top: 20%;
}
}

                                    /* Inspiracle Diseño para celulares */
@media screen and (min-width: 320px) and (max-width:768px){
    
    #imagen{
    height: 10%;
    width: 50%;
    background-image: url(logo.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 26%;
    top: 9%;
}
}

                                        /* Inspiracle Diseño para tablets */
@media screen and (min-width: 769px) and (max-width:1024px){
    
    #imagen{
    height: 15%;
    width: 40%;
    background-image: url(logo.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 28%;
    top: 1%;
}
    
    
}

a,
a:focus,
a:hover {
  color: #fff;
    font-size: 45px;
    margin: 5%;
   
    
}

                                    /* a Diseño para celulares */ 
@media screen and (min-width: 320px) and (max-width:768px){
   a,
a:focus,
a:hover {
  color: #fff;
    font-size: 20px;
    margin: 5%;
   
    
}
}

@media screen and (min-width: 769px) and (max-width:1024px){
   a,
a:focus,
a:hover {
  color: #fff;
    font-size: 20px;
    margin: 5%;
   
    
}
}

 
                                    /*Red Sociales*/
@media screen and (min-width:1025px){
.nav-social-3{
    
    position: absolute;
    z-index: 1;
    bottom: 2%;
    left: 8%;
    height: auto;
    width: 30%;
    
}    
    
}


                                    /* Red Sociales Diseño para celulares */ 
@media screen and (min-width: 320px) and (max-width:768px) {
   .nav-social-3{
        height: auto;
        width: 30%;
      position: absolute;
    left: 35%;
    bottom: 5%;
    z-index: 1;
    
}
}
                                            /* Red Sociales Diseño para tablets */ 
@media screen and (min-width: 769px) and (max-width:1024px) {
    .nav-social-3{
        height: auto;
        width: 30%;
      position: absolute;
    left: 35%;
    bottom: 0%;
    z-index: 1;
    
}
}
            
                                        /*Div Carrusel*/


@media screen and (min-width: 1025px){
.prueba{     
    
  display: table;
  width: 45%; 
  
  /* For at least Firefox */
  min-height: 100%; 
    
    position: absolute;
    
    
    }
}
    
                                        /* Div Carrusel Diseño para celulares */
@media screen and (min-width: 320px) and (max-width:768px) {
    
.prueba{     
    
  display: table;
  width: 98%;
  
  /* For at least Firefox */
  min-height: 100%; 
    
    position: absolute;
    
    
}
}

                                        /* Div Carrusel Diseño para tablets */
@media screen and (min-width: 769px) and (max-width:1024px) {
    
    .prueba{     
    
  display: table;
  width: 90%;
  
  /* For at least Firefox */
  min-height: 100%;  
    position: absolute;
        top: 0%;
        left: 3%;
        
        
    
    
}
}
                                               /*Carrusel*/
@media screen and (min-width:1025px){
slider{
    display: block;
    width: 100%;
    height: 45%;
    background-color: none;
    overflow: hidden;
    position: absolute;
    margin: 1%;
    margin-left: 3%;
    border-radius: 5px;
    z-index: -1;
    top: 15%; 
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
    
}
}
                                        /* Carrusel Diseño para celulares */
@media screen and (min-width: 320px) and (max-width:768px){
    
    
  slider{
    display: block;
    width: 78%;
    height: 20%;
    background-color: none;
    overflow: hidden;
    position: absolute;
    margin-left: 10%;
    border-radius: 5px;
    top: 20%; 
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
    
}
}

                                        /* Carrusel Diseño para tablets */
@media screen and (min-width: 769px) and (max-width:1024px){
    
  slider{
    display: block;
    width: 98%;
    height: 30%;
    background-color: none;
    overflow: hidden;
    position: absolute;
    margin: 1%;
    margin-left: 3%;
    border-radius: 5px;
    top: 15%; 
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
    
}
    
}


slider > * {
    
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: ;
    animation: slide 12s infinite;
    overflow: hidden;
    
    
}

slide:nth-child(1){
    left: 0%;
    animation-delay: -1s;
    background-image: url(es0.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

slide:nth-child(2){
    animation-delay: 2s;
    background-image: url(es1.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

slide:nth-child(3){
    animation-delay: 5s;
    background-image: url(es2.jpg);
   background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

slide:nth-child(4){
    left: 0%;
    animation-delay: 8s;
    background-image: url(es3.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

slide p{
    font-family: cursive;
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-top: 10%;
    color: firebrick;
}

@keyframes slide{
    0% { left: 100%; width: 100%;}
    5% { left: 0%;}
    25% { left: 0%;}
    30% { left: -100%; width: 100%;}
    30.0001%{ left: -100%; width: 0%;}
    100%{ left: 100%; width: 0%}
}




                                            /* Text Diseño para PC */ 
@media screen and (min-width: 1025px) {
	
    .text{
    
   color: aliceblue;
    position: absolute;
    top: 30%;
    width: 40%;
    left: 50%;
      text-transform: uppercase;
      font-size: 1.5rem;
    letter-spacing: 15px;
      margin-bottom: 5rem;
    font-family: Quicksand;
    padding: 0;
    margin: 2%;
}
    
}

                                            /* Text Diseño para celulares */ 
@media screen and (min-width: 320px) and (max-width: 767px) {
	 .text{
    
    color: aliceblue;
    position: absolute;
    top: 45%;
    width: 90%;
    right: 5%;
      text-transform: uppercase;
      font-size: 0.8rem;
    letter-spacing: 5px;
      margin-bottom: 5rem;
    font-family: Quicksand;
    padding: 0;
    margin: 0;
}
}
    
    


                                            /* Text Diseño para tabletas */ 
@media screen and (min-width: 768px) and (max-width: 1024px) {
	 .text{
    
    color: aliceblue;
    position: absolute;
    top: 45%;
    width: 90%;
    right: 5%;
      text-transform: uppercase;
      font-size: 1.1rem;
    letter-spacing: 15px;
      margin-bottom: 5rem;
    font-family: Quicksand;
    padding: 0;
    margin: 0;
}
}



.parrafo {

    padding-top: 5%;
    text-transform: none;
    font-family: sans-serif;    
  max-width: 100%;
  margin: 0 auto 3rem;
    letter-spacing: 4px;
    
}
    
                                        /* Text Diseño para celulares */ 
@media screen and (min-width: 320px) and (max-width: 767px) {
   .parrafo {
    padding-top: 0%;
    text-transform: none;
    font-family: sans-serif;    
    max-width: 100%;
  font-size: 0.8rem;
  margin: 0 auto 3rem;
    letter-spacing: 4px;
       
}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    
   .parrafo {
    padding-top: 0%;
    text-transform: none;
    font-family: sans-serif;    
    max-width: 100%;
    margin: 0 auto 3rem;
    letter-spacing: 4px;
       
}
    }



#particles-js{
    height: 100vh;
}