/*   background-color: #ffc3bd; dark color: #feb3ab */

html, body, #wrapper {
       height:100%;
       width: 100%;
       margin: 0;
       padding: 0;
       border: 0;
}
#wrapper td {   vertical-align: middle;   text-align: center;}
section {
  height: 100vh;
}
img#bottle {
    /* height: auto; */
    /* max-width: 60%; */
    height: 100vh;
}



textarea#message {
    height: 18vh;
}




/*  SECTIONS   */



.bottle{
  height: 100vh;

}






/*  SECTIONS   */




@font-face{
    font-family: "ITC Avant Garde Pro XLT";
    src: url('fonts/avant_garde_pro/ITCAvantGardePro-XLt.otf'),
    url('fonts/avant_garde_pro/ITCAvantGardePro-XLt.otf'); /* IE */
}
@font-face{
    font-family: "ITC Avant Garde Pro Md";
    src: url('fonts/avant_garde_pro/ITCAvantGardePro-Md.otf'),
    url('fonts/avant_garde_pro/ITCAvantGardePro-Md.otf'); /* IE */
}

@font-face{
    font-family: "ITC Avant Garde Pro Bk";
    src: url('fonts/avant_garde_pro/ITCAvantGardePro-Bk.otf'),
    url('fonts/avant_garde_pro/ITCAvantGardePro-Bk.otf'); /* IE */
}


.header {
  min-height: 60px;
  height:60px;
  width: 97%;
  margin: 0 auto;
}

.container {

    width:100%
}

div#pre_order_wrapper1{
  display: inline-block;
}

#page {
  width: 99%;
  margin: 0 auto;
  height: 100%;
  min-height: 100%;
  display: flex;

  flex-direction: column;
}
#content {
  display: flex;
    flex: 1;
    margin: 0 auto;
    width: 575px;
}

html, body {
  height: 100%;
}

.fill {
  min-height: 100%;
  height: 100%;
}
.vertical-align {
    display: flex;
    align-items: center;
}
.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}

.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    vertical-align: middle;
    display: inline-block;
}

.parentbox {
    width:100%;
    height:100%;
    box-sizing: border-box;

    border-style:none;
    margin: 0 auto;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
    height: auto;
    display: -webkit-inline-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}

.parentbox:before {      /* create a full-height inline block pseudo-element */
    content: ' ';
    display: inline-block;
    vertical-align: middle; /* vertical alignment of the inline element */
    height: 100%;
}

.childbox {
    display: inline-block;
    vertical-align: middle;          /* vertical alignment of the inline element */
    font: 16px/1 Arial, sans-serif;  /* reset the font property */

    padding: 0px 10px;
}

.centered-img{

    max-width: 100%;
    height: auto;

}
.centered-img-loader{

    height: auto;

}

input, textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}


.footer_1 {
    height: 17px;
    text-align: center;
}



/*  AGE WRAPPER */
#age-buttons-wrapper {
   bottom:0;
   width:100%;
   height:30px;   /* Height of the footer */
   text-align: center;
}

button.age-buttons.yes-age-button {
    width: 45%;
    float: left;
}
button.age-buttons:hover {
    background-color: #feb3ab;
}

button.age-buttons.no-age-button {
    width: 45%;
    float: right;
}
#age_wrapper{

    padding-bottom: 20px;

}


button.age-buttons {
    cursor: pointer;
    background-color: #ffc3bd;
    border-style: none;
    color: white;
    font-family: ITC Avant Garde Pro Bk;
    letter-spacing: 2px;
    width: 48%;
    height: 30px;
    line-height: 30px;
    font-size: 1em;
}





/* Make the parentbox width equal to the media query*/
@media only screen and (max-height: 434px)   {
  div#home-page {
      box-sizing: border-box;
      max-width: 60%;

  }
  div.pages {
      box-sizing: border-box;
      max-width: 60%;

  }

}

@media only screen and (max-height: 550px)   {
  div#precept-page {
      height: 100%;
      max-width: 50%;
      box-sizing: border-box;

  }

}

#hamburger_menu{
  display: none;
}

