
/* =================================================
   Colores

   #010135 azul

   #C80B1F rojo
   #3163FA azuk 2

====================================================*/   

/* =================================================
  					Extras
====================================================*/   

.nocapitalize{
	text-transform: none;
}

.paddingabout{
	padding-bottom: 50px;
}

.logofav{
  width: 20px;
  height: 20px;
  display: inline;
}

.socialnav{
	padding-top: 5px;
}

.pslider{
	font-size: 18px;
	font-weight: 500;
}

#contact .form{
  margin-top: 53px;
}


.marginrequi{
  margin-top: 50px;
}

.prequisitos{
  font-size: 16px;  
}


#portfolio .text h4{
  text-align: center;
}
.atelf{
  display: block;
}
/* =================================================
   01 - Logo TSF
====================================================*/   

.logotsf{
	width: 250px;
}

.logoblanco{
  width:170px;
  height: 90px;
  background: url(../images/AboutNew.png) no-repeat top;
  background-size: 100% 100%;
  
}

#header.sticky .logo figure.logoblanco{
  width:170px;
  height: 90px;
  background: url(../images/AboutNew.png) no-repeat top;
  background-size: 100% 100%;
  
}

/* =================================================
   02 - Logo Footer TSF
====================================================*/   

.logofooter{
	display: inline;
}

/* =================================================
   03 - Logo Footer TSF
====================================================*/  
.bottombenefi{
    margin-top: 25px;  
    background:#a20502;
    color: #fff;
    padding: 12px 25px;
    text-transform: uppercase;
    font-size: 14px;
    border-radius: 5px;
    font-weight: 500;
    position: relative;
    left: 35%;
  }

.chicle{
  
  -webkit-animation:1.5s chicle infinite;
  -moz-animation:1.5s chicle infinite;
  -ms-animation:1.5s chicle infinite;
  -o-animation:1.5s chicle infinite;
  animation:1.5s chicle infinite;
}

@-webkit-keyframes chicle{
 25%{
    -webkit-transform:scale(0.9);
  }
 
}

@-moz-keyframes chicle{
 25%{
    -webkit-transform:scale(0.9);
  }
}

@keyframes chicle{
  25%{
    -webkit-transform:scale(0.9);
  }
 
}

@-o-keyframes chicle{
 25%{
    -webkit-transform:scale(0.9);
  }
}

/* =================================================
   04 - Boton de perfiles
====================================================*/  
.botonperfil{
  
    background: #ffd700;
    color:black;
    padding: 8px 18px;
    text-transform: uppercase;
    font-size: 14px;
    border-radius: 5px;
    font-weight: 500;
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    left: 27%;
}


.chicleper:hover{
  
  -webkit-animation:1.5s chicleper infinite;
  -moz-animation:1.5s chicleper infinite;
  -ms-animation:1.5s chicleper infinite;
  -o-animation:1.5s chicleper infinite;
  animation:1.5s chicleper infinite;
}

@-webkit-keyframes chicleper{
 25%{
    -webkit-transform:scale(0.9);
  }
 
}

@-moz-keyframes chicleper{
 25%{
    -webkit-transform:scale(0.9);
  }
}

@keyframes chicleper{
  25%{
    -webkit-transform:scale(0.9);
  }
 
}

@-o-keyframes chicleper{
 25%{
    -webkit-transform:scale(0.9);
  }
}


#map{
  width: 100%;
  height: 500px;
  padding:50px 0;
}

#map iframe{
  width: 100%;
  height: 100%;
}
.floatr{
  float: right;
}


/* =================================================
   05 - Banderas
====================================================*/  

.banderas{
  width: 20px;
  height: 20px;
  float: right;
  margin-right: 30px;
}



ul.socialcrap li a:hover{
  color:black;
  font-weight: 500;
}

ul.socialcrap li a:focus{
  color:gray;
  font-weight: 500;
}



#header.sticky ul.socialcrap li a:hover{
  color:white;
  font-weight: 500;
}

#header.sticky ul.socialcrap li a:active{
  color:red;
 
}

/* =================================================
   06- Animacion caida
====================================================*/ 

.caida{
  -webkit-animation: 2s caida 1;
   -moz-animation: 2s caida 1;
   -o-animation: 2s caida 1;

 
}

@-webkit-keyframes caida{
  0%{
    -webkit-transform: translateY(-100px);
    opacity: 0;
  }
  20%,30%{
    opacity: 0;
  }
  40%{
    -webkit-transform: translateY(-20px);
    opacity: 0.5;
  }


}
@-moz-keyframes caida{
  0%{
    -moz-transform: translateY(-100px);
    opacity: 0;
  }
  20%,30%{
    opacity: 0;
  }
  40%{
    -moz-transform: translateY(-20px);
    opacity: 0.5;
  }

  @-o-keyframes caida{
  0%{
    -o-transform: translateY(-100px);
    opacity: 0;
  }
  20%,30%{
    opacity: 0;
  }
  40%{
    -o-transform: translateY(-20px);
    opacity: 0.5;
  }


}





/* =================================================
   Responssive
====================================================*/ 

@media (min-width: 768px) and (max-width: 991px) {
  .socialcrap{
    display: none;

  }
}

@media (max-width: 480px) {
  .socialcrap{
    display: none;
    
  }

  .socialnav{
     display: none;
  }

}

@media (max-width: 320px) {
  .socialcrap{
    display: none;
    
  }
}