/*GOOGLE FONT
font-family: 'Koulen', cursive;
font-family: 'Roboto', sans-serif;
*/
.loader{
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    
}
.disappear{
    animation: vanish 2s forwards;
}

@keyframes vanish {
    100%{
        opacity: 0;
        visibility: hidden;
    }
}

body{
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
a{
    text-decoration: none;
}
h1{
    font-family: 'Koulen', cursive;
}

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:20px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
    font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.float:hover {
	text-decoration: none;
	color: #25d366;
  background-color:#fff;
}
.btn-wsp{
	position: relative;
	top: 7px;
	left: 1px;
}


.img-OS{
    width: 8rem;
}
.apple{
    width: 7rem;
}
.linux{
    width: 12rem;
}
.img-program{
    width: 7rem;
}

.menu-nav{
    background:linear-gradient(to left,rgb(145, 73, 73),rgb(232, 44, 44),rgb(255, 141, 141) )
    
}
footer{
    background:linear-gradient(to left,rgb(145, 73, 73),rgb(192, 29, 29),rgb(255, 141, 141) )
}
.nav-link{
    font-size: 1.3rem;
    font-weight: 400;
}
.nav-item:hover{
    border-bottom: 2px solid rgb(255, 255, 255);
}
.logotipo{
    width: 5rem;
    margin-left: 5rem;
}
.reparaciones{
    background-color:gray ;
    background-image: url(img-fondo.jpg);
    height: 380px;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode:lighten;
    width: 100%;
    border-top-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    box-shadow: 0px 10px 10px rgb(182, 182, 182);
}

.img-fondo{
    background-image: url(fondo-gravilla.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    width: 100%;
    height: 150px;
    border-top-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
    box-shadow: 0px 10px 10px rgb(182, 182, 182);
}
.img-fondo2{
    background-image: url(maicillo.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    width: 100%;
    height: 150px;
    border-top-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
    box-shadow: 0px 10px 10px rgb(182, 182, 182);
}
.img-fondo3{
    background-image: url(bolones.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    width: 100%;
    height: 150px;
    border-top-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
    box-shadow: 0px 10px 10px rgb(182, 182, 182);
}
.img-fondo4{
    background-image: url(arena.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    width: 100%;
    height: 150px;
    border-top-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
    box-shadow: 0px 10px 10px rgb(182, 182, 182);
}
.img-fondo5{
    background-image: url(cemento.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    width: 100%;
    height: 150px;
    border-top-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
    box-shadow: 0px 10px 10px rgb(182, 182, 182);
}
.img-reparaciones{
    width: 12rem;
}

.bi-instagram, .bi-facebook{
    color: black;
}
.bi-facebook:hover , .bi-instagram:hover{
    color:rgb(130, 130, 130) ;
    
}
.icon-footer{
    color: white;
}
.icon-footer:hover{
    color: rgb(203, 203, 203);
}
.computing{
    width: 90%;
    border-radius: 10px;
    box-shadow: 0px 10px 10px rgb(182, 182, 182);
}

.map{
    border-radius: 2rem;
}

.img-thumbnail{
	border:none;
	border-radius: 10px;
	box-shadow: 2px 2px 5px rgb(0, 0, 0,0.3);
}
.p-servicios{
	background-color: rgb(192, 29, 29);
    background: linear-gradient(to left,rgb(161, 6, 6),rgb(255, 102, 102),rgb(161, 6, 6));
	border-radius: 20px;
	text-align: center;
	border: 2px solid rgb(121, 0, 0);
    box-shadow: 2px 2px 5px rgb(0, 0, 0,0.3);
}


.estilo-intersection{
    opacity: 0;
    transform: scale(0.5);
    
}
.estilo-intersectionSlider{
    opacity: 0;
    transform:translateX(-100px);
}

.intersection-vertical{
    opacity: 0;
    transform: translateY(100px);
}
.derecha{
    opacity: 1;
    transform: translateX(0px);
    transition: 1s;
}
.visible{
    opacity: 1;
    transition: 1s;
    transform: scale(1);
}
.vertical{
    opacity: 1;
    transform: translateY(0);
    transition: 1s;
}


.contenedor-img-nosotros{
    animation: aparecer;
    transition:ease-in;
    animation-duration: 2s;


}
.contenedor-p-nosotros{
    animation: aparecerRight;
    animation-duration: 1s;
    transition: all;
}
@keyframes aparecerRight {
    0%{
        opacity: 0;
        transform: translateX(-200px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes aparecer {
    0%{
        opacity: 0;
        transform: scale(0);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}
.bi-check-lg{
    color: green;
    font-weight: bolder;
    font-size: 3rem;
}
.logotipo-index{
    width: 22rem;
}
.clipPath{
    clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
}
.img-service{
    width: 20rem;
}

.contenedor-contacto{
    background-image:url("fondo-contacto.jpg");
    background-size: cover;	
    background-position: center;
}

.form{
    background:linear-gradient(rgba(5,12,7,0.5),rgba(5,12,7,0.5));
    padding: 2rem;
    border-radius: 3rem;
}
.section-contacto{
    background:linear-gradient(rgba(12, 5, 5, 0.8),rgba(5,12,7,0.8));

}