@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
* {margin: 0;padding: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html,
body {width: 100%;height: 100%;text-align: center;}
body {background: #fff;font: 16px "Helvetica Neue", sans-serif;}
#hero {width: 100%;height: 600px;background: url(../img/bannermedj.webp);background-size: cover;position: relative;}
#hero2 {width: 100%;height: 70px;}
h1 {font-size:48px;font-weight:300;}
h2 {font-size:44px;font-weight:300;padding-top:50px;}
p {font-size:18px;}
#extra-0,#extra-1,#extra-2,#extra-3,#extra-4,#extra-5 {width:100%;position: relative;justify-content: center;align-items:center;text-align: center;}
#extra-0 .text,#extra-1 .text,#extra-2 .text,#extra-3 .text,#extra-4 .text,#extra-5 .text,#extra-6 .text {font-weight: 300;text-align: center;font-size: 48px;padding-top: 50px;}
#extra-0 {background-color: #ededed;}
#extra-2 {background-color: #ff8930;}
#extra-5 {background-color: #1ea623;}
#extra-6 {width: 100%;padding:10px 0 10px 0;height:auto;display: flex;justify-content: center;align-items: center;background-color: #fff;}
.textbox {margin:0 auto; max-width:1160px;text-align:justify;padding:10px;}
.responsive {width: 100%;height: auto;padding:40px 0 40px 0;}
@media screen and (max-width: 1200px) {
#hero {height: 400px;}
.frosted{top: 100px; right: 60px;}  }
@media screen and (max-width: 780px) {
#hero {height: 300px;}}
@media screen and (max-width: 1400px) {
.frosted{right: 90px;}}

/* menu */
#main-header {width: 100%;height: 70px;position: fixed;top: 0;z-index: 999;border-bottom: 1px solid rgba(0,0,0,0.2);background-color: rgba(240,240,240,0.7);}
#main-header * {position: relative;z-index: 999;}
#main-header .text {font-weight: 300;text-align: left;margin-left:20px;padding-top: 31px;font-size: 28px;}
.brand {position: absolute;padding-left: 20px;float: left;line-height: 70px;letter-spacing: 2px;font-size: 2.8em;font-family: 'Great Vibes', cursive;}
.brand a,
.brand a:visited {color: #05a4e0;text-decoration: none;}
.nav-container {max-width: 100%;margin: 0 auto;}
span {color:#ed034a;}
nav {float: right;font-size: 24px;}
nav ul {list-style: none;margin: 0;padding: 0;}
nav ul li {float: left;position: relative;}
nav ul li a,nav ul li a:visited {display: block;padding: 0 20px;line-height: 70px;background-color: rgba(0,0,0, .01);color: #05a4e0;text-decoration: none;}
nav ul li a:hover, nav ul li a:visited:hover {color: #0477a2;}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {padding-left: 4px;content: '?';}
nav ul li ul li {min-width: 190px;}
nav ul li ul li a {padding: 15px;line-height: 20px;}
@media (min-width: 520px) {.brand {letter-spacing: 3px;}
nav {font-size: 28px;}}
.bajorrelieve {color: #99d0fb;opacity:0.5;text-shadow: -1px -2px 1px #000000;text-align:center;}
#cap2{position: absolute;top: 7%; right:10%;}
.rotar5 { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -ms-transform: rotate(-7deg); -o-transform: rotate(-7deg); transform: rotate(-7deg); 
-webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; 
font-size: 4vw;  position: relative; top: 80px;font-family: 'Lobster', cursive; }


/* contador*/
.grid-container {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 8px
  /*  grid-column-gap: 50px; -> column-gap  */
    font-color:#f9031a;
  padding: 10px;
  max-width:800px;
  margin:0 auto;

}
h5 {color:#f9031a;font-size:28px;}

.grid-container > div {
margin:0 auto;
}

img{width: 100%;height:378px;object-fit: cover;}
.band {width:100%;max-width: 1180px;margin:0px auto;padding:10px;display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: auto;grid-gap: 20px;}.item-5 {grid-column: 1/ span 2;}.item-2 {grid-column: 2/ span 1;}
@media only screen and (max-width: 700px) {.band {grid-template-columns: 1fr;}  .item-5 {grid-column: 1/ span 1;}.item-2 {grid-column: 1/ span 1;}}
@media only screen and (min-width: 980px) {.band {grid-template-columns: 1fr 1fr 1fr;}  .item-2 {grid-column: 2/ span 2;}.item-5 {grid-column: 3/ span 1;}}
.myCard{min-height: 100%;background: transparent;box-shadow: 0 2px 5px rgba(0,0,0,0.1);display: flex;flex-direction: column;max-height:378px;position: relative;}
.myCard:hover {top: -2px;box-shadow:9px 13px 26px -8px #222533;transition:.4s;}
.myOverlay{position:absolute;bottom:0px;width: 100%;height: auto;background-color: rgba(33,194,248, .65);color: #fff;}
.myOverlay2{position:absolute;bottom:0px;width: 100%;height: auto;background-color: rgba(0,0,0, .65);color: #fff;}
.myOverlay3{position:absolute;bottom:0px;width: 100%;height: auto;background-color: rgba(255,255,255, .65);color: #000;}
.myOverlay4{position:absolute;bottom:0px;width: 100%;height: auto;background-color: rgba(62,184,7, .65);color: #fff;}
.myOverlay5{position:absolute;bottom:0px;width: 100%;height: auto;background-color: rgba(124,2,25, .65);color: #fff;}
.card-title {margin: 10px;display:block:width: 80%;font-size:24px;font-weight:bold;text-transform:uppercase;text-align:left;}
.card-subtitle {margin: 10px;width: 70%;float:left;text-align:left;}
.card-icon {width: auto;margin: 10px 10px 5px 0;float:right;}

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
.cards {display: grid;grid-template-columns: repeat(1, 1fr);padding:14px 0 0 14px;width:100%;max-width: 1200px;margin: 0 auto;}
.card--1 .card__img, .card--1 .card__img--hover {background-image: url('../img/secretos.webp');}
.card--3 .card__img, .card--3 .card__img--hover {background-image: url('../img/gransigno.webp');}
.card--4 .card__img, .card--4 .card__img--hover {background-image: url('../img/avisos.webp');}
.card__img {visibility: hidden;background-size: cover;background-position: center;background-repeat: no-repeat;width: 100%;height: 285px;border-top-left-radius: 12px;border-top-right-radius: 12px;}
.card__info-hover {position: absolute;padding: 16px;width: 100%;opacity: 0;top: 0;}
.card__img--hover {transition: 0.2s all ease-out;background-size: cover;background-position: center;background-repeat: no-repeat;width: 100%;position: absolute;height: 290px;border-top-left-radius: 12px;border-top-right-radius: 12px;top: 0;}
.card {margin: 14px 0 14px 0;transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);background-color: #fff;width: 96%;position: relative;border-radius: 12px;overflow: hidden;}
.card__info {z-index: 2;background-color: #fff;border-bottom-left-radius: 12px;border-bottom-right-radius: 12px;padding: 16px 20px 20px 20px;}
.card__category {font-family: 'Raleway', sans-serif;text-transform: uppercase;font-size: 13px;letter-spacing: 2px;font-weight: 500;color: #868686;}
.card__title {margin-top: 5px;margin-bottom: 10px;font-family: 'Roboto Slab', serif;font-size: 22px;}
.card__by {font-size: 12px;font-family: 'Raleway', sans-serif;font-weight: 500;}
.card__author {font-weight: 600;text-decoration: none;color: #AD7D52;}
.card:hover .card__img--hover {height: 100%;opacity: 0.5;}
.card:hover .card__info {background-color: transparent;position: relative;}
.card:hover .card__info-hover {opacity: 1;}
@media(min-width: 540px){.cards{grid-template-columns: repeat(1, 1fr); }}
@media(min-width: 820px){.cards{grid-template-columns: repeat(3, 1fr); }}

* {box-sizing: border-box;}
ul {margin: 0 auto; max-width: 1200px;line-height: 1.3;}
ul, li {padding: 0;list-style: none;}
h3 {margin-top: 0;margin-bottom: 0.4em;font-size:28px;}
/*Flex items*/
.list {display: flex;flex-wrap: wrap;}
.list-item {display: flex; padding: 0.5em;width: 100%;}
@media all and (min-width: 800px) {.list-item {width: 50%;}}
.list-content {background-color: #fff;display: flex;flex-direction: column;padding: 1em;width: 100%;border:1px solid #ccc;}
.list-content p {flex: 1 0 auto; font-size: 20px; text-align: justify;}

.col {padding-bottom: 20px;color: #fafafa;background-color: rgba(0,0,0, .55);box-shadow: 0 1px 6px rgba(0,0,0,.1);border-radius: 6px;}
.col h2,
.col p {margin: 0;padding: 0 20px;}
.col h2 {text-align: center;margin: 1em;font-size:24px;}
.col h3 {text-align: center;font-size:36px;padding:20px;}
.col p {margin-bottom: 20px;text-align: left;font-size: 0.9em;}
.col {margin-left: 20px;}
.btn2 {padding: 8px 15px 6px;font-size: .7em;letter-spacing: 0.1em;font-weight: bold;text-transform: uppercase;text-decoration: none;color: #FFF;border-radius: 3px;background: #F34A4E;transition: all .275s;margin:0 auto;}
.btn2:hover {background:#FED0D1;color: #F34A4E;}
.flex .col img {width: 100%;height: auto;}
.flex {display: flex;flex-direction: row;justify-content: center;max-width: 1200px;margin: auto;}
.flex .col {display: flex;flex-direction: column;flex: 1 1 300px;
margin: 1em 0.5em;}.flex .col .btn2 {align-self: flex-start;margin-top: auto;}
@media (max-width: 900px) {.flex {flex-wrap: wrap;}}

.splitter {
background-color: #0088c0;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
-webkit-background-size: 50px 50px;-moz-background-size: 50px 50px;background-size: 50px 50px;
-moz-box-shadow: 1px 1px 8px gray;-webkit-box-shadow: 1px 1px 8px gray;box-shadow: 1px 1px 8px gray;height: 16px;
}
* {box-sizing: border-box;margin: 0;border: 0;padding: 0;}
/* Page */
.page {
max-width: 1400px;margin: 0 auto;}
@media (min-width: 1200px) {.footer {max-width: 1200px;}}
/* Grid */
.grid {display: flex;flex-flow: row wrap;justify-content: center;bottom: 0;}
.grid_mod-sm-12 {flex: 0 0 auto;width: 100%;}
@media (min-width: 480px) {.grid_mod-md-4 {flex: 0 0 auto;width: 50%;}}
@media (min-width: 780px) {.grid_mod-md-4 {flex: 0 0 auto;width: 25%;}
.footer-1_heading {font: 2.3vw "Oswald", sans-serif;}}
/* Footer */
.footer{ position: relative;right: 0;bottom: 0;left: 0;width: 100%;}
/* Footer - Section 1 */
.footer-1 {background: #2E3639;}
.footer-1_container {padding: 16px 0;}
.footer-1_section {padding: 8px;}
.footer-1_heading {padding: 8px;font: 1.6em "Oswald", sans-serif;text-align: center;color: #fff;}
.footer-1_menu {padding: 8px;}
.footer-1_menu_item {display: block;font: 14px / 1.5 'Open Sans', sans-serif;text-align: center;text-transform: uppercase;}
.footer-1_menu_link {color: #8DB9ED;transition: color 0.25s;text-decoration: none;}
.footer-1_menu_link:hover,
.footer-1_menu_link:active {color: #ccc;}
.copyright {color: #778888;padding: 16px;text-align:center;background-color:#1E2629;}