/* custom.css */

/*@font-face {
  font-family: 'bariol_regularregular';
  src: url('bariol_regular-webfont.eot');
  src: url('bariol_regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('bariol_regular-webfont.woff2') format('woff2'),
  url('bariol_regular-webfont.woff') format('woff'),
  url('bariol_regular-webfont.ttf') format('truetype'),
  url('bariol_regular-webfont.svg#bariol_regularregular') format('svg');
}

body {
text-rendering: optimizelegibility;
font-family: bariol_regularregular;
font-size: 16px;
font-weight: 400;
}


h1, h2, h3, h4, h5, h6 {
text-rendering: optimizelegibility;
font-family: bariol_regularregular;
font-weight: 600;
letter-spacing: 0px;
}*/

.desktop-only {
  display:block;
}

.mobile-only {
  display: none;
}


.progressSpinner {
    background-color: rgba(1, 1, 1, 0.7);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}


@font-face {
  font-family: 'ZeroesThree';
  src: url('fonts/zeroesThree.ttf');
}

@font-face {
  font-family: 'ZeroesOne';
  src: url('fonts/ZeroesOne.ttf');
}


@font-face {
  font-family: 'AvenirLight';
  src: url('fonts/AvenirLTStd-Light.otf');
}

body {
  font-family: 'AvenirLight';
  background-color: #000;
  color: #EEE;
}

/* Main Content */   
.single_inside_content, .appointments-list table th, input, select, .home_box h3, .cat, .scroller {
  font-family: 'AvenirLight';
  color: #EEE;
}

.single_inside_content table tbody tr {
  max-width: 100%;
}

/******************* Header Styling ******************/
.header_menu {
  margin-right: 10em;
  margin-top: 1em;
}

.header_menu li {
  font-family: ZeroesOne;
  letter-spacing: 2.3px;
}

.header_menu ul li {
  font-size: 18px;
}

.header_menu ul li, .header_menu ul li a, .slicknav_nav a, .header_menu ul li.current-menu-item a {
  font-family: 'ZeroesOne';
  letter-spacing: 2.3px;
  color: #EEE;
  font-weight: normal;
}
#header, .header_menu ul li ul li {
  background-color: #222;
}
.header_menu ul li a:hover, .header_menu ul li.current-menu-item > a, .header_menu ul li.current_page_item > a {
  color: #F00;
}

.header_bottom .container  {
  width: 100%;
}

.full_logo_cont {
  margin-left: 10em;
}

/* Mobile form, I think */
.slicknav_menu {
  background-color: #000;
}
.logo:hover {
  /* Doesn't work */
  /* opactiy: 1; */
}

/* Buttons and Input */
select, input {
  color: black;
}

a {
  /*color: #66F;*/
  color: #F00;
  /*color:white;*/
} 

/* Beta Signup Subscribe Form CSS Changes */
.sml_subscribe {
  text-align:center;
}

.sml_namelabel, .sml_emaillabel {
  color: gray;
  text-align: left;
  text-transform:uppercase;
}

.sml_nameinput, .sml_emailinput {
  height:40px;
  font-size: 20px;
  border: 0px;
  /*text-transform:uppercase;*/
  padding-left:10px;

  border-radius: 10px;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.sml_submitbtn {
  margin-top:.75em;
  background-color:red;
  color:black;
  border:0px;
  font-size:20px;

  
  height:35px;

  border-radius: 5px;
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  -webkit-border-radius: 5px;

  cursor:pointer;

}

.sml_submitbtn:hover {
  background-color:gray;

}

.hidden {
  display:none;
}

.esu-form-div input {
  color: black;
}

/********************* Home Page Styling ***************************/ 
#homepage-blurb {
  /* background-color:#222; */
  padding-left:5em;
  padding-right:5em;
  padding-top:2em;
  padding-bottom:2em;
  font-size:1.5em;
  color:#EEE;
  font-family:ZeroesOne;
  text-transform:uppercase;
  letter-spacing: 0.5em;
}

