/*
===============================================
****************	PAGE PREP 	***************
===============================================
*/
@font-face {    font-family: crimsontext;  		src: url(api/fonts/CrimsonText-Roman.ttf);}
@font-face {    font-family: indiana;  			src: url(api/fonts/Indiana.otf);}
@font-face {    font-family: century;  			src: url(api/fonts/Century-Gothic.ttf);}
@font-face {    font-family: aribian;  			src: url(api/fonts/aribian.ttf);}
@font-face 		{ font-family: social;  		src: url(api/fonts/SocialCircles.otf);} 	.ic3 	{ font-family: social; }
ul.topnav  {  list-style-type: none;  margin: 0;  padding: 0;  overflow: hidden; }
ul.topnav li { display: inline-block; }
ul.topnav li a{ display: inline-block; }
#eyes input[type=checkbox], .nav-icon		{    display: none;    -webkit-appearance: none; } /*Hide checkbox*/
#eyes input[type=checkbox]:checked ~ #topnav{    display: block; } /*Show menu when invisible checkbox is checked*/
h1, h2, h3, h4 { font-weight: bold; margin: 10px 0px; text-align: center; font-family: aribian; }
h1 	{font-size: 50px; }
h2 	{font-size: 30px; }
h3 	{font-size: 18px; }
h4 	{font-size: 1em; }
b 	{ font-weight: bold;  }
i 	{ font-style: italic; }
p 	{ line-height: 20px; }
.links>p 	{ line-height: 20px; padding: 5px; }



.vc 		{position: relative;}
.vc>div, .vc>article, .vc>section {  position: absolute; top: 0;  bottom: 0; left: 0;  right: 0;  margin: auto;  }
.delight { margin: 20px auto 35px; font-weight: bold; font-size: 20px; }

