body {
	overflow-x: hidden;
	/*background-color: #ECE5D5;*/
	background-color: white;
	color: grey;
	margin: 0;
}

hr {
	color: black;
	size: 30px;
	align: left;
	z-index: 999;
}

h2 {
	font-family:'Roboto', sans-serif;
	font-size: 60px;
	padding-bottom: 0;
	width: 100%;
	margin-bottom: 15px;
	float: left;
	display: block;
	color: black;
}

p {
	margin-top: 0;
	font-size: 25px;
	font-family: 'Roboto', sans-serif;
	display: block;
	line-height: 32px;
}

i {
	margin-top: 55px;
	font-size: 90px;
	color: darkblue;
	padding: 0px 5px;
}

i:hover {
	opacity: 0.5;
}

.media {
	display: inline;
}

.intro {
	float: left;
}

.phonetext {
	display: none;
}

#introduction {
	width: 75%;
	margin: auto;
	background-color: white;
	z-index: 90;
}

#sidebar {
	height: 100%;
	width: 60px;
	position: fixed;
	z-index: 420; /* blaze it */
	top: 0;
	left: 0;
	background-color: #181818;
	overflow-x: hidden;
}

#content {
	margin-left: 52px;
	padding-left: 0px;
	background: #fff;
	z-index: 10;
	position: relative;
	margin-bottom: 350px;
	min-height:140vh;
	box-shadow: 0 15px 25px rgba(179, 179, 179, 0.8);

}

#beach {
	width: 120%;
	position: static;
	opacity: 0.9;
	overflow-y: hidden;
	display: block;
}

#title {
	color: white;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 150px;
	letter-spacing: 25px;
	position: relative;
	margin-top: -37%;
	padding-bottom: 15%;
	display: none;
}

#one {
	position: relative;
    text-align: center;
    overflow: hidden;
}

#footer {
  position:fixed;
  bottom:0;
  width:100%;
  height:350px;
  color: black;
  z-index:-10;
  margin-left: 60px;
  padding-left: 15px;
  background-image: url("images/checker.jpg");
  background-repeat: repeat;
  opacity: 1;
}

#social-media {
	margin: auto;
	text-align: center;
	width: 60%;
	display: block;
	z-index: 100;
	height: 200px;
	margin-top: 75px;
	-ms-transform: translate(-50px, 0); /* IE 9 */
    -webkit-transform: translate(-50px, 0); /* Safari */
    transform: translate(-50px, 0); /* Standard syntax */
	
}

/* for all phones*/
@media only screen and (max-width: 500px) {
	h2 {
		font-size: 45px;
	}

	p {
		font-size: 25px;
	}

	i {
		font-size: 80px;
		margin-top: 0px;
		padding: 0;
	}

	.phonetext {
		display: block;
	}

  	#sidebar {
    	display: none;
  	}

  	#beach {
  		background-size: cover;
  	}

  	#content {
  		width: 100%;
  		margin-left: 0px;
  	}

  	#title {
  		font-size: 50px;
  		letter-spacing: 0;
  		padding-bottom: 0px;
  		color: white;
  	}

  	#footer {
  		margin-left: 0px;
  		padding-left: 0px;
  	}

  	#social-media {
  		-ms-transform: translate(0px, 0); /* IE 9 */
    	-webkit-transform: translate(0px, 0); /* Safari */
    	transform: translate(0px, 0); /* Standard syntax */
    	width: 100%;
  	}

  	.media {
		display: block;
		width: 100%;
	}
}
/*iPad (iPad Pro works fine for the regular version)*/
@media only screen and (min-width: 601px){
  	#title {
  		font-size: 125px;
  	}
}