* {
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

}

a {
     background-color: transparent;
     color: inherit;
     text-decoration: none;
}

body {
     margin: 0;
     padding: 0;
     overflow-x: hidden;
     width: 100vw;
     max-width: 100vw !important;
}

/*Loader*/
body {
     background: #1a1a1a;
   }
   .loading {
     width: 60px;
     height: 60px;
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -30px 0 0 -30px;
     transform: rotate(45deg);
   }
   .loading div {
     width: 6px;
     height: 6px;
     background: #fff;
     border-radius: 100%;
     float: left;
     margin-bottom: 12px;
     animation: scaleDot 2s ease infinite;
   }
   .loading div:not(:nth-child(4n+4)) {
     margin-right: 12px;
   }
   .loading div:nth-child(1) {
     animation-delay: 0;
   }
   .loading div:nth-child(2),
   .loading div:nth-child(5) {
     animation-delay: 0.1s;
   }
   .loading div:nth-child(3),
   .loading div:nth-child(6),
   .loading div:nth-child(9) {
     animation-delay: 0.2s;
   }
   .loading div:nth-child(4),
   .loading div:nth-child(7),
   .loading div:nth-child(10),
   .loading div:nth-child(13) {
     animation-delay: 0.3s;
   }
   .loading div:nth-child(8),
   .loading div:nth-child(11),
   .loading div:nth-child(14) {
     animation-delay: 0.4s;
   }
   .loading div:nth-child(12),
   .loading div:nth-child(15) {
     animation-delay: 0.5s;
   }
   .loading div:nth-child(16) {
     animation-delay: 0.6s;
   }
   @-moz-keyframes scaleDot {
     40% {
       transform: scale(1.3) translate(-2px, -2px);
     }
     80% {
       transform: scale(1);
     }
     100% {
       transform: scale(1);
     }
   }
   @-webkit-keyframes scaleDot {
     40% {
       transform: scale(1.3) translate(-2px, -2px);
     }
     80% {
       transform: scale(1);
     }
     100% {
       transform: scale(1);
     }
   }
   @-o-keyframes scaleDot {
     40% {
       transform: scale(1.3) translate(-2px, -2px);
     }
     80% {
       transform: scale(1);
     }
     100% {
       transform: scale(1);
     }
   }
   @keyframes scaleDot {
     40% {
       transform: scale(1.3) translate(-2px, -2px);
     }
     80% {
       transform: scale(1);
     }
     100% {
       transform: scale(1);
     }
   }
   

/*Paddings*/
.pad-10-lados {
     padding: 0 10%;
}

.pad-0 {
     padding: 0;
}

.pad-container {
     padding: 3% 10%;
}

.break:before { content: '\A'; }

/*===============Elementos==================*/

/*Caja de Servicios*/
.servicio-head {
     height: 300px;
     background: #f3f3f3;
     background-size: cover
}

.servicio-content {
     padding: 10%;
}

.servicio-content>h4 {
     font-family: 'Futurab', 'Futura-Book';
     margin: 0 0 15% 0;
}

.primero {
     padding-top: 6.2% !important;
}


@media (max-width:768px) {
     .pad-container {
          padding: 8% 10%;
     }

     .services-row>.col-md-4 {
          padding-top: 5%
     }

     .primero {
          padding-top: 20% !important;
     }

}


/*Botones*/
.slider-btn {
     background: 0;
     padding: 1% 3%;
     color: #969696;
     border: 2px solid #969696;
     border-radius: 0;
     font-size: 1.4rem;
     transition: all .3s ease-in-out;
}

.slider-btn-blanco {
     background: 0;
     padding: 1% 3%;
     color: #fff;
     border: 2px solid #fff;
     border-radius: 0;
     font-size: 1.4rem;
}

.slider-btn:hover {
     color: #dd2d40;
     border: 2px solid #dd2d40;

     transition: all .3s ease-in-out;
}

.btn-rio {
     padding: 2% 0;
     font-family: 'Futura', 'Futura-Book';
     transition: all .3s ease-in-out;
     font-size: 1em;
     color: #5d5d5d;
     font-weight: 600;
}

