﻿   * { 
margin:0;
padding:0;
}
#header{position:relative;}
 
@font-face {
    font-family: 'OpenSansRegular';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Regular-webfont.woff') format('woff'),
         url('OpenSans-Regular-webfont.ttf') format('truetype'),
         url('OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Tablet Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}
body {
  -webkit-animation: bugfix infinite 1s;
  font-family: 'OpenSansRegular';
   padding: 0;
  background-color:#e6d8a8; 
font-size:16px;  
 
}
 br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 10px; /* change this to whatever height you want it */
}
 
 img {
  max-width: 100%;
  display: block;
}  
#innercontainer {
	padding:0;
	position:relative;
	height:1200px;
	width:1750px;
	overflow:visible;
	margin:0 auto 500px auto;
 
background:url('../images/png2/background.jpg');background-repeat:no-repeat; 

}  

  p {text-align:justify;} 

span.indent {margin-left:-8px;}


label {
  cursor: pointer;
  user-select: none;
}

/* styling */
label {
  display: inline-block;
  font-size: 1em;
  line-height: 1em;
  height: 1em;
   text-align:center;
  color: #5E5B72;
  text-align: center;
  
	padding-left: 4px;
}
  }

   
div.floatr {
	width:12.5em;
	
	padding:.6em 0 .6em .6em;
float:right;}
div.floatl {
	width:12.5em;
	
	margin:.6em .6em 0 0;
float:left;}
div.emaillink{
	margin:1.2em auto;
	border:.1em solid black;

height:1.9em;
width:12.5em;
padding:1.9em 0 1.2em 4.4em;}
div.emaillink p a{margin:0 0 .5em 0;
font-size:1.7em;
line-height:.75em;
color:#5e5e5e;
text-decoration:none;}
div.emaillink:hover{
	border:1px solid red;}	

div.emaillink p a:hover{
	color:red;}	
	
	
 hr {
        width: 80%;
        margin: .62em auto;}

#headertop {
	width: 68.8%;
	position: relative;
	padding-top:.5em;
	margin: 40px 0px 0px 89px;
	}
     

	

#headerbottom{
font-family:'Open Sans';
font-size:.9em;		
text-align: center;
height:60px;
width:68.8%;
margin: 0 0 3px 80px;
padding-top: 14px;
}	

#lines {width:180px;
height:fit-content;
position:absolute;
top:294px;
left:5.25em;
background:	#faf8f1;
box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
height:68px;
padding:8px 11px 6px 11px;
font-size:12px;
border-radius:5px;
z-index:2000;
display:none;}

div.scroll {
        position:absolute;
        background-color: #faf8f1;
        
        width: 5.5em;
        
		left:68.75%;
        height:757px;
        line-height:.25em;
        overflow: auto;
		overflow-x: hidden;
        margin-right:22.2%;
        text-align: justify;
        padding: .3em;
		color:#3e3e3d;
box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
border: 1px solid #eaeaea;
      }
.scroll:before{
	  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);}
     
     
     div.scroll p {
        margin: 0;
		font-family: 'OpenSansRegular';
		
      }


p.center {
	font-size: 1em;
  line-height: 1.5em;
  color: #2a2a2a;
  margin-bottom: .5em;
  font-family: 'OpenSansRegular';
   text-align:center;
}
p.center2 {
	font-size: 1em;
  line-height: 1em;
  color: #2a2a2a;
  margin-bottom: .5em;
  font-family: 'OpenSansRegular';
  text-align:center;
}

p.semibold {
	 font-size: 1em;
  line-height: 1.5em;
  font-weight:semibold;
  color: #2a2a2a;
margin-bottom: .5em;
font-family: 'OpenSansRegular';}

p.title {font-size:1em;
	text-align:center;
	line-height:1.5em;
	color: #424242;
margin-bottom: .5em;
font-family: 'OpenSansRegular';}
p.imgtitle{
	font-size:.7em;;
	text-align:center;
	margin: 0;
	padding:0;
	line-height:1em;
	color:#626261;
	}
	
img {margin-bottom: .5em;
     outline:none;
     text-decoration:none;
     border:none;
position:relative;}
 /* stroke */
nav.stroke ul li a,
nav.fill ul li a {
  position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #333;
  height: .2em;
}
nav.stroke ul li a:hover:after {
  width: 100%;
}
nav {
  max-width: 75%;
  linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
  margin: 0 auto;
  padding: 4.5em 0;
}

nav ul {
  text-align: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  padding: 0 .2em 0 .3em ;
   color: #f2ebd2;
  font-size: 1em;
  text-decoration: none;
  display: block;
}

nav ul li a:hover {color:#f2ebd2;}
 
}