#room-title {
  padding-top:2em;
  text-transform: uppercase;
  text-align: center;
  font-size:3.0em;
  color:#F00;
}

.homepage-blurb-title {
  padding-top:1em;
  padding-bottom:0.5em;
  text-transform: uppercase;
  text-align: center;
  font-size:2.0em;
}

.homepage-blurb-text {
  margin-bottom: 10em;
  line-height:2.5em;
}

/********************** Home Page Slider Styling *************************/
.slider-button {
  background-color: #E83E34;
  font-family: ZeroesOne;
  width: 5em;
  height: 5em;
}

/********************** Home Page Collage Styling ***********************/
.jfbalbum div {
  opacity: 100 !important;
  float: left;
}

.Image_Wrapper a img {
  height: 180px;
  width: 120px;
  padding-right: 12px !important;
  padding-bottom: 12px !important;
}

.home-photo-section {
  font-family: ZeroesOne;
  text-align: center;
}

.home-photo-title {
  font-family: ZeroesOne;
  letter-spacing: 10px;
  text-align:center;
}

.home-photo-subtitle-text {
  font-size: 25px;
  font-family: ZeroesOne;
  letter-spacing: 10px;
}

.home-photo-subtitle {
    padding-top: 2em;
    padding-bottom: 2em;
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
}

.home-photo-subtitle > span {
    position: relative;
    display: inline-block;
}

.home-photo-subtitle > span:before,
.home-photo-subtitle > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: white;
}

.home-photo-subtitle > span:before {
    right: 100%;
    margin-right: 15px;
}

.home-photo-subtitle > span:after {
    left: 100%;
    margin-left: 15px;
}

.home-photo-text {
  font-family: ZeroesOne;
  letter-spacing: 9px;
  line-height: 50px;
  text-align:justify;
}

/********************** Specific Room Page Styling *******************************/
.room-specs, .room-description {
  padding-top:1em;
  font-size:1.2em;
  line-height:1.2em;
}

.room-specs {
  text-align: center;
}

.room-description {
  text-align: justify;
  font-family: Avenir;
  font-size: 1.25em;
  letter-spacing: 2.56px;
  line-height: 1.5em;

}

.room-details, .room-picture {
  text-align: center;
}

.room-details h1 {
  text-transform: uppercase;
  font-family: ZeroesOne;
  letter-spacing: 5.12px;
  font-size: 3em;
  line-height: 1em;
}

.room-details div {
  font-family: Avenir;
  line-height: 2.5em;
  letter-spacing: 2.56px;
  font-size: 1.5em;
   
}


/************************** Room Page Styling *********************/
.rooms-page-header {
  font-family: Avenir;
  font-size: 3em;
  letter-spacing: 2.3px;
  line-height: 1em;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.rooms-location {
  font-family: Avenir;
  font-size: 3em;
  font-weight: 300;
  line-height: 3em;
  letter-spacing: 7.88px;
  text-align: center;
  text-transform: uppercase;
  margin-top: 3em;
}

.room-name {
  font-size: 1.5em;
  letter-spacing: 3.5px;
  font-family: ZeroesOne;
  text-align: center;
  line-height: 2em;
  text-transform: uppercase;
}

.room-difficulty {
  font-size: 1em;
  letter-spacing: 3.15px;
  font-family: ZeroesOne;
  text-align: center;
  line-height: 1em;
  text-transform: uppercase;
}

.room-info p {
  text-align: center;
}

.room-info div {
  padding-right: 0.5em;
  padding-left: 0.5em;
}

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 

    /* Text Formatting */
    font-family: Avenir;
    font-size: 3em;
    font-weight: 300;
    line-height: 3em;
    letter-spacing: 7.88px;
    text-align: center;
    text-transform: uppercase;
    margin-top: 1em;
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: white;
}

.strike > span:before {
    right: 100%;
    margin-right: 15px;
}

.strike > span:after {
    left: 100%;
    margin-left: 15px;
}


