/* Header */
header { height: 430px; background: #ffffff url(../images/banner_1200.jpg) no-repeat center bottom; margin 0; position: relative; }
header a.logo { position: absolute; display: block; width: 190px; height: 110px; background: url(../images/logo-v2-final.svg) no-repeat 0 0; background-size: contain; z-index: 1; top: 10px; left: 10px; }
header a.logo span { display: none; }
header div.hero { width: 42%; position: absolute; top: 310px; left: 65%; }
header div.hero h1 { line-height: 1em; margin: 0 0 15px 0; color: #e25868; }

a.btns { font-size: 3.6em; font-weight: 700; text-decoration: none; color: rgba(198,156,109,1.0);  background-color: rgba(255,255,255,.0); border: 0px solid; border-color: rgba(255,255,255,1.0); border-radius: 6px; padding: 5px 15px 14px 17px; transition: color .5s;  }
a.btns:hover { color: rgba(255,102,51,0.8); }


/* Media Queries */

@media screen and (max-width: 1000px) { 
	

	/* Header */
	header div.hero { left: 48%; }
	header div.hero h1 { margin-bottom: 20px; }
	header div.hero a.btns {
		padding: 4px 0px;
		margin-left: 85px;
		font-size: 3.4em;
		
	}
	
}	

@media screen and (max-width: 825px) { 

	

	/* Header */
	header { height: 400px; background-image: url(../images/banner_825.jpg); }
	header div.hero { left: 28%; top: 230px; }
	header div.hero a.btns {
		padding: 8px 0px;
		margin-left: 10%;
		font-size: 3.2em;
		background-color: rgba(255,255,255,.8); 
		border: 3px solid; 
		border-color: rgba(255,255,255,1.0); 
		border-radius: 6px; 
		padding: 6px 10px; 
		transition: color .5s;
		
	}
	
header div.hero a.btns:hover { background-color: rgba(57,181,74,.65); }
	
	}



@media screen and (max-width: 760px) {

	
	/* Header */
	
	header a.logo { width: 170px; height: 100px; }
	header div.hero { top: 250px; }
	header div.hero a.btns {
		padding: 6px 0px;
		font-size: 2.8em;
		background-color: rgba(255,255,255,.8); 
		border: 3px solid; 
		border-color: rgba(255,255,255,1.0); 
		border-radius: 6px; 
		padding: 6px 10px; 
		transition: color .5s;
	}
	
	
	
	
	
	/* one column screen design */
@media screen and (max-width: 625px) {
	
	
	a.btns { font-size: 2em; margin-left: 0px;}
	
	/* header baggrundsbillede */
	header { height: 260px; background-image: url(../images/banner_625.jpg); background-position: left top; }
	
	/* header grå menubaggrund og størrelse på logo */
	header a.logo {
		width: 100%; height: 100px;
		left: 0px; top: 0px;
		background-color: rgba(0,0,0,.65);
		background-size: 150px;
		background-position: 10px center; 
	}
	header div.hero { width: 300px; top: 160px; left: 22%; }
	header div.hero h1 { margin-bottom: 10px; }
	header div.hero a.btns {
		padding: 8px 0px;
		margin-left: 12%;
		font-size: 2.8em;
		background-color: rgba(255,255,255,.8); 
		border: 3px solid; 
		border-color: rgba(255,255,255,1.0); 
		border-radius: 6px; 
		padding: 6px 10px; 
		transition: color .5s;
	}
	
	header div.hero a.btns:hover { background-color: rgba(255,255,255,.75); }
	}
	
	
	
	@media screen and (max-width: 425px) {

		/* Header */
	
	header { height: 250px; background-image: url(../images/banner_425.jpg); }
	
	header a.logo {
		width: 100%; height: 100px;
		left: 0px; top: 0px;
		background-color: rgba(0,0,0,.65);
		background-size: 140px;
		background-position: 10px center; 
	}

	header div.hero {
		width: 100%;
		left: 0;
		top: 150px;
		text-align: center;
	}
	
	header div.hero h1 {
		font-size: 1em;
		margin-bottom: 10px;
	}
	
	header div.hero a.btn {
		padding: 2px 30px;
		font-size: .8em;
	}
	
	header div.hero a.btns {
	
		padding: 8px 0px;
		margin-left: 5px;
		font-size: 2.6em;
		background-color: rgba(255,255,255,.8); 
		border: 3px solid; 
		border-color: rgba(255,255,255,1.0); 
		border-radius: 6px; 
		padding: 6px 10px; 
		transition: color .5s;
		
		
	}
	header div.hero a.btns:hover { background-color: rgba(255,255,255,.75); }
	
	header div.hero a.btn span { display: none; }
	
	}