/*
Theme Name: Ports of Europe - New
Author: Dennis de Vries

Description: Op maat gemaakt thema voor Ports of Europe
Version: 1.0
License: GNU General Public License v2 or later
Tags:private
License URI: http://www.gnu.org/licenses/gpl-2.0.html
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*==================================================================================*\
																				Tijdelijk
\*==================================================================================*/
#site_wrapper {
  text-align: center;
  min-height: 500px;
}

.home_block_wrapper img {
  position: relative;
  z-index: -1;
	min-height: 100%;
}

/*==================================================================================*\
																				Algemeen
\*==================================================================================*/
@import url(https://fonts.googleapis.com/css?family=Lato:700,400);

html, body {
	margin: 0;
	padding: 0;
	position: absolute;
	width: 100%;
	min-height: 100%;
	font-family: 'Lato', sans-serif !important;
}

ul {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

.clear {
	clear: both;
}

#main_menu_wrapper #search_form, #main_menu ul li a, #footer a {
	transition: all ease-in-out 0.25s;
	-webkit-transition: all ease-in-out 0.25s;
}

.home_block_wrapper {
	transition: background-color ease-in-out 0.25s;
	-webkit-transition: background-color ease-in-out 0.25s;
}

/*==================================================================================*\
																					Header
\*==================================================================================*/
/*------------------ Navgatie wrapper -------------------*/
#main_menu_wrapper {
	position: fixed;
	background-color: rgba(52, 52, 58, 0.75);
	width: 100%;
	z-index: 2;
}

/*------------------------ Logo ------------------------*/
#logo_wrapper {
	width: 30%;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}

#logo_wrapper a:hover {
	opacity: 1;
}

#logo_wrapper img {
	width: inherit;
	height: inherit;
}

/*------------------------ Menu ------------------------*/
#main_menu {
	width: 65%;
	display: inline-block;
}

#main_menu ul {
	display: inline-block;
}

#main_menu ul li {
	display: inline-block;
	padding: 20px 0px;
	margin-left: -4px;/* Zet de menu-items tegen elkaar aan */
}

#main_menu ul li a {
	color: white;
	font-weight: bold;
	padding: 20px 15px;
	font-size: 17px;
}

#main_menu ul li a:hover {
	opacity: 0.6;
}

/*---------------------- Zoekfunctie ----------------------*/
#main_menu_wrapper #search_form {
	display: inline-block;
	background-color: #3a3b3e;
	padding: 0px 15px;
	border-radius: 10px;
	margin-left: 20px;
}

#main_menu_wrapper #search_form label {
	cursor: pointer;
}

#main_menu_wrapper #search_form #hidden_label {
	display: none;
}

#main_menu_wrapper #search_form img {
	vertical-align: middle;
	width: 20px;
	height: inherit;
}

#main_menu_wrapper #search_form input[type="text"] {
	outline: none;
	background-color: transparent;
	border: 0;
	padding: 7px 0px;
	max-width: 150px;
}

#main_menu_wrapper #search_form input[type="submit"] {
	display: none;
}

/*------------------------ Banner ------------------------*/
#banner {
	position: relative;
	text-align: center;
	background-color: wheat;
	border-bottom: 5px solid white;
}

#banner img {
	opacity: 0.95;
	width: 100%;
	height: inherit;
	vertical-align: middle;
}

#banner h1 {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	color: white;
	height: 30%;
	font-size: 8vw;
	text-transform: uppercase;
	font-family: 'Lato Bold', sans-serif;
	z-index: 1;
}

/*==================================================================================*\
																		Pagina's - Algemeen
\*==================================================================================*/
#page_wrapper {
	text-align: left;
	background-color: rgba(52, 52, 58, 0.75);
	color: #e0e0e0;
	min-height: 500px;
}

