body,html {
  background: url(../img/background.png) no-repeat top center fixed;
  background-size: cover;
  font-family: 'Montserrat', sans-serif;
  padding:0;
  margin:0;
}

* {
  box-sizing: border-box;
}

sup { vertical-align: top; position: relative; top: -0.3em; font-size: 0.7em; font-weight:bold; }

#inforotate { 
  display: none;
  z-index:2000;
  background-color: #3ac3d7;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  color:white;
  text-align:center;
  padding-top:100px;
  font-size:24px;
  font-weight:800; 
}

/* SOME BASIC ELEMENTS FOR POSITIONING */

.tableholder {
  border-spacing: 0px;
  border-collapse: separate;
  width:100%;
}

.whitebg {
  background-color:white;
}

.tableholder td {
  padding:0px;
}

.container {
  width:100%;
  max-width:1200px;
  padding:0px 20px;
  position:relative;
}

p {
  margin-top:10px;
}

p.small {
  font-size:11px;
}

/* THE PURPLE HEADBLOCK */

#headblock {
  position:absolute;
  background: url(../img/header_box.png) no-repeat left top;
  left:0px;
  top:0px;
  width:402px;
  height:125px;
  padding: 13px 75px 17px 20px;
}

#headblock_title {
  color:white;
  text-transform:uppercase;
  font-weight:800;
  font-size:24px;
}

#headblock_body {
  color:white;
  text-transform:uppercase;
  font-weight:500;
  font-size:16px;
  line-height:23px;
}

/* THE INTROBIT */

#introtable {
  margin:155px 0 30px 0; 
}

#introbox {
  width:51%;
  padding:0 2% 40px 0;
  vertical-align:top;
}

#introtitle {
  color:white;
  text-transform:uppercase;
  font-weight:800;
  font-size:2vw;
}

#introbody {
  color:black;
  font-size:1.5vw;
  line-height:2vw;
  padding-top:0;
  font-weight:500;
  text-align:justify; 
}

#factboxcell {
  width:49%;
  vertical-align:top;
  padding-top:6px;
}

#factbox {
  background-color: #3ac3d7;
  width:100%;
  padding:3vw;
  vertical-align:top;
  border-radius:3vw 3vw 3vw 0;
}

#factboxtitle {
  background: url(../img/history-clock-button.png) no-repeat left top;
  background-size: contain;
  color:white;
  text-transform:uppercase;
  font-weight:800;
  font-size:2vw;
  line-height: 4vw;
  height: 4vw;
  padding-left: 6vw;
  margin-left: 1vw;
}

#factboxbody {
  color:white;
  font-size:1.5vw;
  line-height:2vw;
  padding: 0;
  font-weight:500;
  padding-top:1.75vw;
  text-align:justify; 
}

/* THE TITLEBAR */

#titlebar {
  background-color:#7189e3;
  color:white;
  padding:1.75vw;
  width:100%;
  z-index:2;
  position:relative;
}

#titlebar_header {
  font-size: 2vw;
  line-height:2vw;
  font-weight:800;
  text-transform:uppercase;
  text-align:left;
}

/* MENUBAR */

.buttontable {
  width:100%;
  margin:0;
}

.menubutton {
  height:5.5vw;
  color:black;
  text-align:center;
  background-color:#e3e3e3;
  cursor:pointer;
  font-weight:700;
  font-size:1.5vw; /* 18px */
  line-height:1.5vw; /* 18px */
  vertical-align:middle;
  text-align:center;
}

.menubutton:hover,.menubutton.selected {
  color:white;  
}

.menugap {
  width:2%;
}

/* GRAPHHOLDER */

.graphholder {
  padding-top:3.5vw;     /* 42px */
}

.graphblock {
  padding-bottom:3.5vw;  /* 42px */
  position:relative;
  width:100%;
}

.graph_inner {
  left:15%;
  z-index:10;
}

.graph_start {
  width:15%;
  color:white;
  padding-right:3.5vw;     /* 42px */
  text-align:right;
  font-weight:800;
  font-size:2vw;           /* 24px */
  display:inline-block;
  float:left;
  left:0px;
  z-index:700;
}

