@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');

/* Letting browser know what elements will animate, 
we do this to get optimal hardware performance */
#panel-container,
#panel-container #share,
.nav-link,
#navigation {
	will-change: transform, all;
}

/* Styling for browser autocomplete */
#panel-container input:-webkit-autofill,
#panel-container input:-webkit-autofill:hover, 
#panel-container input:-webkit-autofill:focus,
#panel-container textarea:-webkit-autofill,
#panel-container textarea:-webkit-autofill:hover
#panel-container textarea:-webkit-autofill:focus,
#panel-container select:-webkit-autofill,
#panel-container select:-webkit-autofill:hover,
#panel-container select:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-background-fill-color: #2bb5e9 !important;
  background-color: #2bb5e9 !important;
  -webkit-box-shadow: 0 0 0px 1000px #2bb5e9 inset;
}

/* Hiding safari input autofill icons */
#panel-container input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

/* Hiding IE input autofill icons */
#panel-container input::-ms-clear {
      display: none;
  }

#panel-container {
	min-width: 1100px;
	width: 100%;
	height: 700px;
	background-color: #2bb5e9;
	position: fixed;
	top: -700px;
	left: 0;
	transition: top ease-out 1s;
	box-sizing: border-box;
	z-index: 211;
	color: #fff;
	box-sizing: border-box;
}

.mobile #panel-container {
	width: 100vw;
	min-width: auto;
}

/* testing allowing scroll in panel only */
body.disable-scroll {
	overflow: hidden;
}

#panel-container.enable-scroll {
	overflow: auto;
}

.mobile #panel-container.enable-scroll {
	overflow: hidden;
	z-index: 2000;
}

/* Logo */
#panel-container .header {
	position: relative;
	max-width: 1100px;
	min-width: 1100px;
	margin: 0 auto;
	padding: 3px 0 6px;
}

.mobile #panel-container .header {
	min-width: auto;
}

#panel-container #logo-container {
	position: absolute;
	margin-top: 5px;
	margin-left: 19px;
	width: 185px;
	height: 60px;
}

.mobile #panel-container #logo-container {
	height: 145px;
}

#panel-container #logo-container a img {
	width: 185px;
	height: 60px;
	opacity: 0;
	transition: opacity ease-out .25s;
}

.mobile #panel-container #logo-container a img {
	width: 145px;
	height: auto;
}

#panel-container .title-block .title.panel-fade-in,
#panel-container #share.panel-fade-in {
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: subpixel-antialiased;
	transition: opacity ease-out 2s;
	-webkit-transition: opacity ease-out 2s;
	-moz-transition: opacity ease-out 2s;
	-ms-transition: opacity ease-out 2s;
	opacity: 1;
}

#panel-container #logo-container a img.panel-fade-in {
	animation: logoDelayedFade 2s;
	-moz-animation: logoDelayedFade 2s;
	-webkit-animation: logoDelayedFade 2s;
	opacity: 1
}

@-webkit-keyframes logoDelayedFade {
  0%   { opacity: 0; }
  40%  { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes logoDelayedFade {
  00%   { opacity: 0; }
  40%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes logoDelayedFade {
  0%   { opacity: 0; }
  40%  { opacity: 0; }
  100% { opacity: 1; }
}

#panel-container .hide-on-success {
	visibility: visible;
	transition: all ease-in 0.25s;
}

.mobile #panel-container .hide-on-success {
	padding: 0;
}

#panel-container #share {
	opacity: 0;
	transition: opacity ease-in 0.25s;
}

#panel-container label {
	text-transform: none;
}

#panel-container p, #panel-container ::placeholder {
	color: #fff;
}

#panel-container #exit-button {
	background-image: url('/assets/button-close-round.png');
	width: 15px;
	height: 15px;
	position: absolute;
	top: 25px;
	right: 40px;
	cursor: pointer;
}

.mobile #panel-container #exit-button {
	right: 25px;
}

#panel-container .title-block {
	width: 550px;
	display: block;
	margin: 0 auto;
	margin-top: 100px;
	margin-bottom: 10px;
	text-align: center;
}

.mobile #panel-container .title-block {
	display: none;
}

#panel-container .title-block .title {
	color: #fff;
	text-align: center;
	font-weight: 300;
	opacity: 0;
	transition: opacity ease-out .25s;
}

