/* 1102 x 915 */
@media only screen and (min-width: 1060px) {
  html, body {
    margin: 0; 
    height: 100%; 
    overflow: hidden;
  }
  
  body{
    background-color: white; 
  }
  
  .SVGcontainer{
    z-index:0;
    position: absolute;
    bottom: 0;
    right: 0;
  }
  
  .SVGcontainer svg{
    height: 160%;
  }

  .logo{
    display: none;
  }

  .logo1{
    display: none;
  }
  
  @font-face {
      font-family: museo;
      src: url(museo.otf);
    }
  
  .container {
    position:relative;
    height: inherit;
  }
  
  .overlay {
      position:absolute;
      top: -35px;
      left: 30px;
      z-index: 1;
  }
  
  .small{
      font-size: 20px;
      margin-top: -45px;
  }
  
  a{
      text-decoration: none;
  }
  
  .collapsible {
      font-family: museo;
      font-size: 60px;
      background-color: transparent;
      color: #00C1F2;
      cursor: pointer;
      /* padding: 18px; */
      padding-right: 500px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      /* font-size: 15px; */
    }
    
    .active, .collapsible:hover {
      background-color: transparent;
    }
    
    .content {
      font-family: Verdana, Geneva, sans-serif;
      padding: 0 5px;
      display: none;
      overflow: hidden;
      background-color: transparent;
      width: 40%;
      color: #00C1F2;
      height: 400px;
      overflow: scroll;
    }
  
  .content::-webkit-scrollbar {
      -webkit-appearance: none;
  }
  
  .content::-webkit-scrollbar:vertical {
      width: 11px;
  }
  
  .content::-webkit-scrollbar:horizontal {
      height: 11px;
  }
  
  .content::-webkit-scrollbar-thumb {
      border-radius: 8px;
      border: 2px solid white; /* should match background, can't be transparent */
      background-color: #00C1F2;
  }
  
    button:hover{
        text-decoration: underline;
    }
  
    #right { display:none; }
  
    .button{
      text-decoration: underline;
    }
  
    #right{
      font-size: 20px;
    }
  
    #left{
      font-size: 20px;
    }
  
    #toggle{
      font-size: 20px;
      cursor: pointer;
      font-family: museo;
    }
  
  .st02 {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 10s linear forwards;
      animation-delay:0.6s;
      animation-timing-function: ease-in;
      } 
  
  .st01 {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: dash 10s linear forwards;
        animation-delay:0.3s;
        animation-timing-function: ease-in;
        }
  
  .st03 {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: dash 10s linear forwards;
        animation-timing-function: ease-in;
        } 
  
  @keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }
}

@media only screen and (max-width:1059px) and (min-width: 784px) {
  html, body {
    margin: 0; 
    height: 100%; 
    overflow: hidden;
  }
  
  body{
    background-color: white; 
  }
  
  .SVGcontainer{
    z-index:0;
    position: absolute;
    bottom: 0;
    right: 0;
  }
  
  .SVGcontainer svg{
    height: 100%;
  }

  .logo{
    display: none;
  }
  
  .logo1{
    display: none;
  }

  @font-face {
      font-family: museo;
      src: url(museo.otf);
    }
  
  .container {
    position:relative;
    height: inherit;
  }
  
  .overlay {
      position:absolute;
      top: -35px;
      left: 30px;
      z-index: 1;
  }
  
  .small{
      font-size: 20px;
      margin-top: -45px;
  }
  
  a{
      text-decoration: none;
  }
  
  .collapsible {
      font-family: museo;
      font-size: 60px;
      background-color: transparent;
      color: #00C1F2;
      cursor: pointer;
      /* padding: 18px; */
      /* padding-right: 500px; */
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      /* font-size: 15px; */
    }
    
    .active, .collapsible:hover {
      background-color: transparent;
    }
    
    .content {
      font-family: Verdana, Geneva, sans-serif;
      padding: 0 5px;
      display: none;
      overflow: hidden;
      background-color: transparent;
      width: 50%;
      color: #00C1F2;
      height: 400px;
      overflow: scroll;
    }
  
  .content::-webkit-scrollbar {
      -webkit-appearance: none;
  }
  
  .content::-webkit-scrollbar:vertical {
      width: 11px;
  }
  
  .content::-webkit-scrollbar:horizontal {
      height: 11px;
  }
  
  .content::-webkit-scrollbar-thumb {
      border-radius: 8px;
      border: 2px solid white; /* should match background, can't be transparent */
      background-color: #00C1F2;
  }
  
    button:hover{
        text-decoration: underline;
    }
  
    #right { display:none; }
  
    .button{
      text-decoration: underline;
    }
  
    #right{
      font-size: 20px;
    }
  
    #left{
      font-size: 20px;
    }
  
    #toggle{
      font-size: 20px;
      cursor: pointer;
      font-family: museo;
    }
  
  .st02 {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 10s linear forwards;
      animation-delay:0.6s;
      animation-timing-function: ease-in;
      } 
  
  .st01 {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: dash 10s linear forwards;
        animation-delay:0.3s;
        animation-timing-function: ease-in;
        }
  
  .st03 {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: dash 10s linear forwards;
        animation-timing-function: ease-in;
        } 
  
  @keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }
}

