/*!
 * TEMA para Risheng
 */

/* ----------------------------- GENERALES */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.alert{margin-bottom: 30px;}
.alert button{display:none;}
html,body {min-height: 100%;width: 100%;}
body{
  font-family: 'Roboto Slab', sans-serif;color: #fff;
  font-optical-sizing: auto;
  font-weight:300;
  font-style: normal;
}
h1, h2, h3, h4, h5, h6 { line-height: 1.2em;}
a {
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
  color: #fff;
}
a:hover, a:focus {
  color: #f39c00;
}

p {
  font-size: 17px;
  line-height: 1.5em;
  margin-bottom: 20px;
}
p strong{font-weight: bold; display: block;}

.container{ width: 90%; margin: 0 auto;}

/* ----------------------------- MENU */
nav,
.navbar-toggle {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

nav {
  position: fixed; top: 0; right: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: table;
  color: #fff;
  background: rgba(0, 0, 0, 1);
}

.nav-hide { display: none; }

nav ul {
  display: table-cell;text-align: right;
  vertical-align: top; padding-top: 100px;
  padding-left: 0 !important;
}

nav ul li { list-style: none;}

nav ul li a {
  font-size: 35px;line-height: 1.4em; margin-right: 30px;
  color: inherit;
  text-decoration: none; display: block;
}

nav ul li a:hover, nav ul li a:focus {
  color: #EA8000;
}

@media only screen and (min-width: 550px){nav ul li a {font-size: 50px;}}

.navbar-toggle {
  position: fixed;
  top: 30px;
  right: 30px;
  width: 45px;
  height: 45px;
  z-index: 20;
  cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
  width: 100%;
  height: 4px;
  margin-bottom: 4px;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
.navbar-on .bar1,
.navbar-on .bar2,
.navbar-on .bar3 { background-color: #fff; }
.navbar-on .bar1 {
  transform-origin: 25% 40%;
  transform: rotate(45deg);
}
.navbar-on .bar3 {
  transform-origin: 25% 40%;
  transform: rotate(-45deg);
}
.navbar-on .bar2 { background-color: transparent; }

.marca{
  background-image: url('../img/isotipo.png');
  background-image: url('../img/isotipo.svg');
  text-indent: -99999px;
  width: 90px; height: 90px;
  background-size: 90px 90px;
  z-index: 10000;
}

.header-fondo-mobile .marca{position: fixed; top: 25px; left: 20px; margin-top: 0; display: inline-block;}
.header-fondo-mobile{ width: 100%; height: 80px; background: rgba(190, 206, 16, 0); position: fixed;top: 0; z-index: 10000; transition: all 0.3s ease-in-out;}
@media only screen and (min-width: 500px){
  .marca{ width: 90px; height: 90px;background-size: 90px 90px;}
  .header-fondo-mobile .marca{top: 25px;}
}
@media only screen and (min-width: 450px) and (max-width: 899px){
  .header-fondo-mobile .marca{position: relative; margin: 0 auto;display: block; left: 0;}
}
@media only screen and (min-width: 900px){
 nav{display: table !important;float: right;position: relative;width: auto;}
  .nav-hide { display: block; }
  .navbar-toggle{display: none;}
  nav{height: 80px;background: rgba(190, 206, 16, 0);}
  nav ul {display: inline-block; vertical-align: baseline; padding-top: 20px; padding-left: 0 !important; margin-right: 0; float: right;}  
  nav ul li { display: inline-block;text-align: center;width: 110px; height: 40px; vertical-align: middle;}  
  nav ul li a {font-size: 13px;line-height: 1.4em;font-weight: 600; text-align: center; display: block; margin-left: 10px; margin: 10px;}
  .container{ width: 95%;}
  .marca-link{position: relative;} .header-fondo-mobile .marca{position: relative;margin: 0 auto;display: block; left: 0;}
  .nav-hide{float: right;position: relative; width: auto;}
}

/* _____________________________________imagen DE FONDO */
body { display: block; }
body #bgimg { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(../img/imagen-fondo.jpg) no-repeat;
    background-size: cover; 
}

/* ----------------------------- HOME */
#home, section{width: 100%; min-height: 100vh;}
#home .container{padding-top: 200px;color: #fff; text-align: center;max-width: 1200px;}
#home .container h2{font-size: 2.5em; font-weight: 500; }
#home img {display: block; margin: 0 auto; width: 300px; height: 75px;text-align: center; margin-bottom: 50px; }
@media only screen and (min-width: 700px){
  #home .container h2{font-size: 3.5em; text-align: left;}
  #home img{margin-left: 0;width: 400px; height: 100px;}
}

/* ----------------------------- QUIENES SOMOS */
#about-us {text-align: center;}
#about-us h3{font-size: 2em; padding-top: 50px; font-weight: 500;margin-bottom: 30px;}#about-us h3 span{font-weight: 200;}
#about-us img{width: 90%; max-width: 200px; height: auto; margin: 20px auto;}
#about-us ul li{display: inline-block; text-align: center; padding: 10px 35px; width: 150px; vertical-align: top; margin-bottom: 20px;}
#about-us ul li img{display: block; width: 100px; height: auto; margin: 10px auto;}
#about-us p {max-width: 450px; margin: 0 auto; margin-bottom: 20px; font-weight: 300;}
#about-us p:last-child{ margin-bottom: 100px;}
@media only screen and (min-width: 400px){
 #about-us h3{font-size: 3em;}
}



/* ----------------------------- CONTACTO */
#contact {text-align: center;}
#contact .container{padding-top: 50px;}
#contact h3{font-size: 2em; font-weight: 500;margin-bottom: 30px;}#contact h3 span{font-weight: 200;}

.contacto-datos{padding-bottom: 50px;}
.contacto-datos li{line-height: 2em;}
.contacto-datos h4{font-weight: 500; padding-top: 50px; padding-bottom: 15px;}
.contacto-datos h4:first-child{padding-top: 0;}
.contacto-mapa{padding-bottom: 100px;}
@media only screen and (min-width: 1000px){
  .contacto-datos{}
}

@media only screen and (min-width: 400px){
 #contact h3{font-size: 3em;}
}

/* ----------------------------- FOOTER */
footer{color: #fff;}
footer .container{padding-top: 50px;}
.copy p{text-align: center;font-size: 0.8em; padding-top: 20px;}
@media only screen and (min-width: 1000px){
}