:root {
  --page-backcolor-color: #f0f0f0; 
  --black-color: #000000; 
  --white-color: #ffffff; 
  --story-wrapper-backcolor: #000000; 
  --button-text: #000000; 
  --button-backcolor: #FFFFFF; 
  --button-hover-text: #ffffff; 
  --button-hover-backcolor: var(--theme-palette-color-5);
  
  --button-menu-text: #000000; 
  --button-menu-backcolor: #FFFFFF;   
  
  --button-menu-hover-text: #ffffff; 
  --button-menu-hover-backcolor: #000000;   
  
  --menu-overlay-backcolor: var(--theme-palette-color-5);   
  --menu-overlay-text-color: #FFFFFF;   
  
  --content-overlay-backcolor: var(--theme-palette-color-8);      
  --content-overlay-text-color: var(--theme-palette-color-1);      

	--wp--preset--spacing--20 : 0.4rem;
    --wp--preset--spacing--30 : 0.8rem;
    --wp--preset--spacing--40 : 1.6rem;
    --wp--preset--spacing--50 : 2.4rem;
	--wp--preset--spacing--60 : 3.2rem;
	--wp--preset--spacing--70 : 4.6rem;
  
	--arrow-backcolor: var(--theme-palette-color-2);      
--arrow-backcolor-hover: var(--theme-palette-color-5);
    --arrow-text: var(--theme-palette-color-8);      

}

*+:is(h1,h2,h3,h4,h5,h6) {
    font-family : 'Quicksand' !important;
}


h1,h2,h3,h4,h5,h6 {
    font-family : 'Quicksand' !important;
	font-weight : normal !important;
	display : inline-block;
	line-height : 1;
}

h1 strong,h2 strong,h3 strong,h4 strong,h5 strong,h6 strong {
	font-family : 'Quicksand' !important;
	font-weight : bold !important;
}

* {
  font-family: 'Quicksand', Georgia, Arial, sans-serif;
}

h1 {
    font-size : 2.7rem;
}

h2 {
    font-size : 2.3rem;
}

h3 {
    font-size : 2.1rem;
}

h4 {
    font-size : 1.8rem;
}

h5 {
    font-size : 1.6rem;
}

h6 {
    font-size : 1.3rem;
}




body, html {
  margin: 0;
  background-color: var(--page-backcolor-color);
  font-family: 'Quicksand', Georgia, Arial, sans-serif;
  color: var(--black-color);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
	width: 100vw;
}


.has-background {
	padding : 10px;

}

.bg-image {
	position : absolute;
	top : 0px;
	left : 0px;
	right : 0px;
	bottom : 0px;
	margin : 0px;
	padding : 0px;
	width : 100vw;
	height : 100vh;
	overflow : unset;
	z-index : 10;

}

.bg-image:before {
content : "";
position : absolute;
top : 0px;
left : 0px;
right : 0px;
bottom : 0px;
margin : 0px;
padding : 0px;
width : 100vw;
height : 100vh;
background-color : #000000;
z-index : 12;
opacity : 0.7;
}

.page-wrapper {
  width: auto;
  height: 95%;	
  position : relative;
  overflow: hidden;
  margin : auto;
  aspect-ratio: 9/16;
  transform: translateZ(0);
	z-index : 15;
}

