@charset "utf-8";

*{margin:0;
padding:0;}

body{
	background-color:#fff;
	text-align:center;
		font-family: Arial;}

#wrapper{
	display:block;
	width:70%;
	margin-left:15%;
	margin-right:15%;
	text-align:center;
	background-color:#fff;
	padding-top:0em;
}

#cpBt{
display:block;
	width:2em;
	height:2em;
	background-color:#fff;
	padding: 3px 7px;
	padding-top:2px;
	cursor:pointer;
	border-radius:3px;
	border: 1px solid #990000;
	transition:background 0.1s linear 0s;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:6em;
}


#cpBt:hover{
border:#333333 1px solid;
}

#cpBt:hover div{
background-color:#333333;
}

#cpBt > div{
	width:30px;
	height:6px;
	background-color:#990000;
	margin: 4px 0;
	border-radius: 6px;
	transition:background 0.1s linear 0s;
}

#nav{
	margin-left:30%;
	margin-right:30%;
	width:40%;
	height:2em;
	margin-top:2.35em;
	display:none;
	height:2em;
	background-color: #990000;
	cursor:pointer;
	border-radius:3px;
	border: 1px solid #990000;
	transition:background 0.1s linear 0s;
	text-align:center;
}

#nav a{
text-decoration:none;
float:left;
text-align:center;
color:#fff;
font-family: Impact, Arial;
font-size:1.2em;
width:20%;
padding-top:0.25em;
text-align:center;}


#nav a:hover{
	color:#333333;
}

#nav a:nth-child(3){
	color:#333333;
	background-color:#fff;
	padding-bottom:0.25em;
}
	
#nav a:nth-child(3):hover{
	color:#333333;
	}

#headline{
	clear:both;
	position:absolute;
	display:block;
	text-align:center;
	width:98%;
	margin-left:1%;
	margin-right:1%;
	top:14.8em;
	}
	
h1{
font-family: Impact, Arial;
color:#990000;
font-size:2.5em;
}

h3{font-family: Arial;
	color:#333333;
	font-weight: regular;
	font-size:1.3em;}

#laptop{
	display:block;
top:21.23em;
	position:absolute;
	z-index:0;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

#laptop1, #laptop2, #laptop3, #laptop4{display:none;}

#boat{display:inline-block;
position:absolute;
top:34.6em;
z-index:1;
right:38em;

animation: sailing alternate 15s infinite;
-webkit-animation: sailing alternate 15s infinite;
  -moz-animation: sailing alternate 15s infinite;
  -ms-animation: sailing alternate 15s infinite;
  -o-animation: sailing alternate 15s infinite;
}

@keyframes sailing {
  from {
    margin-right:10%;
	width: 40%; 
	}

  to {
    margin-left: 10%;
    width: 40%;
  }
}

@-webkit-keyframes sailing {
  from {
    margin-right:10%;
	width: 40%;
	}

  to {
    margin-left: 10%;
    width: 40%;
  }
}

@-moz-keyframes sailing {
  from {
    margin-right:10%;
	width: 40%;
	}

  to {
    margin-left: 10%;
    width: 40%;
  }
}

@-ms-keyframes sailing {
  from {
    margin-right:10%;
	width: 40%;
	}

  to {
    margin-left: 10%;
    width: 40%;
  }
}

@-o-keyframes sailing {
  from {
    margin-right:10%;
	width: 40%;
	}

  to {
    margin-left: 10%;
    width: 40%;
  }
}


#radio {display:inline-block;
position:absolute;
width:100%;
height:auto;
top:38.3em;
right: 9.9em;
z-index:3;

}

#radio1{
	animation:radioshake alternate 1s infinite;
	animation-play-state:paused;
	
	-webkit-animation:radioshake alternate 1s infinite;
	-webkit-animation-play-state:paused;

	-moz-animation:radioshake alternate 1s infinite;
	-moz-animation-play-state:paused;
	
	-ms-animation:radioshake alternate 1s infinite;
	-ms-animation-play-state:paused;

	
	-o-animation:radioshake alternate 1s infinite;
	-o-animation-play-state:paused;
	
	}

@keyframes radioshake {
    10%, 30%, 50%, 70%, 90% {transform:  rotate(3deg);} 
   20%, 40%, 60%, 80% {transform:  rotate(-3deg);}
}


@-webkit-keyframes radioshake {
    10%, 30%, 50%, 70%, 90% {-webkit-transform:  rotate(3deg);} 
   20%, 40%, 60%, 80% {-webkit-transform:  rotate(-3deg);}
}

@-moz-keyframes radioshake {
    10%, 30%, 50%, 70%, 90% {-moz-transform:  rotate(3deg);} 
   20%, 40%, 60%, 80% {-moz-transform:  rotate(-3deg);}
}

@-ms-keyframes radioshake {
    10%, 30%, 50%, 70%, 90% {-ms-transform:  rotate(3deg);} 
   20%, 40%, 60%, 80% {-ms-transform:  rotate(-3deg);}
}

