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

#bar-top {

  display: none;
}

#bar-bottom {

  display: none;
}

}

@media only screen and (min-width: 765px) {

.vertical-align {

  display: none;
}

} 


#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight: 300;
color: black;
/* End Optional */

/* Start Required - Do Not Edit */
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;}

* { margin: 0; 	padding: 0; }
		body { font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-size: 24px; line-height: 30px; width: 100%; }
		a { color: #000; }
		a:hover { color: #000; }
		#content { width:25%; margin:0; padding: 1vw; }
		#content p { font-size: 24px; line-height: 30px; padding: 0; }
		h1, h2 { display: inline; font-weight: normal; font-size: 24px; line-height: 30px; color: #000; }
		
		#bar-top {
      width: 100%;
      top: 0;
      left: 0;
      overflow: hidden;
      white-space: nowrap;
      box-sizing: border-box;
      animation: marquee 30s linear infinite;
      font-size: 30px;

    }

    #bar-top h1{
      font-weight: 300;
      }


    
		#bar-bottom {
  		position: fixed;
      width: 100%;
      bottom: 0;
      left: 0;
      padding-left: 30px;
      padding-bottom: 30px;
      overflow: hidden;
      white-space: nowrap;

    }

      #bar-bottom  h1 {
      color: black;
      letter-spacing: 6px;
      font-weight: 300;

      
    }

    #bar-right {
      padding: 0px;
      display:block;
      position:absolute;
      top:0;
      left:0;
      bottom:0;
      width:auto;
      height: 5vw; 
      overflow:hidden;
      white-space:nowrap;
      -webkit-transform-origin:0 0%;
      -webkit-transform:rotate(-90deg) translate(-50%, -50%);
      animation: marquee 50s linear infinite;
    }
    
    @keyframes marquee {
        0%   { text-indent: -100vw }
        100% { text-indent: -200vw }
    }

    #bar-bottom-mob {
      position: fixed;
      width: 100%;
      bottom: 0;
      left: 0;
      padding-left: 30px;
      padding-bottom: 30px;
      overflow: hidden;
      white-space: nowrap;

    }

      #bar-bottom-mob  h1 {
      color: black;
      letter-spacing: 20px;
      font-weight: 300;
      
    }

    #bar-bottom-mob a {

      text-decoration: none;
     font-weight: 300;
    }
    
    
    
#sidebar-small {
    width: 30px;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}

#open_nav {
    white-space:nowrap;
    display: block;
    padding-left: 0px;
    padding-right: 0px;
    position: absolute;
    bottom: 0px;
    background: yellow;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: 15px;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: 15px;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: 15px;
    -o-transform: rotate(-90deg);
    -o-transform-origin: 15px;
    transform: rotate(-90deg);
    transform-origin: 15px;
}

#canvas {
  border:1px solid #000;
}

		
img {

max-width: 100%;

}


@-webkit-keyframes wobble  {
  0%  { -webkit-transform:  translateX(200px); }
  100%  { -webkit-transform:  translateX(200px); }
}
.wobble:hover { 

  -webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
    animation-iteration-count: 3;
}

 .padding {

  padding-bottom: 90px;

  }
 
/*
 .blink:hover {
    -webkit-animation: blink .75s linear infinite;
    -moz-animation: blink .75s linear infinite;
    -ms-animation: blink .75s linear infinite;
    -o-animation: blink .75s linear infinite;
    animation: blink .75s linear infinite;
}

@-webkit-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@-moz-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@-ms-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@-o-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

*/

.third-degree {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
    
    display: inline-block;
    position: relative;
    
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9986295347545738, M12=-0.05233595624294383, M21=0.05233595624294383, M22=0.9986295347545738, sizingMethod='auto expand');
    zoom: 1;
}

a {

  text-decoration::none;
  font-weight: 300;
}

.vertical-align {    
  -webkit-transform: rotate(90deg); 
     -moz-transform: rotate(90deg); 
      -ms-transform: rotate(90deg); 
       -o-transform: rotate(90deg); 
          transform: rotate(90deg);
            color: #000;
            font-size: 24px;
            padding-top: 50px; 
            padding-left: 300px;
            margin: auto;
            width: 100%;              
                  
position: fixed; 
letter-spacing: 15px;   
}

.vertical-align a  {   

  text-decoration: none;
}