.alert_box{
  background: url("../images/png2/key.jpg");
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 45%;
  max-height:16.5%;
  font-size:.8em;
 box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-webkit-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-moz-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: translate(-5  
  0% , -50%) scale(0.97);
  transition: all 0.3s ease;
}
#check:checked ~ .alert_box{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50% , -50%) scale(1);
}
#check:checked ~ .background{
  opacity: 1;
  pointer-events: auto;
}
#check{
  display: none;
}
.alert_box .icon{
  height: 100px;
  width: 100px;
  color: #f23b26;
  border: 3px solid #f23b26;
  border-radius: 50%;
  line-height: 97px;
  font-size: 50px;
}
.alert_box header{
  font-size: 35px;
  font-weight: 500;
  margin: 10px 0;
}
.alert_box p{
  font-size: 20px;
}
.alert_box .btns{
  margin-top: 20px;
}
.btns label{
	
	
  display: inline-flex;
  height: 186px;
  padding: 148px 520px;
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
  width:620px;
  outline: none;
  margin: 0 10px;
  border: none;
  color: #2D2B3D;
  font-size:15px;
  transition: all 0.3s ease;
}
.btns label:first-child{
  background: ;
}
.btns label:first-child:hover{
  ;
}
.btns label:last-child{
  background:;
}
.btns label:last-child:hover{
  color:red ;
}


  #thumbnails a:hover {	color:#F7571D;}
#thumbnails a {color:#CDD0D6;}
 #fbx.fbx .fbClose{background-image:url(floatbox/graphics/white/close..png)}
 #line2 {width:900px;}
 
  #wrapper {width:1280px;position:relative;color:#5E5B72;margin:0;}
  
#inpages {
	width:550px;
	height:auto;
	line-height:20px;
margin:20px 90px;
text-align:justify;
font-size:17px;
font-family: 'OpenSansRegular';}
  
div.list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  
  background-color: #f2ebd2;
}

div.list p {
  float: left;
  border-right:1px solid #898578;
  padding:0 2px 0 2px;
   font-size: 10pt;
 font-family: 'khula_regularregular', sans-serif;
 line-height:11px;
 margin:0;
}


#slides a{text-decoration:none;color:#029f27;}
 .scroll a {
	color: #6B6A71;
	font-size: 14.5px;
	padding: 2px;
	text-decoration: none;
}
 p.accordion-content{margin:0 0 4px 4px;}
 .maptextcol1 a:hover{color:red;}
 #maptextr p{color:#626261;line-height:15px;font-size:14px;margin:0 0 3px 0px;}
 p {color:#626261;line-height:1.2em;font-size:1em;margin:0 0 .3em 0px;}
 p.red{color:red;display:inline;font-size:12px;margin:0 0 0 20px;}
 p.blue{color:blue;display:inline;font-size:12px;margin:0 0 0 20px;}
 p.green{color:#085d02;display:inline;font-size:12px;margin:0 0 0 10px;}
 p.grey{color:#5b5c5b;display:inline;font-size:12px;margin:0 0 0 10px;}
 p.hundredsdec{color:#a7dfa3;display:inline;font-size:12px;margin:0;background:white;padding:0 5px;}
 p.hundredcurrent{color:#98ef92;display:inline;font-size:12px;margin:0 0 0 5px;background:white;padding:0 5px;}
 p.hundredsosrain{color:#e6d8a8;display:inline;font-size:12px;margin:0 0 0 5px;background:white;padding:0 5px;}
 p.hundredsosraincurrent{color:#f6dd87;display:inline;font-size:12px;margin:0 0 0 5px;background:white;padding:0 5px;}
 
  
.imageshundreds {
position:absolute;
top:-100px;
	left:618px;;
	width: 178px;
	height:auto;
	z-index:100;
	font-family: 'khula_regularregular', sans-serif;
	font-size:9pt;
    text-align:center;
    padding:10px 12px 10px 8px;
    background:#E8D3A0;
      box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-webkit-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-moz-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);

}

#thumbnails p {
width:100px;}

#railwaysright a:hover {
	color:#F7571D;}
#railwaysright a {
   color: #525C75;}
    
#railwayswhite {

width:1380px;
height:1234px;

}  
#railwaysgreen {
width:750px;
height:681px;
padding:2px;
}  

#railwaysleft {

width:620px;
float:left;
height:549px;
margin-left:5px;}
#topmenu {
	float:left;
padding:3px 23px;}

span.previous{
	position:absolute;
		bottom:205px;
	left:-3px;
	width:20px;
	height:20px;
	background:#faf8f1;
 box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-webkit-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-moz-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
font-family: 'khula_regularregular', sans-serif;
	font-size:12px;
	line-height:15px;
	text-align:left;
	padding:7px;
border-radius:12px;}
span.maptextmain{
	position:absolute;
		bottom:.32em;
	left:.2em;
	width:35em;
	height:fit-content;
	background:#faf8f1;
 box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-webkit-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-moz-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);

	font-size:.9em;
	line-height:1em;
	text-align:left;
	padding:.5em 1em .27em .5em;
	border-radius: 5px;
	}
	span.maptextmaing{
	position:absolute;
		bottom:.32em;
	left:.2em;
	width:35em;
	height:fit-content;
	background:#faf8f1;
box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-webkit-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-moz-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
border: 2px solid gray;
	font-size:.9em;
	line-height:1em;
	text-align:left;
	padding:.5em 1em .27em .5em;
	border-radius: 5px;
	}
	span.maptextmainw{
	position:absolute;
		bottom:5px;
	left:3px;
	width:500px;
	height:fit-content;
	background:#faf8f1;
 box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-webkit-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-moz-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
font-family: 'khula_regularregular', sans-serif;
	font-size:.9em;
	line-height:15px;
	text-align:left;
	padding:8px 11px;
	border-radius: 5px;
	}
	
