@-ms-viewport { 
    width:device-width; 
}
@media only screen and (min-device-width:800px) { 
    html { 
        overflow:hidden; 
    } 
}

#background-img img{
	position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
}

#logo{
	width: 100%;
}

.hidden{
    display: none;
}

.btn{
	border-radius: 10px!important;
}

.line-height-normal{
    line-height: normal;
}

.blur{
    filter: blur(1em);
}

.bg-transparecy{
   background: rgba(255, 255, 255, 0.85);
   width: 22.5em;
   padding: 4rem!important;
}

.border-sbe {
    border-color: #008fbc!important;
}

.btn-sbe {
    color: #fff;
    background-color: rgb(33, 103, 174);
    border-color: rgb(33, 103, 174);
}

.form-control, .form-control:focus{
    background-color: #fff0;
    border: 0 solid #ced4da00;
    border-radius: 0;
}

.small{
    width: auto;
    height: 1.5rem;
}

.hc.final{
    margin-right: -15rem;
    animation: slide 2s forwards;
    transform: translateX(-50%);
}

.hc.inicial{
    width: 20rem;
}

.story_1{
    animation: fadedown 3.5s ease;
}

.center-story{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Times New Roman', Times, serif;
    font-size: 4vw;
    font-weight: bold;
    text-shadow: 0 0 .5em #000;
    width: 70vw;
}

.font-size-little{
    font-size: 3vw;
}

/*.fb:hover{filter:invert(37%) sepia(78%) saturate(2944%) hue-rotate(201deg) brightness(96%) contrast(97%);}
.in:hover{filter: invert(26%) sepia(96%) saturate(1334%) hue-rotate(176deg) brightness(98%) contrast(103%);}
.yt:hover{filter: invert(31%) sepia(100%) saturate(6954%) hue-rotate(356deg) brightness(99%) contrast(125%);}
.insta:hover{filter: invert(9%) sepia(99%) saturate(4603%) hue-rotate(322deg) brightness(118%) contrast(107%);}*/

.fb:hover{filter: grayscale(100%) opacity(40%);}
.in:hover{filter: grayscale(100%) opacity(40%);}
.yt:hover{filter: grayscale(100%) opacity(40%);}
.insta:hover{filter: grayscale(100%) opacity(40%);}



.gif-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: invert(49%) sepia(5%) saturate(699%) hue-rotate(167deg) brightness(90%) contrast(90%);
}

.gif-image{
    width: 6rem;
    height: 6rem;
    margin: auto;
}


@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@keyframes fadedown {
    from {
        transform: translate(-50%,-20rem);
        opacity: 0;
    } to {
        transform: translate(-50%,-50%);
        opacity: 1;
    }
}

@keyframes slide {
    0% {
        transform: translate(-200%,0);
        width: 20rem;
        opacity: 1;

    } 100% {
        transform: translate(0,0);
        width: 30rem;
        opacity: 0.8;
    }
}

@media screen and (max-width: 425px) {
    .hc{
        display: none!important;
    }
}