@font-face {
  font-family: SuisseIntl-Medium;
  src: url(/fonts/SuisseIntl-Medium-WebM.woff);
src: url(/fonts/SuisseIntl-Medium-WebS.woff);
    src: url(/fonts/SuisseIntl-Medium-WebXL.woff);
      src: url(/fonts/SuisseIntl-Medium-WebM.woff2);
src: url(/fonts/SuisseIntl-Medium-WebS.woff2);
    src: url(/fonts/SuisseIntl-Medium-WebXL.woff2); 
}

html {
    background-color: #FAFAFA;
    cursor: none;
}

body {
    margin: 0;
    padding: 0;
    font-size: 20px; 
    line-height: 24px;
    font-family: "SuisseIntl-Medium", sans-serif;
    height: 500px;
    letter-spacing: 0.01em;
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

/*dots*/

#dots {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 0;
    margin: 0;
}

/*structure*/

.black-background {
    background-color: #141414;
    color: white;
}

.black-background a {
    color: white;
}

#container{	
	height: 100%;
    display: block;
	margin: 20px;
    padding: 0;
}

.menu-container {
    padding: 24px 24px 120px 24px;
    margin: 0;
}

.item {width:100%;
    padding: 0 0 1.5% 0;
    margin: 0;
}

.item-left {width:49%;
    float: left;
    padding: 0 0 1.5% 0;
    margin: 0;
}

.item-right {width:49%;
    float: right;
    padding: 0 0 1.5% 0;
    margin: 0;
}

.item-mid {width: 80%;
    float: right;
    padding: 0 0 1.5% 0;
    margin: 0;
}

.container {
  padding: 12px 24px 86px 24px;
    height: 42px;
    display: flex;
  flex-wrap: wrap;
      -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Not implemented yet */
    -o-user-select: none;
    user-select: none;   
}

.footer-container {
  padding: 50px 0 120px 0;
    width: 100%;
    display: flex;
  flex-wrap: wrap;
      -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Not implemented yet */
    -o-user-select: none;
    user-select: none;   
}

.column1 {
  flex-basis: 30%;
  flex-grow: 1;
}

.column2 {
  flex-basis: 40%;
  flex-grow: 1;
}

.column3 {
  flex-basis:15%;
  flex-grow: 1;
    text-align: right;
}

.column4 {
  flex-basis: 10%;
  flex-grow: 1;
    text-align: right;
}

.column5 {
     flex-basis: 50%;
  flex-grow: 1; 
}

.column6 {
     flex-basis: 30%;
  flex-grow: 1; 
}


/*typography*/

#creditText {
    font-size: 13px; 
    display: none;
    margin: 0 0 24px 0;
    padding: 0;
}

.active {
    text-decoration: underline;
}

/*elements*/

#myBtn {
    margin: 0;
    padding: 0;
}

#myBtn:hover {
  text-decoration: underline;
}

img {
    width: 100%;
}

.nav-item img {

}

/*
.nav-item:hover {
    text-decoration: underline;
    	opacity: .8;
    	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
*/


#more {display: none;
padding: 0;
margin: 0;}


ul {
    padding: 0 0 0 40px;
    margin: 0;
}

li {
    list-style: none;
}

p {
    padding: 0 0 24px 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: #000;
}

a:hover {
    cursor: none;
    text-decoration: underline;
    opacity: .8;
        	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

button {
    color: #fff; 
    text-decoration: none;
    padding: 0;
    margin: 0;
    font-size: 20px; 
    line-height: 24px;
    border: none;
    background: none;
    font-family: "SuisseIntl-Medium", sans-serif;
    cursor: none;

}

#t {
    color: black;
}

.caption {
    padding: 6px 0 30px 0;
}

.rerun{
    padding: 0;
    margin: 0 12px 0 0;
    float: left;
    font-style: normal;
/*    cursor:pointer;*/
}

.rerun:hover{
    padding: 0;
    margin: 0 12px 0 0;
    font-style: normal;
      text-decoration: underline;
/*    cursor:pointer;*/
}

#cursor {
  position: fixed;
  z-index: 9999;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #0000FF;
  right: 120px;
    top: 120px;
}


@media only screen and (max-width: 500px) {
  
body {
    margin: 0;
    padding: 0;
    font-size: 13px; 
    line-height: 17px;
    font-family: "SuisseIntl-Medium", sans-serif;
    height: 500px;
    letter-spacing: 0.01em;
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
    
 .container{	
	margin: 10px;
    padding: 0;
}
    
    .menu-container {
    padding: 10px 10px 30px 10px;
    margin: 0;
}


.item {width:100%;
    padding: 0 0 2% 0;
    margin: 0;
}

.item-left {width:48.5%;
    float: left;
    padding: 0 0 2% 0;
    margin: 0;
}

.item-right {width:48.5%;
    float: right;
    padding: 0 0 2% 0;
    margin: 0;
}
    
#cursor {
  position: fixed;
  z-index: 9999;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #0000FF;
  right: 100px;
    top: 100px;
}
    
    #dots {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 0;
    margin: 0;
}
    
    a {
/*    text-decoration: underline;*/
    color: #000;
}

a:hover {
    color: #0000FF;
    cursor: none;
    text-decoration: underline;
}
    
    #myBtn {
    margin: 0;
    padding: 0;
           font-size: 13px; 
    line-height: 17px;
}
    
    .caption {
    padding: 3px 0 20px 0;
}
    
.rerun{
    padding: 0;
    margin: 0 12px 0 0;
    float: left;
    font-style: normal;
/*    cursor:pointer;*/
}

.rerun:hover{
    padding: 0;
    margin: 0 12px 0 0;
    color: #0000FF;
    font-style: normal;
/*    cursor:pointer;*/
}
    
  .column1, .column2, .column3 {
/*    flex-basis: 100%;*/
      padding: 0 0 12px 0 
  }
     
     .column3 {
         text-align: right;  
     } 
}