@font-face {
  font-family: "PerfectDOSVGA437";

  src: url("./fonts/PerfectDOSVGA437.woff") format("woff"), 
    url("./fonts/PerfectDOSVGA437.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
}
 body {
     color: #666;
}
/** * Main variables */
/** * Base styles */
 html, body {
     
     font-family: "PerfectDOSVGA437", "lucida console", monospace;
     font-size: 1em;
     background-color: #444;
}
/** * Box */
 .box {
     box-sizing: border-box;
	 font-family: "PerfectDOSVGA437";
     font-size: 1em;
	 line-height: 120%;
	 margin: 1.2em;
     padding: 10px 3px;
     background-color: darkblue;
     color: white;
     box-shadow: 16px 16px 0px #222;
    /* box title */
    /* box body/content */
}
 .box.turquoise {
     background-color: turquoise;
}
 .box.text-dark {
     color: black;
}
 .box h2 {
     font-size: 1.1em;
     overflow: hidden;
     text-align: center;
     margin: 0;
     margin-bottom: -0.7em;
     padding-bottom: 0;
}
 .box h2:before, .box h2:after {
     border-top: 3px double white;
     background-color: transparent;
     content: "";
     display: inline-block;
     height: 3px;
     position: relative;
     vertical-align: middle;
     width: 50%;
}
 .box h2:before {
     right: 0.5em;
     margin-left: -50%;
}
 .box h2:after {
     left: 0.5em;
     margin-right: -50%;
}
 .box .box-body {
     padding: 1em 2em;
     border: 3px double white;
}
 .box h2 + .box-body {
     border-top: 0;
}
/* when dark text is required */
 .text-dark .box-body, .box.text-dark h2:before, .box.text-dark h2:after {
     border-color: black;
}
 body, html {
     font-family: "lucida console", monospace;
     font-size: 1em;
}
 a {
     display: inline-block;
     background-color: darkgray;
     color: #000;
}
 .text-center {
     text-align: center;
}
 .text-right {
     text-align: right;
}
 pre {
     font-size: 1em;
     font-family: "lucida console", monospace;
     color: lightgrey;
     padding: 1em;
}
 .flex {
     display: -ms-flexbox;
     display: flex;
     flex-wrap: wrap;
}
 .flex .grow-2 {
     flex-grow: 4;
}
 .flex > * {
     box-sizing: border-box;
     flex: 1 1 auto;
}
 input, textarea, select, option, button, a.button {
     display: inline-block;
     font-family: "lucida console", monospace;
     font-size: 1.1em;
     padding: 0.3em 0.6em;
     height: 1.8em;
     background-color: lightgrey;
     color: #000;
     border: 0;
     border-radius: 0;
     box-shadow: 4px 4px 0px #000;
}
 button, a.button, input[type="button"], input[type="submit"] {
     height: auto;
     min-width: 15%;
     padding: 0.3em 1em;
}
 button:before, a.button:before, input[type="button"]:before, input[type="submit"]:before {
     content: "< ";
}
 button:after, a.button:after, input[type="button"]:after, input[type="submit"]:after {
     content: " >";
}
 button:active, a.button:active, input[type="button"]:active, input[type="submit"]:active {
     margin: 3px 0 0 3px;
     box-shadow: 1px 1px 0px #000;
}
 button.positive, a.button.positive, input[type="button"].positive, input[type="submit"].positive {
     background-color: limegreen;
}
 button.negative, a.button.negative, input[type="button"].negative, input[type="submit"].negative {
     background-color: darkred;
     color: white;
}
 button.primary, a.button.primary, input[type="button"].primary, input[type="submit"].primary {
     background-color: white;
}
 button.turquoise, a.button.turquoise, input[type="button"].turquoise, input[type="submit"].turquoise {
     background-color: turquoise;
}
 input {
     min-width: 35%;
}
 select {
     border: 0;
     border-radius: 0;
     -webkit-appearance: none;
}
 select {
     background: lightgrey url(data:image/svg+xml;
    base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyIiBoZWlnaHQ9IjMiPjxwYXRoIGQ9Im0gMCwxIDEsMiAxLC0yIHoiLz48L3N2Zz4=) no-repeat scroll 95% center/10px 15px;
     background-position: calc(100% - 10px) 42%;
     cursor: pointer;
     min-width: 35%;
     height: 1.8em;
     box-sizing: border-box;
     padding: .3em .45em;
     -moz-appearance: none;
     -webkit-appearance: none;
     appearance: none;
}
 textarea {
     width: 100%;
     min-height: 140px;
}
/* file input fields */
 label > input[type=file] {
     overflow: hidden;
}
 .form-control {
     margin: 0.5em 0;
}
 .progress-bar {
     border: 1px solid white;
     display: block;
     padding: 8px;
     height: 30px;
}
 .progress-bar span {
     display: block;
     height: 100%;
     background: yellow;
}
/* STRUCTURE */
 .wrapper {
     padding: 5px;
     max-width: 1010px;
     width: 95%;
     margin: 20px auto;
}
 header {
     padding: 0 15px;
}
 .columns {
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     margin: 5px 0;
}
 .column {
     flex: 1;
     margin: 2px;
     padding: 10px;
     &:first-child {
         margin-left: 0;
    }
     &:last-child {
         margin-right: 0;
    }
}
 footer {
     margin: 5px 0;
}
img {
	display:block;
	margin:auto;
	border: 1px solid #999;
}
.retro {
	min-width:55px;
}

 @media (min-width: 981px) {
     .lbl-toggle, .lbl-toggle2, .lbl-toggle3 {
         display: none;
    }
	img {
		max-width: 200px;
		max-height: 80%;
	}

	.img-popup img {
		max-width: 800px;
	}
	.frame{
		max-width:900px;
	}
}
 @media (min-width: 481px) and (max-width: 980px) {
.img-popup img {
	max-width: 800px;
}
     .columns .column {
         margin-bottom: 5px;
         flex-basis: 40%;
         &:nth-last-child(2) {
             margin-right: 0;
        }
         &:last-child {
             flex-basis: 100%;
             margin: 0;
        }
    }
     .lbl-toggle {
         display: none;
    }
	.banner {
	 width:100%;
	 border: 0px;
}
.content-inner img {
	width:100%;
	max-width:80%;
	max-height:80%;
}
}
@media (min-width: 320px) and (max-width: 480px) {
	
.content-inner img {
	width:100%;
	max-width:80%;
	max-height:80%;
}
     .columns .column {
         flex-basis: 100%;
         margin: 0 0 5px 0;
         //max-height: 40px;
         overflow: hidden;
         transition: max-height .25s ease-in-out;
    }
     .wrap-collabsible {
         margin-bottom: 1.2rem 0;
    }
     .lbl-toggle{
         display: block;
         font-weight: bold;
         font-family: monospace;
         font-size: 1.2rem;
         text-transform: uppercase;
         text-align: center;
         padding: 1rem;
         cursor: pointer;
         transition: all 0.25s ease-out;
		 color:yellow;
		 
    }
     .lbl-toggle:hover {
         //color: #7C5A0B;
    }
     .lbl-toggle::before {
         //content: ' ';
         display: inline-block;
         content: "[ + ]";
         vertical-align: middle;
         transform: translateY(-2px);
         transition: transform .2s ease-out;
    }
     .toggle:checked + .lbl-toggle::before {
         //transform: rotate(90deg) translateX(-3px);
         content: "[ - ]" 
    }
     .toggle:checked + .lbl-toggle + .collapsible-content {
         max-height: 5000px;
    }
     .toggle2:checked + .lbl-toggle::before {
         //transform: rotate(90deg) translateX(-3px);
         content: "[ - ]" 
    }
     .toggle2:checked + .lbl-toggle + .collapsible2-content {
         max-height: 5000px;
    }
     .toggle3:checked + .lbl-toggle::before {
         //transform: rotate(90deg) translateX(-3px);
         content: "[ - ]" 
    }
     .toggle3:checked + .lbl-toggle + .collapsible3-content {
         max-height: 5000px;
    }
     .collapsible-content .content-inner {
         padding: .5rem 1rem;
    }
     .collapsible-content {
         max-height: 0px;
         overflow: hidden;
         transition: max-height .25s ease-in-out;
    }
     .collapsible2-content .content-inner {
         padding: .5rem 1rem;
    }
     .collapsible2-content {
         max-height: 0px;
         overflow: hidden;
         transition: max-height .25s ease-in-out;
    }
     .collapsible3-content .content-inner {
         padding: .5rem 1rem;
    }
     .collapsible3-content {
         max-height: 0px;
         overflow: hidden;
         transition: max-height .25s ease-in-out;
    }
}

.content-inner span{
	display:block;
	text-align:center; 
	font-size:0.7em;
}
.banner {
	 width:100%;
	 max-width:800px;
	 min-width:250px;
     max-height:1000px;
	 border: 0px;
}
 h4{
     color:yellow 
}
 input[type='checkbox'] {
     display: none;
}
.fill{
	height: 100%;
}


.tooltip-toggle {
  cursor: pointer;
  position: relative;
}

 
  //Tooltip text container
  .tooltip-toggle:before {
    position: absolute;
    top: -80px;
    left: -80px;
    background-color: #2B222A;
    border-radius: 5px;
    color: #fff;
    content: attr(aria-label); //This pulls in the text from the element with the tooltip
    padding: 1rem;
    text-transform: none;
    transition: all 0.5s ease;
    width: 160px;
  }

  //Tooltip arrow
  .tooltip-toggle:after {
    position: absolute;
    top: -12px;
    left: 9px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #2B222A;
    content: " ";
    font-size: 0;
    line-height: 0;
    margin-left: -5px;
    width: 0;
  }
  
  //Setting up the transition
  .tooltip-toggle:before,
  .tooltip-toggle:after {
    color: #efefef;
    font-family: monospace;
    font-size: 16px;
    opacity: 0;
    pointer-events: none;
    text-align: center;
  }
  
  //Triggering the transition
  .tooltip-toggle:focus:before,
  .tooltip-toggle:focus:after,
  .tooltip-toggle:hover:before,
  .tooltip-toggle:hover:after {
    opacity: 1;
    transition: all 0.75s ease;
  }

 .container__img-holder {
  display: block;
  vertical-align: top;
  margin: 0 auto 5px;
  cursor: pointer;
}

.container .container__img-holder:nth-child(3n+1) {
  margin-left: 0;
}

.container__img-holder img {
  width: 100%;
  display: block;
}


/* Popup Styling */
.img-popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  z-index:30;
}

.frame:before{
	text-align:right;
	width:100%;
	margin-bottom:50px;
}

.frame{
	background: darkblue;
	padding: 0 0 30px 0;
	border: 3px double white;
	padding:15px;
	display: flex;
	flex-direction: column;
	z-index:40;
	}

.img-popup img {
  width: 100%;
}

.close-btn {
	width:30px;
	height:30px;
	display: flex;
	align-self: flex-end;
	justify-content: flex-end;
	flex-direction: row;
	cursor: pointer;
	font-family: "PerfectDOSVGA437";
	font-size: 1.5em;
	z-index:50;
}

.body-noscroll-class {
    overflow: hidden;
}

.opened {
  display: flex;
}

.opened img {

  border: none;
  animation: animatepopup 1s ease-in-out .8s;
  -webkit-animation: animatepopup .3s ease-in-out forwards;
}
h4{
	font-weight: normal;
}
.popover{
	display:none;
	position:absolute;
	padding: 0.5em 1em;
	background-color: grey;
	color: black;
	z-index:10;
}
.popover .innerpop
{
	padding: 1em 2em;
    border: 1px solid black;
}
.popover a {
	background-color: gray;
	font-weight: bold;
}