/*
  FONTS
*/
@font-face {
  font-family: 'Playfair Display';
  src: url("../fonts/playfairdisplay-black-webfont.eot");
  src: url("../fonts/playfairdisplay-black-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/playfairdisplay-black-webfont.woff2") format("woff2"), url("../fonts/playfairdisplay-black-webfont.woff") format("woff"), url("../fonts/playfairdisplay-black-webfont.ttf") format("truetype"), url("../fonts/playfairdisplay-black-webfont.svg#playfair_displayblack") format("svg");
  font-weight: 900;
  font-style: normal; }
@font-face {
  font-family: 'Playfair Display';
  src: url("../fonts/playfairdisplay-blackitalic-webfont.eot");
  src: url("../fonts/playfairdisplay-blackitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/playfairdisplay-blackitalic-webfont.woff2") format("woff2"), url("../fonts/playfairdisplay-blackitalic-webfont.woff") format("woff"), url("../fonts/playfairdisplay-blackitalic-webfont.ttf") format("truetype"), url("../fonts/playfairdisplay-blackitalic-webfont.svg#playfair_displayblack_italic") format("svg");
  font-weight: 900;
  font-style: italic; }
@font-face {
  font-family: 'Playfair Display';
  src: url("../fonts/playfairdisplay-bolditalic-webfont.eot");
  src: url("../fonts/playfairdisplay-bolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/playfairdisplay-bolditalic-webfont.woff2") format("woff2"), url("../fonts/playfairdisplay-bolditalic-webfont.woff") format("woff"), url("../fonts/playfairdisplay-bolditalic-webfont.ttf") format("truetype"), url("../fonts/playfairdisplay-bolditalic-webfont.svg#playfair_displaybold_italic") format("svg");
  font-weight: 700;
  font-style: italic; }
@font-face {
  font-family: 'Playfair Display';
  src: url("../fonts/playfairdisplay-italic-webfont.eot");
  src: url("../fonts/playfairdisplay-italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/playfairdisplay-italic-webfont.woff2") format("woff2"), url("../fonts/playfairdisplay-italic-webfont.woff") format("woff"), url("../fonts/playfairdisplay-italic-webfont.ttf") format("truetype"), url("../fonts/playfairdisplay-italic-webfont.svg#playfair_displayitalic") format("svg");
  font-weight: normal;
  font-style: italic; }
@font-face {
  font-family: 'Playfair Display';
  src: url("../fonts/playfairdisplay-regular-webfont.eot");
  src: url("../fonts/playfairdisplay-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/playfairdisplay-regular-webfont.woff2") format("woff2"), url("../fonts/playfairdisplay-regular-webfont.woff") format("woff"), url("../fonts/playfairdisplay-regular-webfont.ttf") format("truetype"), url("../fonts/playfairdisplay-regular-webfont.svg#playfair_displayregular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/opensans-bold-webfont.eot");
  src: url("../fonts/opensans-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans-bold-webfont.woff2") format("woff2"), url("../fonts/opensans-bold-webfont.woff") format("woff"), url("../fonts/opensans-bold-webfont.ttf") format("truetype"), url("../fonts/opensans-bold-webfont.svg#open_sansbold") format("svg");
  font-weight: 700;
  font-style: normal; }
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/opensans-semibold-webfont.eot");
  src: url("../fonts/opensans-semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans-semibold-webfont.woff2") format("woff2"), url("../fonts/opensans-semibold-webfont.woff") format("woff"), url("../fonts/opensans-semibold-webfont.ttf") format("truetype"), url("../fonts/opensans-semibold-webfont.svg#open_sanssemibold") format("svg");
  font-weight: 600;
  font-style: normal; }
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/opensans-extrabold-webfont.eot");
  src: url("../fonts/opensans-extrabold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans-extrabold-webfont.woff2") format("woff2"), url("../fonts/opensans-extrabold-webfont.woff") format("woff"), url("../fonts/opensans-extrabold-webfont.ttf") format("truetype"), url("../fonts/opensans-extrabold-webfont.svg#open_sansextrabold") format("svg");
  font-weight: 800;
  font-style: normal; }
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/opensans-regular-webfont.eot");
  src: url("../fonts/opensans-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans-regular-webfont.woff2") format("woff2"), url("../fonts/opensans-regular-webfont.woff") format("woff"), url("../fonts/opensans-regular-webfont.ttf") format("truetype"), url("../fonts/opensans-regular-webfont.svg#open_sansregular") format("svg");
  font-weight: normal;
  font-style: normal; }
/*
	NORMALIZE
*/
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

*:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
  display: block; }

audio, canvas, video {
  display: inline-block; }

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  margin: 0;
  text-align: center; }

a {
  text-decoration: none;
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1); }

a:hover, a:focus, a:active {
  text-decoration: none;
  outline: none; }

b, strong {
  font-weight: bold; }

code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em; }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

small {
  font-size: 80%; }

img {
  border: 0;
  display: inline-block;
  max-width: 100%; }

figure {
  margin: 0; }

ul, ol {
  padding: 0; }

ul, li {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
  margin-top: 0; }

ol li {
  list-style-type: decimal; }

p {
  line-height: 1em;
  margin-bottom: 0;
  margin-top: 0; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  margin-top: 0;
  margin-bottom: 0; }

blockquote {
  margin: 0;
  padding: 0; }

/* 
  CONTAINER
*/
.container {
  width: 100%;
  max-width: 1918px;
  margin: 0 auto; }

/* 
  HEADER
*/
.header {
  padding: 30px 45px 35px;
  position: relative;
  overflow: hidden; }
@media only screen and (max-width: 767px) {
  .header {
    padding: 20px; } }
.header__logo {
  float: left;
  width: 135px;
  height: 29px; }
.header__tools {
  position: fixed;
  top: 35px;
  right: 45px;
  z-index: 99; }
@media only screen and (max-width: 767px) {
  .header__tools {
    top: 0;
    right: 0;
    padding: 23px 20px 10px 10px; } }
.header__tools a {
  display: inline-block; }
@media only screen and (max-width: 767px) {
  .header__tools a {
    display: block; } }
.header__tools a#toggle-sharer {
  padding: 6px;
  margin-right: 6px;
  margin-top: -6px;
  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  float: left; }
@media only screen and (max-width: 767px) {
  .header__tools a#toggle-sharer {
    margin-top: 0;
    float: none; } }

svg.hamburger line {
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1); }
body.active-menu svg.hamburger .line1 {
  transform: rotate(-45deg) scale(0.8);
  transform-origin: 30px 17px; }
body.active-menu svg.hamburger .line2 {
  opacity: 0;
  visibility: hidden; }
body.active-menu svg.hamburger .line3 {
  transform: rotate(45deg) scale(0.8);
  transform-origin: 30px 15px; }

html.ie9 body.active-menu svg.hamburger .line2 {
  opacity: 1;
  visibility: visible; }

/* 
  FOOTER
*/
.footer {
  background: white;
  padding: 70px 0;
  text-align: center;
  position: relative; }
@media only screen and (max-width: 767px) {
  .footer {
    padding: 40px; } }
.footer p {
  color: black;
  font-size: 13px;
  line-height: 17px;
  font-weight: normal;
  font-family: "Open Sans"; }
.footer > p {
  margin-bottom: 50px;
  text-transform: uppercase; }

.credits {
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  padding-top: 40px;
  visibility: hidden;
  opacity: 0;
  text-align: center; }
.credits.active {
  visibility: visible;
  opacity: 1;
  position: relative;
  left: auto; }
.credits p {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  margin-bottom: 15px; }
.credits a {
  color: #0f1427; }

body#cervantes p a:hover, body#cervantes p a:focus {
  color: #67cbb8; }

body#shakespeare p a:hover, body#shakespeare p a:focus {
  color: #3eafbd; }

body#comun p a:hover, body#comun p a:focus {
  color: #e0b318; }

body#shakespeare .footer {
  background: #f6f3ef; }

/* 
  INTRO
*/
.intro {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 60px; }
@media only screen and (max-width: 767px) {
  .intro {
    padding-top: 95px; } }
.intro__image {
  position: relative; }
.intro__image img {
  display: block; }
.intro__area {
  padding-top: 30px; }
@media only screen and (max-width: 767px) {
  .intro__area {
    padding-top: 15px; } }
.intro__title {
  color: white;
  font-size: 32px;
  line-height: 36px;
  font-family: "Playfair Display";
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 37px;
  display: inline-block;
  position: relative;
  text-align: center;
  margin-top: 50px; }
@media only screen and (max-width: 767px) {
  .intro__title {
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 13px;
    margin-bottom: 65px; } }
.intro__title:after {
  content: "";
  background: white;
  height: 2px;
  width: 95%;
  position: absolute;
  bottom: -22px;
  left: 0; }
.intro__subtitle {
  color: #0f1427;
  font-size: 46px;
  line-height: 64px;
  font-family: "Playfair Display";
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  width: 85%;
  margin: 0 auto;
  display: block; }
@media only screen and (max-width: 767px) {
  .intro__subtitle {
    font-size: 26px;
    line-height: 30px; } }
.intro__subtitle strong {
  display: block;
  font-weight: 700; }
.intro__link {
  color: white;
  font-size: 30px;
  font-weight: normal;
  line-height: 35px;
  font-family: "Playfair Display";
  text-transform: uppercase;
  display: block; }
.ie9 .intro__link {
  background: url("../../images/blank.gif") repeat scroll 0 0 transparent; }
@media only screen and (max-width: 767px) {
  .intro__link {
    font-size: 20px;
    line-height: 22px; } }
.intro .intro__link-1, .intro .intro__link-2 {
  position: absolute;
  width: 25%;
  height: 30%;
  text-align: left;
  padding-top: 40px;
  top: 35%;
  left: 0; }
@media only screen and (max-width: 767px) {
  .intro .intro__link-1, .intro .intro__link-2 {
    width: 50%;
    height: 100%;
    top: 0;
    padding-top: 17%; } }
.intro .intro__link-2 {
  text-align: right;
  right: 0;
  left: auto; }
.intro .intro__link-3 {
  padding: 20px 0 0;
  width: 30%;
  margin: 0 auto; }
.intro .intro__link-1:before {
  content: "";
  display: block;
  width: 0;
  border-right: 27px solid white;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  float: left;
  margin-right: 20px; }
@media only screen and (max-width: 767px) {
  .intro .intro__link-3 {
    width: auto; }
  .intro .intro__link-1:before {
    border-right-width: 17px;
    border-top-width: 10px;
    border-bottom-width: 10px;
    margin-right: 10px; } }
.intro .intro__link-2:after {
  content: "";
  display: block;
  width: 0;
  border-left: 27px solid white;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  float: right;
  margin-left: 20px; }
@media only screen and (max-width: 767px) {
  .intro .intro__link-2:after {
    border-left-width: 17px;
    border-top-width: 10px;
    border-bottom-width: 10px;
    margin-left: 10px; } }
.intro .intro__link-3:after {
  content: "";
  display: block;
  width: 0;
  border-top: 27px solid white;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  margin: 12px auto 0; }
@media only screen and (max-width: 767px) {
  .intro .intro__link-3:after {
    border-top-width: 17px;
    border-left-width: 10px;
    border-right-width: 10px;
    margin-top: 10px;
    margin-bottom: 20px; } }

/* 
  PANEL
*/
.panel {
  position: fixed;
  z-index: 98;
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); }
.panel__left, .panel__right {
  width: 60%;
  max-width: 515px;
  padding: 200px 87px 0px;
  top: 0;
  bottom: 0;
  max-height: 100%;
  overflow-y: auto; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .panel__left, .panel__right {
    padding: 200px 40px 40px; } }
@media only screen and (max-width: 767px) {
  .panel__left, .panel__right {
    display: none; } }
.panel__left {
  left: -515px; }
.panel__left:before {
  content: "";
  display: block;
  width: 0;
  border-right: 27px solid #eeeded;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  position: absolute;
  right: 0px;
  top: 5%; }
.panel__right {
  right: -515px; }
