@font-face {
	font-family: 'GothamRoundedMedium';
	src: url('../fonts/GothamRounded-Medium.eot');
	src: url('../fonts/GothamRounded-Medium.eot?#iefix') format('embedded-opentype'),
		url('../fonts/GothamRounded-Medium.woff') format('woff'),
		url('../fonts/GothamRounded-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'GothamRoundedBook';
	src: url('../fonts/GothamRounded-Book.eot');
	src: url('../fonts/GothamRounded-Book.eot?#iefix') format('embedded-opentype'),
		url('../fonts/GothamRounded-Book.woff') format('woff'),
		url('../fonts/GothamRounded-Book.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GothamRoundedLight';
	src: url('../fonts/GothamRounded-Light.eot');
	src: url('../fonts/GothamRounded-Light.eot?#iefix') format('embedded-opentype'),
		url('../fonts/GothamRounded-Light.woff') format('woff'),
		url('../fonts/GothamRounded-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'GothamRoundedBoldItalic';
	src: url('../fonts/GothamRounded-BoldItalic.eot');
	src: url('../fonts/GothamRounded-BoldItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/GothamRounded-BoldItalic.woff') format('woff'),
		url('../fonts/GothamRounded-BoldItalic.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'GothamRoundedLightItalic';
	src: url('../fonts/GothamRounded-LightItalic.eot');
	src: url('../fonts/GothamRounded-LightItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/GothamRounded-LightItalic.woff') format('woff'),
		url('../fonts/GothamRounded-LightItalic.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: 'GothamRoundedBold';
	src: url('../fonts/GothamRounded-Bold.eot');
	src: url('../fonts/GothamRounded-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/GothamRounded-Bold.woff') format('woff'),
		url('../fonts/GothamRounded-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'GothamRoundedMediumItalic';
	src: url('../fonts/GothamRounded-MediumItalic.eot');
	src: url('../fonts/GothamRounded-MediumItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/GothamRounded-MediumItalic.woff') format('woff'),
		url('../fonts/GothamRounded-MediumItalic.ttf') format('truetype');
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: 'GothamRoundedBookItalic';
	src: url('../fonts/GothamRounded-BookItalic.eot');
	src: url('../fonts/GothamRounded-BookItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/GothamRounded-BookItalic.woff') format('woff'),
		url('../fonts/GothamRounded-BookItalic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
}

body{
	font-family: 'GothamRoundedLight';
}

strong{
	font-family: 'GothamRoundedBold';
}

.h3, h3 {
    font-size: 24px;
    text-align: center;
    font-family: 'GothamRoundedBook';
    text-transform:uppercase;
}

.slides-navigation a.prev {
    left: 0;
    background: url(../imgs/arrow-left.png) no-repeat;
    background-size: contain;
    width: 30px;
    height: 50px;
    margin-left: 10px;
}

.slides-navigation a.next {
    right: 0;
    background: url(../imgs/arrow-right.png) no-repeat;
    width: 30px;
    height: 50px;
    background-size: contain;
    margin-right: 10px;
}

.slides-pagination{
	display:none;
}

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(255,202,8);
    background-color: #ffca08;
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 42px;
    color: #000;
    display: block;
    transition: 0.3s;
    font-family: 'GothamRoundedBold';
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #767676;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/*HEADER*/

.navbar-right:hover {
    cursor: pointer;
}

header {
  width: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 999;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  -ms-transition: height 0.3s;
  -o-transition: height 0.3s;
  transition: height 0.3s; }
header .navbar-brand {
    font-family: "Oswald", sans-serif;
    font-size: 60px;
    color: white;
    font-weight: 400;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    text-indent: -999px;
    background: url(../imgs/la-brujula-logo.svg) no-repeat;
    width: 353px;
    background-size: contain;
    height: 120px;
}
nav header {
    display: inline-block;
    float: right; }
nav header .navbar-brand {
  line-height: 150px;
  margin-left: 20px;
  color: #9fdbfc;
  font-weight: 700;
  font-size: 18px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }
nav header.smaller .navbar-brand{
    width: 220px; }

.navbar-default {
    background-color: transparent;
    border-color: transparent;
}

.navbar-default.scrolled {
    background: rgba(208, 207, 207,1);
    height:87px;
}

.navbar-default.entrevistas {
    background: rgba(208, 207, 207,1);
    height:87px;
}

.navbar-default.entrevistas .navbar-brand{
    width: 220px;
  }


.caption {
    position: absolute;
    top: 40%;
    left: 5em;
    padding: 30px;
    max-width: 420px;
}

.caption.right {
    right: 5em;
    left:auto;
    text-align:right;
    top:48%;
}


.caption small {
    font-size: 11px;
    font-family: 'GothamRoundedMedium';
    text-transform: uppercase;
}

.caption h3 {
    font-size: 24px;
    font-family: 'GothamRoundedMedium';
    line-height: 33px;
    text-align:left;
}

.caption.right h3{
  text-align:right;
}

.caption i{
  font-size:19px;
  font-family: 'GothamRoundedBookItalic';
}

.home {
    background: #ffca08 url(../imgs/brujula.png) no-repeat right bottom;
    padding: 100px 40px;
}

.home p.text-center, .nosotros p.text-center {
    font-size: 25px;
    line-height: 35px;
    font-family: 'GothamRoundedBook';
    max-width: 860px;
    margin: auto;
    margin-bottom: 30px;
}

.container{
    padding-top: 70px;
}

nav.navbar.navbar-default.navbar-fixed-top.scrolled .container,nav.navbar.navbar-default.navbar-fixed-top .container {
    padding-top: 0;
}

.nosotros .container{
  max-width:860px;
}
.servicios, .relatos {
    padding: 50px;
}

.servicios .col-md-4 {
    text-align: center;
    padding: 30px;
}

.img {
    height: 150px;
    padding: 10px;
}

.img img{
  vertical-align: bottom;
  margin: auto;
  max-width:125px;
}

h4.violet {
    background: #4f004c;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    font-family: 'GothamRoundedMedium';
    width: 234px;
    margin: auto;
    padding: 7px;
    margin-bottom: 15px;
}

h4.green{
  background:#035f28;
  color: #fff;
  font-size: 18px;
  text-transform: uppercase;
  font-family: 'GothamRoundedMedium';
  width: 234px;
  margin: auto;
  padding: 7px;
  margin-bottom: 15px;
}

h4.cian{
  background:#0093ca;
  color: #fff;
  font-size: 18px;
  text-transform: uppercase;
  font-family: 'GothamRoundedMedium';
  width: 234px;
  margin: auto;
  padding: 7px;
  margin-bottom: 15px;
}

.text {
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 10px;
}

.nosotros{
  background:#ffca08;
  padding:100px 40px;
}

.nosotros p {
    font-size: 16px;
    font-family: 'GothamRoundedBook';
}

.nosotros strong {
    font-size: 19px;
}

.nosotros .col-md-12.center-block {
    margin-top: 60px;
}

.col-md-6.relato, .col-md-12.relato {
    height: 230px;
    background: #ddd;
    padding: 40px;
    margin: 0;
    color: #fff;
}

.col-md-6.relato-img,.col-md-12.relato-img {
    padding: 0;
    height: 230px;
    overflow: hidden;
}

.col-md-12.relato-img{
  height:224px;
}

.box {
    height: 243px;
}

.col-md-6.relato-img img,.col-md-12.relato-img img {
    min-width: 100%;
}

.box.col-md-4 {
    padding: 0;
}

.col-md-6.relato.violet {
    background: #92278f;
}

.col-md-6.relato.yellow {
    background: #ffcb08;
}

.col-md-12.relato.cian {
    background: #0093ca;
    height: 249px;
}

.relato small {
    font-size: 14px;
}

.relato p {
    font-size: 18px;
}

.relato strong {
    font-size: 20px;
}

.relatos .col-md-8, .relatos .col-md-4 {
    margin-top: 40px;
}

footer {
    background: #d0cfcf;
    padding: 60px 0;
}

img.img-responsive.logo-footer {
    height: 133px;
    margin: auto;
}

footer .col-xs-2{
  padding:0;
}

h5.title {
    font-family: 'GothamRoundedMedium';
    margin-top: 38px;
    margin-bottom: 26px;
}

div#entrevista.violet {
    background: #92278f;
}

div#entrevista.yellow{
  background: #ffca08
}

div#entrevista.cian{
  background: #0093ca
}

.col-md-9.pull-right {
    background: #fff;
    padding: 50px;
}

div#entrevista h2 {
    font-size: 25px;
}

div#entrevista h4 {
    font-size: 19px;
    font-family: 'GothamRoundedBold';
}

div#entrevista h5{
  color:#6d6e71;
  font-family: 'GothamRoundedMedium';
  font-size:19px;
}

div#entrevista p{
  font-size:16px;
  color:#808285;
  line-height: 24px;
}