.menu_social_icon {
    padding: 0px 13px;
}

@media only screen and (max-width: 605px)   {

  #content {
      width:100%;
  }
  div#nav_menu {
      display: none;
  }




  /*  BURGER MENU  */



  header{
  	width:100%;
  	height:60px;
  	line-height:60px;
  }

  #hamburger_menu{
    display: block;
  }
  .hamburger{
      background:none;
      top:0;
      margin: 0 auto;
      line-height:45px;
      padding:5px 15px 0px 15px;
      color:#999;
      border:0;
      font-size: 2.4em;
      font-weight:bold;
      cursor:pointer;
      outline:none;
      z-index:1;
      display: flex;
      justify-content: center;
    }

  .cross{
    background:none;
    top:0px;
    margin: 0 auto;
    right:0;
    padding:7px 15px 0px 15px;
    color:#999;
    border:0;
    font-size:5em;
    line-height:65px;
    display: flex;
    font-weight:bold;
    cursor:pointer;
    outline:none;
    z-index:1;
  }
  .hamburger.precept{
    color:#fff;

  }
  .cross.precept{
    color:#fff;

  }
  .menu{z-index:1000000;font-weight:bold;font-size:0.8em;position: relative;background: rgba(255, 255, 255, 1.0);text-align:center;font-size:12px;}
  .menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
  .menu li {display: block;   padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
  .menu li:hover{display: block;    background:#ffffff; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
  .menu ul li a { text-decoration:none;  margin: 0px; color:#666;}
  .menu ul li a:hover {  color: #666; text-decoration:none;}
  .menu a{text-decoration:none; color:#666;}
  .menu a:hover{text-decoration:none;  color: #feb3ab }
.mce_inline_error {font-family: ITC Avant Garde Pro Bk;color: #feb3ab;font-size: 10px;}
  .glyphicon-home{
    color:white;
    font-size:1.5em;
    margin-top:5px;
    margin:0 auto;
  }
  header{display:inline-block; font-size:12px;}
  span{padding-left:20px;}
  a{color:#336699;}

}

@media only screen and (max-width: 700px)   {

  img#logo-img.centered-img{
    max-width: 60%;
  }

}
/* NAVIGATION MENU*/



div#center {
    height: 100%;
    line-height: 60px;

}
div#left {
    background-color: rgba(255, 222, 129, 0.32);
    height: 100%;
}
div#right {
    background-color: rgba(255, 222, 129, 0.32);
    height: 100%;
}

.menu_section{
  width: 33.33%
}
div#nav_menu {
    height: 100%;

}

.nav_buttons_wrapper {
    width: 367px;
    height: 100%;
    margin: auto;
    background-color: rgba(251, 255, 229, 0.97);
    color: #ffc3bd;
    font-size: large;
}
#nav_menu{
  display:table;
  width:100%;
}
#nav_menu div{
  display:table-cell;
  vertical-align: middle;
}
.nav_button{
  float: left;
  text-align: center;

}
a, a:link, a:visited {
  font-family: ITC Avant Garde Pro Bk;
      font-size: 13px;
      cursor: pointer;
      color: #ffc3bd;
      letter-spacing: 2px;
}
a:hover{
text-decoration: none;
color: #feb3ab;

}
.social_btn_container{
  height: 100%;
  width: 200px;
  float:right;
}
.home_btn_left{
  height: 100%;
  width: 50px;
  float:left;
}

div#social_buttons {
    float: right;
}
.nav_button_22{
  width: 375px;
}



div.other {
    width: auto;
}

div.other_container{
    width: 110px;
}

div#social_button {
    float: right;
}
.social_icon_div {
    float: right;
    margin: 0px 2px;
}



@media only screen and (max-width: 890px)   {

  .home_btn_left{
    height: 100%;
    width: 50px;
    float:left;
  }
  .parentbox {
    height: auto;
    display: -webkit-inline-box;
   -webkit-box-pack: center;
   -webkit-box-align: center;
       /* remove the gap between inline(-block) elements */
  }
}




/*  Loading MENU   */