.panel__right:before {
  content: "";
  display: block;
  width: 0;
  border-left: 27px solid #eeeded;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  position: absolute;
  left: 0px;
  top: 5%; }
.panel__bottom {
  bottom: -55%;
  width: 100%;
  padding: 80px;
  left: 0;
  right: 0;
  height: 55%;
  text-align: center; }
.panel__bottom:before {
  content: "";
  display: block;
  width: 0;
  border-top: 27px solid #eeeded;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  position: absolute;
  left: 50%;
  margin-left: -18px;
  top: 0; }
.panel__title {
  color: #0f1427;
  font-size: 50px;
  line-height: 54px;
  font-family: "Playfair Display";
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  display: block;
  text-align: left;
  margin-bottom: 25px; }
.panel__subtitle {
  color: #0f1427;
  font-size: 20px;
  line-height: 30px;
  font-family: "Playfair Display";
  font-weight: normal;
  font-style: italic;
  display: block;
  text-align: left; }
.panel__subtitle.white {
  color: white;
  text-align: center; }
.panel__image {
  display: block;
  margin-top: 25px; }

body.active-left, body.active-right, body.active-bottom {
  overflow: hidden; }

body.active-left .panel__left {
  left: 0; }

body.active-right .panel__right {
  right: 0; }

body.active-bottom .panel__bottom {
  bottom: 0; }
body.active-bottom .panel__bottom .panel__title, body.active-bottom .panel__bottom .panel__subtitle {
  text-align: center; }

/* 
  BUTTONS
*/
.button {
  -moz-border-radius: 29px;
  -webkit-border-radius: 29px;
  border-radius: 29px;
  background: white;
  padding: 15px 30px;
  color: #0f1427;
  font-size: 24px;
  line-height: 27px;
  font-family: "Playfair Display";
  font-weight: normal;
  font-style: italic;
  display: inline-block;
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); }
.button:hover, .button:focus {
  background: #f2f2f2; }
.button--basic {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  color: white;
  font-family: "Open Sans";
  font-weight: 700;
  font-style: normal;
  background: #0f1427; }
.button--basic:hover, .button--basic:focus {
  background: #1d274c; }
.button--border {
  border: 4px solid #67cbb8;
  background: transparent;
  color: black;
  font-family: "Open Sans";
  font-weight: 700;
  font-style: normal; }
.button--border:hover, .button--border:focus {
  background: transparent;
  border-color: #8dd8ca; }
body#shakespeare .button--border {
  border-color: #3eafbd; }
body#shakespeare .button--border:hover, body#shakespeare .button--border:focus {
  border-color: #62c0cc; }
body#comun .button--border {
  border-color: #e0b318; }
body#comun .button--border:hover, body#comun .button--border:focus {
  border-color: #ebc440; }
.button--small {
  font-size: 13px;
  line-height: 16px;
  text-transform: uppercase;
  padding: 8px 21px; }
.button--tiny {
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  padding: 4px 10px; }

/* 
  CHAPTER
*/
.chapter {
  clear: both;
  width: 100%;
  padding-top: 50px;
  padding-bottom: 80px; }
#shakespeare .chapter-one .chapter__resume {
  padding-top: 62px;
  min-height: 230px;
  margin-bottom: 30px; }
@media only screen and (max-width: 767px) {
  #shakespeare .chapter-one .chapter__resume {
    padding-top: 0;
    min-height: 50px;
    margin-bottom: 60px; } }
.chapter-two {
  background: #f6f3ef;
  padding-top: 225px;
  padding-bottom: 270px; }
.chapter-two .post {
  padding: 0 15%; }
@media only screen and (max-width: 767px) {
  .chapter-two .post {
    padding: 0; } }
.chapter-three {
  background: #f6f3ef;
  padding-top: 215px;
  padding-bottom: 230px; }
.chapter-three .post {
  padding: 0 20%; }
@media only screen and (max-width: 767px) {
  .chapter-three .post {
    padding: 0; } }
#cervantes .chapter-four, #shakespeare .chapter-four {
  padding-top: 115px;
  padding-bottom: 120px; }
@media only screen and (max-width: 767px) {
  #cervantes .chapter-four, #shakespeare .chapter-four {
    padding-top: 50px;
    padding-bottom: 80px; } }
#cervantes .chapter-four .chapter__number, #shakespeare .chapter-four .chapter__number {
  float: left;
  margin-bottom: 45px; }
@media only screen and (max-width: 767px) {
  #cervantes .chapter-four .chapter__number, #shakespeare .chapter-four .chapter__number {
    float: none;
    margin-bottom: 60px; } }
#cervantes .chapter-four .chapter__resume, #shakespeare .chapter-four .chapter__resume {
  border-bottom: none;
  width: 55%;
  clear: both;
  float: left;
  padding-left: 180px;
  padding-top: 37px; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  #cervantes .chapter-four .chapter__resume, #shakespeare .chapter-four .chapter__resume {
    float: none;
    width: 80%;
    padding-top: 65px;
    margin-bottom: 70px; } }
@media only screen and (max-width: 767px) {
  #cervantes .chapter-four .chapter__resume, #shakespeare .chapter-four .chapter__resume {
    float: none;
    width: auto;
    padding-top: 0;
    padding-left: 0;
    margin-bottom: 60px; } }
#cervantes .chapter-four .chapter__resume strong, #shakespeare .chapter-four .chapter__resume strong {
  font-size: 235px; }
@media only screen and (max-width: 767px) {
  #cervantes .chapter-four .chapter__resume strong, #shakespeare .chapter-four .chapter__resume strong {
    font-size: 90px;
    line-height: 100px; } }
#cervantes .chapter-four .post-list, #shakespeare .chapter-four .post-list {
  float: right;
  width: 34%;
  text-align: left;
  margin-top: 40px;
  margin-bottom: 20px;
  z-index: 9;
  position: relative; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  #cervantes .chapter-four .post-list, #shakespeare .chapter-four .post-list {
    float: none;
    width: auto;
    margin-top: 0; } }
@media only screen and (max-width: 767px) {
  #cervantes .chapter-four .post-list, #shakespeare .chapter-four .post-list {
    float: none;
    width: auto; } }
#cervantes .chapter-four .post__title, #shakespeare .chapter-four .post__title {
  font-size: 24px;
  line-height: 28px; }
#cervantes .chapter-four .post__content, #shakespeare .chapter-four .post__content {
  font-size: 14px;
  line-height: 18px; }
.chapter-five {
  background: #f6f3ef;
  padding-top: 215px;
  padding-bottom: 230px; }
.chapter-five .post {
  padding: 0 20%; }
@media only screen and (max-width: 767px) {
  .chapter-five .post {
    padding: 0; } }
.chapter-five .chapter__resume--alt {
  padding: 0 28%;
  font-size: 40px;
  line-height: 50px; }
@media only screen and (max-width: 767px) {
  .chapter-five .chapter__resume--alt {
    padding: 0;
    font-size: 26px;
    line-height: 34px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .chapter {
    padding: 100px 0; } }
@media only screen and (max-width: 767px) {
  .chapter {
    padding: 60px 0; } }
.chapter__wrapper {
  width: 80%;
  max-width: 970px;
  margin: 0 auto; }
.chapter-two .chapter__wrapper {
  text-align: left; }
@media only screen and (max-width: 767px) {
  .chapter-two .chapter__wrapper {
    text-align: center; } }
.chapter__number {
  color: #0f1427;
  font-size: 30px;
  font-family: "Playfair Display";
  font-weight: normal;
  line-height: 44px;
  margin-bottom: 20px;
  position: relative;
  display: block; }
@media only screen and (max-width: 767px) {
  .chapter__number {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 60px; } }
.chapter__number:after {
  content: '';
  display: block;
  background: black;
  width: 30px;
  height: 1px;
  position: absolute;
  bottom: -15px;
  left: 50%;
  margin-left: -15px; }
.chapter-two .chapter__number {
  display: inline-block;
  margin-bottom: 100px;
  margin-left: 150px; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .chapter-two .chapter__number {
    margin-left: 0; } }
@media only screen and (max-width: 767px) {
  .chapter-two .chapter__number {
    margin-left: auto;
    margin-bottom: 60px; } }
.chapter-three .chapter__number {
  margin-bottom: 50px; }
.chapter__resume {
  color: #0f1427;
  font-size: 40px;
  font-family: "Playfair Display";
  font-weight: normal;
  line-height: 50px;
  text-transform: uppercase;
  padding-left: 245px;
  padding-top: 45px;
  margin-bottom: 85px;
  text-align: left;
  position: relative; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .chapter__resume {
    font-size: 28px;
    line-height: 38px;
    padding-left: 200px; } }
@media only screen and (max-width: 767px) {
  .chapter__resume {
    font-size: 26px;
    line-height: 34px;
    padding-left: 0;
    padding-top: 0px;
    margin-bottom: 60px;
    text-align: center; } }
.chapter__resume strong {
  color: #0f1427;
  font-size: 315px;
  font-family: "Playfair Display";
  font-weight: normal;
  line-height: 325px;
  text-transform: uppercase;
  position: absolute;
  top: -55px;
  left: 0; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .chapter__resume strong {
    font-size: 260px;
    line-height: 250px;
    top: -10px; } }
@media only screen and (max-width: 767px) {
  .chapter__resume strong {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    margin-bottom: 0px;
    text-align: center;
    font-size: 200px;
    line-height: 210px; } }
.chapter__resume--alt {
  padding: 0 35%;
  text-align: center;
  border-bottom: none;
  margin-bottom: 70px;
  font-size: 50px;
  line-height: 62px; }
@media only screen and (max-width: 767px) {
  .chapter__resume--alt {
    padding: 0 5%;
    font-size: 26px;
    line-height: 34px; } }
.chapter__resume--alt strong {
  position: relative;
  top: auto;
  left: auto;
  display: block;
  color: #67cbb8;
  line-height: 315px; }
body#shakespeare .chapter__resume--alt strong {
  color: #3eafbd; }
body#comun .chapter__resume--alt strong {
  color: #e0b318; }
@media only screen and (max-width: 767px) {
  .chapter__resume--alt strong {
    font-size: 200px;
    line-height: 210px; } }
.chapter__image-resume {
  margin-bottom: 160px;
  padding-left: 60px;
  padding-right: 60px;
  overflow: hidden; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .chapter__image-resume {
    padding: 0; } }
@media only screen and (max-width: 767px) {
  .chapter__image-resume {
    padding: 0;
    margin-bottom: 60px;
    overflow: visible;
    text-align: center; } }
.chapter__image-resume .image {
  float: left;
  width: 37%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .chapter__image-resume .image {
    width: 32%; } }
@media only screen and (max-width: 767px) {
  .chapter__image-resume .image {
    width: 80%;
    margin: 0 auto;
    float: none; } }
.chapter__image-resume .resume {
  float: right;
  width: 62%;
  margin-top: 80px;
  color: #0f1427;
  font-size: 40px;
  font-family: "Playfair Display";
  font-weight: normal;
  line-height: 50px;
  text-transform: uppercase;
  text-align: left; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .chapter__image-resume .resume {
    font-size: 28px;
    line-height: 38px;
    margin-top: 50px; } }
@media only screen and (max-width: 767px) {
  .chapter__image-resume .resume {
    width: auto;
    float: none;
    font-size: 26px;
    line-height: 34px;
    margin-top: 10px;
    text-align: center; } }
.chapter__image-resume .resume span {
  display: block; }
.chapter__image-resume--alt {
  padding: 0;
  text-align: center;
  margin: 0 26% 140px; }
@media only screen and (max-width: 767px) {
  .chapter__image-resume--alt {
    margin: 0 10% 60px; } }
.chapter__image-resume--alt .image {
  float: none;
  width: auto;
  display: block;
  margin: 0 auto 30px; }
.chapter__image-resume--alt .resume {
  float: none;
  width: auto;
  text-align: center;
  margin: 0; }
@media only screen and (max-width: 767px) {
  .chapter__image-resume--alt .resume {
    font-size: 26px;
    line-height: 34px; } }
.chapter__video {
  margin-bottom: 60px; }
.chapter__video-2 .boton_video {
  background: url("../../images/icons/play.png") no-repeat 10% 83%;
}
.chapter__video-1 .boton_video {
  /*background: url("../../images/placeholder-video.jpg") no-repeat 10% 70%;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;*/
  background: url("../../images/icons/play.png") no-repeat 10% 83%; }

body#comun .chapter-one {
  /*background: url('../../images/semicolon.png') no-repeat 90% 75%;*/ }