@media only screen and (max-width: 783px) {
  html, body {
    margin: 0;
    overflow: scroll;
  }

  svg{
    display: none; 
  }

  .logo{
    display: none; 
  }

  .logo1{
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 37px;

    width: -moz-calc(100vw - 74px);
    width: -webkit-calc(100vw - 74px);
    width: -o-calc(100vw - 74px);
    width: calc(100vw - 74px);

    height: auto;
    position: relative;
    z-index: 0;
  }
  
  body{
    background-color: white; 
  }
  
  @font-face {
      font-family: museo;
      src: url(museo.otf);
    }
  
  .container {
    position:relative;
    height: inherit;
  }
  
  .overlay {
      position:absolute;
      top: -35px;
      left: 30px;
      z-index: 1;
      margin-right: 30px;
  }
  
  .small{
      font-size: 40px;
      margin-top: -45px;
  }
  
  a{
      text-decoration: none;
  }
  
  .collapsible {
      font-family: museo;
      font-size: 80px;
      background-color: transparent;
      color: #00C1F2;
      cursor: pointer;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
    }
    
    .active, .collapsible:hover {
      background-color: transparent;
    }
    
    .content {
      font-family: Verdana, Geneva, sans-serif;
      padding: 0 5px;
      display: none;
      margin-right: 5px;
      background-color: transparent;
      width: 100%;
      height: 100%;
      color: #00C1F2;
      overflow: hidden;
    }
  
  .content::-webkit-scrollbar {
      -webkit-appearance: none;
  }
  
  .content::-webkit-scrollbar:vertical {
      width: 11px;
  }
  
  .content::-webkit-scrollbar:horizontal {
      height: 11px;
  }
  
  .content::-webkit-scrollbar-thumb {
      border-radius: 8px;
      border: 2px solid white;
      background-color: #00C1F2;
  }
  
    button:hover{
        text-decoration: underline;
    }
  
    #right { display:none; }
  
    .button{
      text-decoration: underline;
    }
  
    #right{
      font-size: 40px;
    }
  
    #left{
      font-size: 40px;
    }
  
    #toggle{
      font-size: 40px;
      cursor: pointer;
      font-family: museo;
    }
  
  .st02 {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 10s linear forwards;
      animation-delay:0.6s;
      animation-timing-function: ease-in;
      } 
  
  .st01 {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: dash 10s linear forwards;
        animation-delay:0.3s;
        animation-timing-function: ease-in;
        }
  
  .st03 {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: dash 10s linear forwards;
        animation-timing-function: ease-in;
        } 
  
  @keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }
}

@media (orientation: portrait) {
  html, body {
    margin: 0; 
    /* height: 100%; 
    overflow: hidden; */
  }

  svg{
    display: none; 
  }

  .logo1{
    display: none; 
  }

  .logo{
    display: inline-block;
    padding-left: 37px;
    padding-right: 37px;
    bottom: 37px;

    /* Firefox */
    width: -moz-calc(100vw - 74px);
    /* WebKit */
    width: -webkit-calc(100vw - 74px);
    /* Opera */
    width: -o-calc(100vw - 74px);
    /* Standard */
    width: calc(100vw - 74px);

    height: auto;
    position: absolute;
  }
  
  body{
    background-color: white; 
  }
  
  @font-face {
      font-family: museo;
      src: url(museo.otf);
    }
  
  .container {
    position:relative;
    height: inherit;
  }
  
  .overlay {
      position:absolute;
      top: -35px;
      left: 30px;
      z-index: 1;
  }
  
  .small{
      font-size: 40px;
      margin-top: -45px;
  }
  
  a{
      text-decoration: none;
  }
  
  .collapsible {
      font-family: museo;
      font-size: 80px;
      background-color: transparent;
      color: #00C1F2;
      cursor: pointer;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
    }
    
    .active, .collapsible:hover {
      background-color: transparent;
    }
    
    .content {
      font-family: Verdana, Geneva, sans-serif;
      padding: 0 5px;
      display: none;
      margin-right: 5px;
      background-color: transparent;
      width: 100%;
      height: 900px;
      color: #00C1F2;
      overflow: scroll;
    }
  
  .content::-webkit-scrollbar {
      -webkit-appearance: none;
  }
  
  .content::-webkit-scrollbar:vertical {
      width: 11px;
  }
  
  .content::-webkit-scrollbar:horizontal {
      height: 11px;
  }
  
  .content::-webkit-scrollbar-thumb {
      border-radius: 8px;
      border: 2px solid white;
      background-color: #00C1F2;
  }
  
    button:hover{
        text-decoration: underline;
    }
  
    #right { display:none; }
  
    .button{
      text-decoration: underline;
    }
  
    #right{
      font-size: 40px;
    }
  
    #left{
      font-size: 40px;
    }
  
    #toggle{
      font-size: 40px;
      cursor: pointer;
      font-family: museo;
    }
  
  .st02 {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 10s linear forwards;
      animation-delay:0.6s;
      animation-timing-function: ease-in;
      } 
  
  .st01 {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: dash 10s linear forwards;
        animation-delay:0.3s;
        animation-timing-function: ease-in;
        }
  
  .st03 {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: dash 10s linear forwards;
        animation-timing-function: ease-in;
        } 
  
  @keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }
}