/********************* Font Awesome Styling CSS *******************/
.fa {
  color: red;
  zoom: 1.75;
  margin-bottom: 1em;
}

.fa:hover {
  color: white;
}


/* Fix Scheduling Table: Centering */
table.my-appointments tbody tr {
  text-align: center;
}


/*********************** LOGIN PAGE ***************************/
form#loginform {
  
}

/* Trying to center the login form when smaller screen - NOT WORKING */
div#theme-my-login {
  text-align: center;

  margin-left: auto;
  margin-right: auto;
}
div#single_cont {
  margin-left: auto;
  margin-right: auto;
}
ul.tml-action-links {
  text-align: center;
}

#user_login, #user_pass {
  color: black
}

form#loginform p label, form#registerform p label, form#lostpasswordform p label  {
  color:black;
  text-transform:uppercase;
}

/* Login Page: Font-awesome icons */
.tml-action-links .fa {
  font-size: 10px;
  margin-right: 3px;
  margin-left: 10px;
  color:black;  
}

.tml-action-links .fa:hover {
  color: #F00;
}

.fa-text {
  font-family: 'AvenirLight';
}


/********************* Buttons **********************/
input[type=text] {
  height:40px;
  font-size: 20px;
  border: 0px;
  
  padding-left:10px;

  border-radius: 10px;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
}

input[type=password] {
  height:40px;
  font-size: 20px;
  border: 0px;
  
  padding-left:10px;

  border-radius: 10px;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
}

input[type=submit], .team-building-button {
  font-family: 'ZeroesThree';
  text-transform: uppercase;

  margin-top:.75em;
  background-color:red;
  color:black;
  border:0px;
  font-size:20px;

  height:35px;

  border-radius: 5px;
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  -webkit-border-radius: 5px;

  cursor:pointer;
}


input[type=submit]:hover, .team-building-button:hover {
  background-color:gray;
}

.team-building-button {
  display: flex;
  justify-content: center;
  align-self: center;
  flex-direction: column;
  text-align: center;
  margin-right: 25%;
  margin-left: 25%; 
  height: 50px;
}

input[type=button] {
  /*font-family: 'Arial';
  text-transform: uppercase;

  margin-top:.75em;*/
  margin-right:.75em;
  background-color:white;
  /*color:black;
  border:0px;
  font-size:14px;
  font-weight:bold;

  height:25px;

  /*border-radius: 5px;
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  -webkit-border-radius: 5px;

  cursor:pointer;*/
}

.appointments-confirmation-buttons {
  margin-top:2em !important;
}

input[type=button]:hover {
  background-color:lightgray;
}


textarea {
  font-family: 'AvenirLight';
  font-size: 20px;
  border: 0px;
  color: black;
  
  padding-left:10px;
  padding-top: 10px;
  padding-right: 8px;

  border-radius: 10px;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
}

/********************* Booking Area Styling **************************/
.booking-information-header {
  text-transform: uppercase;
  font-size: 1.5em;
  letter-spacing: 7.5px;
  text-align: center;
  font-family: Avenir;
}

.booking-information-wrapper {
  background-color: #242424;
  padding-top: 2em;
  padding-bottom: 2em;
  padding-right: 2em;
  padding-left: 2em;
  margin-top: 5em;
  margin-bottom: 5em;
}

.booking-information {
  font-family: Avenir;
  font-size: 1.25em;
  letter-spacing: 2px;
  line-height: 1.5em;
  word-break: break-word;
}

/********************* Appointments Calendar Styling CSS *******************/

.appointments-wrapper, .appointments-legend, .appointments-pagination {
}

/* padding */
.appointments-my-appointments {
  /*margin-bottom: 2em;*/
  display:none;
}

/* hide unavailable times */
.app_break {
  display: none;
}

.app_timetable {
  margin-left: 0px;
}

.app_timetable_cell.app_past, .app_timetable_cell.now, .app_timetable_cell.app_blocked {
   display: none;
}

