@font-face {
    font-family: 'DINProMedium';
    src: url('lfonts/DINPro-Medium.otf');
}

body {
 background-color: gray;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}

a {
  text-decoration: none !important;
  color: black;
}

.botones1 {
background-image: url(limg/fondos-01.jpg);
background-position: center right;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
max-width: 960px;
padding: 0% !important;
}

.botones2 {
background-image: url(limg/fondos-03.jpg);
background-position: center left;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
max-width: 960px;
padding: 0% !important;
}

.filtro {
	position: absolute;
width: 100%;
height: 100%;
background: #45DAFF;
opacity: 0;
-webkit-transition: opacity 0.6s;
transition: opacity 0.6s;
}

.botones2:hover .filtro {
    opacity: 0.6; }

.botones1:hover .filtro {
    opacity: 0.6; }

.marca {
padding-top: 60%;
padding-bottom: 40%;
margin: 0 50px;
position: relative;
z-index: 350;
}

.logos {
  max-height: 180px;
}

.central {
	text-align: center;
	margin-top: -300px;
  position: relative;
}



.botones1 .marca .subtitulo::before {
  position: absolute;
    width: 20px;
    height: 3px;
    margin-top: -10px;
    background: #333333;
    content: '';
    right: 8px;
}

.botones2 .marca .subtitulo::before {
  position: absolute;
    width: 20px;
    height: 3px;
    margin-top: -10px;
    background: #333333;
    content: '';
}

.subtitulo:hover {
  color: white;
  background: black;
  text-decoration: none !important;
}

.cuadro1 {
  margin-top: 10%;
  position: absolute;
    right: 1%;
}


.cuadro2 {
  margin-top: 10%;
    position: absolute;
}

.subtitulo {
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 16px;
  font-family: 'DINProMedium';
  margin-top: 40px;
  padding: 0 2px;
  position: relative;
  background: none;
  overflow: hidden;
  transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
}

.botones1 .oculto {
 background: rgba(69,218,255,0.5);
 position:relative;
 opacity:0;
 transition:all ease .5s;
 -webkit-transition:all ease .5s;
 -moz-transition:all ease .5s
}


.botones1 .oculto:hover {
 opacity:1;
}

.visible {
position: relative;
z-index: 100;
top:300px;
}

@media only screen and (max-width: 1400px){
  .visible {
   max-width: 150px;
  top:300px;
  }

  .logos {
    max-height: 120px;
  }

  .marca {
    padding-top: 55%;
    padding-bottom: 45%;
	}
}



@media only screen and (max-width: 1280px){
  .visible {
   max-width: 150px;
  top:300px;
  }

  .logos {
    max-height: 130px;
  }
}

@media only screen and (max-width: 860px){
  .visible {
  max-width: 100px;
  z-index: 100;
  top:300px;
  }

  .logos {
    max-height: 100px;
  }


}

@media only screen and (max-width: 768px){
.marca {
  text-align: center !important;
}

.cuadro1, .cuadro2 {
  position: relative;
}

.subtitulo::before {
  display: none;
}

  .visible {
  max-width: 80px;
  top:300px;
  }

  .logos {
    max-height: 100px;
  }


}


@media only screen and (max-width: 360px){

  .visible {
  max-width: 80px;
  top:150px;
  }

.central {
  	margin-top: -150px;
}

  .logos {
    max-height: 80px;
  }


}