.btn-rio:hover {
     padding: 2% 0;

}

/*==================TEAM==================*/

.team {
     padding: 10%;
}

.team>img {
     width: 80%;
     margin: 0 auto;
}

.team>.content {
     width: 100%;
     padding: 50% 0 5%;
     margin-top: -49%;
     text-align: center;
}


.team>.content>h5 {
     margin: 0;
     margin-top: 3%;
     font-weight: 800;
     font-size: 1.4rem;
     letter-spacing: 0.7px;
     color: #fff
}

.team>.content>a {
     font-family: 'Futura-Medium';
     transition: all .3s ease-in-out;
     font-size: 0.9rem;
     color: #fff;
}

.barra {
     border-left-width: 3px;
     border-left-style: solid;
     border-left-color: #dd2d40;
     padding-left: 5px;
     transition: all .3s ease-in-out;

}

.barra:hover {
     color: #dd2d40 !important;
     transition: all .3s ease-in-out;

}




/*==================Projects==================*/

.cont-project {
     padding: 0% 7% 0 0;
     background: TRANSPARENT;
     padding: 10%;
}


.project>img {
     margin: 0 auto;
     width: 80%
}

.slider-projects {
     padding-bottom: 12%
}

@media (min-width: 768px) {
     .slider-projects {
          overflow: hidden;
          padding-bottom: 12%
     }

     .cont-project {
          padding: 0% 7% 0 0;
          background: TRANSPARENT;
          padding: 10%;
          float: left;
          margin: 20px;
          width: 90% !important;
          padding-bottom: 100%;
          margin-bottom: -100%;
     }

}

@media (max-width: 768px) {
     .anglo>img {
          height: 80%
     }

     .slider-projects {
          margin-bottom: 12% !important
     }

     .cont-project {
          padding: 15% !important;
          margin-right: 5%;
          margin-left: 5%;
          width: 90% !important
     }

     .anglo {
          margin-bottom: 20%;
          padding: 7% !important;
     }
}

.project>hr {
     height: 1px;
     background: #969696;
}

.project>p {
     color: #969696;
     font-size: .9rem;
     letter-spacing: 1px;
     font-family: 'Futura-book';
     line-height: 1.5rem;
     padding-left: 10%;
}



.project-alone-img {
     width: 80% !important;
     margin-top: 10% !important;
}

/*Solution*/
.solution>h2 {
     font-size: 2.3rem;
     margin: 0
}

.solution>h1 {
     margin: 0
}

.solution>a>button {
     margin-top: 2%;
     padding: 5px 30px;
     font-size: 1.3rem;
     background: rgba(0, 0, 0, 0.5);
     border: 2px solid #fff;
     font-weight: 600;
     letter-spacing: 1px;
     transition: all .3s ease-in-out;
}

.solution>a>button:hover {
     background: rgba(0, 0, 0, 1);
     border: 2px solid #dd2d40;
     color: #fff;
     transition: all .3s ease-in-out;
}

/*Footer*/
.footer-col {
     color: #828282;
     font-family: 'Futura-Book';
     font-weight: 600;
}

.footer-col>h4 {
     font-family: 'Futura-Heavy';
     margin: 0 0 5%;
     font-size: 1.3rem;
     color: #828282;
}

.footer-col>P {
     margin: 2% 0;
     font-size: .9rem;
     color: #828282;
}


@media (max-width: 768px) {
     .cont-project {
          padding: 0% 3%
     }

     .solution>h1 {
          margin: 0;
          line-height: 3.1rem;
          font-size: 3.2rem;
     }

     .solution>h2 {
          font-size: 2rem;
          margin: 0.8rem;
     }
}

/*EFECTOS*/

canvas {
     display: block;
     vertical-align: bottom;
}


/* ---- particles.js container ---- */

#particles-js {
     background: url('../img/Solution_bg.jpg');
     background-size: cover;
     background-repeat: no-repeat;
     position: absolute;
     width: 100vw;
     height: 100%;
     z-index: -1;
}