.story-wrapper {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.story-slide:after {
	content : " ";
position : absolute;
top : 0px;
bottom : 0px;
left : 0px;
right : 0px;
height : 100%;
width : 100%;
z-index : 99;
background: rgba(0, 0, 0, 10);
pointer-events: none;
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(255,255,255,0.01) 10%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0.01) 90%,rgba(0,0,0,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

@media (min-aspect-ratio: 9/16) {
  .story-wrapper {
    width: auto;
    height: 100%;
    aspect-ratio: 9/16;
    background: var(--story-wrapper-backcolor);
  }
}

.story-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.story-wrapper {
 
  &.slick-initialized {
    opacity: 1;
    visibility: visible;
  }
}
.story-slide {
  position: relative;
  height: 100%;
  @extend %bv_hidden;
  &::before {
    @extend %filled_obj;
    @extend %bv_hidden;
    background-color: var(--story-wrapper-backcolor);
    opacity: .3;
    z-index: 1;
  }
  video {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform:translate(-50%, -50%);
  }
  iframe {
    /*position: relative;*/
    pointer-events: none;
  }
  figure {
    position: relative;
    height: 100%;
  }
  .slide-image {
    opacity: 0;
    height: 100%;
    background-size: cover;
    background-position: center;
    // background-color:rgba(#c46897,.38);
    // background-blend-mode:overlay;
    transition:all .2s ease;
    &.show {
      opacity: 1;
    }
  }
  .image-entity {
    width: 100%;
    opacity: 0;
    visibility: hidden;
  }
  .loading {
    position: absolute;
    top: 44%;
    left: 0;
    width: 100%;
  }
  .slide-media {
    animation:slideOut .1s cubic-bezier(0.4, 0.29, 0.01, 1);
  }
  &.slick-active {
    z-index: 1;
    .slide-media {
      animation:slideIn 0.1s cubic-bezier(0.4, 0.29, 0.01, 1);
    }
    .caption {
      opacity: 1;
      transform:translateY(0);
      transition:all .1s cubic-bezier(0.32, 0.34, 0, 1.62) .6s;
    }
  }
}

@keyframes slideIn {
  from {
    filter:blur(15px);
  }
  to {
    filter:blur(0);
  }
}
@keyframes slideOut {
  from {
    filter:blur(0);
  }
  to {
    filter:blur(15px);
  }
}

.tap-zone {
  position: absolute;
  top: 0;
  width: 20%;
  height: 100%;
  z-index: 50;
}
.tap-left {
  left: 0;
}
.tap-right {
  right: 0;
}

.arrow-zone {
  position: absolute;
  top: 0;
  
  z-index: 50;

}
.arrow-left {
  top: 50%;
  left: 30vw;
  /*transform: translate(-35rem, -50%);*/
	cursor : pointer;
}

.arrow-left:after, .arrow-right:after {
  content: "<";
  width : 50px;
height : 50px;
border-radius : 50%;
font-size : 20px;
display : flex;
font-weight : bold;
align-items : center;
justify-content : center;
color : var(--arrow-text);
background-color : var(--arrow-backcolor);
-webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.25); 
box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.25);
}

.arrow-left:hover:after, .arrow-right:hover:after {

background-color : var(--arrow-backcolor-hover);

}

.arrow-right {
  top: 50%;
  right: 30vw;
  /*transform: translate(35%, -50%);*/
	cursor : pointer;
}

.arrow-right:after {
  content: ">";
}



.slick-prev.slick-arrow {
	z-index : 99999;
	position : absolute;
	left : 15px;
	top : 45%;
}

.slick-next.slick-arrow {
	z-index : 99999;
	position : absolute;
	top : 45%;
	right : 15px;
}


