* {
  box-sizing: border-box;
} 
body {
  margin: 1%; 
}
#cCupHeader{
	padding:2%;
}
#divMenuButtons {
	/* background-color: white; */
	/* padding: 1%; */
	float: center;
	margin: 1%;
    border: 0px; 
}
.menu {
	float:center; 
	 width:80%;   /* will shift buttons */
	/*text-align:left;  */
	padding:2px 10px; 	
	/* margin-top: 1%; */
	 border: 1px solid; 
	/*	background-color:  #edbb99; */
}
.Center {
	/* background-color:  #e8f8f5  ; */
	float:left;
	width:50%;
	padding:1%;  
}
.right {
	/* background-color: #f7dc6f ; */
	float:left;
	width:38%;
	padding:1%; 		
}
#btnHome, #btnMenu, #btnAbout, #btnLocation,  #btnContact, #btnPictures, #Buttom {
    background-color: #708090;
     -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius:6px;	
    color: #fff;
    font-family: arial;
    font-size: 30px;
    text-decoration: none;
    cursor: pointer;
	float: center;	
	margin: 0%;
	/* width: 15%  */
}
/* Spinning cup div container & image */
#imgSpinCup{width: 100%; height: 100%px;}
#divSpinCup { 
	width:  12%;
	height: auto;	
	float: left;
	position: absolute;
    top: 3%;
    left: 4%;
	z-index: -1;
	-webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;  
	-moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;	
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg);  }
}
/* Page title and header lines */
h1 {
	font-family: Matura MT Script Capitals;
	font-size: 50px;
	color: #000066;
	padding: 0%;
	float: center;
	text-align: center;
	margin: 1%;
	line-height: 30px;
	text-shadow: 5px 5px 5px  #76D7C4;
}
h2 {
	font-family: Arial;
	font-size: 30px;
	color: #000066;
	text-align: center;
	top: -1px;
	line-height: 20px;
}	
h3 {
	font-family: Arial;
	font-size: 20px;
	color: #000066;
	text-align: center;
	top: -1px;
	line-height: 20px;
}	
/* Sign div container & image */
#imgSignLeft{width: 100%; height: 100%;}
#divSignLeft { 
	position: absolute;
	width:  14%;
	height: auto;	
    top: 3%;
    left: 3%;
	float: left;
	z-index: -1;	
}
/* Sign div container & image */
#imgSignRight{width: 100%; height: 100%;}
#divSignRight { 
	position: absolute;
	width:  16%; 
	height: auto;		
    top: .6%;
    left: 84%;
	z-index: -1;	
}
/*---- Video player -- */
#divVideo video  {	
	width: 90%; 
	height: 90%;	
}
/*---- Welcome & Intro paragraphs -- */
#divIntro { 
	line-height: 25px; 
	padding: 1%;	
}
.welcome {
	font-family: Comic Sans MS;
	font-size: 24pt;
	text-shadow: 5px 5px 5px #FF0000;
	padding: .5%;
}
.p2 {
	font-family: Trebuchet MS;
	font-size: 16pt;
	padding: .5%;
}
.p3 {
	font-family: Trebuchet MS;
	font-size: 16pt;	
	padding: .5%;
}
.p3 {
	font-family: Trebuchet MS;
	font-size: 16pt;	
	padding: 2%;
}
#iFrameMap {
	position: left;
}
/*---- Slider photos -- */
#divSlider {	
	width: 90%; 
	height: 100%;	
    background-color: lightblue;	
	padding: 0;
	box-shadow: 10px 10px 10px #888888;
}	
.divSlider img {      
    width: 94%;
    height: 900px;
	margin: 2%; 	
} 
/*---- Small food photos under intro -- */
.imgPhotoFood {	
    width: 24%;
	height: 120px;	 
} 
.divPhotoFood {       
    max-width: 100%;
	display:block; 
    height: auto;
	padding: 1%;	
}  
.imgPhotoFoodRight1 {	
    width: 46%;
} 
.divPhotoFoodRight1 {       
    max-width: 100%;
	display:block; 
    height: auto;
	padding: 1%;	
}  
/*---- IFrame / Map    -- */
 #iFrameMap {
	width: 960px;
	height: 160px;	
}
#iFrameMapR{
	width: 655px;
	height: 160px;	
}
/*---- Property photo -- */
.divPhotoProperty {       
    width: 100%;
	/* display:block;  */
    height: 100%; 
	padding: 1%;	
}  
.imgPhotoProperty {
	width: 120%;
	height: 460px;
}
/*---- Restaurnat photos -- */
.divPhotoRestaurant1 {       
    width: 120%;
    height: 100%; 
	padding: 1%;
}  
.imgPhotoRestaurant1 {
	width: 100%;
	height: 500px;
}
.divPhotoRestaurant2{       
    width: 120%;
    height: 100%;  
	padding: 1%;
}  
.imgPhotoRestaurant2 {
	width: 100%;
	height: 500px;
}
./* divPhotoRestaurant3 {       
    width: 800px;
    height: 100%;  
	padding: 1%;
}  
.imgPhotoRestaurant3 {
	width: 800px;
	height: 510px;
} */
.divPhotoRestaurantMiti {       
    width: 100%;
	/* display:block;  */
    height: 100%;  
	/* padding: 1%; */
}  
.imgPhotoRestaurantMiti {
	width: 100%;
	height: 810px;
	padding: .5%;
}
/*---- Developer info -- */
#divDeveloperInfo {		
	font-family: Comic Sans MS;
    font-size: 10pt;    		
	padding: 1%;	
	text-align: center;
	border-Top: 4px Double gray;
}

/*-------------------------------*/
/* Media queries START           */
/*-------------------------------*/