@-o-keyframes radioshake {
    10%, 30%, 50%, 70%, 90% {-o-transform:  rotate(3deg);} 
   20%, 40%, 60%, 80% {-o-transform:  rotate(-3deg);}
}


#bird{
	display:inline-block;
	position:absolute;
	top:24.8em;
	left:8.6em;
	width:100%;
	height:auto;
	z-index:2;
	transform:scale(0.7,0.7);
	}

#bird img{
	position:absolute;
}

.seagull1 { 
	animation-name: fade;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 0.83s;
	animation-direction: alternate;
	
	-webkit-animation-name: fade;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 0.83s;
	-webkit-animation-direction: alternate;
		
	-moz-animation-name: fade;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 0.83s;
	-moz-animation-direction: alternate;
	
	-ms-animation-name: fade;
	-ms-animation-timing-function: ease-in-out;
	-ms-animation-iteration-count: infinite;
	-ms-animation-duration: 0.83s;
	-ms-animation-direction: alternate;

	-o-animation-name: fade;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count: infinite;
	-o-animation-duration: 0.83s;
	-o-animation-direction: alternate;
	}

@keyframes fade {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}


@-webkit-keyframes fade {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@-moz-keyframes fade {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}


@-ms-keyframes fade {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}


@-o-keyframes fade {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

.seagull { animation-name: fadeout;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 0.83s;
	animation-direction: alternate;

	
	-webkit-animation-name: fadeout;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 0.83s;
	-webkit-animation-direction: alternate;
	
	-moz-animation-name: fadeout;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 0.83s;
	-moz-animation-direction: alternate;
	
	-ms-animation-name: fadeout;
	-ms-animation-timing-function: ease-in-out;
	-ms-animation-iteration-count: infinite;
	-ms-animation-duration: 0.83s;
	-ms-animation-direction: alternate;
	
	-o-animation-name: fadeout;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count: infinite;
	-o-animation-duration: 0.83s;
	-o-animation-direction: alternate;
	
	}

@keyframes fadeout {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}


@-webkit-keyframes fadeout {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes fadeout {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@-ms-keyframes fadeout {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@-o-keyframes fadeout {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}


#umbrella{
	display:inline-block;
	position:absolute;
	top:23.6em;
	left:-10.8em;
	width:100%;
	height:auto;
	z-index:2;
	}

#umbrella1{
	position:absolute;
}

#owl{
	display:inline-block;
	position:absolute;
	top:28.4em;
	left:0.9em;
	width:100%;
	height:auto;
	z-index:2;
	transform:scale(0.9,0.9);
	}

#owl img{
	position:absolute;
}

.owl {animation-name: tanning;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-duration: 6s;
	animation-direction: linear;

	-webkit-animation-name: tanning;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 6s;
	-webkit-animation-direction: linear;

	-moz-animation-name: tanning;
	-moz-animation-timing-function: ease-in;
	-moz-animation-iteration-count: 1;
	-moz-animation-duration: 6s;
	-moz-animation-direction: linear;
	
	-ms-animation-name: tanning;
	-ms-animation-timing-function: ease-in;
	-ms-animation-iteration-count: 1;
	-ms-animation-duration: 6s;
	-ms-animation-direction: linear;
	
	-o-animation-name: tanning;
	-o-animation-timing-function: ease-in;
	-o-animation-iteration-count: 1;
	-o-animation-duration: 6s;
	-o-animation-direction: linear;
	}

@keyframes tanning {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes tanning {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes tanning {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@-ms-keyframes tanning {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}


@-o-keyframes tanning {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}


/*Media Queries*/


@media only screen and (max-device-width:1600px) {

#nav{width:60%;
margin-left:20%;
margin-right:20%;}

#laptop{
top:21.4em;}
	
#boat{
	right:25.5em;
}

#radio{top:38.6em;}

#umbrella{
	left:-10.5em;}

#owl{
	top:28.6em;
	left:0.5em;
	width:100%;
	height:auto;
	z-index:2;
	transform:scale(0.9,0.9);
	}
}

@media only screen and (max-device-width:1366px) {

#cpBt{	margin-top:3em;
}

#headline{
	top:11.55em;
}

#laptop{
top:17.8em;
}	

#boat{
right:19.5em;
top:31.1em;
}

#radio {
top:35em;
}

#bird{
	top:20.8em;
	}


#umbrella{
	top:20.2em;
	}

#owl{
	top:25em;
	left:0.2em;
}
}

@media only screen and (max-device-width:1280px) {

#wrapper{width:80%;
margin-left:10%;
margin-right:10%;}

#cpBt{	margin-top:3em;
}
}

@media only screen and  (max-device-width:1024px) {

#cpBt{	margin-top:2em;
}

#nav{margin-top:2em;
width:98%;
margin-left:1%;
margin-right:1%;
}

#nav a:nth-child(3){
	padding-bottom:0.2em;
}


h1{
font-size:2.5em;
}