.story-background {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.story-video {
  position: absolute;
  top: 0; 
left: 0;
  width: 100%;
  height: 100%;
  /*object-fit: cover;*/
  z-index: 1;
/*aspect-ratio : 9/16;*/
}

video.story-video {
  width: auto;
  height: 100vh;	
}

.story-content-wrapper{
  position: absolute;
  height : calc(100% - 200px);
	top: 0;  
	bottom: 0;
  width: calc(100% - 30px);
  text-align: center;
  padding: 100px 15px 100px 15px;
  z-index: 5;
}

/* .story-content {
  position: absolute;
  width: 100%;
  padding: 0 20px;
  z-index: 3;
} */

.story-text {
	margin : 0px;
}

.cta-button {
  background: var(--button-backcolor);
  color: var(--button-text);
  border: none;
  padding: 10px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease;
font-size : 16px;
text-transform : uppercase;
width : 100%;
max-width : 260px;

}

.cta-button:hover {
  background: var(--button-hover-backcolor);
  color: var(--button-hover-text);
}

.cta-button {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
z-index : 9999;
}



.story-progress {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  height: 4px;
  width: calc(100% - 10px);
  display: flex;
  z-index: 40;
}

.progress-bar {
  margin: 2px;
  background: rgba(255,255,255,0.3);
  position: relative;
  overflow: hidden;
  display: block;
  width: calc(100% - 4px);
  height : 3px;
}

.progress-bar .fill {
  height: 100%;
  padding : 2px 0px;
  background: white;
  width: 0%;
  transition: width linear;
}

.slick-list, .slick-track {
	height : 100%;
}

.modal a.close-modal {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  color: white;
  cursor: pointer;
}


.modal {
	max-width : auto;
	width : calc(100% - 60px);
}







/* CSS PER MENU */




.button_container, .button_container_content {
  position: relative;
  background-color : var(--button-menu-backcolor);
  
  height: 50px;
  width: 50px;
  cursor: pointer;
  z-index: 100;
  transition: opacity .25s ease;
  margin-bottom : 0px !important;
  border-radius : 50%;
border : 0px;
  
  &:hover {
    opacity: .7;
  }
  
  &.active {
	 
	 div.string {
		 display : none;
	 }
    .top {
      transform: translateY(13px) translateX(0) rotate(45deg);
      background: var(--button-menu-text);
	  display : block;
    }
    .middle {
		
      opacity: 0;
      background: var(--button-menu-text);
	  display : block;
    }
    
    .bottom {
      transform: translateY(-13px) translateX(0) rotate(-45deg);
      background: var(--button-menu-text);
	  display : block;
    }
  }
  
  div.string {
	text-transform : none;
	transition:  all .35s ease;
	width : 50px;
  }  
  
  span {
  
  background: var(--button-menu-text);
  border: none;
  height: 2px;
  width: 50%;
  position: absolute;
  top: 0;
  left: 12px;
  transition:  all .35s ease;
  cursor: pointer;
  /*display : none;*/
    &:nth-of-type(1) {
      top: 13px;
    }  
    
    &:nth-of-type(2) {
      top: 23px;
    }
    
    &:nth-of-type(3) {
      top: 33px;
    }
  }
}

.button_container_content {
	padding : 0px !important;
	margin : 0px !important;
	
	top : 25px;
	left : 15px;
	z-index : 1000;	
}

.fsmenu.active {
	
	position: absolute;
    /*width: 50%;*/
    max-width: 50%;
    top: 5px;
    right: 15px;
}

.fscommand {
	
}

.fscommand.active {
	/*display : grid;
	grid-template-columns : 27% 1fr 27%;
	column-gap : 10px;
	row-gap : 10px;*/
	padding-top : 20px;
	padding-bottom : 20px;
	width : 100%;
	align-items : end;
	z-index: 999999;
    position: relative;
	transition: background-color 1.35s;
    /*background: var(--theme-palette-color-5);
	border-bottom : 1px solid #cdcac6;*/
	
}
.menu-extra-content {
	color : var(--menu-overlay-text-color);
      display: block;
      position: relative;
      opacity: 0;	
	  font-size : 12px !important;	
}

.menu-extra-content * {
	color : var(--menu-overlay-text-color);
}

.bottomMenu {
	  margin-top : auto;
	  margin-bottom : 0px;	
    display: flex;
    flex-direction: column;
    /*justify-self: flex-end;*/
}

.secondary-menu {
	
	display : flex  !important;
	margin-top : 10px !important;

	
	a {
		font-size : 12px !important;	
		margin-right : 10px;
	}
}

.menu-extra-content p {
	  margin-top : auto;
	  margin-top : 0px;
}

.wp-block-social-links {
	  margin-top : auto;
	  margin-bottom : 0px;
}

.wp-block-social-links span{
	display : none;
}


.wp-block-social-links li{
	display : inline-block !important;
	margin-bottom : 0px !important;
}

.wp-block-social-links li a{
	padding : 0px !important;
	
}

.wp-block-social-links li svg{
	color : var(--menu-overlay-text-color);
	fill : var(--menu-overlay-text-color);
	width: 40px;
    height: 40px;	
}


.overlaymenu nav {
    position: relative;
    /*height: 70%;
    top: 100px;*/
	height: calc(100vh - 90px);
    text-align: left;
	flex-direction: column;
	display: flex;
	justify-content : start;
--sb-track-color: #000000;
  --sb-thumb-color: #70a0da;
  --sb-size: 8px;   
	overflow-y : hidden;  
	overflow-x : hidden;  
	padding : 20px 20px 70px 20px;

  }
  


.overlaymenu nav::-webkit-scrollbar {
  width: var(--sb-size);
}

.overlaymenu nav::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 2px;
}

