@charset "utf-8";

html, body, div, p, br, ul, li, img, h1, h2, h3, h4, h5, h6 {
	margin:0;
	padding:0;
	border:0;
}

html, body {
	width:100%;
	height:100%;
}

#BG {
	height: 100%;
	width: 100%;
	background: url('images/culburra-lighthouse.jpg') no-repeat center center fixed;
	background-size: cover;
	position:relative;
}


h1 {
	font-family: 'Comfortaa', Arial, Verdana;
	font-size:36px;
	color:#fff;
	margin-bottom:20px;
}

h2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#fff;
	font-weight:400;
	margin-bottom:20px;
}

h3 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#fff;
	font-weight:400;
	margin-bottom:20px;
}

h3 a, h3 a:visited {
	color:#fff;
	text-decoration:underline;
}

h3 a:hover {
	color:#ccc;
	text-decoration:underline;
}

#Heading {
	background:rgba(0,0,0, 0.4);
    width: 20%;
    height: 30%;
    position: absolute;
    right: 0px;
    top: 0px; 
}

#Copy {
	width:90%;
	margin:5%;
	text-align:center;
	position:absolute;
}

@media screen and (max-width:1400px) {
	
#Heading {
    width: 30%;
    height: 40%;
	right: 0px;
    top: 0px;
}	
	
}


@media screen and (max-width:800px) {
	
#Heading {
    width: 45%;
    height: 35%; 
	right: 0px;
    top: 0px;
}	
	
}

@media screen and (max-width:414px) {
	
#Heading {
    width: 90%;
    height: 50%;
	margin-left: -45%;
    margin-top: -5%; 
	left: 50%;
    top: 10%;
}	
	
}