/**
 * @file
 * CSS for font imports.
 */

/* fonts  */
@font-face {
  font-family: "Boehringer Headline";
  src: url(../fonts/BoehringerForwardHead.otf);
  font-display: swap;
  font-weight: bold;
}
@font-face {
  font-family: "Boehringer Text";
  src: url(../fonts/BoehringerForwardText.otf);
  font-display: swap;
  font-weight: normal;
}



@font-face {
    font-family: "Boehringer Headline";
    src: url(../fonts/BoehringerForwardHead.woff2) format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: "Boehringer Headline";
    src: url(../fonts/BoehringerForwardHead-It.woff2) format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: "Boehringer Headline";
    src: url(../fonts/BoehringerForwardHead-Md.woff2) format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap
}

@font-face {
    font-family: "Boehringer Headline";
    src: url(../fonts/BoehringerForwardHead-MdIt.woff2) format("woff2");
    font-style: italic;
    font-weight: 500;
    font-display: swap
}

@font-face {
    font-family: "Boehringer Headline";
    src: url(../fonts/BoehringerForwardHead-Bd.woff2) format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap
}

@font-face {
    font-family: "Boehringer Headline";
    src: url(../fonts/BoehringerForwardHead-BdIt.woff2) format("woff2");
    font-style: italic;
    font-weight: 700;
    font-display: swap
}

@font-face {
    font-family: "Boehringer Text";
    src: url(../fonts/BoehringerForwardText.woff2) format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: "Boehringer Text";
    src: url(../fonts/BoehringerForwardText-It.woff) format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: "Boehringer Text";
    src: url(../fonts/BoehringerForwardText-Md.woff2) format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap
}

@font-face {
    font-family: "Boehringer Text";
    src: url(../fonts/BoehringerForwardText-MdIt.woff2) format("woff2");
    font-style: italic;
    font-weight: 500;
    font-display: swap
}

@font-face {
    font-family: "Boehringer Text";
    src: url(../fonts/BoehringerForwardText-Bd.woff2) format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap
}

@font-face {
    font-family: "Boehringer Text";
    src: url(../fonts/BoehringerForwardText-BdIt.woff2) format("woff2");
    font-style: italic;
    font-weight: 700;
    font-display: swap
}


* {
   margin:0;
   padding:0;
   }
html,body,div,h1,h2,h3,h4,h5,p,a,table,tr,th,td,ol,ul,li,form,input,select,textarea {
  font-family : "Boehringer Text", Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
  font-size: 1em;
  font-weight: normal;
  color: rgb(8, 49, 42);
  }
body, html {
   margin: 0;
   border: 0;
   padding: 0;
   height: 100%;
   }

.content {
   position: absolute;
   top: 0;
   width: 880px;
   height: 560px;
   overflow: hidden;
   }
.onright {
   float: right;
   margin: 0 0 15px 40px;
   }
.border {
   border: solid 1px rgb(66,93,122); 
   }

#tipsbutton {
   position: absolute;
   top: 260px;
   left: 753px;
   cursor: pointer;
   z-index: 20;
   }
#tips {
   position: relative;
   z-index: 10;
   width: 182px;
   overflow: hidden;
   float: right;
   margin: 65px 0 0 0;
   padding: 0 0 0 0;
   }
#tips p {
   background: rgb(66,93,122);
   color: rgb(255,255,255);
   font-weight: bold;
   text-align: center;
   margin: 0 0 20px 0;
   border: solid 1px rgb(66,93,122);
   padding: 35px 5px 5px 5px;
   }
#tips video {
   margin: 0;
   border: solid 1px rgb(66,93,122);
   padding: 0;
   }
#videoposter {
   position: absolute;
   top: 1px;
   left: 1px;
   }

dl {
   float:right;
   margin:0 0 15px 20px;
   }   
dl dt {
   margin:0;
   padding: 0;
   }
dl dd {
   font-size:0.7em;
   margin:0;
   padding: 0;
   }

h2 {
   font-weight: bold;
   }
h3 {
   font-weight: bold;
   }
a {
	font-size: 1em;
	text-decoration: underline;
   }
a:hover {
	text-decoration: none;
   }
sub, sup { 
   font-size: 0.75em;
   line-height: 0; 
   position: relative; 
   vertical-align: baseline; 
}
sup { 
   top: -0.5em; 
}
sub { 
   bottom: -0.25em; 
}
input[type="submit"] {
   color: rgb(50,50,50);
   font-weight: normal;
   background-color: rgb(147,162,180);
   background: linear-gradient(to bottom, rgb(221,221,221), rgb(147,162,180));
   border: solid 1px rgb(147,162,180);
   border-radius: 3px;
   text-decoration:none;
   margin: 15px 0 0 0;
   padding: 3px 20px 3px 20px;
   }
input[type="submit"]:hover {
   background-color: rgb(221,221,221);
   background: linear-gradient(to bottom, rgb(147,162,180), rgb(221,221,221));
   cursor: pointer;
   }
img {
   margin: 0;
   border: 0;
   padding: 0;
   }

