/*
/* http://www.templatemo.com/tm-476-conquer */
/* 100 points for IDs
    10 points for classes and pseudo-classes
     1 point for tag selectors and pseudo-elements */
/* http://css3.bradshawenterprises.com/animating_height: animatie werkt alleen met max-height: <getal>px  #383E4C */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* color codes */
/* #337ab7 = primary */
/* #383E4C = nav, body: background */
/* #666666 = very dark gray */
/* #333    = very dark gray */

/*****************************
font-family: 'Great Vibes', cursive;
font-family: 'Open Sans', sans-serif;
font-family: 'Tangerine', cursive;
*/

/******************************/
/*    override bootstrap      */
/******************************/

*:focus        { outline: none;!important;} /* remove Chrome blue border    */
.ui-loader     { display: none !important;} /* remove Jquery mobile message */
.modal-backdrop{ opacity:0     !important;} /* remove modal black back-groumd*/

.btn-default {background-color:gold; border-color:darkred;}
.btn-default:hover{color:white; background-color:#383E4C; border-color:darkred}

.panel-default {border:2px solid; border-color:#337ab7;}
.panel-default>.panel-heading {color:black; background-color:#337ab7;}
.panel-title span   { color: #fff; text-shadow: 2px 2px #333; font-size:20px;}
.panel-body         { color: silver; background-color: #383E4C; border:0 !important} 
.panel-footer       { background-color:#337ab7; }

.popover-title   { background: gray;}
.popover-content { background: lightgray; color:black}

body       { font-family: "Open Sans", sans-serif !important; overflow-x: hidden; 
             font-size:16px; line-height: normal; color:silver; background-color:#383E4C }
img        { max-width: 100%; height: auto; border: none; background-color:gray }
h2         { font-size: 40px; font-weight: 700; color: white	; }
h3         { font-size: 20px; font-weight: 700; color: white; }
h4         { font-size: 18px; font-weight: 700; color: white; }
p          {                  line-height: 1.7em; margin: 0; }
header     { background-image: url("../img/0-zee.jpg"); padding: 95px 0; background-position: 70% 44% }

/* Scroll To top */
#scrollUp  { background-image: url("../img/top.png"); bottom: 20px; right: 20px; width: 38px; height: 38px;}
#frame_fb  { height:calc(100vw/16*9); width:100%; max-height:700px; overflow:hidden }

/******************************/
/* Carousel (style in html    */

.carousel-inner > .carousel-item > img { margin: 0; max-width: 100%; border:thick;}
.carousel-inner .item { background-color:gray }

/******************************/

.green-text { color: #178A27; }
.blue-text  { color: #1686C1; } 
.gray-text  { color: #1686C1; }
.white-text { color: #FFFFFF; }
.green-btn  { background: rgba(0,153,0,0.2); } .green-btn:hover { background: #449D44; color:yellow }
.blue-btn   { background: rgba(0,0,255,0.1); } .blue-btn:hover  { background: #31B0D5; color:yellow }
.red-btn    { background: rgba(204,0,0,0.2); } .red-btn:hover   { background: #C9302C; color:yellow}

.modal-title   { color:gray;}
.modal-content { border: 1px solid #888 height: 99%; background:gold; color:black; }
.aModal        { position: fixed; top: 10px; z-index: 1; overflow: auto; overflow-y: auto; cursor:pointer;}	

.header-content h1 { color: #fff; text-shadow: 2px 2px #000; }
.header-content h2 { color: #fff; font-size: 20px; text-shadow: 1px 1px #333; }
.header-content h4 { color: #fff; font-size: 25px; text-shadow: 1px 1px #333; }
.header-link       { border-radius: 5px; color: #fff; font-size: 18px; padding: 10px 10px; text-decoration: none;
                       -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
.title-content      { margin: 30px 10px; }
.title-content h1   { font-size:56px; color: rgba(51,153,255,0.8); letter-spacing:0.2em;  text-shadow: 2px 2px #333; font-family:"Great Vibes" }

/* Style the tab */
div.tab {overflow: hidden;  border: 1px solid #ccc; background-color: gray; margin: 10px 0 }
div.tab button {color:black; background-color: inherit; border: none; outline: none; cursor: pointer; padding: 5px 8px; transition: 0.3s; }

/* tab background color active hover */
div.tab button:hover  { background-color: gold;}
div.tab button.active { background-color: red;}


.tabcontent, .tabconten2         { display: none; list-item; padding: 6px 12px; border: 1px solid #ccc; height:57%; margin-bottom:20px;}
.tabcontent img, .tabconten2 img { max-height:345px; padding:5px; }
.tabcontent iframe               { max-height:600px; padding:0px; }

/******************************/
/*       --- navbar  ---      */
/******************************/
.navbar-inverse                  { background-color: #383E4C; border-color: #9383E4C; }
.navbar-nav>li                   { display: inline-block; padding: 10px;}
.navbar-inverse .navbar-nav>li>a { background: #383E4C none repeat scroll 0 0; border: 1px solid #646d7c; color: #fff ; 
                                   font-size: 18px; padding: 8px 5px; text-decoration: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.navbar-inverse .navbar-nav > li > a.current, 
.navbar-inverse .navbar-nav > li > a:hover { background:  #49505F; }
.navbar .navbar-nav { display: inline-block; float: none; }

.single-page-nav    { text-align: center; }

/******************************/
/* ----  Screen Media  ----   */
/*  Tablet Layout: 768px.     */
/******************************/

@media only screen and (min-width: 768px) and (max-width: 991px) {
.navbar-nav > li   { padding: 6px; }
.navbar-inverse .navbar-nav > li > a { font-size: 16px; }
}

@media only screen and (max-width: 767px) {  
#vesselp {display:none}
header { height:35vh; padding: 0 15px; background-position: 70% 46%; }
.header-content h1  { color: #fff; font-size: 30px; text-shadow: 2px 2px #000; }
.container { margin-left: 0; margin-right: 0; }

.navbar-nav                    { width: 100%; margin:0; }
.navbar-nav>li                 { display: block; padding:0px; width: 100%; border-bottom: 1px solid #999; }
.navbar-inverse                { background: none; border: none; width:150px} /*breedte hb menu*/
.navbar-inverse .navbar-toggle { background-color: rgba(102,102,102,0.3)}
.navbar-nav>li:last-child      { border-bottom: none;  }

.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > li > a:hover{ background-color: #383E4C} 
.navbar-inverse .navbar-nav > li > a      { font-size:13px; padding: 5px 0px; background:none; border: none; width: 100%;}

.navbar-inverse .navbar-nav>.active > a, 
.navbar-inverse .navbar-nav>.active > a:focus, 
.navbar-inverse .navbar-nav>.active > a:hover { background: #383E4C; } 
   
.single-page-nav { background-color: rgba(51,51,51,0.6); max-height: 0; margin:0 10%; 
                   -webkit-transition: max-height 1s; transition: max-height 1s; overflow: hidden; }
.single-page-nav.show { max-height: 400px; overflow: hidden; }
}