/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/oswald/v53/TK3_WkUHHAIjg75cFRf3bXL8LICs169vsUZiZQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body{margin: 0; padding: 0; background: #000; color: #fff; font-family: 'Roboto', sans-serif;}
a{color: #fff; text-decoration: none;}
a:hover{text-decoration: underline;}
img{height: auto!important;}
img,iframe,video{max-width: 100%;}

/* FUENTES */
h1{font-size: 20px;}
p, a, ul>li, ol>li, label, input{font-size: 16px;}
@media screen and (min-width: 1000px) {
  p,a, ul>li, ol>li, label, input{font-size: 18px;}
}

/* MENSAJE ERROR */
.message-container{background-color: rgba(255, 0, 0, 0.5); border-radius: 5px; padding: 6px; position: absolute; top: 0; left: 0; right: 0; z-index: 9;}
.message {font-size: 20px; color: #fff; text-align: center; }

.btn{display: block; margin: auto; background: #ffffff0d; border: 0; color: #fff; width: 100%; max-width: 210px; padding: 10px; text-align: center; transition: 0.5s; box-shadow: rgba(255,255,255,0.25) 0px -12px 11px -9px inset !important; -moz-box-shadow: rgba(255,255,255,0.25) 0px -12px 11px -9px inset !important; -webkit-box-shadow: rgba(255,255,255,0.25) 0px -12px 11px -9px inset !important;}
.btn:hover{cursor: pointer; background: #292a2d;}

header{background: #000; position: absolute; top: 0; left: 0; right: 0; padding: 10px; z-index: 2;}
header>.header-content{max-width: 1280px; margin: auto; display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: center;}
header img{max-width: 150px;}
header>.header-content>span{cursor: pointer;}
header>.header-content>div{display: none; width: 100%;}
header>.header-content>div>div{}
header>.header-content>div>div.buttons button:last-child{margin-top: 10px;}
header>.header-content>div>div.account{margin-top: 20px;display: flex; justify-content: space-between; align-items: center; gap: 10px;}
header>.header-content>div>div.account span{vertical-align: bottom; transition: 0.5s;}
header>.header-content>div>div.account a{display: inline-block;}
header>.header-content>div>div.account a:hover span{color: #cabd95;}


.video-container{position: relative; width: 100%; height: 100vh;}
video#background-video{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.content{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; place-content: center; background: rgba(36,36,41,0.9);}
.content form{max-width: 270px; margin: auto;}
.content form>div{margin-bottom: 10px;}
.content form label,
.content form input[type="text"],
.content form input[type="password"]{display: block; padding: 3px; margin: 0; border: 0; width: calc(100% - 6px);}
.content form input[type="submit"]{margin-top: 30px; max-width: 100%;}
.content .logo{margin-bottom: 30px;}
.content .logo>img,
.content .eslogan{display: block; max-width: 250px; margin: auto;}
.content .eslogan{margin-top: 90px;}
.content .eslogan>h1{}

.iframe{position: relative; width: 100vw; height: calc(100vh - 125px);}
iframe{display:block; padding:0; margin: 0; border: 0; width: 100%; height: 100%;}

footer{background: #4e4f56; padding: 10px;}
footer>.footer-content{max-width: 1280px; margin: auto; text-align: center;}
footer>.footer-content>span{font-family: 'Oswald', sans-serif; display: block; margin-bottom: 20px;}
footer>.footer-content>span>a{text-decoration: underline;}
footer>.footer-content>div.subvencion{}
footer>.footer-content>div.subvencion>span{display: block; margin: 7px 0 10px; font-size: 12px; cursor: pointer; text-align: left;}
footer>.footer-content>div.subvencion>img{display: block; width:100%; max-width: 210px;}

@media screen and (min-width: 500px){
  .content form>div{display: grid; grid-template-columns: 100px 1fr; gap: 10px;}
  footer>.footer-content{display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; justify-items: center;}
}
@media screen and (min-width: 750px){
  header>.header-content{display: grid; grid-template-columns: repeat(2, 1fr);}
  header>.header-content>span{display: none;}
  header>.header-content>div{display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;}
  header>.header-content>div>.buttons{display: flex; justify-content: flex-end; gap: 10px;} 
  header>.header-content>div>.buttons>button{margin: 0!important;}
  header>.header-content>div>div.account{margin: 0;}
}
@media screen and (min-width: 1000px){
  footer{position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;}
}