html {
--ks-primary : #529919;
--ks-secondary : #e1d21c;
--form-width : 98%;
--form-margin : 2vw;
}

#formContainer {
	width : var(--form-width);
	max-width : var(--form-width);
	margin-left : var(--form-margin);
	background-color : white;
	height : 55vh;
	margin-top : 2vh;
	overflow-x : hidden;
	position : relative;
	border-radius : 10px;
	background-image : url('./wbbg.jpg');
	background-size : cover;
	background-repeat : no-repeat;
}



   
.page {
   position: absolute;
   width: 90%;
   top: 4vh;
   left: 100%;
   opacity: 0;
   transition: left 0.5s ease-in-out, opacity 0.5s ease-in-out;
   text-align : center;
   margin-top : 2em;
   padding-left : 1vw;
   padding-right : 1vw;  
}

.page label {
	font-size : 2em;
}

.page input,select {
	border-radius : 10px;
	min-width : 20vw;
	background-color : white;
	padding : 0.25em;
	font-size : 1.5em;
}

.page select {
	padding : 0.25em;
}

.selectDiv {
	display : inline-block;
}

.page input[type="radio"] {
	min-width : 1vw;
	margin-right : 0.5vw;
}

label {
	font-weight : bold;
	color : var(--ks-primary);
 	display : block;
 	margin-top : 0.25em;
 	margin-bottom :  0.25em;
}


.page button {
	background-color : var(--ks-secondary);
	min-width : 20vh;
	color : black;
	font-weight : bold;
	cursor : pointer;
	font-size : 1em;
	border-radius : 10px;
}


.page .butPrev {
	position : absolute;
	left : 35vw;
}

.navBut {
	margin-top : 1em;
	top : 40vh;
}

.page .butNext {
	position : absolute;
	left : 55vw;
}

.small {
	font-size : 0.7em;
	font-style : italic;
}

.page.active {
  left: 0;
  opacity: 1;
}

.page.back {
  left: -100%;
  opacity: 0;
}

.page.next {
  left: 100%;
  opacity: 0;
}

.radioImage {
	display : inline-block;
	border : 1px dotted var(--ks-primary);
	min-width : 18%;
	border-radius : 5px;
	margin-left : 1vw;
	margin-right : 1vw;
	cursor : pointer;
	background-color : white;
}

.radioImageImg {
	max-height : 200px
}

.imageRadioLabel {
	color : black;
	font-weight : normal;
	display : inline-block;
}

.leftFields {
	width : 40%;
}



#chamberGraphic {
	width : 50%;
	height : 50%;
	float : right;
	border-radius : 10px;
	margin-right : 2em;
	border : 1px solid black;
}


.photoUpload {
	width : 100%;
}

.photoUploadDesc {
	display : inline-block;
	width : 50%;
	vertical-align : top;
	text-align: justify;
  	text-justify: inter-word;
}

.photoUploadUpload {
	display : inline-block;
	width : 50%;
}

.textArea {
	width : 100%;
}

.textAreaDesc {
	display : inline-block;
	width : 50%;
	vertical-align : top;
	text-align: justify;
  	text-justify: inter-word;
}

.textAreaArea {
	display : inline-block;
	width : 50%;
	min-height : 100%;
}

.textAreaContent {
	width : 80%;
	height : 10vh;
	resize: none;
}

.dropZoneArea {
	background-size : contain;
	background-repeat : no-repeat;
	position : static;
}

.photoDelete {
	min-width : 1vw!important;
	display : inline-block;
	margin-top : 0.25em;
}

.contact {
	width : 80%;
}


#formProgressContainer {
	width : 100%;
	max-width : 100%;
	margin-top : 10vh;
	border-radius : 99999px;
	border : 1px solid black;
	height : 3vh;
	background-color : #fff;
	margin-top : 1vw;
	margin-left : 1vw;
	margin-right : 1vw;
}

#formProgess {
	border-radius : 99999px;
	background-color : var(--ks-primary);
	color : #eee;
	position : relative;
	font-style : italic;
	white-space : nowrap;
	height : 100%;
}


@media only screen and (max-width: 600px) {
	html {
	--form-width : 90%;
	--form-margin : 2.5vw;
	}

	
	.page {
		max-width :	95%;
		margin : 0;
		margin-top : 1em;
		font-size : 0.8em;
	}
	.page select {
		max-width : 80%;
	}
	
	.page button {
		background-color : var(--ks-secondary);
		min-width : 10vh;
		color : white;
		font-weight : bold;
		cursor : pointer;
		font-size : 0.8em;
		border-radius : 10px;
		margin-bottom : 1em;
	}
	
	.leftFields {
		float : none;
		width : 100%;
	}
	
	#formProgess {
		font-size : 0.8em;
	}


}

@media screen and (orientation:landscape) and (max-height: 650px) {
	#formContainer {
		height : 95vh;
	}
	
	.navBut {
		top : 72vh;
	}
	
	#formProgressContainer {
		height : 5vh;
	}
	
}