@import url(http://reset5.googlecode.com/hg/reset.min.css);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:300,700);

html , body {
	width:100%;
	height:100%;
	font-family: 'Merriweather', serif;
	font-size:1em;
	line-height:36px;
	color:#292929;
}
/*  ========================== links css ==============*/

a {
	color: #bf2025;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
/*  ========================== text css ==============*/
h2  {
margin-top:30px;
	
margin-bottom: 60px;
font-family: 'Josefin Sans', sans-serif;
	font-weight:bold;
	font-size:48px;
	text-transform:uppercase;
	line-height: 60px;
}
h3 {
margin: -28px auto 0px auto;
text-transform: uppercase;
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
font-size: 20px;
line-height: 20px;
background: #fff;
width:33%;
width: intrinsic;   
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
padding:10px;
padding: 0px 30px;
}
/*  ========================== general css ==============*/

.wrapper {

}
.container1 {
	height: 60%;
	position:relative;
	min-height:500px;
}
.container {
	width:100%;
}
.top-screen-container {
	height: 100%;
}
/*  ========================== nav css ==============*/
nav {
	position:fixed;
	right:3%;
	top: 12%;
	z-index:9999;
}

nav.dark {
background-color:#30ff00;
}
#top-nav {
	height:20%;
}
.top-menu {
	width: 100%;
	margin:auto;

	height:100%;

	color: #bf2025;
}
.top-menu .first {
border-left:1px solid #bf2025;;
}
.top-menu li {

}
.top-menu li:hover {
color:#fff;
background:#bf2025;
}
.top-menu li {
	border-bottom: 1px solid;
	display: inline-block;
	float: left;
	transition: all 0.5s ease;
	color:#bf2025;
	width: 12.5%;
	height: 100%;
	text-align: center;
	border-right: 1px solid;
	vertical-align: middle;
	padding-top: 4%;
	box-sizing: border-box;
}

.bullet {
	width: 22px;
	transition: all 0.5s ease;
	border-radius: 50%;
	border: 2px solid #fff;
	margin-top: 10px;
	height: 15px;
	width: 15px;
	float: right;
	clear: right;
	background-color:#999;
	position:relative;
	/* background: url('images/lamp.png'); */
	background-size: 100%;
	background-repeat: no-repeat;
	cursor:pointer;
} 
.bullet a {
color:#fff;
}
.bullet:hover {
/* background-image: url('images/lamp-aan.png'); */
background-color: #fff;
}

.bullet-text {
font-family: 'Josefin Sans', sans-serif;
font-weight:bold;
text-transform:uppercase;
transition: all 0.5s ease;
line-height:20px;
text-shadow: -1px 0px  5px #000;

text-align: right;
}
.toggle {
position:absolute;
text-align:center;
top: -2px;
right: 31px;
color:#fff;
width: 200px;
z-index:99;
text-align:right;
display:block;
}
.hidden {
display:none;
}
.no-touch .bullet:hover  .toggle {
display:block!important;
padding-right:30px;
width:230px;
right:0px;
}
#social {
	color: #999;
	margin: 50px -20px 0px 0px;
	line-height: 30px;
	float: left;
	 text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
#social a {
	color:#999;
	position:relative;
}
#social a:hover {
	color:#292929;
}

.social-text {

font-family: 'Josefin Sans', sans-serif;
font-weight:bold;
position:absolute;
text-align:center;
top: -2px;
right: 31px;
opacity:0;
color:#fff;
text-transform:uppercase;
transition: opacity 0.5s ease;
line-height:20px;
text-shadow: -1px 0px  5px #000

}
#social a:hover .social-text {
	opacity:1;
}
/*  ========================== text-container css ==============*/
 
 .text-container {
	width:75%;
	text-align:center;
	margin:auto;
	padding: 3%;
	margin-bottom: 45px;
 }
 hr {
	width: 100%;
	background-color: #bf2025;
	border: none;
	height: 1px;
	margin-top: 36px;
	}

/*  ========================== image-container css ==============*/
	.image-container {
		height:60vh;
		min-height:500px;
		position:relative;
		background-position:center center;
		background-size:cover!important;
	}
	/* wordpress note: featured image as background, into html 
	@media
/*  ========================== top-screen css ==============*/

#top-screen {
	height:100%;
	width:100%;
	background: center center;
	background-size: cover!important;
	background-repeat: no-repeat;
}

#logo {
width: 46%;
min-width:125px;
/* position: absolute; */
/* top: 2%; */
/* left: 2%; */
float: left;
/* display: inherit; */
}

#logo img {
	width:100%;
}

/*  ========================== ruiten css ==============*/
.height-fix {
	margin-top: 150%;
}
#payoff {
/* float: left; */
position: absolute;
color: #fff;
width: 75%;
text-align: center;
/* height: 50%; */
/* margin-top: 13%; */
/* margin-left: 15%; */
left: 15%;
top: 15%;
box-sizing: border-box;
}
#payoff h2 {
margin-bottom:0px
;
margin-top: 12%;
}
#top-nav a {
color:#fff;
text-decoration:none;
width: 12.5%;
/* display: table-cell; */
height: 100%;
}
/* ===================== Media queries ================ */

}
@media(max-width: 800px) {
.top-menu li { 
width:25%;
padding-top: 2%;
}
.top-screen-container {
height: 70%;
}
#top-nav {
height:15%;
}


}
@media(max-width: 1075px) {
#payoff h2 {
	transition:all 0.5s ease;
	font-size:30px;
	margin-top:0;
}
#logo {
	float:none;
}
 }
@media(max-width: 600px) {
.image-container {
	height:200px;
	width:100%;
	}
	#payoff h2 {
	transition:all 0.5s ease;
	font-size:30px;
	margin-top:0;
	}
	h2 {
		font-size:30px;
		margin:10px 0;
	}
}