/* --- font import --- */
@import "../fonts/Fira/fira.css";

/* --- reset --- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

ul, li {
	list-style: none;
}



/* --- basics ---*/
/* body {
} */
.nav li {
	display: inline-block;
}
h1.page-title {
	display: none;
}
div.clear {
	width: 100%;
	height: 1px;
	clear: both;
}

/* --- typographie --- */
body {
	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: #004660;
}
#claim {
	font-size: 1.875em;
	font-weight: 200;
	text-align: center;
	text-transform: uppercase;
}
strong {
	font-weight: 600;
}
.nav a {
	color: #004660;
	text-decoration: none;
}
#main-navigation ul li a {
	font-size: 18px;
	font-weight: 200;
	line-height: 40px;
	text-transform: uppercase;
}
#responsive-navigation ul li a{
	line-height: 50px;
	font-weight: 200;
	text-transform: uppercase;
}
h3 {
	font-size: 1.5em;
	font-weight: 600;
	font-style: italic;
	color: #e64442;
	padding-bottom: 1em;
	margin-bottom: 1.2em;
	border-bottom: 1px solid #004660;
}
#content {
	-webkit-hyphens: auto;
 	-moz-hyphens: auto;
 	-ms-hyphens: auto;
 	hyphens: auto;
}
#content .entry-content a {
	text-decoration: none;
	color: #e64442;
}
#content .entry-content a:hover {
	text-decoration: underline;
}
#footer-content {
	font-size: 0.875em;
	line-height: 3em;
}

/* --- content --- */
#background {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: -999;
}
#background img {
	width: 100%;
}
#logo {
	width: 312px;
	top: -110;
	left: 10%;
	position: absolute;
	z-index: 1;
}
#logo img {
	max-width: 100%;
}
#name {
	width: 700px;
	top: 100px;
	left: 10%;
	position: absolute;
	z-index: 1;
}
#name img {
	max-width: 100%;
}
#claim {
	width: 312px;
	left: 15%;
	top: 180px;
	position: absolute;
}
#banner {
	position: relative;
}
#banner img {
	width: 100%;
	height: auto;
}
#main-navigation {
	width: 100%;
	height: 100px;
	background-color: #fff; /* Fallback */
	background: rgba(255,255,255,0.8);
	position: relative;
}
#main-navigation ul {
	margin-right: 0;
	margin-left: auto;
	padding: 30px 0;
	margin-right: 15%;
}
#main-navigation ul li {
	margin: 0;
	padding: 0 10px 0 5px;
	border-right: 1px solid rgba(0,0,0,.2);
}
#main-navigation ul li:last-child {
	border: none;
	padding: 0 0 0 10px;
}
.responsive {
	display: none;
}
.nav ul {
	float: right;
	text-transform: uppercase;
}
#footer-navigation ul li:after {
	content: "|";
	margin: 0 0 0 3px;
}
#footer-navigation ul li:last-child:after {
	content: "";
	margin: 0;
}
#content {
	margin-top: 500px;
	padding: 40px 0;
	background-color: #fff; /* Fallback */
	background: rgba(255,255,255,0.8);
}
/*
.white {
	background-color: #fff !important;
}
*/

.entry-content {
	text-align: justify;
	font-size: 1.2em;
}
.entry-content table{
	width: 100%;
}
.entry-content table tr td, table tr th {
	background-color: rgba(0,0,0,0);
	/*border: 1px solid #004660;
	background-color: #fff;*/
}
.entry-content table tr th {
	background-color: rgba(0, 0, 0, 0);
	font-weight: bold;
}
/*.entry-content tr.row-2 {
	background-color: #eee;
}
.entry-content .column {
	width: 30%;
	float: left;
}
.column-1 {
	margin-right: 5%;
}
.column-3 {
	margin-left: 5%;
}*/
.entry {
	margin: 0 15%;
}
.entry-content img {
	width: 85%;
	border: 1px solid #fff;
}
.entry-content img.cover {
	width: 70%;
	border: none;
}
.entry-content img.cover_left {
	width: 50%;
	border: none;
	padding-right: 0%;
}
.entry-content img.cover_right {
	width: 50%;
	border: none;
	padding-left: 0%;
}
#footer-content {
	height: 30px;
	margin: 30px 15%;
	padding-top: 30px;
	border-top: 1px solid #004660;
	clear: both;
}
#footer-content section {
	width: 50%;
	float: left;
}
.social{
	margin-top: -20px;
	float: right;
}
.fa {
	padding: 20px;
	font-size: 14px;
	width: 55px;
	text-align: center;
	text-decoration: none;
	margin: 5px 2px;
	border-radius: 50%;
  }
  .fa:hover {
	  opacity: 0.7;
  }
  .fa-facebook {
	background: #3B5998;
	color: white;
  }
  .fa-youtube {
	background: #bb0000;
	color: white;
  }
  .fa-instagram {
	background: #125688;
	color: white;
  }


  