div#loader {
    position: absolute;
    top: 38px;
    left: 24px;
    font-family: ITC Avant Garde Pro Bk;
    color: #ffc3bd;

}




div#loader-wrapper {
    position: relative;
}


/* PRECEPT PAGE*/

a.on-precept {
  cursor: pointer;
  color: #fff;
}
a.on-precept:hover {

      cursor: hand;
      color: #ffedeb;
      text-decoration: none;
}



/*  PRE-ORDER PAGE  */
div#pre_oder_container {
    box-sizing: border-box;
    height: 100%;
}

div#pre_order_wrapper {
    height: 100%;
}

img#bottle_rose {
    height: auto;
    max-width: 60%;
}






/* Contact Form  */


.email_inputs, #close_email{
    width: 100%;
    text-align: center;
    height: 30px;
    margin: 5px 0px;
    box-sizing: border-box;
    font-family: ITC Avant Garde Pro Bk;

}


.contactform{
  text-align: left;
  background-color: white;
  color: #ffc3bd;
  border: solid;
  border-width: 1px;
  font-size: 16px;
  height: 100%
}
#contact-form-page{
      height: 100%;
      width: 90%;
}
.contact_form_message {
  background-color: white;
  font-family: ITC Avant Garde Pro Bk;
  color: #ffc3bd;
  border: solid;
  border-width: 1px;
  box-sizing: border-box;
  width:100%;
  -moz-box-sizing: border-box;
}
#form-submit{
  width:100%;
  margin: 5px 0px;
}

div#thank-you-contact {
    text-align: center;
    margin-top: 0%;
    height: 60%;
}
.contact-form-logo-div{
    height: 33%;
}
#cont-logo-img{
  max-height: 80%;
  max-width: 202px;
}

.ty-line{
  font-family: ITC Avant Garde Pro Md;
  font-size: 13px;
  font-weight: normal;
  text-decoration: none;
  color: #939394;
  letter-spacing: 1px;
  padding: 4px;
}

button#form-submit {
    background: #ffc3bd;
    border: none;
    color: white;
    font-family: ITC Avant Garde Pro Bk;
    height: 30px;
    line-height: 30px;
    font-size: 19px;
}



p#first_line_text{
  font-family: ITC Avant Garde Pro Xlt;
  font-size: 36px;
  font-weight: normal;
  text-decoration: none;
  color: #939394;
  font-weight: bold;
  letter-spacing: 6px;
  vertical-align: middle;
  /* text-align: center; */
  padding-bottom: 38px;
  height: 29px;
  margin: 0px;
}
@media only screen  and ( orientation : portrait)   {
  p#first_line_text.ty-line-mobile{
    font-size: 12vw;
    padding-top: 12vh;
  }
}
p.first_line_text_class{
  font-family: ITC Avant Garde Pro Xlt;
  font-size: 36px;
  font-weight: normal;
  text-decoration: none;
  color: #939394;
  letter-spacing: 6px;
      padding-bottom: 15px;

}
p.message_text{
  font-family: ITC Avant Garde Pro Md;
  font-size: 14px;
  font-weight: normal;
  text-decoration: none;
  color: #939394;
  letter-spacing: 1px;
  width: 394px;
  margin: 0px;
}
p.ty_msg{
  margin: 21px auto 38px auto;
}

div#page-wrap {
    max-width: 359px;
    margin: 0px auto 15px auto;
    height: 63%;

}
p.footer {
    font-family: ITC Avant Garde Pro Bk;
    font-size: 10px;
    font-weight: normal;
    text-decoration: none;
    color: #ffc3bd;
    letter-spacing: 1px;
    margin: 0px auto 0px auto;
}
@media only screen and (max-width: 450px)   {
  div#page-wrap {
      width: 80%;


  }

}
@media only screen and (min-width: 850px)   {


  img#bottle_rose {
      height: auto;
      max-width: 100%;
  }

}


/* The Modal (background) */
div#top {
    text-align: -webkit-center;
    margin-top: 63px;
}
div#mc_embed_signup_scroll {
    width: 271px;
    margin: 26px auto 0px auto;
}

