/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

body {
    background-color: black;
}

@font-face {
    font-family: "Gotham";
    src: url("//db.onlinewebfonts.com/t/fc74760c72164d5321ac886797ce62eb.eot");
    src: url("//db.onlinewebfonts.com/t/fc74760c72164d5321ac886797ce62eb.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/fc74760c72164d5321ac886797ce62eb.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/fc74760c72164d5321ac886797ce62eb.woff") format("woff"), url("//db.onlinewebfonts.com/t/fc74760c72164d5321ac886797ce62eb.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/fc74760c72164d5321ac886797ce62eb.svg#Gotham") format("svg");
}

@font-face {
    font-family: "GothamBold";
    src: url("//db.onlinewebfonts.com/t/5d6f50ed2dde0e4ad455448f896c09f0.eot");
    src: url("//db.onlinewebfonts.com/t/5d6f50ed2dde0e4ad455448f896c09f0.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/5d6f50ed2dde0e4ad455448f896c09f0.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/5d6f50ed2dde0e4ad455448f896c09f0.woff") format("woff"), url("//db.onlinewebfonts.com/t/5d6f50ed2dde0e4ad455448f896c09f0.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/5d6f50ed2dde0e4ad455448f896c09f0.svg#Gotham") format("svg");
}


.svgCirculo {
    width: 70%;
    display: block;
    margin: auto;
}

.svgCirculo .lIzquierda {
    stroke: white;
    stroke-dasharray: 70px;
    stroke-dashoffset: 70px;
    stroke-width: 2px;
}

.svgCirculo circle.circleBorder {
    fill: none;
    stroke-width: 2px;
    stroke: white;
    stroke-dasharray: 630px;
    stroke-dashoffset: 630px;
}

.svgCirculo .circleRelleno {
    fill: black;
    opacity: 0%;
    r: 99px;
}

.svgCirculo .lDerecha {
    stroke: white;
    stroke-width: 2px;
    stroke-dasharray: 70px;
    stroke-dashoffset: 70px;
}

.svgCirculo .lineas line {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

.svgCirculo .textos {
    opacity: 0;
    font-family: Gotham;
    fill: white;
}

.svgCirculo .textos .text2 {
    color: #fff !important;
    font-size: 52px;
}

.svgCirculo .textos .text {
    color: #fff !important;
    font-size: 40px;
}

.svgCirculo .textos .text3 {
    font-size: 14px;
}

.svgCirculo .textos .text tspan,
.svgCirculo .textos .text2 tspan,
.svgCirculo .textos .boton tspan {
    font-family: GothamBold;
}

.svgCirculo .textos .boton {
    font-size: 10px;
}

.svgCirculo .textos a {
    fill: white;
    text-decoration: none;
}

.animarMenuCirculo .circleBorder {
    -webkit-animation: cargar 1.5s linear 0.8s forwards;
    animation: cargar 1.5s linear 0.8s forwards;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.animarMenuCirculo .lIzquierda {
    /*animation-name: cargar;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    */
}

.animarMenuCirculo .lDerecha {
    /*animation-name: cargar;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    */

}

.animarMenuCirculo .textos {
    -webkit-animation: apariencia2 1s 2.3s linear forwards;
    animation: apariencia2 1s 2.3s linear forwards;
}

.animarMenuCirculo .contenido {
    -webkit-animation-name: apariencia3;
    animation-name: apariencia3;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 2.3s;
    animation-delay: 2.3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

.animarMenuCirculo .contenido .circleRelleno {
    -webkit-animation-name: apariencia;
    animation-name: apariencia;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 2.3s;
    animation-delay: 2.3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes cargar {
    to {
        stroke-dashoffset: 0px;
    }
}

@keyframes cargar {
    to {
        stroke-dashoffset: 0px;
    }
}

@-webkit-keyframes apariencia {
    to {
        opacity: 60%;
    }
}

@keyframes apariencia {
    to {
        opacity: 60%;
    }
}

@-webkit-keyframes apariencia3 {
    to {
        opacity: 60%;
    }
}

@keyframes apariencia3 {
    to {
        opacity: 60%;
    }
}

@-webkit-keyframes apariencia2 {
    to {
        opacity: 100%;
    }
}

@keyframes apariencia2 {
    to {
        opacity: 100%;
    }
}

@media (max-width: 767px) {
    .svgCirculo {
        width: 100% !important;
        display: block;
        margin: auto;
    }

}

.circulostheamenities {
    width: 70%;
    display: block;
    margin: auto;
}

.svgCirculo {
    width: 70%;
    display: block;
    margin: auto;
}

.svgCirculo .textos .text {
    color: #fff !important;
    font-size: 20px;
}

@media (max-width: 767px) {
    .svgCirculo {
        width: 100% !important;
        display: block;
        margin: auto;
    }

}