.overlaymenu nav::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 2px;
}
	
.overlaymenu {
  position: fixed;
  background: var(--menu-overlay-backcolor);
  
  
  top: 0px;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .05s, height .05s;
  overflow: hidden;
  padding : 0px;
  
  
  &.open {
    opacity: 1;
    visibility: visible;
    height: 100vh;
	z-index : 99999;
    padding-bottom : 0px;
	/*-webkit-box-shadow: 5px 0px 20px -10px var(--menu-overlay-backcolor);
	box-shadow: 5px 0px 20px -10px var(--menu-overlay-backcolor);*/
	
	


	.menu-extra-content, .language-menu  {
		animation: fadeInRight .5s ease forwards;
		animation-delay: .35s;
	}	
	
    li {
      animation: fadeInRight .5s ease forwards;
      animation-delay: .35s;
      
		  &:nth-of-type(2) {
			animation-delay: .4s;
		  }
		  &:nth-of-type(3) {
			animation-delay: .45s;
		  }
		  &:nth-of-type(4) {
			animation-delay: .50s;
		  }
    }
	
	nav {
		overflow-y : auto;  
	}	
	
  }
}


  
.overlaymenu ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    /*height: 100%; */
	text-align : left;
	width : 100%;
    
    li {
      display: block;
      /*height: 25%;
      height: calc(100% / 4);
      min-height: 50px;*/
      position: relative;
      opacity: 0;
	  margin-bottom : 10px;
      
      a {
        display: block;
        position: relative;
        color: var(--menu-overlay-text-color);
        text-decoration: none;
		text-transform : uppercase;
		font-weight : normal;
        overflow: hidden;
		padding-bottom : 5px;
		font-size : 20px;
        
        &:hover:after,
         &:focus:after,
         &:active:after {
           width: 100%;
         }
        
        &:after {
          content: '';
          position: absolute;
          bottom: 0px;
          left: 50%;
          width: 0%;
		  
          transform: translateX(-50%);
          height: 1px;
          background: var(--menu-overlay-text-color);
          transition: .35s;
        }
      }
    }
  }

.overlay-menu .logo-menu {
	max-width : 150px;
	margin-bottom : 20px;
}
.overlay-menu .menu-item a {
	color: var(--menu-overlay-text-color) !important;
	font-size : 22px;
	margin-top : 10px;
	margin-bottom : 5px;
	border-bottom : 1px solid var(--menu-overlay-text-color);
}

.overlay-menu .menu-item .sub-menu a {
	color: var(--menu-overlay-text-color) !important;
	font-size : 18px;
	margin-top : 5px;
	margin-bottom : 5px;
	font-weight : normal;
	border : 0px;
}


.overlay-menu .language-menu {
	margin-top : 10px;
	margin-bottom : 10px;
	border-top : 1px solid var(--menu-overlay-text-color);
	padding-top : 10px;
	width : 100%;
	/*margin : auto;*/
    display: flex;
    justify-content: center;
    align-items: center;
	opacity : 0;
      position: relative;
}

