@charset "UTF-8";
/* CSS Document */
/* The Cocochine */
/* Dec 25 */
/* 2.1 */





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

#myBtn {background: none; border: 0; font-family: Helvetica, Arial, Sans-Serif;}


/* 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: 1000;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fff;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 360px; 
  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: #000;
  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;
}





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

.modal_container{position: fixed;top:0px; left: 0px;right: 0px;bottom: 0px;text-align: center; background: rgba(0, 0, 0, 0.6);z-index: 998;}	
.modal_centre	{display: flex;justify-content: center;align-items: center; position: absolute;top:0px; left: 0px;right: 0px;bottom: 0px;}
button			{background: none; border: 0;color: #af700f;font-size: 25px; text-decoration: none;padding: 0px; margin: 0px; font-weight: 400;}
button:hover	{color: #af700f; opacity: 0.6}
.modal_modal	{width:300px;height:450px; padding: 20px; background: #690011; color: #af700f; border: 1px solid #690011;position: relative; opacity: 0.95;}
.closebutton	{position: absolute; top:15px;right:15px; padding: 0px; text-align: right; padding: 0px; margin: 0px;}
.modal_right	{position: absolute; top:8px;left:12px; padding: 3px 0px; text-align: right; padding: 0px; margin: 0px;}
.modal_message	{padding-top: 16.5%}
.modal_body		{}





/* --------------------------------------- */


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