.app_timetable_title {
  font-size: 1.25em;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.appointments-confirmation-wrapper .fa {
  color: white;
  padding-right: 0.1em;
}

.appointment-info {
  padding-left: 3em;
}

.appointments-confirmation-wrapper .appointment-group-size {
  margin-left: -3em;
}

.players-title {
  font-size: 1.25em;
}

span.players-title {
  float: none;
  display:inline;
}

.appointments-confirmation-wrapper .fa-envelope, .appointments-confirmation-wrapper .fa-phone, .appointments-confirmation-wrapper .fa-user-edit {
  font-size: 1em;
  margin-right: 3px;
}

.appointment-input-fields {
  text-align: center;
}

.text-center {
  text-align: center;
}

.full-width {
  width: 100%;
}

#processingErrorMessage {
  padding-bottom: 1em;
}

.wrapper-dropdown-2 {
    /* Size and position */
    position: relative; /* Enable absolute positioning for children and pseudo elements */
    /* margin: 0 auto;*/
    margin: 0.5em 0.5em;
    /* Styles */
    background: transparent;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #888888;
    cursor: pointer;
    outline: none;
    font-size: 1.5em;
}

.wrapper-dropdown-2:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: grey transparent;
}

.wrapper-dropdown-2 .dropdown {
  /* Size & position */
    position: absolute;
    top: 100%;
    left: -5px;
    right: 0px;

    /* Styles */
    background: rgba(230, 230, 230, 0.2);
    transition: all 0.3s ease-out;
    list-style: none;

    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

.wrapper-dropdown-2 .dropdown li a {
    display: block;
    text-decoration: none;
    color: white;
    border-left: 5px solid;
    padding: 10px;
    transition: all 0.3s ease-out;
}

.wrapper-dropdown-2 .dropdown li:nth-child(1) a { 
    border-left-color: #00ACED;
}

.wrapper-dropdown-2 .dropdown li:nth-child(2) a {
    border-left-color: #4183C4;
}

.wrapper-dropdown-2 .dropdown li:nth-child(3) a {
    border-left-color: #3B5998;
}

.wrapper-dropdown-2 .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}

/* Hover state */

.wrapper-dropdown-2 .dropdown li:hover a {
    color: grey;
}

.wrapper-dropdown-2.active:after {
    border-width: 0 6px 6px 6px;
}

.wrapper-dropdown-2.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

.app_workers {
  display:none;
}

.red-color {
  color:red;
}

.appointments-confirmation-wrapper legend {
  height: 41px;	color: #FFFFFF;	font-family: Avenir;	font-size: 2.25em;	font-weight: 300;	letter-spacing: 0.1em;	line-height: 41px;
  text-align: center;
  text-align: -moz-center;
  text-transform: uppercase;
  padding-top: 1.5em;
  border-bottom: 2px solid #888888;
  padding-left: 1em;
  padding-right: 1em;
  margin-left:auto;
  margin-right:auto 
}

.appointments-confirmation-wrapper {
  margin-bottom:2em;
  margin-top:2em;
  background-color: #242424;
}

.appointments-name-field, .appointments-email-field, .appointments-phone-field {
  
}

.appointments-name-field input, .appointments-email-field input, .appointments-phone-field input {
  background-color: transparent;
  border-bottom: 1px solid #888888;
  border-radius: 0px;
  outline: none;
  width: 100%;
  color: white;
}

#appointments-field-coupon {
  width: 12em;
  border-radius: 0px;	
  color: black;
}

#error {
  color: red;
}

#appointments-input-fields .appointments-field-entry {
  font-size: 20px;
  border: 0px;
  border-bottom: solid 2px #EEE;
  padding-left:10px;
  background-color:transparent;
  color: #EEE;
  border-radius: 0px;
  webkit-border-radius: 0px;
  margin-bottom:0.5em;
}

#appointments-input-fields .appointments-field-entry:focus {
  outline:none;
  border-bottom:solid red 2px;
}
#appointments-input-fields .fa {
  margin-right:10%
}