.overlay-menu .language-menu a {
	font-size : 20px;
	font-weight : normal;
	color: var(--menu-overlay-text-color) !important;
	/*display : inline-block;*/
	text-transform : uppercase;
	text-decoration : none;
    padding: 0px;
    margin: 0px;
    line-height: 1;
    align-items: center;
display : flex;
}

.overlay-menu .language-menu a:after {
	content : " ";
	display : inline-block;

	color: var(--menu-overlay-text) !important;
	margin-left : 10px;
	margin-right : 10px;
	padding : 0px;
	width : 1px;
	background-color : var(--menu-overlay-text-color) !important;
	height : 30px;
}

.overlay-menu .language-menu a:last-child:after {
	content : "";
	display : none;
}


.fsmenu .secondmenu {
    z-index: 100;
}

.fsmenu {
	padding : 0px !important;
	margin : 0px !important;
	position : absolute;
	top : 25px;
	right : 15px;
	z-index : 1000;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

.noscroll { 
  overflow: hidden !important;
}

.noview { 
	transition: .35s;
	display: none !important;
}

.view { 
	transition: .35s;
	display: flex !important;
}

.volume-ico {
	width : 20px;
	height : 20px;
}

.bgaudio {
	opacity : 0 !important;
	width : 0px !important;
	height : 0px !important;
	padding : 0px !important;
	margin : 0px !important;
	position : absolute;
	top : 0;
	left : 0;
	z-index : -90;
}

/* FINE CSS PER MENU */

/* CSS MODAL CONTENT */

.overlaycontent {
  position: fixed;
  background: var(--content-overlay-backcolor);
  
  
  top: 0px;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: auto;
  
  
  
  &.open {
    opacity: 1;
    visibility: visible;
    height: 100%;
	z-index : 99999;
    padding-bottom : 50px;
	-webkit-box-shadow: 5px 0px 20px -10px var(--content-overlay-backcolor);
	box-shadow: 5px 0px 20px -10px var(--content-overlay-backcolor);
	
  }
}

.overlaycontent #extra-modal-content, .overlaycontent #extra-modal-content * {
	max-width : 100%;
	height : auto;
	
}

.overlaycontent #extra-modal-content {
	color: var(--content-overlay-text-color);
	padding : 20px;
}

.overlaycontent #extra-modal-content figure {
	
	padding : 0px;
	margin : 0px;
}

mark {
	color: inherit;
}

.logo-profilo {
	padding : 0px !important;
	margin : 0px !important;
	position : absolute;
	top : 25px;
	left : 15px;
	z-index : 1000;	
	display: flex;
    align-items: center;
}

.logo-profilo img {
	width : 50px;
	height : 50px;
	border-radius : 50%;
}

.logo-profilo span {
	color : var(--theme-palette-color-8);
font-size : 12px;
	text-decoration : none;
display : inline-block;
margin-left : 10px;
}



/* ANIMAZIONI PER FRONTEND */

.align-left {
  text-align: left;
  margin-left : 0;
  margin-right : auto;  
}

.align-center {
  text-align: center;
  margin : auto;
}

.align-right {
  text-align: right;
  margin-left : auto;
  margin-right : 0;
}

.d-flex {display : inline-flex; flex-wrap: wrap;}

.break-flex {
  flex-basis: 100%;
  height: 0;
}

.h100 {height : 100%;}
.vpos-top    { align-items : start; align-content : start;}
.vpos-top.align-center   { align-items : start; align-content : start;justify-self : center; }
.vpos-top.align-left   { align-items : start; align-content : start;justify-self : start; }
.vpos-top.align-right   { align-items : start; align-content : start;justify-self : end; }

.vpos-center { align-items : center; align-content : center;}
.vpos-center.align-center  { align-items : center; align-content : center;justify-self : center; }
.vpos-center.align-left { align-items : center; align-content : center;justify-self : start; }
.vpos-center.align-right { align-items : center; align-content : center;justify-self : end; }

