.toptext {
  color: #fff;
  font-size: 12em;
  font-weight: bold;
  font-family: Helvetica;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

  }
 h1 {
    color: #fff;
    font-size: 6em;
    font-weight: bold;
    font-family: Helvetica;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
    text-align: center;
 
    }

    div.one{
			width: 60%;
      height: 95%;
      border-radius: 10px;
			margin: 2% 10% 10% 21%;
			background-color:white;
			border: 1px solid black;
	    font-family: Helvetica;
      font-size: 2em;
      text-align: center;
		}	
p{


  margin: auto;
  width: 90%;
}
/*     boxtext start */
.text
{
	display:table-cell;
	text-align:center;
  vertical-align:middle;
  width:100%; height:100%;
	margin:0;
font-family: Helvetica;

	font-weight:bold;
  font-size:4em;
  color: #fff;
}

.boxtext{
  text-decoration: none;
  color: #fff;
text-shadow: 4px 4px #000000;

}



/*     boxtext end */
      
    
  
  .toptext {
    text-align: center;
  }
  .toptext2 {
    text-align: center;
  }


h3{
  position: relative;
  text-align: center;
  
      color:  white;
      font-size: 6em; 
      font-family: 'Arimo', sans-serif;
}

main{
  background-color: #006288;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.wrapper{
  margin:  0  auto; width:  85%; background-color:  #006288; box-shadow: 0 0 10px #0c0319;
}

footer{
  height: 2em; padding: 40px; margin: 0; background-color: #006288; color: #fff; font-style: italic; text-align: center;
}

.box{
  height: 100vh;
  width: 100%;
  background-image: url(../media/land5.jpg);
  background-size: cover; /* contain , cover */
  background-attachment: fixed;
  display: table;
  background-color: #006288;
  border-bottom: #fff;

}

.box1{
  height: 100vh;
  width: 100%;
  background-image: url(../media/video.gif);
  background-size: cover; /* contain , cover */
  background-attachment: fixed;
  display: table;
  background-color: #006288;

}

.box2{
  height: 100vh;
  width: 100%;
  background-image: url(../media/bhamhotel.jpg);
  background-size: cover; /* contain , cover */
  background-attachment: fixed;
  display: table;
  background-color: #006288;
}

.box3{
  height: 100vh;
  width: 100%;
  background-image: url(../media/about.jpg);
  background-size: cover; /* contain , cover */
  background-attachment: fixed;
  display: table;
  background-color: #006288;
}
.box4{
  height: 70vh;
  width: 100%;
  background-image: url(../media/contact.png);
  background-size: cover; /* contain , cover */
  background-attachment: fixed;
  display: table;
  background-color: #006288;
 
}


h2{
  margin: 0px;
  color: #fff;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  font-size: 80px;
  background-color: #006288;}

  .content{
    background-color: #fff;
    width: 100%;
    height: 80%;

display: block;
    margin: auto;
  }

  .content{
    background-color: #006288;
    
    width: 100%;
    height:100em;
   
 
    }

/* nav start */
body{
	margin:0px;
 background-color: #006288;
 
	font-family:"Helvetica Neue", Helvetica, Arial;
}

#sidebar{
	background:#006290;
	width:200px;
  height: 22em; 
	display:block;
	position:absolute;
	left:-200px;
	top:0px;
  transition:left 0.3s linear;

}

#sidebar.visible{
	left:0px;
	transition:left 0.3s linear;
}

ul{
	margin:0px;
  padding:0px;
  position: absolute;
}

ul li{
  list-style:none;
  padding-top: 5%;
}

ul li a{
	background: #000000;
	color:#ffffff;
	border-bottom:1px solid #111;
	display:block;
	width:180px;
	padding:10px;
  text-decoration: none;
  font-size: 2em;
  font-family: Helvetica;
  opacity: 0.51;

}

#sidebar-btn{
	display:inline-block;
	vertical-align: middle;
	width:20px;
	height:15px;
	cursor:pointer;
	margin:20px;
	position:absolute;
	top:0px;
	right:-60px;
}

#sidebar-btn span{
	height:1px;
	background:#111;
	margin-bottom:5px;
	display:block;
}

#sidebar-btn span:nth-child(2){
	width:100%;
}

#sidebar-btn span:nth-child(3){
	width:75%;
}


/* nav end */

/* lightbox start */

.room{

	float: left;
  padding: 1em 15px 15px ;
  margin: auto;
	
}


.roomtext{

	text-align: center;
	font-size: 12px;
	font-weight: bold;
}

.banner{width: 100%;
	height: 538px;
	position: relative;}

#slider{width: 100%;
	height: 538px;
	position: absolute;
}

