@charset "UTF-8";
/* CSS Document */
/* ALTA Restaurant Soho */
/* Sept 25 */
/* 1.1 */

	
.spanish_restaurant_soho_london				{text-decoration: none; color: inherit; line-height: 25px;}
a.spanish_restaurant_soho_london:link 		{text-decoration: none; color: inherit; line-height: 25px;}
a.spanish_restaurant_soho_london:visited 	{text-decoration: none; color: inherit;}
a.spanish_restaurant_soho_london:hover 		{text-decoration: none; color: inherit;}
a.spanish_restaurant_soho_london:active 	{text-decoration: none; color: inherit;}

.inter-alta {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

.core					{padding: 50px 10px 50px 10px; margin: auto; margin-bottom: 50px;}

td 		{font-size: 15px; line-height: 21px;}

/* --- Core ----------------------------------------------------------- */

html 					{scroll-behavior: smooth;}

body 					{margin:0px;padding;0px; background:#B5AC9D; font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, "sans-serif"; font-size: 15px; line-height: 21px; color:#fff;letter-spacing: 1px;}	

#intro					{position:fixed;left:0px;top:0px;bottom:0px;right:0px; height:auto;z-index:998;background: #B5AC9D;color: #fff; overflow:hidden; text-align:center; opacity:1.0}

	

.section_centred_750	{max-width: 750px; height: auto; margin: auto; padding: 40px 25px 75px 25px; display: block;visibility: visible;}	

.section_centred_1150	{max-width: 950px; height: auto; margin: auto; padding: 40px 25px 75px 25px; display: block;visibility: visible;}	


@media (min-width: 801px) {
.nav_alta				{position:fixed; left: 30px; bottom: 30px; width: 500px; visibility: visible; display: block;}	

.footer					{width: 100%; padding-bottom: 3px; text-align: left;}
	
	
	
.insta					{width: 23px;}	
.center 				{height: 100vh;width: 100%; position: relative; z-index: 1;}
.center_inner 			{margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); max-width: 400px; }	
	
.col-container {
  display: flex;
  width: 100%;padding: 200px 0 200px 15px
}
.col60 {
  padding: 16px; width: 50%;
}

.col20 {
  padding: 16px; width: 25%;
}	

.button { margin-top: auto; } /* Push it and following elements to the bottom */

	
	
.footer					{padding: 10px 0 250px 10px; width: 100%; text-align: left;}
.footer_wrap			{padding: 20px 20px 0px 20px;width: 100%;}		
.social					{padding: 0px 0px 20px 16px; width: 100%;}	
	
.footer_careers			{width: 27%; padding-left: 3%; float: left;}	
.footer_gdpr			{width: 10%;float: left; text-align: left;}	
.footer_insta			{width: 10%;float: left; text-align: right;}	
.logo_alta				{position:fixed; top: 30px; right: 30px; text-align: right; z-index: 99; width: 7.5%;}	
.logo_alta_load			{position:absolute; top: 30px; right: 30px; text-align: right; z-index: 999; width: 7.5%;}

.lead_img				{padding: 100px 0 200px 0}	
	
	
.col20_1				{position: relative; height: 100%; width: 100%;}	
.col20_2				{position: absolute; top:50%; height: 50%;padding-bottom: 30px;}	
.col20_3				{position: absolute; bottom:30px; height: auto;}	

.centred_img			{padding: 0}
	
.footer_signup			{width: 100%; border-bottom: 1px solid #fff;}	
	
.reservations			{position: fixed; bottom:0px; right: 30px;}
.booking				{padding: 12px 75px 10px 75px; color: #fff; background: #383131; z-index: 99; opacity: 0.95}		
	
.privatediningsoho		{max-width: 900px; margin: auto; padding: 100px 0px;}		
.carnabystreet			{margin-left:25px; background: #B5AC9D;z-index: 999;}	
.pdr_title				{padding-left: 6px; padding-top: 30px; border-top: 1px solid #000}	
.pdr_width				{max-width: 50%}	
.privatediningroom		{max-width: 420px; padding: 30px 20px 0 20px; margin: auto;}
	
.terms_container		{max-width:52%; margin: auto; padding-top: 60px;}	
	
.p_top					{padding-top: 200px;}	
	
.p_top_100				{padding-top: 100px}

.contact_block			{background:#B5AC9D; margin-top: -30px;}			
}		


.c30					{margin-bottom: 30px;}	
.buttons_ul				{width: 150px; border-bottom: 1px solid #fff; padding-bottom: 4px; padding-top: 3px;}

@media (max-width: 800px) {

.reservations			{position: fixed; bottom:0px; right: 30px; left: 30px; text-align: center;z-index: 997;}
.booking				{padding: 12px 40px 10px 40px; color: #fff; background: #383131; opacity: 0.95;margin: auto;}	
	
.privatediningsoho		{max-width: 900px; margin: auto; padding: 25px 0px;}	
.carnabystreet			{margin-left:23px; background: #B5AC9D;z-index: 999;}	
.pdr_title				{padding-left: 6px; padding-top: 40px; }	
.pdr_width				{max-width: 100%}	
.privatediningroom		{padding: 30px 0; margin: auto;}
	
.terms_container		{max-width:100%; margin: auto; padding-top: 60px;}	
	
	
.p_top					{padding-top: 125px;}	

.p_top_100				{padding-top: 0px;}	
	
.contact_block			{background:#B5AC9D;}	
	
.footer_signup			{width: 95%; border-bottom: 1px solid #fff;}	
	
.centred_img			{padding: 0 30}	
	
.col20_1				{}	
.col20_2				{padding-bottom: 30px;}	
.col20_3				{padding-top: 30px;}	
		
	
.lead_img				{padding: 300px 30px 100px 30px}	

	
.nav_alta				{visibility: hidden; display: none;}	
	
.footer					{width: 100%; padding: 0px 0px 0px 30px; height: 100px; text-align: left;}
.footer_careers			{width: 100%;}	
.footer_gdpr			{width: 100%;}	
.footer_insta			{width: 100%;}	
.logo_alta				{position:fixed; top: 30px; right: 30px; text-align: right; z-index: 99; width: 100px;}	
.logo_alta_load			{position:absolute; top: 25px; right: 30px; text-align: right; z-index: 999; width: 100px;}
.social					{padding: 0px 0px 20px 16px; height: 35px; width: 100%;}	
	
	
	
.insta					{width: 20px;}	
.center 				{height: 80vh;position: relative; z-index: 1;}
.center_inner 			{margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);min-width: 275px; }	
	
.col-container {
  display: flex;
  width: 100%;flex-direction: column;padding: 100px 0 200px 0;
}
.col60 {
  width: 100%;
}

.col20 {
  width: 100%; padding: 0 30;
}	

.button { margin-top: auto; } /* Push it and following elements to the bottom */
}		



section 				{padding: 0px; margin:0px;font-weight: 400;}

.vh						{height: 100vh;}
.oh						{overflow: hidden;}

.img					{width: 100%; height: auto;}
.bg 					{width: 100%;height: 100%;object-fit: cover; /*magic*/}	
.imgfill 				{height:100%;text-align: center; overflow: hidden; z-index: -2;}



.row:after {content: "";clear: both;display: flex;}






#tripleseat_embed_form textarea {border:#fff 1px dotted; border-bottom:dotted 1px #fff; background: #B5AC9D;color: #fff;}	
#tripleseat_embed_form input {border:#fff 1px dotted; border-bottom:dotted 1px #fff; background: #B5AC9D;color: #fff;}	
#tripleseat_embed_form select {border:dotted 1px #fff; background: #B5AC9D; color: #fff;}	
#tripleseat_embed_form button {border:#fff 1px dotted; border-bottom:dotted 1px #B5AC9D;background: #000000; color: #ffffff}
h2				{font-family: ''Inter', 'Helvetica Neue', Helvetica, Arial, "sans-serif;
				-moz-font-feature-settings:'aalt=0,case=0,frac=0,hist=0,liga=0,locl=0,ordn=0,salt=0,sups=0'; font-size:15px; 
				 line-height: 23px; letter-spacing: 0px; color: #fff; font-weight: 400;}








@media (min-width: 801px) {	


	
	
.m						{visibility: hidden; display: none;}
.d						{visibility: visible; display: block;}

.in_m					{padding: 0}
	
.column4 				{width: 25%; float: left; }
	
	
.column20 				{float: left;width: 20%;height: auto;display: table-cell;}
.column25 				{float: left;width: 25%;height: auto;display: table-cell;}
.column50 				{float: left;width: 50%;height: auto;display: table-cell;}
.column75 				{float: left;width: 75%;height: auto;display: table-cell;}
.column33 				{float: left;width: 36%;height: auto;display: table-cell;}
.column40 				{float: left;width: 40%;height: auto;display: table-cell;}
.column66 				{float: left;width: 60%;height: auto;display: table-cell;}
	
.slide_copy_l70			{width:60%;float: left; color: #fff; }
.slide_img_cont30		{width:40%;float: none; overflow: hidden;height: auto;}		
	
.slide_copy_l			{width:30%;float: left; color: #fff; }
.slide_copy_r			{width:70%;float: right; color: #fff; }
.slide_img_cont			{width:70%;float: none; overflow: hidden;height: auto;}		
.sl_cont_container		{position:relative; width: 100%;height: 100%;}
.sl_cont_inner			{position:absolute; top: 30px; height:100%; left:30px; right: 30px;}
.sl_cont_baseline		{position: absolute; bottom: 0px; margin-bottom: 30px;}

.w_h					{width:100vw; height: 100vh}	
.w1						{width:100vw; height: auto;}	

.p25					{padding: 25px 0 25px 0;}
	
.ac						{text-align: center}
.al						{text-align: left;}
.al_l					{text-align: left;}
.ar						{text-align: right}	
		
}



/* --- Format, Mobile ----------------------------------------------------------- */


@media (max-width: 800px) {
		
.m						{visibility: visible; display: block;}
.d						{visibility: hidden; display: none;}
.in_m					{padding: 30 30px 0 30px;}
	
.column25 				{float: left;width: 100%;height: auto;display: table-cell;}
.column50 				{float: left;width: 100%;height: auto;display: table-cell;}
.column75 				{float: left;width: 100%;height: auto;display: table-cell;}
.column33 				{float: left;width: 100%;height: auto;display: table-cell;}
.column40 				{float: left;width: 100%;height: auto;display: table-cell;}
.column66 				{float: left;width: 100%;height: auto;display: table-cell;}	
	
.slide_copy_l			{width:100%;float: none; color: #fff; height: auto;}
.slide_copy_r			{width:100%;float: none; color: #fff; height: auto;}
.slide_img_cont			{width:100%;float: none; overflow: hidden;height: auto;}	
	
.sl_cont_baseline		{margin-bottom: 30px; padding: 25px 30px 0 30px;}
	
.sl_cont_inner span		{align-self: flex-end; padding-bottom: 5px;left:30px; right: 30px;}	

.w_h					{margin-bottom: -10px;}	

.p25					{padding: 25px 0 25px 0;}
	
.ac						{text-align: center}
.al						{text-align: center;}
.al_l					{text-align: left;}	
.ar						{text-align: right}	

}



/* --- Links ----------------------------------------------------------- */

a:link 					{text-decoration: none; color: inherit; padding: 0;}
a:visited 				{text-decoration: none; color: inherit;}
a:hover 				{text-decoration: none; opacity: 0.5;}
a:active 				{text-decoration: none; color: inherit;}


a.insta:link 			{text-decoration: none; padding: 0;}
a.insta:visited 		{text-decoration: none; }
a.insta:hover 			{text-decoration: none; opacity: 0.6}
a.insta:active 			{text-decoration: none; }





/* --- Reveal ----------------------------------------------------------- */

.reveal {
}

.reveal {
  opacity: 0;
  transform: translate(0, 10vh);
  transition: all 1s;
}

.reveal.visible {
  opacity: 1;
  transform: translate(0, 0);
}













/* --- Video ----------------------------------------------------------- */

.embed-responsive{position:relative;display:block;width:100%;padding:0;overflow:hidden}.embed-responsive::before{display:block;content:""}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-21by9::before{padding-top:42.857143%}.embed-responsive-16by9::before{padding-top:56.25%}.embed-responsive-4by3::before{padding-top:75%}.embed-responsive-1by1::before{padding-top:100%}.embed-responsive-9by16::before{padding-top:177.63%}

.video_mobile_lead		{position: absolute;top:0px; left: 0px; right: 0px;z-index: 1}


/* --- Fixed Header Nav ----------------------------------------------------------- */


.nav_head	{background: #041C2C; position: fixed; top:0px; left:0px; right:0px; height: 43px; padding-bottom: 0px; opacity: 0.93;z-index: 998}

.menu {
  margin: 0 auto;
  list-style-type: none;z-index: 999; width: 100%;

  a {
    display: block;
    margin: 0;
    padding: 10px 25px;
    text-decoration: none;text-transform: uppercase; font-family:Helvetica, Arial, "sans-serif"; font-size:12px; letter-spacing: 5px; color: #fff;

  }
  li {
    position: relative;
    float: left;
    margin: 0;
    perspective: 200;
	
	  
    &:first-child {
      border-left: none;
    }
    &.nav_item {
      &:before {
        content: '';
        z-index: 200;
        position: absolute;
        top: 100%;
        left: 50%;
        margin-top: -4px;
        margin-left: -20px;
        display: block;
        border-color: #fff transnav_item transnav_item transnav_item;
        transition: margin-top .1s ease-out;

      }
    }
    &:hover,
    &:focus {
      & > a {
        text-decoration: none;
        color: #40baad;
;
      }
      &:before {
        margin-top: 0;
      }
      .sub_nav {
        opacity: 1;
        transform: rotateX(0) translateZ(0);
      }
    }
  }
  .sub_nav {
    opacity: 0;
    backface-visibility: hidden;
    transform: rotateX(-90deg);
    transform-style: preserve-3d;
    transform-origin: top center;
    transition: transform .6s; opacity .1s .1s;
    z-index: 100;
    list-style-type: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: auto;
    margin: 0;
    padding: 5px 0;
    background-color: #fff;
    text-align: left;width: 325px;

    li {
      float: none; 
    }
    a {{
        
      }
    }
  }
}

.menu:after {transition: 
    0.5s height cubic-bezier(.73,.32,.34,1.5),
    0.5s padding cubic-bezier(.73,.32,.34,1.5),
    0.5s margin cubic-bezier(.73,.32,.34,1.5),
    0.5s 0.2s color,
	0.2s background-color;}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}


/* --- Format, Desk ----------------------------------------------------------- */


@media (max-width: 950px) {	
.dt						{visibility: hidden; display: none;}
}

@media (min-width: 951px) {	
.dt						{visibility: visible; display: block;}
}


@media (max-width: 550px) {	
.mm						{visibility: visible; display: block;}
}

@media (min-width: 551px) {	
.mm						{visibility: hidden; display: none;}
}



/* --- Mobile Nav ----------------------------------------------------------- */

nav_mob 			{position: fixed; top:22px; left:10px; z-index: 997; opacity: 0.97}
#menuToggle 		{display: flex;flex-direction: column;position: relative;top: 20px;left: 20px;z-index: 996;-webkit-user-select: none;user-select: none;}
#menuToggle input 	{display: flex;width: 40px;height: 35px;position: absolute;cursor: pointer;opacity: 0;z-index: 997;}
#menuToggle span 	{display: flex;width: 40px;height: 2px;margin-bottom: 10px;position: relative;background:#e6e7e8;border-radius: 3px;z-index: 1;transform-origin: 5px 0px;transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),opacity 0.55s ease;}
#menuToggle span:first-child{transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(3){transform-origin: 0% 100%;visibility: hidden;}
#menuToggle span:nth-last-child(2){transform-origin: 0% 100%;}
#menuToggle input:checked ~ span{opacity: 1;transform: rotate(47deg) translate(-1px, -1px);background:#e6e7e8;}
#menuToggle input:checked ~ span:nth-last-child(3){opacity: 0;transform: rotate(0deg) scale(0.2, 0.2);}
#menuToggle input:checked ~ span:nth-last-child(2){transform: rotate(-47deg) translate(0, -1px);}
#menu{position: fixed;top:0px;width: 100vh;bottom: 0px;margin: 0 0 0 -50px;padding: 50px;background-color: #041C2C; color: #fff;-webkit-font-smoothing: antialiased;transform-origin: 0% 0%;transform: translate(-100%, 0);transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); font-size: 18px;}	
#menuToggle input:checked ~ ul{transform: none;list-style-type: none;font-size:15px; padding: 12px; letter-spacing: 2px; text-align: center;}

a.m_li:hover{color: #07617c;}

.maxi_regatta		{width:55px; padding: 22px 0px 0px 20px;}
.mob_nav_container	{position: fixed;top:100px;width:100vw}
.mob_p_l			{padding-left: 20px;}

.m_nav				{color: #fff; text-transform: uppercase; font-family:Helvetica, Arial, sans-serif; font-size:15px; letter-spacing: 5px; width: 100%;text-align: center; display: block; margin-bottom: 11px;}

.m_nav_sub			{color: #fff; text-transform: uppercase; font-family:Helvetica, Arial, sans-serif; font-size:15px; letter-spacing: 5px; width: 100%;text-align: center; display: block; margin-bottom: 11px;}



/* --- Email signup ----------------------------------------------------------- */


input[type=submit] {
    -webkit-appearance: none; /*Safari/Chrome*/
    -moz-appearance: none; /*Firefox*/
    -ms-appearance: none; /*IE*/
    -o-appearance: none; /*Opera*/
    appearance: none;

    -webkit-border-radius: 0;
	border:none; 
	height:0px; width:67px; background:none;
	margin-top:0px;height:24px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #fff;
}

div:focus, textarea:focus, input:focus{outline: none;}

#tripleseat_embed_form textarea { border:solid 1px #fff; color: #fff; }
#tripleseat_embed_form input { border:solid 1px #fff; color: #fff;}
#tripleseat_embed_form button { border:solid 1px #fff; color: #fff;}





/* --- Modal ----------------------------------------------------------- */

#myBtn {background: none; border: 0; margin:0px;padding;0px;font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, "sans-serif"; font-size: 15px; letter-spacing: 0px; color:#fff; font-weight: 400; margin-left: -6px; margin-top: -3px; padding-top: 5px; padding-bottom: 4px;}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 50px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ z-index: 999;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fff;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  max-width: 300px; 
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: black;
  float: right;
  font-size: 28px;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 8px 12px;
  background-color: #fff;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}


s