/*
===============================================
****************   	CUSTOM 		***************
===============================================
*/
body { font-family: crimsontext; background: url('../gallery/cover4.jpg') no-repeat fixed; background-size: cover; color: #333;  font-size: 17px; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; right: 0px;   }
#eat hr			{ margin: 27px 0px; }
.s-facebook 	{ width: 30px; height: 30px; margin: 5px; background: url('../gallery/social-facebook.png') no-repeat center; filter: contrast(20%); -webkit-filter:contrast(20%); background-size: contain; }
.s-twitter 		{ width: 30px; height: 30px; margin: 5px; background: url('../gallery/social-twitter.png') no-repeat center; filter: contrast(20%); -webkit-filter:contrast(20%); background-size: contain; }
.s-tripadvisor 	{ width: 50px; height: 50px; margin: 5px; background: url('../gallery/tripadvisor.png') no-repeat center; background-size: contain; }
.s-google 		{ display: inline-block; width: 40px; height: 40px; margin: 5px; background: url('../gallery/google.png') no-repeat center; background-size: contain; }
.s-halal 		{ width: 40px; height: 40px; margin: 10px; background: url('../gallery/social-halal.png') no-repeat center; background-size: contain; border-radius: 30px; }
.s-instagram 	{ width: 30px; height: 30px; margin: 5px; background: url('../gallery/social-instagram.png') no-repeat center; filter: contrast(20%); -webkit-filter:contrast(20%); background-size: contain; }

.staff 			{ background: url('../gallery/staff.jpg') no-repeat center; background-size: cover; }
#eyes > div.links.mn2.fs2 > p > a {color:#333;font-size:20px;}
#reserve > a {color:#ffffff;}


.chope {background: url('../gallery/tripadvisor-certificate-of-excellence-2015.png') no-repeat center; background-size: contain; width: 50px; height: 50px; margin: 10px; }
.certificate7	{ background: url('../gallery/tripadvisor-certificate-of-excellence-2015.png') no-repeat center; background-size: contain; width: 50px; height: 50px; margin: 10px;  }
.certificate2	{ background: url('../gallery/tripadvisor-certificate-of-excellence-2016.png') no-repeat center; background-size: contain; width: 50px; height: 50px; margin: 10px;  }
.certificate3	{ background: url('../gallery/tripadvisor-certificate-of-excellence-2017.png') no-repeat center; background-size: contain; width: 50px; height: 50px; margin: 10px;  }
.certificate4	{ background: url('../gallery/tripadvisor-certificate-of-excellence-2018.png') no-repeat center; background-size: contain; width: 50px; height: 50px; margin: 10px;  }
.certificate5	{ background: url('../gallery/tripadvisor-hall-of-fame.png') no-repeat center; background-size: contain; width: 50px; height: 50px; margin: 10px;  }
.certificate6	{ background: url('../gallery/tripadvisor-travelers-choice-2020.png') no-repeat center; background-size: contain; width: 50px; height: 50px; margin: 10px;  }
.certificate	{ background: url('../gallery/Tripadvisor-Travellers-Choice-Awards-Winner-2024.png') no-repeat center; background-size: contain; width: 50px; height: 50px; margin: 10px;  }

#contact 	{ font-size: 15px; }
.aribian { font-family: aribian;  }
.indiana { font-family: aribian;  }
#head 		{ /*background: rgba(112, 27, 22,0.9) ;*/ background: rgba(250, 250, 250,0.6) ; filter: background-blur(5px); position: fixed; left: 0px; top: 0px; height: 100vh; width: 200px;	padding-top: 20px; }
#head h1 	{  	}
#head p  	{  	}
#logo 		{ height: 90px; margin: 0px auto 10px;  font-family: aribian; font-size: 70px; color: #000;  	}
.atithi 	{  background:url('logo.png') no-repeat center; background-size: cover; }
#eyes 		{ text-align: center; }
#eyes li a 	{ color: #222;  display: inline-block; width: 180px; padding: 10px;	font-size: 25px; text-align: left; font-family: aribian;	 }
p>.atithi { height: 17px; width: 38px; display: inline-block; }


.cred 		{ color: red; }
#body 		{ position: absolute; left: 200px; top: 0px; right: 0px; }
.menu-item 	{ display: inline-block; width: 90%; float: left;  line-height: 30px; padding: 10px 5%; overflow: hidden; }
.big-menu 	{ font-size: 25px; font-weight: bold; letter-spacing: 2px; font-family: aribian;}
.big-menu2 	{ font-size: 20px; font-weight: bold; letter-spacing: 2px; font-family: Century-Gothic;}

.menu-name 	{ display: inline-block; width: 90%;  height: 30px; float: left; text-align: left; overflow: hidden; background-color: transparent; border:0px; }
.menu-price	{ display: none!important; }
/*.menu-price	{ display: inline-block; width: 10%;  height: 30px; float: left; text-align: right; font-weight: bold;  overflow: hidden; }*/
.menu-item a { color: #fff; background-color: rgba(0,0,0,0.6); height: 30px; margin-left: 20px; line-height: 30px;  padding-left: 10px; width: 130px; border-radius: 10px;}
.menu-desc{ display: inline-block; width: 90%; padding: 0px; float: left; height: auto; line-height: 20px; font-size: 13px; color: #efefef; font-style: italic;  }
#foodmenu 	button,#foodmenu a	{ border: 0px; font-family: aribian; cursor: pointer; font-size: 2vw; color: #fff; position: relative; }
#showmenu, #pull-foodmenu 	{ position: relative; top: 0px; height: auto;  overflow: hidden; width: 100%; padding: 0px 0px 100px;}
#showmenu, #pull-foodmenu>article h2 { display: inline-block; text-transform: capitalize; padding: 20px; display: block;  }
#pull-foodmenu 		{  font-family: century;  }
/*.menu-item { display: none; }*/
#foodmenu span { display: block; background: rgba(0,0,0,0.4); height: 30px; line-height: 30px; position: absolute; left: 0px; right: 0px; top: 45%;  }
.filt13				{ filter: sepia(0.4) saturate(2.4) brightness(0.5) contrast(2); -webkit-filter: sepia(0.4) saturate(2.4) brightness(0.5) contrast(2);}
#foodmenu 	button:hover span { top: 0px; bottom: 0px; line-height: 11em; height: auto;  }
.food-footer { font-size: 13px; padding: 50px 5% 20px; display: block;  }
.closemenu { background: transparent; border: 2px solid #fff; padding: 10px 20px; margin: 10px 5%; color: #fff; float: right; }


.action 	{ position: absolute; top: -45px; right: 0px; padding: 10px 15px; background: rgba(255,148,0,0.98); color: #fff;  }
.lo3-a>div:nth-of-type(1) 	{ top: 0px; bottom: 50%;  left: 0px; right: 75%; }
.lo3-a>div:nth-of-type(2) 	{ top: 50%; bottom: 0px;  left: 0px; right: 75%; }
.lo3-a>div:nth-of-type(3) 	{ top: 0px; bottom: 0px;  left: 25%; right: 0px; }
#eat { position: relative;min-height: 10vh; }
#eat>div:hover { height: auto;  padding-bottom: 0px;
-webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}
#eat>div:hover article { height: auto; padding-bottom: 0px; width: 100%; 
-webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}
#eat>div:visited { height: auto; padding-bottom: 0px;  }
#eat>div:visited article { height: auto; padding-bottom: 0px; width: 100%; }
#blog { min-height: 100vh; } #blog article { margin: 40px; } #blog p { line-height: 20px; margin: 10px 0px; text-align: justify; }   #blog header { font-weight: bold; font-size: 20px; margin:30px 0px; }
#feet 		{  	}
#feet h1 	{  	}
#feet p 	{  	}
.line 		{  	}

#see img 	{ height: 300px; display: inline-block; }	#see p { margin: 10px; text-align: justify; }
section 	{ display: block; position: relative; width: 100%; }
#services, #home, #gallery { padding: 100px 0px 50px;   }
#about { position: relative; height: auto; display: block;   }
article { overflow: hidden;   }
.bcsnow		{ background-color: rgba(250,250,250,0.5); color: #444; }
.bcsnow2		{ background-color: rgba(250,250,250,0.8); color: #444; }
.w12 { min-width: 400px; }
#about>article p {  margin-top: 20px; }
#who {  padding: 10px; width: 300px; height: 300px; float: left; margin: 10px; }
#vision, #history { width: 450px; display: inline-block; float: left; padding: 20px; margin: 10px;  }
#home { height: 560px; background: url('background/table-set.jpeg') no-repeat center; background-size: cover; }

.vertc { margin-top: 20%; }

.dish1 		{ background: url('../gallery/dish1.jpg') no-repeat; background-size: cover; }
.dish2 		{ background: url('../gallery/dish2.jpg') no-repeat; background-size: cover; }
.dish3 		{ background: url('../gallery/dish3.jpg') no-repeat; background-size: cover; }
.dish4 		{ background: url('../gallery/dish4.jpg') no-repeat; background-size: cover; }
.dish5 		{ background: url('../gallery/dish5.jpg') no-repeat; background-size: cover; }
.dish6 		{ background: url('../gallery/dish6.jpg') no-repeat; background-size: cover; }
.dish7 		{ background: url('../gallery/dish7.jpg') no-repeat; background-size: cover; }
.staff1 	{ background: url('../gallery/staff1.jpg') no-repeat; background-size: cover; }
.staff2 	{ background: url('../gallery/atithi-thumbs-up.jpeg') no-repeat; background-size: cover; }
.staff3 	{ background: url('../gallery/staff3.jpg') no-repeat; background-size: cover; }
.cover1 	{ background: url('../gallery/cover1.jpg') no-repeat; background-size: cover; }
.cover2 	{ background: url('../gallery/cover2.jpg') no-repeat; background-size: cover; }
.drink1		{ background: url('../gallery/drink1.jpg') no-repeat center; background-size: cover; }
.drink2		{ background: url('../gallery/drink2.jpg') no-repeat center; background-size: cover; }
.drink3		{ background: url('../gallery/drink3.jpg') no-repeat center; background-size: cover; }
.drink4		{ background: url('../gallery/drink4.jpg') no-repeat center; background-size: cover; }
.event1		{ background: url('../gallery/event1.jpg') no-repeat center; background-size: cover; }
.event2		{ background: url('../gallery/event2.jpg') no-repeat center; background-size: cover; }
.event3		{ background: url('../gallery/event3.jpg') no-repeat center; background-size: cover; }
.event4		{ background: url('../gallery/event4.jpg') no-repeat center; background-size: cover; }
.event5		{ background: url('../gallery/atithi-something.jpeg') no-repeat center; background-size: cover; }
.event6		{ background: url('../gallery/event6.jpg') no-repeat center; background-size: cover; }
.staff4 	{ background: url('../gallery/staff4.jpeg') no-repeat center; background-size: cover; }

.pop p { margin: 10px 0px; text-align: justify; }


#contact a { color: #fff;  }

#mySwipe 			{ }
.swipe 				{  overflow: hidden;  visibility: hidden;  position: relative;}
.swipe-wrap 		{    /*position: absolute;*/ position: relative; height: 100%; }
.swipe-wrap > div 	{  float:left;  width:100%;  position: relative; display: inline-block; top: 0px;}
.b-back, .b-forward	{ background-color: transparent; border:0px; font-weight: bold; }
.b-back				{   }
.b-forward			{  }
.cred 				{ font-size: 12px;  }

.swipe .b-back, .swipe .b-forward { visibility: hidden;  }
.swipe:hover .b-back, .swipe:hover .b-forward { visibility: visible; }

.lorem:after { content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum suscipit quam eget lacinia. Vestibulum at scelerisque ex. In rhoncus augue lacus, in rutrum erat rutrum et. Vivamus suscipit consectetur tortor. Mauris ligula turpis, auctor eget interdum at, maximus vitae urna. Aenean sed laoreet augue. Nam quis condimentum leo. Duis at sem quam."; }
.socials a { font-family: social; font-size: 43px; color: #000;   }
.pics { width: 33.333333333333%;  }


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

#body>section 	{ width: 95%;  padding: 50px 2.5% 0px; }
	#head 			{  z-index: 300;  }
	.nav-icon 		{ display: inline-block;    position: fixed;    right: 0;    top: 0;    width: 60px; height: 50px; font-size: 60px; line-height: 50px;  visibility: visible;  z-index: 200; }
	#logo 			{ position: relative; top: 0px; left: 20px; height: 50px; right: 50px; font-size: 40px; padding: 0px; margin: 0px; text-align: left; line-height: 50px;  }
	#eyes 			{ height: 50px;  }   
	.topnav a { display: block; color: #fff;   text-align: left; height: 50px; padding-left: 20px; line-height: 50px;    }
	.topnav a:hover { background-color: #333; }
		/*Make dropdown links appear inline*/	#eyes ul { position: static;		display: none;	}

	#eyes  li, #eyes li a {		width: 100%;	}
	.certificate7 {width:40px!important ; height:40px!important;}
	.certificate2 {width:40px!important ; height:40px!important;}
	.certificate3 {width:40px!important ; height:40px!important;}
	.certificate4 {width:40px!important ; height:40px!important;}
	.certificate5 {width:40px!important ; height:40px!important;}
	.certificate6 {width:40px!important ; height:40px!important;}
	.certificate {width:40px!important ; height:40px!important;}


  .nav-icon    { display: inline-block;    position: fixed;  color: #fff;  right: 0;    top: 0;    width: 60px; height: 50px; font-size: 60px; line-height: 50px;  visibility: visible;  z-index: 400; }
.action { top: 50px; position: relative; font-size: 20px; line-height: 22px; height: auto;  }
 #head {   padding: 0px; margin: 0px; position: fixed; top: 0px; margin: 0px; left: 0px; right: 0px; height: auto; display: block; width: 100%;  overflow: auto; }
   #body { left: 0px; }
   #logo { position: fixed; top: 0px; left: 20px;height: 40px; width: 100px; margin: 0px; background-size: contain; }
	  #eyes       { background-color: #000;  min-height: 50px; position: relative; top: 0px;  left: 0px; right: 0px; min-height: 50px; height: auto; display: block; }   
  .patch { visibility: hidden; }
  #eyes  li, #eyes li a, #eyes a span{   width: 100%;  color: #fff; line-height: 50px;  display: block; margin: 0px; }
  #topnav {    position: fixed; padding-top: 50px;  left: 0px; right: 0px; background-color: rgb(0, 0, 0); color: #fff;  }
  .topnav a span{ display: block; color: #fff;   text-align: left; height: 50px; padding-left: 20px; line-height: 50px;    }
  .topnav a { display: block; color: #fff;   text-align: left; height: 50px; padding-left: 0px; line-height: 50px;    }
  .topnav a:hover { background-color: #333; }
	#eyes ul {    display: none;  }    /*ke dropdown links appear inline*/

	/*div, section { width: 100%; }*/
	#mySwipe2, .p4 { padding: 5px 0px;  } #see { height: 100%; margin: 0px; } .m4 { margin: 0px; } .w13, .w12, .w49 { min-width: 90vw; width: 90vw; } .h12 { height: auto; } .h27, .h37 { height: auto; }	
	body { overflow-x: hidden; overflow-y: auto; min-height: 400vh; background-size: cover; position: static; left: 0px; right: 0px; top: 0px; }
	.mobme { padding: 15px; } .h13 { height: 52vw; }
	#about { width: 100%; padding:0px;  } .bcwhite { padding-bottom: 0px; } #blog article { margin: 5px; }
	.swipe-wrap .w13 { display: none; } .swipe-wrap .w23 { width: 100%;  } .swipe-wrap .h12 { padding-bottom: 60%; } .swipe-wrap .pics { width: 100%;  }

	#eat { width: 100%; overflow-x: hidden; }
	#map { max-width: 100%; }
	button.w17 { width: 25%; font-size: 20px; }  
	button.w17:nth-of-type(5), button.w17:nth-of-type(6), button.w17:nth-of-type(7) { width: 33.3333333333333%;  }
	button span { font-size: 17px; }
	#head p { display: none; }
	.links { position: fixed; top: 0px; right: 0px; }
	.socials { position: absolute; top: 0px; right: 52px; height: 50px; width: 130px; overflow: hidden; margin: 0px;  }
	.s-halal { position: absolute; top: 0px; right: 182px; margin: 10px 2px; height: 30px; width: 30px; overflow: hidden; filter: invert(1); -webkit-filter: invert(1); }
	.socials a { color: #fff; line-height: 50px; height: 50px; margin: 0px; font-size: 48px;}
	.links p { display: none; }
	#head .mn2 { margin: 0px; }

	#foodmenu 	button:hover span{ line-height: 70px; }

	
	 .vertc { margin-top: 20px; padding: 10px; }
	 #contact div .bccharcoal { padding-bottom: 20px; }
	 .menu-item { font-size:12px; }
	 .menu-name 	{  width: 90%;   }
.menu-price	{  display:none!important;  }

/*.menu-price	{  width: 30%;  }*/
.nav-up {    top: -50px; height: 0px; visibility: hidden; } 
#blog .b-back, #blog .b-forward { display: none; }
#mobile-swipe { text-align: center; padding: 5px; }
#mobile-swipe::before { content: "Swipe to Read All Atithi's Blog";  }
/*section { max-width: 100vw; overflow-x: hidden; margin-left: 0px; margin-right: 0px; }*/
a[href^=tel] { color: inherit; text-decoration: none; }
}

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

}