@font-face {
   font-family: 'Museo 500';
   font-style: normal;
   font-weight: 500;
   src: url(Museo300-Regular.otf);
}

@font-face {
   font-family: 'Museo 700';
   font-style: normal;
   font-weight: 500;
   src: url(Museo700-Regular.otf);
}

@font-face {
   font-family: 'Trebuchet MS Regular';
   font-style: normal;
  
   src: url(TrebuchetMS.ttf);
}

body{

    font-family: "Trebuchet MS Regular","HelveticaNeue","Helvetica";
}

.bg_rojo{
  background: #CC0000;
  
  color:#fff;
}

.sombra{
-webkit-box-shadow: 1px -1px 7px 3px rgba(0,0,0,0.46);
-moz-box-shadow: 1px -1px 7px 3px rgba(0,0,0,0.46);
box-shadow: 1px -1px 7px 3px rgba(0,0,0,0.46);
}

.menu_prin{
  width: 60%;
  color:#fff;
  margin:auto;
  padding-left: 0%;
  

}


.navbar-toggler{
  color:#fff !important;
}
.menu_prin .nav-item{
  margin-left: 2%;
}

.menu_prin .nav-item a{
  color:#fff;
}

.menu_prin .nav-item a:hover{
  color:#000;
}

.dropdown-menu a.dropdown-item{
  color:#858585;
}
#logo{
  width:30%;
}

.slide{
  height: 500px;
}



.carousel-item{
  background-size: cover;
  background-repeat: no-repeat;
   height: 500px !important;
background-position:center;
}

.caption-slide{
  position: absolute;
  top: 40%;
  text-align: center;

  color:#fff;
  width: 100%;

}

.caption-slide h2 {
  font-size: 3em;
  font-weight: 600;

}
.caption-slide p{
  font-size: 2em !important;
}

 .img-fluid{

   width: 100%;
 }

.logo_prin{
  position: relative;
  width: 22%;
margin-bottom:20px;
  }

#filosofia{

}
.bloq{
    width: 100%;
  position: relative;
 

  color:#000;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 30px;
  
}

.bloq h2{
  font-weight: 600;
  font-size: 2.5em;


}
.bloq p{
  width:90%;
  margin:auto;
  font-size: 1.2em;
  margin-top:20px;

}

.bloq ul{
  text-align: left;
  font-size: 1.2em;
  
  margin-top: 20px;
  
}


#diferencia{
  height: 150px;
  width: 100%;
}

.desdif{
  width: 33%;
  display: inline-block;
  height: 150px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#enlaces{
  height: 400px;
  width: 100%;
  padding-top: 40px;
  text-align: center;
}

#enlaces a{
  color:#26292D;
  
}

#enlaces a:hover{
  color: #CC0000;
  text-decoration:none;
}
.acce_en{
  width: 80%;
  margin:auto;
}


#divfondo{
   /* The image used */
    background-image: url("../img/fondo.jpg");

    /* Set a specific height */
    height: 500px; 

    /* Create the parallax scrolling effect */
   background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.subti{
  font-weight: 600;
  font-size:2.5em;
  text-align: center;
}

.about{
  height: 500px;
  margin-top:20px;
}

.mask{
  position: relative;
  overflow: hidden;
  overflow-y: hidden;
  padding: 0px;
    padding-top: 5px !important;
}
.mask img{
  width: 100%;
  height: 100%;
}

.triangle-r{

	width: 0;
	height: 0;
	border-bottom: 500px solid #fff;
	border-left: 170px solid transparent;
	position: absolute;
	right: 0;

}

.triangle-l{

	width: 0;
	height: 0;
	border-bottom: 530px solid #fff;
	border-right: 170px solid transparent;
	position: absolute;
	left: 0;

}

