/*
             ___.....___
       ,..-.=--.-.       "".
     .{_..        `        ,. .
   .'     \      /        | ,'.\`.
  /        :   ;'          `____> \
 :         `. (           /       :
 |           `>\_         \      r | 
             /   \         `._   \ |  
 |          |      `          ;    |  
  :          \     /          `   ;   
   \          \.  '            ` /     
     `.        | /             .'     
        `      `/          . '
           `---'.....---''        _____       _______    
                 /"\             |  __ \   /\|__   __|/\ 
                |\./|            | |  | | /  \  | |  /  \
                |   |            | |  | |/ /\ \ | | / /\ \  
                |   |            | |__| / ____ \| |/ ____ \ 
                |>~<|            |_____/_/____\_\_/_/  __\_\
                |   |                 \ \    / /_   _|/ ____|   
             /'\|   |/'\..             \ \  / /  | | | (___     
         /~\|   |   |   | \             \ \/ /   | |  \___ \     
        |   =[@]=   |   |  \             \  /   _| |_ ____) |    
        |   |   |   |   |   \             \/   |_____|_____/     
        | ~   ~   ~   ~ |`   )
        |                   /
         \                 /
          \               /
           \    ____    /
            |--//''`\--|
            | (( +==)) |
            |--\_|_//--|
                                                       
  ____  ___ ____  _____   _____ ___   ____ _____ _____ _   _ _____ ____       
 |  _ \|_ _|  _ \| ____| |_   _/ _ \ / ___| ____|_   _| | | | ____|  _ \      
 | |_) || || | | |  _|     | || | | | |  _|  _|   | | | |_| |  _| | |_) |     
 |  _ < | || |_| | |___    | || |_| | |_| | |___  | | |  _  | |___|  _ <      
 |_| \_\___|____/|_____|   |_| \___/ \____|_____| |_| |_| |_|_____|_| \_\     
  ____ ___ _____   _____ ___   ____ _____ _____ _   _ _____ ____              
 |  _ \_ _| ____| |_   _/ _ \ / ___| ____|_   _| | | | ____|  _ \             
 | | | | ||  _|     | || | | | |  _|  _|   | | | |_| |  _| | |_) |            
 | |_| | || |___    | || |_| | |_| | |___  | | |  _  | |___|  _ <             
 |____/___|_____|   |_| \___/ \____|_____| |_| |_| |_|_____|_| \_\            
  ____    _  _____  _     __     _____ ____    _  _     _     ___ _____ _____ 
 |  _ \  / \|_   _|/ \    \ \   / /_ _/ ___|  | || |   | |   |_ _|  ___| ____|
 | | | |/ _ \ | | / _ \    \ \ / / | |\___ \  | || |_  | |    | || |_  |  _|  
 | |_| / ___ \| |/ ___ \    \ V /  | | ___) | |__   _| | |___ | ||  _| | |___ 
 |____/_/   \_\_/_/   \_\    \_/  |___|____/     |_|   |_____|___|_|   |_____|
                                                                              

*/



body.no-app {
  background: black;
  font-family: 'Roboto Mono', 'Courier New', 'courier', monospace;
  overflow-x: hidden;

}
::selection { background: #ff9900;  }
::-moz-selection { background: #ff9900;  }

.intro {
  width: 100%;
  max-width: 800px;
  min-height: 275px;
  margin: 30px auto;
  color: white;
  font-family: 'Roboto Mono', 'Courier New', 'courier', monospace;
  font-size: 27px;
  position: relative;
  z-index: 10;
  padding-left: 5px;
  padding-right: 5px;
}

.intro span{
  background: rgba(0,0,0,1);
}

.top-banner{
  z-index: 100;
  position: relative;
}


#laptop-container{
  /*transform: scale(.6);*/
  font-size: 8px;
  color: white;
  background: rgba(0,0,0,1);
  z-index: 9;
  max-width: 450px;
  margin: 0px auto;
  font-weight: bold;
  position: relative;
  overflow: visible;
}

pre{
  overflow: visible;
}


.intro-blink{
    opacity: 1;
    -webkit-animation: blink 1.7s infinite;
    -moz-animation: blink 1.7s infinite;
    animation: blink 1.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

#foot{
  position: relative;
  z-index: 101;
  font-family: 'HaasText', 'Helvetica', sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: #dddddd;
  border-top: 0px;
  height: auto;
  float: left;

}

#foot a {
  font-family: 'HaasTextBold', sans-serif;
  color: #fff;
}
#company-graph > div:last-child {
  padding-bottom: 40px;
  border-bottom: 2px dashed black;
}


#cover{
  position: relative;
  max-width: 1000px;
  margin: 0px auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

pre{
  font-family: 'Roboto Mono', 'Courier New', 'courier', monospace;
}

.logo{
  position: absolute;
  overflow: hidden;
  transform: scale(.4);
  color: white;
}

#trump-container{
  position: absolute;
  top: 450px;
  left: 550px;
  color: white;

  transform: scale(.7);
}

.description {
  margin-bottom: 20px;
}

