/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */
    /* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
    /*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
    /* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
    
    html {
        color: #222;
        font-size: 2em;
        line-height: 1.4;
    }
    
    @import url('https://fonts.googleapis.com/css2?family=Unica+One');
    /*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */
    
     ::-moz-selection {
        background: #b3d4fc;
        text-shadow: none;
    }
    
     ::selection {
        background: #b3d4fc;
        text-shadow: none;
    }
    /*
 * A better looking default horizontal rule
 */
    
    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #ccc;
        margin: 1em 0;
        padding: 0;
    }
    /*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
    
    audio,
    canvas,
    iframe,
    img,
    svg,
    video {
        vertical-align: middle;
    }
    /*
 * Remove default fieldset styles.
 */
    
    fieldset {
        border: 0;
        margin: 0;
        padding: 0;
    }
    /*
 * Allow only vertical resizing of textareas.
 */
    
    textarea {
        resize: vertical;
    }
    /* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
    
    .browserupgrade {
        margin: 0.2em 0;
        background: #ccc;
        color: #000;
        padding: 0.2em 0;
    }
    /* ==========================================================================
   Author's custom styles
   ========================================================================== */
    
    html {
        box-sizing: border-box;
    }
    
    *,
    *:before,
    *:after {
        box-sizing: inherit;
        -webkit-tap-highlight-color: transparent;
    }
    
    body {
        background-color: #e4ecee;
        font-family: 'Unica One', cursive;
    }
    /* Globales */
    
    .contenedor {
        width: 95%;
        margin: 0 auto;
    }
    
    @media only screen and (min-width:480px) {
        .contenedor {
            width: 95%;
        }
    }
    
    @media only screen and (min-width:768px) {
        .contenedor {
            width: 90%;
        }
    }
    
    @media only screen and (min-width:992px) {
        .contenedor {
            width: 90%;
            max-width: 1100px;
        }
    }
    
    .noselect {
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Old versions of Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently
                                        supported by Chrome, Edge, Opera and Firefox */
    }
    
    input,
    textarea,
    button,
    select,
    a {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    
    img:focus {
        outline: none !important;
        /* no outline - for most browsers */
        box-shadow: none !important;
        ;
        /* no box shadow - for some browsers or if you are using Bootstrap */
    }
    /* --------------------------------|| REDES SOCIALES ||-------------------------------- */
    
    .menu-rss {
        background-image: url(../img/hd_fondo.jpg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        width: 100%;
        height: 35vw;
        min-height: 110px;
        position: relative;
        opacity: 100%;
    }
    
    .contenido-header {
        position: relative;
        /* display: grid;
        grid-template-columns: 1.5fr 1fr; */
        padding-top: 5px;
        padding-bottom: 1%;
        min-width: 125px;
    }
    
    .contenido-header nav,
    .contenido-header form {
        display: inline-block;
        position: absolute;
    }
    
    .rrss {
        left: 3vw;
        text-align: left;
    }
    
    @media only screen and (min-width:768px) {
        .rrss {
            left: 0%;
            right: 0%;
            text-align: center;
        }
    }
    
    .rrss a {
        color: white;
        font-size: 0.6em;
        margin-right: 7.5vw;
        opacity: 60%;
        flex-wrap: wrap;
        transition: .3s ease-out;
    }
    
    .rrss a:hover {
        opacity: 100%;
        text-shadow: 0px 0px 4px rgb(216, 189, 34);
        color: rgb(216, 189, 34);
    }
    
    @media only screen and (min-width:320px) {
        .rrss a {
            font-size: 0.6em;
        }
    }
    
    @media only screen and (min-width:540px) {
        .rrss a {
            font-size: .6em;
            margin-right: 40px;
        }
    }
    
    .idioma {
        background: no-repeat center;
        font-family: 'Jura', sans-serif;
        text-align: right;
        font-size: 20px;
        color: rgba(0, 0, 0, 0);
        /* grid-column: 2/3;
        grid-row: 1; */
        width: 25px;
        margin-right: 0px;
        background-color: rgb(24, 6, 31);
        height: 25px;
        overflow: hidden;
        /* background: url(../img/esp.svg) no-repeat right rgb(24, 6, 31); */
        /* border: 1px solid #ccc; */
    }
    
    .idiomas {
        right: 3vw;
        /* text-align: right;
        margin-right: 3vw; */
    }
    
    .opt-blanc {
        color: rgba(255, 255, 255, 1)
    }
    
    option {
        font-family: 'Jura', sans-serif;
        text-align: center;
    }
    
    .select-opt {
        color: rgba(255, 255, 255, 0)
    }
    
    select {
        font-family: 'Jura', sans-serif;
        text-align: center;
        background: transparent;
        width: 25px;
        padding: 5px;
        font-size: 16px;
        line-height: 1;
        border: 0;
        border-radius: 0;
        height: 25px;
        -webkit-appearance: none;
    }
    /* -----------------------------|| MENU SUPERIOR ||--------------------------------  */
    
    .barra-superior {
        display: grid;
        position: relative;
        grid-template-columns: 6fr 1.4fr;
        column-gap: .2rem;
        max-width: 2200px;
        min-width: 90px;
        width: 100%;
        margin: 50px auto auto;
        align-items: center;
    }
    
    @media only screen and (min-width:480px) {
        .barra-superior {
            grid-template-columns: 6fr 1fr;
        }
    }
    
    @media only screen and (min-width:768px) {
        .barra-superior {
            grid-template-columns: 6fr .8fr;
        }
    }
    
    @media only screen and (min-width:1280px) {
        .barra-superior {
            grid-template-columns: 4fr 3fr;
        }
    }
    
    .logo img {
        max-width: 425px;
        min-width: 80px;
        margin-left: 5%;
    }
    
    .menu-movil {
        display: grid;
        /* justify-content: right; */
        width: 60px;
        margin-left: 5vw;
    }
    
    .menu-movil img {
        width: 70%;
    }
    
    .menu-movil:hover {
        cursor: pointer;
    }
    
    .menu-movil span {
        height: 8px;
        margin-bottom: 6px;
        background-color: white;
        display: block;
    }
    
    .navegacion-principal {
        display: none;
        text-align: center;
        /* padding-right: -85%; */
        grid-column: -3 / -1;
        z-index: 1;
        margin-top: 5px;
    }
    
    .navegacion-principal a {
        display: grid;
        font-size: calc(10px + 3vw);
        text-decoration: none;
        color: white;
        background-color: rgba(0, 0, 0, 0.85);
        margin: auto;
        padding-top: 4px;
    }
    
    .navegacion-principal a:hover {
        background-color: rgba(122, 0, 0, .8);
        text-shadow: 0px 0px 4px rgb(216, 189, 34);
        color: rgb(216, 189, 34);
    }
    
    @media only screen and (min-width:480px) {
        .menu-rss {
            height: calc(165px + 0.2vw);
        }
        .navegacion-principal {
            display: none;
            margin-left: -190px;
            text-align: right;
            /* padding-right: -125%; */
            grid-column: 2 / 3;
            padding-right: 3vw;
            padding-left: 70%;
        }
        .navegacion-principal a {
            display: grid;
            text-decoration: none;
            font-size: 1em;
            color: white;
            background-color: rgba(0, 0, 0, .85);
            max-width: 450px;
            margin: auto;
            padding-top: 8px;
            padding-left: 30px;
            padding-right: 1vw;
            /* margin-right: -20px; */
            /* margin-right: 30%; */
        }
    }
    
    @media only screen and (min-width:768px) {
        .navegacion-principal {
            margin-left: -160px;
            padding-left: 40%;
            padding-right: 2vw;
        }
    }
    
    @media only screen and (min-width:1280px) {
        .menu-movil {
            display: none;
        }
        .navegacion-principal {
            display: flex !important;
            position: relative;
            justify-content: space-between;
            padding-left: unset;
            padding-right: 4vw;
            margin-left: unset;
        }
        .navegacion-principal a {
            display: inline-block;
            text-decoration: none;
            color: white;
            background-color: rgba(0, 0, 0, 0);
            padding-top: 8px;
            padding-left: 30px;
            padding-right: 30px;
            margin-right: 20px;
            margin-left: 0px;
            justify-content: space-between;
        }
        .navegacion-principal a:last-child {
            display: inline-block;
            text-decoration: none;
            padding-top: 8px;
            padding-left: 30px;
            padding-right: 30px;
            margin-right: -50px;
            margin-left: 0px;
            justify-content: space-between;
        }
        .navegacion-principal a:hover {
            background-color: unset;
            transition: .5s ease-out;
        }
    }
    /* --------------------------------|| HERO ||-------------------------------- */
    
    .hero {
        background-image: url(../img/Alone2.jpg);
        background-repeat: repeat;
        background-size: cover;
        height: 36vw;
        position: relative;
        top: 0;
        left: 0;
        z-index: 0;
        min-width: 40px;
        min-height: 40px;
        overflow: hidden;
    }
    /* --------------------------------|| LATEST VIDEO ||-------------------------------- */
    /* --------------------------------|| LISTEN ||-------------------------------- */
    
    .parallax {
        background-image: url(../img/fondo-cmv-bn.jpg);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-repeat: no-repeat;
        background-size: cover;
        /* margin-top: -60px; */
        background-position: center center;
        position: fixed;
        overflow: hidden;
        z-index: -3;
    }
    /* .listen {
        height: 600px;
    } */
    
    .listen-in {
        position: relative;
        top: 0px;
    }
    
    .listen-title {
        color: #040317;
        text-transform: uppercase;
        font-size: 1.4em;
        margin-top: 50px;
        text-align: center;
        font-size: calc(.2em + 10vw);
    }
    
    @media (min-width:396px) {
        .listen-title {
            font-size: 1.4em;
        }
    }
    
    .spotify {
        position: relative;
        padding-bottom: 420px;
        height: 340px;
        overflow: hidden;
        margin-top: 0px;
        grid-row: 2/3;
    }
    
    .spotify iframe,
    .spotify object,
    .spotify embed {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        align-items: center;
        width: 90vw;
        max-width: 500px;
        max-height: 360px;
    }
    /* ANALYSIS */
    
    .analysis {
        background-image: url(../img/fondo-titulos.jpg);
        background-size: cover;
        /* row-gap: 2rem; */
    }
    
    .analys-disp {
        display: grid;
        justify-content: space-around;
        grid-auto-rows: minmax(min-content, max-content);
        /* grid-template-rows: .1fr .1fr .35fr; */
        text-align: center;
    }
    
    @media (min-width:768px) {
        .analys-disp {
            grid-template-columns: 1.2fr 1.5fr;
            grid-template-rows: 1.5fr 1fr;
            column-gap: .5rem;
            padding-top: 20px;
        }
    }
    
    @media (min-width:1227px) {
        .analys-disp {
            grid-template-columns: 2fr 4fr 3fr;
            grid-template-rows: 1fr;
            column-gap: 1rem;
            padding-bottom: 20px;
        }
    }
    
    .analys-title {
        color: white;
        text-transform: uppercase;
        font-size: calc(15px + 3vw);
        margin: auto;
    }
    
    @media (min-width:768px) {
        .analys-title {
            color: white;
            text-transform: uppercase;
            font-size: 1em;
            margin: auto;
            grid-column: 1/2;
            align-items: center;
        }
    }
    
    @media (min-width:1280px) {
        .analys-title {
            margin-left: 10%;
        }
    }
    
    .analys-text {
        font-family: 'Jura', sans-serif;
        color: rgb(255, 255, 255);
        padding: 0 5% 0 5%;
        font-size: calc(18px + 1vw);
        text-align: center;
        margin-bottom: 40px;
        grid-row: 3/4;
        margin-top: 20px;
    }
    
    .analys-text h3 {
        text-transform: uppercase;
        margin-block-start: 0px;
        font-weight: 700;
    }
    
    .analys-text p {
        margin-block-end: 0px;
        text-align: justify;
    }
    
    @media (min-width:768px) {
        .analys-text {
            grid-column: 1/3;
            grid-row: 2;
            font-size: .8em;
            margin-bottom: 30px;
            margin-top: 0;
        }
    }
    
    @media (min-width:1227px) {
        .analys-text {
            align-items: center;
            grid-row: 1/3;
            grid-column: 2/3;
            margin: auto;
        }
    }
    
    .analys-text a {
        text-decoration: none;
        color: rgba(216, 189, 34, 0.863);
    }
    
    .read-more {
        text-transform: uppercase;
        text-align: right;
        font-weight: 700;
    }
    
    .analys-text:hover .read-more {
        text-shadow: 0px 0px 4px rgb(216, 189, 34);
        color: rgb(216, 189, 34);
    }
    
    .analys-text:hover p,
    .analys-text:hover h3 {
        cursor: pointer;
        /* text-shadow: 0px 0px 4px rgb(255, 255, 255); */
    }
    
    @media (min-width:768px) {
        .read-more:hover {
            transition: .3s ease-in-out;
        }
    }
    
    .video1 {
        position: relative;
        padding-bottom: 50vw;
        overflow: hidden;
        grid-row: 2/3;
    }
    
    @media (min-width:396px) {
        .video1 {
            padding-bottom: 220px;
        }
    }
    
    .video1 iframe,
    .video1 object,
    .video1 embed {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        align-items: center;
        width: 90vw;
        height: 50.6vw;
    }
    
    iframe {
        display: block;
        margin: 0 auto;
        max-width: 360px;
        max-height: 202px;
    }
    
    @media (min-width:768px) {
        .video1 {
            /* margin: auto; */
            grid-row: 1;
            grid-column: 2/3;
            margin: 30px;
            max-width: 440px;
        }
        .video1 iframe,
        .video1 object,
        .video1 embed {
            width: 100%;
            height: 100%;
            max-width: 560px;
            max-height: 315px;
        }
    }
    
    @media (min-width:1227px) {
        .video1 {
            /* margin-right: 10%; */
            grid-column: 3/4;
            grid-row: 1;
        }
    }
    
    .ig-section {
        height: calc(200px + 50vw);
    }
    
    .igfeed {
        margin: auto;
        height: 50vw;
    }
    
    @media (min-width:396px) {
        .ig-section {
            height: calc(240px + 30vw);
        }
        .igfeed {
            height: 33vw;
        }
    }
    
    @media (min-width:768px) {
        .ig-section {
            height: calc(310px + 10vw);
        }
        .igfeed {
            height: 18vw;
        }
    }
    
    @media (min-width:1227px) {
        .ig-section {
            height: calc(360px + 10vw);
        }
        .igfeed {
            height: 18vw;
        }
    }
    
    .loader_bg {
        position: fixed;
        z-index: 999999;
        background: rgb(10, 2, 22);
        width: 100%;
        height: 100%;
    }
    
    .loader {
        border: 0 solid transparent;
        border-radius: 50%;
        width: 150px;
        height: 150px;
        position: absolute;
        top: calc(50vh - 75px);
        left: calc(50vw - 75px);
    }
    
    .loader:before,
    loader:after {
        content: '';
        border: 1em solid #ffffff;
        border-radius: 50%;
        width: inherit;
        height: inherit;
        position: absolute;
        top: 0;
        left: 0;
        animation: loader 2s linear infinite;
        opacity: 0;
    }
    
    .loader:before {
        animation-delay: .5s;
    }
    
    @keyframes loader {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            transform: scale(1);
            opacity: 0;
        }
    }
    
    .video2 {
        position: relative;
        padding-bottom: 55%;
        /* height: 0; */
        overflow: hidden;
        /* margin: auto; */
        /* margin-bottom: -20px;
        margin-top: -100px; */
        grid-row: 2/3;
        align-content: center;
    }
    
    .video2 iframe,
    .video2 object,
    .video2 embed {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        align-items: center;
        width: 90vw;
        height: 50.6vw;
    }
    
    @media (min-width:396px) {
        .video2 {
            padding-bottom: 230px;
        }
    }
    
    @media (min-width:768px) {
        .video2 {
            /* margin: auto; */
            grid-row: 1;
            grid-column: 2/3;
        }
        .video2 iframe,
        .video2 object,
        .video2 embed {
            width: 100%;
            height: 100%;
        }
    }
    
    @media (min-width:1227px) {
        .video2 {
            /* margin-right: 10%; */
            grid-column: 3/4;
            grid-row: 1;
            padding-bottom: 55%;
        }
        iframe {
            max-width: none;
            max-height: none;
        }
    }
    
    .yt-sub {
        padding-bottom: 40px;
    }
    
    .yt-videos {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 20px;
        margin: 0 auto;
        align-content: center;
    }
    
    .yt1 {
        grid-column: 1;
        grid-row: 1/2;
        /* max-width: 400px; */
    }
    
    .yt2 {
        grid-column: 1;
        grid-row: 2/3;
        /* max-width: 400px; */
    }
    
    .yt3 {
        grid-column: 1;
        grid-row: 3/4;
        /* max-width: 400px; */
    }
    
    .div-btn {
        text-align: center;
        vertical-align: center;
        margin-top: 20px;
    }
    
    .sub-button {
        height: calc(20px + 8vw);
        width: calc(65px + 20vw);
        box-sizing: border-box;
        background-color: #41404e;
        border: none;
        font-size: calc(4px + 5vw);
        font-weight: 700;
        color: white;
        cursor: pointer;
        margin: 10px auto 20px auto;
        text-align: center;
        vertical-align: center;
        transition: .3s ease-out;
    }
    
    .sub-button:hover {
        background-color: rgba(175, 8, 8, 0.8);
    }
    
    .sub-button p {
        margin: auto;
    }
    
    @media (min-width:768px) {
        .yt-sub {
            padding-bottom: 40px;
        }
        .yt-videos {
            display: grid;
            grid-template-rows: 1fr 1fr 1fr;
            grid-gap: 20px;
            margin: 0 auto;
            width: 560px;
            max-width: 860px;
        }
        .yt1 {
            grid-column: 1;
            grid-row: 1/2;
        }
        .yt2 {
            grid-column: 1;
            grid-row: 2/3;
        }
        .yt3 {
            grid-column: 1;
            grid-row: 3/4;
        }
        .div-btn {
            text-align: center;
            margin-top: 20px;
        }
        .sub-button {
            height: 80px;
            width: 210px;
            background-color: #41404e;
            border: none;
            font-size: 40px;
            font-weight: 700;
            color: white;
            cursor: pointer;
        }
    }
    
    @media (min-width:1227px) {
        .yt-sub {
            padding-bottom: 40px;
        }
        .yt-videos {
            display: grid;
            grid-template-rows: none;
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 20px;
            margin: 0 40px;
            width: auto;
            max-width: none;
        }
        .yt1 {
            grid-column: 1/2;
            grid-row: 1;
        }
        .yt2 {
            grid-column: 2/3;
            grid-row: 1;
        }
        .yt3 {
            grid-column: 3/4;
            grid-row: 1;
        }
        .div-btn {
            text-align: center;
            margin-top: 20px;
        }
        .sub-button {
            height: 90px;
            width: 220px;
            background-color: #41404e;
            border: none;
            font-size: 40px;
            font-weight: 700;
            color: white;
            cursor: pointer;
            margin-top: 40px;
        }
    }
    
    .links {
        font-weight: 700;
        color: rgb(216, 189, 34);
    }
    /* ... */
    
    .footer {
        background-image: url(../img/fondo-titulos.jpg);
        background-size: cover;
        height: 265px;
        bottom: 0;
    }
    
    .footer h3 {
        font-weight: 400px;
        font-size: .6em;
        margin-bottom: 0px;
    }
    
    @media only screen and (min-width:768px) {
        .footer {
            background-image: url(../img/fondo-titulos.jpg);
            background-size: cover;
            height: 145px;
        }
    }
    
    @media only screen and (min-width:1280px) {
        .footer {
            background-image: url(../img/fondo-titulos.jpg);
            background-size: cover;
            height: 95px;
        }
    }
    
    .footer-disp {
        display: grid;
        /* grid-template-columns: 1fr 1fr; */
        text-align: center;
        height: 70px;
    }
    
    .footer-title {
        /* display: grid;
        grid-template-columns: 1fr 1fr 1fr; */
        color: white;
        text-transform: uppercase;
        /* font-size: calc(15px + 3vw); */
        font-size: .6em;
        margin: auto;
        list
    }
    
    ul {
        list-style-type: none;
    }
    
    .footer-cont a {
        display: grid;
        font-size: calc(10px + 3vw);
        text-decoration: none;
        color: white;
        margin: auto;
        text-transform: uppercase;
        padding-top: 20px;
    }
    
    @media only screen and (min-width:768px) {
        .footer-disp {
            grid-template-columns: none;
            grid-template-rows: 1fr 1fr, text-align: center;
        }
        .footer-cont {
            display: flex !important;
            justify-content: center;
        }
        .footer-cont a {
            display: inline-block;
            text-decoration: none;
            color: white;
            background-color: rgba(0, 0, 0, 0);
            padding-top: 20px;
            padding-left: 30px;
            padding-right: 30px;
            margin-top: 10px;
            margin-right: 20px;
            margin-left: 0px;
            justify-content: space-between;
            font-size: .8em;
        }
        .footer-cont a:last-child {
            display: inline-block;
            text-decoration: none;
            color: white;
            background-color: rgba(0, 0, 0, 0);
            padding-top: 20px;
            padding-left: 30px;
            padding-right: 30px;
            margin-right: -50px;
            margin-left: 0px;
            justify-content: space-between;
            font-size: .8em;
        }
    }
    
    @media only screen and (min-width:1280px) {
        .footer-disp {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: none;
        }
        .footer-cont {
            display: flex !important;
            justify-content: left;
            text-transform: uppercase;
            margin-left: 30px;
        }
        .footer-cont a {
            display: inline-block;
            text-decoration: none;
            color: white;
            background-color: rgba(0, 0, 0, 0);
            padding-top: 20px;
            padding-left: 30px;
            padding-right: 30px;
            margin-right: 20px;
            margin-left: 0px;
            justify-content: space-between;
            font-size: .8em;
        }
        .footer-cont a:last-child {
            display: inline-block;
            text-decoration: none;
            color: white;
            background-color: rgba(0, 0, 0, 0);
            padding-top: 20px;
            padding-left: 30px;
            padding-right: 30px;
            margin-right: -50px;
            margin-left: 0px;
            justify-content: space-between;
            font-size: .8em;
        }
    }
    
    .footer-copy h3 {
        text-align: center;
        font-size: calc(10px + 3vw);
        text-decoration: none;
        color: white;
        */ margin: auto;
        /* margin-right: 30px; */
        font-size: calc(4px + 3vw);
        margin-top: 60px;
        font-weight: 400;
        text-transform: uppercase;
    }
    
    @media only screen and (min-width:396px) {
        .footer-copy h3 {
            margin-top: 30px;
            font-size: 20px;
        }
    }
    
    @media only screen and (min-width:1280px) {
        .footer-copy {
            /* position: absolute;
            right: -47%; */
            text-align: right;
            text-transform: uppercase;
            /* grid-column: -3 / -2; */
        }
        .footer-copy h3 {
            display: inline-block;
            text-decoration: none;
            color: white;
            background-color: rgba(0, 0, 0, 0);
            padding-top: 20px;
            padding-left: 30px;
            padding-right: 30px;
            margin-top: 10px;
            margin-right: 30px;
            right: 0;
            justify-content: space-between;
            font-size: 20px;
        }
    }
    
    .footer-cont a:hover {
        text-shadow: 0px 0px 4px rgb(216, 189, 34);
        color: rgb(216, 189, 34);
    }
    
    @media (min-width:768px) {
        .footer-cont a:hover {
            transition: .3s ease-in-out;
        }
    }
    
    a {
        cursor: pointer;
    }
    /* ==========================================================================
   Helper classes
   ========================================================================== */
    /*
 * Hide visually and from screen readers
 */
    
    .hidden {
        display: none !important;
    }
    /*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
    
    .sr-only {
        border: 0;
        clip: rect(0, 0, 0, 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        white-space: nowrap;
        width: 1px;
        /* 1 */
    }
    /*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
    
    .sr-only.focusable:active,
    .sr-only.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        white-space: inherit;
        width: auto;
    }
    /*
* Hide visually and from screen readers, but maintain layout
*/
    
    .invisible {
        visibility: hidden;
    }
    /*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/
    
    .clearfix:before,
    .clearfix:after {
        content: " ";
        /* 1 */
        display: table;
        /* 2 */
    }
    
    .clearfix:after {
        clear: both;
    }
    /* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
    
    @media only screen and (min-width: 35em) {
        /* Style adjustments for viewports that meet the condition */
    }
    
    @media print,
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-resolution: 1.25dppx),
    (min-resolution: 120dpi) {
        /* Style adjustments for high resolution devices */
    }
    /* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
    
    @media print {
        *,
        *:before,
        *:after {
            background: transparent !important;
            color: #000 !important;
            /* Black prints faster */
            box-shadow: none !important;
            text-shadow: none !important;
        }
        a,
        a:visited {
            text-decoration: underline;
        }
        a[href]:after {
            content: " (" attr(href) ")";
        }
        abbr[title]:after {
            content: " (" attr(title) ")";
        }
        /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
        a[href^="#"]:after,
        a[href^="javascript:"]:after {
            content: "";
        }
        pre {
            white-space: pre-wrap !important;
        }
        pre,
        blockquote {
            border: 1px solid #999;
            page-break-inside: avoid;
        }
        /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
        thead {
            display: table-header-group;
        }
        tr,
        img {
            page-break-inside: avoid;
        }
        p,
        h2,
        h3 {
            orphans: 3;
            widows: 3;
        }
        h2,
        h3 {
            page-break-after: avoid;
        }
    }