.tcvpb_metro_box:hover .detalle{
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.detalle{
	transition: 0.6s ease-out;
	-webkit-transition: 0.6s ease-out;
	-moz-transition: 0.6s ease-out;
	-o-transition: 0.6s ease-out;
	-ms-transition: 0.6s ease-out;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: relative;
height:300px;

}


.detalle .flip-1,
.detalle .flip-2{
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: visible;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.flip-1{
  	z-index: 2;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	width: 100%;
	box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08);
  background:#fff;
}

.flip-2{
  	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	background: #30b0ce;
	cursor: pointer;
  background:#f5f5f5;
}

.flip-1 h4{
  text-align:center;
  font-size:1.5em;
  margin-top:5%;
  margin-left:-5%;
}




.flip-1 img{
  width:60%;
  margin:auto;
  margin-left:-5%;
}
.detalle .flip-2{
transform: rotateY(-180deg);
padding-top:20px;
}

.flip-2 ul {
  font-size:0.9em;
  width:90%;
  margin:auto;
  list-style-type:circle;
  
}

.tcvpb_metro_box .detalle .flip-1, .tcvpb_metro_box:hover .detalle .flip-2 {
	animation: stayvisible 0.5s both;
	-webkit-animation: stayvisible 0.5s both;
	-moz-animation: stayvisible 0.5s both;
	-o-animation: stayvisible 0.5s both;
	-ms-animation: donothing 0.5s;
	-ms-transition: visibility 0s linear 0.17s;
	visibility: visible;
}
.tcvpb_metro_box:hover .detalle .flip-1, .tcvpb_metro_box  .detalle .flip-2 {
	animation: stayvisible 0.5s both;
	-webkit-animation: stayvisible 0.5s both;
	-moz-animation: stayvisible 0.5s both;
	-o-animation: stayvisible 0.5s both;
	-ms-animation: donothing 0.5s;
	-ms-transition: visibility 0s linear 0.17s;
	visibility: hidden;
}


@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-ms-keyframes donothing { 0% { } 100% { } }

.card-header{
  padding:0px !important;
    background: #CC0000;
}


.card-header .btn-link{
  color:#fff !important;
}


.fondo_contacto{
   /* The image used */
    background-image: url("../img/CONTACTO.jpg");

    /* Set a specific height */
 

    /* Create the parallax scrolling effect */
   background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color:#fff;
    padding-bottom:20px;
}

.info-contact{
  padding-top:20px;
  width:80%;
  margin:auto;
  height:200px;
  background:#fff;
  color:#000;
}

.info-contact svg{
  color:#CC0000;
  margin-bottom:10px;
}


 input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847;
  background-color: #DFF0D8;
  border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
}

.parsley-errors-list {
  margin: 2px 0 3px;
  padding: 0;
  list-style-type: none;
  font-size: 0.7em;
  line-height: 0.7em;
  opacity: 0;
  color:#721c24;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}
footer{
  padding-top: 30px;
}


footer .nav-footer a{
  color:#858585;
}

footer #infotech{
  color:#FFFFFF;
  text-align:center;
  font-size:10pt;
  font-weight:300;
  padding-top:20px;
  padding-bottom:20px;
  
}

footer #infotech h5{
  font-size:10pt;
}

footer #infotech .redes{

width:10%;
margin:auto;

list-style-type:none;
text-align:justify;
}

footer #infotech .redes li{


float:left;
width:50%;

}

footer #infotech a{
  color:#ffffff;
  text-decoration:underline;
}
@media only screen and (min-width: 768px) {

#divfondo{

background-size:100%;
background-attachment: local;
}

}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    
    .slide{
      height: 300px;
    }

#divfondo{

background-size:100%;
background-attachment: local;
}
    
    .carousel-item{
      height: 300px !important ;
        background-size: cover;
        background-position:center;
    
    }
    
    #enlaces{
      height:auto;
      
    }
    
    #enlaces .acce_en{
      margin-bottom:20px;
    }
    #enlaces .fa-7x{
      font-size:3em !important;
    }
    .logo_prin{
      position: relative;
      width: 70%;
      text-align: center;
      left: 0;
      top:0;
 
  }
  
  #diferencia{
    height: 300px;
  }
  
  
  
  .desdif{
    height: 100px;
    width:100%;
  }
  
  .bloq h2{
    font-size: 2em;
  }
  .about{
    height: auto;
  }

footer #infotech .redes{

width:50%;

}

}