body#comun .chapter-one .chapter__resume {
  margin: 0 6% 120px; }
body#comun .chapter-one .post-list {
  margin: 0 8%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#comun .chapter-one .post-list {
    margin: 0 5%; } }
@media only screen and (max-width: 767px) {
  body#comun .chapter-one .post-list {
    margin: 0; } }
body#comun .chapter-two {
  background: white;
  padding-top: 160px; }
body#comun .chapter-two .chapter__number {
  display: block;
  margin-left: 0;
  text-align: center;
  margin-bottom: 140px; }
body#comun .chapter-two .chapter__image-resume--alt {
  margin-bottom: 80px; }
body#comun .chapter-two .post {
  text-align: center; }
body#comun .chapter-three {
  padding-bottom: 0;
  padding-top: 90px; }
body#comun .chapter-three .post-list {
  margin: 0 12% 110px; }
@media only screen and (max-width: 767px) {
  body#comun .chapter-three .post-list {
    margin: 0 0 60px; } }
body#comun .chapter-three .post-list .post {
  padding-left: 0;
  padding-right: 0; }
body#comun .chapter-three .chapter__resume {
  margin-left: 15%;
  margin-right: 10%;
  margin-bottom: 110px; }
@media only screen and (max-width: 767px) {
  body#comun .chapter-three .chapter__resume {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 60px; } }
body#comun .chapter-three .chapter__resume span {
  display: block; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#comun .chapter-three .chapter__wrapper {
    width: 94%; } }
body#comun .chapter-four .chapter__resume {
  margin: 0 3% 140px; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#comun .chapter-four .chapter__resume {
    margin-left: 0;
    margin-right: 0; } }
@media only screen and (max-width: 767px) {
  body#comun .chapter-four .chapter__resume {
    margin-bottom: 60px; } }
@media only screen and (max-width: 767px) {
  body#comun .chapter-four .chapter__resume strong {
    margin-bottom: 20px; } }
body#comun .chapter-four .chapter__resume span {
  display: block; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#comun .chapter-four .chapter__resume span {
    display: inline-block; } }
body#comun .chapter-four .post-list {
  margin: 0 18%;
  text-align: center; }
@media only screen and (max-width: 767px) {
  body#comun .chapter-four .post-list {
    margin: 0; } }
body#comun .chapter-five {
  background: white;
  padding-top: 0; }
body#comun .chapter-five .chapter__wrapper {
  background: url("../../images/trovador.jpg") no-repeat left top;
  padding-top: 170px; }
@media only screen and (max-width: 767px) {
  body#comun .chapter-five .chapter__wrapper {
    background: none;
    padding-top: 60px; } }
body#comun .chapter-five .chapter__number {
  margin-bottom: 60px; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#comun .chapter-five .chapter__number {
    padding-left: 20%; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#comun .chapter-five .chapter__number:after {
    margin-left: 50px; } }
body#comun .chapter-five .chapter__resume {
  margin: 0 12% 160px;
  padding-top: 20px; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#comun .chapter-five .chapter__resume {
    margin-right: 0;
    margin-left: 20%; } }
@media only screen and (max-width: 767px) {
  body#comun .chapter-five .chapter__resume {
    padding-top: 0;
    margin-bottom: 100px; } }
body#comun .chapter-five .chapter__resume strong {
  color: #e0b318; }
body#comun .chapter-six {
  padding-top: 160px;
  padding-bottom: 160px; }
@media only screen and (max-width: 767px) {
  body#comun .chapter-six {
    padding-top: 50px;
    padding-bottom: 80px; } }
body#comun .chapter-six .chapter__number {
  margin-bottom: 60px; }
body#comun .chapter-six .chapter__image-resume--alt {
  margin: 0 20% 80px; }
@media only screen and (max-width: 767px) {
  body#comun .chapter-six .chapter__image-resume--alt {
    margin-left: 10%;
    margin-right: 10%; } }
body#comun .chapter-six .chapter__image-resume--alt .image {
  padding-left: 10%; }
body#comun .chapter-six .post-list {
  text-align: center; }
body#comun .chapter-six .post {
  margin: 0 10%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#comun .chapter-six .post {
    margin: 0 5%; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#comun .chapter-six .post {
    margin: 0; } }

body#shakespeare .chapter-three .post-list {
  text-align: center;
  margin: 0 16%; }
@media only screen and (max-width: 767px) {
  body#shakespeare .chapter-three .post-list {
    margin: 0 5%; } }
body#shakespeare .chapter-three .post {
  padding-left: 0;
  padding-right: 0; }
body#shakespeare .chapter-six {
  background: white; }
body#shakespeare .chapter-six .chapter__number {
  margin-bottom: 30px; }
body#shakespeare .chapter-six .chapter__resume {
  margin: 0 19% 40px;
  padding-bottom: 30px;
  padding-left: 180px;
  padding-top: 35px; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#shakespeare .chapter-six .chapter__resume {
    margin: 0 9% 40px;
  }
}
@media only screen and (max-width: 767px) {
  body#shakespeare .chapter-six .chapter__resume {
    margin: 0 0 40px;
    padding-left: 0
  }
}
body#shakespeare .chapter-six .chapter__resume span {
  display: block; }
body#shakespeare .chapter-six .chapter__resume strong {
  font-size: 235px; }
@media only screen and (max-width: 767px) {
  body#shakespeare .chapter-six .chapter__resume strong {
    font-size: 90px;
    line-height: 100px; } }

body#cervantes .chapter-two .chapter__image-resume .resume {
  margin-top: 99px; }

/* 
  POST
*/
.post__tag {
  display: inline-block;
  background: rgba(143, 180, 173, 0.35);
  color: white;
  font-size: 14px;
  line-height: 16px;
  font-family: "Open Sans";
  font-weight: normal;
  text-transform: uppercase;
  padding: 10px 15px;
  margin-bottom: 14px; }
body#shakespeare .post__tag {
  background: rgba(62, 175, 189, 0.35); }
.post__cat {
  display: inline-block;
  color: #e0b318;
  font-size: 15px;
  line-height: 24px;
  font-family: "Open Sans";
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  margin-bottom: 8px; }
.post__title {
  display: inline-block;
  position: relative;
  color: #0f1427;
  font-size: 28px;
  line-height: 34px;
  font-family: "Playfair Display";
  font-weight: normal;
  font-style: italic; }
.post__title a {
  color: #0f1427; }
body#cervantes .chapter-four .post__title a:hover, body#shakespeare .chapter-four .post__title a:hover, body#cervantes .chapter-four .post__title a:focus, body#shakespeare .chapter-four .post__title a:focus {
  color: white; }
.post__title:before {
  content: '';
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #67cbb8;
  width: 9px;
  height: 9px;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  margin-top: 11px; }
body#comun .post__title:before {
  background: #e0b318; }
body#shakespeare .post__title:before {
  background: #3eafbd; }
body#shakespeare .chapter-four .post__title:before {
  background: white; }
@media only screen and (max-width: 767px) {
  .post__title {
    font-size: 20px;
    line-height: 24px; } }
.post__title.no-dot:before {
  content: none;
  display: none; }
.post__author {
  display: block;
  color: #0f1427;
  font-size: 13px;
  line-height: 16px;
  font-family: "Open Sans";
  font-weight: normal;
  font-style: normal;
  text-transform: uppercase;
  margin: 25px 0; }
@media only screen and (max-width: 767px) {
  .post__author {
    font-size: 12px;
    line-height: 14px; } }
.post__content {
  display: block;
  color: #0f1427;
  font-size: 17px;
  font-weight: normal;
  line-height: 28px;
  font-family: "Open Sans";
  margin-bottom: 20px; }
@media only screen and (max-width: 767px) {
  .post__content {
    font-size: 14px;
    line-height: 18px; } }
.post-list .post {
  margin-top: 25px;
  border-top: 1px solid white;
  padding-top: 25px; }
.post-list .post:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0; }
.post-list .post .post__author {
  margin: 5px 0; }
.post-list .post .post__content {
  font-size: 15px;
  line-height: 24px; }
.post-list .post .post__title {
  display: block;
  margin-bottom: 10px; }
.post-list .post .post__title:before {
  background: white; }

.post-list {
  text-align: left; }

/* 
  BANNER
*/
.banner {
  overflow: hidden;
  position: relative;
  clear: both;
  width: 100%; }
.ie9 .banner {
  height: auto;
  min-height: 600px; }
.banner__wrapper {
  width: 90%;
  max-width: 970px;
  margin: 0 auto;
  height: auto;
  min-height: 0px;
  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1); }
.banner.active .banner__wrapper, .ie9 .banner {
  height: auto;
  min-height: 600px; }
.banner__number {
  color: white;
  font-size: 220px;
  line-height: 240px;
  font-family: "Open Sans";
  font-weight: 900;
  font-style: normal;
  text-align: center;
  display: block;
  position: absolute;
  top: -500px;
  left: 0;
  width: 100%;
  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: 1s; }
@media only screen and (max-width: 767px) {
  .banner__number {
    font-size: 160px; } }
.banner__text {
  color: white;
  font-size: 55px;
  font-family: "Playfair Display";
  font-weight: normal;
  font-style: italic;
  line-height: 65px;
  position: absolute;
  bottom: -500px;
  left: 0;
  width: 100%;
  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: 1s; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner__text {
    padding: 0 5%; } }
@media only screen and (max-width: 767px) {
  .banner__text {
    font-size: 35px;
    line-height: 45px; } }
.banner__text small {
  font-size: 38px;
  line-height: 48px;
  display: block; }
@media only screen and (max-width: 767px) {
  .banner__text small {
    font-size: 28px;
    line-height: 38px; } }
.banner__title {
  color: white;
  font-size: 60px;
  line-height: 80px;
  font-weight: normal;
  font-family: "Playfair Display";
  font-weight: 900;
  font-style: italic;
  text-align: center;
  display: block;
  position: absolute;
  bottom: 20%;
  left: -100%;
  width: 100%;
  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: 1s; }
@media only screen and (max-width: 767px) {
  .banner__title {
    font-size: 40px;
    line-height: 50px;
    bottom: 10%; } }
@media only screen and (max-width: 767px) {
  .banner-simple.active .banner__wrapper {
    min-height: 450px; } }
.banner-simple.active .banner__number {
  top: 10%; }
@media only screen and (max-width: 767px) {
  .banner-simple.active .banner__number {
    top: 3%; } }
.banner-simple.active .banner__text {
  bottom: 20%; }
.banner-expanded .banner__text {
  font-size: 35px;
  line-height: 40px;
  font-family: "Playfair Display";
  font-weight: normal;
  font-style: italic;
  bottom: 35%;
  right: -100%;
  left: auto; }
@media only screen and (max-width: 767px) {
  .banner-expanded .banner__text {
    font-size: 25px;
    line-height: 35px;
    padding-left: 5%;
    padding-right: 5%; } }
.banner-expanded.active .banner__number {
  top: 10%; }
@media only screen and (max-width: 767px) {
  .banner-expanded.active .banner__number {
    top: 5%;
    line-height: 200px; } }
.banner-expanded.active .banner__text {
  right: 0; }
.banner-expanded.active .banner__title {
  left: 0; }

#cervantes .banner-simple {
  background: url("../../images/banners/cervantes-obras-atribuidas.png") no-repeat center top #3db096; }

#cervantes .banner-expanded {
  background: url("../../images/banners/cervantes-numero-personajes.png") no-repeat center top #3db096; }

#shakespeare .banner-simple {
  background: url("../../images/banners/shakespeare-obras-sonetos.png") no-repeat left top;
  background-color: #3eafbd;
  background-position: center top; }

