@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'marcellusregular';
    src: url('../fonts/marcellus-regular-webfont.woff2') format('woff2'),
         url('../fonts/marcellus-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'marcellus_scregular';
    src: url('../fonts/marcellussc-regular-webfont.woff2') format('woff2'),
         url('../fonts/marcellussc-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@media only screen { /* Define mobile styles */

  body {background: no-repeat right 0 #fff8f2 fixed; font-family:'marcellusregular', serif;}

  /* Columns */
  .columns {padding:0;}

  /* Top bar */
  .top-bar {box-shadow: 0px 0px 3px rgb(34, 31, 31); background: rgba(100, 120, 137, 0.85) none repeat scroll 0% 0%;}
  .top-bar ul {background-color: transparent; z-index: 1;}
  .top-bar a, .top bar a:link, .top-bar a:visited {color:#fff; text-transform:uppercase;}
  .top-bar a.active, .top-bar a:hover {color: #c6ced5;}
  .top-bar-right .inline-list {text-align: right;}
  .top-bar-title {padding: 0; width: 100%;}
  .mobile-title {color:#fff; font-family:'marcellus_scregular', serif; margin-left: 1em;}
  .top-bar-title .menu-icon {top: 2px;float: right;}
  .menu > li {display: list-item; font-size: 0.75em;}
  
  /* List */
  ul {margin-left:0;}
  ul li {list-style: none;}
	ul.inline-list {margin: 0 0 1em;}
	ul.inline-list li {display: inline; list-style: outside none none; margin: 0 1em 0 0 !important;}


	/* Content */
  .callout {background-color: rgba(100, 120, 137, 0.85); color: #fff; margin-bottom: 1.5em; padding: 1em;}
  .callout.primary {margin-top:10px;}
  .audio-callout {border-bottom:solid 1px #fff; padding-bottom:1em; margin-bottom:1em;}

	/* Buttons */
  a, a:visited, a:active, a:focus {color: #212c33;}
  a:hover {color: #212c33; text-decoration: underline;}
  .boton {text-align: center; margin-top: 2em;}
  a.button {font-size: 1rem; text-transform: uppercase;}
  .button.primary {background-color: #647889; color: #fefefe;}
  .button.secondary {background-color: #365266; color: #ffffff; font-size: 0.75em;}
  .button.secondary.active {background-color:#bababa; color:#000;}
	
	/* Texts */
	h1, h2, h3, h4, h5, h6 {font-family:'marcellusregular', serif;}
  h1, h2 {text-transform: uppercase;}
	h1 { font-size: 2em;}
  h2 { font-size: 1.5em;}
  h3 { font-size: 1.17em;}
  h4 { font-size: 1em;} 
  h5 { font-size: 0.83em;} 
  h6 { font-size: 0.67em;}

  .firma {text-align: right;text-transform: uppercase;}

  /* Contenedores */
  #imageSwap {position: fixed; top:0 px; height: 100vh; width: 100%; z-index: -1;}
  .shadow {box-shadow: -5px 0 20px 0 rgba(0,0,0,0.8);}

  /* Galería */
  .gallery img {border: solid 1px #647889;}

  /* Video */
  video {width:100%; height:auto;}
	
	/* Footer */
  #footer {background-color: #335066;margin-top: 2em;position: fixed; bottom: 0; width: 100%; height: 120px; /* choose any height */}
	  
}

@media only screen and (min-width: 30.063em) { /* min-width 481px, medium screens */
  /* Top bar */
  .menu > li {display: table-cell;}
  .mobile-title {display: none;}
  .callout.primary {margin-top:33%;}
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {
	
}

@media only screen and (min-width: 48em) { /* min-width 768px */

  #home-right {min-height: 600px; padding-top: 10%;}
  
  /* Top bar */
  .menu > li {display: table-cell;}
  .title-bar-right {top: 1em;}
  
  /* Columns */
  .columns.quotes {padding-right: 4em !important; padding-left: 4em !important;}
  aside .columns.quotes {padding-top: 4%;}
  .float-right {margin: 0 2em 4em;}
  
}

@media only screen and (min-width: 50.063em) { /* min-width 801px */

   body {background-size: cover;}

   .callout.primary {margin-top: 15%; position: fixed; width: 50%; z-index: -1; padding-right: 2em; text-align: right;}
   .boton {position: absolute; top: 50%; left: 37%;}
   
	/*Top bar */   
   .top-bar {padding:0.5em 15% 0;}

  /* entradilla */
  .entradilla {color:#b70100; max-width:42%; margin:0 auto 2em;}
  #home-right {min-height: 600px; padding-top: 20%;}

}

@media only screen and (min-width: 80em) { /* min-width:1280px */
	#home-right {min-height: 800px; padding-top: 30%;}
}