@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600&family=Noto+Serif+Old+Uyghur&display=swap');
body {
font-family: 'Noto Serif Old Uyghur', serif;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper,
.content {
  position: relative;
  width: 100%;
  z-index: 1;
}

.content {
  overflow-x: hidden;
}

.content .section {
    width: 100%;
    min-height: 100vh;
    height: auto;
    padding: 75px 50px 100px 50px;
}

.content .section.hero {
  background-image: url(../img/background-back3.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.image-container {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  perspective: 500px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.gsap-marker- {
    visibility: hidden;
}
h1 {
    transform: skewY(-7deg);
    position: relative;
    top: 16px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 6vw;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 3vw;
    margin: 25px 0px 25px 0px;
    padding-bottom: 20px;
    /* border-bottom: 1px solid #b2afa3; */
    color: #8d212b;
    letter-spacing: 6px;
    text-shadow: 0.5px 0.5px #f1f4d8, 1px 1px #f1f4d8, 2px 2px #f1f4d8, 2.5px 2.5px #f1f4d8, 3px 3px #e57c31, 3.5px 3.5px #e57c31, 4px 4px #e57c31, 4.5px 4.5px #e57c31, 5px 5px #e57c31, 5.5px 5.5px #e57c31, 6px 6px #e57c31, 6.5px 6.5px #e57c31, 7px 7px #e57c31, 7.5px 7.5px #e57c31, 8px 8px #e57c31;
}
h1>span {
        font-size: 3vw;
}
.gradient-purple{
    background-color: #8b9cb0;
}
#historia {
    max-width: 910px;
    margin: auto;
    text-align: justify;
    font-size: 1.4rem;
}
.historia-iz {
    width: 605px;
    padding: 0 15px 0 0;
    margin: 0px 0 30px 20px;
    float: left;
    clear: right;
    text-align: left;
    border-right: 1px solid #b2afa3;
    display: block;
}
.papertop {
    padding: 50px 0px;
    display: flex;
}
.historia-de {
    width: 246px;
    padding-left: 15px;
    text-align: left;
    float: left;
    clear: right;
        font-size: 1rem;
}
.f-de-1 {
    width: 100%;
    border: 7px solid white;
    -webkit-box-shadow: inset 0 0 0 1px red;
    -moz-box-shadow: inset 0 0 0 1px red;
    box-shadow: inset 0 0 0 1px red;    
    filter: sepia(70%);
}
.f-de-2 {
    width: 100%;

}
.p-title {
    font-weight: 600;
font-size: 1.8rem;
text-align: center;
margin-bottom: 25px;
}

section#entorno {
    padding: 0;
    background-color: #ecc716;
}
#entorno .container-car {
position:relative;
max-width: 100%;
}
#entorno img.car {
  width: 100%;
  height: auto;
}
#entorno .tit-encuentro {
font-family: 'Barlow Condensed',sans-serif;
font-size: 6vw;
text-transform: uppercase;
width: 80%;
text-align: center;
margin: auto;
letter-spacing: -5px;
text-shadow: 3px 3px 8px rgba(128, 0, 0, 0.57);
color: #ecc716;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}
#entorno .los-bares {
    padding: 2rem 2rem;
    position: relative;
    min-height: calc(100vh);
}
#entorno .los-bares h2, .carta h2{
    transform: skewY(-7deg);
    position: relative;
    top: -12px;
    color: #8d212b;
    text-shadow: 0.5px 0.5px #f1f4d8, 1px 1px #f1f4d8, 2px 2px #f1f4d8, 2.5px 2.5px #f1f4d8, 3px 3px #e57c31, 3.5px 3.5px #e57c31, 4px 4px #e57c31, 4.5px 4.5px #e57c31, 5px 5px #e57c31, 5.5px 5.5px #e57c31, 6px 6px #e57c31, 6.5px 6.5px #e57c31, 7px 7px #e57c31, 7.5px 7.5px #e57c31, 8px 8px #e57c31;
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 5vw;
    letter-spacing: -1px;
}
#entorno .los-bares .contexto{
    width: 65%;
    padding: 50px 0px 0px 0px;
    margin: auto;
    font-size: 1.4rem;
}
#entorno .img-carreras img{
    max-width: 500px;
    width: 100%;
    border: solid 15px #fff;
    filter: sepia(70%);
}
#entorno .img-carreras {
    display: flex
;
    justify-content: space-around;
    width: 100%;
}
#entorno .contexto p {
    text-align: justify;
    font-size: 1.4rem;
    margin-block-start: 1em;
    margin-block-end: 1em;
}
section#carta {
    padding: 2rem 1rem;
    position: relative;
    z-index: 1;
    min-height: calc(100vh);
}
.carta {
    background: url(../img/old-paper.webp) no-repeat center center fixed;
    background-size: cover;
}
.carta .contexto img {
    width: 50%;
}
.color-cero {

    color: #514d46;
}
 .color-uno {
     background-color: #6d8e93;
}
 .color-dos{
     background-color: #7b484d;
     box-shadow: inset 0 0 0 1000px #af7b484d;
}
 .color-tres {
     background-color: #b86d36;
     box-shadow: inset 0 0 0 1000px #afb86d36;
}
 .color-cuatro {
     background-color: #7a6c44;
     box-shadow: inset 0 0 0 1000px #af7a6c44;
}
 .color-cinco {
     background-color: #667971;
	 box-shadow: inset 0 0 0 1000px #af667971;
}
.carta h2 {
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 5vw;
    letter-spacing: -1px;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
}
#direccion {
        min-height: auto;
}
/* ********** menu ********** */