#container {
  position: relative;
  overflow: auto;
  max-width: 1280px;
  margin: 0px auto;
}
#left.graph-scroll-fixed {
  position: fixed;
  top: 0px;
}
#left.graph-scroll-below {
  /*position: absolute;*/
  /*bottom: 0px;*/
  position: fixed;
  top: 0px;

}
#left {
  background: black;
  color: white;
  width: 400px;
  float: left;
  padding: 30px;
  /*position: fixed;*/
  
  z-index: 2;
}
#right {
  width: calc(100% - 400px);
  float: left;
  padding: 30px;
  overflow: hidden;
  background: black;
  z-index: 1;
  position: relative;
}
.graph-scroll-fixed #right, .graph-scroll-below #right {
  margin-left: 400px;
}


@media only screen and (min-width: 1230px){
  #right {
    width: calc(100% - 600px);
  }
  .graph-scroll-fixed #right, .graph-scroll-below #right {
      margin-left: 600px;
  }

  #left {
    background: black;
    color: white;
    width: 600px;
  }

}




#left-top {
  z-index: 100;
  background: black;
  position: relative;
  padding-top: 111px;
  margin-top: -111px;
}
#title {
  font-family: 'HaasDisplayBold';
  font-size: 25px;
}
#to-watch {
  /*font-family: 'HaasDisplayBold';*/
  font-size: 25px;
}
.divider {
  height: 1em;
  overflow: hidden;
  font-size: 20px;
  margin-bottom: 20px;
  opacity: 1 !important;
}
#company-text {
  margin-left: 15px;
  color: white;
}
#company-text > div.read {
  color: grey;
}
#company-text > div {
  padding-bottom: 20px;
  cursor: pointer;
}
#company-text .arrow {
  position: relative;
  width: 0px;
  left: -15px;
  display: inline-block;
}
#company-text .name {
  padding-right: .4em;
  font-family: 'Roboto Mono', 'Courier New', 'courier', monospace;
}
#company-text .sentence {
  font-family: 'Roboto Mono', 'Courier New', 'courier', monospace;
}
#company-text div.active .arrow {
  color: white;
}
#company-text div.active .sentence, #company-text div.active .name {
  color: black;
  background: white;
}
#company-graph > div {
  opacity: .4;
  margin-left: -20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  float: left;
  max-width: 640px;
  background: white;
  margin-bottom: 20px;
}
#company-graph img {
  opacity: .2;
}
#company-graph > div.graph-scroll-active {
  opacity: 1;
}
#company-graph > div.graph-scroll-active img {
  opacity: 1;
}


#company-graph > div.graph-scroll-active{
  filter: invert(100%);
  -webkit-filter: invert(100%);
  -ms-filter: invert(100%);
  background: white !important;
  color: black !important;
}

#full-header a, #full-header #header-sharing{
  filter: grayscale(100%) invert(100%);
  -webkit-filter: grayscale(100%) invert(100%);
  -ms-filter: grayscale(100%) invert(100%);
}
#full-header{
  background: white !important;
}
#full-header.sticky-header.stuck{
  background: black !important;
}

.bannerad{
  filter: none;
  -webkit-filter: none;
  -ms-filter: none;

}

/*ie9+ (????)*/
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
  #full-header{
    background: #2800D7 !important;
  }
  #full-header.sticky-header.stuck{
    background: white !important;
  }
}



.col-container{
  border: dashed 1px black;
  padding: 10px;
  margin-bottom: 20px;
  vertical-align: top;

}

.col-title{
  vertical-align: top;
  padding-bottom: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  border-bottom: dashed 1px black;
}

#company-graph .col{
  font-size: 14px;
}

#company-graph > div {
  transition: all 0s linear;
  /*transition: color 1s linear;*/
}

#company-graph > div.graph-scroll-active {
  transition: all .3s linear;
}
#company-graph .industry {
  text-transform: uppercase;
}
#company-graph .name {
  font-family: 'Roboto Mono', 'Courier New', 'courier', monospace;
  font-size: 25px;
  padding-bottom: 20px;
}
#company-graph img {
  /*margin-left: -15px;*/
}




.sentence.mobile{
  display: none;
}




@media only screen and (max-width: 900px){
  #left{
  display: none;
  }

  .intro{
    /*margin-top: 200px;*/
    font-size: 22px;
  }

  #right{
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }
  
  .graph-scroll-fixed  #right{
    margin-left: 0px;
  }


  #company-graph >div{
    margin-left: 0px;
    margin-bottom: 40px;
  }  

  #company-graph >div > img{
    margin-top: 20px;
  }

  .description{
    margin-top: 20px;
    margin-bottom: 0px;
  }

  .col-container{
    margin-top: 20px;
    margin-bottom: 0px;
  }

  .sentence.mobile{
    display: none;
    color: white;
    margin-top: -10px;
    margin-left: -20px;
    width: calc(100% + 40px);
    padding: 20px;
    background: black;
  }

  .name{
    margin-top: 20px;
    background: black;
    color: white;
    padding: 20px;
    margin-top: 20px;
    margin-left: -20px;
    width: calc(100% + 40px);
    /*display: none;*/
  }

  #cover{
    overflow: hidden;
  }
}

@media only screen and (max-width: 540px){
  .col-container{
    display: none;
  }

}

a{
  color: white;
}