.mobile #panel-container .title-block .title {
	font-size: 22px;
}

#panel-container .form-container {
	height: 520px;
	max-width: 1280px;
	margin: 0 auto;
	position: relative;
	border: none;
	text-align: center;
	background-color: transparent;
}

.mobile #panel-container .form-container {
	margin-top: 60px;
}

#panel-container #share {
	width: 501px;
	position: relative;
	margin: 0 auto;
	display: block;
}

.mobile #panel-container #share {
	width: auto;
	padding: 0 20px
}

/* Selectbox styles */
#panel-container input .selectBox {
	border: 0;
}

#panel-container .selectBox {
	margin-top: 10px;
	border: transparent;
	width: 488px;
	margin-bottom: 10px;
}

.mobile #panel-container .selectBox {
	width: auto;
	margin: 0 0 5px;
}

#panel-container a.selectBox.selectBox-dropdown {
	min-width: 488px;
	background-color: #2bb5e9;
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	border: solid 1px rgba(255, 255, 255, 0.75);
	padding: 5px 5px;
	border-radius: 2px;
	text-decoration: none;
	transition: background-color 0.5s ease;
}

.mobile #panel-container a.selectBox.selectBox-dropdown {
	min-width: -webkit-fill-available;
	min-width: -moz-fill-available;
}
#panel-container .selectBox a.selectBox span {
	color: #fff;
	text-decoration: none;
}

#panel-container a.selectBox.selectBox-dropdown:hover,
#panel-container a.selectBox.selectBox-dropdown.selectBox-menuShowing {
	background-color: rgba(255, 255, 255, 0.25);	
}

#panel-container a.selectBox.selectBox-dropdown .selectBox-label {
	pointer-events: none;
}

.mobile #panel-container a.selectBox.selectBox-dropdown .selectBox-label {
	width: auto;
}

#panel-container a.selectBox.selectBox-dropdown.selectBox-menuShowing,
#panel-container a.selectBox.selectBox-dropdown.selectBox-menuShowing .selectBox-label {
	color: #fff;
	opacity: 1;
}

#panel-container .selectBox-dropdown .selectBox-label:hover {
	text-decoration: none;
	-moz-text-decoration-color: #fff;
	color:#fff;
	-webkit-font-smoothing: antialiased;
	-webkit-backface-visibility: hidden;
}

.selectBox-options, 
.selectBox-options LI, 
.selectBox-options LI A {
	border: none;
	border-radius: 2px; 
}

.selectBox-dropdown-menu {
	margin-top: 10px;
	border: 1px solid #fff;
	box-shadow: 0px 2px 5px #999;
}

.temboo .selectBox-options li.option-label-only a {
 	display: none;
}

#panel-container .selectBox-dropdown .selectBox-label {
	background: url(/assets/dropdown-triangle.png) no-repeat right -88px;
	color: #fff;
}

#panel-container .selectBox-dropdown .selectBox-menuShowing .selectBox-label {
	background-color: rgba(255, 255, 255, 0.25);
} 

#panel-container .contact-panel-button{
	text-align: center;
	width: 125px;
	font-size: 14px;
	padding: 5px 10px;
	background-color: #2293BD;
	color: #fff;
	border-radius: 5px;
	margin-top: 0px;
	margin-left: 375px;
}

.mobile #panel-container .contact-panel-button {
	margin: 0;
}

#panel-container .form-container {
	text-align: left;
	position: relative;
}

#panel-container p.form-field {
	height: 55px;
}


/* Form Animations*/
#panel-container .form-animate-fields .form-field {
	position: relative;
	padding-top: 10px;
}

.mobile #panel-container .form-animate-fields .form-field {
	padding-top: 6px;
}

#panel-container .form-animate-fields .form-input {
	position: relative;
	display: block;
	background-color: transparent;
	-webkit-background-color: transparent;
	-webkit-background: transparent;
	width: 500px;
	padding: 7px;
	margin-top: 10px;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
	color: #ffffff;
	font-size: 16px;
	padding-bottom: 0px;
	z-index: 5;
}

.mobile #panel-container .form-animate-fields .form-input {
	width: auto;
	margin: 0;
}

#panel-container .form-animate-fields .form-input:focus {
	outline: none;
}