#shakespeare .banner-expanded {
  background: none #3eafbd; }
#shakespeare .banner-expanded .banner__wrapper {
  background: url("../../images/banners/shakespeare-numero-personajes.png") no-repeat left bottom; }
@media only screen and (max-width: 767px) {
  #shakespeare .banner-expanded {
    background-position: -60px bottom; } }

#comun .banner-simple {
  background: url("../../images/banners/comun-palabras-hamlet.png") no-repeat center bottom #e0b318; }
#comun .banner-simple strong {
  font-size: 150px; }
@media only screen and (max-width: 767px) {
  #comun .banner-simple strong {
    font-size: 70px; } }
#comun .banner-simple .banner__text {
  font-size: 60px; }
@media only screen and (max-width: 767px) {
  #comun .banner-simple .banner__text {
    font-size: 35px; } }
#comun .banner-simple.active .banner__wrapper {
  min-height: 500px; }
#comun .banner-simple.active .banner__number {
  top: 22%; }
#comun .banner-simple.active .banner__text {
  bottom: 22%; }

#comun .banner-expanded {
  background: url("../../images/banners/comun-palabras-quijote.png") no-repeat center bottom #e0b318; }
#comun .banner-expanded strong {
  font-size: 150px; }
@media only screen and (max-width: 767px) {
  #comun .banner-expanded strong {
    font-size: 70px; } }
#comun .banner-expanded .banner__text {
  font-size: 60px; }
@media only screen and (max-width: 767px) {
  #comun .banner-expanded .banner__text {
    font-size: 35px; } }
@media only screen and (max-width: 767px) {
  #comun .banner-expanded.active .banner__wrapper {
    min-height: 380px; } }
#comun .banner-expanded.active .banner__number {
  top: 22%; }
@media only screen and (max-width: 767px) {
  #comun .banner-expanded.active .banner__number {
    top: 8%; } }
#comun .banner-expanded.active .banner__text {
  bottom: 28%; }

#shakespeare .banner-simple .banner__text span {
  display: block; }

/* 
  MAP
*/
@keyframes showCircles {
  30% {
    border: 4px solid transparent; }
  100% {
    border: 4px solid white; } }
.map {
  position: relative;
  clear: both;
  float: left;
  margin-top: -260px; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .map {
    float: none;
    width: auto;
    margin-top: 0; } }
@media only screen and (max-width: 767px) {
  .map {
    display: none; } }
.map.first {
  padding-bottom: 30px;
  border-bottom: 1px solid white;
  margin-bottom: 30px; }
.map__name {
  background: #3eafbd;
  display: inline-block;
  min-width: 190px;
  text-align: center;
  color: white;
  font-size: 14px;
  line-height: 26px;
  font-family: "Open Sans";
  font-weight: normal;
  padding: 5px 15px;
  text-transform: uppercase; }
.map__mobile {
  margin-top: 60px;
  margin-bottom: 10px;
  display: none; }
@media only screen and (max-width: 767px) {
  .map__mobile {
    display: block; } }
.map__mobile-text {
  display: block;
  text-align: left;
  color: #0f1427;
  font-size: 14px;
  line-height: 20px;
  font-family: "Open Sans";
  font-weight: normal;
  text-transform: uppercase;
  margin-bottom: 10px; }
.map__mobile-text:before {
  content: '';
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: white;
  width: 9px;
  height: 9px;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  margin-top: 4px; }
.map__mobile-select {
  width: 100%;
  background: white;
  padding: 15px;
  position: relative;
  height: 50px; }
.map__mobile-select:after {
  content: "";
  display: block;
  background: url("../../images/icons/down.svg") no-repeat left top;
  background-size: cover;
  width: 25px;
  height: 13px;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  right: 15px; }
.map__mobile-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 50px;
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding: 10px;
  font-size: 1em; }
.map__mobile-select span {
  display: block;
  text-align: left;
  color: #0f1427;
  font-size: 14px;
  line-height: 20px;
  font-family: "Open Sans";
  font-weight: normal;
  text-transform: uppercase; }
.map img {
  display: block; }
.map img.show-tablet {
  display: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .map img.hide-tablet {
    display: none;
  }
  .map img.show-tablet {
    display: block;
  }
}
.map.active .map__over {
  width: 0; }
.map.active .map__link {
  animation: showCircles 5s forwards; }
.map__over {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #c3ddd8;
  z-index: 8;
  transition: all 3s cubic-bezier(0.19, 1, 0.22, 1); }
.ie9 .map__over {
  display: none; }
.map__link {
  position: absolute;
  border: 4px solid transparent;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-indent: -1000px;
  overflow: hidden;
  transition: background 1s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 7; }
.ie9 .map__link {
  border-color: white; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .map__link {
    /*border-width: 3px;
    width: 18px;
    height: 18px;*/ } }
@media only screen and (max-width: 767px) {
  .map__link {
    /*width: 20px;
    height: 20px;*/
    background: white;
    border: none; } }
.map__link:hover, .map__link:focus {
  background: rgba(255, 255, 255, 0.5); }
.map__actions {
  text-align: right;
  padding: 10px 0; }
.map__title {
  color: #0f1427;
  font-size: 14px;
  font-family: "Open Sans";
  font-weight: 700;
  font-style: normal;
  line-height: 16px;
  text-align: left;
  border-bottom: 1px solid #dbdbdb;
  display: block;
  padding-bottom: 8px;
  text-transform: uppercase;
  margin-bottom: 15px; }

body#cervantes .chapter-four .chapter__wrapper, body#shakespeare .chapter-four .chapter__wrapper {
  position: relative; }
body#cervantes .chapter-four .chapter__wrapper:after, body#shakespeare .chapter-four .chapter__wrapper:after {
  content: "";
  display: block;
  clear: both; }

/* Cervantes */
.map__link#c-link-1 {
  top: 32%;
  left: 33%; }

.map__link#c-link-2 {
  top: 52%;
  left: 25%; }

.map__link#c-link-3 {
  top: 58%;
  left: 19%; }

.map__link#c-link-4 {
  top: 19%;
  left: 24%; }

.map__link#c-link-5 {
  top: 34.5%;
  left: 29.9%; }

.map__link#c-link-6 {
  top: 68%;
  left: 27%; }

.map__link#c-link-7 {
  top: 43%;
  left: 26.4%; }

.map__link#c-link-8 {
  top: 39%;
  left: 28%; }

.map__link#c-link-9 {
  top: 46%;
  left: 1.5%; }

.map__link#c-link-10 {
  top: 44%;
  left: 23%; }

.map__link#c-link-11 {
  top: 77.5%;
  left: 59%; }
  
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .map__link#c-link-1 {
    top: 28%;
    left: 35%; }
  .map__link#c-link-5 {
    top: 31%;
    left: 30%; }
  .map__link#c-link-7 {
    top: 43.9%;
    left: 25.5%; }
  .map__link#c-link-8 {
    top: 38%; }
  .map__link#c-link-10 {
    top: 47%;
    left: 21%; }
}

body#shakespeare .map {
  padding-left: 200px;
  margin-top: 0;
  text-align: left;
  position: relative; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#shakespeare .map {
    padding-left: 0; } }
body#shakespeare .map .map__name {
  position: absolute;
  top: 0;
  left: 0; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#shakespeare .map .map__name {
    position: relative;
    top: auto;
    left: auto;
    margin-bottom: 10px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#shakespeare .map {
    width: auto; } }
body#shakespeare .map__over {
  background: #add6dc; }
body#shakespeare .map__area {
  display: inline-block;
  position: relative; }

/* Shakespeare */
.map__link#s-link-1 {
  top: 72.3%;
  left: 45.6%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .map__link#s-link-1 {
    top: 74.3%;
    left: 31.6%; } }

.map__link#s-link-2 {
  top: 27.8%;
  left: 66.5%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .map__link#s-link-2 {
    top: 34.8%;
    left: 57.5%; } }

.map__link#s-link-3 {
  top: 9.5%;
  right: 21.5%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .map__link#s-link-3 {
    top: 18.5%;
    right: 27.5%; } }

.map__link#s-link-4 {
  top: 24.5%;
  left: 34.5%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .map__link#s-link-4 {
    top: 31.5%;
    left: 16.5%; } }

.map__link#s-link-5 {
  top: 62%;
  left: 64.5%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .map__link#s-link-5 {
    top: 66%;
    left: 54.5%; } }

.map__link#s-link-6 {
  top: 68%;
  left: 49.4%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .map__link#s-link-6 {
    top: 71%;
    left: 35.4%; } }

.map__link#s-link-7 {
  top: 48%;
  left: 70%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .map__link#s-link-7 {
    top: 53%;
    left: 61.5%; } }

.map__link#s-link-8 {
  top: 76%;
  left: 58%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .map__link#s-link-8 {
    top: 78%;
    left: 46%; } }

.map__link#s-link-9 {
  top: 65%;
  left: 38%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .map__link#s-link-9 {
    top: 68%;
    left: 23%; } }

.map__link#s-link-10 {
  top: 81%;
  left: 73.5%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .map__link#s-link-10 {
    top: 83%;
    left: 66.5%; } }

/* 
  PAGER
*/
.pager {
  position: fixed;
  top: 235px;
  right: 45px;
  z-index: 9;
  text-align: center; }
@media only screen and (max-width: 767px) {
  .pager {
    right: 33px;
    top: 150px; } }
.pager ol {
  margin: 0;
  list-style-type: none; }
.pager li {
  list-style-type: none;
  margin-top: 10px; }
.pager li:first-child {
  margin-top: 0; }
.pager li a {
  display: block;
  border: 2px solid transparent;
  background: white;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  text-indent: -1000px;
  overflow: hidden;
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  margin: 0 auto; }
@media only screen and (max-width: 767px) {
  .pager li a {
    width: 16px;
    height: 16px; } }
.pager li a.active {
  border-color: white;
  background: transparent; }
.pager--alt li a {
  background: #0f1427; }
.pager--alt li a.active {
  background: transparent;
  border-color: #0f1427; }

/* 
  ILLUSTRATION
*/
.illustration .illustration__link {
  visibility: hidden;
  opacity: 0; }
.illustration .illustration__image {
  transition: all 3s cubic-bezier(0.19, 1, 0.22, 1);
  visibility: hidden;
  opacity: 0; }
.illustration .illustration__image-outside {
  transition: all 3s cubic-bezier(0.19, 1, 0.22, 1);
  visibility: visible;
  opacity: 1; }

.illustration.active .illustration__link {
  visibility: visible;
  opacity: 1; }
.illustration.active .illustration__image {
  visibility: visible;
  opacity: 1; }
.illustration.active .illustration__image-outside {
  visibility: hidden;
  opacity: 0; }

.illustration__text {
  border-top: 1px solid white;
  padding: 35px 10%;
  text-align: center;
  position: relative;
  margin-bottom: 50px; }
body#shakespeare .illustration__text {
  padding-bottom: 0; }
@media only screen and (max-width: 767px) {
  body#shakespeare .illustration__text {
    padding-bottom: 35px; } }
.illustration__text:before {
  content: '';
  border-top: 14px solid white;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -14px; }
.illustration__text p {
  color: white;
  font-size: 20px;
  line-height: 32px;
  font-family: "Playfair Display";
  font-weight: normal;
  font-style: italic; }
@media only screen and (max-width: 767px) {
  .illustration__text p {
    font-size: 18px;
    line-height: 28px; } }
.illustration__image {
  visibility: hidden;
  opacity: 0;
  position: relative; }
.illustration__image .fire {
  position: absolute;
  top: 0;
  right: 7%;
  width: 45%;
  z-index: -1; }
body#shakespeare .illustration__image {
  margin-top: -30px; }
@media only screen and (max-width: 767px) {
  body#shakespeare .illustration__image {
    margin-top: 0; } }
.illustration__image-outside {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9; }
.illustration__area {
  position: relative; }
@media only screen and (max-width: 767px) {
  .illustration__area {
    margin-left: -15px;
    margin-right: -15px;
    overflow: visible; } }