[placeholder]:focus::-webkit-input-placeholder {
  transition: all 0.5s ease;
  transform: translate3d(0, -16px, 0);
  font-size:12px;
  font-color: white;
  /*opacity: 0.5;*/
}

.appointments-buttons span{
  text-decoration:none;
  text-align: center;
  color:black;
  display:block; /* important */
  width:100%;
}

.appointments-buttons, .first-link{
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;     
}

.appointments-buttons {
  height: 56px;	
  width: 276px;	
  border-radius: 8px;	
  background-color: #E83E34;	
  display: flex;
  align-items: center;
}

.appointments-confirmation-wrapper fieldset {
  border:none;
}

.appointments-confirmation-wrapper fieldset .payment-info div  {
  margin: 0 0 0 0px;
}

.appointments-buttons-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.alpha-only { 
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.appointments-buttons:hover{
   background-color: gray;
}

.appointments-buttons span:hover{
  text-decoration: none;
  cursor: pointer; cursor: hand; 
}

.appointments-buttons .first-link{
  width: 100%;	
  color: #FFFFFF;	
  font-family: "ZeroesOne";	
  font-size: 28px;	
  letter-spacing: 3.58px;	
  line-height: 29px;	
  text-align: center;  
  text-transform: uppercase;
}

.error-message {
  color:red;
  text-transform: uppercase;
}

.app_monthly_schedule_wrapper table thead, .app_monthly_schedule_wrapper table tbody, .app_monthly_schedule_wrapper table tfoot, .app_timetable_cell{
  line-height: 3.5em;
}

.app_monthly_schedule_wrapper table tr td, .app_timetable_cell {
  font-family: Avenir;
  font-weight: bolder;
}

.appointments-list table td, .app_timetable_cell {
  font-size: 1em;
}

.app_timetable_wrapper {
  padding-top: 2em;
  width: 100%;
}

.calendar-title {
  font-size: 1.75em;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.25em;
  padding-bottom: 1em;
}

#appointments-field-customer_group-size {
  color: white;
}

.appointments-wrapper h3, .appointments-instructions {
  font-family: Avenir;
  font-weight: bolder;
}

.appointments-pagination .next, .appointments-pagination .previous {
  margin-top: 1em;
}

.appointments-pagination .next {
  margin-right: 1em;
}

.appointments-pagination .previous {
  margin-left: 1em;
}

.appointments-pagination .next a, .appointments-pagination .previous a {
    text-shadow: none;
    padding: 0.5em;
    color: black;
    font-family: ZeroesOne;
    text-transform: uppercase;
}

.appointments-pagination .next a:hover, .appointments-pagination .previous a:hover {
  color: red;
}


.app_monthly_schedule_wrapper, .appointments-wrapper, .appointments-legend {
  margin-bottom: 2em;
  width: 100%; 
}

/********************** APPOINTMENT-FORM STYLING *****************************/

#check-coupon-button {
  background-color: red;
  color: rgba(0,0,0,0.54);	font-weight: 900;	letter-spacing: 3.6px;
  border-radius: 0px;
  height:2em;

}

#check-coupon-button {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;     
}

#check-coupon-button:hover{
  background-color: gray;
}

#check-coupon-message {
  margin-top: 1em;
}

.total {
  padding-bottom: 0.5em;
  font-size: 2em;
  font-family: Avenir;
  text-align: center;
}

.total span {
  width: auto;
}

.appointments-coupon-field {
  padding-top: 1em;
  padding-bottom: 1em;
  text-align:center;
}

.appointments-coupon-field label input.placeholder {
  text-align: center;
}

.payment-title {
  text-align: center;
  font-size: 1.5em;
  padding-bottom: 1em;
  padding-top:1em;
}

.payment-form-wrapper {
  padding-bottom: 2em;
}

.payment-info {
  background-color: #353535;
  padding-left: 3em;
  padding-right: 3em;
  border-radius: 25px;
}

