.page1{
	background: #000;
	height: 100%;
	background-image: url('../../images/form-bg.png');
	background-position: center right;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-attachment: fixed;
	overflow-y: hidden;
}

.speechContainer {
	position: relative;
	display: block;
	margin-top: 20px;
	width: 100%;
}

.bubbleContainer{
	transition: all 0.6s ease;

}

.bubbleContainer:hover{
	filter: opacity(1);
}

.speechContainer img {
	position: relative;
	display: inline;
	margin: 0px 0px -9px 0px;
	padding: 0px 0px 0px 0px;
	height: 40px;
}



.speech-bubble {
	position: relative;
	background: #fff;
	color:#000;
	border-radius: 40px;
	width: auto;
	display: inline-block;
	padding: 20px 30px;
	font-family: 'Heebo';
	font-size: 26px;
	font-weight: 700;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 18px solid transparent;
	border-right-color: #fff;
	border-left: 0;
	border-bottom: 0;
	margin-top: -9px;
	margin-left: -14px;
}


.wait-bubble {
	position: relative;
	margin-top: 20px;
	background: #fff;
	border-radius: 88px;
	width: auto;
	display: inline-block;
	padding: 14px 60px;
}

.wait-bubble img {
	width: 70px;
	height: 70px;
}


.answerContainer, .answerContainerFinal {
	position: relative;
	display: block;
	margin-top: 20px;
	width: 100%;
	text-align: right;
}


.answer-bubble {
	position: relative;
	background: #2b2c4e;
	border-radius: 88px;
	border: none;
	outline: none;
	width: auto;
	min-width: 150px;
	display: inline-block;
	padding: 40px 30px;
	font-size: 26px;
	 font-family: 'Heebo';
	 font-weight: 700;
	color: #fff;
	margin-left: 20px;
	margin-bottom: 20px;
	cursor: pointer;
}

.answer-bubble:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 18px solid transparent;
	border-left-color: #2b2c4e;
	border-right: 0;
	border-bottom: 0;
	margin-top: -9px;
	margin-right: -14px;
}

.answer-bubble.checked:after {
	border-left-color: #4ba1d5;
}

button.answer-bubble.checked {
	color: #fff;
	background-color: #4aa1d5;
	border: 0px solid #4aa1d5;

}

button.answer-bubble:focus {
	color: #fff;
}

button.answer-bubble:hover {
	background-color: #4aa1d5;
}

.answer-bubble:hover:after, .answer-bubble:after .checked  {
	border-left-color: #4aa1d5;
}


button.answer-bubble:hover {
	background-color: #4aa1d5;
}

.answer-bubble:hover:after  {
	border-left-color: #4aa1d5;
}


.speechInputArea {
	background: #15389d;
	border-radius: 88px;
	border: none;
	outline: none;
	width: auto;
	display: inline-flex;
	padding: 20px;
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	position: relative;
}

.speechInputArea:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 18px solid transparent;
	border-left-color: #15389d;
	border-right: 0;
	border-bottom: 0;
	margin-top: -9px;
	margin-right: -14px;
}

.speechInputArea div {
	align-self: center;
	white-space: nowrap;
}

.speechInputNote{
	position: relative;
	top: 5px;
	left: -50px;
	font-size: 16px;
	font-weight: 100;
    margin: -20px 0 20px;
    width: 100%;
    line-height: 2rem;
    text-align: center;
}



.speechInputArea .input {
	width: 100%;
	max-width: 300px;
	text-align: left;
	font-size: 26px;
	font-weight: 700;
	padding: 14px 0px 13px 20px;
	border: 2px solid #fff;
	margin: 0px 0px 0px 0px;
	background: fff;
	box-sizing: border-box; /* REMOVES PADDING WITH 100% WiDTHS */
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
}

.speechInputArea .input:focus {
	border: 2px solid #4aa1d5;

}
::-webkit-input-placeholder {
   color: #9f9f9e; font-family: 'Heebo'; font-size: 26px;
}

:-moz-placeholder { /* Firefox 18- */
   color: #9f9f9e; font-family: 'Heebo'; font-size: 26px; 
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #9f9f9e; font-family: 'Heebo'; font-size: 26px; 
}

:-ms-input-placeholder {  
   color: #9f9f9e; font-family: 'Heebo'; font-size: 26px; 
}


.placeholder-fix:focus::-webkit-input-placeholder  {color:transparent;}
.placeholder-fix:focus::-moz-placeholder   {color:transparent;}
.placeholder-fix:-moz-placeholder   {color:transparent;}






.sliderOuter {
	display: flex;
	justify-content: space-between;
	
}

.sliderOuter .answer-bubble-go {
	margin-left: 30px;
	
}



.formSliderArea {
	width: 100% !important;
	min-width: 100% !important;
}

.sliderFigContainer {
	display: flex;
	justify-content: space-between;

}
.sliderFig {
	margin-top: 10px;

}