.illustration__link {
  position: absolute;
  border: 4px solid white;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-indent: -1000px;
  overflow: hidden;
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 7;
  visibility: hidden;
  opacity: 0; }
@media only screen and (max-width: 767px) {
  .illustration__link {
    background: white;
    border: none; } }
.ie9 .illustration__link {
  border-color: white; }
.illustration__link:hover {
  background: rgba(255, 255, 255, 0.5); }
.illustration__link.focus {
  transform: scale(10);
  transform-origin: center center;
  visibility: hidden;
  opacity: 0; }
.illustration__link.focus:hover {
  background: none; }
.illustration .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../../images/masks/blue-mask.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-color: transparent;
  visibility: hidden;
  opacity: 0;
  z-index: 7;
  transition: visibility 1.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1); }
@media only screen and (max-width: 767px) {
  .illustration .mask {
    display: none; } }
.illustration .active-mask .mask {
  visibility: visible;
  opacity: 1; }
.illustration .active-mask .illustration__link {
  visibility: hidden;
  opacity: 0; }

/*
  Cervantes link
*/
#link-c-place-1 {
  top: 13%;
  left: 55%; }

#link-c-place-2 {
  top: 14%;
  left: 86%; }

#link-c-place-3 {
  top: 30%;
  left: 86%; }

#link-c-place-4 {
  top: 52%;
  left: 85.3%; }

#link-c-place-5 {
  top: 57%;
  left: 64.5%; }

#link-c-place-6 {
  top: 54%;
  left: 48%; }

#link-c-place-7 {
  top: 82%;
  left: 58%; }

#link-c-place-8 {
  top: 78%;
  left: 39.7%; }

#link-c-place-9 {
  top: 66%;
  left: 11%; }

#link-c-place-10 {
  top: 27%;
  left: 14%; }

#link-c-place-11 {
  top: 54%;
  left: 29%; }

/*
  Cervantes mask
*/
body#cervantes .illustration .mask {
  background-image: url("../../images/masks/green-mask.png"); }

.c-place-1 .mask {
  background-position: 34.6% 62.5%; }

.c-place-2 .mask {
  background-position: 6% 62.5%; }

.c-place-3 .mask {
  background-position: 6% 53%; }

.c-place-4 .mask {
  background-position: 6% 40%; }

.c-place-5 .mask {
  background-position: 26% 37%; }

.c-place-6 .mask {
  background-position: 41% 38.5%; }

.c-place-7 .mask {
  background-position: 32% 22%; }

.c-place-8 .mask {
  background-position: 49% 24%; }

.c-place-9 .mask {
  background-position: 75% 31.5%; }

.c-place-10 .mask {
  background-position: 73% 55%; }

.c-place-11 .mask {
  background-position: 59% 39%; }

@media only screen and (max-width: 1100px) {
  .illustration__link.focus {
    transform: scale(7); }

  body#cervantes .illustration .mask {
    background-image: url("../../images/masks/green-mask-tablet.png"); }

  .c-place-1 .mask {
    background-position: 37% 61%; }

  .c-place-2 .mask {
    background-position: 13% 58%; }

  .c-place-3 .mask {
    background-position: 14% 50%; }

  .c-place-4 .mask {
    background-position: 15% 37%; }

  .c-place-5 .mask {
    background-position: 31% 38%; }

  .c-place-6 .mask {
    background-position: 42% 38%; }

  .c-place-7 .mask {
    background-position: 36% 30%; }

  .c-place-8 .mask {
    background-position: 51% 33%; }

  .c-place-9 .mask {
    background-position: 69% 35%; }

  .c-place-10 .mask {
    background-position: 66% 51%; }

  .c-place-11 .mask {
    background-position: 54% 42%; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#cervantes .illustration .mask {
    background-image: url("../../images/masks/green-mask-tablet.png"); }

  .c-place-1 .mask {
    background-position: 39.8% 53%; }

  .c-place-2 .mask {
    background-position: 27.8% 53%; }

  .c-place-3 .mask {
    background-position: 27.8% 49%; }

  .c-place-4 .mask {
    background-position: 27.8% 42%; }

  .c-place-5 .mask {
    background-position: 35.5% 40.5%; }

  .c-place-6 .mask {
    background-position: 42.8% 41.5%; }

  .c-place-7 .mask {
    background-position: 38.5% 34%; }

  .c-place-8 .mask {
    background-position: 46.5% 34%; }

  .c-place-9 .mask {
    background-position: 58.5% 37.7%; }

  .c-place-10 .mask {
    background-position: 58% 50%; }

  .c-place-11 .mask {
    background-position: 51.3% 41.4%; } }
/*
  Shakespeare link
*/
#link-s-place-1 {
  top: 16%;
  left: 42%; }

#link-s-place-2 {
  top: 30%;
  left: 57%; }

#link-s-place-3 {
  top: 27%;
  left: 73%; }

#link-s-place-4 {
  top: 55%;
  left: 74%; }

#link-s-place-5 {
  top: 69%;
  left: 66%; }

#link-s-place-6 {
  top: 80%;
  left: 62%; }

#link-s-place-7 {
  top: 61%;
  left: 43%; }

#link-s-place-8 {
  top: 50%;
  left: 35%; }

#link-s-place-9 {
  top: 40%;
  left: 16%; }

#link-s-place-10 {
  top: 80%;
  left: 10%; }

/*
  Shakespeare mask
*/
.s-place-1 .mask {
  background-position: 47% 60%; }

.s-place-2 .mask {
  background-position: 33% 52.5%; }

.s-place-3 .mask {
  background-position: 17.5% 54%; }

.s-place-4 .mask {
  background-position: 16.5% 38.7%; }

.s-place-5 .mask {
  background-position: 24% 31%; }

.s-place-6 .mask {
  background-position: 28% 24.5%; }

.s-place-7 .mask {
  background-position: 46% 35%; }

.s-place-8 .mask {
  background-position: 53.5% 41%; }

.s-place-9 .mask {
  background-position: 71% 47%; }

.s-place-10 .mask {
  background-position: 75.5% 25.5%; }

@media only screen and (max-width: 1100px) {
  .illustration__link.focus {
    transform: scale(7); }

  body#shakespeare .illustration .mask {
    background-image: url("../../images/masks/blue-mask-tablet.png"); }

  .s-place-1 .mask {
    background-position: 46% 57.8%; }

  .s-place-2 .mask {
    background-position: 36.2% 50.4%; }

  .s-place-3 .mask {
    background-position: 25.6% 51.6%; }

  .s-place-4 .mask {
    background-position: 25% 40%; }

  .s-place-5 .mask {
    background-position: 30.2% 34.4%; }

  .s-place-6 .mask {
    background-position: 33% 28%; }

  .s-place-7 .mask {
    background-position: 45.5% 37.5%; }

  .s-place-8 .mask {
    background-position: 50.8% 42%; }

  .s-place-9 .mask {
    background-position: 63.4% 46.4%; }

  .s-place-10 .mask {
    background-position: 68.3% 29%; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#shakespeare .illustration .mask {
    background-image: url("../../images/masks/blue-mask-tablet.png"); }

  .s-place-1 .mask {
    background-position: 45.5% 52%; }

  .s-place-2 .mask {
    background-position: 38.9% 48.7%; }

  .s-place-3 .mask {
    background-position: 31.8% 49.6%; }

  .s-place-4 .mask {
    background-position: 31.4% 41.3%; }

  .s-place-5 .mask {
    background-position: 34.9% 37.3%; }

  .s-place-6 .mask {
    background-position: 36.7% 35.5%; }

  .s-place-7 .mask {
    background-position: 45% 39.6%; }

  .s-place-8 .mask {
    background-position: 48.7% 42.7%; }

  .s-place-9 .mask {
    background-position: 57% 45.8%; }

  .s-place-10 .mask {
    background-position: 58% 35%; } }
/* 
  MODAL
*/
.modal {
  background: white;
  padding: 28px 28px 28px 38px;
  text-align: left;
  color: #0f1427;
  font-size: 14px;
  font-weight: normal;
  font-family: "Open Sans";
  line-height: 20px;
  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0;
  visibility: hidden;
  z-index: 10;
  position: absolute; }
.modal p {
  font-size: 14px;
  font-weight: normal;
  font-family: "Open Sans";
  line-height: 20px;
  margin-bottom: 8px; }
@media only screen and (max-width: 767px) {
  .modal {
    width: 100%;
    max-width: 767px;
    padding: 15px; } }
.modal.active {
  opacity: 1;
  visibility: visible; }
.modal#info-link-1 {
  top: 23%;
  left: 3%; }
.modal__close {
  float: right;
  width: 26px;
  height: 26px;
  background: url("../../images/icons/close.svg") no-repeat left top;
  text-indent: -999px;
  overflow: hidden;
  margin-bottom: 15px; }
@media only screen and (max-width: 767px) {
  .modal__close {
    margin-bottom: 5px; } }
.modal__actions {
  text-align: right;
  padding-top: 15px; }
.modal__title {
  clear: both;
  color: #0f1427;
  font-size: 14px;
  font-family: "Open Sans";
  font-weight: 700;
  font-style: normal;
  line-height: 16px;
  text-align: left;
  display: block;
  text-transform: uppercase;
  margin-bottom: 10px; }
.modal--sharer {
  background: transparent;
  position: absolute;
  top: -5px;
  right: 90%;
  padding: 0;
  padding-right: 10px;
  min-width: 180px;
  z-index: 10;
  text-align: right; }
@media only screen and (max-width: 767px) {
  .modal--sharer {
    right: 20px;
    top: 93%;
    width: auto;
    min-width: 40px;
    text-align: center;
    padding-right: 0; } }
.modal--sharer ul, .modal--sharer li {
  display: inline-block; }
@media only screen and (max-width: 767px) {
  .modal--sharer ul, .modal--sharer li {
    display: block; } }
.modal--sharer a {
  display: inline-block;
  margin: 0 3px;
  text-align: left;
  text-indent: -999em;
  overflow: hidden; }
@media only screen and (max-width: 767px) {
  .modal--sharer a {
    display: block;
    margin-bottom: 3px; } }
.modal--sharer a.twitter {
  width: 40px;
  height: 40px;
  background: url("../../images/icons/twitter.svg") no-repeat left top;
  background-size: cover; }
.modal--sharer a.facebook {
  width: 40px;
  height: 40px;
  background: url("../../images/icons/facebook.svg") no-repeat left top;
  background-size: cover; }
.modal--sharer a.googlemas1 {
  width: 40px;
  height: 40px;
  background: url("../../images/icons/google.svg") no-repeat left top;
  background-size: cover; }

.illustration .modal {
  width: 60%;
  max-width: 330px; }

.modal.modal--map {
  width: 100%;
  background: none;
  top: 50%;
  margin-top: -280px;
  left: 0;
  z-index: 99;
  padding: 0;
  position: fixed;
  text-align: center; }
@media only screen and (max-width: 767px) {
  .modal.modal--map {
    margin-top: 0 !important;
    position: relative;
    overflow: hidden;
    top: auto;
    left: auto;
    max-height: 0;
    transition: padding 0.5s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.7s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.7s cubic-bezier(0.19, 1, 0.22, 1), max-height 0.7s cubic-bezier(0.19, 1, 0.22, 1); } }
.modal.modal--map .modal__inner {
  width: 100%;
  max-width: 970px;
  background: white;
  margin: 0 auto;
  overflow: hidden;
  padding: 40px;
  position: relative;
  text-align: left; }
@media only screen and (max-width: 767px) {
  .modal.modal--map .modal__inner {
    padding: 0 15px; } }
@media only screen and (max-width: 767px) {
  .modal.modal--map.active {
    max-height: 2000px;
    margin-bottom: 40px; } }
@media only screen and (max-width: 767px) {
  .modal.modal--map.active .modal__inner {
    padding-top: 15px;
    padding-bottom: 15px; } }
.modal.modal--map .modal__close {
  position: absolute;
  top: 40px;
  right: 40px;
  margin: 0; }
