/* ----- Fonts ----- */
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

body {
	background-image: url("../img/background.jpg");
	background-repeat: x-repeat;
	overflow-x:scroll;
	overflow-y:hidden;
}

.container {
  width: 100%;
}

.title{
  font-family: 'Josefin Sans', sans-serif;
  font-size: 72px;
  color: #777777;
}

.maintext {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 24px;
  color: #333333;
  z-index:1000;
}

.poptext {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 36px;
  font-weight: bold;
  color: #ff2400;
  z-index:1000;
}

#headline {
  position: absolute;
  left: 0px;
  margin: 30px;
}

#nagtext {
  position: absolute;
  top: 150px;
  left: 1200px;
  width: 320px;
}

#parallaxContainer {
  width: 100%;
  height: 100%;
}

#layeredCity1, #layeredCity2, #layeredCity3  {
  position: absolute;
  top: 250px;
}

.tileGrey {
  width: 100%;
  height: 100%;
  position: absolute;
  
  border-radius: 30px;
  background: #333333;  
  opacity: 0.9;  
}

.tileGreyOpaque {
  width: 100%;
  height: 100%;
  position: absolute;
  
  border-radius: 30px;
  background: #555555;  
  opacity: 1.0;  
}

#chart1 {
  position: absolute;
  width: 960px;
  height: 600px;
  
  left: 5200px;
  top: 100px;
  text-align: center;
  z-index: 1000;
}

h1, h2, h3, h4, h5{
  font-family: 'Josefin Sans', sans-serif;
  color: #fff;
  margin: 5px;
}

#chart1 svg .arc .value {
  font: 12px 'Josefin Sans', sans-serif;
  fill: #fff;
  text-anchor: middle;
}

#chart1 svg .arc .label {
  font: 16px 'Josefin Sans', sans-serif;
  font-weight: bold;
}

#chart1 svg .arc polyline {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

#chart1 #menu1{
  position: absolute;
  left: 0%;
  margin: 5px;
}

#chart1 #menu2 {
  position: absolute;
  right: 0%;
  margin: 5px;
}

#chart1 .remindertext {
  position: absolute;
  bottom: 0%;
  right: 5%;
  margin: 5px;
}

#citieschart {
  position: absolute;
  width: 960px;
  height: 720px;
  
  left: 8300px;
  top: 50px;
  text-align: center;
  z-index: 1000;
}

#citieschart .remindertext {
  position: absolute;
  bottom: 0%;
  right: 5%;
  margin: 5px;
}

.citiestable {  
  margin: 15px auto;
  text-align: center;
}

#video1 {
  position: absolute;
  width: 900px;
  height: 580px;

  left: 12100px;
  top: 150px;
  text-align: center;
  z-index: 1000;  
}

#finallogo {
  position: absolute;
  left: 13250px;
  top: 400px;
  z-index:1000;
}

.button {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 7.5px 15px;
   margin: 5px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: 'Josefin Sans', sans-serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
}

#info {
  position: fixed;
  top:2%;
  right:2%;
  z-index: 2000;
  cursor: pointer;
}

#overlay { 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  
  background: rgba(30, 30, 30, 0.7);
  display: none; 
  z-index: 10000;
 }

div.centerbox { 
  width: 80%;
  height: 80%;
  text-align: left;
  margin: 50px auto;
  padding: 20px 40px;
  
  background: #333333;
  opacity:0.9;
  border-radius: 30px;
  color: #ffffff;
  
  font-family: 'Josefin Sans', sans-serif;  
  font-size: 16px;
}

div.centerbox h3{ 
  font-size: 20px;
  padding-top: 15px;
  color: #ffffff;
}

div.centerbox .signature {
  text-align: right;
}

#close-icon {
  top: 2%;
  right: 2%;
  position: fixed;
  cursor: pointer;
}

a {
  color: #28c3ab;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #8877ee;
}

#sun1, #sun2 {
  position: absolute;
  top: 20px;
  left: 700px;
}

#cloud1 {
  position: absolute;
  top: 20px;
  left: 1000px;
  z-index:300;
}

#cloud2 {
  position: absolute;
  top: 90px;
  left: 1400px;
  z-index:300;
}

#cloud3 {
  position: absolute;
  top: 70px;
  left: 2700px;
  z-index:300;
}

/*-------------------------------------
 Media queries for responsive text 
--------------------------------------*/

@media (min-width: 768px) and (max-width: 991px){

}
@media (max-width: 767px) {

div.centerbox { 
  font-size: 12px;
}

div.centerbox h3{ 
  font-size: 24px;
}

}