@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap');
@import url(color.css);
@import url(font-awesome.min.css);

:root{
--main-color:#556A00;
--main-color2:#2a97fd;
--gray:#777;
--light-gray:#eee;
--dark-gray:#444;

/* --nav-bg:rgba(255,255,255,0.9);*/
--nav-bg:#f5f5f5;
--nav-color:#666;
--nav-linkcolor:#666;
--nav-linkbg:transparent;

--togglebg:;

--content-bg:#fff;
--input-bg:#fff;
--footer-bg:#333;
--footer-txt:#ccc;
--footer-a:#fff;

--nav-top:120px;
--contenttop:-180px;
--roco:5px;
}

*{font-family:"Open Sans", sans-serif, Helvetica;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
body{margin:0;padding:0;color:var(--dark-gray)}
body, div, td, p, ul, li, ol, input, textarea, select{font-size:13px;line-height:170%;font-weight:300}
:focus{outline:none}
a{color:#000;text-decoration:underline}
strong, b, .button, button, .link{font-weight:400}
img{border:0}
ul{padding-left:0}
ul li{list-style:none;background:url('../images/dot.png') no-repeat 4px 6px;background-size:10px;padding-left:22px;padding-bottom:2px;margin:0}
hr{clear:both;border:0;border-top:1px solid #ddd;background:transparent;height:1px;clear:both;margin:10px 0}
h1, h2, h3, h4, h5, h6{font-weight:300;margin:10px 0px;line-height:normal}
h1{font-size:28px}
h2{font-size:24px}
h3{font-size:21px}
h4{font-size:16px}
h5{font-size:13px}
h6{font-size:11px}
a h1, a h2, a h3, a h4, a h5, a h6{text-decoration:none}

.msgbox{margin:200px auto}

.acol100{width:100%}.acol90{width:90%}.acol80{width:80%}.acol75{width:75%}.acol70{width:70%}.acol66{width:66.66%}.acol60{width:60%}.acol50{width:50%}.acol40{width:40%}.acol33{width:33.33%}.acol30{width:30%}.acol25{width:25%}.acol20{width:20%}.acol15{width:15%}.acol10{width:10%}.acol5{width:5%}

.clear{clear:both}
.absolute{position:absolute}
.fixed{position:fixed}
.relative{position:relative}
.hidden{display:none}
.show{display:block}
.desktop{display:none}
.mobile{display:block}

.noscroll{overflow:hidden}
.nogo{display:none}

.afloatl{float:left}
.afloatr{float:right}

.inline{display:inline-block}
.textcenter{text-align:center}
.touchscroll{-webkit-overflow-scrolling:touch}
.anchor{margin-top:-150px;position:absolute}
.center{margin-left:auto;margin-right:auto}
.padded{padding:40px}
.shadow{box-shadow:0 0 40px rgba(0, 0, 0, 0.3)}

.close{position:fixed;right:2vw;top:2vw;width:40px;padding:8px;background:#333;border-radius:50%;transition:0.3s;cursor:pointer}
.close:hover, .resetfilter:hover .close, .filters:hover .close{transform:rotate(90deg)}

#imagewindow{z-index:110}
#window{z-index:100}

#window, #imagewindow{position:fixed;top:0;bottom:0;left:0;right:0;text-align:center;overflow:auto;-webkit-overflow-scrolling:touch;display:none;background-color:rgba(255, 255, 255, 1)}
#imagewindow #image{max-width:98%;max-height:96%;vertical-align:middle;z-index:0;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0}
#imagewindow #image.pano{max-width:none}
.pictitle{background:#000;color:#999;font-size:18px;position:fixed;padding:6px 10px;bottom:0;left:0;right:0;margin:auto;transition:0.3s}
.next, .previous{position:fixed;top:49%;display:block;color:#222;height:46px;margin-top:-15px;text-shadow:0 0 3px rgba(255, 255, 255, 0.5);padding:8px;background:#fff;border-radius:50%;opacity:0.5}
.previous{padding-left:3px;padding-right:11px}
.next{padding-right:3px;padding-left:11px}
.next:hover, .previous:hover{color:#555;text-shadow:0 0 2px rgba(255, 255, 255, 0.5);opacity:1}
#window .next, #imagewindow .next{right:1%}
#window .previous, #imagewindow .previous{left:1%}

/* -------------------------------------- */

/* FORM */
select{-webkit-appearance:none}
input, textarea, select{padding:8px;background:var(--input-bg);border:0;box-shadow:0 0 5px rgba(0,0,0,0.1)}
input[type=submit],.button, button{padding:6px 12px;margin:5px 0;display:inline-block;text-decoration:none;background:var(--main-color);color:#fff;border-radius:var(--roco)}
.form input[type=text],.form select,.form textarea{width:100%;margin:5px}
.form h1{font-size:16px}

/* NAVIGATION */
.logo{width:100px;margin-right:50px}
.navigation{position:fixed;height:100vh;top:0;bottom:0;right:0;background:var(--nav-bg);text-align:left;padding:0;z-index:10}
.navigation nav{display:none;padding:10px;width:300px;height:100vh;background:var(--nav-bg)}
.navigation nav a{display:block;text-decoration:none;font-size:21px;font-weight:bold;color:var(--nav-color);background:var(--nav-linkbg);padding:10px;margin:5px 40px;transition:0.3s}
.navigation nav a:hover{color:var(--main-color);text-decoration:underline}
.navigation nav a.active{color:var(--main-color)}
.toggle{display:block;position:fixed;right:0px;top:0px;padding:18px;font-size:34px;color:var(--main-color);background:#fff;transition:0.3s;z-index:20}
.toggle:hover{color:var(--main-color)}
.fa.fa-bars.toggle{font-size:30px}
.contentnav a{display:block;font-size:18px;padding:12px;font-weight:bold;text-decoration:none}
.contentnav a:hover{text-decoration:underline}
/* SEARCH */
.search{height:20px;white-space:nowrap;padding:10px;display:inline-block;position:relative;right:10px;position:absolute}
.search em{display:inline-block;font-size:15px;color:var(--gray);cursor:pointer;margin-left:-3px}
.search input{display:none;min-width:200px;border:0;box-shadow:0 0 10px rgba(0,0,0,0.08);background:#fff;margin:-10px;margin-right:-24px;border-radius:var(--roco)}

/* COOKIE */
.cookiemonster{position:fixed;bottom:40px;left:40px;border-radius:var(--roco);background:#fff;z-index:10;display:relative;max-width:400px}
.cookiemonster .close{position:absolute;right:-18px;top:-18px}

/* MAIN IMAGE */
.img{z-index:-1;height:100vh;width:100vw;object-fit:cover;top:0;position:fixed}
.imgspacer{height:100vh;margin-top:var(--contenttop)}

.mainimage .text{position:relative;margin:5%;margin-top:20vh;z-index:1;overflow:hidden;background:rgba(0,0,0,0.5);color:#fff;border-radius:var(--roco)}
.mainimage .text h1{background:var(--main-color)}
.text .padded{padding:20px}
.mainimage h1, .mainimage h2, .mainimage h3, .mainimage h4{margin:-20px;margin-bottom:0;padding:4px 20px}

/* Gallery */
.gallery .pic{display:inline-block;vertical-align:middle;position:relative;width:18%;height:14%;margin:1%;object-fit:cover;transition:0.3s}

.gallery.nocrop .pic{width:31%;height:auto}
.gallery .pic:hover{box-shadow:0 0 40px rgba(0, 0, 0, 0.3);z-index:10}
.pic{border-radius:3px}
.pic.pano{width:38%}

/* Form */
.form {  background: #eee;  padding: 20px}
input, textarea, select {  padding: 10px;  width: 100%;  border: 0}
textarea {  height: 140px}
input:focus, textarea:focus {  border-bottom: 1px solid #999}
input[type="checkbox"], input[type="radio"], input[type="submit"] {  width: auto;  border: 0}
input[type="submit"] {  -webkit-appearance: none}
input.required {  border-bottom: 1px dashed #C00;  transition: 0.3s}
input.required:focus {  border-bottom: 1px solid #C00}
input.required.ok {  border-bottom: 1px dashed yellowgreen;  background: #f3fbef}
input[type=text] {  border-left: 1px solid #ddd}
select {  -webkit-appearance: none;  -moz-appearance: none;  border: 1px solid #ddd;  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);  background: url('/images/select.png') no-repeat 6px;  background-size: 12px;  filter: grayscale(100%);  transition: 0.3s;  background-color: #fff;  padding-left: 24px}
select:hover {  background-color: #333;  color: #fff}
.required::-webkit-input-placeholder {  color: #c00}
.form div.padded {  padding: 4px}
button {  appearance: none;  -webkit-appearance: none;  border: 0}
label input[type=checkbox]:checked + module {  opacity: 1}
label {  display: inline-block;  vertical-align: top}
label [type="radio"], label [type="checkbox"] {  border: 0;  clip: rect(0 0 0 0);  height: 1px;  margin: -1px;  overflow: hidden;  padding: 0;  position: absolute;  width: 1px}
label [type="checkbox"] + span, label [type="radio"] + span {  display: inline-block;  margin: 8px;  margin-right: 14px;  margin-top: 3px;  cursor: hand;  cursor: pointer;  width: 20px;  float: left}
label [type="radio"] + span:before, label [type="checkbox"] + span:before {  content: '';  display: inline-block;  width: 16px;  height: 16px;  border-radius: 50%;  border: 2px solid #fff;  box-shadow: 0 0 0 0.2em #ddd;  margin: 0 5px;transition: 0.3s ease all}
label [type="checkbox"] + span:before, label [type="radio"] + span:before {background: #fff}
label [type="radio"]:checked + span:before, label [type="checkbox"]:checked + span:before {box-shadow: 0 0 0 2px #ddd}
.nogo {display: none}

.newslist, .bloglist, .traininglist {
  display: inline-block;
  position: relative;
  margin: 1vh 0.5vh;
  background: url('/images/quote.png')98% 10px no-repeat;
  background-color: #fff;
  background-size: 30px;
  border-radius: 1.5%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
  transition: 0.2s
}
.newslist:hover, .traininglist:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  z-index: 1;
  background-size: 40px;
  color: #111
}
.newslist h2, .newslist h3, .newslist h4, .newsview h2, .newsview h3, .newsview h4 {
  color: #444
}
.date {
  color: #999;
  float: left
}
.newshot, .bloghot {
  clear: both
}
.news, .newsview .more {
  display: none
}
.newsview .news {
  display: block
}
.newsview .date {
  display: inline-block
}
.newsview {
  height: 100%;
  width: 100%;
  max-width: 900px;
  text-align: left;
  margin: auto;
  overflow: auto;
  position: relative
}
.newslist .button, .bloglist .button, .traininglist .button {
  float: right
}

table {
  width: 100%
}
.table td {
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  padding: 10px
}
.table {
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd
}

/* FOOTER */
.footer{position:fixed;bottom:0;left:0;right:0;background:var(--footer-bg);color:var(--footer-txt);z-index:10}
.footer a{color:var(--footer-a)}

/* CONTENT */
.content{background:var(--content-bg)}

/* STYLE OVERRIDE */
.logo{position:fixed;left:5%;top:5%;z-index:1}
.navigation{background-color:rgba(255,255,255,0.5)}

/* MAINIMAGES */
.mainhalf{position:relative;display:block;height:33vh;overflow:hidden}
.mainhalf .img{filter:grayscale(30%);opacity:0.9;transition:0.3s;width:50%;height:100vh;object-fit:cover;}
.mainhalf.col40 .img{width:40%}
.mainhalf:hover .img{filter:grayscale(0);opacity:0.7}
.mainhalf .button{font-size:21px;padding:14px 20px;transition:0.3s}
.mainhalf.text{overflow:auto;background:#fff;z-index:1;padding:50px}
//.subject h1{color:#fff;display:inline-block;background:rgba(0,0,0,0.5);padding:5px 20px; border-radius: 5px;}
.mainhalf .subject{width:76%;text-align:center;margin:auto;margin-top:200px}
.subject h1{color:#fff;font-weight:bold;font-size:44px;text-shadow: 0 0 10px rgba(0,0,0,0.3);}

/* DESKTOP */
@media screen and (min-width:800px){
    
.col100{width:100%}.col90{width:90%}.col80{width:80%}.col75{width:75%}.col70{width:70%}.col66{width:66.66%}.col60{width:60%}.col50{width:50%}.col40{width:40%}.col33{width:33.33%}.col30{width:30%}.col25{width:25%}.col20{width:20%}.col15{width:15%}.col10{width:10%}.col5{width:5%}

.mainhalf{position:fixed;top:0;bottom:0;height:auto}
.mainhalf.left{left:0}
.mainhalf.right{right:0}
.mainhalf .subject{position:absolute;z-index:1;margin:14%;margin-top:40vh}
.mainhalf h1{font-size:60px}
.mainhalf .button{opacity:0.3}
.mainhalf:hover .button{opacity:1}

.floatl, .afloatl{float:left}
.floatr, .afloatr{float:right}
 
.gallery.g3 .pic{width:31%;height:20%}
.gallery.g2 .pic{width:48%;height:20%}
.gallery.g1 .pic{width:98%;height:auto}
 
.desktop{display:block}
.mobile{display:none}
 
}