#next{
	text-align: center;
	line-height:50px;
	color: #ffffff;
	width:50px;height:50px;
	background-color:#1aaba5;
	position: absolute;
	top:205px; 
	right:0;
	z-index:99; 
	cursor: pointer;
	 opacity:.4;}

#pre{text-align: center;
	line-height: 50px;
	color: #ffffff;
	width:50px;
	height:50px;
	background-color: #1aaba5;
	position: absolute;
	top:205px;
	left:0;
	z-index:99;
	cursor: pointer;
	opacity:.4;}

.banner:hover #next{
	opacity:1;
	transition: all .5s ease-out;
	-webkit-transition: all .5s ease-out;
	-ms-transition: all .5s ease-out;}

.banner:hover #pre{
	opacity:1;
	transition: all .5s ease-out;
	-webkit-transition: all .5s ease-out;
	-ms-transition: all .5s ease-out;}
#curtain{
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		position: fixed;
		background-color: rgba(0,0,0,0.4);
	}
#light{
		max-width: 80%;
		max-height: 80%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		position: absolute;
		margin: auto;
		}

#close {
	height: 50px;
	width: 50px;
	top: 0;
	right: 0;
	position: absolute;
	z-index: 990;
}
/* lightbox end */





/* photography start */
.box5{
  height: 100vh;
  width: 100%;
  background-image: url(../media/portaits.jpg);
  background-size: cover; /* contain , cover */
  background-attachment: fixed;
  display: table;
  background-color: #006288;
}

.box6{
  height: 100vh;
  width: 100%;
  background-image: url(../media/composite.jpg);
  background-size: cover; /* contain , cover */
  background-attachment: fixed;
  display: table;
  background-color: #006288;
}
.box7{
  height: 70vh;
  width: 100%;
  background-image: url(../media/landscape.jpg);
  background-size: cover; /* contain , cover */
  background-attachment: fixed;
  display: table;
  background-color: #006288;
 
}


/* photography end */





/* portrait start */
.picture{
  
width: 500px;
height: 500px;
display: block;
margin: auto;
padding-left: 25%;

 
}
/* portrait end */



/* about me start   */
#aboutme{
  height:60%;
  width: 60%;


  background-size: cover; /* contain , cover */
  background-attachment: fixed;
  display:block;
  background-color:#fff;

  border: outset #006288 20px;
  margin: auto;
}
/* aboutme end */


#contact{
  margin:  auto;

  display: block;}


input [type=submit]{width: 100%;padding: 5em;border: 5px solid;cursor: pointer;background-color:#697e83; border-radius: 2px; }

input[type=text], [type=email]{
padding: 2em;border-radius: 2px; width: 50em;}

form{
  width: 50%;
  font-family:  Helvetica;
  font-size: 1.2em;
  padding-top: 15px;

display: inline-table;}
textarea{
  width: 60em;
  margin: auto;
  padding: 5px;
}

#contactimg{
  margin:  auto;
  width: 50%;
  display: block;}

#logocontact{
  height: 60%;
  width: 60%
}


#abouttable{
  margin: auto;
  font-size: 20px;

  
}
 #compscale{
   width: 500px;
   height: 500px;
  
   margin: auto;
 }

 #landscale{
  width: 100%;
  height: 500px;
 
  margin: auto;
 }

 #webpic{

  width: 500px;
  height: 500px;
  margin: auto;
  padding: 200px;
 
 }






 .banner{width: 50%;
	height: 100%;
  position: relative;
margin: auto;}

#slider{width: 100%;
	height: 538px;
	position: absolute;
	overflow: hidden;}

#next{
	text-align: center;
	line-height:50px;
	color: #ffffff;
	width:50px;height:50px;
	background-color:#006288;
	position: absolute;
	top:205px; 
	right:0;
	z-index:99; 
	cursor: pointer;
	 opacity:.4;}

#pre{text-align: center;
	line-height: 50px;
	color: #ffffff;
	width:50px;
	height:50px;
	background-color: #006288;
	position: absolute;
	top:205px;
	left:0;
	z-index:99;
	cursor: pointer;
	opacity:.4;}

.banner:hover #next{
	opacity:1;
	transition: all .5s ease-out;
	-webkit-transition: all .5s ease-out;
	-ms-transition: all .5s ease-out;}

.banner:hover #pre{
	opacity:1;
	transition: all .5s ease-out;
	-webkit-transition: all .5s ease-out;
	-ms-transition: all .5s ease-out;}
#curtain{
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		position: fixed;
		background-color: rgba(0,0,0,0.4);
	}
#light{
		max-width: 80%;
		max-height: 80%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		position: absolute;
		margin: auto;
		}

#close {
	height: 50px;
	width: 50px;
	top: 0;
	right: 0;
	position: absolute;
	z-index: 990;
}



.video{
  width: 100%;
  height: 100%;
}