#panel-container .form-animate-fields .form-label {
	width: 500px;
	position: absolute;
	top: 4px;
	padding: 5px;
	margin-bottom: 0px;
	height: 22px;
}

.mobile #panel-container .form-animate-fields .form-label {
	width: -moz-available;
	width: -webkit-fill-available;
	margin: 10px 0;
}

#panel-container .form-animate-fields .form-label::after {
	position: absolute;
	content: "";
	width: 500px;
	bottom: 0;
	left: 0;
	opacity: 0.5;
	height: 1px;
	background-color: #fff;
	box-sizing: inherit;
}

.mobile #panel-container .form-animate-fields .form-label::after {
	width: -moz-available; 	
	width: -webkit-fill-available;
}

#panel-container .form-animate-fields .form-input.is-filled + .form-label::after {
	position: absolute;
	bottom: 0px;
}

#panel-container .form-animate-fields .form-input.is-filled:focus + .form-label::after {
	opacity: 1;	
}

#panel-container .form-animate-fields .form-label-content {
	font-weight: 500;
	font-size: 16px;
	position: relative;
	display: block;
	width: 500px;
	opacity: 0.7;
	transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	transition: all 0.5s ease-out;
	transition: -webkit-transform all 0.5s ease-out;
	-webkit-transition: -webkit-transform all 0.5s ease-out;
	-webkit-font-smoothing: antialiased;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
}

.mobile #panel-container .form-animate-fields .form-label-content { 
	width: -moz-available; 	
	width: -webkit-fill-available;
}

#panel-container .form-animate-fields .form-input.is-filled + .form-label .form-label-content {
	color: #fff;
	transform: translate3d(0px, -30px, 0px) scale(.75);
	-webkit-transform: translate3d(0px, -30px, 0px) scale(.75);
	-ms-transform: translate3d(0px, -30px, 0px) scale(.75);
	opacity: 0.7;
}

#panel-container .form-animate-fields .form-input.is-filled {
	font-weight: 500;
}


/* Special styles for textarea */
#panel-container .form-field.textarea {
	position: relative;
}

#panel-container .textarea {
	margin-top: 20px;
	position: relative;
	transition: all 0.5s ease-out;
	transition: -webkit-transform all 0.5s ease-out;
	-webkit-transition: -webkit-transform all 0.5s ease-out;
	-ms-transition: transform all 0.5s ease-out;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
}

#panel-container .textarea #textarea-label {
	font-weight: 500;
	opacity: 0.7;
	color: #fff;
	font-size: 16px;
	display: block;
	transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-webkit-font-smoothing: antialiased;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
}

#panel-container p.textarea:hover {
	transform: scale(1.0);
	-webkit-transform: scale(1.0);
}

#panel-container .textarea #textarea-label.on-focus {
	transform: translate3d(0px, 0px, 0px) scale(.75);
	-moz-transform: translate3d(0px, 0px, 0px) scale(.75);
	-webkit-transform: translate3d(0px, 0px, 0px) scale(.75);
	-ms-transform: translate3d(0px, -5px, 0px) scale(.75);
}

#panel-container .textarea #textarea-label.on-blur.empty {
	transform: translate3d(0px, 0px, 0px) scale(1);
	-webkit-transform: translate3d(0px, 0px, 0px) scale(1);
	-moz-transform: translate3d(0px, 0px, 0px) scale(1);
	-ms-transform: translate3d(0px, 0px, 0px) scale(1);
}

#panel-container .textarea #textarea-label.on-blur.filled {
	transform: translate3d(0px, 0px, 0px) scale(.75);
	-webkit-transform: translate3d(0px, 0px, 0px) scale(.75);
	-moz-transform: translate3d(0px, 0px, 0px) scale(.75);
	-ms-transform: translate3d(0px, -5px, 0px) scale(.75);
}

#panel-container .textarea textarea {
	color: #fff;
	font-weight: 500;
	font-size: 16px;
	max-width: 492px;
	min-width: 492px;
	height: 5px;
	resize: none;
	background-color: #2bb5e9;
	border: 0;
	border-bottom: solid 1px;
	border-bottom-color: rgba(255, 255, 255, 0.5);
	transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	overflow: hidden;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-webkit-font-smoothing: subpixel-antialiased;
	opacity: 1;
}

