@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {
	box-sizing: border-box;
}

html{
  overflow-x: hidden;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-family: 'Montserrat', sans-serif;
	padding-bottom: 30px;
	overflow-x: hidden;
	height: auto;
	width: 100%;
	position: relative;
}

h1 {
	font-weight: bold;
	width: 80%;
	font-size: 4vmin;
	margin: 0;
}

h2 {
	text-align: center;
}

h3 {
	text-align: center;
	font-weight: bold;
	font-size: 4vmin;
	color: white;
	margin: 0;
}

p {
	font-size: 4vmin;
	font-weight: 100;
	line-height: 5vmin;
	letter-spacing: 0.5px;
	margin: 20px 0 30px;
}

span {
	font-size: 0.8vmin;
}

a {
	color: #333;
	font-size: 2.3vmin;
	text-decoration: none;
	margin: 15px 0;
}

button {
	border-radius: 20px;
	border: 1px solid #0596C7;
	background-color: #0596C7;
	color: #FFFFFF;
	font-size: 3.5vmin;
	font-weight: bold;
	padding: 1vmin 3vmin;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: transform 80ms ease-in;
	font-family: 'Montserrat';
}

button:active {
	transform: scale(0.95);
}

button:focus {
	outline: none;
}

button.ghost {
	background-color: transparent;
	border-color: #FFFFFF;
}

form {
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
	width: 100%;
	text-align: center;
}

input {
	background-color: #eee;
	border: none;
	padding: 2vmin 2vmin;
	font-size: 2.8vmin;
	margin: 8px 0;
	width: 50vmin;
}

ul {
  display: inline-grid;
  grid-auto-flow: column;
  grid-gap: 3vmin;
  justify-content: center;
  margin: auto;
  list-style-type: none;
}



li {
	height: 20px;
}

li:last-child {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

li:hover ~ li p.hand {
  animation: wave-animation 0.3s infinite;
}

@keyframes wave-animation {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(20deg);
  }
  75% {
    transform: rotate(-15deg);
  }
}

.tongue {
	text-align: center;
	background: linear-gradient(to right, #0596C7, #034B63);
	border-radius: 10px 10px 0 0;
  	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
			0 10px 10px rgba(0,0,0,0.22);
	position: relative;
	overflow: hidden;
	width: 50vmin;
	height: 15vmin;
	font-size: 1vw;
	min-height: 50px;
	padding: 2vmin 5vmin;
}

.home-container {
	display: flex;
	margin-right: 20vmin;
}

.home-tongue {
	text-align: center;
	background: #2B303A;
	border-radius: 10px 10px 0 0;
	position: relative;
	overflow: hidden;
	width: 7vmin;
	height: 8vmin;
	margin-left: 50px;
	margin-top: 10vmin;
	float:left;
}

.home-text {
	text-align: center;
	background: #2B303A;
	border-radius: 0px 10px 0 0;
	position: relative;
	overflow: hidden;
	width: 20vmin;
	height: 8vmin;
	margin-top: 10vmin;
	margin-right: 10px;
	float:left;
	visibility: hidden;
}

.home-container:hover .home-text {
	visibility: visible;
}

.home-container:hover .home-tongue {
	border-radius: 10px 0 0 0;
}

.footer {
	margin-right: 40px;
}

.footer-link {
  color: black;
  font-weight: bold;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 hsla(0, 0%, 100%, 0.4);
}

.footer-link:hover {
  box-shadow: inset 0 -1.2em 0 hsla(0, 0%, 100%, 0.4);
}

.container {
	background-color: #fff;
	border-radius: 10px;
  	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
			0 10px 10px rgba(0,0,0,0.22);
	position: relative;
	overflow: hidden;
	width: 80vmin;
	height: 40vmin;
	margin: auto;
	max-width: 100%;
	font-size: 1vw;
}

.container2 {
	background-color: #fff;
	border-radius: 10px;
  	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
			0 10px 10px rgba(0,0,0,0.22);
	position: relative;
	overflow: hidden;
	width: 80vmin;
	height: 60vmin;
	margin: auto;
	max-width: 100%;
	font-size: 1vw;
}

.long-form-container {
	background-color: #fff;
	border-radius: 10px;
  	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
			0 10px 10px rgba(0,0,0,0.22);
	position: relative;
	overflow: hidden;
	width: 650px;
	margin: auto;
	width: 90vmin;
	height: auto;
}

.middle {
	width: 100vw;
}

.footer {
	margin-right: 40px;
}

.recover {
	margin-top: 6vmin;
}

.output {
	text-align: center;
	font-weight: bold;
	font-size: 4vmin;
	color: white;
}

.output-container {
	text-align: center;
	background: linear-gradient(to right, #0596C7, #034B63);
	border-radius: 0 0 10px 10px;
  	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
			0 10px 10px rgba(0,0,0,0.22);
	position: relative;
	overflow: hidden;
	width: 70vmin;
	height: auto;
	min-height: 50px;
	margin: auto;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.select {
  position: relative;
  min-width: 200px;
}
.select select {
  -webkit-appearance: none;
  padding: 7px 40px 7px 12px;
  width: 100%;
  border: 1px solid #e8eaed;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 3px -2px #9098a9;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  transition: all 150ms ease;
}
.select select:required:invalid {
  color: #5a667f;
}
.select select option {
  color: #223254;
}
.select select option[value=""][disabled] {
  display: none;
}
.select select:focus {
  outline: none;
  border-color: #07f;
  box-shadow: 0 0 0 2px rgba(0,119,255,0.2);
}
.select select:hover + svg {
  stroke: #07f;
}