.vpos-bottom { align-items : end;align-content : end;}
.vpos-bottom.align-center  { align-items : end; align-content : end;justify-self : center; }
.vpos-bottom.align-left { align-items : end; align-content : end;justify-self : start; }
.vpos-bottom.align-right { align-items : end; align-content : end;justify-self : end; }



.spancontent {
	padding: 10px 0px;
    margin: 0px;
    line-height: 1.1;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
	border-radius : 0px;
	
}

span[class*="-background-color"] {
	padding: 0px 10px 5px;
    margin: 0px;
    line-height: 1.6;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
	border-radius : 5px;
}

.fade-in {
  animation: fadeIn 0.8s ease-in-out both;
}

.slide-up {
  animation: slideUp 0.8s ease-out both;
}

.slide-down {
  animation: slideDown 0.8s ease-out both;
}

.slide-left {
  animation: slideLeft 0.8s ease-out both;
}

.slide-right {
  animation: slideRight 0.8s ease-out both;
}

.zoom-in {
  animation: zoomIn 0.8s ease-in-out both;
}

.zoom-out {
  animation: zoomOut 0.8s ease-in-out both;
}

.bounce-in {
  animation: bounceIn 0.9s ease-out both;
}

.flip-in {
  animation: flipIn 0.9s ease-in-out both;
}

.rotate-in {
  animation: rotateIn 0.7s ease-out both;
}


@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes slideLeft {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes slideRight {
  from { transform: translateX(-20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes zoomIn {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes zoomOut {
  from { transform: scale(1.1); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes bounceIn {
  0%   { transform: scale(0.9); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes flipIn {
  from { transform: rotateX(-90deg); opacity: 0; }
  to   { transform: rotateX(0deg); opacity: 1; }
}

@keyframes rotateIn {
  from { transform: rotate(-10deg); opacity: 0; }
  to   { transform: rotate(0deg); opacity: 1; }
}

/* FINE ANIMAZIONI PER FRONTEND */


.control-buttons {
  position: absolute;
  top: 40px;
  right: 80px;
  display: flex;
  gap: 10px;
  z-index: 100;
}

.control-buttons button {
  background-color: transparent;
  color: var(--button-menu-text);
  
  font-size: 20px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-buttons button:hover {
  opacity: 0.8;
}





/* MOBILE */

@media screen and (max-width : 1690px) {
	.arrow-left {
	  left: 25vw;
	  /*transform: translate(-15%, -50%);*/
	}

	.arrow-right {
	  right: 25vw;
	  /*transform: translate(15%, -50%);*/
	}
}

@media screen and (max-width : 1290px) {
	.arrow-left {
	  left: 20vw;
	  /*transform: translate(-15%, -50%);*/
	}

	.arrow-right {
	  right: 20vw;
	  /*transform: translate(15%, -50%);*/
	}
}

@media screen and (max-width : 1090px) {
	.arrow-left {
	  left: 18vw;
	  /*transform: translate(-15%, -50%);*/
	}

	.arrow-right {
	  right: 18vw;
	  /*transform: translate(15%, -50%);*/
	}
}


@media screen and (max-width : 991px) {
	.cta-button {

	  bottom: 15%;

	}

	.arrow-left {
	  left: 8vw;
	  /*transform: translate(-15%, -50%);*/
	}

	.arrow-right {
	  right: 8vw;
	  /*transform: translate(15%, -50%);*/
	}

	.overlaycontent #extra-modal-content {

		padding-bottom : 70px;
	}

	.page-wrapper {
	  width: auto;
	  height: 100vh;	
	  position : relative;
	  overflow: hidden;
	  margin : auto;
	  aspect-ratio: 9/16;
	  transform: translateZ(0);
	}
	
	.story-content-wrapper{
	  height : calc(100% - 250px);
	  padding: 100px 15px 150px 15px;
	}	

}

@media screen and (max-width : 767px) {

	.arrow-zone {
		display : none;
	}


}