.modal {
    display: none; /* Hidden by default */
    position: absolute; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 217px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    overflow: auto; /* Enable scroll if needed */

}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: rgba(254, 254, 254, 0.94);
    margin: auto;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
    border: 7px;
    border-style: solid;
    border-color: rgba(255, 195, 189, 0.86);
    width: 711px;
    height: 435px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

div.mc-field-group{
  width: 100%;
  vertical-align: middle;
  margin: 0 auto;
}
input#submit_button.email_inputs, #close_email{
  width: 100%;
  margin: 0 auto;
  font-size: 19px;
  padding-top: 5px;
}
input#submit_button.email_inputs:hover, #close_email:hover {
    background-color: #feb3ab;
}

/**   Module   ***/



/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

p#email_footer {
    font-family: ITC Avant Garde Pro Md;
    font-size: 10px;
    color: #939394;
    letter-spacing: .6px;
    /* position: fixed; */
    /* bottom:0px; */
    text-align: center;
}


input#mce-EMAIL {
    text-align: center;
    background-color: #ffc3bd;
    border: none;
    color: white;
    height: 30px;
}




input#mce-EMAIL {
  border: solid;
  border-color: #ffc3bd;
  border-width: 1px;
  background-color: white;
  color: #ffc3bd;
  line-height: 19px;
  font-size: 19px;
  padding-top: 6px;
  margin-bottom: 16px;
}
input#submit_button, #close_email {
  text-align: center;
  background-color: #ffc3bd;
  border: none;
  color: white;
  height: 30px;
  cursor: pointer;

}
input#close_email {
    background-color: #ffc3bd;
    border: none;
    color: white;
    border: none;
}
#email_holder_wrapper{
  width: 100%;
  margin: 0 auto;
}
div#social_buttons2 {
    text-align: -webkit-center;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
	 border-color: #ffc3bd;
    -webkit-text-fill-color: #ffc3bd;
}
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffc3bd;
}
/*
button.exit {
  background: none;
  position: absolute;
  right: 0;
  line-height: 45px;
  margin: 16px 0px;
  padding: 5px 9px 0px 15px;
  color: #999;
  border: 0;
  font-size: 1.4em;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  z-index: 1;
  font-size: 4em;
}
*/
button.exit {
   background: none;
   position: absolute;
   top: 6px;
   margin: 0 auto;
   right: 0;
   color: #999;
   border: 0;
   float: right;
   cursor: pointer;
   outline: none;
   z-index: 1;
}
a.current-page-border {
    border-style: solid;
    border-width: 1px;
    padding: 5px 12px 2px 12px;
}
textarea#message {
    padding: 6px 0px 0px 5px;
}

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}
div#email_footer_holder {
    position: absolute;
    bottom:4px;
    height: 23px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

@media only screen and (max-width: 850px)   {
  div#pre_order_wrapper1 {
    height: 100%;
  }

  div#info {
      height: 100%;
  }

  .modal {
    display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
     z-index: 1; /* Sit on top */
     padding-top: 0px;
     left: 0;
     top: 0;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: hidden; /* Enable scroll if needed */
  }
  .modal-content {
    width: 100%;
    height: 100%;

  }
  img#bottle_rose{
    max-width: 100%;
    max-height: 100%
  }
  div#top {
    height: 66%;
    margin-top: 0px;
  }
  #form_button{
    height: 33%;
  }
  #content {
    /* width:100%; */
  }
  p#first_line_text {
    font-size: 6vw;
    padding-bottom: 0px;
    height: 20vh;
    padding-top: 9vh;
  }
  #email_holder_wrapper {
    width: 100%;
    margin: 0 auto;
  }
  div#email_footer_holder {
    height: 3.2vw;
  }
  p#email_footer {
    font-size: 1.5vw;
    letter-spacing: 0px;
  }
  p.message_text{
    width: 100%;
  }

}
@media only screen and (max-width: 600px) and  (max-height: 850px) and ( orientation : portrait)   {
  div#email_footer_holder {
      height: 8vh;
  }
  p#email_footer {
      font-size: 11px;
      letter-spacing: 0px;
  }
}



