/*----------------------------------------------------------------------------
	NewCSS.css

	this css-file contains basic window layout control to fit content into viewport.



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

/*----------------------------------------------------------------------------
 Body and Main Containers
----------------------------------------------------------------------------*/

body {


  overflow-x:hidden;
  overflow-y:hidden;
  margin:0 auto;
  border:0px solid red;
  width:100vw;
  max-width:1440px;
  height:100vh;
  background-color:none;
  background-image:url('');
  background-repeat:no-repeat;
  background-position: center top;
  font-family:Palatino;
  font-family:Bodoni MT;
  font-family:Georgia;
  font-family:Arial;

  font-size:1.0rem;


}

div.Container {
  position:relative;
  margin:0 auto;
max-width:1140px;
height:100%;
overflow-x:hidden;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
background-color:none;
border:0px solid red;

text-align:justify;


}

div.TopDiv{
  position:relative;
  width:100%;
  height:25%;
  max-height:300px;
  overflow:hidden;


  background-color:green;
  font-size:1.4vw;
}

div.TopLeft{
  position:relative;
width:10%;
height:100%;
display:inline-block;
vertical-align:top;


}

div.TopRight{
position:relative;
  width:89%;
  height:100%;
  display:inline-block;
  vertical-align:top;
padding:0%;


}

div.ContentDiv{
  border:0px solid red;
  position:relative;
width:100%;
height:auto;
overflow-x:hidden;
overflow-y:scroll;
  background-color:white;

}

div.ContentLeft{
    border:0px solid black;
position:relative;
width:13%;
height:auto;
display:inline-block;
background-color:white;
vertical-align:top;
padding-left:1%;
padding-top:1%;
}

div.ContentRight{
position:relative;
width:83%;
height:auto;
display:inline-block;
background-color:white;
vertical-align:top;
padding-left:1%;
padding-top:1%;
padding-right:1%;
}

div.LeftBox{
width:95%;
margin-bottom:1.5%;
height:auto;
margin-top:3%;


}

div.PopFrame{
position:fixed;
overflow-y:scroll;
width:90%;
height:95%;
left:2%;
top:0%;
background-color:lightgray;
visibility:hidden;
z-index:1000;

}

object{
width:100%;
height:100%;
overflow-y:auto;
-webkit-overflow-scrolling: touch;

}

div.PopObject{
position:fixed;

overflow-y:hidden;
width:90%;
height:95%;
left:2%;
top:0%;

background-color:white;
visibility:hidden;
z-index:1000;
-webkit-overflow-scrolling: touch;

}

div.close {
width:50%;
height:8%;
position:sticky;
background-color:red;
color:white;
font-family:Times;
padding-left:10%;
font-size: 150%;
cursor:pointer;
font-weight: bold;

}

div.bottom{width:50%;
height:50vh;}

div.SquashedBanner{
  position:relative;
width:100%;
min-height:70%;
overflow:hidden;

background-image:url('resources/_wsb_300x234_Godel.jpg');
background-repeat:no-repeat;
background-size:100% 100%;
}

