@import url("../foco-font/stylesheet.css");

html {background-color: rgba(3,65,106,1);}


body { 

  cursor: default;

  font-family: 'Roboto', sans-serif; color: rgba(123,123,143,1); 


  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;



  }


/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:999; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../img/status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
    text-align: center;
}




*:hover {-webkit-transition:all ease 300ms;}

h1,h3,h4 { font-family: 'Lato', Roboto, sans-serif;
            font-weight: 900;
            font-size: 3.5em;
              color: rgba(52,166,68,1); }

h2 {  font-family: 'Playfair Display', serif;
      font-style: italic;
      color: rgba(5,112,183,1);  }

h5,h6 { color: rgba(5,112,183,1);  }

.p-0 {padding:0}
.p-10 {padding:10px;}
.p-20 {padding:20px;}
.p-30 {padding:30px;}
.p-40 {padding:40px;}
.p-50 {padding:50px;}


.p-t-10 {padding-top:10px;}
.p-t-20 {padding-top:20px;}
.p-t-30 {padding-top:30px;}
.p-t-40 {padding-top:40px;}
.p-t-50 {padding-top:50px;}


.p-b-10 {padding-bottom:10px;}
.p-b-20 {padding-bottom:20px;}
.p-b-30 {padding-bottom:30px;}
.p-b-40 {padding-bottom:40px;}
.p-b-50 {padding-bottom:50px;}
.p-b-80 {padding-bottom:80px;}

.tx1-2 {font-size: 1.2em;}
.tx1-5 {font-size: 1.5em;}
.tx2-0 {font-size: 2em;}
.tx2-5 {font-size: 2.5em;}
.tx3-0 {font-size: 3em;}



.btn {font-size: 1.2em;
      text-align: center;
      border-radius:0; padding:12px 38px;
      color:rgba(0,0,0,0.4); margin: 12px 4px;}

.btn-transparente { background-color: rgba(0,0,0,0); border: 1px solid white;
                    color:rgba(255,255,255,0.5); }

.btn-transparente:hover { color:rgba(255,255,255,1); 
                          background-color: rgba(0,0,0,0.2);} 

.btn-dark { color:rgba(255,255,255,0.6); }                

.btn-dark:hover { color:rgba(255,255,255,1); }                


.glyphicon { margin: 0 10px; }



/* Estilos de párrafo */

.t-intro {  font-weight: 200;
            font-size: 1.5em;
            line-height: 2em; }


p { font-size: 1.2em;
    font-weight: 200;
    line-height: 1.7em; }


blockquote {border-left: 6px solid rgba(230,230,230,1);}




/* Colores texto */

.c-blanco { color: rgba(255,255,255,1); }

.c-gris-1 { color: rgba(38,59,74,1); }

.c-gris-2 { color:rgba(125,137,146,1); }

.c-gris-3 { color: rgba(199,211,219,1); }

.c-azul-1 { color: rgba(3,56,106,1); }

.c-azul-2 { color: rgba(5,112,183,1); }

.c-azul-3 { color: rgba(104,141,166,1); }

.c-verde-1 { color: rgba(17,80,71,1); }

.c-verde-2 { color: rgba(52,166,68,1); }

.c-verde-3 { color: rgba(136,211,146,1); }


/* Colores fondo */

.bgm-transparente { background-color: none; background: none; }

.bgm-gris-1 { background-color: rgba(38,59,74,1); }

.bgm-gris-2 { background-color:rgba(125,137,146,1); }

.bgm-gris-3 { background-color: rgba(199,211,219,1); }

.bgm-azul-1 { background-color: rgba(3,56,106,1); }

.bgm-azul-2 { background-color: rgba(5,112,183,1); }

.bgm-azul-3 { background-color: rgba(104,141,166,1); }

.bgm-verde-1 { background-color: rgba(17,80,71,1); }

.bgm-verde-2 { background-color: rgba(52,166,68,1); }

.bgm-verde-3 { background-color: rgba(136,211,146,1); }





/* Estilos portada */

.seccion-portada-2 { background: url(../img/bg/bg-01.jpg) no-repeat bottom right; 
                    background-size: cover; }


.seccion-portada-3 { background: url(../img/bg/bg-02.jpg) no-repeat center; 
                    background-size: cover; }


.seccion-contacto { background: url(../img/bg/bg-03.jpg) no-repeat center; 
                    background-size: cover; }                    


footer { background-color:rgba(240,240,240,1); 
          border-left:10px solid rgba(52,166,68,1);}

footer p { padding-left: 20px;}

.texto-footer { font-size: 0.7em; }


/* Estilos header */


/* estilos header y menu principal */


.menu-principal ul li {list-style: none; float: left;}

.menu-principal ul li a { display: block;
                          font-family: 'Lato', Roboto, sans-serif;
                          font-size: 1.2em;
                          padding: 44px 20px 10px;
                          color:rgba(120,120,120,1);
                          text-decoration: none;
                          border-bottom:4px solid rgba(57,181,74,0);
                          -webkit-transition:all ease 300ms;}


.menu-principal ul li a:hover { color:rgba(60,60,60,1);
                                border-bottom:4px solid rgba(57,181,74,1);
                                 }



.menu-principal ul li a.active { color:rgba(60,60,60,1);
                                border-bottom:4px solid rgba(57,181,74,1);
                                 }









/*
inspired from http://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}



.carousel-control.left {background-image: none;}

.carousel-control.right {background-image: none;}

/* just for demo purpose 
    html,
    body,
    .carousel,
    .carousel-inner,
    .carousel-inner .item {
      height: 100%;
    }

    .item:nth-child(1) {
      background: blue;
    }

    .item:nth-child(2) {
      background: red;
    }

    .item:nth-child(3) {
      background: orange;
    }
*/