/*-------------------------------------------*/  
/* For Large screens                         */
/* ----- Yellow -----                        */
/*-------------------------------------------*/
/* @media screen and (min-width: 1366px) {
    .myBody {background:  #FFC0CB;}
} */
	
/*-------------------------------------------*/  
/* For Laptop and Desktops  -- LARGE --      */
/* ----- Yellow -----                        */
/*-------------------------------------------*/  
@media screen and (min-width: 1024px) and (max-height: 1310px) {
    /* .myBody {background: #FFFF00;}  */	  /* comment color yellow, use for testing */
	#btnhome, #btnmenu, #btnabout, #btnlocation,  #btncontact, #btnpictures{ font-size: 10%; }   
	#divSignLeft { width:  14%; height: auto;  top: 2%;  left: 4%; }	
	#divSignRight { width:  14%; height: auto;  top: 4%;  left: 78%; }	
	#divVideo video  {width: 98%; height: 60%;	}	
	#divSlider { width: 98%; height: 60%; } 
	#divSlider img { width: 100%; height: 600px; }
	#iFrameMap {	width: 98%;	height: 290px; padding:.5%}
	#iFrameMapR { width: 100%;	height: 98%; padding:.5%}
	/* .imgPhotoProperty  {width: 100%; height: 350px; }  */
    /* .imgPhotoRestaurant1 {width: 99%; height: 380px;; }	*/
	/* .imgPhotoRestaurant2 {width: 98%; height: 525px; }  */
	/* .imgPhotoRestaurant3 {width: 98%; height: 600px; }   */
	#divDeveloperInfo { font-size: 100%; }
	body { margin: 2%; 
}
}

/*-------------------------------------------*/  
/* For iPads and/or tablets  -- MEDIUM --    */
/* ----- Aquamarine (green) #7FFFD4 -----    */
/*-------------------------------------------*/  
@media screen and (max-width: 1024px)  {
   /*  .myBody {background: #7FFFD4;}  */   /* comment color green, use for testing */
    #btnHome, #btnMenu, #btnAbout, #btnLocation,  #btnContact, #btnPictures{font-size: 80%; width: 16%; padding: 1%; }   
	h1  {font-size: 160%; line-height: 98%;}
    h2, h3 {font-size: 100%; line-height: 95%;}
	#divSignLeft { width:  14%; height: auto;  top: 2%;  left: auto; }	
	#divSignRight { width:  16%; height: auto;  top: 2%;  left: 80%; }	
	.welcome {font-size: 140%; }
	.p2, .p3 {font-size: 100%; line-height: 100%;} 	
	#divVideo video  {width: 98%; height: 92%;	}	
	.imgPhotoFood {	width: 24%;	height: 80px; }
	#divSlider { width: 98%; height: 300px; } 
	#divSlider img { width: 96%; height: 280px;	} 	
	#iFrameMap {	width: 98%;	height: 30%; padding:1%}
	#iFrameMapR { width: 136%;	height: 98%; padding:.5%}
	.divPhotoProperty { width: 116%; height: 100%; padding: 1%;	}  
	.imgPhotoProperty  {width: 116%; height: 270px; }
	.divPhotoRestaurant1 { width: 116%; height: 100%; padding: 1%;} 
	.imgPhotoRestaurant1 {width: 116%; height: 270px; }
	.divPhotoRestaurant2 { width: 116%; height: 100%; padding: 1%;} 
	.imgPhotoRestaurant2 {width: 116%; height: 270px; }
	/* .imgPhotoRestaurant3 {width: 98%; height: 300px; }	 */
	.divPhotoRestaurantMiti {width: 100%; height: 10%; }
	.imgPhotoRestaurantMiti {width: 100%;height: 375px;	padding: .5%;}
	#divDeveloperInfo { font-size: 60%; }	
}

/*---------------------------------------*/  
/* For Mobile Phones  -- SMALL --        */
/* ----- Cornflower Blue  #6495ED -----  */  
/*---------------------------------------*/  
@media only screen and (max-width: 480px) {
    /* .myBody {background: #6495ED;}  */    /* comment color blue, use for testing */
	.Center, .right { width:100%; }
	.menu { width:100%; padding: 1% }
	#btnHome, #btnMenu, #btnAbout, #btnLocation, #btnContact, #btnPictures{font-size: 60%; width: 18%; padding: 1% }
	h1  {font-size: 94%; line-height: 98%;}
	h2, h3 {font-size: 55%; line-height: 94%;}
	#divSignLeft { width:  12%; height: auto;  top: .5%;  left: auto; }	
	#divSignRight { width:  15%; height: auto;  top: .2%;  left: 84%; }	
	.welcome {font-size: 120%; }
	.p2, .p3 {font-size: 69%; line-height: 100%;} 
	#divVideo video  {width: 98%; height: 92%;	}	
	.imgPhotoFood {	width: 23.5%;	height: 76px; } 
	#divSlider { width: 98%; height: 300px; } 
	#divSlider img { width: 100%; height: 300px;	} 	
	#iFrameMap {	width: 96%;	height: 20%; padding:1%}
	#iFrameMapR { width: 96%;	height: 20%; padding:1%}
	.divPhotoProperty {width: 100%; height: 100%; } 
    .divPhotoRestaurant1 {width: 100%; height: 100%; }
	.divPhotoRestaurant2 {width: 100%; height: 70%; }
	/* .divPhotoRestaurant3 {width: 100%; height: 70%; } */
	.divPhotoRestaurantMiti {width: 100%; height: 10%; }
	.imgPhotoRestaurantMiti {width: 100%;height: 400px;	padding: .5%;}
	#divDeveloperInfo { font-size: 60%; }
}

/*-------------------------------*/
/* Media queries END             */
/*-------------------------------*/