@media only screen and (max-width: 767px) {
  .modal.modal--map .modal__close {
    top: 18px;
    right: 15px;
    width: 18px;
    height: 18px;
    background-size: cover; } }
.modal.modal--map .modal__title {
  font-size: 24px;
  line-height: 28px;
  font-weight: 800;
  margin-bottom: 26px;
  padding-right: 50px; }
@media only screen and (max-width: 767px) {
  .modal.modal--map .modal__title {
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 15px;
    padding-right: 30px; } }
.modal.modal--map .modal__image {
  float: left;
  width: 45%;
  text-align: center; }
.modal.modal--map .modal__image img {
  display: block;
  margin: 0 auto; }
@media only screen and (max-width: 767px) {
  .modal.modal--map .modal__image {
    float: none;
    width: auto;
    margin-bottom: 20px; } }
.modal.modal--map .modal__text {
  float: right;
  width: 55%;
  padding-left: 30px; }
.modal__text .italic {
  font-style: italic; }
@media only screen and (max-width: 767px) {
  .modal.modal--map .modal__text {
    float: none;
    width: auto;
    padding-left: 0; } }
.modal.modal--map .modal__text p {
  color: #0f1427;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 20px; }

body#cervantes .illustration .modal, body#shakespeare .illustration .modal {
  padding-top: 60px; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#cervantes .illustration .modal, body#shakespeare .illustration .modal {
    padding: 50px 20px 20px; } }
@media only screen and (max-width: 767px) {
  body#cervantes .illustration .modal, body#shakespeare .illustration .modal {
    width: auto;
    max-width: 767px;
    padding: 60px 20px 30px;
    left: -15px;
    right: -15px;
    top: 0;
    bottom: auto; } }
body#cervantes .illustration .modal .modal__close, body#shakespeare .illustration .modal .modal__close {
  margin-top: -40px; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#cervantes .illustration .modal .modal__close, body#shakespeare .illustration .modal .modal__close {
    margin-top: -30px; } }

/* Cervantes */
.modal#c-place-1 {
  top: 34.5%;
  left: 39%; }

.modal#c-place-2 {
  top: 5.8%;
  left: 38%; }

.modal#c-place-3 {
  top: 19.4%;
  left: 38%; }

.modal#c-place-4 {
  top: 38.2%;
  left: 38%; }

.modal#c-place-5 {
  top: 15%;
  left: 48.5%; }

.modal#c-place-6 {
  top: 9%;
  left: 32.5%; }

.modal#c-place-7 {
  top: 23.5%;
  left: 42%; }

.modal#c-place-8 {
  top: 39%;
  left: 25%; }

.modal#c-place-9 {
  top: 56%;
  left: 28%; }

.modal#c-place-10 {
  top: 14.5%;
  left: 30%; }

.modal#c-place-11 {
  top: 45%;
  left: 45%; }

@media only screen and (max-width: 1100px) {
  .modal#c-place-2 {
    top: 7.8%; }

  .modal#c-place-3 {
    top: 21%;
    left: 36%; }

  .modal#c-place-4 {
    top: 44%;
    left: 34%; }

  .modal#c-place-7 {
    top: 13%;
    left: 39%; }

  .modal#c-place-8 {
    top: 27%;
    left: 20%; }

  .modal#c-place-11 {
    top: 40%; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .modal#c-place-1 {
    left: 31%;
    top: 41%; }

  .modal#c-place-2 {
    top: 3%;
    left: 15%; }

  .modal#c-place-3 {
    left: 15%;
    top: 14%; }

  .modal#c-place-4 {
    left: 15%;
    top: 34%; }

  .modal#c-place-5 {
    top: 4%;
    left: 41%; }

  .modal#c-place-6 {
    top: -8%;
    left: 24%; }

  .modal#c-place-7 {
    top: 0%;
    left: 34%; }

  .modal#c-place-8 {
    top: 20%; }

  .modal#c-place-9 {
    top: 51%;
    left: 32%; }

  .modal#c-place-10 {
    top: 12%;
    left: 34%; }

  .modal#c-place-11 {
    top: 6%;
    left: 6%; } }
/* Shakespeare */
.modal#s-place-1 {
  top: 37.4%;
  left: 26%; }

.modal#s-place-2 {
  top: 51%;
  left: 41%; }

.modal#s-place-3 {
  top: 48%;
  left: 57.5%; }

.modal#s-place-4 {
  top: 47%;
  left: 27%; }

.modal#s-place-5 {
  top: 30%;
  left: 50.7%; }

.modal#s-place-6 {
  top: 30.3%;
  left: 46%; }

.modal#s-place-7 {
  top: 17%;
  left: 27.2%; }

.modal#s-place-8 {
  top: 40.6%;
  left: 50.8%; }

.modal#s-place-9 {
  top: 26.7%;
  left: 32%; }

.modal#s-place-10 {
  bottom: 1%;
  left: 27.4%;
  top: auto; }

@media only screen and (max-width: 1100px) {
  .modal#s-place-3 {
    top: 48%;
    left: 51.5%; }

  .modal#s-place-4 {
    top: 45.5%;
    left: 21%; }

  .modal#s-place-5 {
    top: 28%;
    left: 46.5%; }

  .modal#s-place-6 {
    top: 28.3%;
    left: 43%; }

  .modal#s-place-7 {
    top: 13%; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .modal#s-place-1 {
    left: 18%;
    top: 41%; }

  .modal#s-place-2 {
    top: 54%;
    left: 34%; }

  .modal#s-place-3 {
    left: 5%;
    top: 10%; }

  .modal#s-place-4 {
    left: 5.5%;
    top: 44%; }

  .modal#s-place-5 {
    top: 17%;
    left: 42.5%; }

  .modal#s-place-6 {
    top: 10%;
    left: 38%; }

  .modal#s-place-7 {
    top: 5%;
    left: 20%; }

  .modal#s-place-8 {
    top: 34.3%;
    left: 53%; }

  .modal#s-place-9 {
    top: 21.7%;
    left: 34%; }

  .modal#s-place-10 {
    left: 32%; } }
/* 
  MENU
*/
#content, .header__logo {
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  transform-origin: 0 0;
  position: relative;
  left: 0; }

.overlay {
  width: 100%;
  background: transparent;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 0;
  z-index: 97;
  transition: background 1s cubic-bezier(0.19, 1, 0.22, 1); }

body.active-overlay .overlay {
  background: rgba(0, 0, 0, 0.74);
  height: 100%; }
body.active-overlay-panel .overlay {
  background: rgba(0, 0, 0, 0.01);
  height: 100%; }

.mainmenu {
  position: fixed;
  background: white;
  padding: 100px 4%;
  top: 0;
  width: 70%;
  right: -70%;
  max-width: 820px;
  height: 100%;
  z-index: 98;
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  overflow-y: auto; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .mainmenu {
    width: 90%;
    right: -90%; } }
@media only screen and (max-width: 767px) {
  .mainmenu {
    width: 88%;
    right: -88%;
    padding-top: 60px; } }
.mainmenu__link {
  display: block;
  color: #0f1427;
  font-size: 17px;
  line-height: 22px;
  font-weight: normal;
  font-family: "Open Sans";
  text-transform: uppercase;
  padding: 30px 50px 25px 85px;
  position: relative;
  text-align: left;
  border-bottom: 1px solid #dbdbdb; }
@media only screen and (max-width: 767px) {
  .mainmenu__link {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 55px; } }
.mainmenu__link strong {
  color: #0f1427;
  font-size: 100px;
  line-height: 104px;
  font-weight: normal;
  font-family: "Playfair Display";
  position: absolute;
  top: -12px;
  left: 0;
  width: 76px;
  text-align: center; }
@media only screen and (max-width: 767px) {
  .mainmenu__link strong {
    font-size: 40px;
    line-height: 44px;
    width: 50px;
    top: 16px; } }

body.active-menu {
  overflow: hidden; }
body.active-menu .panel {
  visibility: hidden;
  opacity: 0; }
body.active-menu #content, body.active-menu .header__logo {
  position: relative;
  left: -45%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body.active-menu #content, body.active-menu .header__logo {
    left: -90%; } }
@media only screen and (max-width: 767px) {
  body.active-menu #content, body.active-menu .header__logo {
    left: -88%; } }
body.active-menu svg.share line, body.active-menu svg.share circle, body.active-menu svg.hamburger line, body.active-menu svg.hamburger circle {
  /*stroke: white;*/ }
body.active-menu .mainmenu {
  right: 0; }
body.active-menu .overlay {
  background: rgba(0, 0, 0, 0.74);
  height: 100%; }

/* 
  TIMELINE
*/
.timeline {
  overflow: hidden;
  border-top: 3px solid black; }
@media only screen and (max-width: 767px) {
  .timeline {
    margin-left: -15px;
    margin-right: -15px; } }
.timeline__title {
  color: #0f1427;
  font-family: "Playfair Display";
  font-weight: normal;
  font-style: italic;
  font-size: 30px;
  line-height: 40px;
  display: block;
  text-align: center;
  padding-top: 30px; }
.timeline__name {
  color: #0f1427;
  font-family: "Playfair Display";
  font-weight: normal;
  font-style: italic;
  font-size: 30px;
  line-height: 40px;
  display: block;
  margin-top: 30px; }
@media only screen and (max-width: 767px) {
  .timeline__name {
    display: none; } }
.timeline__both {
  float: left;
  width: 26%;
  background: white;
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .timeline__both {
    width: 34%; } }
@media only screen and (max-width: 767px) {
  .timeline__both {
    width: auto;
    float: none; } }
.timeline__both ul {
  padding: 40px 25px; }
@media only screen and (max-width: 767px) {
  .timeline__both ul {
    padding: 40px 20px; } }
.timeline__both li {
  color: #0f1427;
  font-size: 13px;
  line-height: 18px;
  font-family: "Open Sans";
  font-weight: normal;
  text-align: left;
  margin-bottom: 10px; }
.timeline__both li strong {
  font-family: "Open Sans";
  font-weight: 700;
  font-style: normal; }
.timeline__both li p {
  color: #0f1427;
  font-size: 13px;
  line-height: 18px;
  font-family: "Open Sans";
  font-weight: normal;
  text-align: left;
  margin-bottom: 0; }
.timeline__both li.cervantes, .timeline__both li.shakespeare {
  color: #0f1427;
  font-size: 15px;
  line-height: 20px;
  font-family: "Open Sans";
  font-weight: normal;
  text-align: left;
  position: relative; }
.timeline__both li.cervantes span.italic, .timeline__both li.shakespeare span.italic {
  font-style: italic; }
.timeline__both li.cervantes p, .timeline__both li.shakespeare p {
  font-size: 15px;
  line-height: 20px; }
.timeline__both li.cervantes img, .timeline__both li.shakespeare img {
  display: block;
  margin-top: 20px; }
@media only screen and (max-width: 767px) {
  .timeline__both li.cervantes img, .timeline__both li.shakespeare img {
    margin: 20px auto; } }
.timeline__both li.cervantes img.pull-left, .timeline__both li.shakespeare img.pull-left {
  position: relative;
  margin-left: -25px; }
@media only screen and (max-width: 767px) {
  .timeline__both li.cervantes img.pull-left, .timeline__both li.shakespeare img.pull-left {
    margin-left: -20px; } }
.timeline__both li.cervantes .year, .timeline__both li.shakespeare .year {
  color: black;
  font-size: 24px;
  line-height: 28px;
  font-family: "Open Sans";
  font-weight: 700;
  font-style: normal;
  background: transparent;
  text-align: left;
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 8px; }
@media only screen and (max-width: 767px) {
  .timeline__both li.cervantes .year, .timeline__both li.shakespeare .year {
    font-size: 18px;
    line-height: 22px; } }
.timeline__both li.first {
  margin-top: 80px; }
@media only screen and (max-width: 767px) {
  .timeline__both li.first {
    margin-top: 0; } }
.timeline__both li.with-image {
  margin-bottom: -380px; }
.ie9 .timeline__both li.with-image {
  max-width: 540px; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .timeline__both li.with-image {
    margin-bottom: -250px; } }