div.content p,
div.content li,
div.content th,
div.content td {
   font-size: 1.1em;
   line-height: 1.4em;
   }
div.content h2 {
   font-size: 1.3em;
   line-height: 1.6em;
   padding-bottom: 3px;
   font-weight: normal;
   border-bottom: solid 1px rgb(8, 49, 42);
   margin-bottom: 30px;
   }
div.content h3 {
   font-size: 1.1em;
   line-height: 1.3em;
   font-weight: bold;
   margin-top: 25px;
   }
div.content h3:first-child {
   margin-top: 0px;
   }
div.content p {
   padding-bottom: 10px;
   }
div.content p.title {
   color: rgb(255,255,255);
   }
div.content p.micro {
   font-size: 0.7em;
   }
div.content ul {
   margin: 0;
   padding: 5px 0 5px 0;
   }
div.content ul li {
   margin: 0 0 5px 18px;
   padding: 0;
   }

div.box {
   position: relative;
   text-align: center;
   border-radius: 9px;
   }
div.box h1 {
   font-size: 1.5em;
   line-height: 1.8em;
   margin-bottom: 20px;
   }
div.black {
   border: solid 1px rgb(150,150,150);
   background-color: rgba(0,0,0,0.5);
   padding: 15px;
   }
div.black h1, div.black p {
   color: rgb(255,255,255);
   }
div.white {
   border: solid 1px rgb(255,255,255);
   background-color: rgba(255,255,255,0.8);
   padding: 10px;
   }
div.white h1, div.white p {
   color: rgb(100,100,100);
   }
div.white p {
   font-size: 1em;
   line-height: 1.3em;
   margin-bottom: 15px;
   line-height: 17px;
   }
div.blue {
   font-size: 1.0em;
   line-height: 1.2em;
   font-weight: bold;
   background-color: rgb(217,223,229);
   border: solid 1px rgb(63,93,124);
   padding: 20px 80px 20px 80px;
   }
div.ma {
   margin-right: 10px;
   border: solid 2px rgb(8, 49, 42);
   border-radius: 0px;
   padding: 15px;
   font-weight: bold;
   }
div.cave {
   text-align: left;
   margin-top: 20px;
   padding: 15px;
   font-weight: normal;
   }
div.lek div.box {
   position: relative;
   }
h1.lek {
   font-size: 1.3em;
   line-height: 1.6em;
   color: rgb(150,150,150);
   margin-bottom: 20px;
   }
h2.lek {
   font-size: 1.2em;
   line-height: 1.5em;
   color: rgb(150,150,150);
   margin-bottom: 20px;
   }
h3.lek {
   font-size: 1.1em;
   line-height: 1.4em;
   color: rgb(150,150,150);
   margin-bottom: 20px;
   }
div.content p.introbox {
   font-size: 1.1em;
   line-height: 1.2em;
   background-color: rgb(8, 49, 42);
   text-align: center;
   float: left;
   margin-right: 10px;
   padding: 4px 6px 4px 6px;

   color: rgb(0, 228, 124 );
   }
a.slide_button {
   display: block;
   text-align: center;
   color: rgb(255,255,255) !important;
   font-weight: bold !important;
   letter-spacing: 0.1em;
   background-color: rgb(255,102,0);
   background: linear-gradient(to bottom, rgb(255,153,0), rgb(255,101,0));
   border: solid 1px rgb(255,255,255);
   box-shadow: 2px 2px 7px rgb(170,170,170);
   text-decoration: none;
   margin: 10px 0 0 0;
   padding: 3px 40px 3px 40px;
   }
a.slide_button:hover {
   background-color: rgb(255,102,0);
   background: linear-gradient(to bottom, rgb(255,153,0), rgb(255,101,0));
   }
span.time {
   font-size: 1em;
   line-height: 1.3em;
   }
span.nobr {
   white-space: nowrap;
   }

#start_image {
    position: absolute;
    top: 15px;
    left: 40px;
    width: 800px;
    height: 450px;

    }
#start_image {
    cursor: pointer;
    }

a.vimeo-wrapper span::before {
	  content: "";
	  background: rgba(0,0,0,.45);
	  border: 0;
	  border-radius: 50%;
	  height: 97px;
	  top: 39%;
	  left: 44%;
	  position: absolute;
	  width: 97px;
	}

a.vimeo-wrapper span::after {
  border-bottom: 16px solid transparent;
  border-left: 24px solid rgb(0,228,124);
  border-top: 16px solid transparent;
  content: "";
  display: block;
  top: 46%;
  left: 49%;
  position: absolute;
}

a.vimeo-wrapper span:hover {
  content: "";
  background: #08312a;
  border: 0;
  border-radius: 50%;
  height: 97px;
  top: 39%;
  left: 44%;
  position: absolute;
  width: 97px;
}

a.vimeo-wrapper span:hover::after {
  border-bottom: 16px solid transparent;
  border-left: 24px solid rgb(0,228,124);
  border-top: 16px solid transparent;
  content: "";
  display: block;
  top: 32%;
  left: 41%;
  position: absolute;
}

a.vimeo-wrapper span:hover::before {
	display: none;
	}