.col-xs-12.col-md-12.lineablocks {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: -39px;
}

.lineablocks.der {
    margin-left: 15px;
}

.lineablocks.der .col-md-4 {
    width: 32%;
}

.lineablocks.der .col-md-8 {
    width: 68%;
}

.lineablocks.der .col-md-6.relato-img {
    width: 47%;
}

.lineablocks.der .col-md-6.relato.green,.lineablocks.der .col-md-6.relato.yellow {
    width: 53%;
    height: 224px;
}

.lineablocks.der .box {
    height: 239px;
}

.lineablocks.der .col-md-12.relato.cian {
    height: 240px;
}

.col-md-6.relato.green {
    background: #006633;
}

div#entrevista {
    background: #006633;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}


@media (min-width:768px){
	.navbar-right {
    margin-top: 30px;
    color: #767676;
	}
}

@media (min-width:767px) and (max-width:980px){
  .container {
    width: auto !important;
  }
  footer .col-md-3 .title.text-right {
    margin-top: 213px !important;
    text-align: left !important;
  }
  footer .col-xs-2 {
    width: 9.666667%;
  }
}


@media (max-width:1200px){
  .col-md-6.relato {
    height: 192px;
  }
  .col-md-6.relato-img, .col-md-12.relato-img{
    height:192px;
  }
  .box {
    height: 205px;
  }
  .col-md-12.relato-img {
    height: 201px;
  }
  .col-md-12.relato.cian {
    height: 196px;
  }
  .lineablocks.der .col-md-6.relato.green, .lineablocks.der .col-md-6.relato.yellow {
    width: 53%;
    height: 184px;
  }
  .lineablocks.der .box {
    height: 197px;
  }
  .lineablocks.der .col-md-12.relato.cian {
    height: 188px;
    margin-top: -8px;
  }
  .relato p {
    font-size: 13px;
  }
  .col-md-6.relato, .col-md-12.relato{
    padding:30px;
  }
}

