body{
	background-color:#a8d0e6;
	overflow:hidden;
}

@font-face{
	font-family:mtBld;
	src:url(../fonts/montserrat-bold-webfont.eot);
	src:url(../fonts/montserrat-bold-webfont.svg)format('svg');
	src:url(../fonts/montserrat-bold-webfont.ttf)format('truetype');
	src:url(../fonts/montserrat-bold-webfont.woff)format('woff');
	font-weight:bold;
	font-style:bold;
}

h1{
	font-family:mtBld;
	font-size:16px;
	color:white;
	letter-spacing:2px;
}

h2{
	font-family:mtBld;
	font-size:56px;
	color:#a8d0e6;
	letter-spacing:2px;
	margin-top:54px;
}

h3{
	font-family:mtBld;
	font-size:16px;
	color:white;
	letter-spacing:2px;
	padding-top:22px;
	
}

a{
	text-decoration:none;
}

#page_effect{
	display:none;
}

#container{
	
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -40%);
}

.active{
	background-color:white;
}

.boat{
	width:261.82px;
	height:329.037px;
	position:absolute;
	
	
	
}

.rotate{
	transform: rotate(180deg);
	transition-duration:.5s;
}

.raise{
	margin-top:0px;
	transition-duration:1s;
}

.down{
	margin-top:20px;
}

#boatContainer{
	animation: bob 3s infinite; /* IE 10+ */
	z-index:8;
	width:261.82px;
	height:329.037px;
	position:absolute;
	top:0%;
	left:0%;
	transform: translate(0%, 0%);
	margin-left:200px;
	margin-top:-160px;
}

@keyframes bob {
  0%,100%   { transform: translateY(5px); }
  50% { transform: translateY(-5px); }
}

#boatBack{
	background-image:url(../images/1-boat-back.png);
	z-index:1;
}

#boatBackG{
	background-image:url(../images/1-boat-back-green.png);
	z-index:1;
}

#flag{
	background-image:url(../images/2-flag.png);
	z-index:6;
	margin-top:20px;
}

#cabin{
	background-image:url(../images/3-cabin.png);
	z-index:3;
}

#window{
	background-image:url(../images/4-window.png);
	z-index:4;

}

#sail{
	background-image:url(../images/5-sail.png);
	z-index:5;
}

#boatFront{
	background-image:url(../images/6-boat-front.png);
	z-index:6;
}

#boatFrontG{
	background-image:url(../images/6-boat-front-green.png);
	z-index:6;
}

/*#center{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}*/

#frame{
	width: 622px;
	height: 356px;
	/*-webkit-transform: skew(45deg);
	   -moz-transform: skew(45deg);
	     -o-transform: skew(-60deg);*/
	
	/*transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);*/
	
	transform: rotate(-45deg) skew(15deg, 15deg);
	
	/*ms-transform: rotate(210deg) skew(-30deg) translate(-200px, -60px) scaleY(0.864);
    -webkit-transform: rotate(210deg) skew(-30deg) translate(-200px, -60px) scaleY(0.864);
    tran/*sform: rotate(210deg) skew(-30deg) translate(-200px, -60px) scaleY(0.864);*/
	
	/*transform: rotate(-60deg) skew(-60deg);
	transform:;*/
	
	/*-webkit-transform: skew(63deg,-26.6deg);
	-moz-transform: skew(63deg,-26.6deg);
	-o-transform: skew(63deg,-26.6deg);
	-ms-transform: skew(63deg,-26.6deg);
	transform: skew(63deg,-26.6deg);*/
  
	
	

	opacity:1;
	outline-color:white;
	outline-style:solid;
	outline-width:4px;
	outline-offset:-4px;
	
	/*margin:100px auto 0 auto;*/
	
}

.wheel{
	background-image:url(../images/wheel.png);
}

#topLeftButton{
	width:183px;
	height:185px;
	margin-top:17px;
	margin-left:18px;
	
		 
	outline-color:white;
	outline-style:solid;
	outline-width:4px;
	outline-offset:-4px;
	
	position:absolute;
	
	
/*    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         10s; 
    -webkit-animation-iteration-count:  infinite;
     -webkit-animation-timing-function: linear;*/
    
}

/*@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}*/

#topRight{
	width:384px;
	height:185px;
	margin-top:17px;
	margin-left:220px;

		 
	/*background-color:red;
	opacity:.2; */
		 
	outline-color:white;
	outline-style:solid;
	outline-width:4px;
	outline-offset:-4px;
	
	position:absolute;
}

#bottomButtons li{
	width:82px;
	height:85px;
	margin-top:254px;

		 
	/*background-color:red;
	opacity:.2;*/ 
		 
	outline-color:white;
	outline-style:solid;
	outline-width:4px;
	outline-offset:-4px;
	
	position:absolute;
	
}

.buttonTitles{
	-webkit-transform: skew(-45deg);
	   -moz-transform: skew(-45deg);
	     -o-transform: skew(-45deg);
		 
	
		 position:absolute;
		 
	margin-top:220px;
	
	transition: background 4s;
}

#title1{
	margin-left:28px;
	opacity:.5;
}

#button1{
	margin-left:18px;
}

#title2{
	margin-left:128px;
	opacity:.5;
}


#button2{
	margin-left:118px;
	transition-duration:.5s;
	
}

#title3{
	margin-left:230px;
	opacity:.5;
}

#button3{
	margin-left:220px;
}

#title4{
	margin-left:330px;
	opacity:.5;
}

#button4{
	margin-left:320px;
}

#title5{
	margin-left:431px;
	opacity:.5;
}

#button5{
	margin-left:421px;
}

#title6{
	margin-left:532px;
	opacity:.5;
}

#button6{
	margin-left:522px;
}

#theEnd{
	background-color:#a8d0e6;
	width:100%;
	height:100vh;
	z-index:10;
	position:absolute;
}

#containerTwo{
	background-color:white;
	width:474px;
	height:282px;
	z-index:11;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	text-align:center;
	border-radius:25px;
}

#playAgain{
	background-color:#a8d0e6;
	width:306px;
	height:62px;
	margin-left:84px;
	margin-top:62px;
	border-radius:10px;
}