.hamburger{
    mix-blend-mode: difference;
    position: fixed;
    background-color: transparent;
    right: 25;
    top: 0;
    height: 20px;
    width: 22px;
	padding:20px 20px;
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
	-webkit-transition:-webkit-transform 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
	transition:transform 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
	z-index:1002;
	cursor:pointer;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}
.hamburger.is-active{
  background-color:none;
}
._layer{
	background:#d9d6cc;
	margin-bottom:4px;
	border-radius:2px;
	width:28px;
	height:4px;
	opacity:1;
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
	-webkit-transition:all 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
	transition:all 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
}
.hamburger:hover .-top{
	-webkit-transform:translateY(-100%);
	-ms-transform:translateY(-100%);
	transform:translateY(-100%);
}
.hamburger:hover .-bottom{
	-webkit-transform:translateY(50%);
	-ms-transform:translateY(100%);
	transform:translateY(100%);
	}
.hamburger.is-active .-top{
	-webkit-transform:translateY(200%) rotate(45deg) !important;
	-ms-transform:translateY(200%) rotate(45deg) !important;
	transform:translateY(200%) rotate(45deg) !important;
}
.hamburger.is-active .-mid{
	opacity:0;
}
.hamburger.is-active .-bottom{
	-webkit-transform:translateY(-200%) rotate(135deg) !important;
	-ms-transform:translateY(-200%) rotate(135deg) !important;
	transform:translateY(-200%) rotate(135deg) !important;
}

.menuppal.is_active{
  transform: translate3d(0px, 0px, 0px);
}
.menuppal{
   background-color: #212121;
    bottom: 0;
    height: 75%;
    left: 0;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    transform: translate3d(0px, -100%, 0px);
    transition: transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98) 0s;
    width: 100%;
    z-index: 1001;
}
.menuppal ul{
  margin:0;padding:0;
}
.menuppal ul li { 
  list-style: none;
	text-align:center;
  font-family: 'Barlow Condensed', sans-serif;
	color:$nav-color-text;
	font-size:1.4rem;
	line-height:3em;
	height:3.5em;
  color:#369;
	text-transform:none;
	font-weight:bold;
  border-bottom: solid 1px  rgb(122, 116, 105);
      overflow: hidden;
}
.menuppal ul li a{
    text-decoration: none;
    color: rgb(122, 116, 105);
    font-size: 8.5vh;
    bottom: -20px;
    position: relative;
        transition: 0.5s;
}
.menuppal ul li a:hover{
  text-decoration:none;
  color:#d9d6cc;
      bottom: -10px;
    position: relative;
        transition: 0.5s;
}
@media only screen and (max-width: 600px) {
.menuppal ul li a {
    bottom: -20px;
}
}
/* ****************** RESOLUCIONES MV **************** */
@media (max-width: 600px) {
.content .section {
    padding: 0PX;
            padding-top: 50px;
}
#historia {
    max-width: 100%;
    font-size: 1.4rem;
}
h1 {
    font-size: 13vw;
    line-height: 13vw;
        letter-spacing: 3px;
}
h1>span {
    font-size: 8vw;
}
.historia-iz {
    width: 100%;
        padding: 10px 20px 10px 20px;
            margin: 0;
}
.historia-de {
    max-width: 100%;
    width: auto;
        padding: 10px 20px 10px 20px;
        padding-left: 20px;
}
#entorno .tit-encuentro {
    letter-spacing: normal;
}
#entorno .los-bares h2 {
    font-size: 10vw;
    letter-spacing: normal;    
}
#entorno .los-bares {
    padding: 2rem 0rem;
}
   #entorno .los-bares .contexto {
    padding: 15px 0px 0px 0px;
    width: 80%;
   }
   #entorno .contexto p {
    text-align: left;
   }
       .img-carreras {
        display: flex;
        justify-content: normal;
        width: 100%;
        flex-direction: column;
    }
    #entorno .img-carreras img {
        margin: 10px 0px 10px 0px;
        width: 90%;
            border: solid 11px #fff;
}
#entorno .img-carreras {
        display: flex;
        align-content: center;
        flex-wrap: wrap;
}
    .content .gradient-purple {
        padding: 20px 0px 30px 0px;
}
.content .carta ,section#carta {
        padding: 1rem 0rem;
    position: relative;
    z-index: 1;
    min-height: calc(100vh);
    
}
.carta .contexto img {
            width: 100%;
}
.carta h2 {
    font-size: 8vw;
    letter-spacing: 0px;
}
.carta .contexto img {
    width: 100%;
}
}