header a{font-weight: 600;}
header a:hover{color:var(--grey)}

body{font-size:1.1em}

.loading{position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: var(--color1);
    width: 100px;
    height: 100px;
    font-size: 4em;
    text-align: center;
    color: var(--white);
    box-shadow: 0 0 5px 110vw #ffffff80;
    z-index:100
}
.loading i{
    animation: mirrorflip 2s 0s linear infinite;
}

@keyframes mirrorflip {
	0% {
		transform: scale(1, 1);
		-webkit-transform: scale(1, 1);
		-moz-transform: scale(1, 1);
		-o-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
		
	}
	50% {
		transform: scale(-1, 1);
		-webkit-transform: scale(-1, 1);
		-moz-transform: scale(-1, 1);
		-o-transform: scale(-1, 1);
		-ms-transform: scale(-1, 1);
	}
	100% {
		transform: scale(1, 1);
		-webkit-transform: scale(1, 1);
		-moz-transform: scale(1, 1);
		-o-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
	}
}

ul{list-style-type: none;margin:0;padding:0;padding-left:var(--spacer)}

.bgimage{background-image: url(../img/bg1.jpg);background-position: center; background-size: cover;}

.big,.title,.bigtitle,.supertitle,.hypertitle,.huge{font-weight: 600;color:var(--color2)}

footer{background-color:var(--darkgrey);background-image: url(../img/footer-bg.jpg);color:var(--white);background-position: center;background-repeat: no-repeat;background-size: cover;}
footer a{color:var(--lightgrey)}

footer .big,footer .title,footer .bigtitle,footer .supertitle,footer .hypertitle,footer .huge{font-weight: 400;color:var(--white)}

footer ul li{padding:8px 0}

.color{color:var(--color1)}
.corto{width: 86px;display: inline-block;margin: 5px;}
.cortito{width: 53px;display: inline-block;margin: 5px;}


.white{color:var(--white)}
.counter{color:var(--color5)}

.servicio .imageContainer{background-size:110%;transition:1s;height:350px;background-position: top center;overflow:hidden;margin-bottom:12px}
.servicio:hover .imageContainer{background-size:100%}
.servicio .imageContainer .transparencia{width:100%;height:400px;background:rgba(0,0,0,.5);transition:1s}
.servicio:hover .imageContainer .transparencia{height:0;}
.servicio button{float:right;margin-top:-50px;font-size:2em;background:var(--color2)}
.servicio button:hover,.servicio:hover button{background:var(--color5)}

#service{
    position:fixed;z-index:10;top:-100vh;left:0;width: 100%;height: 100%;background-color: var(--white);overflow:auto
}
.serviceIcon{border-radius:50%;}
#service .closebutton{padding-top:68px;margin-bottom:-68px;padding-right:21px;color:var(--lightgrey)}

.gallery {display: flex;flex-wrap: wrap;padding: 0 4px;}
.gallery .column {padding: 0 4px;}
.column img {margin-top: 8px;vertical-align: middle;width: 100%;}

.form{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 500px;
    background: var(--white);
    display: none;
    padding:12px;
    box-shadow:0 25px 12px rgba(0,0,0,.5);
    width:90%;
}

@media only screen and (min-width:768px){
    .staticSlider{animation:statiSlider 20s linear infinite}
@keyframes statiSlider{
    0%{background-size:100%}
    50%{background-size:110%}
    100%{background-size:100%}
}

}

@media only screen and (max-width:768px){
    .logo{width:350px;}
    #service .closebutton{padding-top: 0;
        margin-bottom: -52px;
        padding-right: 21px;
        color: var(--lightgrey);
        margin-top: 100px;}
        .fixedtop img {max-width:200px;margin:auto}
        .fixedtop .fa-bars-staggered{float: right;margin-top: -53px;margin-right: 12px;}
    .column {flex: 100%!important;max-width: 100%;}
.staticSlider{background-size:auto 112%}
.form{left: 5%;
    bottom: 0;
    transform: none;
    top: 11%;}
}