@media (min-width: 851px){
.row_wrapper {
  padding: 0;
  margin: 0;
  list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.row_wrapper:after {content: "";display: table;clear: both;}

.col {float: right;width: 50%;overflow-x: hidden;}

}

@media (max-width: 850px){
.row_wrapper {

}

.col {float: right;width: 100%;overflow-x: hidden;}
		
.row_wrapper:after {content: "";display: table;clear: both;}
}

/* -------------------------------------------------------------- */


html {scroll-behavior: smooth;}

body 					{margin:0px;padding;0px;font-family: avenir;font-size: 14px; line-height: 20px; margin: 0px; font-weight: 500; color: #af700f; font-style: normal; letter-spacing: 2px;background: #fdfcf7;}	

section 				{padding: 0px; margin:0px;display: flex;}
		
.columns_flex 			{display: flex;flex-direction: row; padding:0px; margin:0px;}
.columns_wrap 			{display: flex;flex-wrap: wrap; padding:0px; margin:0px;}

.oxblood				{background: #690011; color: #af700f;}
.white					{background:#fff; color: #af700f;}
.deep_chocolate			{background:#220308;}
.lead					{margin-bottom: -6px;}

.vh						{height: 100vh;  place-items: center center;}


/* ---------- Format ---------- */	
	
.container 				{margin: auto;}	
.inner					{padding: 125px 15px 0 15px;}	
.inner_2c				{padding: 0 15px 0 15px; max-width: 600px;}	
.inner_vc				{padding: 0 0 0 0; max-width: 50px;}	

.img					{width: 100%; height: auto;}

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

.nav_top_left			{position: fixed; top: 30px; left: 30px; width: 20%; z-index: 998; text-align: left; text-transform: uppercase}
.nav_top_right			{position: fixed; top: 30px; right: 30px; width: 20%; z-index: 998; text-align: right; text-transform: uppercase}
.nav_top_centred		{position: fixed; top: 30px; left: 25%; right: 25%; z-index: 998;text-align: center;text-transform: uppercase}

.nav_base_left			{position: fixed; bottom: 30px; left: 30px; z-index: 998; text-transform: uppercase}
.nav_base_right			{position: fixed; bottom: 30px; right: 30px; z-index: 998; text-transform: uppercase}
.nav_base_centred		{position: fixed; bottom: 30px; left: 25%; right: 25%; z-index: 998;text-align: center;text-transform: uppercase}	
.centred_inner			{width:50%;float: left; text-align: center}	
	
.uc						{text-transform: uppercase}
.o5						{opacity: 0.35}
.opentable				{width: 225px; overflow: hidden; margin: auto; padding-top: 30px; text-align: center}
.lead_img				{z-index: 99;}

.cocochine_mayfair_menu			{padding: 50px;}
.cocochine_mayfair_dessert		{padding: 30px 0 50px 0;}
.cocochine_mayfair_price		{padding: 50px 0 65px 0;}
.cocochine_mayfair_restaurant	{}
.restaurant_dish				{padding-bottom: 30px;}


.main-ct 				{width: 100vw;position:relative;}
.menu-body 				{width: 100%;}	

@media (min-width: 801px) {	
.mv						{visibility: hidden; display: none;}
.dv						{visibility: visible; display: block;}

.vh_r					{height: 100vh;  place-items: center center;}
.vh_r_resv				{padding: 150px 0;}

.inner_centred_menus	{padding: 0 25px 0 25px; max-width: 600px; margin: auto; margin-top: -75px;white-space: nowrap; }	
.inner_centred_menus_lunch	{padding: 0 25px 0 25px; max-width: 500px; margin: auto;}		
.inner_centred			{padding: 0 25px 0 25px; max-width: 600px; margin: auto}	
.inner_centred_upper	{padding: 0 25px 0 25px; width: 400px; margin: auto}
.inner_centred_upper_larry	{padding: 0 25px 0 25px; width: 350px; margin: auto}
.contact				{margin-top: 0;}	
	
.inner_l				{padding: 125px 25px 0 30px; width:55%;}	
.inner_r				{padding: 125px 30px 0 50%;}		

.p_250					{padding-top: 0px;}	
		
.fixed-menu	{position: sticky;width:100px;height:20px;top:0px; text-align: left; padding-top: 125px;left:30px; z-index: 99; padding-bottom: 75px;}
	
.column1 				{flex: 100vw;}
.column2 				{flex: 50vw;}
.column3 				{flex: 33.33vw; padding: 15px;}
.column4 				{flex: 25vw; padding: 15px; }
.column5 				{flex: 20vw; padding: 15px;}
.column6 				{flex: 16.66vw; padding: 15px;}
	
.full_col_50			{width: 50vw; height: 100vh}
.full_col_50_w			{width: 50vw; height: 100vh}

.vc_container {
  height: 100vh;
  position: relative;
}

.vc_vertical_center {
  margin: 0;
  position: absolute;
  top: 50%; width: 100%;
  -ms-transform: transl§ateY(-50%);
  transform: translateY(-50%);
}	
}

@media (max-width: 800px) {
.mv						{visibility: visible; display: block;}
.dv						{visibility: hidden; display: none;}
	
.vh_r					{height: auto;}
.vh_r_resv				{height: auto;}
	
.inner_l				{padding: 175px 30px 175px 30px; text-align: center;}	
.inner_r				{padding: 175px 30px 175px 30px; text-align: center;}		
.p_250					{padding-top: 350px; background: #FFB809; opacity: 0.7}	
	
.inner_centred_menus	{padding: 0 25px 0 25px; max-width: 600px; margin: auto; margin-top: 0px;white-space: nowrap; }	
.inner_centred_menus_lunch	{padding: 0 25px 0 25px; max-width: 500px; margin: auto;}	
.inner_centred			{padding: 125px 25px 125px 25px; max-width: 600px; margin: auto}	
	
.inner_centred_upper		{padding: 175px 30px 175px 30px; text-align: center;}
.inner_centred_upper_larry	{padding: 175px 30px 175px 30px; text-align: center;}
	
	
.contact				{margin-top: 150px; background: #FF6264}	
	
.fixed-menu	{position: sticky;height:20px; padding-top: 125px; padding-bottom: 100px; left:30px; right: 30px; text-align: center; z-index: 99}
	
.columns_wrap 			{display: flex;flex-direction: row; padding:0px; margin:0px; clear: both;}
.columns_flex 			{flex-direction: column;padding:0px;margin:0px;clear: both;}

.column1 				{flex: 100vw;}
.column2 				{flex: 100vw;}
.column3 				{flex: 100vw; padding: 0px;}
.column4 				{flex: 100vw; padding: 0px; }
.column5 				{flex: 100vw; padding: 0px;}
.column6 				{flex: 100vw; padding: 0px;}	
	
.full_col_50			{width: 100vw; height: 100vh}
.full_col_50_w			{width: 100vw;}
	
.vc_container 			{height: auto;}
.vc_vertical_center {}	

}
	
.ac						{text-align: center}
.al						{text-align: left;}
.ar						{text-align: right}




.icon 								{display: inline-block;width: 24px;height: 24px;margin-top: 22px;background-size: cover;}
.instagram 							{background-image: url("../img/instagram.svg");}
.instagram:hover,.instagram:focus 	{background-image: url("../img/instagram-hover.svg");}

h2 						{font-family: avenir;font-size: 14px; line-height: 20px; margin: 0px; font-weight: 500; color: #af700f; font-style: normal; letter-spacing: 2px;margin: 0px;}	

#reveal					{position: fixed; top:0px; left:0px; background: #220308; z-index: 999;display: grid;height: 100vh;width: 100vw; margin: 0;place-items: center center;}

#mce-EMAIL				{background: #3a4595; color: #fff; width: 90%; border: 0px; font-family:'saintecolombe-medium', Times, "Times New Roman", "serif";font-size: 14px; line-height: 20px; padding-bottom: 10px;margin: 0px; font-weight: 500; margin-left: 30px; border-bottom: 1px solid #fff;}

/* Button Styling  */

.button	{font-family:'saintecolombe-medium', Times, "Times New Roman", "serif";font-size: 14px; line-height: 20px; padding-bottom: 10px;margin: 0px; font-weight: 500; margin-left: 30px; border-bottom: 1px solid #fff; padding: 8px 0px 30px 0px; border: none; background: none; color: #fff; text-decoration: none;}

.button:hover {font-family:'saintecolombe-medium', Times, "Times New Roman", "serif";font-size: 14px; line-height: 20px; padding-bottom: 10px;margin: 0px; font-weight: 500; margin-left: 30px; border-bottom: 1px solid #479f76; padding: 8px 0px 30px 0px; border: none; background: none; color: #479f76; text-decoration: underline;} 

::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;}






.subscribe				{border-bottom: 1px solid #fff; padding-top: 7px;}


a:link 					{text-decoration: none; color: inherit;}
a:visited 				{text-decoration: none; color: inherit;}
a:hover 				{text-decoration: none; color:#D2D2D2;}
a:active 				{text-decoration: none; color: inherit;}


.li						{text-transform: none;}
a.li:link 				{text-decoration: none; color: inherit; text-transform: none;font-size:17px; padding-right: 30px;}
a.li:visited 			{text-decoration: none; color: inherit;}
a.li:hover 				{text-decoration: underline; color:#479f76;}
a.li:active 			{text-decoration: none; color: inherit;}

a.ul:link 				{text-decoration: none; color: inherit;}
a.ul:visited 			{text-decoration: none; color: inherit;}
a.ul:hover 				{text-decoration: underline; color:#479f76;}
a.ul:active 			{text-decoration: none; color: inherit;}

a.ul_c:link 			{text-decoration: none; color: inherit;text-transform: none;font-size:17px;}
a.ul_c:visited 			{text-decoration: none; color: inherit;}
a.ul_c:hover 			{text-decoration: underline; color:#479f76;}
a.ul_c:active 			{text-decoration: none; color: inherit;}