.mobile #panel-container .textarea textarea {
	width: -moz-available; 	
	width: -webkit-fill-available;
  min-width: auto;
}

.mobile .spinner-container {
	text-align: center;
}

#panel-container .textarea textarea:focus {
	background-color: rgba(34, 147, 189, 0.25);
	border-bottom: solid 1px;
	border-bottom-color: rgba(255, 255, 255, 1);
	-webkit-transform: translateZ(0);
	outline:none;
}

/* Button Animation */
#panel-container button {
	position: relative;
	font-size: 14px;
	color: #fff;
	width: 125px;
	height: 30px;
	background-color: #2293BD;
	border-radius: 3px;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	outline: none;
}

#panel-container button:hover {
	background-color: #1E80A5;
	cursor: pointer;
}

#panel-container button.is-loading {
	font-size: 0px;
	background-color: #1E80A5;
	content: ''; 
}

#panel-container #new-spinner {
	position: absolute;
	top: 5px;
	right: 52px;
	opacity: 0;
	transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
  
  	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: transparent;

	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	border-bottom: 3px solid #165E79;
	border-left: 3px solid #165E79;

	-webkit-animation: loading 1.2s infinite linear;
	-moz-animation: loading 1.2s infinite linear;
	-ms-animation: loading 1.2s infinite linear;
	animation: loading 1.2s infinite linear;
}

@-webkit-keyframes loading {
	to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes loading {
	to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes loading {
	to { -ms-transform: rotate(360deg); }
}

@keyframes loading {
	to { transform: rotate(360deg); }
}


/* Error messaging */
#panel-container .error {
	color: #cc0000;
}

#panel-container .error-message {
	width: 185px;
	top: 20px;
	left: -220px;
	text-align: center;
	position: absolute;
	color: #cc0000;
	border-radius: 3px;
	background-color: #fff;
	z-index: 11;
	padding: 10px 10px;
	font-weight: 500;

	display: none;
	visibility: hidden;
}

.mobile #panel-container .error-message {
	left: 0;
	width: auto;
	background: none;
	padding: 0;
	top: 50px;
}

.mobile #panel-container .error-message:before {
	border: none;
}

#panel-container .error-message:before {
	content:"";
	position: absolute;
	left: 100%;
	top: 14px;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-left: 12px solid #fff;
	border-bottom: 6px solid transparent;
}

#panel-container  p.textarea > .error-message {
	top: -8px;
	left: -225px;
}

#panel-container .selectBox.plan > .error-message {
	left: -228px;
	top: 298px;
}

.mobile #panel-container .selectBox.plan > .error-message { 
	left: 20px;
	top: 340px;
}

#panel-container .selectBox.type-of-inquiry > .error-message {
	left: -228px;
	top: 38px;	
}

.mobile #panel-container .selectBox.type-of-inquiry > .error-message {
	left: 20px;
}

#panel-container .form-field.name.is-valid > .error-message.name,
#panel-container .form-field.org.is-valid > .error-message.org,
#panel-container .form-field.email.is-valid > .error-message.email,
#panel-container .form-field.phone.is-valid > .error-message.phone,
#panel-container .form-field.role.is-valid > .error-message.role,
#panel-container .form-field.subject.is-valid > .error-message.subject,
#panel-container p.textarea.is-valid > .error-message.message,
#panel-container .selectBox.type-of-inquiry.is-valid > .error-message.type-of-inquiry,
#panel-container .selectBox.plan.is-valid > .error-message.plan {
	display: none;
	visibility: hidden;
}

#panel-container .form-field.name.is-invalid.error-shown > .error-message.name,
#panel-container .form-field.org.is-invalid.error-shown > .error-message.org,
#panel-container .form-field.email.is-invalid.error-shown > .error-message.email,
#panel-container .form-field.phone.is-invalid.error-shown > .error-message.phone,
#panel-container .form-field.role.is-invalid.error-shown > .error-message.role,
#panel-container .form-field.subject.is-invalid.error-shown > .error-message.subject,
#panel-container p.textarea.is-invalid.error-shown > .error-message.message,
#panel-container .selectBox.type-of-inquiry.is-invalid.error-shown > .error-message.type-of-inquiry,
#panel-container .selectBox.plan.is-invalid.error-shown > .error-message.plan  {
	display: inline;
	visibility: visible;
}