/*==================================================================================*\
																		Pagina's - Home
\*==================================================================================*/
.home_block_wrapper {
	position: relative;
  display: inline-block;
  width: 20%;
  float: left;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.home_block_wrapper:hover {
  background-color: rgba(0, 0, 0, 0);
}

.home_block_wrapper img {
  position: relative;
  z-index: -1;
}

.backup_block {
	display: none;
}

.triangle {
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

.top_triangle {
	border-width: 50px 50px 0 50px;
}

.bottom_triangle {
	bottom: 0;
	border-width: 0 50px 50px 50px;
}

.title {
	position: absolute;
	width: 100%;
	text-align: center;
	color: white;
}

.top_title {
	top: 0;
}

.bottom_title {
	bottom: 0;
}

/*------------------------------ Blok kleuren -------------------------------*/
.yellow{
	background-color: rgba(240,217,71,0.75);
}

.red {
	background-color: rgba(127,58,35,0.75);
}

.darkblue {
	background-color: rgba(14,61,98,0.75);
}

.grey {
	background-color: rgba(52,54,53,0.75);
}

.lightblue {
	background-color: rgba(43,57,67,0.75);
}

/*------------------------------- Top kleuren -------------------------------*/
.top_yellow_triangle {
	border-color: rgba(240,217,71,0.75) transparent transparent transparent;
}

.top_red_triangle {
	border-color: rgba(127,58,35,0.75) transparent transparent transparent;
}

.top_darkblue_triangle {
	border-color: rgba(14,61,98,0.75) transparent transparent transparent;
}

.top_grey_triangle {
	border-color: rgba(52,54,53,0.75) transparent transparent transparent;
}

.top_lightblue_triangle {
	border-color: rgba(43,57,67,0.75) transparent transparent transparent;
}

/*------------------------------ Bottom kleuren -----------------------------*/
.bottom_yellow_triangle {
	border-color: transparent transparent rgba(240,217,71,0.75) transparent;
}

.bottom_red_triangle {
	border-color: transparent transparent rgba(127,58,35,0.75) transparent;
}

.bottom_darkblue_triangle {
	border-color: transparent transparent rgba(14,61,98,0.75) transparent;
}

.bottom_grey_triangle {
	border-color: transparent transparent rgba(52,54,53,0.75) transparent;
}

.bottom_lightblue_triangle {
	border-color: transparent transparent rgba(43,57,67,0.75) transparent;
}

/*==================================================================================*\
																		Pagina's - Overig
\*==================================================================================*/
#other_wrapper {
	display: inline-block;
	padding: 30px 30px 30px 60px;
	text-align: left;
	margin-bottom: -15px;
	width: 50%;
	margin-right: 15%;
}

#other_wrapper a {
	font-weight: bold;
	color: #e0e0e0;
}

#sidebar_wrapper {
	display: inline-block;
	vertical-align: top;
	width: 20%;
	text-align: center;
	padding: 30px;
	font-size: 2em;
}

#sidebar_wrapper h3 {
	/* font-size: 2em; */
}


#sidebar_wrapper a {
	color: #e0e0e0;
}

/*==================================================================================*\
																					Footer
\*==================================================================================*/
#footer {
	width: 100%;
	background: rgba(48,48,48,0.9); /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(rgba(48,48,48,0.9), rgba(33,33,33,1.0)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgba(48,48,48,0.9), rgba(33,33,33,1.0)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgba(48,48,48,0.9), rgba(33,33,33,1.0)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(48,48,48,0.9), rgba(33,33,33,1.0)); /* Standard syntax */
}

#footer a:hover {
	opacity: 0.6;
}

#footer_blocks_wrapper {
	max-width: 80%;
	margin: 0 auto;
	text-align: center;
}

.footer_block {
	display: inline-block;
	vertical-align: top;
	padding: 30px 120px 70px 0px;
	font-size: 20px;
	color: #a7a7a7;
	text-align: left;
}

.footer_block h3 {
	text-transform: uppercase;
	color: #cdcdcd;
	font-size: 1.1em;
}

.footer_block a {
	color: #a7a7a7;
}

#footer_block_1 {
	
}

#footer_block_2 {
	
}

#footer_block_3 {
	padding-right: 0;
}

/*==================================================================================*\
																				Schaalbaar
\*==================================================================================*/
@media screen and (min-width: 1351px) and (max-width: 1650px) {
	.backup_block {
		display: block;
	}
}

@media screen and (max-width: 1650px) {
	.home_block_wrapper {
	  width: 25%;
	}
}

@media screen and (max-width: 1650px) {
	.footer_block {
		padding: 30px 100px 70px 0px;
	}
}

@media screen and (max-width: 1520px) {
	#main_menu ul li a {
	  /* font-size: 18px; */
	}
	
	#main_menu_wrapper #search_form input[type="text"] {
		max-width: 100px;
	}
}