@media only screen and (max-width: 767px) {
  .timeline__both li.with-image {
    margin-bottom: 10px; } }
.timeline__both li.cervantes {
  margin-left: -170%;
  padding-right: 125%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .timeline__both li.cervantes {
    margin-left: -132%; } }
@media only screen and (max-width: 767px) {
  .timeline__both li.cervantes {
    width: auto;
    float: none;
    margin: 0 0 30px;
    padding: 0; } }
.timeline__both li.cervantes.with-image {
  padding-right: 113%; }
@media only screen and (max-width: 767px) {
  .timeline__both li.cervantes.with-image {
    padding-right: 0; } }
.timeline__both li.cervantes.born {
  padding-right: 112.5%;
  min-height: 259px;
  margin-top: -250px; }
@media only screen and (max-width: 767px) {
  .timeline__both li.cervantes.born {
    padding: 0;
    margin-top: 0; } }
.timeline__both li.cervantes.born .bg {
  padding-top: 80px;
  background: url("../../images/timeline/cervantes.png") no-repeat right bottom; }
@media only screen and (max-width: 767px) {
  .timeline__both li.cervantes.born .bg {
    padding-top: 0; } }
.timeline__both li.cervantes.born p {
  padding: 40px 100px 40px 20px;
  background: rgba(252, 196, 0, 0.5); }
.timeline__both li.cervantes.born .year {
  margin-bottom: 0; }
.timeline__both li.cervantes .year {
  border: 1px solid #fcc400; }
@media only screen and (max-width: 767px) {
  .timeline__both li.cervantes .year {
    margin-left: -20px;
    background: white;
    position: relative;
    z-index: 1; } }
.timeline__both li.cervantes .dot {
  position: absolute;
  background: #fcc400;
  height: 1px;
  width: 67%;
  top: 35px;
  left: 76px; }
@media only screen and (max-width: 767px) {
  .timeline__both li.cervantes .dot {
    width: 50%;
    top: 15px;
    left: 0; } }
.timeline__both li.cervantes .dot:before {
  content: "";
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  background: #fcc400;
  display: block;
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 1; }
.timeline__both li.cervantes .dot:after {
  content: "";
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  background: #e6e5e5;
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  border: 1px solid white; }
.timeline__both li.shakespeare {
  margin-right: -159.5%;
  padding-left: 125%;
  text-align: right; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .timeline__both li.shakespeare {
    margin-right: -132%; } }
@media only screen and (max-width: 767px) {
  .timeline__both li.shakespeare {
    width: auto;
    float: none;
    margin: 0 0 30px;
    padding: 0; } }
.timeline__both li.shakespeare.born {
  padding-left: 112.5%;
  margin-top: -180px; }
@media only screen and (max-width: 767px) {
  .timeline__both li.shakespeare.born {
    padding: 0;
    margin-top: 0; } }
.timeline__both li.shakespeare.born .bg {
  min-height: 241px;
  padding-top: 40px;
  background: url("../../images/timeline/shakespeare.png") no-repeat left bottom; }
@media only screen and (max-width: 767px) {
  .timeline__both li.shakespeare.born .bg {
    padding: 0;
    min-height: 50px; } }
.timeline__both li.shakespeare.born .dot {
  top: auto;
  bottom: 35px; }
@media only screen and (max-width: 767px) {
  .timeline__both li.shakespeare.born .dot {
    bottom: 15px;
    right: 62px; } }
.timeline__both li.shakespeare.born p {
  background: rgba(135, 215, 62, 0.5);
  padding: 35px 20px 45px 120px; }
@media only screen and (max-width: 767px) {
  .timeline__both li.shakespeare.born p {
    padding: 40px 20px 40px 100px;
    text-align: right; } }
.timeline__both li.shakespeare.born .year {
  margin-bottom: 0; }
.timeline__both li.shakespeare .year {
  border: 1px solid #87d73e; }
@media only screen and (max-width: 767px) {
  .timeline__both li.shakespeare .year {
    background: white;
    margin-right: -20px;
    position: relative;
    z-index: 1; } }
.timeline__both li.shakespeare .dot {
  position: absolute;
  background: #87d73e;
  height: 1px;
  width: 67%;
  top: 35px;
  right: 76px; }
@media only screen and (max-width: 767px) {
  .timeline__both li.shakespeare .dot {
    width: 50%;
    top: 15px;
    right: 0; } }
.timeline__both li.shakespeare .dot:before {
  content: "";
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  background: #87d73e;
  display: block;
  position: absolute;
  top: -12px;
  left: -12px;
  z-index: 1; }
.timeline__both li.shakespeare .dot:after {
  content: "";
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  background: #e6e5e5;
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 2;
  border: 1px solid white; }
.timeline__both .year {
  color: white;
  font-size: 14px;
  line-height: 18px;
  font-family: "Open Sans";
  font-weight: 700;
  font-style: normal;
  text-align: left;
  background: #d9d9d9;
  display: inline-block;
  padding: 2px 10px;
  margin-bottom: 6px; }
.timeline__cervantes {
  text-align: left;
  float: left;
  width: 37%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .timeline__cervantes {
    width: 33%; } }
@media only screen and (max-width: 767px) {
  .timeline__cervantes {
    display: none; } }
.timeline__shakespeare {
  text-align: right;
  float: right;
  width: 37%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .timeline__shakespeare {
    width: 33%; } }
@media only screen and (max-width: 767px) {
  .timeline__shakespeare {
    display: none; } }
.timeline .timeline__both li {
  transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
  visibility: hidden;
  opacity: 0; }
.timeline .timeline__both li.show-it {
  visibility: visible;
  opacity: 1; }
.timeline .timeline__both li.shakespeare {
  transform: translateX(120%); }
.timeline .timeline__both li.shakespeare.show-it {
  transform: translateX(0); }
.timeline .timeline__both li.cervantes {
  transform: translateX(-120%); }
.timeline .timeline__both li.cervantes.show-it {
  transform: translateX(0); }
.timeline__legend {
  clear: both;
  padding: 25px 0;
  text-align: center; }
@media only screen and (max-width: 767px) {
  .timeline__legend {
    text-align: left; } }
.timeline__legend ul, .timeline__legend strong {
  display: inline-block;
  vertical-align: middle; }
@media only screen and (max-width: 767px) {
  .timeline__legend ul, .timeline__legend strong {
    display: block;
    margin-bottom: 10px; } }
.timeline__legend strong {
  margin-top: -5px; }
.timeline__legend ul {
  margin-left: 10px; }
.timeline__legend li {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 5px; }
@media only screen and (max-width: 767px) {
  .timeline__legend li {
    display: block;
    margin-right: 0; } }
.timeline__legend li:before {
  content: '|';
  margin-right: 8px; }
@media only screen and (max-width: 767px) {
  .timeline__legend li:before {
    content: none; } }
.timeline__legend li:first-child:before {
  content: none; }
.timeline__legend .icon {
  vertical-align: middle; }
@media only screen and (max-width: 767px) {
  .timeline__legend .icon {
    margin-right: 5px; } }

/* 
  ACCORDION
*/
.accordion {
  border-bottom: 1px solid #dbdbdb; }
.accordion__link {
  display: block;
  color: #0f1427;
  font-size: 17px;
  line-height: 22px;
  font-weight: normal;
  font-family: "Open Sans";
  text-transform: uppercase;
  padding: 30px 50px 25px 85px;
  position: relative;
  text-align: left; }
.accordion__link:after {
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  content: "";
  background: url("../../images/icons/down.svg") no-repeat left top;
  width: 33px;
  height: 19px;
  position: absolute;
  top: 35px;
  right: 0; }
@media only screen and (max-width: 767px) {
  .accordion__link:after {
    right: 10px;
    top: 30px; } }
@media only screen and (max-width: 767px) {
  .accordion__link {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 55px; } }
.accordion__link strong {
  color: #0f1427;
  font-size: 75px;
  line-height: 79px;
  font-weight: normal;
  font-family: "Playfair Display";
  position: absolute;
  top: 12px;
  left: 0;
  width: 76px;
  text-align: center; }
@media only screen and (max-width: 767px) {
  .accordion__link strong {
    font-size: 40px;
    line-height: 44px;
    width: 50px;
    top: 16px; } }
.accordion__content {
  overflow: hidden;
  max-height: 0;
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1); }
.accordion__content ul {
  margin-bottom: 25px; }
.accordion__content li {
  color: #0f1427;
  font-size: 14px;
  line-height: 30px;
  font-weight: normal;
  font-family: "Open Sans";
  text-align: left;
  margin: 0; }
@media only screen and (max-width: 767px) {
  .accordion__content li {
    line-height: 18px;
    margin-bottom: 8px; } }
.accordion__content a {
  color: #0f1427;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
.accordion__content strong {
  display: inline-block;
  margin-right: 10px; }
@media only screen and (max-width: 767px) {
  .accordion__content strong {
    display: block; } }
.accordion.active .accordion__content {
  transition: all .7s ease-in;
  max-height: 900px; }
.accordion.active .accordion__link:after {
  background: url("../../images/icons/up.svg") no-repeat left top; }
.accordion.accordion--cervantes .accordion__content a:hover, .accordion.accordion--cervantes .accordion__content a:focus {
  color: #67cbb8; }
.accordion.accordion--shakespeare .accordion__content a:hover, .accordion.accordion--shakespeare .accordion__content a:focus {
  color: #3eafbd; }
.accordion.accordion--common .accordion__content a:hover, .accordion.accordion--common .accordion__content a:focus {
  color: #e0b318; }

/* 
  CATEGORY
*/
.category {
  text-align: left;
  border-top: 1px solid #e3e3e3;
  padding-top: 30px;
  margin-top: 30px;
  overflow: hidden; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .category {
    margin-left: 0;
    margin-right: 0; } }
@media only screen and (max-width: 767px) {
  .category {
    margin-left: 0;
    margin-right: 0; } }
.category.first {
  border-top: none;
  margin-top: 0;
  padding-top: 0; }
.category.first .category__title {
  margin-bottom: 15px; }
.category .post {
  float: left;
  width: 50%;
  padding: 0;
  padding-right: 5%;
  margin: 0; }
@media only screen and (max-width: 767px) {
  .category .post {
    float: none;
    width: auto;
    padding-right: 0; } }
.category__title {
  color: #0f1427;
  font-size: 40px;
  font-family: "Playfair Display";
  font-weight: 800;
  font-style: italic;
  line-height: 44px;
  display: block;
  margin-bottom: 35px;
  text-transform: uppercase; }
.category .post__author {
  margin-top: 0;
  font-weight: normal; }
.category .post__content {
  font-size: 15px; }
.category .post .post__author {
  margin-bottom: 15px; }
.category .post__title {
  font-size: 26px;
  margin-bottom: 10px; }
.category .images__slider .sy-slide > img {
  width: auto;
  max-width: 90%;
  max-height: 450px;
  margin: 0 auto;
  transform: scale(1); }
.category .images__slider article {
  padding: 1px; }
.category .sy-controls li {
  margin-top: -32px; }

/* 
  ICON
*/
.icon {
  display: inline-block;
  text-indent: -999em;
  overflow: hidden; }
.icon__share {
  width: 26px;
  height: 30px;
  background: url("../../images/icons/share.svg") no-repeat left top;
  background-size: cover; }
.icon__comedia {
  width: 22px;
  height: 23px;
  background: url("../../images/icons/timeline.png") no-repeat left top; }
.icon__comedia.icon--small {
  width: 13px;
  height: 14px;
  background-position: left -104px; }
.icon__tragedia {
  width: 22px;
  height: 23px;
  background: url("../../images/icons/timeline.png") no-repeat left -24px; }
.icon__tragedia.icon--small {
  width: 13px;
  height: 14px;
  background-position: left -118px; }
.icon__drama-historico {
  width: 29px;
  height: 31px;
  background: url("../../images/icons/timeline.png") no-repeat left -49px; }
.icon__drama-historico.icon--small {
  width: 17px;
  height: 17px;
  background-position: left -133px; }
.icon__tragicomedia {
  width: 45px;
  height: 23px;
  background: url("../../images/icons/timeline.png") no-repeat left -80px; }
.icon__tragicomedia.icon--small {
  width: 26px;
  height: 14px;
  background-position: left -150px; }
.icon__twitter {
  width: 40px;
  height: 40px;
  background: url("../../images/icons/twitter.svg") no-repeat left top;
  background-size: cover; }
.icon__facebook {
  width: 40px;
  height: 40px;
  background: url("../../images/icons/facebook.svg") no-repeat left top;
  background-size: cover; }

/**
 *
 * slippry v1.3.1 - Responsive content slider for jQuery
 * http://slippry.com
 *
 * Authors: Lukas Jakob Hafner - @saftsaak
 *          Thomas Hurd - @SeenNotHurd
 *
 * Copyright 2015, booncon oy - http://booncon.com
 *
 *
 * Released under the MIT license - http://opensource.org/licenses/MIT
 */
@keyframes left-right {
  0% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); }
  100% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); } }
@keyframes right-left {
  0% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); }
  100% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); } }