@media (max-width:992px){
  .box {
    height: auto;
    margin-bottom: 15px;
  }
  .col-md-6.relato-img, .col-md-12.relato-img {
    height: auto;
  }

  .col-md-6.relato {
    height: auto;
  }
  .col-md-12.relato-img {
    height: auto;
  }
  .col-md-12.relato.cian {
    height: auto;
  }
  .relatos .col-md-8{
  padding:0;
  }
  .navbar-default.entrevistas .navbar-brand {
    width: 209px;
    margin-left: 0;
  }
  .navbar-right {
    max-width: 100px;
    float: right;
    margin-top: 26px;
  }
  .overlay a{
    font-size:27px;
  }
  footer .col-xs-2 {
    padding: 8px;
  }
  footer .col-md-3 .title.text-right {
    margin-top: 111px;
    text-align: left;
  }
  header .navbar-brand{
    width: 253px;
    height: auto;
  }
  nav header .navbar-brand {
    margin-left: 0;
  }
  .caption {
    top: 39%;
    left: 2em;
  }
  .caption.right {
    right: auto;
    left: 5em;
    text-align: left;
    top: 31%;
  }
  .caption.right h3 {
    text-align: left;
  }
  #nosotros .col-md-4 img {
    margin-bottom: 24px;
  }
  .home p.text-center, .nosotros p.text-center{
    font-size:20px;
  }
  footer p.text-right {
    text-align: left;
  }
  .lineablocks.der .col-md-4 {
    width: 100%;
    margin-top: 54px;
  }
  .lineablocks.der {
    margin-left: 0;
  }
  .lineablocks.der .col-md-8 {
    width: 100%;
    margin-top: 16px;
  }
  .lineablocks.der .col-md-6.relato-img {
    width: 100%;
  }
  .lineablocks.der .col-md-6.relato.green, .lineablocks.der .col-md-6.relato.yellow {
    width: 100%;
    height: auto;
  }
  .relatos .col-md-8, .relatos .col-md-4 {
    margin-top: 0;
  }
  footer#contacto {
    margin-top: 50px;
  }
  .col-md-6.col-xs-12.relato.green {
    margin-bottom: 22px;
  }
  div#entrevista h2 {
    font-size: 22px;
  }
  div#entrevista .col-xs-3 {
    position: absolute;
    width: 132px;
    right: 0;
  }
  div#entrevista .col-md-9.pull-right {
    background: #fff;
    padding: 40px 14px;
  }
}

@media screen and (max-width:500px){
  header .navbar-brand {
    width: 184px;
    height: auto;
    margin-top: 9px;
  }
  .caption {
    top: 28%;
    left: 1em;
  }
  .caption.right {
    right: auto;
    left: 1em;
    text-align: left;
    top: 31%;
  }
  .servicios, .relatos {
    padding: 16px;
  }
  nav header.smaller .navbar-brand {
    width: 177px;
  }
}