body{
   background-color: #fff;
   font-family: 'Work Sans', sans-serif;
   font-style: normal;
   letter-spacing: 0.01px;
   display: flex;
   min-height: 100vh;
   flex-direction: column;
   position: relative;
}

nav{
   height: 64px !important;
}

.nav-wrapper a i, .nav-wrapper ul li a, .nav-wrapper ul li a .caret{
   color: #64686e !important;
}

header{
   min-height: 50vh;
   height: 80vh;
   overflow: hidden;
   color: #fff;
   z-index: 0;
   background-size: cover;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-image: url("../images/banner.jpg");
}
main {
   flex: 1 0 auto;
}
section{
   min-height: 60vh;
}
.primary-color{
   background-color: #1262ff !important;
   color: #fff;
}
.primary-color:hover{
   color: #fff;
}
.primary-color-text{
   color: #1262ff !important;
}
.primary-color-red{
   background-color: #f32c35 !important;
   color: #fff;
}
.primary-color-red:hover{
   color: #fff;
}
.mt-5{
   margin-top: 5rem;
}
.dropzone {
   border: 2px dashed rgba(0, 0, 0, 0.3) !important;
}

@media only screen and (max-width : 992px) {
   .navbar-fixed nav .sidenav-trigger {
       position: absolute !important;
   }
   .container{
       width: 97% !important;
   }
}

.service-card{
   transition: all 0.2s;
}
.service-card:hover{
   transform: scale(1.05);
   box-shadow: 0 1.75rem 3rem 0rem rgba(50,0,100,0.1);
}
.service-card .card-title{
   color: #11224d;
   font-weight: 600;
}
.service-card i{
   font-size: 4rem;
   margin: 43px;
}

.hover-button{
   transition: all 0.2s;
}
.hover-button:hover{
   transform: scale(1.05);
}


#slider-cards{
   min-height: 68vh;
}

.icon-circle i{
   border: 2px #1262ff solid;
   border-radius: 50%;
   padding: 14px;
   height: 60px;
   width: 60px;
   line-height: 30px;
   font-size: 36px;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 5px;
}

.header-content{
   background-image: linear-gradient(to right, rgba(0, 0, 0, .3) 150px, rgba(0, 0, 0, 0) 100%);
   padding: 8rem 10%;
   width: 100vw;
   height: 100vh;
}
.border-left-color{
   padding-left: 10px;
   border-left: 3px #3957ff solid;
}
.background-contact{
   background-image: url(../images/slide4.jpg) !important;
   background-size: cover;
   background-repeat: no-repeat;
}
.background-points{
   background-image: url(../images/blue-squares.jpg) !important;
}
.background-big-square{
   background-image: url(../images/banner-background.jpg);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: right;
}
.background-tiny-square{
   background-image: url(../images/banner-background2.jpg);
   background-size: contain;
   background-repeat: repeat-x;
   background-position: left;
}
.background-linear{
   /* background-image: linear-gradient(19deg, var(--color-1), var(--color-2)); */
   background-image: url(../images/blue-squares.jpg) !important;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   filter: blur(15px);
   z-index: -1;
}
.background-linear > div{
   position: relative;
   display: block;
   z-index: 1;
}
.whatsapp{
   bottom: 6%;
   right: 2%;
   position: fixed;
   background-color: #0dc143 !important;
   color: #fff;
   padding: 7px 16px;
   border-radius: 50px;
   font-size: 20px;
   cursor: pointer;
   box-shadow: 0 2px 7px 0 #0dc143;
   text-shadow: 0 2px 4px #0dc143;
   transition: all .2s ease;
}
.social-icons{
   border-radius: 50px;
   font-size: 20px;
   cursor: pointer;
   margin: 7px;
   height: 38px;
   width: 38px;
   line-height: 35px;
   transition: all .2s ease;
}
@media (max-width: 58rem) {
   .whatsapp {
      padding: 11px;
   }
   .whatsapp i{
      border-radius: 50px;
      font-size: 40px;
      cursor: pointer;
      box-shadow: 0 2px 7px 0 #0dc143;
      text-shadow: 0 2px 4px #0dc143;
      margin: 7px;
      height: 30px;
      width: 30px;
      line-height: 30px;
   }
   .whatsapp span{
      display: none;
   }
}

footer{
   background-color: #fbfafa;
}

.banner{
   height: 40vh;
   color: #fff;
   font-weight: bold;
   background-image: url(../images/justitia-4777072_1920.jpg);
   background-attachment: fixed;
}
#aboutUs{
   min-height: 70vh;
}

/*Estilos*/
#slide-out.sidenav > li > .user-view{
   padding: 16px;
   margin-top: -18px;
   border: none !important;
}