.appointments-confirmation-service {
  height: 48px;	color: #FFFFFF;	font-family: Avenir;	font-size: 2.0em;	font-weight: 900;	letter-spacing: 0.1em;	line-height: 48px;
}

.appointments-confirmation-start {
  height: 34px;	color: #FFFFFF;	font-family: Avenir;	font-size: 1.5em;	font-weight: 300;	letter-spacing: 0.1em;	line-height: 34px;
} 


/*** UI Dialog Changes ***/

/* hide x button */
.ui-dialog-titlebar-close {
  visibility: hidden;
}

.ui-dialog {
  background-color:#EEE;
}

.ui-dialog-titlebar {
  background-color:#EEE;
  border: none;
  color:black;
  width:100%;
  text-align:center;
}

.ui-dialog-buttonpane {
  padding: 0px 0px 0px 0px;
}


/************************ Team Building Page Styling ************************/

.team-building-hero-header {
	color: #FFFFFF;	font-family: Avenir;	font-size: 65px;	font-weight: 900;	letter-spacing: 8.32px;	line-height: 89px;	text-align: center;
}

.team-building-hero-subtitle {
  color: #FFFFFF;	font-family: Avenir;	font-size: 25px;	font-weight: 300;	letter-spacing: 8.32px;	line-height: 34px;	text-align: center;
  padding:0 10px; 
}

.team-building-text {
  color: #FFFFFF;	font-family: Avenir;	font-size: 18px;	font-weight: 300;	letter-spacing: 3.6px;	line-height: 35px;
  word-break: break-word;
}

.team-building-header {
  color: #FFFFFF;	font-family: Avenir;	font-size: 30px;	font-weight: 500;	letter-spacing: 4.32px;	line-height: 41px;
}

.team-building-quote {
  color: #FFFFFF;	font-family: Avenir;	font-size: 25px;	font-weight: 500;	letter-spacing: 5px;	line-height: 34px;	text-align: center;
  padding-left: 10%;
  padding-right: 10%;
}

.team-building-list ul li:before {    
  font-family: 'FontAwesome';
  content: '\f067';
  margin:0 5px 0 -15px;
  color: #f00;
}

.wp-block-cover {
  height: 35em;
}

/**************************** CONTACT-FORM EDITING ****************************/
.map, .contact-form, .contact-info {
  padding-bottom: 20px;
}
.contact-form, .contact-info {
  /* Add some padding? Not sure how to do so and also include the pure-grids */
}

.contact-form div, .contact-info div {
  padding-bottom: 10px;
}  

.contact-form select {
  color: black;
}
.map div iframe {
  pointer-events: none;
  border: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.contactPage-contact-email a {
  color: #66F;
}
.contactPage-contact-email a:hover {
  color: gray;
}

.fa-envelope, .fa-map-marker, .fa-phone {
  font-size: 12px;
  margin-right: 10px;
}
.fa-phone {
  margin-right: 7px;
}
.fa-envelope {
  font-size: 8px;
  padding-bottom: 5px;
}

.contact-form h2, .contact-info h2 {
  margin-bottom: 1.5em;
  border-bottom: 1px solid #ececec;
  padding-bottom: 10px;
  margin-right: 5.8em;
  /*border-color:#F00;*/
}


.wpcf7-text {
  width: 22em;
}

.wpcf7-textarea {
  width: 22em;
  padding-right: 0px;
}

/************ GOOGLE MAPS ****************/
#googleMap {
  height: 380px;
  width: 100%;
}

/**** Easy Sign Up Form Updates *****/
div.esu-form-div {
    width: 100%;
    text-align: center;
}

/****** Footer Stylings ***********/
.fa-facebook-square {
  color: #3B5998;
}

.fa-twitter-square {
  color: #00aced;
}

.fa-yelp {
  color: #af0606;
}

.fa-google-plus-square {
  color: #dd4b39;
}

.fa-instagram {
  color: #bc2a8d;
}