.social_icon_div {
    margin: 6px;
    /* width: 84%; */
}

input.form-control{
  padding: 3px 0px 0px 5px;
}

img#contact-form-img {
    max-width: 50%;
}

/*
.col-sm-6.col-sm-offset-3 {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
*/
.mce_inline_error {font-family: ITC Avant Garde Pro Bk;color: #feb3ab;font-size: 0px;
  }

button#form-submit:hover {
    background: #feb3ab;
}
/*  Background     */

.toggled_content {
    background-color: #ffc3bd;
    width: 100%;
    height: 100%;
    display: flex;
    flex: 1;
    top: 0;
    position: absolute;
    z-index: -99;
}

/***** Footer   *****/
footer#footer-flexed_2 {
    margin-top: -15px;
    color: #FFC3BF;
    font-family: "ITC Avant Garde Pro Md";
    font-size: 11px;
    margin-top: 12px;
    width: 100%;
    text-align: -webkit-center;
}

footer.footer {
    margin-top: -15px;
    color: #FFC3BF;
    font-family: "ITC Avant Garde Pro Md";
    font-size: 11px;
    /* margin: 0 auto; */
    width: 100%;
    text-align: -webkit-center;
}
footer.footer-precept {
    color: #fff;

}


footer#footer-flexed {
    position: absolute;
    bottom: 0;
    left: 0;
}

footer#contact-footer {
    color: #FFC3BF;
    font-family: "ITC Avant Garde Pro Md";
    font-size: 11px;
    width: 100%;
    text-align: -webkit-center;
}
footer#precept-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #ffffff;
    font-family: "ITC Avant Garde Pro Md";
    font-size: 11px;
    width: 100%;
    bottom: 0;
    text-align: -webkit-center;
}


div#mce-responses.clear{

  font-family: ITC Avant Garde Pro Bk;
  color: #feb3ab;
  font-size: 0px;
}
div#mce-error-response a {
    font-size: 0px;
}
.has-error * {
    border: #ff0000;
    border-style: solid;
    border-width: 1px;
}
@media only screen and (min-width: 710px) and ( orientation : portrait) {
  p#first_line_text{
    max-width: 100%;
  }
  div#pre_order_wrapper1{
    width: 100%;
  }
  div#mc_embed_signup_scroll{
    margin: 0px auto 0px auto;
  }
  p#email_footer{
  /* font-size: 1.4vw */
  }

}

@media only screen and (max-height: 500px) and ( orientation : landscape) {
  div#myModal.modal{
    padding-top: 0px;
    height: 100%;
  }
  .modal-content{
    width: 100%;
    height: 100%;
  }
  div#pre_order_wrapper1{
    width: 100%;
  }
  .col-sm-6.col-sm-offset-3 {
    position: relative;
    top: 0%;
    transform: translateY(0%);
  }

}

@media only screen and (max-height: 434px) and ( orientation : landscape) {
  div#myModal.modal{
    height: 100%;
    min-height: 440px;
  }
  .modal-content{
    width: 100%;
    height: 100%;
  }
  p#first_line_text{
    max-width: 100%;
    padding-top: 0vh;
  }
  div#top{
    margin-top: 4vh;
  }
  div#mc_embed_signup_scroll{
    margin: 0px auto 0px auto;
  }

}

@media only screen and (max-height: 414px) and ( orientation : landscape) {
  p#first_line_text{
    padding-bottom: 30px;
  }

}

@media only screen and (max-height: 375px) and ( orientation : landscape) {
  p.message_text{
    font-size: 7px;
  }
  p#first_line_text{
    height: 24vh;
    padding-bottom: 0px;

  }

  div#top{
    height: 60%;
  }
  p#email_footer{
    font-size: 2.5vh;
  }

}

@media only screen and (min-height: 500px) and ( orientation : landscape) {
  div#content{
    overflow: initial;
  }

}


@keyframes fadein

{

    0%

    {

        opacity:0;

    }

    100%

    {

        opacity:1;

    }

}

@keyframes fadeout

{

    0%

    {

        opacity:1;

    }

    100%

    {

        opacity:0;

    }

}