SI7/style.css

@font-face {
  font-family:  "Arial";
  src: url("font/arial.ttf");
  font-weight: 300;
  font-style: normal;}

  @font-face {
    font-family:  "Arial Narrow";
    src: url("font/Arial Narrow.ttf");
    font-weight: 300;
    font-style: normal;}

body {
  font-size: calc(8px + 0.7vw);
  font-family: Arial, Helvetica, sans-serif;
  scrollbar-width: none;
}

a{
  text-decoration: none;
  color: black;
  display: inline;
  clear: none;
}

a:hover, a.get:hover, a.menus:hover{
  text-decoration: none;
  color: #972fe8;
}

a:visited{
  text-decoration: none;
  color: black;
}

.back{
  margin-left: 30vw;
  width: 70vw;
  height: 94vh;
  position: fixed;
  background-color: #dbdcde;
}

#topdots{
  position: fixed;
  top: 0px;
  height: 4vh;
  width: 30vw;
  background-color: #dbdcde;
}

#topdots img{
  width: 80%;
  margin-left: 10%;
  margin-top: 1vh;
}

#bottomdots{
  position: fixed;
  bottom: 6vh;
  height: 4vh;
  width: 30vw;
  background-color: #dbdcde;
}

#bottomdots img{
  width: 80%;
  margin-left: 10%;
}

.left{
  position: fixed;
  margin-top: 4vh;
  height: 86vh;
  width: 30vw;
  background-color: #dbdcde;
}

#leftheader{
  font-family: "Arial Narrow", Helvetica, sans-serif;
  width: 100%;
  text-align: center;
  font-size: calc(6px + 0.5vw);
}

.gallerywrapper{
  margin-top: 4vh;
  margin-left: 10%;
  width: 80%;
  text-align: center;
}

.gallerywrapper  img{
  width: 100%;
}

  ::-webkit-scrollbar {
    display: none;
}

footer {
  background-color: #972fe8;
  color: white;
  font-size: calc(6px + 0.7vw);
  font-style: italic;
  position: fixed;
  bottom: 0;
  left: 0
  width: 100vw;
  height: 6vh;
}

    .box{
      text-align: center;
      width: 100vw;
      height: 6vh;
      line-height: 6vh;
    }

video{
  width: 100%;
}

main{
  position: fixed;
  left: 30vw;
  margin-top: 4vh;
  margin-left: 3vw;
  height: 74vh;
  width: 64vw;
  overflow-y: scroll;
  text-align: left;
}

.right{
  position: fixed;
  top: 0;
  margin-top: 4vh;
  width: 70vw;
  left: 30vw;
  text-align: center;
}

.headeright{
  font-family: "Arial", Helvetica, sans-serif;
  width: 70vw;
  font-size: calc(6px + 0.5vw);
}

.block{
  background-color: #dbdcde;
}

.text{
  line-height: 115%;
  padding-top: 8vh;
  margin-left: 2vw;
  margin-right: 15vw;
}

#bo{
  width: 30vw;
}

h2{
  padding-bottom: 3vh;
  padding-top: 1vh;
  text-transform: uppercase;
  color: #972fe8;
}

#colophon2{
  padding-bottom: 5vh;
}

/* MOUSE OUTER CIRCLE!!!!!!!!!!!!! */
      #outerCircleText {
      font-style: italic;
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif;
      color: #000;
      position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;
      }

      #outerCircleText div {position: relative;}

      #outerCircleText div div {
      	position: absolute;
      	top: 0;
      	left: 0;
      	text-align: center;
      }
/* MOUSE OUTER CIRCLE!!!!!!!!!!!!! */



/* Slideshow container */
.slideshow-container {
  margin-top: 4vh;
  margin-left: 10%;
  width: 80%;
  text-align: center;
}

/* Position the "next button" to the right */
.next {
  width: 12vw;
  text-align: right;
  font-family: "Arial Narrow", Helvetica, sans-serif;
  font-size: calc(6px + 0.5vw);
  position: fixed;
  bottom: 15vh;
  cursor: pointer;

}

.prev {
  text-align: left;
  font-family: "Arial Narrow", Helvetica, sans-serif;
  font-size: calc(6px + 0.5vw);
  position: fixed;
  bottom: 15vh;;
  left: 3vw;
  cursor: pointer;
}

.next:hover, .prev:hover{
  text-decoration: none;
  color: #972fe8;
}

#phone{
  display: none;
}

@media screen and (max-width: 635px) {

  #desktop{
    display: none;
  }

  #phone{
    display:block;
  }


body{
  background-color: #dbdcde;
  overflow-x: hidden;
}

.back{
display: none;
width: 100%;
overflow: hidden;
}

.left{
position: static;
width: 100vw;
height: 60vh;
overflow:hidden;
  margin-top: 2vh;
}


.text{
  margin-left: 9vw;
  margin-right: 7vw;
}

#colophon2{
  padding-bottom: 2vh;
}


main{
position: static;
width: 100%;
overflow: auto;
margin-top: 65vh;
overflow:hidden;
height: auto;
margin-left: -30vw;
}

.right{
position: absolute;
width: 100vw;
margin-top: 0vh;
}

.headeright{
  display: none;
}

.block{
  background-color: #dbdcde;
}


#leftheader{
  position: static;
  top: 3vh;
}

  /* Position the "next button" to the right */
.next {
display: none;
}

.prev {
display: none;
}

#topdots{
  display: none;
}


#bottomdots{
  display: none;
}

footer {
  font-size: calc(7px + 0.9vw);
  height: 4vh;
}
    .box{
      height: 4vh;
      line-height: 4vh;
    }

#bo{
  width: 40vw;
  padding-bottom: 20vw;
}

}