/* Icon used to open the contact form - fixed at the bottom of the page */
.cal-icon {
margin-top:0;
display: flex;
flex-direction:row;
justify-content: center;
align-items: center;
font-size:38px;
color: #ff0000;
cursor: pointer;
}

/* Button used to open the contact form - fixed at the bottom of the page */
.cal-button {
  background-color: #ff0000;
  padding: 10px 15px;
  color: #000;
  font-size:18px;
  font-weight:400;
  border: none;
  cursor: pointer;
  opacity: 1;
  position: fixed;
  z-index:1000;
bottom: 5px;
}

.cal-button-1 {
right: 5px;
}

.cal-button-2 {
background-color: #df9f22;
display:inline-block;
bottom: 5px;
left: 5px;
}

.close-button{
background-color:transparent;
padding:0;
display: block;
border:0;
right:-10px;
top:-10px;
position:absolute;
z-index:3000;
}

/* The popup form - hidden by default */
.popup-container {
display: none;
position:fixed;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
z-index: 1000;
}

.popup-container::before {
background: rgba(0,0,0, 0.7);
content: ' ';
left:-100%;
right:-100%;
top: -100%;
bottom:-100%;
position: absolute;
z-index: -100;
}

.form-popup {
background-color:#FFF;
padding:20px;
position:relative;
z-index:2000;
}

/* google calendar iframe */
.google-calendar {
width:85vw;
max-width:800px;
height:70vh;
max-height:600px;
}


/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* mobile devices (min-width:650px) 
---------------------------------------------------*/

@media screen and (min-width:650px) {

.cal-button {
padding: 12px 25px;
font-size:21px;
}

}