div.popWin{width:85%; height:90%;  background-color: #f7c15c; border:10px solid #8f2140; overflow:scroll; position:fixed; top:1%; left:5%; z-index:599; overflow-y:hidden; visibility:hidden}

 div.popCon{overflow:scroll;  width:100%;  border:0px solid red; height:80%;}

 div.popPics{width:25%; height:100%;vertical-align:top; border:0px solid red; margin-left:1%;  margin-right:0%; margin-top:0px; display:inline-block;}

 div.popNar{width:65%;   display:inline-block; vertical-align: top;  height:auto; -webkit-column-count: 2;-webkit-column-break-inside: avoid;
  -moz-column-count: 2;column-count: 2;column-gap: 40px;column-rule-style: solid;column-rule-color: #881100; margin-top:15px;margin-bottom:15px; margin-left:5%; text-align:justify; font-size:110%;   overflow:hidden; background-color:none }

  div.popNarFull{width:85%; position:relative;  display:inline-block; vertical-align: top;  height:auto; -webkit-column-count: 1;-webkit-column-break-inside: avoid;
   -moz-column-count: 1;column-count: 1;column-gap: 0px;column-rule-style: solid;column-rule-color: #881100; margin-top:15px;margin-bottom:15px; margin-left:5%; text-align:justify; font-size:100%; padding:2%;  overflow:hidden; background-color:none }

div.floatLeft{
  position:relative;
  float:left;
  margin-right:3%;
  margin-left:0%;
  margin-top:0%;
  width:50%;
  break-inside: avoid-column;
}

div.insetBox{
position:relative;
margin:0 auto;
width:90%;
height:auto;
overflow:hidden;
padding-bottom:1%;


}

.contBox {display:inline-block; width: 17.0%; height:10vh;padding:1%; vertical-align:top; position:relative; left:0px; top:10%;
}


div.threeBox{
width:32%;
height:auto;
position:relative;
display:inline-block;
 padding: 30px 0;
 border:0px solid green;
 vertical-align:top;

}



div.row{
position:relative;
 width:100%;
 vertical-align:top;

}





div.floatRight{
    position:relative;
float:right;
margin-right:0%;
margin-left:3%;
margin-top:0%;
width:50%;
break-inside: avoid-column;


}

div.WorkInProgress{
  position:absolute;
  height:100%;
  width:100%;
  text-align:center;
  font-size:500%;
  color:red;
  background-color:white;
  opacity:0.5;


}

h1 {
  position:absolute;
  top:0px;
  width:100%;
  color:white;
  text-align:center;
  font-size:300%;

  font-style:normal;
  border:0px solid red;

}


  .cols2{-webkit-column-count: 2;-webkit-column-break-inside: avoid;
    -moz-column-count: 2;column-count: 2;column-gap: 40px;column-rule-style: solid;column-rule-color: #881100; margin-top:15px;margin-bottom:15px;max-height:98%; overflow:hidden; background-color:none}

    p.narration {
      text-indent:0.3in;
      margin-top:1em;
      margin-bottom:1em;

      height:auto;
      color:black;
      text-align:justify;
      padding-left:15px;
      padding-right:15px; }

    p.narrationSml{
      text-indent:0.3in;
      margin-top:1em;
      margin-bottom:1em;
      font-size:.9rem;
      height:auto;
color:black;
      text-align:justify;
      padding-left:15px;
      padding-right:15px;}

      p.inset{width:80%;
        margin-left:5%;

      margin-top:1em;
      margin-bottom:1em;

      }

br.3in {text-indent:0.3in;}

figcaption {width:97.2%;
  margin-top:-0%;
  margin-bottom:1%;
  padding:1.5%;
  color:white;
  background-color: black;
  position:relative;
  font-style:oblique;
  font-size:0.85rem;
  font-family:Tahoma;
line-height: normal;


}
  figure {position:relative;
 display: table;
 margin: 0px;
 width:100%;
 color:none;
 background-color:none;
 border:0px solid black;


}

figure img {
 display: block;
 width:100%;
 margin:0 auto;
 border:0% solid black;
}

iframe {
width:100%;
height:100%;

}


div.aspectWrapper{
  position: relative;
  padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */

}
iframe.aspect{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
left: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  opacity:0.5;
}

#myBtn:hover {
  background-color: #555;
}

#semaphore {position:fixed;
   background-color:#bbcccc;
    bottom:220px;
     right:10px;
      width:100px;
       height:auto;
        z-index:99;
      }
#semaphore:hover {
background-color:#4488dd;
color:white;

}

.slidecontainer {
  width: 98%;
}

.slider {
  -webkit-appearance: none;
display:inline-block;
  width: 100%;
  height: 35px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}


    .banner {
      position: relative;
      text-indent:0.0in;
      font-size:52px;
      font-family:Comic Sans MS;
      padding:10px;
      left: 28%;
      top: -80px;
      display: block;
      margin: 100px -200px;
      width: 80%;
      height: auto;
      border: 1px solid lightgray;

      text-align: center;
      color: #451;
      background: yellow;
      border-radius: 4px;
      box-shadow: 0 0 30px rgba(0,0,0,.15) inset,
          				0 6px 10px rgba(0,0,0,.15);




    }

    .banner::before,
    .banner::after {
      content: '';
      position: absolute;
      z-index: -1;
      left: -70px;
      top: 24px;
      display: block;
      width: 40px;
      height: 0px;
      border: 30px solid yellow;
      border-right: 20px solid yellow;
      border-bottom-color: yellow;
      border-left-color: transparent;
      transform: rotate(-5deg);

    }

    .banner::after {
      left: auto;
      right: -70px;
      border-left: 20px solid yellow;
      border-right: 30px solid transparent;
      transform: rotate(5deg);}

      @font-face {
       font-family: OldEnglish;
       src: url(resources/fonts/HelmswaldPost.otf);
      }