/*
Theme Name: HEX Travel
Version: 1.0
Theme URI: http://www.lemon.nl
Description: 
Author: Roeland ten Holder | Lemon
Author URI: roeland@lemon.nl
*/

/*********** RESET ***********/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote th, td { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); }
table, thead, tbody, tfoot, tr, th, td { width: auto; height: auto; margin: 0; padding: 0; border: none; border-collapse: inherit; border-spacing: 0; border-color: inherit; vertical-align: inherit; text-align: left; font-weight: inherit; -webkit-border-horizontal-spacing: 0; -webkit-border-vertical-spacing: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
ul 		 { list-style-type: none; }
li		 { list-style-type: none; }
p > ul > li	{ list-style-type: disc; }
p > ol > li	{ list-style-type: decimal; }
ol 		 { margin-left: 20px; margin-bottom: 10px; }
img 	 { border: 0; outline: none; }
html 	 { margin: 0; height: 100%; }
a	 		 { outline: none; border: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
button { outline: none; border: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
:focus { outline: none;}
input  { -moz-border-radius: 0; -webkit-border-radius: 0; outline: none; }
.clear:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clear { display: block; pointer-events: none; }
html[xmlns] .clear { display: block; }
* html .clear { height: 1%; }

.border {
	border: 1px solid white;
	min-height: 20px;
}

/********** BOOTSTRAP RESET/EXTRA ***********/

.navbar, .breadcrumb, .panel, .panel-footer, .panel-heading, .panel-body, .img-thumbnail
{ -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; border: 0; }

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, 
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, 
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { padding-right: 20px; padding-left: 20px; }
.row { margin-right: -20px; margin-left: -20px; }
.equal { display: -webkit-flex; display: flex; }

/*********** CUSTOM COLOMS ************/
.col-10, .col-20, .col-30, .col-40, .col-50, .col-60, .col-70, .col-80, .col-90, .col-12, .col-17, .col-22, .col-27, .col-32, .col-37, .col-42, .col-47, .col-52, 
.col-57, .col-62, .col-67, .col-72, .col-77, .col-82, .col-87, .col-92, .col-97, .col-15, .col-25, .col-35, .col-45, .col-55, .col-65, .col-75, .col-85, .col-95, 
.col-100 { float: left;	min-height: 1px; padding-right: 10px; padding-left: 10px; }
.col-10  { padding-left: 1px; padding-right: 1px; }

.col-10  { width: 10%; } .col-12 { width: 12.5%; } .col-15 { width: 15%; } .col-17 { width: 17.5%; }
.col-20  { width: 20%; } .col-22 { width: 22.5%; } .col-25 { width: 25%; } .col-27 { width: 27.5%; }
.col-30  { width: 30%; } .col-32 { width: 32.5%; } .col-35 { width: 35%; } .col-37 { width: 37.5%; }
.col-40  { width: 40%; } .col-42 { width: 42.5%; } .col-45 { width: 45%; } .col-47 { width: 47.5%; }
.col-50  { width: 50%; } .col-52 { width: 52.5%; } .col-55 { width: 55%; } .col-57 { width: 57.5%; }
.col-60  { width: 60%; } .col-62 { width: 62.5%; } .col-65 { width: 65%; } .col-67 { width: 67.5%; }
.col-70  { width: 70%; } .col-72 { width: 72.5%; } .col-75 { width: 75%; } .col-77 { width: 77.5%; }
.col-80  { width: 80%; } .col-82 { width: 82.5%; } .col-85 { width: 85%; } .col-87 { width: 87.5%; }
.col-90  { width: 90%; } .col-92 { width: 92.5%; } .col-95 { width: 95%; } .col-97 { width: 97.5%; }
.col-100 { width: 100%; }

/*********** FONTS / BASICS ***********/
h1							{	font: normal 400 38px/50px 'Lato', Arial, Helvetica, Verdana, sans-serif; color: #111111; padding: 0 40px 0; margin: 0 auto 40px; max-width: 90%; text-align: center; }
h1 a						{ text-decoration: none; }
h2							{	font: normal 700 38px/50px 'Lato', Arial, Helvetica, Verdana, sans-serif; text-transform: uppercase; text-align: center; color: #111111; padding: 0 40px 5px; }
h3 							{	font: normal 700 24px/36px 'Lato', Arial, Helvetica, Verdana, sans-serif; text-transform: uppercase; text-align: center; color: #111111; padding: 0 0 10px 0; }
h4 							{	font: normal 700 20px/30px 'Lato', Arial, Helvetica, Verdana, sans-serif; color: #111111; padding: 0 0 10px 0; }
h5 							{	font: normal 400 18px/28px 'Lato', Arial, Helvetica, Verdana, sans-serif; color: #111111; padding: 0 0 10px 0; }
h6 							{	font: normal 400 16px/22px 'Lato', Arial, Helvetica, Verdana, sans-serif; color: #111111; padding: 0 0 5px 0; }
body 						{ font: normal 400 16px/22px 'Lato', Arial, Helvetica, Verdana, sans-serif; color: #111111; background: #ffffff; }
.small,.small a { font: normal normal 12px/16px Arial, Helvetica, Verdana, sans-serif; color: #333333; text-align: left; }
.date 					{ font: normal normal 12px/16px Arial, Helvetica, Verdana, sans-serif; color: #333333; }

.small a 				{ padding: 0px;}
.right 					{ float: right; }
.left 					{ float: left; }
.hidden					{ display: none; }
.content ul li 	{ list-style-type: disc; margin-left: 1.3em;}
.content ol li 	{ list-style-type: decimal; margin-left: 1.3em;}
.content ul,
.content ol 		{ padding-bottom: 1.5em; }
.content ul 		{ overflow: hidden; }
a								{ color: #223974; text-decoration: underline; }
a:hover					{ color: #1260a9; text-decoration: underline; }
.pull-left.gap,
.alignleft 			{ float: left !important; text-align: left; margin: 7px 20px 20px 0; }
.pull-right.gap,
.alignright 		{ float: right !important; text-align: left; margin: 7px 0 20px 20px; }
.text-left 			{ text-align: left; }
.text-right 		{ text-align: right; }
.justify				{ text-align: justify; }
.center					{ text-align: center; margin: 0 auto; }
.hover:hover 		{ opacity: 0.8; cursor: pointer; }
.content p 			{ margin-bottom: 23px; }
p:last-child 		{ margin-bottom: 20px; }
hr,.list hr			{ margin: 20px 0 20px; }
img							{ padding: 0 !important; max-width: 100%; }
.ptop-sm				{ padding-top: 		20px !important; }
.pbot-sm				{ padding-bottom: 20px !important; }
.mtop-sm				{ margin-top: 		20px !important; }
.mbot-sm				{ margin-bottom: 	20px !important; }
.ptop						{ padding-top: 		40px !important; }
.pbot						{ padding-bottom: 40px !important; }
.mtop 					{ margin-top: 		40px !important; }
.mbot 					{ margin-bottom: 	40px !important; }
.ptop-md				{ padding-top: 		60px !important; }
.pbot-md				{ padding-bottom: 60px !important; }
.mtop-md 				{ margin-top: 		60px !important; }
.mbot-md 				{ margin-bottom: 	60px !important; }
.ptop-xl				{ padding-top: 		80px !important; }
.pbot-xl				{ padding-bottom: 80px !important; }
.mtop-xl 				{ margin-top: 		80px !important; }
.mbot-xl 				{ margin-bottom: 	80px !important; }
.white 					{ color: #ffffff; }
.debugborder		{ border: 1px solid white; min-height: 20px; }

.nomtop					{ margin-top: 0 !important; }
.nombot					{ margin-bottom: 0 !important; }
.noptop					{ padding-top: 0 !important; }
.nopbot					{ padding-bottom: 0 !important; }

.nicetable 			{ border-collapse: collapse; }
.nicetable th,
.nicetable td 	{ text-align: left; vertical-align: top; padding: 3px 5px; border: 1px solid #ccc; }
.nicetable th .middle,
.nicetable td .middle { vertical-align: middle; }
.border 				{ border:   		 1px solid #555555; }
.border-left 		{ border-left:   1px solid #555555; }
.border-right 	{ border-right:  1px solid #555555; }
.border-top 		{ border-top:    1px solid #555555; }
.border-bottom 	{ border-bottom: 1px solid #555555; }
.noborder				{ border: none; }


.white 					{ color: #ffffff; }
.text-shadow 		{ text-shadow: 0px 0px 10px rgba(0,0,0,0.8); }


h1,h2,h3,h4,h5,h6,
.hexblue1 			{ color: #1783c4; }
.hexblue2 			{ color: #1260a9; }
.hexblue3 			{ color: #223974; }

.hexbluebg1			{ background-color: #1783c4; }
.hexbluebg2			{ background-color: #1260a9; }
.hexbluebg3			{ background-color: #223974; }

.hexbluebg1 .title,
.hexbluebg2 .title,
.hexbluebg3 .title { color: #ffffff; }


.subtitle {
	padding: 20px 0 10px;
	text-align: left;
}

.anchor {
	margin-top: -115px;
	margin-bottom: 115px;
	display: block;
}


/*********** CONTAINERS ***********/

.container {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

.fullcontainer {
	width: 100%;
	margin: 0 auto;
	padding: 80px 50px 80px 50px;
}

.widthcontainer {
	width: 94%;
	max-width: 1160px;
	margin: 0 auto;
}

.page {
	position:	relative;
	width: 100%;
	margin: 0;
}

.header-extra-margin {
	height: 25px;
}

.home .first-container .row {
	margin: 0 auto;
	max-width: 90%;
}


.img-bg {
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}


/*********** NAVBAR ***********/

.navbar {
	background: #ffffff;
	padding: 30px 0;
}

.logo {
	float: left;
}

.navbar {
	padding-left: 50px;
	padding-right: 50px;
}

.navbar .menu {
	float: right;
}

.navbar li {
	float: left;
}

.navbar li a {
	font: normal 700 20px/26px 'Lato', Arial, Helvetica, Verdana, sans-serif;
	color: #1783c4;
	text-decoration: none;
	text-transform: uppercase;
	padding: 15px 20px;
	float: left;
}

#responsive-menu-container li.responsive-menu-item a {
	font: normal 700 16px/20px 'Lato', Arial, Helvetica, Verdana, sans-serif;
}

.navbar a:hover {
	color: #1260a9;
}

.navbar-flags {
	float: right;
	margin-left: 5px;
}

.navbar-flags a {
	padding: 13px 0px 10px 10px;
	float: left;
}

.flag {
	width: 36px;
	height: auto;
	border: 1px solid #ccc;
}

.fa-2x {
	font-size: 1.88em;
}


/*********** HEADER ***********/


.imageheader-container {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.imageheader {
	width: 100%;
	height: 100%;
	background-attachment: fixed;
	background-color: #c1d3e4;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	text-align: center;
	border-bottom: solid 1px #223974;
	animation-name: KenBurns;
	animation-duration: 40s;
	animation-iteration-count: 1;
	transform: scale(1.2);
}

@keyframes KenBurns {
	0%		{transform: scale(1); }
	100%	{ transform: scale(1.2); }
}

.imageheader-container h2 {
	position: absolute;
	width: 100%;
	top: 85%;
	text-align: center;
	color: #ffffff;
}

.imageheader-container h4 {
	position: absolute;
	width: 100%;
	top: 85%;
	text-align: center;
	color: #ffffff;
}

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
}

@keyframes fadeInOpacity {
	0%		{ opacity: 0; }
	50%		{ opacity: 0; }
	100%	{ opacity: 1; }
}

.overlay-container {
	position: absolute;
	top: 115px;
	width: 100%;
	height: calc(100vh - 116px);
	overflow: hidden;
}

.overlay-image {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
}

.slide-in {
	background-position: 250px center;
	background-position: 100px center;
	animation-name: SlideIn;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
}

@keyframes SlideIn {
	0%		{ background-position: 1000px center; }
	/*100%	{ background-position: 250px center; }*/
	100%	{ background-position: 100px center; }
}







.theteam {
	height: 60vh;
}


.theteam .imageheader {
	background-attachment: unset;
}

/*********** ELEMENTS ***********/

.title {
	padding-bottom: 50px;
}

.img-people {
	margin: 0 0 40px;
	border: 6px solid #ffffff;
}



/*********** FOOTER ***********/

.fullcontainer.footer {
	padding: 50px 0 200px;
	background-image: url(images/footer.png);
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-size: 866px 220px;
	background-position: center bottom;
	overflow: hidden;
}

.footer h3 {
	margin: 0 0 10px;
}


.footer .logo {
	margin: 150px 0;
}

.footer .fa {
	font-size: 35px;
}

.eqa_icon {
	width: 30px; /* was 35px voor footer */
	height: 30px;
	vertical-align: top;
}



/*********** ELEMENTS ***********/


.btn {
	font: normal normal 15px/20px 'Lato', Arial, Helvetica, Verdana, sans-serif;
	border-radius: 0px;
	text-shadow: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	padding: 3px 25px 4px;
	color: #ffffff;
	border-color: #cc3333;
	background: #cc3333;
	text-decoration: none;
	margin: 0 5px 10px;
}


.btn:hover {
	color: #ffffff;
	opacity: 0.8;
}

.btn:focus {
	color: #ffffff;
}


.page-item .content,
.blog-item .content {
	padding: 15px;
}

.widthcontainer .img-thumbnail {
	width: calc(100% + 30px);
	height: 280px;
	padding: 0;
	background-color: #ccc;
	background-size: cover;
	background-position: center center;
	border: none;
}

.widthcontainer .img-thumbnail.columns {
	height: 400px;
}

.blog {
	margin-bottom: 100px;
}

.blog-item {
	padding-left: 5px;
	padding-right: 5px;
}

.blog-item .content  {
	background: #ffffff;
	padding: 15px;
	min-height: 395px;
	text-align: left;
}







/* next / prev / all */


.lmn-back,
.lmn-prev,
.lmn-next {
	display: inline-block;
	vertical-align: top;
}



.lmn-back,
.single-tribe_events #tribe-events-header li {
	width: 15%;
	
}

.lmn-prev,
.lmn-next,
.single-tribe_events #tribe-events-header li.tribe-events-nav-previous,
.single-tribe_events #tribe-events-header li.tribe-events-nav-next {
	width: 40%;
}










/** team css **/

.flexcontainer {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.team {
	transform: rotate(-45deg);
}

.team-row:nth-of-type(2) {
	margin-left: 250px;
}

.team-row:nth-of-type(3) {
	margin-left: 500px;
}

.team-row .member:first-of-type {
	float: left;
}

.member {
	display: block;
	width: 245px;
	background-color: #1260a9;
	position: relative;
	overflow: hidden;
	margin: 0 5px 5px 0;
}

.member img {
	-webkit-transform: rotate(45deg) scale(1.5);
	transform: rotate(45deg) scale(1.5);
	display: block;
	width: 100%;
	height: 100%;
	transition: all .2s ease-in-out;
}

.member:hover {
	cursor: pointer;
}

.member:hover img {
	cursor: pointer;
	-webkit-transform: rotate(45deg) scale(1.6);
	transform: rotate(45deg) scale(1.6);
	transition: all .2s ease-in-out;
}










.close {
	z-index: 999999;
	position: absolute;
	right: 16px;
	top: 16px;
}

.modal {
	z-index: 999999;
}

.modal-dialog {
	width: 100%;
	max-width: 850px;
	overflow: hidden;
}

.modal-content {
	padding: 50px;
	width: 100%;
	max-width: 850px;
	height: auto;
	background-color: #ffffff;
	display: inline-block;
	border-radius: 0;
	border: none !important;
}

.member-image {
	float: left;
	width: 40%;
	margin: 0 50px 50px 0;
}

.modal-image img{
	width: 100%;
}

.modal-text {
	float: left;
	width: calc(60% - 50px);
}

.modal-text h3 {
	margin: 0;
	font: normal 400 16px/32px 'Lato', Arial, Helvetica, Verdana, sans-serif;
}

.modal-text h2 {
	margin: 0;
	font: normal 700 28px/32px 'Lato', Arial, Helvetica, Verdana, sans-serif;
}







/*********** RESPONSIVE ***********/


.desktop 	{ display: block; }
.mobile, .mobilebut	{ display: none; }


@media all and (max-width: 1300px) {
	.team-row:nth-of-type(2) 	{ margin-left: 200px; }
	.team-row:nth-of-type(3) 	{ margin-left: 400px; }
	.member 									{ width: 195px; margin: 0 5px 5px 0; }
}



@media all and (max-width: 1100px) {
	.team-row:nth-of-type(2) 	{ margin-left: 150px; }
	.team-row:nth-of-type(3) 	{ margin-left: 300px; }
	.member 									{ width: 145px; margin: 0 5px 5px 0; }
	
	.navbar-flags {
    float: right;
    margin-left: 5px;
    margin-right: 30px;
	}

	button#responsive-menu-button {
		right: 18px !important;
		top: 29px;
		background-color: #ffffff !important;
	}
	.responsive-menu-inner, .responsive-menu-inner::before, .responsive-menu-inner::after {
		background-color: #223974 !important;
	}
	
	#responsive-menu-container {
		width: 50%;
		box-shadow: 0 0 10px rgba(0,0,0,0.3);
	}
	
	#responsive-menu-container #responsive-menu-wrapper,
	#responsive-menu-container,
	responsive-menu-wrapper {
		background-color: #ffffff;
	}
	
	#responsive-menu-container #responsive-menu > li.responsive-menu-item:first-child > a {
		border-top: 1px solid #ffffff;
	}
	
	#responsive-menu-container #responsive-menu li.responsive-menu-current-item > .responsive-menu-item-link,
	#responsive-menu-container #responsive-menu li.responsive-menu-item a:hover,
	#responsive-menu-container #responsive-menu li.responsive-menu-item a:focus,
	#responsive-menu-container #responsive-menu li.responsive-menu-item a:active,
	#responsive-menu-container #responsive-menu li.responsive-menu-item a {
    background-color: #ffffff;
    border-bottom: 1px solid #1783c4;
    color: #223974;
	}
	
	
	#responsive-menu-container #responsive-menu li.responsive-menu-item a {
		height: 58px;
	}
	#responsive-menu-container #responsive-menu li.responsive-menu-item .responsive-menu-item-link {
		font: normal 700 20px/26px 'Lato', Arial, Helvetica, Verdana, sans-serif;
		color: #1783c4;
		text-decoration: none;
		text-transform: uppercase;
		padding: 15px 20px;
		float: left;
	}

}




@media all and (max-width: 800px) {
	
	.navbar-flags {
    margin-right: 65px;
	}
	
	.team-row:nth-of-type(2) 	{ margin-left: 0; }
	.team-row:nth-of-type(3) 	{ margin-left: 0; }
	
	
	.team,
	.member img {
		transform: rotate(0deg);
		margin: auto;
	}

	.member {
		width: 49%;
	}

	.member img {
		transform: rotate(0deg) scale(1.3);
	}
	
	.member:hover img {
		-webkit-transform: rotate(0deg) scale(1.4);
		transform: rotate(0deg) scale(1.4);
	}
	

	.menu-wrapper,
	.desktop 	{ display: none; }
	.mobile 	{ display: block; }
	
	.navbar {
    padding-left: 15px;
    padding-right: 15px;
	}
	
	
}


@media only screen and (max-width: 650px) {
	.modal-inner {
		width: 100%;
	}

	.modal-image {
		width: 100%;
		margin-bottom: 20px;
	}

	.modal-text {
		width: 100%;
	}

	.close {
		color: black;
	}
}



@media all and (max-width: 480px) {
	
}