@media screen and (max-width: 1440px) {
	#footer_blocks_wrapper {
	  max-width: 100%;
	  margin: 0 auto;
	  text-align: center;
	}
}

@media screen and (max-width: 1425px) {
	#main_menu ul li a {
	  font-size: 16px;
	}
}

@media screen and (max-width: 1370px) {
	#logo_wrapper {
	  width: 25%;
	}
	
	#logo_wrapper img {
		width: 70%;
		height: inherit;
	}
	
	#main_menu {
	  width: 74%;
	}
	
	#other_wrapper {
	  width: 55%;
	  margin-right: 5%;
	}
}

@media screen and (max-width: 1350px) {
	.home_block_wrapper {
		width: 33.3%;
	}
	
	.home_block_wrapper img {
	  width: 100%;
	  height: 100%;
	}
}

@media screen and (max-width: 1230px) {
	#logo_wrapper {
	  width: 100%;
		padding-top: 15px;
	}
	
	#logo_wrapper img {
		width: inherit;
	}
	
	#main_menu {
	  width: 100%;
	  text-align: center;
	}
	
	#banner h1 {
	  top: inherit;
	  bottom: 20px;
	  height: inherit;
	}
	
	.footer_block {
	  font-size: 18px;
	}
}

@media screen and (max-width: 1130px) {
	.footer_block {
	  font-size: 16px;
	  padding: 30px 70px 70px 0px;
	}
}

@media screen and (max-width: 1000px) {
	.title {
	  font-size: 14px;
	}
	
	#other_wrapper {
		width: 85%;
		margin-right: 0px;
	}
	
	#sidebar_wrapper {
		display: none;
	}
	
	.footer_block {
	  font-size: 20px;
	  padding: 0;
	  width: 100%;
	  text-align: center;
	}
	
	#footer_block_1 {
		padding-top: 5px;
	}
	
	#footer_block_1, #footer_block_2 {
	  margin-bottom: 20px;
	}
	
	#footer_block_3 {
	  padding-bottom: 25px;
	}
}

@media screen and (max-width: 900px) {
	#main_menu_wrapper {
	  position: relative;
		background-color: rgba(0,0,0,0.8);
		padding-bottom: 15px;
	}
	
	#banner {
		display: none;
	}
	
	#logo_wrapper {
	  padding: 20px 0px;
	}
	
	#main_menu ul {
		padding: 0px 20px 20px 20px;
	}
	
	#main_menu_wrapper #search_form {
	  display: block;
	  max-width: 330px;
	  margin: 0 auto;
		background-color: #1f2021;
	}
	
	#main_menu_wrapper #search_form input[type="text"] {
		max-width: 100%;
		width: 300px;
    height: 30px;
	}
	
	.title {
	  font-size: 12px;
	}
}

@media screen and (max-width: 790px) {
	.home_block_wrapper {
	  width: 50%;
	}
	
	.backup_block {
		display: block;
	}
}

@media screen and (max-width: 830px) {
	#main_menu ul li {
		display: block;
	}
}

@media screen and (max-width: 680px) {
	/*
	.title {
	  font-size: 14px;
	}
	*/
}

@media screen and (max-width: 620px) {
	/*
	.title {
	  font-size: 12px;
	}
	*/
}

@media screen and (max-width: 550px) {
	#main_menu_wrapper #search_form {
	  max-width: 300px;
	}
	
	#main_menu_wrapper #search_form input[type="text"] {
	  width: 270px;
	}
	
	.home_block_wrapper {
	  width: 100%;
	  height: 200px;
	  max-height: 200px;
	}
	
	.home_block_wrapper img {
	  height: initial;
	}
}

@media screen and (max-width: 420px) {
	#logo_wrapper img {
	  width: 80%;
	}
	
	#main_menu ul li a {
	  font-size: 16px;
	}
	
	.footer_block {
	  font-size: 17px;
	}
}

@media screen and (max-width: 370px) {
	#main_menu ul li {
	  padding: 15px 0px;
	}
	
	#main_menu ul li a {
	  padding: 15px;
	}
	
	#main_menu_wrapper #search_form {
	  max-width: 240px;
	}
	
	#main_menu_wrapper #search_form input[type="text"] {
	  width: 210px;
	}
}