/* Gradients */
.gradient-blue {
   background: #0288d1;
   background: -webkit-linear-gradient(45deg, #0288d1 0%, #26c6da 100%);
   background: linear-gradient(45deg, #0288d1 0%, #26c6da 100%);
}
.gradient-blue-shadow {
   box-shadow: 0 2px 7px 0 #4b66ffc0;
   text-shadow: 0 2px 4px #4b66ffc0;
}
.gradient-blue-shadow-text {
   text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.gradient-amber-shadow {
   box-shadow: 0 6px 20px 0 #f2984a63 !important;
}
.gradient-orange {
   background: #fc6076;
   background: -webkit-linear-gradient(45deg, #fc6076 0%, #ff9a44 100%);
   background: linear-gradient(45deg, #fc6076 0%, #ff9a44 100%);
}
.gradient-amber {
   background: #f2994a;
   background: -webkit-linear-gradient(45deg, #f2994a 0%, #f2c94c 100%);
   background: linear-gradient(45deg, #f2994a 0%, #f2c94c 100%);
}
.gradient-red {
   color: white;
   background: #f42c35;
}
.gradient-red-shadow {
   box-shadow: 0 2px 7px 0 #fc373f;
   text-shadow: 0 2px 4px #fc373f;
}
.gradient-pink {
   background: #FF5252;
   background: -webkit-linear-gradient(45deg, #FF5252 0%, #f48fb1 100%);
   background: linear-gradient(45deg, #FF5252 0%, #f48fb1 100%);
}
.gradient-teal {
   background: #009688;
   background: -webkit-linear-gradient(45deg, #009688 0%, #38ef7d 100%);
   background: linear-gradient(45deg, #009688 0%, #38ef7d 100%);
}
.gradient-purple {
   background-color: #8E2DE2;
   background: -webkit-linear-gradient(45deg, #4A00E0 0%, #8E2DE2 100%);
   background: linear-gradient(45deg, #4A00E0 0%, #8E2DE2 100%);
}

.card-panel {
   padding: 20px;
   border-radius: 6px 6px 6px 6px;
}
.card{
   border-radius: 6px !important;
}
.custom-card-shadow {
   border-radius: 10px !important;
   box-shadow: 0 4px 20px 1px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.08) !important;
   border: 0 !important;
}

@import url("https://fonts.googleapis.com/css?family=Varela+Round");
:root {
  --color-1: #3dd3e6;
  --color-2: #904dee;
  --color-3: #08aeea;
  --color-4: #3dd3e6;
}
body {
  font-family: 'Varela Round', sans-serif;
}
.Header {
  position: relative;
  height: 100vh;
  display: block;
}
.Header-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(19deg, var(--color-1), var(--color-2));
  transform-origin: 0px 0px;
  transform: skewY(-10deg);
  overflow: hidden;
  z-index: -1;
}
.Header-background::before,
.Header-background::after {
  display: block;
  position: absolute;
  content: '';
  width: 80%;
  height: 33.333333333333336%;
  opacity: 0.3;
  filter: blur(15px);
}
.Header-background::before {
  background: var(--color-1);
  right: 0;
}
.Header-background::after {
  background: var(--color-2);
  bottom: 0;
}
.Header-content {
  text-align: center;
  padding: 4rem 4rem;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 58rem) {
  .Header-content {
    text-align: left;
    padding: 10rem 4rem;
    max-width: 80%;
    display: flex;
    justify-content: space-between;
    flex-shrink: 1;
  }
}
.Header-hero h1,
.Header-hero p {
  color: #fff;
  text-shadow: 0 0.5rem 1rem rgba(50,0,100,0.1);
}
.Header-hero h1 {
  margin: 0;
  font-size: 3rem;
}
.Header-hero p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}
.Header-visuals {
  position: relative;
  margin-top: 5rem;
}
@media (min-width: 58rem) {
  .Header-visuals {
    margin: 0;
  }
}
.Button {
  padding: 1.5rem 2rem;
  border: 0;
  color: var(--color-3);
  font-size: 1.2rem;
  font-weight: bold;
  background: #fff;
  border-radius: 6px;
  transition: all 0.2s;
  cursor: pointer;
  box-shadow: 0 1.75rem 2rem -0.4rem rgba(50,0,100,0.15);
}
.Button:hover {
  color: var(--color-4);
  box-shadow: 0 1.75rem 3rem 0rem rgba(50,0,100,0.1);
  transform: scale(1.05);
}
.Button:active {
  box-shadow: 0 1.75rem 2.5rem -0.2rem rgba(50,0,100,0.125);
  transform: scale(1.025);
}