.graph_bar {
  border-top-right-radius:8px;
  border-bottom-right-radius:8px;
  color:white;
  padding-right:2.25vw;    /* 27px */
  text-align:right;
  font-weight:800;
  font-size:3vw;        /* 36px */
  display:inline-block;
  margin-left:5px;
  z-index:10;
  overflow:hidden;
  margin-top:0vw;
}

.graph_bgbar {
  width:100%;
  background-color:#e3e3e3;
  z-index:1;
  margin-top:-9vw;        /* 108px */
}


.graph_blackdot {
  background-color:black;
  color:white;
  border-radius:50%;
  font-weight:800;
  font-size:2vw;      /* 24px */
  height:3.5vw;         /* 42px */
  width:3.5vw;          /* 42px */
  z-index:800;
  position:absolute;
  line-height:3.08vw;  /* 37px */
  text-align:center;
  border:0.25vw solid black;   /* 3px */
  cursor:pointer;
}

.graph_blackdot_sm {
  background-color:black;
  color:white;
  border-radius:50%;
  font-weight:800;
  font-size:1.5vw;  /* 18 pixels */
  height:3vw;    /* 36 pixels */
  width:3vw;   /* 36 pixels */
  z-index:800;
  position:absolute;
  line-height:2.75vw;   /* 33 pixels */
  text-align:center;
  border:0.166666vw solid black;   /* 2px */
  cursor:pointer;
}

.graph_blackdot:hover, .graph_blackdot_sm:hover {
  border-color: #e3e3e3;
}

.graph_blackbar {
  background-color:black;
  color:white;
  font-weight:500;
  font-size:1.25vw;  /* 15px */
  height:6vw;    /* 72px */
  z-index:500;
  position:absolute;
  padding:1.25vw 1.25vw 1.25vw 2.50vw;   /* 15px */
  line-height:1.75vw;   /* 21px */
  opacity:0;
  border-top-right-radius:8px;
  border-bottom-right-radius:8px;
}



/* GRAPHTITLE */

#graphtitle {
  background-color:white;
  padding:0;
  z-index:1000;
  font-size:1vw;
  line-height:2vw;
  color:#999999;
  text-align:center;
}

/* ANIMATION */

.animation_holder {
  width:100%;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  padding:0;
  height:50vw; /* 600px */
  position:relative;  
}

.animation_main {
    position: absolute;
    width: 100%;
    height: 100%;
    margin:0%;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}

#animation {
    z-index:100;
}

#animation2 {
    z-index:50;
}

#animation3 {
    z-index:102;
}

#animation4 {
    z-index:103;
}

/* ANIMATION BLACK DOTS */

#graph_bd_svg_1 {
  top:26%;
  left:42.0%;
}

#graph_bd_svg_2 {
  top:29.333333%;
  left:50.166666% 
}

#graph_bd_svg_3 {
  top:70.66666%;
  left:47.50%
}

#graph_bd_svg_status {
  background-color:black;
  width:50%;
  top:78%;
  left:25%;
  padding:10px;
  position:absolute;
  color:white;
  z-index:2000;
  display:none;
  border-radius:8px;
}

/* CONCLUSION */

#conclusiontable {
  margin:30px 0 0 0; 
}

#conclusionbox {
  width:51%;
  padding:20px 2% 40px 0;
  vertical-align:top;
}

#conclusionbox_empty {
  width:49%;
}

#conclusiontitle {
  color:white;
  text-transform:uppercase;
  font-weight:800;
  font-size:2vw;
}

#conclusionsubtitle {
  color:#2db3c6;
  text-transform:uppercase;
  font-weight:300;
  font-size:32px;
}

#conclusionbody {
  color:black;
  font-size:1.5vw;
  line-height:2vw;
  padding-top:12px;
  font-weight:500;
  text-align:justify;
}

/* ADDON */

#addontable {
  margin:30px 0 155px 0; 
}

#addonbox {
  width:100%;
  background-color: #a8cf5d;
  padding:20px 20px 40px 20px;
  vertical-align:top;
}

