@font-face{
    src:url("../font/Goldman-Bold.ttf");
    font-family:acom;
}

@font-face{
    src:url("../font/ShadowsIntoLight-Regular.ttf");
    font-family:t2;
}
@font-face{
    src:url("../font/FredokaOne-Regular.ttf");
    font-family:gra;
}
@font-face{
    src:url("../font/Marcellus-Regular.ttf");
    font-family:col;
}
@font-face{
    src:url("../font/KaushanScript-Regular.ttf");
    font-family:des;
}
body{
    background-image: url('../imagenes/fond1.jpg');
}
header{
  margin:auto;
  margin-bottom:10px;
  display:flex;
  flex-wrap: wrap;
  margin-top:30px;
  align-content:center;
  justify-content:center;
  width:100%;
  height:150px;
  /*background: rgb(6,244,233);
  background: linear-gradient(158deg, rgba(6,244,233,1) 0%, rgba(62,241,233,1) 26%, rgba(3,207,9,1) 35%, rgba(58,249,102,1) 69%, rgba(8,249,238,1) 100%);*/
 background: rgba(179,220,237,0.7);
}
h1{
    display:inline-block;
    margin: auto;
    width:14%;
    font-size:60px;
    text-align:center;
    font-family: des;
    color: rgb(8, 6, 138);
   
    
    
}
.h2{
    margin: auto;
    font-size:20px;
    text-align:right;
    width:100%;  
    font-family: des;
    color: rgb(8, 6, 138);
   
    
    
}
.log{
    background-image: url('../imagenes/log384.png');
    background-size: cover;
    width:120px;
    height:110px;
    display: inline;
    

}
h3{
    font-family:gra ;
    color: #fff;
    text-shadow: 2px 0 #090, 1px 0 #090, 0 1px #090, 0 -1px #090;
    
    font-size:26px;
    text-align: center;
}

video{
    margin-left:auto;
    width:45%;
    background-color:rgba(255, 255, 255, 0.5);
    height:300px;
}


.sss{
    margin-left:10px;
    width:70%;
    height:auto;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    
    
    
    
}
.ptp{
margin: auto;
width:90%;
text-align: center;
border-radius:5px;
font-family: des;
font-size:14px;
margin-bottom:10px;

/*background: rgb(255,255,255);
background: linear-gradient(321deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 62%, rgba(4,249,16,1) 84%, rgba(255,186,8,1) 86%, rgba(247,212,5,1) 90%, rgba(0,247,228,0.9500175070028011) 92%, rgba(247,249,245,1) 98%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%);*/
}
span{
    color:blue;
    font-weight: bold;
    font-size:20px;
}
.cp{
    margin: auto;
    width:100%;
    height:auto;
    display: flex;
    align-content: center;
    justify-content: center;
      
}
.video{
    margin-right: auto;
    width:40%;
    height:300px;
    display: flex;
    align-content: center;
    justify-content: center;
    background: rgb(225, 225, 226);  
}

.s1{
width: 18%;
height: 240px;
background: rgb(2,0,36);
background: linear-gradient(7deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
filter:opacity(0.8);
margin: 2px;
padding:2px;
color:#fff;
font-family:col;
font-size:15px;

}

.s2{
    width: 19%;
    height: 240px;
    background: rgb(2,0,36);
    background: linear-gradient(7deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    filter:opacity(0.8);
    margin: 2px;
    padding:2px;
    color:#fff;
    font-family:col;
    font-size:15px;
    
    }

 .s3{
width: 18%;
height: 240px;
background: rgb(2,0,36);
background: linear-gradient(7deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
filter:opacity(0.8);
margin: 2px;
padding:2px;
color:#fff;
font-family:col;
font-size:15px;

}
.s4{
    width: 18%;
    height: 240px;
    background: rgb(2,0,36);
    background: linear-gradient(7deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    filter:opacity(0.8);
    margin: 2px;
    padding:2px;
    color:#fff;
    font-family:col;
    font-size:15px;
    
    }
    
    
    .s5{
    width: 18%;
    height: 240px;
    background: rgb(2,0,36);
    background: linear-gradient(7deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    filter:opacity(0.8);
    margin: 2px;
    padding:2px;
    color:#fff;
    font-family:col;
    font-size:15px;
    
    }
    legend{
        font-weight: bold;
    }
    fieldset{
        text-align: center;
       
    }
.fin{
    margin-right: auto;
    width: 50%;
    margin-top:5px;
    font-family: des;
    font-size:20px;
    background: rgb(255,255,255);
background: linear-gradient(321deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 62%, rgba(4,249,16,1) 84%, rgba(255,186,8,1) 86%, rgba(247,212,5,1) 90%, rgba(0,247,228,0.9500175070028011) 92%, rgba(247,249,245,1) 98%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%);
}
.contacto{
    color: green;
    font-size:18px;
    font-weight: bold;
}
input{
    display: block;
    margin:auto;
}


@media screen and (min-width: 320px) and (max-width: 800px){
body{
    text-align: center;
}
header{
    height:170px;
    margin-top:0;
    margin-bottom:10px;
}
    .cp{
        margin: auto;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        text-align: center;
        margin-top:5px;
        

          
    }
    .ptp{
        margin: auto;
        width:95%;
        border-radius:0px;
        padding:2px;
        margin-bottom:4px ;
        font-size:10px;
    }
    .sss{
        margin: auto;
        width:80%;
        height:auto;
        margin-top: 5px;
        flex-direction:column;
        align-content: center;
        justify-content: center;
        text-align: center;
       
        
        
    }
    
    .video{
        margin: auto;
        width:80%;
        height:160px;
        display: flex;
        align-content: center;
        justify-content: center;
        background: rgb(225, 225, 225);  
    }
    .s1{
        width: 100%;
        height:200px;
       filter:opacity(0.8);
    }
    .s2{
        width: 100%;
        height:200px;
        filter:opacity(0.8);
    }
    .s3{
        width: 100%;
        height:200px;
        filter:opacity(0.8);
    }
    .s4{
        width: 100%;
        height:200px;
        filter:opacity(0.8);
    }
    .s5{
        width: 100%;
        height:200px;
        filter:opacity(0.8);
    }
    .fin{
        margin: auto;
        width:90%;
        margin-top:2px;

    }

    h1{
        display:inline;
        margin-left:auto ;
        width:75%;
        font-size:60px;
        text-align:left;
        font-family: des;
        color: rgb(8, 6, 138);
        margin-top:30px;
        
       
        
        
    }
    .h2{
        margin: auto;
        font-size:20px;
        text-align:center;
        width:90%;  
        font-family: des;
    color: rgb(8, 6, 138);
        
        
    }
    .log{
        background-image: url('../imagenes/log144.png');
        background-size: cover;
        width:80px;
        height:80px;
        display: inline;
        margin-right: auto;
         margin-top:30px;
    
    }
    input{
        display: block;
    }
    label{
        display: block;
    }
}