i{
	font-size:25px;
	color: white;
}
*{
	font-family: 'Open Sans', sans-serif;
}
body{
	background: rgba(0,0,0,1);
	margin:0;
	padding:0;
	border:0;
}

p{
	color: white;
}
h1{
	color: white;
}
.sk-cube-grid {
	position:fixed;
	top: 50%;
	left:16.5%;
	width: 140px;
	height: 140px;
	transform: translate(-50%,-50%);
}
.sk-cube-grid .sk-cube {
	z-index: 10000;
	width: 33%;
	height: 33%;
	background-color: white;
	float: left;
	-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
	      animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); 
  }
}
@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  } 
}

#weatherButtons{
	width: 100%;
	border:0;
	margin:auto;
}

.weatherButton{
	appearance:none;
	width:30%;
	border:0;
	margin:0;
	margin-top:10px;
	background: none;
	outline: 2px solid white;
	color: white;
}
.weatherButton:hover{
	background: white;
	color:black;
}
.weatherButton:focus{
	background: white;
	color:black;
}

#imgContainer{
	position: fixed; 
	top: -50%; 
	left: -50%; 
	width: 200%; 
	height: 200%;
	animation: kenburns 120s infinite;
}

#backgroundImage{
	position: absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	margin: auto; 
	min-width: 50%;
	min-height: 50%;
}

#rightColumn{
	position: fixed;
	z-index: 10;
	height:100%;
	min-width: 33vw;
	background: rgba(0,0,0,0.6);
	text-align: left;
	padding: 1vh;
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#cityText{
	font-size: 10vh;
	padding:0;
	border:0;
	transform: translateY(-50%);
}
#currentTemp{
	font-size:15vh;
	padding:0;
	margin-bottom:0;
	margin-top: 0;
	border:0;
}

input[type="text"]{
	display: block;
	margin: 0;
	width: 80%;
	font-size: 15px;
	appearance: none;
	box-shadow: none;
	border-radius: none;
	text-align: center;
	border:none;
	color:white;
	padding: 10px;
	background: rgba(0,0,0,0);
	border-bottom:solid 5px rgba(100,100,100,.5);
	transition:border 0.3s;
}
input[type="text"]:focus{
	outline:none;
	border-bottom: solid 5px #969696;
}

input:focus::-webkit-input-placeholder{
	opacity:0;
}

@keyframes kenburns {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    95% {
        transform: scale3d(1.5, 1.5, 1.5) translate3d(-100px, -100px, 0px);
        animation-timing-function: linear;
        opacity: 1;
    }
    100% {
    	transform: scale3d(2.5, 2.5, 2.5) translate3d(-105px, -105px, 0px);
        opacity: 0;
    }
}




#weatherContainer{
	height: 60vh;
	overflow: auto;
	width:30vw;
}