/*
Theme Name: Rokka Child Theme
Theme URI: https://puruno.com/rokka
Author: Puruno
Author URI: https://themeforest.com/user/puruno
Description: Hotel WordPress theme.
Version: 1.0.0
License: Themeforest Split License
License URI: http://www.gnu.org/licenses/gpl-3.0.html & http://themeforest.net/licenses
Text Domain: rokka
Tags: one-column, right-sidebar
Template: rokka
*/
/*full house Page*/



._color h4{
    color:#fff;
}
h4.mb-sm {
    color: #e07f0a;
}
.food-desc p {
    color: #e07f0a;
}


 .book-section{
            /*height: 100vh;*/
            width: 100%;
            padding: 40px 0;
            text-align: center;
        }
        .book-section > .container{
            height: 700px;
            width: 100%;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 2%;
            margin-bottom: 30px;
            perspective: 1200px;
        }
        .container > .right{
            position: absolute;
            height: 100%;
            width: 50%;
            transition: 0.7s ease-in-out;
            transform-style: preserve-3d;
        }
        .book-section > .container > .right{
            right:0;
            transform-origin: left;
            border-radius: 10px 0 0 10px;
        }
        .right > figure.front, .right > figure.back{
            margin: 0;
            height: 100%;
            width: 100%;
            position: absolute;
            left:0;
            top:0;
            background-size: 85%;
            background-repeat: no-repeat;
            backface-visibility: hidden;
            background-color: #f1e2b1;
            overflow: hidden;
        }
        .right > figure.front{
            background-position: right;
            border-radius: 0 10px 10px 0;
            box-shadow: 2px 2px 15px -2px rgba(0,0,0,0.2);
        }
        .right > figure.back{
            background-position: left;
            border-radius: 10px 0 0 10px;
            box-shadow: -2px 2px 15px -2px rgba(0,0,0,0.2);
            transform: rotateY(180deg);
        }
        .flip{
            transform: rotateY(-180deg);
        }
        .flip::before{
            content: "";
            position: absolute;
            top:0;
            left:0;
            z-index: 10;
            width: 100%;
            height: 100%;
            border-radius: 0 10px 10px 0;
            background-color: rgba(0,0,0,0.1);
        }
        .book-section > button{
            border: 2px solid #f1e2b1;
            background-color: transparent;
            color: #f1e2b1;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 10px;
            transition: 0.3s ease-in-out;
        }
        .book-section > button:focus, .book-section > button:active{
            outline: none;
        }
        .book-section > p{
            color: rgba(0,0,0,0.7);
            font-family: calibri;
            font-size: 24px;
        }
        .book-section > p > a{
            text-decoration: none;
            color: #f1e2b1;
        }
        .book-section > button:hover{
            background-color: #f1e2b1;
            color: #fff;
        }
        .front#cover, .back#back-cover{
            background-color: #ffcb63;
            font-family: calibri;
            text-align: left;
            padding: 0 30px;
        }
        .front#cover h1{
            color: #fff;
        }
        .front#cover p{
            color: rgba(0,0,0,0.8);
            font-size: 14px;
        }




.modal_header {
    
    margin-top: -15px!important;
}
 .modal_body {
    width: 80vw;
    padding: 15px!important;

#otp_form #form input {
    display: inline-block;
    width: 75px !important;
}
#otp_wrapper {
    width: 100% !important;
}
#otp_wrapper {
    width: 100% !important;
    text-align: center !important;
}
#progressbar li.active:before, #progressbar li.active:after {
    background: #f1e2b1!important;
    color: white;
}
#progressbar li:before {
    content: counter(step)!important;
    counter-increment: step!important;
    width: 73px!important;
    height: 27px!important;
    line-height: 26px!important;
    display: block!important;
    font-size: 17px!important;
    color: #333!important;
    background: white!important;
    border-radius: 42px!important;
    margin: 0 auto 10px auto!important;
}

.btn.btn-md.btn-accent.btn-solid {
   
    margin-bottom: 40px;
    padding: 14px 40px 14px;
    font-size: 14px
}
      input[type=number] {
          height: 45px;
          width: 100%!important;
          /*font-size: 25px;*/
          text-align: center;
          /*border: 1px solid #000000;*/
      }
      input[type=number]::-webkit-inner-spin-button,
      input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    
