body {
     font-family:Helvetica;
}
@font-face {
  font-family: 'tomy';
  src: url('MADE TOMMY Medium.otf');
 
}
@font-face {
  font-family: 'HelveticaBold';
  src: url('Helvetica Bold Condensed.otf');
 
}

@font-face {
  font-family: 'Helvetica';
  src: url('HelveticaCE_Medium.otf');
 
}

@font-face {
  font-family: 'DefaultSans';
  src: url('DefaultSansRegular.ttf');

}
@font-face {
  font-family: 'RobotoBold';
  src: url('Roboto-Bold.ttf');

}
@font-face {
  font-family: 'RobotoRegular';
  src: url('Roboto-Regular.ttf');

}
.btn {
font-family:Roboto-Medium;
}
.h-tit {
width:100%;
 text-align:center;
 padding-top:10px;
 padding-bottom:10px;
  /*float:left;*/
 font-family:tomy;


}

.p1 {
   
    font-size:14pt;
    color:#636363;
    font-family:Roboto-Medium;
}
.p2 {

     font-family:RobotoRegular;
    font-size:13pt;
    color:#525252;
}

    .p2 span {
     color:#2678eb;
    }


    .p3 {

     font-family:RobotoRegular;
    font-size:13pt;
    color:#fff;
}

      .p4 {

     font-family:RobotoRegular;
    font-size:14pt;
      color:#525252;
}
          .p5 {

     font-family:RobotoRegular;
    font-size:12pt;
      color:#525252;
}


.img-1 {
float:left;
width:96%;
margin-left:2%;
border-radius:16px;
margin-top:1%;
margin-bottom:1%;
}

.img-2 {
float:left;
width:90%;
margin-left:5%;
border-radius:16px;
margin-top:1%;
margin-bottom:1%;
}


.card-1 {
min-height:400px;
float:left;
width:98%;
margin-left:1%;
-webkit-box-shadow: 0px 0px 19px 5px rgba(199,206,255,0.37);
-moz-box-shadow: 0px 0px 19px 5px rgba(199,206,255,0.37);
box-shadow: 0px 0px 19px 5px rgba(199,206,255,0.37);
border-radius:6px;

font-size:13pt;
    color:#636363;

  
}

.img-card {
    width:96%;
    margin-left:2%;
    margin-top:2%;
    border-radius:5px;
    height:160px;
}

.footer {

    width:100%;

   min-height:360px;

   background-color:#f0f3ff;

}

.footer p{

color:#79758b;

}
.footer p a{

color:#79758b;
list-style:none;
text-decoration:none;

}
.footer label{

font-size:12pt;
font-weight:bold;
}

    .footer .icon-social {

       border: solid 1px #d5d5d5;
       padding:4px;

       float:left;
       margin:4px;

       border-radius:4px;

       width:40px;
       height:40px;
    }

        .footer .icon-social:hover {

     background-color:#d5d5d5;
    }

        .footer .icon-social img{

    width:30px;
    opacity:.8;
    }


.btn {
border-radius:50px;

}
.btn-icon-1 {

    border-radius: 20px;
}

.btn-outline-secondary {

    border:#d5d5d5 1px solid;

    padding-top:8px;
      padding-bottom:8px;
}

.btn-outline-secondary:hover {

    background-color:#d5d5d5;
    
    border:#d5d5d5 1px solid;
}
.btn span {

    color:#2b83ff;
    font-weight:bold;
}



.seccion-blueDark {

width:100%;


}
.seccion-blueDark div{

width:50%;

float:left;



}

    .seccion-blueDark .seccion-1 {
    background-image:url(../Images/grupo-personas-trabajando-plan-negocios-oficina%20-%202.jpg);
          
          border-bottom-left-radius:20px;
      border-top-left-radius:20px;
            min-height:400px;

             background-position: center top;
             background-size:100%;

              /*/*background-attachment: fixed;*/

              float:left;
                background-repeat: no-repeat;
         }

    .seccion-blueDark .seccion-2 {
    
    background-color:#304456;

    padding-top:50px;
   min-height:400px;

      border-bottom-right-radius:20px;
      border-top-right-radius:20px;
    
    }

.div-head-1 {

        background-color:#304456;
        border-radius:20px;
        padding: 20px;

   /*min-height:400px;

      border-bottom-right-radius:20px;
      border-top-right-radius:20px;*/

}
    .zona-gray {

width:100%;

background-color:#f0f0f0;

padding:15px;


border-radius:20px;
}
       .zona-gray-2 {

width:100%;

background-color:#f0f0f0;

padding:15px;


}
  .display-movil {
        
            display:none;
        
        }
         .display-pc {
        
            display:normal;
        
        }


/***************Animación******************/

@keyframes show {

    from {
    
    opacity:0;
    scale:70%;
    
    }
    to {
    
    
      opacity:1;
    scale:100%;
    }

}

.anim1 {

    view-timeline-name:--image;
     view-timeline-axis:block;
     animation-timeline:--image;
     animation-name:show;
     animation-range: entry 60% cover 35%;

     animation-fill-mode:both;
}


@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}


.anim2 {
  animation-duration: 1s;
  /*animation-name: slidein;*/
  animation-name:desplazamiento-ascendente;
    /*  view-timeline-name:--image;
     view-timeline-axis:block;
     animation-timeline:--image;
     animation-name:show;
     animation-range: entry 60% cover 35%;

     animation-fill-mode:both;*/
}

@keyframes desplazamiento-ascendente {
0% {
transform: translateY(70px);
}
100% {
transform: translateY(0);
}
}
 /************tablet*************/
      @media (max-width: 1200px) {

        .img-2 {
        
        float:right;
       /* width:80%;*/
        }
        .label-animate {
        width:80%;
        
        }
        .seccion-blueDark .seccion-1 {
          background-size:200%;

           /* background-image:url(../Images/pexels-teona-swift-6913726.jpg);*/ 

        }
        
        }

 /************Movil*************/

         @media (max-width: 800px) {
                .display-movil {
        
            display:block;
        
        }
                     .display-pc {
        
            display:none;
        
        }





                     .seccion-blueDark {

width:100%;


}
.seccion-blueDark div{
width:100%;

float:left;



}

    .seccion-blueDark .seccion-1 {
          
      border-radius:20px;
            min-height:300px;

             background-position: center top;
             background-size:150%;

              /*/*background-attachment: fixed;*/

              float:left;
                background-repeat: no-repeat;
         }

    .seccion-blueDark .seccion-2 {
    
    background-color:#304456;
    padding-top:10px;

    min-height:300px;  
    margin-top:5px;
      border-radius:20px;
    
    }

            .logo {
            margin-left:100px;
            }
      .img-2 {
        
        float:none;
       /* width:80%;*/
        }

   
 }