html, body, #iframeHolder {
top:0;
    background-color: rgb(238, 238, 237);
    margin: 0;
    padding: 0;
    font-family: Roboto, sans-serif;
}


body {
    overflow: hidden;
}


nav { 
overflow-x: auto;
//white-space: nowrap;
background-color: #333333;
margin: 0;
padding: 0;
width:100%;
}



.tablink{
  background-color: #e3e3e3;
  color: #878787;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-weight:bold;
  cursor: pointer;
  padding: 10px 15px;
  margin:0;
}

.tablink:hover {
color: #000;
}

.tablink.active {
background-color: #fff;
color: #ff0000;
}

.tab{
position:absolute;
background-color: #fff;
display: inline-block;
height: auto;
width: 100%;
padding: 10px 300px 10px 10px;
}


input { display: none; opacity: 0; visibility: hidden; }
input + label { display: inline-block }

input ~ .tab { display: none }
#tab1:hover ~ .tab.content1,
#tab2:hover ~ .tab.content2,
#tab3:hover ~ .tab.content3,
#tab4:hover ~ .tab.content4,
#tab5:hover ~ .tab.content5 { 
display: block; 
}


.tab.content1:hover,
.tab.content2:hover,
.tab.content3:hover,
.tab.content4:hover,
.tab.content5:hover,
.tab.content1:hover { 
display: block; 
}


.tab.content1:hover #tab1,
.tab.content2:hover,
.tab.content3:hover,
.tab.content4:hover,
.tab.content5:hover,
.tab.content1:hover { 
background-color: #fff; 
}





input + label {
background-color: #333333;
color: #878787;
border: none;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight:bold;
cursor: pointer;
padding: 10px 15px;
margin:0;
}

input:checked + label {
background-color: #fff;
color: #000;
}

input:hover + label {
color: #fff;
}

input:checked:hover + label {
color: #000;
}

button {
color: #000;
background-color: transparent;
border: none;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor: pointer;
width: 125px;
height: 125px;
word-wrap: break-word;
white-space: normal;
z-index:99999;
}

.notavailable img {
opacity:0.4;
}

.notavailable {
background-color: transparent;
color:#9c9c9c;
}

button img {
width: 100px;
height: auto;
}


button:hover > p, .active > p {
color: #ff0000;
}
/*
.active:after {
    content: '';
    position:absolute;
    top:165px;
    margin-left:-20px;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 25px solid rgb(238, 238, 237);
    clear: both;
}
  */

.notavailable:hover > p, .notavailable.active > p {
background-color: transparent;
color:#9c9c9c;
}


#logo{
background:url('logo.svg') no-repeat;
height: 100%;
width: 150px;
right: 20px;
position: absolute;
padding: 10px;
top: 0px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
z-index:0;
}