/*
 Theme Name:   Twinsense Bomech
 Description:  Bomech wordpress-thema
 Author:       Joris Kroos  
 Author URI:   http://twinsense.nl
 Version:      1.0.0
 Template:     foundationpress
 Text Domain:  twinsense
*/

/* COMMON MARKUP */

.hidden { display:none; }

.row { /* max-width:75rem; */ }
.row .row { display: flex; }

html { font-size:1rem; }
body, html { line-height: 1.6em; background: #1c1c1c; font-family: font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; height:auto; }
h1, h2, h3, h4, h5, p, form, input { font-family:inherit; color:inherit; }
h1, h2, h3, h4 { font-weight:bold; }
h1, h2 { font-size: 1.5rem; /* font-weight: normal; */}
h3 { font-size: 1.2rem; text-transform: uppercase;}
.white h3 { /* color:#00497f; */ }
h4 { font-size: 1rem; text-transform: uppercase; /* font-weight:normal; */ }
h5 { font-size: 1rem; font-weight:bold; }
h1+p { font-weight:bold; }
p { margin:0 0 1em 0; }
li p { margin:0 0 0.5em 0; }

article.img1 .white { min-height:212px; }
article.img2 .white { min-height: 456px; }

span.readmore { padding:8px 12px; background: #009ee0; display:inline-block; cursor:pointer; color: #FFF;margin-top: 0.5em;}

.inner { padding: 1.5em 0.5em; position:relative; }
.white { background:#FFF; }
.blue { background:#009ee0; color:#FFF; font-style: italic;font-size: 1.5rem;line-height: 1.6;padding: 1em 1.5em;text-align: center;}
.bluedots { position:absolute; top:12px; left:12px; width:36px; height:12px; background:url(images/bluedot.gif) 0 0 repeat-x; }

ul, ol, p { line-height: 1.6; font-size: 0.9rem;}
a { color: #009ee0; transition:color 0.3s ease, border 0.3s ease;}
a:hover, a:active, a.active { color:#00497f; }
h1 a, h2 a, h3 a { color:inherit; }

hr, .row .lblue hr, .row .dblue hr { width:60%; border:none; height:1px; background:#FFF; }
.white hr { background:#00497f; }

label { display:inline-block; font-weight:bold; font-size:1rem; }

button, .button, input[type=submit] { padding:8px 15px; border-radius:8px; border:none; background:#333; color:#FFF; transition:all 0.5s ease; }
button:hover, input[type=submit]:hover { background:#00497f; }

.edit-link { display:none; }
.intro { font-weight:bold; }

.thumbnail { width:100%; height:0; padding-bottom:70%; margin-bottom: 1.2rem; background-size:cover; overflow: hidden;}

/* STRUCTURE */

#page {display:flex; flex-direction: column;min-height: 100vh;overflow: hidden;position: relative;}
#content { flex:1 1 auto; background:url(images/bg.jpg) 50% 0 repeat-x; padding-top: 2em;overflow: hidden;}
.home #content { background:transparent; }

.topslider { background: #2c2b9d; height:10em; margin: -3em 0 12em;}
.block { overflow: hidden; padding-top: 2em; padding-bottom: 2em;}

.white .inner { background:#FFF; }

.row .column { /* padding-top: 1em; */ padding-bottom: 0.625rem; padding-left: 0.625rem;      padding-right: 0.625rem;}
.row .sidebar { padding-bottom:0; }
.topmenu .row .column { padding-top:1em; padding-bottom:1em; }
.site-logo-link { display:block; text-align: center;}
.topmenu .site-logo-link img { /* width: 40%; */ /* display: block; */padding: 20px 0;}

.topbar{
	min-height: 50px;
}

.topbar .column, .topmenu .column { /* padding-left:4em; */ /* padding-right:4em; */ }

.topbar .row .column { padding-bottom: 0; padding-top: 0;}
.topbar .row li { padding-top:0.8em; padding-bottom:0.8em;}
.topbar ul { margin: 0;text-align: center;}
.topbar li { /* padding:0 1rem; */ display:inline-block; position:relative; }

.topbar li a { text-transform:uppercase; color:#FFF;/* border-right: 1px solid #FFF; */padding: 0 1em;font-weight: bold;}
.topmenu { text-align: center;  background-color: #FFF;}
.topmenu ul { margin:2em 0; }
.topmenu li {padding: 0 0 0 15px;display:inline-block;}
.topmenu li a {transition:all 0.5s ease;padding:3px 0;display:block;/* text-transform:uppercase; *//* font-weight:bold; */ color: #000;}
.topmenu li a:hover, .topmenu li.active a { border-color:inherit;}
.topmenu li.active a {  }
.topmenu select { width:auto; margin-top:0.5em; border:none; background-color:#FFF;}
.sidebar ul.menu { padding:0; list-style:none; margin:0; }
.sidebar ul.menu li { text-align:center; background:#FFF; padding:0; margin-bottom:1em;}
.sidebar ul.menu a { display:block; padding: 1em; text-transform:uppercase; font-weight:bold; transition:all 0.5s ease;background: #009ee0;color: #FFF;}
.sidebar ul.menu a:hover { background:#009ee0; color:#FFF; }

.downloads{
	background-color: #fff;
	padding: 15px;
}

.download-item{
	clear: both;
	height: 50px;
	margin-bottom: 10px;
}

.downloads .icon{
	width: 50px;
	float: left;
}

.dowanloads .icon img{
	width: 100%;
	max-height: 50px;;
}

.downloads .title{
	float: left;
	margin-left: 5px;
	max-width: 100%;
}

.contact-item span{
	color: #009ee0;
}

.topbar ul ul {display:none;position:absolute;z-index:100;background:#333;padding:10px;left: -1em;top: 3em;white-space: nowrap;}
.topbar ul li:hover ul { display:block; }
.topbar ul ul a { padding:0; margin:00.5em; border:none; }
.topbar .row ul ul li {padding:0.4em 0;display: block;text-align: left;}

#main { /* background:#f1efed; */ /* padding:4rem 0; */ margin: 0;}
#main .entry-header h2 { font-size:3rem; font-weight:normal; }
#main .entry-header h3 { /* font-size:2rem; */ font-weight:normal; }
#main .entry-content p { /* font-size: 1.2rem; */ }

.projects.row .item { transform:scale(0.9); margin: 0;}
.projects.row .item:hover { transform:scale(1); }
.column.block>hr { margin-bottom: 2em; }
.item {margin-bottom: 1.25rem; opacity:1; transition:all 1s ease; overflow:hidden; position: relative;}
.item.news { background:#FFF; padding:15px 100px 15px 15px; overflow:hidden; position:relative; }
.item h3 {margin: 0 0 0.3em;line-height: 1.3em;font-weight: bold;text-transform:uppercase;font-size: 0.8rem;}
.item.news h3 { margin:0.3em 0;}
#main .item.news { background:transparent; }

tr.total { font-weight:bold; }
tr.total td { border-top:2px solid #00497f; }
td div.number {text-align:right; }
table tr.even { background: #eee; }
table tr.odd { background: #fff; }

.item a.more { position:absolute; right:0; bottom:15px; background:transparent; }

.item.hidden { opacity:0; max-height:0; padding: 0;margin: 0;}

.item td { padding:0; }
.item td>div { padding: 10px; transition: all 1s ease;max-height: 100px;}
.item.hidden td>div { max-height:0; padding: 0 10px; }

blockquote { padding:0; border:0; float: left;min-width: 50%;}
blockquote hr { height:2px; width:30px; margin:10px 0; }

.row2 .item,
.row3 .item { display:inline-block; position:relative; padding-bottom:40px; width: 100%;}

span.wpcf7-list-item { display:block; }
span.wpcf7-list-item label { font-weight:normal; }

.filter { background:#009ee0; padding-top:2em; }
.filter li { margin: 0.3em 0 0.7em; text-align: center; }
.filter a, .filter:hover a.active { color: rgba(255,255,255,0.7); /* display:block; */ font-weight: bold;text-transform: uppercase;}
.filter a.active, .filter a:hover, .filter:hover a.active:hover { color:#FFF; }
.filter a span { display:block; margin:0 auto; width:2em; height:2em; border-radius:8px; border:2px solid #FFF; margin-bottom:1em; transition:background 0.5s ease; }
.filter a.active span, .filter a:hover span { background:rgba(255,255,255,0.6); }

article .filter, .medium-block-grid-3 .filter { background:transparent; list-style:none; margin:0; padding:0; }
article .filter li, a.afdeling { background:#009ee0; display:inline-block; padding:0.1rem 0.4rem; margin:0 0.5rem 0.5rem 0; }
a.afdeling { margin: 1rem 0 -1rem; color:#FFF; font-weight: bold;text-transform: uppercase; font-size:0.8rem; padding:0.2rem 0.4rem; }

.medium-block-grid-3 { margin-top:0.625rem; }
.medium-block-grid-3>li:nth-of-type(3n+1) { clear:none; }
[class*="block-grid-"]>li.item {/* margin:0; */padding-bottom: 0;}
[class*="block-grid-"].filtered>li.item {
    padding-bottom: 0;
}

#page>footer { background: #FFF;  border-top: 20px solid #7f8283;z-index: 10;line-height: 1.6em;text-align: center;}
#page>footer, .topmenu { font-size: 0.85em; }
footer .row .column { padding-top: 1.5em; padding-bottom: 1em;   /* background: #AA9; */ }
footer p, footer a, footer a:hover { /* color:inherit; */ }
footer a:hover { text-decoration:underline; }
footer h5 {     display: none;}
footer .logo { background:url(images/logo_footer.png) top left no-repeat; text-indent:-10000px; white-space:nowrap; overflow:hidden; display:block; width:284px; height:53px;}

.row { position: relative; }
.photoheader { height: 35vh; min-height:150px; max-height:600px; background-size:cover; background-position:50%; }
.fullsize { width:100%; height:100%; position:absolute; left:0; top:0; background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;}
.photo ul { height: 35%; width: calc(100% - 1.25rem); position:absolute; left: 0.625rem; bottom:0; text-align: center; opacity:1; overflow:hidden; margin: 0;}
.photo:hover ul { }

.photoheader .column { padding:0; }
.photoheader>div { min-height: 40vh; }

.photo ul li { height:100%; }
.photo ul li div { border:1px solid #999; padding:1em; height:100%; overflow:hidden; /* margin-top:60%; */ }
.photo ul li div:hover { background:#acd0e6; transition:all 0.5s linear; }

.column.top .inner { padding:1em; }
.column.top .photo { padding-bottom: 35vh; }
#productform table { width:100%; }
#productform table input { width:4em; margin:0; }
#productform>div { overflow:auto; }
#productform>div input[type=text] { width:20em; float:left; margin-right:1em; }

.news li>a { /* float: left; */ /* margin-right:5%; */ /* width: 45%; *//* height: 0; *//* padding-bottom: 70%; *//* display: block; */}
.news li>div { /* width:45%; */ /* display: inline-block; */}
.news li.item h3 { margin: -0.7em 0 0.7em; }
ul.social { padding:0; margin:0 0 1em;}
li.social { display:inline-block; margin: 0 0.5em; width:2.5em; height:2.5em; overflow:hidden; background-color:#333; background-image:url(images/social.png); text-indent:10000px; white-space:nowrap; transition:background 0.5s ease; }
li.social:hover { background-color:#009ee0; }
li.social.twitter { background-position:0px 0px; }
li.social.fb { background-position: -32px 4px; }
li.social.vimeo { background-position:-70px 0px; }
li.social.linkedin { background-position:-110px 4px; }
li.social a { display:block; width:100%; height:100%; overflow:hidden; }

.photo {position: relative; width: 100%; padding-bottom: 90%;background-size: cover;background-position: 50% 50%;border: 0.5em solid #FFF;border-top: none;}
.news a { position:relative; }

.sidebar .video_lightbox_auto_anchor_image { width:100%; height: auto;margin-top: -3%;}
.wpvl_auto_thumb_box { width:100%; height: 100%; overflow: hidden;}
.wpvl_auto_thumb_play { transform: translate(-24px, -24px); left:50%; top:50%; }

#slider { text-align:center; margin:0;padding: 8em 0 4em; line-height: 1.2;height: 0;height: 35vh;}
#slider * { position:relative; }
#slider>* { position: absolute; width:100%; height: 10em;}
#slider li { opacity:0; transition:opacity 1s ease; }
#slider li.active { opacity:1; }
#slider .bg { position:absolute; top:-10em; left:0; width:100%; height:0; padding-bottom: 75%; background-position:50% 160%; background-repeat:no-repeat; background-size:cover; }
#slider h1 { color:#FFF; text-shadow:5px 2px 2px rgba(0,0,0,0.5); }
#slider h2 { color:#FFF; font-size:1.4em; font-style:italic; font-weight:normal; text-shadow:1px 1px 4px rgba(0,0,0,0.5); }
#slider a.more { border:2px solid #FFF; text-shadow:3px 1px 1px rgba(0,0,0,0.5); padding:0.4em 1.8em; display:inline-block; color:#FFF; margin-top:1em;background: rgba(0,0,0,0.1); transition:background 0.5s ease; display: none;}
#slider a.more:hover { background: rgba(28,28,28,0.5);}
#slider .gradient {
    width:100%;
    height:0;
    padding-bottom: 75%;
    top:-10em;
    position:absolute;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1c1c1c+0,1c1c1c+100&0.05+50,1+100 */
background: -moz-linear-gradient(top,  rgba(28,28,28,0.05) 0%, rgba(28,28,28,0.05) 50%, rgba(28,28,28,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(28,28,28,0.05)), color-stop(50%,rgba(28,28,28,0.05)), color-stop(100%,rgba(28,28,28,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(28,28,28,0.05) 0%,rgba(28,28,28,0.05) 50%,rgba(28,28,28,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(28,28,28,0.05) 0%,rgba(28,28,28,0.05) 50%,rgba(28,28,28,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(28,28,28,0.05) 0%,rgba(28,28,28,0.05) 50%,rgba(28,28,28,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(28,28,28,0.05) 0%,rgba(28,28,28,0.05) 50%,rgba(28,28,28,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d1c1c1c', endColorstr='#1c1c1c',GradientType=0 ); /* IE6-9 */
}

#slider .buttons { height:0; overflow:visible; margin:0 auto; max-width:62.5rem; position:relative; }
#slider .button { width: 1.4em; height: 4em; font-size: 2.5em;line-height: 4em;font-weight: bold;text-align: center;padding: 0;background: rgba(0,0,0,0.4);position: absolute;display: none;}
#slider .button:hover { background: rgba(28,28,28,1);}
#slider .button.prev { left: 0.9375rem; }
#slider .button.next { right: 0.9375rem; }

.embed-container { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; max-width:100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }

.popup { position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); cursor:pointer; }
.popup .content {position: absolute;top: 50%;left: 50%;/* max-width:80vw; *//* max-height:80vh; */background: #FFF;padding: 10px;transform: translate(-50%, -50%);width: auto;height: auto;}
.popup .content img {width:auto;height:auto;max-height: calc(80vh - 20px);max-width: calc(80vw - 20px);}

.topmenu .textwidget span, footer .textwidget span { display:block; }

@media screen and (min-width: 699px) {
  .topmenu #logo-top { float: left;}
  .topmenu { text-align: right; }
  #page>footer { text-align:right; }
  li.social { float:right; margin:0 0 0 1em; }
  .site-logo-link { text-align: left;}
  .inner {padding: 2em 2em;}
  .site-main .inner { padding:2.5em 2em 2em; }
  h1, h2 { font-size: 2.5rem; }
  .item h3 { font-size: 1.3rem; }
  .news li.item h3 { margin: 0 0 0.7em; }
  .page-id-42 [class*="block-grid-"]>li.item p { height:5em; overflow:hidden; }
  [class*="block-grid-"]>li.item,
  [class*="block-grid-"].filtered>li.item  { float:left; }
  .topmenu .textwidget, footer .textwidget { font-size:0; }
  .topmenu .textwidget span, footer .textwidget span { display:inline-block; font-size:0.8rem; }
  .topmenu .textwidget span:last-child:after, footer .textwidget span:last-child:after { content:""; padding: 0; }
  .topmenu .textwidget span:after, footer .textwidget span:after { content:"|"; padding: 0 0.3em; }

  .topbar li a { padding: 0 2em; }
}