@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
}

@font-face {
    font-family: 'Serpentine ICG';
    src: url('../font/SerpentineICGBold.woff2') format('woff2'),
         url('../font/SerpentineICGBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}



/*-------------------------------- GENERAL --------------------------------*/
.title{
  width: 100%;
  font-size: 31px;
  text-align: center;
  color: #014892;
  padding: 65px 0;
  font-family: 'Serpentine ICG';
}

.padding{
  padding: 0 15px;
}

/*-------------------------------- GENERAL --------------------------------*/

/*-------------------------------- CONT-PRODUCTOS --------------------------------*/
.cont-productos{
  width: 100%;
  max-width: 1200px;
  margin: 63px auto;
}

.item-productos{
  width: 100%;
  height: auto;
  position: relative;
  margin-bottom: 35px;
}

.item-productos img{
  width: 100%;
}

.cont-fondo{
  position: absolute;
  top: 11%;
  left: 5%;
  right: 5%;
  bottom: 11%;
}

.cont-title{
  width: 100%;
  height: 100%;
  background-color: rgba(1, 72, 146, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.img-tr{
  width: 169px;
}

.img-tr img{
  width: 100%;
}

/*2*/

.btn-movile{
  color: white;
  font-weight: bold;
  font-size: 23px;
  text-align: center;
  font-family: 'Serpentine ICG';
}

.cont-title:after, .cont-title:before {
  content: " ";
  width: 10px;
  height: 10px;
  position: absolute;
  border: 0px solid #fff;
  transition: all 1s;
}
.cont-title:after {
  top: -1px;
  left: -1px;
  border-top: 5px solid #ffc706;
  border-left: 5px solid #ffc706;
}
.cont-title:before {
  bottom: -1px;
  right: -1px;
  border-bottom: 5px solid #ffc706;
  border-right: 5px solid #ffc706;
}

.cont-title:hover:before, .cont-title:hover:after {
  width: 99%;
  height: 98%;
}

/*hover border amarrillo*/

/*-------------------------------- CONT-PRODUCTOS --------------------------------*/


@media screen and (min-width: 640px){
/*-------------------------------- CONT-PRODUCTOS --------------------------------*/
  .cont-productos{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .item-productos{
    width: 48%;
  }
/*-------------------------------- CONT-PRODUCTOS --------------------------------*/
}

@media screen and (min-width: 768px){

}

@media screen and (min-width: 900px){
/*-------------------------------- CONT-PRODUCTOS --------------------------------*/
.img-tr{
  width: 221px;
}

.btn-movile{
  font-size: 31px;
}
/*-------------------------------- CONT-PRODUCTOS --------------------------------*/

}

@media screen and (min-width: 1200px){

/*-------------------------------- GENERAL --------------------------------*/
.padding{
  padding: 0;
}
/*-------------------------------- GENERAL --------------------------------*/

}