:root {
--ks-primary : #00597d;
--ks-secondary : #00a4ff;
--ks-button: #fea702;
--form-width : 98%;
--form-margin : 2vw;
}


#formContainer {
	position : relative;
	margin-left : 0;
	height : 75vh;
	margin-top : 0;
	border-radius : 10px;
	background-size : cover;
	background-repeat : no-repeat;
	width : 98%;
	max-width : 90%;
	min-width : 90%;
	overflow-x : hidden;
	border : 1px solid black;
	margin-left : auto;
	margin-right : auto;
	background-color : white;
	background-image : url('../images/bg2.jpg');
	background-size : cover;
}

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

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

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

.page select {
	padding : 0.25em;
}

.selectDiv {
	display : block;
}

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

#formContainer label {
	color : black;
 	display : block;
 	margin-top : 0.25em;
 	margin-bottom :  0.25em;
}


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

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


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


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

.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%;
}

#formContainer .textArea {
	width : 100%;
}

.textAreaDesc {
	display : block;
	width : 100%;
	text-align: center;
  	text-justify: inter-word;
}

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

.textAreaContent {
	width : 80%;
	height : 20vh;
	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 : 95%;
	max-width : 95%;
	margin-top : 0;
	border-radius : 99999px;
	border : 1px solid black;
	height : 3vh;
	background-color : #fff;
	margin-top : 1vw;
	margin-left : 1vw;
	margin-right : 1vw;
	line-height : 1em;
}

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

.formMessage {
	width : 50%;
	height : 15vh;
}

@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-button);
		min-width : 10vh;
		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;
	}


}

#formAddress {
	background-color : #aaa;
	margin-top : -160px;
	width : 200px;
	border-radius : 10px;	
	padding : 1em;
	opacity : 0.8;

}

#formAddressSiteTitle {
	color : red;
}


@media only screen and (max-device-width: 767px) {
	
	#formContainer {
		height : 75vh;
		margin-bottom : 10vh;
	}
	
	.navBut {
		top : 55vh;
	}
	
	#formProgressContainer {
		height : 3vh;
	}
	
	.page {
		top :4vh;
	}
	
	.page button {
		min-width : 20vw;
	}
	
	.page .butPrev {
		left : 8vw;

	}


	.page .butNext {
		left : 40vw;

}
	
}