@import url(https://fonts.googleapis.com/css2?family=Raleway&family=Roboto+Slab:wght@600&family=Oswald:wght@700&family=Square+Peg);
h2 {
  vertical-align: center;
  text-align: center;
}

html,
body {
  margin: 0;
  height: 100%;
  background-color: #333;
  /*background-image: url('../img/background.jpg');*/
}

#container_outer { position: relative; overflow: hidden; width: 100%; height: 100%; background-color: #000; background-size: cover; background-repeat: no-repeat; background-image: url('../img/background-sexy-01.jpg'); }
#container_inner { position: absolute; top: 0px; left: 5%; width: 80%; height: 100vh; margin: 0 auto; }

.show { display: block !important }

a { color: #fff; font-weight: 600;}

.time::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    width: 70%;
}

input[type=text], input[type=time] { padding-left: 4%; color: #666; }
select { padding-left: 4%; color: #666; }
input[type="file"] { display: none; }

* {
  font-family: "Raleway";
  box-sizing: border-box;
}

.logo { color: #f634fc; font-size: 24pt; font-weight: 900; font-family: 'Square Peg', cursive; padding-left: 20px; cursor: pointer; }

.top-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color:  #000;
  /*background-color:rgba(51,51,51,0.7);*/
  /*background: linear-gradient(to bottom, #666, #333);*/
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #fff;
  height: 50px;
  width: 100%;
  padding: 1em;
  position: fixed; 
  z-index: 100;
}

.menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
  z-index: 110;
}

.menu > li {
  margin: 0 1rem;
  font-size: 12pt;
}

.menu > li:hover {
  color: #f634fc;
  cursor: pointer;
}

.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #fff;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: "";
  margin-top: -8px;
}

.menu-button::after {
  content: "";
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

/* FORM */
.form_title { float: left; padding: 2% 0% 1% 4%; color: #f634fc; font-size: 36pt; font-weight: 900; font-family: 'Square Peg', cursive; }
.form_step { float: right; padding: 2% 4% 1% 0%; color: #f634fc; }
.form_text { padding: 1% 0% 2% 4%; color: #fff; font-size: 16pt; line-height: 20pt; font-weight: 200; width:96%; }
.form_label { float: left; padding: 1% 0% 1.5% 4%; color: #fff; font-size: 16pt; font-weight: 300; }
.form_input { float: right; margin-right: 4%; margin-top: .85%; max-width: 30%; min-width: 30%;  }
.form_input_submit_pink { border-radius: 5px; font-size: 10pt; padding: 10px; background-color: #fff; color: #f634fc; border: 1px solid #e1e1e1; cursor: pointer; outline: none; }
.form_input_submit_pink:hover { background-color: #f634fc; color: #fff; outline: none; }
.form_input_wide { width: 100%; height: 35px; border: 1px solid #a1a1a1; border-radius: 5px; outline: none; font-size:  14pt; }
.form_input_modal { width: 93.3%; height: 45px; padding-left: 10px; border: 1px solid #a1a1a1; border-radius: 5px; outline: none; font-size: 14pt; }
.form_input_narrow { width: 30%; height: 45px; padding-left: 10px; border: 1px solid #a1a1a1; border-radius: 5px; outline: none; font-size:  14pt; }

/* ABOUT & CTA */
.about_container { float: left; width: 60%; padding-top: 4%; padding-left: 2%; max-height: 70%; }
.form_input_submit { border-radius: 5px; width: 80%; font-size: 14pt; font-weight: 900; padding: 10px; background-color: #f634fc; color: #fff; border: 1px solid #851488; cursor: pointer; outline: none; }
.form_input_submit:hover { background-color: #f700ff; color: #fff; outline: none; }

/* PHONE */
/* The device with borders */
.smartphone {
  position: relative;
  float: left;
  width: 320px;
  height: 500px;
  margin-top: auto;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
}

/* The horizontal line on the top of the device */
.smartphone:before {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 10px;
}

/* The circle on the bottom of the device */
.smartphone:after {
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}

/* The screen (or content) of the device */
.smartphone .smartphone_content {
  padding-top: 20px;
  width: 290px;
  height: 380px;
  background: white;
  overflow-y: scroll;
}

.smartphone .smartphone_content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; }
.smartphone .smartphone_content::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; }
.smartphone .smartphone_content::-webkit-scrollbar-thumb { background-color: #a1a1a1; }


/* MODAL */
.modal a.close-modal[class*="close-modal"]:after {
  top: -15px;
  right: -15px;
  width: 30px;
  height: 30px;
  color: #fff;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  text-indent: 0;
  background: #cb68ce;
  border: 2px solid #fff;
  -webkit-border-radius:  26px;
  -moz-border-radius:     26px;
  -o-border-radius:       26px;
  -ms-border-radius:      26px;
  -moz-box-shadow:    1px 1px 5px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
  box-shadow:         1px 1px 5px rgba(0,0,0,0.5);
  content:  'X';
}
.modal_background { background-color: rgba(15,15,15,0.8); }
#container_inner { position: absolute; top: 100px; left: 10%; width: 80%; margin: 0 auto;}
.modal_text_1 { padding: 0px 3px 10px 0px; text-align: center; color: #f634fc; font-size: 48pt; font-weight: 900; font-family: 'Square Peg', cursive; }
.modal_text_2 { padding: 0px 3px 20px 0px; text-align: center; color: #fff; font-size: 14pt; }
.modal_text_3 { padding: 0px 3px 10px 0px; text-align: center; color: #929292; font-size: 12pt; }
.modal { max-width: 60vw; min-width: 60vw; }
.modal_wide { max-width: 80vw; min-width: 80vw; }
.modal_narrow { max-width: 40vw; min-width: 40vw; }

/* PRIVATE */
.private_box { float: left; width: 30%; height: 140px; color: #fff; border-radius: 15px; border: 3px solid #666; margin-right: 4%; margin-bottom: 4%; background: rgba(55,55,55,1); text-align: center; padding: 10px; }
.private_box:hover { border: 3px solid #f634fc; cursor: pointer; }
.private_box_last { margin-right: 0%; }
.private_numeral { font-family: 'Roboto Slab', serif; margin: 0 auto; font-size: 48pt; font-weight: 900; }

/* PACKAGES */
.packages_box { float: left; width: 48%; height: 200px; color: #fff; border-radius: 15px; border: 3px solid #666; margin-right: 4%; margin-bottom: 4%; background: rgba(55,55,55,1); text-align: center; padding: 10px; }
.packages_box:hover { border: 3px solid #f634fc; cursor: pointer; }
.packages_box_last { margin-right: 0%; }
.packages_numeral { font-family: 'Roboto Slab', serif; margin: 0 auto; font-weight: 900; color: #fff; font-size: 40pt; }
.packages_numeral span { color: #f634fc; font-size: 42pt; font-weight: 900; font-family: 'Square Peg', cursive; }
.packages_description { color: #f634fc; font-size: 22pt; font-weight: 600; font-family: 'Square Peg', cursive; }
.packages_description span { color: #f634fc; font-size: 22pt; font-weight:600; font-family: 'Square Peg', cursive; }
.packages_extra { font-size: 12pt; line-height: 14pt; margin-top:1%; }

/* SOCIAL */
.social_box { float: left; width: 30%; height: 140px; color: #fff; border-radius: 15px; border: 3px solid #666; margin-right: 4%; margin-bottom: 4%; background: rgba(55,55,55,1); text-align: center; padding: 10px; }
.social_box:hover { border: 3px solid #f634fc; cursor: pointer; }
.social_box_last { margin-right: 0%; }
.social_numeral { font-family: 'Roboto Slab', serif; margin: 0 auto; font-size: 48pt; font-weight: 900; }

/* VIP */
.vip_box { float: left; width: 48%; height: 140px; color: #fff; border-radius: 15px; border: 3px solid #666; margin-right: 4%; margin-bottom: 4%; background: rgba(55,55,55,1); text-align: center; padding: 10px; }
.vip_box:hover { border: 3px solid #f634fc; cursor: pointer; }
.vip_box_last { margin-right: 0%; }
.vip_numeral { font-family: 'Roboto Slab', serif; margin: 0 auto; font-size: 48pt; font-weight: 900; }

/* DATE PICKER */
.ui-datepicker {
    width: 300px;
    height: 300px;
    margin: 5px auto 0;
    font: 12pt Raleway, sans-serif;
    /*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);*/
}

    .ui-datepicker table {
        width: 100%;
    }

.ui-datepicker-header {
    background: #f634fc;
    color: #ffffff;
    font-family:'Raleway';
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #111;
}

.ui-datepicker-title {
    text-align: center;
    font-size: 15px;

}

.ui-datepicker-prev {
    float: left;
    cursor: pointer;
    background-position: center -30px;
}

.ui-datepicker-next {
    float: right;
    cursor: pointer;
    background-position: center 0px;
}

.ui-datepicker thead {
    background-color: #f7f7f7;

    /*border-bottom: 1px solid #bbb;*/
}

.ui-datepicker th {
    background-color:#c826cd;
    text-transform: uppercase;
    font-size: 8pt;
    color: #fff;
    /*text-shadow: 1px 0px 0px #fff;*/
    /*filter: dropshadow(color=#fff, offx=1, offy=0);*/
}

.ui-datepicker tbody td {
    padding: 0;
    /*border-right: 1px solid #808080;*/
}

    .ui-datepicker tbody td:last-child {
        border-right: 0px;
    }

.ui-datepicker tbody tr {
    border-bottom: 1px solid #bbb;
}

    .ui-datepicker tbody tr:last-child {
        border-bottom: 0px;
    }

.ui-datepicker a {
    text-decoration: none;
}

.ui-datepicker td span, .ui-datepicker td a {
    display: inline-block;
    /*font-weight: bold;*/
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #ffffff;
    /*text-shadow: 1px 1px 0px #fff;*/
    /*filter: dropshadow(color=#fff, offx=1, offy=1);*/
}

.ui-datepicker-calendar .ui-state-default {
      background: #fff;
      color:#000;
      height:40px;
      width:40px;

}

.ui-datepicker-calendar .ui-state-hover {
    background: #f634fc;
    color: #FFFFFF;
}

.ui-datepicker-calendar .ui-state-active {
    background: #f634fc;
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
    -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
    color: #e0e0e0;
    text-shadow: 0px 1px 0px #4d7a85;
    border: 1px solid #55838f;
    position: relative;
    margin: -1px;
}

.ui-datepicker-unselectable .ui-state-default {
    background: #D6E4BE;
    color: #000;
}

.scroll_through_phone { text-align: center; font-size: 14pt; color: #fff; width: 100%; line-height: 24pt; }

#form_1 { display:  none; background: rgba(219, 219, 219, 0.15); border-radius: 15px; height: 80%; width: 100%; z-index: 100; margin-bottom: 200px; }
#form_2 { display: none; background: rgba(0, 0, 0, 0.75); border-radius: 15px; }
#form_3 { display: none;  background: rgba(219, 219, 219, 0.15); border-radius: 15px; height: 80%; width: 100%; z-index: 100; margin-bottom: 400px; }
.form_button_container { text-align: center; padding: 2% 0% 4% 0%; }

.upload_text { font-size: 14pt; position: relative; top: -5px; }

#verification_label { display: inline-block; height: 60px; width: 60%; padding-top:5px; font-size: 12pt; margin: 4%; }


@media (max-width: 700px) {
  .menu-button-container {
    display: flex;
  }
  .menu {
    position: absolute;
    top: 0;
    margin-top: 50px;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    color: #000;
    position: relative; top: -15px;
  }
  #menu-toggle:checked ~ .menu li {
    border: 1px solid #333;
    height: 2.5em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .menu > li {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: #333;
    background-color: #e1e1e1;
  }
  .menu > li:not(:last-child) {
    border-bottom: 1px solid #444;
  }

  .about_container { width: 92vw; position: relative; top: 4vh; left: -6vw; }
  .scroll_through_phone { display: none; }

  #container_outer { overflow: auto; background-image: none; }

  #form_1 { display: none; background: none; width: 92vw; height: 100%; position: relative; top:  0vh; left: -6vw; z-index: 0; }
  #form_2 { display: none; background: #000; }
  #form_3 { display: none; background: none; width: 92vw; height: 100%; position: relative; left: -6vw; z-index: 0; }

  /*#form_1 { background: rgba(219, 219, 219, 0.15); border-radius: 15px; height: 80%; width: 100%; z-index: 100; margin-bottom: 200px; } */

  .form_label { float: none; margin-top: 2vh; margin-bottom: 1vh; padding-right: 4vw; }
  .form_input { float: none; }

  .form_input_wide { width: 85vw; position: relative; left: 4vw; }
  .form_input_submit_pink { width: 75vw; }
  #verification_label { width: 75vw; position: relative; left: -4vw; }
  .form_button_container { text-align: center; padding: 2% 0% 4% 0%; margin-top: 2vh; }

  .upload_text { font-size: 10pt; position: relative; top: -5px; }

  .modal { max-width: 98vw; min-width: 98vw; position: absolute; top: 20vh; left: 2vw; }
  .modal_text_2 { padding: 0px 3px 20px 0px; text-align: center; color: #fff; font-size: 12pt; }
  .form_input_submit { width: 85vw; font-size: 10pt; }
  .smartphone { display: none; }

  .packages_numeral { font-family: 'Roboto Slab', serif; margin: 0 auto; font-weight: 900; color: #fff; font-size: 24pt; }
  .packages_numeral span { color: #f634fc; font-size: 24pt; font-weight: 900; font-family: 'Square Peg', cursive; }
  .packages_description { color: #f634fc; font-size: 18pt; font-weight: 600; font-family: 'Square Peg', cursive; }
  .packages_description span { color: #f634fc; font-size: 18pt; font-weight:600; font-family: 'Square Peg', cursive; }
  .packages_extra { display: none; }
}