@font-face { font-family: "merriweather"; src: url("/static/fonts/merriweather-regular.ttf") format("truetype"); 										  font-weight: normal; 										  font-style: normal;} @font-face { font-family: "merriweather"; src: url("/static/fonts/merriweather-italic.ttf") format("truetype"); 										  font-weight: normal; 										  font-style: italic;} @font-face { font-family: "merriweather"; src: url("/static/fonts/merriweather-bold.ttf") format("truetype"); 										  font-weight: 700; 										  font-style: normal;} @font-face { font-family: "merriweather"; src: url("/static/fonts/merriweather-bold-italic.ttf") format("truetype"); 										  font-weight: 700; 										  font-style: italic;} @font-face { font-family: "poppins";      src: url("/static/fonts/poppins-bold.ttf") format("truetype"); 										  font-weight: 700; 										  font-style: normal;} @font-face { font-family: "poppins";  	  src: url("/static/fonts/poppins-regular.ttf") format("truetype"); 										  font-weight: normal; 										  font-style: normal;} @font-face { font-family: "poppins"; 	  src: url("/static/fonts/poppins-semibold.ttf") format("truetype"); 										  font-weight: 600; 										  font-style: normal;} @font-face { font-family: "cheque"; 	  src: url("/static/fonts/Cheque-Black.otf") format("opentype"); 										  font-weight: normal; 										  font-style: normal;} @font-face { font-family: "oswald"; 	  src: url("/static/fonts/Oswald-Regular.ttf") format("truetype"); 									  	  font-weight: normal; 										  font-style: normal;} @font-face { font-family: "blackjack"; 	  src: url("/static/fonts/BLACKJAR.ttf") format("truetype"), 											   url("/static/fonts/BLACKJAR.otf") format("opentype"); 										  font-weight: normal; 										  font-style: normal;}     :root { 	--black: #000000; 	--white: #ffffff; 	--gray-100: #F7F8F9; 	--gray-200: #C0C2C6; 	--gray-300: #88898C; 	--gray-400: #3D3D3F; 	--gray-500: #181819; 	--gray-overlay-100: rgba(24,24,25,0.2); 	--gray-overlay-200: rgba(24,24,25,0.7); 	--blue-100: #D4DEF0;     --blue-200: #557BC5;     --blue-300: #3B5EA1; 	--green-100: #D3EAE2; 	--green-200: #4ead8a;     --green-300: #3E8A6E; 	--yellow-100: #FDEBD4; 	--yellow-200: #f6af55;     --yellow-300: #C48C44; 	--coral-100: #FCDCD4; 	--coral-200: #f47555;     --coral-300: #C35D44; 	--red-100: #f9ece9; 	--red-200: #c84324; 	--red-300: #A0351C; }     html, body { 	height: 100vh; } * { 	margin: 0; } body { 	margin:0; 	padding:0; 	font-size: 120%; 	min-height: 100%; } body, td, th, a, h1, h2, h3, h4, h5, h6 { 	margin:0; 	font-family:poppins,lucida,arial,sans-serif; 	color:var(--gray-500); }  .clear { clear:both; } .hidden { display:none; } .centerAlign { text-align: center; } .rightAlign { text-align:right; } .leftAlign { text-align:left; }  a { 	color:var(--blue-200); 	text-decoration: none; 	-moz-transition: all 0.25s ease;     -o-transition: all 0.25s ease;     -webkit-transition: all 0.25s ease;     transition: all 0.25s ease; 	cursor: pointer; } a.button--level-primary { 	font-weight: 600; 	background-color: var(--blue-200); 	border: none; 	color: var(--white); 	font-size: 16px; 	text-transform: uppercase; 	letter-spacing: 2px; 	padding: 15px 65px; } a.button--level-primary:hover { 	background-color: var(--blue-300); } a.button--level-secondary { 	font-weight: 600; 	background-color: var(--white); 	border: 1px solid var(--gray-500); 	font-size: 16px; 	text-transform: uppercase; 	letter-spacing: 2px; 	padding: 15px 65px; 	color: var(--gray-500); 	text-align: center; } a.button--level-secondary:hover { 	border: 1px solid var(--blue-200); 	color: var(--blue-200); }  a:hover { 	color: var(--blue-300); }  #modalOverlay { 	width:100%; 	height:100%; 	position:fixed; 	top:0; 	left:0; 	z-index:99; 	display:none; }  .errorMessage { 	background-color: var(--red-200); 	color: var(--white); 	margin-top: 10px; 	padding: 8px; 	text-align:left; }     #wrapper { 	display: flex; 	flex-direction: column; 	min-height: 100%; } #content { 	flex:1; }     button { 	border-radius: 0; 	font-family: poppins, arial, sans-serif; 	font-weight: 600; 	outline: none; 	cursor: pointer; 	-moz-transition: all 0.25s ease; 	-o-transition: all 0.25s ease; 	-webkit-transition: all 0.25s ease; 	transition: all 0.25s ease; } button.button--level-primary { 	background-color: var(--blue-200); 	border: none; 	color: var(--white); 	font-size: 16px; 	text-transform: uppercase; 	letter-spacing: 2px; 	padding: 15px 65px; } button.button--level-primary:hover { 	background-color: var(--blue-300); } button.button--level-primary:disabled { 	background-color: var(--blue-100); 	cursor: initial; 	border: none; } button.button--level-primary--inactive { 	background-color: var(--blue-100); 	cursor: initial; 	border: none; 	color: var(--white); 	font-size: 16px; 	text-transform: uppercase; 	letter-spacing: 2px; 	padding: 15px 65px; } button.button--level-secondary { 	background-color: var(--white); 	border: 1px solid var(--gray-500); 	font-size: 16px; 	text-transform: uppercase; 	letter-spacing: 2px; 	padding: 15px 65px; } button.button--level-secondary:hover { 	border: 1px solid var(--blue-200); 	color: var(--blue-200); } button.button--level-secondary--inactive { 	background-color: var(--white); 	border: 1px solid var(--gray-200); 	color: var(--gray-200); 	font-size: 16px; 	text-transform: uppercase; 	letter-spacing: 2px; 	padding: 15px 65px; 	cursor: initial; } button.button--level-tertiary { 	border: solid 1px var(--gray-500); 	background-color: var(--white); 	font-size: 12px; 	padding: 3px 25px; } button.button--level-tertiary:hover { 	border: solid 1px var(--blue-200); 	color: var(--blue-200); } button.button--level-tertiary:disabled, button.button--level-tertiary[disabled] { 	cursor: initial; 	font-size: 12px; 	padding: 3px 25px; 	color: var(--gray-200); 	border: 1px solid var(--gray-200); } button.button--level-tertiary.blue { 	background-color: var(--blue-200); 	color: var(--white); 	border: none; } button.button--level-tertiary.blue:hover { 	background-color: var(--blue-300); } button.button--level-tertiary.blue:disabled { 	background-color: var(--blue-100); 	cursor: default; } button.button--level-tertiary.white { 	border-color: white; 	background-color: inherit; 	color: white; } button.button--level-tertiary.white:hover { 	border-color: var(--blue-200); } button.button--level-tertiary--inactive { 	border: solid 1px var(--gray-200); 	color: var(--gray-200); 	background-color: var(--white); 	font-size: 12px; 	padding: 3px 25px; } .no-animate { 	 	-o-transition-property: none !important; 	-moz-transition-property: none !important; 	-ms-transition-property: none !important; 	-webkit-transition-property: none !important; 	transition-property: none !important; 	 	-o-transform: none !important; 	-moz-transform: none !important; 	-ms-transform: none !important; 	-webkit-transform: none !important; 	transform: none !important; 	 	-webkit-animation: none !important; 	-moz-animation: none !important; 	-o-animation: none !important; 	-ms-animation: none !important; 	animation: none !important; }     .fieldError { 	background-color: var(--red-100); 	border:solid 1px var(--red-200) !important; } .fieldError::-webkit-input-placeholder {  	font-style: normal; 	color:var(--gray-200); } .fieldError::-moz-placeholder {  	font-style: normal; 	color:var(--gray-200); } .fieldError:-ms-input-placeholder {  	font-style: normal; 	color:var(--gray-200); } .fieldError:-moz-placeholder {  	color:var(--gray-200); }     input { 	-webkit-appearance: none; 	padding: 15px; 	font-family: poppins, arial, sans-serif;     font-size: 14px;     border: 1px solid var(--gray-200);     border-radius: 0;     outline: none;     color: var(--gray-500); 		box-sizing: border-box; } input:focus { 	border: solid 1px var(--blue-200); } textarea { 	padding: 15px; 	font-family: poppins, arial, sans-serif;   font-size: 14px;   border: 1px solid var(--gray-200);   border-radius: 0;   outline: none;   color: var(--gray-500); } textarea:focus { 	border: solid 1px var(--blue-200); }   #simplemodal-overlay { 	background-color: rgba(88,88,88,0.67) !important; }   @media only screen and (max-width : 767px) and (orientation : portrait) { 	input {font-size: 16px;} }     .validField { 	background-position:98%; 	background-image:url("/static/images/icons/check.svg"); 	background-repeat: no-repeat; 	background-size:20px 20px; } .invalidField { 	background-position:98%; 	background-image:url("/static/images/icons/cross.svg"); 	background-repeat: no-repeat; 	background-size:20px 20px; } .checkbox--small {     font: 12px poppins,arial,sans-serif;     color:var(--gray-500);     padding-top:5px;     padding-right:5px;     padding-left: 22px;     position: relative;     cursor: pointer;     -webkit-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     user-select: none;     -moz-transition: all 0.25s ease;     -o-transition: all 0.25s ease;     -webkit-transition: all 0.25s ease;     transition: all 0.25s ease; } .checkbox--small input {     position: absolute;     opacity: 0;     cursor: pointer; } .checkbox--small .checkbox--checkmark {     position: absolute;     bottom: 3px;     left: 0;     height: 12px;     width: 12px;     border: 1px solid var(--gray-300); } .checkbox--small:hover input ~ .checkbox--checkmark {     background-color: var(--gray-100); } .checkbox--small input:checked ~ .checkbox--checkmark {     background-color: var(--blue-200);     border-color: var(--blue-200);     border-left-width: 2px; } .checkbox--checkmark:after {     content: "";     position: absolute;     display: none; } .checkbox--small input:checked ~ .checkbox--checkmark:after {     display: block; } .checkbox--small .checkbox--checkmark:after {     left: 2.5px;     top: 0;     width: 3px;     height: 8px;     border: solid white;     border-width: 0 2px 2px 0;     -webkit-transform: rotate(45deg);     -ms-transform: rotate(45deg);     transform: rotate(45deg); }  .checkbox--white-small {     font: 12px poppins,arial,sans-serif;     color:var(--gray-100);     padding-top:5px;     padding-right:5px;     padding-left: 20px;          position: relative;     cursor: pointer;     -webkit-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     user-select: none;     -moz-transition: all 0.25s ease;     -o-transition: all 0.25s ease;     -webkit-transition: all 0.25s ease;     transition: all 0.25s ease; } .checkbox--white-small input {     position: absolute;     opacity: 0;     cursor: pointer; } .checkbox--white-small:hover input ~ .checkbox--checkmark {     background-color: var(--gray-400); } .checkbox--white-small input:checked ~ .checkbox--checkmark {     background-color: var(--blue-200);     border-color: var(--blue-200); } .checkbox--white-small input:checked ~ .checkbox--checkmark:after {     display: block; } .checkbox--white-small .checkbox--checkmark:after {     left: 3.5px;     top: 0;     width: 3px;     height: 8px;     border: solid white;     border-width: 0 2px 2px 0;     -webkit-transform: rotate(45deg);     -ms-transform: rotate(45deg);     transform: rotate(45deg); }  .checkbox {     font: 14px poppins,arial,sans-serif;     color:var(--gray-500);     padding-top:5px;     padding-right:5px;     padding-left: 25px;          position: relative;     cursor: pointer;     -webkit-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     user-select: none;     -moz-transition: all 0.25s ease;     -o-transition: all 0.25s ease;     -webkit-transition: all 0.25s ease;     transition: all 0.25s ease; } .checkbox input {     position: absolute;     opacity: 0;     cursor: pointer; } .checkbox--checkmark {     position: absolute;     bottom: 3px;     left: 0;     height: 15px;     width: 15px;     border: 1px solid var(--gray-300); } .checkbox:hover input ~ .checkbox--checkmark {     background-color: var(--white); } .checkbox input:checked ~ .checkbox--checkmark {     background-color: var(--blue-200);     border-color: var(--blue-200); } .checkbox input:checked ~ .checkbox--checkmark:after {     display: block; } .checkbox .checkbox--checkmark:after {     left: 4.5px;     top: 1px;     width: 4px;     height: 9px;     border: solid white;     border-width: 0 2px 2px 0;     -webkit-transform: rotate(45deg);     -ms-transform: rotate(45deg);     transform: rotate(45deg); } footer { 	background:var(--gray-500); 	height:220px; 	width:100%; } .footer__content { 	display: flex; 	flex-flow: row nowrap; 	justify-content:space-between; 	align-items:center; 	color: var(--white); 	max-width: 1100px; 	margin:0 auto; 	padding:40px 20px 0 20px; } .footer__copy { 	font: 12px poppins, lucida, arial, sans-serif; 	color: var(--gray-300); } .footer__right { 	text-align:right; 	font: 12px poppins, lucida, arial, sans-serif;   width: calc(50% - 63px);   max-width: 320px; } .footer__left {   width: calc(50% - 63px);   max-width: 360px; } .footer__left_break {     font: 11px poppins, lucida, arial, sans-serif; } .footer__left a { 	font: 12px poppins, lucida, arial, sans-serif; 	color: var(--white); } .footer__iosButton img {     margin:10px 0 0 0; } #footer__contactButton { 	font: 12px poppins, lucida, arial, sans-serif; 	color: var(--white); 	border: none; 	background-color: transparent; 	cursor:pointer; 	padding: 0; } .footer__center {     display:flex;     flex-flow:row nowrap;     text-align: center; } .footer__center a {     background-color: white;     display: inline-block;     width: 40px;     height: 33px;     border-radius: 20px;     text-align: center;     padding-top:7px;     margin:0 5px; } .footer__center a img {   vertical-align: inherit; }  .footer__center a:hover {     background-color: var(--blue-100); }  .footer__subscribe {     text-align:left; } .footer__right_subHeader1 {     font: 16px poppins, lucida, arial, sans-serif; 	font-weight: 600;     text-align:left; } .footer__right_subHeader2 {     font: 12px merriweather, palatino, serif;     text-align:left; }  #footer__subscribeForm {     display: flex;     background-color: var(--white);     margin-top:15px;     width:100%;     flex-flow: row nowrap;     justify-content:space-between; } #footer__emailAddressField {     border: none;     height: 35px;     padding:10px;     width:250px; } #footer__emailAddressField::placeholder { 	color: var(--gray-200); } #footer__emailAddressField.error {     background-color: var(--red-100); } #footer__subscribeButton {     background-color: var(--blue-200);     border: none;     color: var(--white);     font: 13px poppins, lucida, arial, sans-serif;     padding:0 20px; } #footer__subscribeButton:hover {     background-color: var(--blue-300); } #footer__subscribedMessage, #footer__subscribedError {     display:none;     font: 15px merriweather, palatino, serif;     text-align:left;     margin-top:10px;     color:var(--blue-200);     height:30px; } #footer__subscribedMessage { color:var(--blue-200); } #footer__subscribedError { color:var(--red-200); }   @media only screen and (max-width : 767px) and (orientation : portrait) {     footer {height: 100%;}     .footer__content {padding: 25px 15px; display: block;}     .footer__left {display: inline-block; width: 100%; max-width: initial;}     #footer__logo {width: 75px;}     .footer__center {display: inline-block; text-align: left; padding-top: 10px;}     .footer__center a {height: 35px; width: 35px; padding-top: 0;}     .footer__center a img {vertical-align: sub;}     .footer__right {margin-top: 15px; width: 100%; max-width: initial;} }    #header {     background-color:transparent;     height:60px;     width:100%;     position: fixed;     display: flex;     flex-flow: row nowrap;     justify-content:space-between;     align-items:center;     z-index:100; } #mobileHeader {     display: none;     height:60px;     width:100%;     position: fixed;     flex-flow: row nowrap;     justify-content:space-between;     align-items:center;     z-index:100; }     .header__logo {     margin-left:20px;     font-size:0; } .header__right {     margin-right:20px; } .header__right a {     font:600 14px poppins, lucida, arial, sans-serif;     color: var(--white);     padding-left: 20px; } #header__actions {     display:inline-block;     border-left: solid 1px var(--white);     padding-left:5px;     margin-left:20px; } #header__actions button {     height:30px;     font:600 14px poppins, lucida, arial, sans-serif;     text-align: center;     margin-left:20px;     cursor:pointer; } #header__loginButton {     border: solid 1px var(--white);     background-color: transparent;     color: var(--white); }     #mobileHeader button {     border:0;     outline:0;     cursor: pointer; } #mobileHeader__left {     padding-left:15px;     display:flex;     flex-flow:row nowrap;     align-items: center; } #mobileHeader__menuButton {     background: url(/static/images/buttons/hamburger-white.svg) no-repeat center/100% transparent;     width: 17px;     height: 17px;     background-color: transparent; } #mobileHeader__logoButton {     background: url(/static/images/icons/Portico_Logo_LightBlue.svg) no-repeat center/contain transparent;     width: 75px;     height: 24px;     margin: 0 20px;     background-color: transparent; } #mobileHeader__right {     padding-right:15px;     display:flex;     flex-flow:row nowrap;     align-items: center; } #mobileHeader__loginButton {     margin-right:10px;     padding:3px 15px; } #mobileHeader__registerButton {     padding:3px 10px; }      #mobileHeaderMenu__popup {     display:none;     width: calc(100% - 30px);     height: calc(100% - 30px);     position: fixed;     top: 0;     left: 0;     padding:15px;     background-color:var(--white);     z-index:100; } #mobileHeaderMenu__header {     display:flex;     flex-flow: row nowrap;     align-items: center; } #mobileHeaderMenu__closeButton {     background: url(/static/images/buttons/cross.svg) no-repeat center center/contain transparent;     width: 15px;     height: 15px;     margin-right:10px;     border:0; } #mobileHeaderMenu__header img {     width:75px;     height:24px; } #mobileHeaderMenu__content {     padding:30px 10px; } #mobileHeaderMenu__content button {     width:100%; } #mobileHeaderMenu__aboutUsButton, #mobileHeaderMenu__blogButton {     background-color: transparent;     font: 600 18px/2 poppins, arial, sans-serif;     color: var(--gray-500);     text-align:left;     border:0;     padding:0; } #mobileHeaderMenu__buttons {     margin-top:50px;     padding-top:30px;     border-top:1px solid var(--gray-200); } #mobileHeaderMenu__loginButton {     border: solid 1px var(--gray-500); } #mobileHeaderMenu__registerButton {     margin-top:15px; }     #header.white {     background-color:white;     border-bottom:1px solid var(--gray-200);     height: 60px; } #header__aboutUs.white, #header__blog.white {     color: var(--gray-500); } #header__actions.white {     border-left: solid 1px var(--gray-500); } #header__loginButton.white {     border: solid 1px var(--gray-500);     color: var(--gray-500); } #mobileHeader.white {     background-color:white;     border-bottom:1px solid var(--gray-200);     height: 60px; } #mobileHeader__menuButton.white {     background-image: url(/static/images/buttons/hamburger-gray.svg); } #mobileHeader__logoButton.white {     background-image: url("/static/images/icons/Portico_Logo_Blue.svg"); } #mobileHeader__loginButton.white {     border: solid 1px var(--gray-500);     color: var(--gray-500); }    @media only screen and (max-width : 767px) and (orientation : portrait) {     #header { display:none; }     #mobileHeader { display: flex; }                         }   #headerMobile {     background-color:var(--black);     height:44px;     width:100%;     z-index:100;     text-align:center;     margin-bottom:20px;  } .headerMobile__logo {     padding:6px; } #headerMobile__logoImg {     width: 75px; } .horizontalSlideView__wrapper {     display:flex;     flex-flow: row nowrap;     align-items:center;     flex-shrink: 0; } .horizontalSlideView__buttonContainer {     width:20px;     height:50px;     text-align:center; } .horizontalSlideView__prevButton {     background-repeat: no-repeat;     background-position: center left;     background-size: 11px 17px;     background-color: transparent;     height: 50px;     width: 20px;     border: 0;     outline: 0; } .horizontalSlideView__nextButton {     background-repeat: no-repeat;     background-position: center right;     background-size: 11px 17px;     background-color: transparent;     height: 50px;     width: 20px;     border: 0;     outline: 0; }  @media only screen and (max-width : 767px) and (orientation : portrait) {   .horizontalSlideView__buttonContainer {width: 30px;}   .horizontalSlideView__nextButton {width: 30px;}   .horizontalSlideView__prevButton {width: 30px;} } .popup {     display:none;     background-color:var(--white);     border:1px solid var(--gray-200);     padding:0;     box-shadow: 0 5px 25px var(--gray-overlay-100);     z-index:100; } .popupContent {     padding:10px 40px 40px 40px; } .popup h1 {     font-size:1.2em;     text-align:center;     padding-bottom:20px;     border-bottom:1px solid var(--gray-200);     font-family: merriweather,palatino, serif;     font-weight: 700;     font-style: italic; } .popup h2 {     font-size:0.75em;     line-height: 1.5em;     font-family: merriweather,palatino,serif;     text-align:center;     margin-top:20px;     margin-bottom:0;     font-weight: normal; } .popup h3 {     font-size:0.75em;     line-height: 1.5em;     font-family: merriweather,palatino,serif;     font-style: italic;     text-align:center;     margin-top:20px;     margin-bottom:0; } .popup h3 a {     font-family: merriweather,palatino,serif;     font-style: italic; } .popupClose {     text-align: right;     padding: 5px 15px 0 0; } .popupCloseButton {     width:14px;     height:14px;     background-color: transparent;     background-image: url(/static/images/buttons/cross.svg);     background-size: 100% 100%;     border:0;     cursor: pointer; } #popupButton {     margin-top:20px;     padding: 15px 100px; } .popupSubTitle {     height:40px;     margin-bottom:20px; } .popupSubTitle h2 {     font-size:16px;     font-family:poppins, arial, sans-serif;     font-weight: 600;     text-align:left;     padding-top:10px;     margin-top:0; }   @media only screen and (max-width : 767px) and (orientation : portrait) {   .popupContent {padding: 10px 15px 0 15px;height: calc(100vh - 10px);)} } .tripExpertReview {     margin-bottom:20px; } .tripExpertReview img {     float:left;     width:40px;     height:40px; } .tripExpertReview__content {     margin-left:55px;     font: 14px merriweather, palatino, serif;     line-height: 1.57;     color: var(--gray-500); } .tripExpertReview__link {     font: 12px poppins, lucida, arial, sans-serif;     color: var(--blue-200);     padding:0;     border:0;     background-color:transparent;     display:block; } .tripExpert__poweredBy {     background: url(/static/images/misc/tripexpert-gray@2x.png) no-repeat right center/contain;     font: italic 12px merriweather, palatino, serif;     line-height: 25px;     color: var(--gray-200);     padding-right: 95px;     display: inline-block;     height: 25px; } .userAvatar {     width: 30px;     height: 25px;     padding-top:5px;     line-height:0;     border-radius:20px;     font: 600 12px poppins, lucida, arial, sans-serif;     letter-spacing: .05em;     text-align: center;     color: var(--white);     outline:none;     border:0;     margin-right:5px;     vertical-align: middle;     display:inline-block;  } .userAvatar40 {     width: 40px;     height: 30px;     padding-top:10px;     line-height:0;     border-radius:20px;     font: 600 14px poppins, lucida, arial, sans-serif;     letter-spacing: .05em;     text-align: center;     color: var(--white);     outline:none;     border:0;     margin-right:5px;     vertical-align: middle;     display:inline-block; }  #contactForm__popup {   width: calc(100% - 20px);   max-width: 565px;   text-align: center;   position:absolute;   z-index:100; }  #contactForm__popup p {   font: 16px/1.5 merriweather, palatino, serif;   color: var(--gray-500);   padding:20px; }  #contactForm__errors {   background: var(--red-100);   color: var(--red-200);   text-align: left;   font-size: 14px;   padding: 10px 15px;   margin-bottom: 10px;   width: 472px;   border: 1px solid var(--red-200); }  #contactForm__emailAddressField, #contactForm__subjectField {   font: 14px poppins,arial,sans-serif;   width:100%; } #contactForm__emailAddressField {   position: relative;   z-index: 140; } #contactForm__subjectField {   border-top: none;   position: relative;   z-index: 125; } #contactForm__subjectField:focus {   z-index: 145;   border-top: 1px solid var(--blue-200);   margin-top: -1px; } #contactForm__messageField {   font: 14px poppins,arial,sans-serif;   resize: none;   outline: none;   position: relative;   width:calc(100% - 32px);   border-top: none; } #contactForm__messageField:focus {   margin-top: -1px;   border-top: 1px solid var(--blue-200);   z-index: 145; }     .contactForm__buttons {   margin-top: 30px; } .contactForm__buttons button {   padding: 15px 100px; } #contactForm__submittingButton {   opacity: 0.5; }  #externalLoginConfirm__popup {   width: calc(100% - 20px);   max-width: 565px;   text-align: center;   position:absolute;   z-index:100; } #externalLoginConfirm__popup p {   font: 14px/1.5 merriweather, palatino, serif;   text-align: center;   color: var(--gray-500);   margin-top:20px; } .externalLoginConfirm__buttons {   margin-top: 30px; } .externalLoginConfirm__buttons button {   padding: 15px 100px; }  #registrationForm__popup {     position:absolute;     width:540px; }  #registrationForm__message {     font: 16px italic merriweather, palatino, serif;     color: var(--white); } #registrationForm__emailAddressField, #registrationForm__usernameField {     width:100%; } #registrationForm__firstNameField, #registrationForm__lastNameField,                               #registrationForm__passwordField,                               #registrationForm__confirmPasswordField {     width:calc(50% - 5px); }  .registrationForm__splitField {     display: flex;     flex-flow: row nowrap;     justify-content:space-between;     align-items:center; }  #registrationForm__registerContainer label {   font-size: 16px;   color: var(--gray-300); }  .registrationForm__verify {     font: 14px merriweather, lucida, sans-serif;     font-style: italic;     line-height: 1.5;     color: var(--red-200);     display:none;     padding:10px 0; }  #registrationForm__apple {     text-align:center;     padding-top:20px; } #registrationForm__apple button {     width: 295px;     height: 35px;     font: 600 14px poppins, lucida, arial, sans-serif;     text-align: center;     color: var(--white);     background-color: #000000;     border:0;     margin-bottom:8px; } #registrationForm__apple button:hover {     background-color: #333333; } #registrationForm__facebook img {     width: 20px;     vertical-align: sub; }  #registrationForm__facebook {     text-align:center;     padding-top:10px; } #registrationForm__facebook button {     width: 295px;     height: 35px;     font: 600 14px poppins, lucida, arial, sans-serif;     text-align: center;     color: var(--white);     background-color: #3b5998;     border:0;     margin-bottom:8px; } #registrationForm__facebook button:hover {     background-color: #2f4779; } #registrationForm__facebook img {     width: 20px;     vertical-align: sub; } #registrationForm__facebook span {     font: 12px merriweather, lucida, sans-serif;     font-style: italic;     color: var(--gray-300);     display: block; } #registrationForm__separator {     margin-top:10px;     text-align:center;     position: relative; } #registrationForm__separator:before {     border-top: 1px solid var(--gray-200);     content: "";     position: absolute;      top: 50%;     right: 0;     bottom: 0;     width: 100%;     z-index: 1; } #registrationForm__separator span {     font: 14px poppins, lucida, arial, sans-serif;     text-align: center;     padding:0 10px;     background-color: var(--white);     z-index: 4;     position: relative; } #registrationForm__emailAddressField {   margin: 15px 0; } #registrationForm__usernameField {     margin-bottom: 15px; }  .registrationForm__validField {     background-position:98%;     background-image:url("/static/images/icons/check.svg");     background-repeat: no-repeat;     background-size:20px 20px; } .registrationForm__invalidField {     background-position:98%;     background-image:url("/static/images/icons/cross.svg");     background-repeat: no-repeat;     background-size:20px 20px; }  .registrationForm__legalStuff {     font: 12px poppins,arial, sans-serif;     margin-top:15px;     text-align:left;     color: var(--gray-300); } .registrationForm__formButtons {   text-align: center;   margin-top: 20px; }  .registrationForm__loginLink {     text-align:center;     font: 14px poppins, lucida, arial, sans-serif;     color: var(--blue-200);     margin-top:20px; }   @media only screen and (max-width : 767px) and (orientation : portrait) {   #registrationForm__popup {width: 100%; top: 0 !important;} }