header {
	padding: 0;
	display:inline-block;
	background-color: #fff;
	width: 90%;
	margin-bottom: 1em;
	
}

.logo {
	
	width: 13%;
	float: left;
	margin-left: 1em;
}

.logo:hover {
	
	content: url(../images/logohk.png);
	width: 13%;
	float: left;
	margin-left: 1em;	
}

.alogo {
	
	float: left;
}

nav {
	font-family: 'Quicksand', sans-serif;
		margin-right: 2em;
}

.roll {

	float: right;
}





.link:hover {
	
	color: #fec7bc;
	text-decoration: none;
}

.link{
	text-decoration: none;
	color: white;
}

body{
	
	background-color: #cae7e3;
	text-align: center;
	
}
.wrapper{
	background-color: #fec7bc;
	width: 80%;
	 margin: 0 auto;
        padding: 4em;
	overflow: hidden;
	outline: dashed white;
}

h1{
	padding: .4em;
	background-color: #cae7e3;
	outline: dashed white;
	font-family: 'Vibur', cursive;
	font-size: 5em;
	color: white;
	margin-top: 0;
}

.para{
	
	text-align: center;
	padding: 1em;
	outline: dashed white;
	background-color: #cae7e3; 
	font-family: 'Quicksand', sans-serif;
	font-size: 1.5em;
	margin-top: 1em;
	color: white;
}


p{
	text-align: center;
	padding: 1em;
	outline: dashed white;
	background-color: #cae7e3; 
	font-family: 'Quicksand', sans-serif;
	font-size: 1.3em;
	margin-top: 0;
	font-weight: bold;
	color: white;
}

.alignl{
	
	float: left;
	width: 49%;
}

.alignr{
	
	float: right;
	width: 49%;
}

footer {
	 
	width: 90%; 
	margin: .2em;
	clear: both;
	padding: 20px;
	text-align: center;
	font-family: 'Quicksand', sans-serif;
}

@media screen and (max-width: 700px) {
  
body {
	background-color: #cae7e3;
	font-size: 14px;
}
header {
	
	width:auto; 
	
}
h1 {
	font-size: 4em;
}
nav {
	
	width: auto; 
}
nav a {
	padding: .5em;
	display: block;

}
	
a{
	width: 14%;	
		
}
	
	
p{
	float:none;
	text-align: right;
	width: auto;
	padding: 1em;
	outline: dashed white;
	background-color: #cae7e3; 
	font-family: 'Quicksand', sans-serif;
	font-size: 1.6em;
	margin-top: 0;
	color: white;
}
.me{
	width: 50%;
	float: none;
	outline: dashed white;
}
.one {
	
	width:auto; 
	
	float: none;
}
.two {
	width:auto; 
	
	float: none;
}
.three {
	width:auto; 
	
	float: none;
}

footer {
	width: auto; 

	padding: 1.5em;
	
}
}

@media screen and (max-width: 550px) {
body {
	background-color: #cae7e3;
	font-size: 12px;
}
h1 {
	font-size: 3.5em;
}
nav a {
	padding: .3em;
	display: block;

}
	
a{
	width: 14%;	
}
	
	
p{
	float:none;
	text-align: right;
	width: auto;
	padding: 1em;
	outline: dashed white;
	background-color: #cae7e3; 
	font-family: 'Quicksand', sans-serif;
	font-size: 1.6em;
	margin-top: 0;
	color: white;
}
.me{
	width: 50%;
	float: none;
	outline: dashed white;
}
.wrapper {
	
	width:auto; 
	
	float: none;
}
.two {
	width:auto; 
	
	float: none;
}
.three {
	display: none;
}

footer {
	width: auto; 

	padding: 1em;
	
}
}