span.maptextrouter{
	position:absolute;
top:.01em;
left:886px;
border-radius: 5px;
width:26.25%	
	}
	span.maptextrinner{
		display:block;
box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-webkit-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-moz-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
	width: 336px;
border: 1px solid #eaeaea;
	height:fit-content;
	background:#fffcf3;
  	font-size:.9em;
	line-height:1em;
	text-align:left;
	padding:.7em;
	color:#2b2f36;
	border-radius: 5px;
	margin: 0 0 .3em .3em;
	}
	
	span.maptextrinnerg{
		display:block;
box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-webkit-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-moz-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
	width: 336px;
border: 2px solid gray;
	height:fit-content;
	background:#fffcf3;
  	font-size:.9em;
	line-height:1em;
	text-align:left;
	padding:.7em;
	color:#2b2f36;
	border-radius: 5px;
	margin: 0 0 .3em .3em;
	}
	span.maptextr{
		position:absolute;
top:.05em;
right:-43.5%;
box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-webkit-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-moz-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
	width:31.3%;
	height:fit-content;
	background:#fffcf3;
   
	font-size:.9em;
	line-height:1.1em;
	text-align:left;
	padding:.8em;
	text-align:justify;
	color:#2b2f36;margin:0 0 3px 0px;
	border-radius: 5px;
	
	}
	span.maptextrg{
		position:absolute;
top:.05em;
right:-43.5%;
box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-webkit-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
-moz-box-shadow:15px 17px 26px -3px rgba(64,64,64,0.44);
	width:31.3%;
	height:fit-content;
	background:#fffcf3;
   border: thin solid gray;
	font-size:.9em;
	line-height:1.1em;
	text-align:left;
	padding:.8em;
	text-align:justify;
	color:#2b2f36;margin:0 0 3px 0px;
	border-radius: 5px;
	
	}
	span.maptextimg{
		width:350px;
		
	height:fit-content;}

#slides .maptextcol1{text-align:left;display:block !important;}

#slides .maptextbottom{position:absolute;
bottom:10px;
left:0;}	
span.date{

	font-size:1.6em;
	color:#626261;
	position: absolute;
right: 1em;
top:0;
text-align: right;
	}
	

#slides p.textbottom {
background:#F7F5EA;
width:737px;
height:150px;
color:#2D2B3D;}


.maptextr p{}	
#slides .maptextrcol1{text-align:left;}

#slides .maptextrbottom{position:absolute;
bottom:0;
left:0;}
	
#slides .datedown{
	position:absolute;
	display:block !important;
	top:45px;
	left:18px;
	width:420px;
	height:auto;
	background:none;
	
background-repeat: no-repeat;
font-family: 'khula_regularregular', sans-serif;
	font-size:25px;
	color:#592803;
	}
.right
{float:right;
width:450px;
height:250px;
background:white;
margin-right:30px;}
	
.maps {display:none;width:793px;height:757px;
background-repeat:no-repeat;position:relative; }
.maps:before{
	  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
  .fade {
        border: 0;
        height: 1px;
  background-image: linear-gradient(to right, #ccc, #000000, #ccc);}
			   


/* By Dominik Biedebach @domobch */
nav ul {
  list-style: none;
  text-align: left;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  display: block;
  text-decoration: none;
  color: #aaa;
  margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .5s;
}
nav ul li a:hover {
  color: #555;
}
nav.stroke ul li a,
nav.fill ul li a {
  position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #333;
  height: 1px;
}
nav.stroke ul li a:hover:after {
  width: 100%;
}