/*******************************************************************************

	* DAPEHA *
	- Stylesheet -

	By
		Deer Concepts / www.deerconcepts.com


********************************************************************************/

#wrapper {background: none !important;}

#header {
	padding: 0 !important;
	background: none !important;
	box-shadow: 0 0 0 !important;
}

#header.scrolled-header {background: rgba(12,26,47, 0.9) !important; padding: 10px 0 !important;}

.logo img {
	width: 160px !important;
	height: auto !important;
	margin-top: 25px;
}

.menu-fixer {
	height: auto !important;
}

.nav-btn {color: #fff;}
#header .nav-btn {margin-top: 20px; margin-left: 20px;}
#header.scrolled-header .nav-btn {margin-top: 0px; margin-left: 0px;}

#header.scrolled-header .logo img {
	width: 100px !important;
}

/* ===========================================
   Navigation
=========================================== */

#header #navigation {margin-top: 20px;}
#header.scrolled-header #navigation {margin-top: 0px;}


ul#mainnav > li {background: none;}
html ul#mainnav li a {
	color: #fff;
	text-transform: uppercase;
}

html ul#mainnav li a:hover {
	color: #fff;
	text-decoration: none;
}

#navigation.mobile #mainnav {background: rgba(12,26,47, 0.9); padding: 20px;}

/* ===========================================
   Top element 
=========================================== */

.bluebox {
	background: rgba(12,26,47, 0.9);
	width: 685px;
	color: #fff;
	margin: 0 auto;
}

.bluebox h1 { color: #fff; padding-top: 30px; text-transform: uppercase; font-weight: bold; font-size: 35px;}
.bluebox p {padding-bottom: 30px; font-size: 20px;}

.scrolldownarrow {display: block;}
.scrolldownarrow img {position: relative; cursor: pointer;}

.scrolldownarrow:hover {}


/* ===========================================
   Skills
=========================================== */

#skills h2 {font-size: 50px; line-height: 50px; color: #000f27;}
#skills h3 {font-weight: bold; margin-bottom: 5px;}

/* ===========================================
   References
=========================================== */

#references hr {
	background: #ccc;
	width: 1000px;
	margin: 50px auto;
}

#references p {
	color: #000f27;
	font-size: 20px;
}

#references ul {text-align: center;}
#references ul li { margin-right: 28px; display: inline-block; padding: 0;}
#references ul li:last-child {margin-right: 0;}
#references ul li i {display: none;}
#references ul li img {text-align: center !important;}
#references ul li.esbjerg_havn { width: 60px;}
#references ul li.landbrugsmedierne { width: 255px;}
#references ul li.radius { width: 130px;}
#references ul li.adtomic { width: 160px;}
#references ul li.frankly { width: 150px;}

/* ===========================================
   About
=========================================== */

#about h2 {font-size: 50px; line-height: 50px; color: #000f27; margin-bottom: 50px;}
#about p {max-width: 600px; margin: 0 auto 20px auto;}

/* ===========================================
   Contact
=========================================== */

#contact h2 {font-size: 30px; color: #fff;}
#contact p {color: #fff; max-width: 600px; margin: 0 auto 20px auto;}
#contact .call-to-action {text-transform: uppercase; font-weight: bold; margin-top: 40px;} 
#contact .call-to-action a {background: #fff; color: #000f27; padding: 10px 20px; margin-right: 20px;}
#contact .call-to-action a:last-child {margin-left: 20px;}
#contact .call-to-action a.numberlink {margin: 0; padding: 0; background: transparent; color: #fff; cursor: default;}

#bottomfooter.cfooter ul#social li {color: #fff;}
#bottomfooter.cfooter ul#social li a {background: #fff; border: 0; }
ul#social li a i {color: #000f27;}


/* ===========================================
   Responsive
=========================================== */

@media only screen and (max-width: 1023px) and (min-width: 768px) {
	html #wrapper {
		width: 100%;
		margin: 0 auto;
	}
	html #footer {
		width: 100%;
	}
}

@media only screen and (max-width: 780px) {
	#contact .call-to-action a.numberlink {background: #fff; color: #000f27; padding: 10px 20px; margin-left: 20px;}
}

@media only screen and (max-width: 767px) and (min-width: 480px) {
	html #wrapper {
		width: 100%;
		margin: 0 auto;
	}
	html #footer {
		width: 100%;
	}

	/* References */
	#references hr {width: 80%;}
}

@media only screen and (max-width: 479px) and (min-width: 320px) {
	html #wrapper {
		width: 100%;
		margin: 0 auto;
	}

}

@media all and (max-width: 700px) {

	.bluebox {
		width: 80%;
	}

}

@media all and (max-width: 500px) {

	/* Over all */
	.wpb_wrapper p {margin-left: 20px !important; margin-right: 20px !important;}

	/* Top element */

	.bluebox h1 {font-size: 24px;}
	.bluebox p {font-size: 16px;}

	/* Skills */

	.wpb_wrapper .wpb_content_element {margin-bottom: 0px !important;}
	#skills p {margin-bottom: 30px !important;}

	/* References */

	#references hr {width: 200px;}
	#references ul li,
	#references ul li:last-child {display: block; margin: 0 auto; text-align: center;}


	/* Contact */
	.call-to-action a:last-child {margin: 10px !important;}
	.call-to-action a,
	.call-to-action span {display: block; margin: 10px !important; }

}