.fa-tripadvisor {
  color: #00af87;
}

footer {
  margin-top: 1em;
}

/**************** Mobile Stylings ***************/

/* Portrait and Landscape */
/*@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {*/

  @media (max-width:480px) {

    /*************** Desktop and Mobile Only *************/
    .desktop-only {
      display:none;
    }

    .mobile-only {
      display: block;
    }

    /****************** Home Page Styling ****************/

    /* Logo */
    .full_logo_cont {
      margin-left: auto;
    }

    /* Rev Slider Shadow */
    .tp-banner-shadow {
       display: none;
    }

    #homepage-blurb {
      padding-left:1em;
      padding-right:1em;
      padding-top:2em;
      padding-bottom:2em;
      line-height:1.5em;
      font-size:1em;
      /*margin-top:-30em;*/
    }

    .home-photo-title {
      text-align: center;
      width: 100%;
    }

    .homepage-blurb-text, .home-photo-text {
      text-align: justify;
      letter-spacing: 0px;
      width: 100%;
      margin-bottom: 3em;
    }

    #homepage-blurb-title {
      font-size:2.0em;
      line-height:1.5em;
    }

    /* Home Page FB Album */
    .Image_Wrapper a img {
      padding-right: 0px !important;
      padding-bottom: 0px !important;
    }

    /********************* Booking Page Styling *******************/

    /** Booking Page Heading **/
    .single_inside_content h1 {
      line-height: 2em;
    }

    #room-title {
      font-size:2.0em;
    }

    .room-description {
      padding-right:1em;
      padding-left:1em;
    }

    .room-details h1 {
      letter-spacing: 0px;
      line-height: 1em;
      font-size: 2.5em;
    }

    .payment-info {
      padding-left: 2em;
      padding-right: 2em;
    }

    #stripePayment {
      margin-bottom: 2em;
    }

    fieldset legend {
      padding-bottom: 2em;
    }

    .appointment-info {
      padding-left: 0em;
      text-align: center;
    }

    .appointments-confirmation-service {
      padding-bottom: 2em;
    }
    
    .appointments-confirmation-wrapper .appointment-group-size {
      margin-left: 0em;
      text-align: center;
    }

    .appointments-confirmation-wrapper fieldset {
      border:none;
      padding: 0 0 0 0px;
    }


    /********************* Contact Page Styling *********************/

    .wpcf7-text {
      width: 90%;
    }

    .wpcf7-textarea {
      width: 90%;
      padding-right: 0px;
    }

    .contact-form-submit {
      height: 3em;
    }

    .contact-form h2, .contact-info h2 {
        margin-right: 0em;
        /*border-color:#F00;*/
    }

    .footer_copyright_cont .container {
      width: 100%;
    }

    /********************* Team-Building Page Styling *********************/

    .team-building-hero-header {
      font-size: 1.5em;
      letter-spacing: 0em;
      line-height: 2.5em;
    }

    .team-building-button {
      margin-right: 0px;
      margin-left: 0px;
    }

    .team-building-quote {
      padding-left: 0px;
      padding-right: 0px;
      font-size: 1.5em;
    }

    .wp-block-cover {
      height: auto;
    }


}


/* Rooms Dropdown Styling */
/* Dropdown Button */
.dropbtn {
    background-color:transparent;
    color:white;
    padding: 1em;
    font-size: 1em;
    /*border-bottom: 1px solid white;*/
    font-family: ZeroesThree;
    text-transform: uppercase;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family: ZeroesThree;
    text-transform: uppercase;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover { color: white; }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: gray;}


/* Stripe Formatting */
/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
 .StripeElement {
  box-sizing: border-box;

  height: 40px;

  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

#payment-form {
  margin-bottom: 0.75em;
}

/* FareHarbor */
.fh-button-top {margin-top: -4px !important;}
.fh-button-mobile {display: none;}
@media (max-width: 767px){
.fh-button-mobile {display: inherit;}
}