h3{
	font-size:1em;}

#headline{
top:10.05em;
}

#laptop{
	top:16.2em;
}	
	
#boat{
right:14.5em;
top:29.6em;
}

#radio {
top:33.5em;
}

#bird{
	top:19.2em;
	left:7.8em;
	}

#umbrella{
	top:18.3em;
	}

#owl{
	top:23.4em;
	left:0.3em;
}
}

@media only screen and  (max-device-width:768px) {

#wrapper{width:98%;
margin-left:1%;
margin-right:1%;}

#cpBt{
	width:1.6em;
	height:1.8em;
	padding: 3px 7px;
	top:3em;
	margin-left:auto;
	margin-right:auto;
}

#cpBt > div{
	width:25px;
	height:4px;
	margin: 4px 0;
	border-radius: 6px;
	}

#nav{
	margin-top:1.98em;
	font-size:0.7em;
	width:88%;
	margin-left:6%;
	margin-right:6%;
}

#nav a{font-size:1.1em;}

h3{font-size:0.8em;}

#headline{
	top:8.25em;
	}

#laptop1{display:block;
	position:absolute;
	z-index:0;
	top:13.9em;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	}
	
#laptop, #laptop2, #laptop3, #laptop4{display:none;}

#boat{
top:23.4em;
transform:scale(0.75,0.75);
right: 10em;}

#radio {
top:26.1em;
right:7em;
transform:scale(0.8,0.8);
}

#bird{
	top:16.2em;
	left:6em;
	transform:scale(0.5,0.5);
	}

#umbrella{
	top:15.1em;
	left:-8.8em;
	transform:scale(0.75,0.75);
	}

#owl{
	top:18.1em;
	left:-0.8em;
	transform:scale(0.73,0.73);
	}
}

@media only screen and   (max-device-width:540px){

#wrapper{width:99%;
margin-left:0.5%;
margin-right:0.5%;}

#cpBt{
	width:1.4em;
	height:1.4em;
	padding: 1px 3px;
	margin-top:0.75em;
}

#cpBt > div{
	width:20px;
	height:3px;
	margin: 3px 1px;
	border-radius: 6px;
	}

#nav{
	margin-top:1.31em;
	font-size:0.5em;
	height:1.7em;
	font-weight:regular;
}

#nav a{
padding-top:2px;}

#nav a:nth-child(3){
	padding-bottom:1px;
}

#headline{
	top:4.9em;
}

h1{
	font-size:1em;
	}

h3{font-size:9px;}

#laptop2{display:block;
	position:absolute;
	z-index:0;
	top:7.7em;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

#laptop, #laptop1, #laptop3, #laptop4{display:none;}

#boat{
right:7em;
top:12.3em;
transform:scale(0.6,0.6);}

#radio {
top:13.7em;
transform:scale(0.5,0.5);
right:4em;
}

#bird{
	top:9.2em;
	left:3.3em;
	transform:scale(0.3,0.3);
	}

#umbrella{
	top:8.9em;
	left:-4.6em;
	transform:scale(0.4,0.4);
	}

#owl{
	top:10.25em;
	left:-0.3em;
	transform:scale(0.4,0.4);
	}
}

@media only screen and (max-device-width:375px){

#laptop3{display:block;
	position:absolute;
	z-index:0;
	top:7.7em;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

#laptop, #laptop1, #laptop2, #laptop4{
	display:none;
}

#boat{
right:7em;
top:11.78em;
transform:scale(0.45,0.45);}

#radio {
top:12.98em;
transform:scale(0.45,0.45);
right:3.5em;
}

#bird{
	top:8.88em;
	left:3.2em;
	transform:scale(0.25,0.25);
	}

#umbrella{
	top:8.68em;
	left:-4.2em;
	transform:scale(0.36,0.36);
	}

#owl{
	top:10.08em;
	left:-0.4em;
	transform:scale(0.35,0.35);
	}
}

@media only screen and (max-device-width:320px){

#nav{height:1.3em;
width:80%;
margin-left:10%;
margin-right:10%;
margin-top:1.63em;}

#nav a{font-size:0.5em;
padding-top:0;}

#nav a:nth-child(3){
	padding-bottom:0;
}

#headline{
	top:4.65em;
}

h3{font-size:0.4em;}
	
#laptop4{display:block;
	position:absolute;
	z-index:0;
	top:6.95em;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

#laptop, #laptop1, #laptop2, #laptop3
{display:none;
}

#boat{
right:6em;
top:9.7em;
transform:scale(0.5,0.5);}

#radio {
top:10.66em;
transform:scale(0.38,0.38);
right:2.7em;
}

#bird{
	top:7.8em;
	left:2.4em;
	transform:scale(0.23,0.23);
	}

#umbrella{
	top:7.6em;
	left:-3.6em;
	transform:scale(0.29,0.29);
	}

#owl{
	top:8.5em;
	left:-0.6em;
	transform:scale(0.3,0.3);
	}
}