* {
    padding:0px;
    margin:0px;
}

html {
	scroll-behavior: smooth;
}

body {
            background-color: #f8f3e8;
			font-family:Helvetica, Arial, sans-serif;
			font-size:1em;
}
 
#header{
	width: 90vw;
	height:14vw;
  	margin-top:0px;
	margin-left:0px;    
	padding-top: 5px;
    position: absolute;
    text-align: center;
    z-index:100;
}

#logo{
	height:12vw;
}

#myform {
            background-color: #fff;
			width: 85vw;
			height: auto;
  			margin-top:14vw;
			margin-left:10px;
			padding: 20px 20px;
			position: absolute;
            box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.2);
}


#myform2 {
            background-color: #fff;
			width: 85vw;
			height: auto;
			margin-top: 20px;
			margin-left:10px;
			padding: 20px 20px;
			position: absolute;
            box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.2);
}

#form-thanks {
            background-color: #fff;
			width: 85vw;
			height: auto;
  			margin-top:14vw;
			margin-left:10px;
			padding: 20px 20px;
			position: absolute;
            box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.2);
            text-align: justify;
}

#form-help {
            background-color: #fff;
            width: 85vw;
			height: autp;
			margin-top:20px;
			margin-left:10px;
			padding: 20px 20px;
			position: absolute;
            box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.2);
            text-align: justify;
}


@media (orientation: portrait) {
#header{
	width: 95vw;
	height:17vw;
}
#myform {
  	margin-top:20vw;

}
#form-thanks {
  	margin-top:20vw;

}
#logo{
	height: 15vw;
}
}



/* Styling form-control Class */
.form-control {
            text-align: left;
            margin-bottom: 25px;
}

/* Styling form-control Class */
.form-date {
            text-align: left;
            margin-bottom: 10px;
}
 
/* Styling form-control Label */
.form-control label {
            display: block;
            margin-bottom: 10px;
}
 
/* Styling form-control input,
select, textarea */
.form-control input,
.form-control select,
.form-control textarea {
            border: 1px solid #777;
            border-radius: 2px;
            font-family: inherit;
            padding: 10px;
            display: block;
            width: 150px;
}


.form-date input,
.form-date select,
.form-date textarea {
            border: 1px solid #777;
            border-radius: 2px;
            font-family: inherit;
}
 
/* Styling form-control Radio
button and Checkbox */
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
            display: inline-block;
            width: auto; 
            height: auto;
}

.jump-control {
			margin-top:0px;
            margin-bottom: 0px;
            border: 0px solid #777;
}




.interestlabelselected {
	font-size:0.7em;
	font-style: italic;
}
 
.button {
  border: none;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.1em;
  position: relative;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: white; 
  border: 2px solid #008CBA;
}

.button:hover {
  background-color: #008CBA;
  color: white;
}


.button_small {
  border: none;
  color: black;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.9em;
  position: relative;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: white; 
  border: 2px solid #008CBA;
}

.button_small:hover {
  background-color: #008CBA;
  color: white;
}

.fieldgroup{
   float: left;
   width: auto;
   margin-left: 3em;
}

input[type=radio] { 
width: 10px; 
padding: 10px 10px; 
margin: 10px 0; 
display:inline-block;
vertical-align: middle;
}

input[type='radio'] { 
     transform: scale(1.25); 
}


input[type=range] { 
width: 30vw; 
margin: 10px 0px; 

}


.sliderlistL {
 font-size: 0.6em;
 text-align: right; 
}

.sliderlistR {
 font-size: 0.6em;
 text-align: left; 
}

.slidecontainer {
  width:20vw; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  height: 5px; /* Specified height */
  background: #ffffff; /* Grey background */
  outline: none; /* Remove outline */
  border: 0;
  opacity: 0.5; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

#interest {
width: 350px;
overflow: hidden;
text-overflow: ellipsis; 
overflow-wrap: break-word;
white-space: break-spaces;    
}