@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Raleway:200,700|Source+Sans+Pro:300,600,300italic,600italic");




body{
background-color: #1C1F24;
color: white;
font-family: Raleway, Helvetica, sans-serif;
	padding: 0px;
	margin: 0px;
}

h1{
	font-weight: bold;
}

a:link {
  text-decoration: none;
  color: white;
}

a:visited {
  text-decoration: none;
  color: white;
}

#portrait-message{
	display: none;
	position: absolute; 
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	width: 200px; /* Need a specific value to work */
	text-align: 	center;
	font-size: 	2vh;
}

#pageInfo{
	position: absolute;
	 left: 2%;
	 font-size: 1.2vh;
	 text-align: left;
	 max-width: 25%;
	 height: 100%;
}

#checkBoxes{
	position: absolute;
	top:5%;
	 right: 2%;
	 font-size: 1vh;
	 width: 25%;
	 height: 90%;
	 text-align: left;
}

#slideContent{
	margin: 0 auto;
	max-width: 50%;
}

#page-wrapper{
	margin: 1.5em;
	max-width: 100%;
	padding: 0px;
	margin: 0px;
	padding-bottom: 10vh;
}
 
  #mainContainer{
   width: 100%;
   margin: auto;
  text-align: center;
  user-select: none;
  }

  .slidecontainer {
  margin-top: .5em;
  margin-bottom: .5em
  user-select: none;
  position:fixed;
  bottom:0;
  	left: 0;
	right: 0;
  width:100%;
  height: 10%;
  z-index:100;
  background-color: #1C1F24;
  text-align: center;
  border-top: solid;
  border-width: 	.3em;
  border-color: white;
}

#myRange{
	width : 60%;
}

.frames body{
  width: 40px;
}

#date{
  font-size: 2.5vh;
  user-select: none;
  margin-top: 1vh;
  margin-bottom: 1vh;
}

#checkBox{
	margin: 0%;
}

img{
	width: 30%;
	margin: 0.3vh;
	margin-bottom: 0em;
}

#leftToggle{
	font-size: 1em;
	padding-right : 1em;
}

#rightToggle{
	padding-left : 1em;
	padding-bottom: 0.5em;
}


label{
	font-size: 1.5vh;
	padding-right: .8vh;
	padding-left: 0.2vh;
	display: inline-block;
  	padding-bottom: .5vh;
}

input{
	top: .8vh;
  	width: 1.5vh;
  	height: 1.5vh;
  	display: inline-block;

}

.formCol{
	width: 33%;
	float: left;
	max-height: 100%;
}

@media screen and (orientation:portrait) {
    /* Portrait styles */
    #page-wrapper{
    	display:none;
    }
    #portrait-message{
    	display:block;
    }
}

@media screen  and (max-width: 1200px) and (orientation:landscape) {
/* Landscape styles */
			body{
			background-color: #1C1F24;
			color: white;
			font-family: Raleway, Helvetica, sans-serif;
				padding: 0px;
				margin: 0px;
			}

			h1{
				font-weight: bold;
			}

			a:link {
			  text-decoration: none;
			  color: white;
			}

			a:visited {
			  text-decoration: none;
			  color: white;
			}

			#portrait-message{
				display: none;
				position: absolute; 
				left: 0; 
				right: 0; 
				margin-left: auto; 
				margin-right: auto; 
				width: 200px; /* Need a specific value to work */
				text-align: 	center;
				font-size: 	2vh;
			}

			#pageInfo{
				position: absolute;
				 left: 2%;
				 font-size: 2vh;
				 text-align: left;
				 max-width: 10%;
				 height: 100%;
			}

			#checkBoxes{
				position: absolute;
				top:5%;
				 right: 2%;
				 font-size: 1vh;
				 width: 50%;
				 height: 90%;
				 text-align: left;
			}

			#slideContent{
				width: 30%;
				text-align: center;
				margin: 0%;
				position: absolute;
				left: 15vw;
			}

			#page-wrapper{
				margin: 1.5em;
				max-width: 100%;
				padding: 0px;
				margin: 0px;
				padding-bottom: 25vh;
			}
			 
			  #mainContainer{
			   width: 100%;
			   margin: auto;
			  text-align: center;
			  user-select: none;
			  }

			  .slidecontainer {
			  margin-top: .5em;
			  margin-bottom: .5em
			  user-select: none;
			  position:fixed;
			  bottom:0;
			  	left: 0;
				right: 0;
			  width:100%;
			  height: 25%;
			  z-index:100;
			  background-color: #1C1F24;
			  text-align: center;
			  border-top: solid;
			  border-width: 	.3em;
			  border-color: white;
			}

			#myRange{
				width : 80%;
			}

			.frames body{
			  width: 40px;
			}

			#date{
			  font-size: 4vh;
			  user-select: none;
			  margin-top: 1vh;
			  margin-bottom: 1vh;
			  text-align: center;
			}

			#checkBox{
				margin: 0%;
			}

			img{
				width: 30%;
				margin: 0.3vh;
				margin-bottom: 0em;
			}

			#leftToggle{
				float: left;
			}

			#rightToggle{
				float: right;
			}


			label{
				font-size: 3.3vh;
				padding-right: .8vh;
				padding-left: 0.2vh;
				display: inline-block;
			  	padding-bottom: .5vh;
			}

			input{
				top: .8vh;
			  	width: 3.3vh;
			  	height: 3.3vh;
			  	display: inline-block;

			}

			.formCol{
				width: 33%;
				float: left;
				max-height: 100%;
			}
}