#addontitle {
  background: url(../img/user.png) no-repeat left top;
  background-size: contain;
  color:white;
  text-transform:uppercase;
  font-weight:800;
  font-size:2vw;
  line-height: 3.5vw;
  height: 3.5vw;
  padding-left: 5vw; 
}

#addonsubtitle {
  color:#2db3c6;
  text-transform:uppercase;
  font-weight:300;
  font-size:32px;
}

#addonbody {
  color:black;
  font-size:1.5vw;
  line-height:2vw;
  padding-top:12px;
  font-weight:500;
}

/* LINKBAR */

#tablelinkbar td {
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, #7189e3 50%);
  height: 12vw;
}

#linkbar_container {
  z-index:1000;   
  width:100%;
  max-width:1200px;
  padding:0;
}

#linkbar_table {
  width:100%;
  margin:0;
  z-index:1000;
}

.linkbar_td {
  width:9.09090909%;
  padding:0;
  text-align:center;
  z-index:1000;
  position: relative;
}

.linkbar_td a {
  background-color:#e3e3e3;
  color:black;
  text-transform:uppercase;
  display:inline-block;
  width: 6vw;
  height: 6vw;
  border-radius:50%;
  text-align:center;
  font-weight:800;
  text-decoration:none;
  font-size:1.5vw;
  z-index:1000;
  line-height:6vw;
}

.linkbar_td a:hover {
  background-color:#2db3c6;
  color:white;
}

.linkbar_td a.active {
  background-color:#a8cf5d;
}

.linkbar_td a.disabled {
  color:#9e9e9e;
  pointer-events: none;
  cursor: default;
}


#footerbar {
  background-color:#7189e3;
  color:white;
  padding-bottom:3vw;
  width:100%;
  z-index:500;
}

#footerbar_header {
  text-transform:uppercase;
  text-align:left;
  font-weight:600;
  font-size:1.5vw;
  line-height:1.5vw;
  z-index:500;
}

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

  #introbody,#factboxbody,#conclusionbody,#addonbody {
    font-size:18px;
    line-height:24px;
  }
  #introtitle,#factboxtitle,#conclusiontitle,#addontitle {
    font-size:24px;
  }
  
  #titlebar_header {
     font-size: 24px;
     line-height:24px;
  }
  #titlebar {
     padding:21px;
  }
  
  #factbox {
    padding:36px;
    border-radius:36px 36px 36px 0;
  }
 
  #factboxtitle {
    line-height: 48px;
    height: 48px;
    padding-left: 72px;
    margin-left: 12px;
  }
 
  #factboxbody {
    padding-top:21px;
  }
 
  .menubutton {
     font-size: 18px;
     line-height:18px;
     height:66px;
  }
  
  .graphholder {
    padding-top:42px;
  }

  .graphblock {
    padding-bottom:42px;
  }

  .graph_start {
    padding-right:42px;
    font-size:24px;
  }
  
  .graph_bar {
    padding-right:27px;
    font-size:36px;
  }

  .graph_bgbar {
    margin-top:-108px;
  }

  .graph_blackdot {
    font-size: 24px;
    height: 42px;
    width: 42px;
    line-height: 37px;
    border: 3px solid black;
  }
  
  .graph_blackdot_sm {
    font-size: 18px;
    height: 36px;
    width: 36px;
    line-height: 33px;
    border: 2px solid black;
  }
  
  .graph_blackbar {
    font-size: 15px;
    height: 72px;
    padding: 15px 15px 15px 30px;
    line-height: 21px;
  }
  
  .animation_holder {
    height: 600px;  
  }
  
  #graph_bd_svg_1 {
    top:156px;
    left:501px;
  }

  #graph_bd_svg_2 {
    top:176px;
    left:599px; 
  }

  #graph_bd_svg_3 {
    top:424px;
    left:567px; 
  }

  

  #graphtitle {
    font-size:12px;
    line-height:24px;
  }

  #tablelinkbar td {
    height:144px;
  }
  
  .linkbar_td a {
    width: 72px;
    height: 72px;
    font-size:18px;
    line-height:72px;
  }

}

@media (orientation: portrait) {         
    #inforotate {
        display: block;
    }         
}