.sliderControlButton{
	min-width: 50px;
    height: 50px;
    align-items: center;
    font-size: 2rem;
    background: #4aa1d5;
    border-radius: 50%;
    margin: 20px 10px;
    font-weight: 100;
    cursor: pointer;
    border: none;
    user-select: none;
    color: #fff;
}
.sliderControlButton:hover{

	background: #77c5f3;
}


.answer-bubble-go {
	position: relative;
	background: #4aa1d5;
	border-radius: .6em;
	width: auto;
	border: none;
	outline: none;
	display: inline-block;
	padding: 20px;
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}

.answer-bubble-go:hover {
	background-color: #77c5f3;
}

.speechFormSubButtonWrapper {
	border: none;
	outline: none;
	display: block;
	padding: 0px 0px 0px 0px;
	margin: 10px 20px;
	cursor: pointer;
	text-align: center;
}


.speechSubBut {
	position: relative;
	background: #1edfd1;
	border-radius: .6em;
	width: auto;
	border: none;
	outline: none;
	display: inline-block;
	padding: 20px 60px;
	font-size: 42px;
	font-weight: 700;
	color: #000;
	cursor: pointer;
}

.speechSubBut:hover {
	background-color: #1edfd1;
}


.imgWobble{
	animation: wobble;
	animation-duration: 0.5s;
	animation-iteration-count: 4;
	animation-timing-function: linear;
}


@keyframes wobble {
	0%   {
		transform: rotate(0deg);
	}
	25%  {
		transform: rotate(-30deg);
	}
	50%  {
		transform: rotate(0deg);
	}
	75%  {
		transform: rotate(30deg);
	}
	100% {
		transform: rotate(0deg);
	}
  }

  .fadeOut{
	  transition: all 300ms ease-in-out;
	  filter: opacity(0.6);
  }
  
  .waitAnswer{
	  margin-left:  80%;
  }
  .field-validation-error{
	display: block; 
	text-align: center;
	white-space: normal;
  }
  .flexCol{
	  display: flex;
	  flex-direction: column;
	  width: 100%;
  }
  
  .hidden, .hiddenAnswer{
	display: none;
  }

  #questionFormRow{
	  padding: 50px 15px;
	position: absolute;
    bottom: 5vh;
    height: 85vh;
    background: transparent;
	overflow-y: scroll;
	box-sizing: border-box;
	scrollbar-width: none;
}
#splashAreaForm{
	height: 100vh;
}

#questionFormRow {
    -ms-overflow-style: none;  
    overflow: -moz-scrollbars-none;  
}
#questionFormRow::-webkit-scrollbar { 
    display: none;  
}

button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  text-decoration: line-through;
  text-decoration-color: red;
}

button:disabled::after{
	content: 'Fully Booked';
	position: absolute;
	color: red;
	/* font-style: italic; */
	font-size: 80%;
	left: 0;
	top: 75%;
	width: 100%;
	height: 100%;
	border: none;
}

button:disabled:hover,
button[disabled]:hover{
  background-color: #cccccc;
  text-decoration: line-through;
  cursor: not-allowed; 
}


@media(max-width:1199px){
	.contentContainer{width: 100%;}
}
@media(max-width:767px){
	.speech-bubble {padding: 10px 20px;font-size: 20px;}
	.speechInputArea {padding: 15px;font-size: 18px;}
	.speechInputArea .input {font-size: 18px;padding: 10px 0px 10px 10px;}
	.answer-bubble-go {padding: 11px;font-size: 18px;}
	::-webkit-input-placeholder {font-size: 18px;}
	:-moz-placeholder {font-size: 18px;}
	::-moz-placeholder {font-size: 18px;}
	:-ms-input-placeholder {font-size: 18px;}
	.wait-bubble {padding: 14px 50px;}
	.wait-bubble img {width: 50px;height: 30px;}
}
@media(max-width:480px){
	.speechInputArea {border-radius: 40px;flex-direction: column;width: calc(100% - 40px);padding: 20px;}
	.flexyDivider {flex-basis: 15px;}
	.flexCol {width: 100%;}
	.answer-bubble-go{width: 100%;}
	.speechInputArea .input{max-width: 100%;}
	.answer-bubble {padding: 20px 20px;font-size: 20px;}
	.speechInputArea div:last-child{width: 100%;flex: 0 0 100%;}
	#bubble11Form .speechInputArea, #bubble21Form .speechInputArea{width: calc(100% - 30px)!important;padding-left: 15px!important;padding-right: 15px!important;}
	#bubble11Form .sliderOuter, #bubble21Form .sliderOuter{flex-flow: wrap;}
	#bubble11Form #sliderControlButtonMin11+div, #bubble21Form #sliderControlButtonMin21+div{width: 65% !important;}
	.sliderControlButton {min-width: 40px;height: 40px;margin: 20px 5px;}
	.sliderOuter .answer-bubble-go {margin-left: 0;}
	.answer-bubble {padding: 15px 16px;font-size: 17px;margin-bottom: 15px;margin-left: 15px;}	
}