@font-face{
    font-family: montserrat;
    src: url("../font/montserrat/Montserrat-Regular.ttf");
}

@font-face{
    font-family: montserrat;
    src: url("../font/montserrat/Montserrat-Bold.ttf");
    font-weight: bold;
}
@font-face{
    font-family: raleway;
    src: url("../font/raleway/Raleway-Regular.ttf");
}
@font-face{
    font-family: raleway;
    src: url("../font/raleway/Raleway-Bold.ttf");
    font-weight: bold;
}
@font-face{
    font-family: bebasneue;
    src: url("../font/BebasNeue.otf");
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

body{
    background-image: linear-gradient(to right, #040934, #151C42, #040934);
    background-attachment: fixed;
}
.cuerpo{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background-image: linear-gradient(to right, #040934, #151C42, #040934);
    background-attachment: fixed;
}

.cuerpo-thinkcare{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(162,26,182,1) 50%, rgba(0,0,0,1) 100%);
    background-attachment: fixed;
}


.link-thinkcare{
    width: 6%;
    position: fixed;
    left: -2.7%;
    top: 25%;
    z-index: 1;
}

.link-bbp{
    width: 6%;
    position: fixed;
    left: -2.7%;
    top: 25%;
    z-index: 1;
}

.link-bbp:hover{
    left: -2%;
}

.link-thinkcare:hover{
    left: -2%;
}



.logothink{
    position: absolute;
    z-index: 30000;
    width: 140px;
    left: 2.5%;
    top: 5%;
}
.loadersvg{
    z-index: 3000; 
}

.ball{
    position: absolute;
    top: 35%;
    left: 40%;
    width: 20%;
}

.leftpanel{
    position: absolute;
    display: none;
    top: 0%;
    height: 100%;
    width: 50%;
    background-color: rgba(0,0,0,0.5);
    font-family: montserrat;
    color: white;
}
.rightpanel{
    position: absolute;
    display: none;
    top: 0%;
    height: 100%;
    right: 0%;
    width: 50%;
    background-color: rgba(0,0,0,0.5);
    font-family: montserrat;
    color: white;
}

/* Circulo Animación Inicio */
.uno{
    animation: rota 2s infinite linear;
    -webkit-animation: rota 2s infinite linear;
}

.dos{
    animation: rota 4s infinite linear;
    -webkit-animation: rota 4s infinite linear;
}
.tres{
    animation: rotaleft 3s infinite linear;
    -webkit-animation: rotaleft 3s infinite linear;
}
.cuatro{
    animation: rota 7s infinite linear;
    -webkit-animation: rota 7s infinite linear;
}
.siete{
    animation: rotaleft 4s infinite linear;
    -webkit-animation: rotaleft 4s infinite linear;
}

.orbita{
    animation: gravity 12s infinite linear;
    -webkit-animation: gravity 12s infinite linear;
}


@keyframes rota {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}
@-webkit-keyframes rota {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}
@keyframes rotaleft {
    from {
        transform: rotate(359deg);
    }
    to {
        transform: rotate(0deg);
    }
}
@-webkit-keyframes rotaleft {
    from {
        -webkit-transform: rotate(359deg);
    }
    to {
        -webkit-transform: rotate(0deg);
    }
}
/* Circulo Animación Final */

/* Iconos */

.icono {
    position: absolute;
    width: 15%;
    transition: transform .3s;
}
.icono:hover {
    transform: scale(1.3);
}
.flechita{
    position: absolute; bottom: 10%; right: 10%; width: 5%;
    transition: transform .3s;
}
.flechita:hover{
    transform: scale(1.3);
}
.smallicono{
    height: 65%;
    width: 100%;
    margin-left: 0%;
    opacity: 0.5;
}
.smallicono:hover {
    opacity: 1;
}

.cloud {
    left: 25%;
    bottom: 10%;
}

.estrategia {
    top: 12%;
    left: 26%;
}

.fabrica {
    bottom: 35%;
    right: 15%;
}

.procesos{
    top: 5%;
    right: 36%;
}

.transformacion{
    bottom: 4%;
    right: 25%;
}
.cloudleft{
    right: 25%;
    bottom: 0%;
}
.estrategialeft{
    right: 5%;
    bottom: 10%;
}
.fabricaleft{
    right: 25%;
    bottom: 30%;
}
.procesosleft{
    right: 4%;
    bottom: 45%;
}
.transformacionleft{
    right: 25%;
    bottom: 60%;
}
.cloudright{
    left: 25%;
    bottom: 0%;
}
.estrategiaright{
    left: 5%;
    bottom: 15%;
}
.fabricaright{
    left: 25%;
    bottom: 30%;
}
.procesosright{
    left: 4%;
    bottom: 45%;
}
.transformacionright{
    left: 25%;
    bottom: 60%;
}
.loader{
    position: absolute;
    width: 100%; 
    height: 100%;
}

.cuadrotexto{
    margin-top: 4%;
    margin-left: 10%;
    margin-right: 10%;
    position: absolute;
}

.show{
    display: block;
}

.hide{
    display: none;
}

.hovered{
    opacity: 1;
}

.titulo{
    margin-top: 23%;
    margin-left: 9%;
    margin-bottom: 9%;
    font-family: raleway; 
    font-size: 2.5vw; 
    font-weight: bold;
}
.iconos{
    margin-bottom: -5%;
}

.iconodescripcionthink{
    font-family: bebasneue;
    margin-top: 0%;
    color: white;
    /*visibility: hidden;*/
}
.iconodescripcion{
    font-family: bebasneue;
    margin-top: -20%;
    color: white;
    /*visibility: hidden;*/
}
.customnavbar{
    background-color: none;
}
.navbarbackground{
    z-index: 3;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.75);
    transition: 2s;
}
.navbariconos{
    width: 3%; 
    padding: 3px;
}
.quotediv{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 3;
    background-color: rgba(0,0,0,0.5);
}

.imgcontainer:hover .iconodescripcion{
    visibility: visible;
    opacity: 0.8;
}

.imgcontainer:hover .iconodescripcionthink{
    visibility: visible;
    opacity: 0.8;
}
.estrellas{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.estrellauno{
    animation: moveupdown 12s infinite linear;
    -webkit-animation: moveupdown 12s infinite linear;
}

.estrellados{
    animation: moveupdown 22s infinite linear;
    -webkit-animation: moveupdown 22s infinite linear;
}

.estrellatres{
    animation: moveupdown 6s infinite linear;
    -webkit-animation: moveupdown 6s infinite linear;
}

.estrellacuatro{
    animation: moveupdown 7s infinite linear;
    -webkit-animation: moveupdown 7s infinite linear;
}

.estrellacinco{
    animation: moveupdown 30s infinite linear;
    -webkit-animation: moveupdown 30s infinite linear;
}
.cuerpomovil{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.navbarcustom{
    z-index: 30;
    margin-top: 3%;
}
.fondomobile{
    z-index: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    display: none;
}
.quotetitle{
    position: absolute; left: 10%; top: 20%; font-size: 4vw; font-family: montserrat; font-weight: bold; text-transform: uppercase;
}
.quotetext{
    position: absolute; left: 10%; top: 85%; font-size: 2vw; font-family: montserrat; text-transform: uppercase;
}
.quotetitlethink{
    position: absolute; left: 10%; top: 20%; font-size: 4vw; font-family: montserrat; font-weight: bold; text-transform: uppercase;
}
.quotetexthink{
    position: absolute; left: 10%; top: 85%; font-size: 2vw; font-family: montserrat; text-transform: uppercase;
}


@keyframes moveupdown {
    0% {
        top: 0;
    }
    50% {
        top: 5%;
    }
    100% {
        top: 0;
    }
}
@-webkit-keyframes moveupdown {
    0% {
        top: 0;
    }
    50% {
        top: 5%;
    }
    100% {
        top: 0;
    }
}

@media only screen and (max-width: 800px){
    .loadersvg{
        position: absolute;
        margin: none !important;
        width: 50%;
        left: 25%;
        top: 40%;
    }
    .cuerpo{
        display: block;
        height: 130%;
    }
    .webstuff{
        display:none;
    }
    .logonavbar{
        width: 30%;
    }
    .logothink{
        left: 5%;
        width: 35%;
    }
    .navbarcustom{
        margin-top: 0%;
    }
    .logothink{
        display: none;
    }
    .navbarbackground{
        display: none;
    }
    .serviciosobj{
        display: none;
    }
    .navbariconos{
        margin-top: 10%;
        width: 15%;
    }
    .fondomobile{
        display: block;
    }
    .iconodescripcion{
        visibility: visible;
        font-size: 5vh;
        text-align: center;
    }
    .iconodescripcionthink{
        font-family: bebasneue;
        font-size: 5vh;
        visibility: visible;
        text-align: center;
        margin-top: 0%;
    }
    .quotediv{
        position: fixed;
        background-color: rgba(0,0,0,0.8);
        overflow: hidden;
    }
    .quotetitle{
        position: absolute; left: 10%; top: 20%; font-size: 8vw; font-family: montserrat; font-weight: bold; text-transform: uppercase; padding-right: 5%;
    }
    .quotetext{
        position: absolute; left: 10%; top: 85%; font-size: 5vw; font-family: montserrat; text-transform: uppercase; padding-right: 5%;
    }
    .quotetitlethink{
        position: absolute; left: 10%; top: 20%; font-size: 8vw; font-family: montserrat; font-weight: bold; text-transform: uppercase; padding-right: 5%;
    }
    .quotetexthink{
        position: absolute; left: 10%; top: 85%; font-size: 5vw; font-family: montserrat; text-transform: uppercase; padding-right: 5%;
    }
    .flechita{
        position: absolute; bottom: 1%; left: 50%; margin-left:-25px; width: 50px;
        transform: rotate(90deg);
    }
}

@media only screen and (min-width: 800px){
    .loadersvg{
        position: absolute;
        width: 20%;
        margin-left: 40%; 
        margin-top: 10%;
    }
    .logonavbar{
        width: 7%;
    }
    .cuerpo{
        overflow: hidden;
    }
    .mobilediv{
        display: none;
    }
    .navbrand{
        display: none;
    }
    body{
        overflow: hidden;
    }
}

.contactostuff{
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.nosotrostuff{
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.customform{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    color: white;
    background: none;
    border: none;
    border-bottom: 2px solid white;
}
.customform::placeholder{
    color: rgba(255, 255, 255, 0.4);
}
.custombtn{
    color: white;
    background-color: none;
    border-color: white;
}
.custombtn:hover{
    color: gray;
}
.flechaback{
    width: 10%;
    margin-left: 45%;
    margin-bottom: 5%;
    transform: rotate(180deg);
}

.navbar-toggler{
    border: none;
}

.navbar-toggler-icon{
    margin-left: -10px;
    margin-right: -10px;
    width: 50px;
}

.closenavbar{
    margin-top: 2.5px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 2.5px;
}