#otp_wrapper.error_message_dis{ background-color: rgba(255,255,255,.6);
    padding: 15px;
    color: #000;
    display: inline-block;
    
}
.contact-error-field span {
    color: #f70e0e;
    font-weight: bold;
    margin-left: 20px;
}
.txt-name{padding: 7px;}
    
/*._label {
    position: absolute!important;
    left: 20px!important;
    bottom: 60px!important;
    font-size: 18px!important;
    line-height: 26px!important;
    font-weight: 400!important;
    color: #fff!important;
    cursor: text!important;
    transition: transform 0.2s ease-in-out!important;
}*/
.page-panels {
    background-color: #ffffff;
}
._margin{
    /*margin-bottom:50px;*/
}
#otp_wrapper.error_message_dis h5{ font-size: 18px; }
#otp_wrapper.error_message_dis #otp_form input[type="number"]{ border: 2px solid #1f75fe;
    background: rgba(255,255,255,.6);}
    
.form-field input{
    width:100%;
}

   .contact-form .txt-select {
   border: solid 1px #fff;
   background: none;
   width: 100%;
   font-size: 16px;
   padding: 7px 15px;
   float: left;
   height: 36px;
   margin: 0 0 0px 0;
   outline-color: #32b8da;
   }
   input#otp_1 {
   background: #f9f9f9;
   color: #000;
   }
   input#otp_2 {
   background: #f9f9f9;
   color: #000;
   }input#otp_3 {
   background: #f9f9f9;
   color: #000;
   }input#otp_4 {
   background: #f9f9f9;
   color: #000;
   }
   span.contact-success_1 span {
   font-size: 15px;
   padding: 10px;
   }
   span.contact-success_1 .fa-check-ics
   {
   font-size:20px;
   }
   form#otp_form input {
   border: none;
   height: 34px;
   padding: 0 5px;
   text-align: center;
   color: #000;
   }
   button#btnonOtp {
   border: none;
   font-size: 16px;
   border-radius: 0;
   background-color: #1f75fe;
   color: #f9f9f9;
   vertical-align: top;
   }
   .contact-form .txt-select option {
   color: #000;
   }
   .pnl-1 .countdown
   {
   margin:0;
   }
   p.ll {
    font-size: 18px;
    color: #14ff14;
    font-weight: bold;
   }

   /*/csss*/
   /*form styles*/
   #contact_id {
   /*text-align: center;*/
   position: relative;
   margin-top: 0px;
   }
 
  
   /*Hide all except first fieldset*/
   #contact_id fieldset:not(:first-of-type) {
   display: none;
   }
   /*inputs*/
  
   #contact_id .contact-form .form-group .btn-contact{ margin:0; }
   #contact_id input:focus, #contact_id textarea:focus {
   -moz-box-shadow: none !important;
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
   border: 1px solid #ee0979;
   outline-width: 0;
   transition: All 0.5s ease-in;
   -webkit-transition: All 0.5s ease-in;
   -moz-transition: All 0.5s ease-in;
   -o-transition: All 0.5s ease-in;
   }
   input[type=number] {
       width: 100%;
   }
   /*buttons*/
   #contact_id .action-button {
   width: 100px;
   background: #ee0979;
   font-weight: bold;
   color: white;
   border: 0 none;
   border-radius: 25px;
   cursor: pointer;
   padding: 10px 5px;
   margin: 10px 5px;
   }
   #contact_id .action-button:hover, #contact_id .action-button:focus {
   box-shadow: 0 0 0 2px white, 0 0 0 3px #ee0979;
   }
   #contact_id .action-button-previous {
   width: 100px;
   background: #4a5de7;
   font-weight: bold;
   color: white;
   border: 0 none;
   border-radius: 25px;
   cursor: pointer;
   padding: 10px 5px;
   margin: 10px 5px;
   }
   #contact_id .action-button-previous:hover, #contact_id .action-button-previous:focus {
   box-shadow: 0 0 0 2px white, 0 0 0 3px #C5C5F1;
   }
   .error_message_dis {
    background-color: rgba(255,255,255,0.6);
    padding: 15px;
    color: #000;
}
.error_message_dis p {
    color: #000;
    font-weight: normal;
    margin: 0 0 10px 0;
}
   /*headings*/
   .fs-title {
   font-size: 18px;
   text-transform: uppercase;
   color: #2C3E50;
   margin-bottom: 10px;
   letter-spacing: 2px;
   font-weight: bold;
   }
   .fs-subtitle {
   font-weight: normal;
   font-size: 13px;
   color: #666;
   margin-bottom: 20px;
   }
   /*progressbar*/
   .progressbar-wrap{ text-align: center; padding:0; margin:0; }
   #progressbar {
   margin-bottom: 0px;
   overflow: hidden;
   /*CSS counters to number the steps*/
   counter-reset: step;
   padding:0;
   display:inline-block;
   }
   #progressbar li {
   list-style-type: none;
   color: white;
   text-transform: uppercase;
   font-size: 14px;
   /*width: 33.33%;*/
   float: left;
   position: relative;
   letter-spacing: 1px;
   margin: 0 10px;
   }
   #progressbar li:before {
   content: counter(step);
   counter-increment: step;
   width: 24px;
   height: 24px;
   line-height: 26px;
   display: block;
   font-size: 12px;
   color: #333;
   background: white;
   border-radius: 25px;
   margin: 0 auto 10px auto;
   }
   #progressbar li:after {
   content: '';
   width: 100%;
   height: 2px;
   background: #b01963;
   position: absolute;
   left: -100% !important;
   top: 12px;
   z-index: -1;
   }
   /*progressbar connectors*/
   #progressbar li:first-child:after {
   /*connector not needed before the first step*/
   content: none;
   }
   /*marking active/completed steps green*/
   /*The number of the step and the connector before it = green*/
   #progressbar li.active:before, #progressbar li.active:after {
   background: #ee0979;
   color: white;
   }
   .dme_link {
   margin-top: 30px;
   text-align: center;
   }
   .countdown span {
    font-size: 15px!important;
    color: #f90505;
    font-weight: bold;
}
   .dme_link a {
   background: #FFF;
   font-weight: bold;
   color: #ee0979;
   border: 0 none;
   border-radius: 25px;
   cursor: pointer;
   padding: 5px 25px;
   font-size: 12px;
   }
   .dme_link a:hover, .dme_link a:focus {
   background: #C5C5F1;
   text-decoration: none;
   }
   .countdown{ max-width:100%; }
   .countdown .contact-form .form-group{ display:inline-block; width:100%; margin-bottom:30px; }
   .contact-form input, .contact-form textarea{ height:auto;}
   .tag-line h3{font-family: 'Montserrat', sans-serif !important;}
   .radio-bar{ padding:0; margin:0; }
   .radio-bar .radio-box{ padding:0; margin:0 0 25px; }
   .radio-bar .radio-box input{ display:inline-block; width:auto !important;}
   .radio-bar .radio-box .tl-re-dr{ display:inline-block; font-size:14px; line-height:16px; padding:0; margin:0 0 0 5px; width:auto !important; }
   .client-name-wrap{ padding:0; margin:0 0 30px; }
   .client-name-wrap .client-name-box input{ background:transparent; }
   .client-name-wrap .client-name-box input::placeholder, .countdown select.form-control::placeholder { / Chrome, Firefox, Opera, Safari 10.1+ /
   color: #fff;
   opacity: 1; / Firefox /
   }
   .padd{
       padding:40px;
   }
   .client-name-wrap .client-name-box input:-ms-input-placeholder, .countdown select.form-control:-ms-input-placeholder { / Internet Explorer 10-11 /
   color: #fff;
   }
   .client-name-wrap .client-name-box input::-ms-input-placeholder, .countdown select.form-control::-ms-input-placeholder { / Microsoft Edge /
   color: #fff;
   }
.countdown select.form-control{ background-color:transparent !important; border-radius:0 !important; border: 1px solid #ccc !important; color: #fff; }
.countdown select option{ color:#3e3e3e; }
   .countdown span {
   font-size: 18px!important;
   }
.countdown #contact_id{ min-height:370px; }
  #contact_id fieldset {
    /*position: relative!important;*/
}
footer{ margin:0 !important; }