.dropbtn {
	background-color: #e64442;
	color: white;
	padding: 16px;
	padding-left: 30px;
	padding-right: 30px;
	font-size: 18px;
	border: none;
	cursor: pointer;
  }
  
  .dropbtn:hover, .dropbtn:focus {
	background-color: #e64542c8;
  }
  
  .dropdown {
	position: fixed;
	top: 2%;
	left: 2%;
	z-index: 999;
	top: -55px;
	transition: top 1s;
  }

  .responsive-dropdown {
	position: fixed;
	top: 2%;
	left: 2%;
	z-index: 999;
	top: 50px;
	transition: top 1s;
	visibility: hidden;
  }
  
  .dropdown-content {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 160px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	text-transform: uppercase;
  }

  .dropdown-menu {
	background-color: #f1f1f1;
	min-width: 160px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	text-transform: uppercase;
  }
  .dropdown-menu a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
  }
  
  .dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
  }
  
  .dropdown a:hover {background-color: #ddd;}
  
  .show {display: block;}
  
/* --- media queries --- */
@media screen and (max-width: 1500px) {
	#logo, #claim {
		left: 3%;
	}
	.entry {
		margin: 0 10%;
	}
	#main-navigation ul {
		margin-right: 10%;
	}
	#footer-content {
		margin: 30px 10%;
	}
}
@media screen and (max-width: 1299px) {
	#logo, #claim {
		display: none;
	}
	.entry {
		margin: 0 5%;
	}
	#main-navigation ul {
		margin-right: 5%;
	}
	#main-navigation ul li {
		padding: 0 5px 0 0;
	}
	#main-navigation ul li:last-child {
		padding: 0;
	}
	#footer-content {
		margin: 30px 5%;
	}
}
@media screen and (max-width: 850px) {
	#background {
		display: none;
	}
	#claim {
		display: none;
	}
	#name {
		top: 10px;
		width: 500px;
	}
	#main-navigation {
		display: none;
	}
	#responsive-navigation {
		width: 100%;
		height: 50px;
		margin-top: -55px;
		background: rgba(255,255,255,0.8);
		position: absolute;
	}
	.nav ul {
		float: none;
		text-align: center;
	}
	.responsive {
		display: block;
	}
	#responsive-navigation ul li:after {
		content: "|";
		padding: 0 0 0 3px;
	}
	#responsive-navigation ul li:last-child:after {
		content: "";
		padding: 0;
	}
	#content {
		margin-top: 0;
	}
	/*#footer-content section {
		width: 100%;
		float: none; 
		text-align: center;
	}*/
}
@media screen and (max-width: 700px) {
	body {
		background-color: #cd211f;
	}
	#logo {
		width: 299px;
	  height: 135px;
	  overflow: hidden;
		position: relative;
		margin: 0 auto;
		left: 0;
	}
	#logo img {
		margin-left: -7px;
	}
	#responsive-navigation {
		font-size: 14px;
	}
}
@media screen and (max-width: 630px) {
	.responsive-dropdown {
		visibility: visible;
	}
	.dropdown {
		display: none;
	}
	.entry-content .column {
		width: 100%;
		float: none;
		clear: both;
		margin: 0 0 20px 0;
	}
	.entry-content img {
		width: 100%;
	}
	#responsive-navigation {
		font-size: 11px;
		font-weight: 400;
	}
	#footer-navigation {
		display: none;
	}
	#footer-content section {
		font-size: 12px;
	}
	#name {
		top: 10px;
		width: 350px;
	}
}
@media screen and (max-width: 500px) {
	#responsive-navigation {
		font-size: 7px;
	}
}