.sy-box.sy-loading .sy-slides-wrap, .sy-box.sy-loading .sy-pager {
  visibility: hidden; }

.sy-slides-wrap {
  position: relative;
  height: 100%;
  width: 100%; }

.sy-slides-wrap:hover .sy-controls {
  display: block; }

.sy-slides-crop {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden; }

.sy-list {
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute; }

.sy-list.horizontal {
  -moz-transition: left ease;
  -o-transition: left ease;
  -webkit-transition: left ease;
  transition: left ease; }

.sy-list.vertical {
  -moz-transition: top ease;
  -o-transition: top ease;
  -webkit-transition: top ease;
  transition: top ease; }

.sy-slide {
  position: absolute;
  width: 100%;
  z-index: 2; }

.sy-slide.kenburns {
  width: 140%;
  left: -20%; }

.sy-slide.kenburns.useCSS {
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  -webkit-transition-property: opacity;
  transition-property: opacity; }

.sy-slide.kenburns.useCSS.sy-ken:nth-child(1n) {
  -webkit-animation-name: left-right;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: left-right;
  -moz-animation-fill-mode: forwards;
  -o-animation-name: left-right;
  -o-animation-fill-mode: forwards;
  animation-name: left-right;
  animation-fill-mode: forwards; }

.sy-slide.kenburns.useCSS.sy-ken:nth-child(2n) {
  -webkit-animation-name: right-left;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: right-left;
  -moz-animation-fill-mode: forwards;
  -o-animation-name: right-left;
  -o-animation-fill-mode: forwards;
  animation-name: right-left;
  animation-fill-mode: forwards; }

.sy-slide.sy-active {
  z-index: 3; }

.sy-slide > img {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  border: 0; }

.sy-slide > a {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%; }

.sy-slide > a > img {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  border: 0; }

.sy-controls {
  list-style: none;
  padding: 0;
  margin: 0; }

.sy-controls li {
  position: absolute;
  width: 36px;
  height: 65px;
  top: 50%;
  margin-top: -54px;
  z-index: 33; }

.sy-controls li.sy-prev {
  left: 0; }

.sy-controls li.sy-next {
  right: 0; }

.sy-controls li a {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  text-indent: -9999px; }

.sy-controls li a:link, .sy-controls li a:visited {
  opacity: 0.4; }

.sy-controls li a:hover, .sy-controls li a:focus {
  opacity: 0.8;
  outline: none; }

.sy-pager {
  overflow: hidden;
  display: block;
  width: 100%;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  text-align: center; }

.sy-pager li {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin: 0 5px 0 0; }
@media only screen and (max-width: 767px) {
  .sy-pager li {
    margin: 0 10px 0 0; } }

.sy-pager li a {
  width: 100%;
  height: 100%;
  text-indent: -9999px;
  display: block;
  background: #f6f3ef;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%; }

.sy-pager li.sy-active a {
  background: #3eafbd; }

.sy-pager li a:link, .sy-pager li a:visited {
  opacity: 1.0; }

.sy-pager li a:hover, .sy-pager li a:focus {
  opacity: 0.6; }

.sy-filler {
  width: 100%; }

.sy-filler.ready {
  -moz-transition: padding 600ms ease;
  -o-transition: padding 600ms ease;
  -webkit-transition: padding 600ms ease;
  transition: padding 600ms ease; }

.sy-box .sy-slides-crop {
  overflow: visible; }

.sy-box .sy-slide {
  opacity: 0.6;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s; }

.sy-box .sy-slide.sy-active {
  opacity: 1; }

.sy-box .sy-slide.sy-active, .sy-box .sy-slide.sy-active.transition {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s; }

.image-content {
  position: relative; }

.image-content img {
  display: block;
  width: 100%; }

.sy-box {
  overflow: hidden;
  position: relative; }

.sy-box .sy-slides-wrap {
  margin-left: auto;
  margin-right: auto; }

body#shakespeare .chapter-six .sy-slides-wrap {
  min-width: 350px;
  max-width: 400px;
  width: 100%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body#shakespeare .chapter-six .sy-slides-wrap {
    min-width: 300px;
    max-width: 300px; } }
@media only screen and (max-width: 767px) {
  body#shakespeare .chapter-six .sy-slides-wrap {
    min-width: 200px;
    max-width: 280px; } }

body#shakespeare .chapter-six .sy-box {
  border-bottom: 1px solid #f6f3ef;
  padding-bottom: 25px;
  margin-bottom: 25px; }

.sy-box .sy-slide img {
  transform: scale(0.7);
  transform-origin: right center;
  opacity: .4;
  transition: all 2s cubic-bezier(0.19, 1, 0.22, 1); }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sy-box .sy-slide img {
    transform: scale(0.5); } }

.sy-box .sy-slide.sy-active + .sy-slide img {
  transform-origin: left center; }

.sy-box .sy-slide.sy-active img {
  transform: scale(1);
  opacity: 1; }

.sy-controls li.sy-prev a {
  background: url("../../images/icons/prev.svg") no-repeat center center; }

.sy-controls li.sy-next a {
  background: url("../../images/icons/next.svg") no-repeat center center; }

/*
  CHARACTERS
*/
.characters__info {
  min-height: 250px; }
.characters__text {
  display: none;
  text-align: center;
  margin: 0 12%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .characters__info {
    margin-bottom: 20px; }
}
@media only screen and (max-width: 767px) {
  .characters__text {
    margin: 0; }
  .characters__info {
    margin-bottom: 20px; }
}
.characters__text p {
  color: #0f1427;
  font-size: 15px;
  line-height: 20px;
  font-family: "Open Sans";
  font-weight: normal;
  margin-bottom: 10px; }
.characters__text.show {
  display: block; }
.characters__title {
  color: #0f1427;
  font-size: 25px;
  line-height: 30px;
  font-family: "Playfair Display";
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px; }

/* 
  QUOTES
*/
.quotes__wrapper {
  width: 90%;
  max-width: 970px;
  margin: 0 auto;
  position: relative; }
.quotes__image {
  position: absolute;
  top: 20px;
  left: 10%;
  z-index: 9;
  width: 25.5%; }
@media only screen and (max-width: 767px) {
  .quotes__image {
    position: relative;
    top: auto;
    left: auto; } }
.quotes__slider article {
  padding: 1px; }
.quotes__slider blockquote {
  margin-left: 38%;
  margin-top: 12%;
  margin-bottom: 10%;
  margin-right: 5%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .quotes__slider blockquote {
    /*margin-top: 40px;
    margin-bottom: 60px;*/ } }
@media only screen and (max-width: 767px) {
  .quotes__slider blockquote {
    margin: 20px; } }
.quotes__slider blockquote:before {
  content: "";
  display: inline-block;
  width: 177px;
  height: 125px;
  background: url("../../images/quotes.png") no-repeat left top;
  margin: 0 auto 20px; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .quotes__slider blockquote:before {
    width: 120px;
    height: 90px;
    background-size: 100% auto; } }
@media only screen and (max-width: 767px) {
  .quotes__slider blockquote:before {
    width: 120px;
    height: 90px;
    background-size: 100% auto; } }
.quotes__slider blockquote p {
  color: #0f1427;
  font-family: "Playfair Display";
  font-size: 35px;
  line-height: 50px;
  font-weight: normal;
  font-style: italic;
  text-align: center; }
@media only screen and (max-width: 767px) {
  .quotes__slider blockquote p {
    font-size: 25px;
    line-height: 35px; } }
.quotes__slider cite {
  display: block;
  text-align: center;
  font-family: "Playfair Display";
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
  font-style: italic;
  margin-top: 30px; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .quotes__slider cite {
    margin-top: 10px; } }
@media only screen and (max-width: 767px) {
  .quotes__slider cite {
    font-size: 20px;
    line-height: 30px;
    margin-top: 0; } }
@media only screen and (max-width: 767px) {
  .quotes .sy-controls li {
    top: auto;
    margin-top: 0;
    bottom: 0; } }
.quotes .sy-controls li.sy-prev a {
  background: url("../../images/icons/prev-white.svg") no-repeat center center; }
.quotes .sy-controls li.sy-next a {
  background: url("../../images/icons/next-white.svg") no-repeat center center; }

/* 
  COLOR-ANIMATIONS
*/
@keyframes animate-bg-color {
  0% {
    background: #c3ddd8; }
  25% {
    background: #9dcfc8; }
  50% {
    background: #87d4ec; }
  75% {
    background: #f0735a; } }
body {
  background: #c3ddd8; }

body#home {
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  animation: animate-bg-color 32s infinite; }

body#cervantes {
  background: #c3ddd8; }

body#shakespeare {
  background: #add6dc; }

body#comun {
  background: #f6f3ef; }

@keyframes animate-darken-bg-color {
  0% {
    background: #92c1b8; }
  25% {
    background: #6ab6ab; }
  50% {
    background: #45bce2; }
  75% {
    background: #e83815; } }
.panel {
  background: #a2cbc3;
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  animation: animate-darken-bg-color 32s infinite; }

@keyframes animate-border-right-color {
  0% {
    border-right-color: #c3ddd8; }
  25% {
    border-right-color: #9dcfc8; }
  50% {
    border-right-color: #87d4ec; }
  75% {
    border-right-color: #f0735a; } }
.panel__left:before {
  border-right-color: #c3ddd8;
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  animation: animate-border-right-color 32s infinite; }

@keyframes animate-border-left-color {
  0% {
    border-left-color: #c3ddd8; }
  25% {
    border-left-color: #9dcfc8; }
  50% {
    border-left-color: #87d4ec; }
  75% {
    border-left-color: #f0735a; } }
.panel__right:before {
  border-left-color: #c3ddd8;
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  animation: animate-border-left-color 32s infinite; }

@keyframes animate-border-top-color {
  0% {
    border-top-color: #c3ddd8; }
  25% {
    border-top-color: #9dcfc8; }
  50% {
    border-top-color: #87d4ec; }
  75% {
    border-top-color: #f0735a; } }
.panel__bottom:before {
  border-top-color: #c3ddd8;
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  animation: animate-border-top-color 32s infinite; }
.close-panel {
  width: 26px;
  height: 26px;
  background: url("../../images/icons/close.svg") no-repeat left top;
  text-indent: -999em;
  overflow: hidden;
  position: absolute;
}
.panel__left .close-panel {
  top: 20px;
  right: 20px;
}
.panel__right .close-panel {
  top: 20px;
  left: 20px;
}
.panel__bottom .close-panel {
  top: 20px;
  right: 20px;
}


/* 
  EXTEND
*/
.separator {
  margin: 25px auto;
  display: block;
  background: white;
  height: 1px; }

.page-title {
  color: #0f1427;
  font-size: 70px;
  font-family: "Playfair Display";
  font-weight: 800;
  font-style: normal;
  line-height: 74px;
  text-transform: uppercase;
  display: block; }
@media only screen and (max-width: 767px) {
  .page-title {
    font-size: 34px;
    line-height: 44px;
    margin-top: 30px; } }

.mbn {
  margin-bottom: 0; }