/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
    Base styles: opinionated defaults
    ========================================================================== */

html {
   color: #666;
   font-size: 16px;
   font-family: 'EB Garamond', serif;
   line-height: 1.8;
}
html,
section.container.catering .food_item .item,
section.container.catering .food_item .price_cont,
section.container.schedule div.calendar div.location_details,
section.container.catering form input,
section.container.catering form textarea {
   background-color: #d9d0bc;
}

body {
   opacity: 0;
   -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
   -o-transition: all .25s ease;
   transition: all .25s ease;
}
body.loaded {
   opacity: 1;
}
body.active, html.active {
   /*overflow:hidden;*/
}
strong {
   font-weight: 600;
}

.desktop {display: none !important}
.mobile {display:inherit !important}

a:link,a:visited {
   color: inherit;
}

.horz_divider_cont {
   width: 120%;
   margin: 0 auto;
   margin-left: -10%
}
.horz_divider {
   height: 30px;
   width: 100%;
   display: inline-block;
   margin: 0;
   position: relative;
   background-repeat: no-repeat;
   background-size: contain;
}
.horz_divider.left {
   width: 50%;
   background-image: url("../img/rose_horz_left.png");
   background-position: left;
   float:left;
}
.horz_divider.right {
   width: 50%;
   background-image: url("../img/rose_horz_right.png");
   background-position: right;
   float:right;
}
.horz_divider.left,
.horz_divider.right {
   background-size: 340%;
}
.horz_divider.double {
   height: 15px;
   background-image: url("../img/rose_horz_double.png");
   background-position: center;
}
p.horz_divider {
   margin: 20px 0 0;
}

h2,h3,h4,h5,h6 {
   font-weight: 400;
   margin: 5px 0;
}
h2 {
   font-size: 1.6em;
   font-weight: 400;
}
h3 {
   font-size: 1.3em;
}
h4 {
   font-size: 1.2em
}
h5 {
   font-size: 1.1em
}
h6 {
   font-size: 1em
}

/*
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************

 HERO CONTAINER

********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
*/

#hero_container {
   width: 100%;
   margin-bottom: -30px; /*30px*/;
}

#hero_container .border_edge {
   background-image: url("../img/splash_corner.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   width: 12%;
   height: 7%;
   margin: 2%;
   display: block;
   position: absolute;
}
#hero_container .border_edge.align_top.align_right {
   transform: scaleX(-1);
}
#hero_container .border_edge.align_bot.align_left {
   transform: scaleY(-1);
}
#hero_container .border_edge.align_bot.align_right {
   transform: scaleY(-1) scaleX(-1);
}
#hero_container .align_top {
   top: 0;
}
#hero_container .align_bot {
   /*bottom: 66px;*/
   bottom: 0;
}
#hero_container .align_left {
   left: 10px;
}
#hero_container .align_right {
   right: 10px;
}

#hero_container .border_line {
   background: #63ad9f;
   display: block;
   position: absolute;
}
#hero_container .border_line.align_top, #hero_container .border_line.align_bot {
   height: 3px;
   width: 100%;
}
#hero_container .border_line.align_right, #hero_container .border_line.align_left {
   width: 3px;
   height: 100%;
}

#hero_container .border_line.align_top    { top: 20px; }
#hero_container .border_line.align_bot    { /*bottom: 86px;*/bottom: 20px }
#hero_container .border_line.align_right { right: 20px; }
#hero_container .border_line.align_left   { left: 20px; }

#hero_container .content {
      position: absolute;
      text-align: center;
      width: 80%;
}
   #hero_container .content img.splash {
      width: 100%;
   }
   #hero_container a {
      color: inherit;
      text-decoration: none;
      text-align: center;
      /* width: 60%; */
      /* display: block; */
      display:   inline-block;
      padding: 4px 12px;
      /* margin: 10px auto; */
      margin: 5px 5px;
      border: 2px solid #63ad9f;
      text-transform: capitalize;
   }
   #hero_container a:hover {
      color: #fff
   }

#stickyBtn {
   position: fixed;
   z-index: 101;
   /*font-family: 'Roboto', sans-serif;*/
   bottom: 0;
   width: 100%;
   padding: 15px 0;
   display: block;
   background: #63ad9f;
   color: #FFF;
   text-transform: uppercase;
   font-weight: 500;
   text-align: center;
   text-decoration: none;
   font-size: 1.1em;
}


/*
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************

    HEADER NAV

********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
*/

header.nav {
   font-size: 1.1em;
   margin-bottom: 40px;
}

header.nav ul {
   padding: 0;
   text-align: center;
}
header.nav li {
   list-style: none;
   display: inline-block;
   width: 22%;
   text-align: center;
   vertical-align: top;
}
header.nav li .container {
   color: inherit;
   text-decoration: none;
   border-bottom: 2px solid #63ad9f;
   padding-bottom: 4px;
   text-align: center;
   display: inline
}
header.nav li.logo {
   width: 8%;
   background-color: white;
   height:35px;
   position: relative;
   left: 2%;
}
header.nav li.right {
   /* text-align: right; */
}






header.stickynav {
   width: 100%;
   height: 60px;
   position: relative;
   top: 0;
   left: 0;
   margin-bottom: 30px;
   -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
   -o-transition: all .25s ease;
   transition: all .25s ease;
   z-index: 100;
}
header.stickynav.stuck {
   position: fixed;
   background-color: rgba(99,173,159,.9);
   z-index: 105;
}
/*body.active header.stickynav.stuck {
   background-color:inherit;
}*/

header.stickynav .logo {
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
   width: 100%;
   height: 40px;
   position: absolute;
   top: 10px;
   z-index: 99;
   -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
   -o-transition: all .25s ease;
   transition: all .25s ease;
}
header.stickynav .logo.light {
   background-image: url("../img/paratta_rose.png");
   opacity: 0;
}
header.stickynav .logo.dark {
   background-image: url("../img/paratta_rose_dark.png");
   opacity: 1;
}

header.stickynav.stuck .logo.dark {
   opacity: 0;
}
header.stickynav.stuck .logo.light {
   opacity: 1;
}

/* halalburger menu */

header.stickynav .halalburger_menu {
   width: 30px;
   height: 22px;
   padding: 19px 19px 19px 45px;
   float: right;
   opacity: 0;
   cursor: pointer;
   position: relative;
   z-index: 100;
   -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
   -o-transition: all .25s ease;
   transition: all .25s ease;
}
header.stickynav .halalburger_menu.stuck {
   opacity: 1;
}

header.stickynav .halalburger_menu .one,
header.stickynav .halalburger_menu .two,
header.stickynav .halalburger_menu .three {
   width: 100%;
   height: 2px;
   background: white;
   margin-bottom: 8px;
   position: relative;
   top: 0;
   -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
   -o-transition: all .25s ease;
   transition: all .25s ease;
}
header.stickynav .halalburger_menu .three {
   margin-bottom: 0;
}

header.stickynav .halalburger_menu.active .one {
   top: 10px
}
header.stickynav .halalburger_menu.active .three {
   top: -10px;
}
header.stickynav .halalburger_menu.active .one.rotate {
   transform: rotate(-45deg);
}
header.stickynav .halalburger_menu.active .three.rotate {
   transform: rotate(45deg);
}

/* side menu */
#side_menu {
   width: 100%;
   background: #63ad9f;
   top:0;
   position: fixed;
   height: 100px;
   -webkit-transition: all .5s ease;
   -moz-transition: all .5s ease;
   -o-transition: all .5s ease;
   transition: all .5s ease;
   z-index: 104;
}
#side_menu.active {
}
#side_menu ul {
   padding: 0;
   margin: 0;
   position: relative;
}
#side_menu li {
   color: white;
   text-transform: lowercase;
   font-size: 1.5em;
   list-style: none;
   text-align: center;
   padding: 0 0 7px;
   margin: 15px auto;
   line-height: 1.7em;
   cursor: pointer;
}
#side_menu li.active {
   font-weight: 600;
   border-bottom: 3px solid white;
   border-top: 3px solid white;
}
#side_menu li.social {
   border: 0;
}
#side_menu li.social img {
   width: 15px;
   height: 15px;
   margin-right: 6px;
   margin-left: 6px;
}
#side_menu li.order_now {
   border: 3px solid white;
   text-transform: uppercase;
   padding: 12px 10px 15px;
   margin-top: 30px;
   width: 50%;
   font-weight: 600;
   font-size: 1.4em;
}


/*
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************

 SECTION CONTAINERS

 ********************************************************************************************************************
 ********************************************************************************************************************
 ********************************************************************************************************************
*/

section.container {
   margin: 0 auto;
   width: 80%;
   text-align: center;
}
section.container.hide {
   opacity: 0;
   -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
   -o-transition: all .25s ease;
   transition: all .25s ease;
}
section.container.show {
   opacity: 1;
   -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
   -o-transition: all .25s ease;
   transition: all .25s ease;
}
section.container.gallery {
}
section.container.contact {
   background: #63ad9f;
   color: white;
   width: 100%;
   padding: 20px 0 40px;
   margin-bottom: 0;
   margin-top: 60px;
   position: relative;
   z-index: 102;
}
section.container p.horz_divider {
   margin: 30px 0;
}

section.container.menu ul.navigation,
section.container.catering ul.navigation,
section.container.ramadan ul.navigation {
   padding: 0;
   margin: 30px 0 10px;
   text-align: center;
}
section.container.menu ul.navigation li,
section.container.catering ul.navigation li,
section.container.ramadan ul.navigation li {
   padding: 1px 9px 3px; margin: 5px 5px;
   list-style: none;
   display: inline-block;
   text-align: center;
   background: #63ad9f;
   border-radius: 0px;
   color: white;
   font-size: 1em;
   cursor: pointer;
}

section.container.menu ul.navigation li.active,
section.container.catering ul.navigation li.active,
section.container.ramadan ul.navigation li.active {
   border-bottom: 3px solid white;
   padding-bottom: 0;
}

section.container h3 {
   /*text-transform: uppercase;*/
   font-weight: 400;
   font-size: 1.3em;
   clear: both;
   margin-top: 20px;
}


/*
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************

 SECTION CONTAINER :: ABOUT

********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
*/


section.container.about.stickyNavFixed {
   padding-top: 85px;
}


/*
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************

 SECTION CONTAINER :: GALLERY

********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
*/


section.container.gallery #imageSlider {
   margin: 20px auto 0 auto;
   padding: 0;
   position: relative;
   width: 100%;
}
section.container.gallery #imageSlider .left,
section.container.gallery #imageSlider .right {
   height: 100%;
   width: 62.5%;
   cursor: pointer;
   position: absolute;
   z-index: 3;
   background-position: right;
   background-repeat: no-repeat;
   background-size: 15%
}
section.container.gallery #imageSlider .left {
   left: -12.5%;
   background-image: url("../img/arrow_left.png");
   background-position-x: 7%;
}
section.container.gallery #imageSlider .right {
   right: -12.5%;
   background-image: url("../img/arrow_right.png");
   background-position-x: 93%;
}

section.container.gallery #imageSlider img {
   width: 125%;
   margin-left: -62.5%;
   position: absolute;
   top: 0;
   opacity: 0;
   -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
   -o-transition: all .25s ease;
   transition: all .25s ease;
   z-index: 1;
}
section.container.gallery #imageSlider img.focus {
   z-index: 2;
   opacity: 1;
}


/*
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************

 SECTION CONTAINER :: SCHEDULE

********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
*/

section.container.schedule section {
   margin-bottom: 40px;
}

section.container.schedule div.calendar {
   padding: 0;
   border: 2px solid #63ad9f;
   margin-top: 20px;
   background: #63ad9f;
}
section.container.schedule div.calendar h4 {
   width: 20%;
   float: left;
   padding: 0 5%;
   color: #fff;
   margin: 5px 0 0;
}
section.container.schedule div.calendar.closed h4 {
   margin: 0;
   font-size: 1em;
}
section.container.schedule div.calendar h4 .day {
   font-size: 1.3em;
   font-weight: 600;
   text-transform: uppercase;
}
section.container.schedule div.calendar div.location_details {
   /*display: none;*/
   padding: 15px 5% 35px;
   width: 60%;
   float: right;
   position: relative;
}
section.container.schedule div.calendar.closed_long {
   background: inherit;
   font-size: .8em;
}
section.container.schedule div.calendar.closed_long div.location_details {
   width: 100%;
}
section.container.schedule div.calendar.closed {
   opacity: .75;
}
section.container.schedule div.calendar.closed div.location_details {
   min-height: 40px;
   padding-bottom: 15px;
}
section.container.schedule div.calendar.closed div.location_details h5 {
   font-weight: 400;
   font-size: 1.1em;
}
section.container.schedule div.calendar div.location_details h5 {
   font-size: 1.3em;
   font-weight: 500;
   margin: 0;
   padding: 0;
}
section.container.schedule div.calendar div.location_details h6 {
   padding: 0
}
section.container.schedule div.calendar div.location_details .address {
   margin-top: 10px;
   display: block;
   font-weight: 500;
}
section.container.schedule div.calendar div.location_details .address a {
   text-decoration: underline;
   color: inherit;
}
section.container.schedule div.calendar div.location_details .description {
   margin-top: 15px;
   margin-bottom: 0;
}
section.container.schedule div.calendar div.location_details .address,
section.container.schedule div.calendar div.location_details .description {
   border-top: 2px solid #63ad9f;
   padding-top: 10px;
}
section.container.schedule div.calendar div.location_details .callout {
   position: absolute;
   bottom: -2px;
   right: -2px;
   background: #63ad9f;
   color: #eee;
   padding: 1px 10px 3px;
   font-size: .8em;
   /*font-family: 'Roboto', sans-serif;*/
}

section.container.schedule div.calendar div.location_details .divider {
   width: 118%;
   height: 5px;
   background: #63ad9f;
   margin: 20px -9%;
}

section.container.schedule p.loadmore {
   width: 80%;
   margin: -20px 10% 40px;
   background: #63ad9f;
   padding: 5px 0;
   color: #fff;
   cursor: pointer;
}

section.container.schedule .pickup a {
   color: inherit;
}
section.container.delivery .pickup div.delivery {
   width: 80%;
   /*background: white;*/
   border: 2px solid #63ad9f;
   /*height: 50px;*/
   padding: 0;
   border-radius: 8px;
   margin: 20px auto 15px;
   font-family: 'Roboto', sans-serif;
}
section.container.delivery .pickup div.delivery div.imgcont {
   width: 35px;
   display: inline-block;
   border-right: 2px solid #63ad9f;
   padding: 12px 20px 12px 15px;
   margin: 0;
   float: left;
}
section.container.delivery .pickup div.delivery img {
   width: 40px;
   height: 40px;
   margin: 0;
   padding: 0;
   opacity: .6;
   position: relative;
   z-index: -1;
}
section.container.delivery .pickup div.delivery p {
   display: inline-block;
   text-align: center;
   padding: 17px 0;
   margin: 0 auto;
   font-size: 1em;
   font-weight: 500;
   vertical-align: middle;
}


/*
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************

 SECTION CONTAINER :: FOOD MENU

********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
*/

section.container.menu,section.container.ramadan {
   text-align: left;
}

section.container.menu h2,
section.container.menu .description,
section.container.ramadan h2,
section.container.ramadan .description {
   text-align: center;
}

section.container.menu .description .callout,
section.container.ramadan .description .callout {
   text-align: center;
   font-size: 1em;
   float: none;
   display: block;
   width: 100%;
   margin:0 auto;
   padding-left: 15px;
   padding-right: 15px;
   width: inherit;
   text-decoration: none;
}

section.container.menu table,
section.container.ramadan table {
   width: 100%;
   margin: 0 auto;
   padding: 0;
}

section.container.menu table.threeCol,
section.container.ramadan table.threeCol {
   width: 100%;
}
section.container.menu table.twoCol,
section.container.ramadan table.twoCol {
   width: 66%;
}


section.container.menu tr,
section.container.ramadan tr {

}

section.container.menu td,
section.container.ramadan td {
   width: 30%;
   text-align: center;
}

section.container.menu table.twoRow tr td,
section.container.ramadan table.twoRow tr td {
   font-variant: small-caps;
   font-weight: bold;
}

section.container.menu table.twoRow tr td span,
section.container.ramadan table.twoRow tr td span {
   border-bottom: 2px solid #63ad9f;
   padding-right: 3px;
   padding-left: 3px;
}

section.container.menu table.twoRow tr+tr td,
section.container.ramadan table.twoRow tr+tr td {
   font-weight: normal;
   font-variant: normal;
   font-size: .9em;
}

section.container .category {
   width: 100%;
   margin: 0 auto;
}

section.container .category:nth-child(even) {
   padding: 8px 8%;
   border: 3px dotted #63ad9f;
   margin: 40px -4%;
   width: 90%;
}
section.container.menu h3,section.container.ramadan h3 {
   text-transform: uppercase;
   font-weight: 600;
   font-size: 1.3em;
   margin-top: 10px;
   margin-bottom: 15px;
   border-bottom: 2px solid #63ad9f;
}
section.container.menu h3 + section,
section.container.menu h4 + section,
section.container.ramadan h3 + section,
section.container.ramadan h4 + section { /* menu section's description*/
   font-size: 1em;
   line-height: 1.5em;
   margin-bottom: 20px;
}
section.container.menu h4,
section.container.menu section + h5,
section.container.menu h6 + h5,
section.container.ramadan h4,
section.container.ramadan section + h5,
section.container.ramadan h6 + h5 {
   font-size: 1.2em;
   font-weight: 600;
   line-height: 1.2;
}

section.container.menu section + h5,
section.container.menu h6 + h5,
section.container.ramadan section + h5,
section.container.ramadan h6 + h5 {
   margin-bottom: 0;
}

section.container.menu h5,
section.container.menu h5 + h6,
section.container.ramadan h5,
section.container.ramadan h5 + h6 { /* menu item description */
   font-size: 1.2em;
   line-height: 1.5em;
   margin-bottom: 20px;
}

section.container.menu h6 + h4,section.container.ramadan h6 + h4 { /* menu item title after a sub menu item description */
   margin-top: 40px;
}

section.container.menu h5 .comment,
section.container.menu h6 .comment,
section.container.ramadan h5 .comment,
section.container.ramadan h6 .comment {
   font-size: .7em;
   text-transform: uppercase;
   font-weight: 600;
   margin-top: 20px;
   display: block;
}

section.container.menu h5 p,
section.container.menu h6 p,
section.container.ramadan h5 p,
section.container.ramadan h6 p {
   padding-top: 0;
   margin-top: 0;
   margin-bottom: 20px;
   font-size: .8em;
}


section.container.menu .callout,section.container.ramadan .callout {
   float: right;
   font-size: .6em;
   font-weight: 600;
   display: block;
   border: 2px solid #63ad9f;
   padding: 5px 7px;
   margin: 3px 3px 0 0;
}

section.container.menu h4 .price {
   font-weight: 400;
   font-size: .8em;
}
  section.container.menu h4 .price::before {
      content: ' - ';
  }


/*
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************

 SECTION CONTAINER :: GIFT CARD

********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
*/

section.container.giftcard .giftcard_images {
   position: relative;
   margin-top: 20px;
   margin-bottom: 70px;
}
section.container.giftcard .giftcard_images img {
   filter: drop-shadow(10px 10px 15px rgba(0,0,0,.25));
}
section.container.giftcard .giftcard_images a:nth-child(1) {
   position: relative;
   z-index: 3;
   left: -10%;
   top: 0;
}
section.container.giftcard .giftcard_images a:nth-child(2) {
   position: absolute;
   left: 1%;
   top: 20px;
   z-index: 2;
   width: 100%
}
section.container.giftcard .giftcard_images a:nth-child(3) {
   position: absolute;
   left: 10%;
   top: 40px;
   z-index: 1;
   width: 100%
}

/*
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************

 SECTION CONTAINER :: CATERING

********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
*/

section.container.catering .description {
   margin-bottom: 30px
}
section.container.catering ul.navigation {
   margin-bottom: 30px
}
section.container.catering h3 {
   margin-top: 30px;
   margin-bottom: 10px;
}

section.container.catering h3.title {
   text-transform: uppercase;
   font-weight: 600;
   font-size: 1.3em;
   margin: 0 0 15px;
   padding-top: 20px;
   border-bottom: 2px solid #63ad9f;
   text-align: left;
}

section.container.catering h3.title + section {
   font-size: 1em;
   line-height: 1.5em;
   margin-bottom: 20px;
   text-align: left;
}

section.container.catering h4 { /* protein */
   font-size: 1.25em;
   margin: 20px 0 10px;
   font-weight: 500;
   text-align: left;
}

section.container.catering h4 + p { /* description under protein */
   margin: -10px 0 10px;
   text-align: left;
}

section.container.catering .food_item {
   margin: 3px 0 0;
   padding: 8px 0;
   overflow: hidden;
}
section.container.catering .food_item:before {
   padding-top: 3px;
   white-space: nowrap;
   float: left;
   width: 0;
   content:
   ". . . . . . . . . . . . . . . . . . . . "
   ". . . . . . . . . . . . . . . . . . . . "
   ". . . . . . . . . . . . . . . . . . . . "
   ". . . . . . . . . . . . . . . . . . . . "
}
section.container.catering .food_item .item {
   padding-right: 10px;
   font-size: 1.2em;
   float: left;
   max-width: 30%;
   text-align: left;
}
section.container.catering .food_item .price_cont {
   padding: 3px 0 0 10px;
   float: right;
}
section.container.catering .food_item .price_cont section {
   border: 1px solid #63ad9f;
   padding: 8px 8px 8px 10px;
   display: inline;
}
section.container.catering .food_item .price_cont section + section {
   margin-left: 10px;
}
section.container.catering .food_item .price_cont .tray {
   padding-right: 5px;
}
section.container.catering .food_item .price_cont .price {
   font-weight: 500;
}

section.container.catering .food_item .price_cont .tray,
section.container.catering .food_item .price_cont .price {
   padding-top: 0;
   padding-bottom: 2px;
}

/* FORM */
section.container.catering form {
   text-align: left;
   font-size: 1.1em;
}
section.container.catering form p {
   margin: 0 0 20px;
}
section.container.catering form label {
   display: block;
   margin: 10px 0 5px 0;
}
section.container.catering form label.radio,
section.container.catering form label.radio label {
   display: inline-block;
   margin: 10px 0 5px 0;
}
section.container.catering form label.required {
   font-weight: 600;
}
section.container.catering form label.required::after {
   content: " *";
}

section.container.catering form input,
section.container.catering form textarea {
   width: 92%;
   padding: 8px 4%;
   display: inline-block;
   color: #666;
   outline: 2px solid #63ad9f;
   border: 0;
}
section.container.catering form textarea {
   height: 120px;
}
section.container.catering form input[type=date] {
   padding-top: 5px;
   padding-bottom: 4px;
   padding-left: 5%!important;
   padding-right: 0!important;
   width: 95%!important;
}
section.container.catering form input::-webkit-calendar-picker-indicator {
   background: none; padding: 0 5% 0 0;
}
section.container.catering form input::placeholder,
section.container.catering form textarea::placeholder {
   color: #999;
}

section.container.catering form p.radio input {
   outline: 0;
   float: left;
   display: none;
}
section.container.catering form p.radio label.radio {
   width: 98%;
   margin: 10px auto 15px;
   display: block;
   padding: 10px 2px;
   text-align: center;
   border: 2px solid #63ad9f;
   opacity: 1;
   border-radius: 12px;
   cursor: pointer
}
section.container.catering form p.radio label.radio.active {
   border-width: 4px;
   padding: 8px 0;
}

section.container.catering form input:focus,
section.container.catering form textarea:focus {
   outline: 4px solid #63ad9f;
}
section.container.catering form .right,
section.container.catering form .left {
   width: 45%;
   display: inline-block;
}
section.container.catering form .right input,
section.container.catering form .left input {
   width: 84%;
   padding-right: 8%;
   padding-left: 8%
}
section.container.catering form .right {
   float: right;
}
section.container.catering form button {
   width: 100%;
   background: #63ad9f;
   padding: 10px 0;
   color: #fff;
   border: 0;
   outline: 0;
}
section.container.catering form .submitMessage {
   margin-top: 20px;
   text-align: center;
}



/*
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************

 SECTION CONTAINER :: CONTACT

********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
*/

section.container.contact {
   /*font-family: 'Roboto', sans-serif;*/
   font-size: .9em;
}

section.container.contact .left {
   text-align: center;
   margin: 10px 10px 20px 0;
   display: inline-block;
   padding-right: 0px;
}

section.container.contact .right {
   text-align: center;
   margin: 10px 0 20px 10px;
   display: inline-block;
   padding-left: 40px;
   background-image: url("../img/rose_white.png");
   background-position: left;
   background-size: 15%;
   background-repeat: no-repeat;
}

section.container.contact a {
   text-decoration: inherit;
}

section.container.contact .social img {
   width: 15px;
   height: 15px;
   margin-right: 6px;
   margin-left: 6px;
}



/*
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************

 SECTION CONTAINER :: FOOTER

********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
*/

footer {
   background: #63ad9f;
   padding: 10px 20px;
   color: #fff;
   border-top: 2px solid #fff;
   position: relative;
   z-index: 102;
}

footer .left,
footer .right {
   font-size: .8em;
   font-weight: 500;
}

footer .right {
   float:right;
}






/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
   background: #63ad9f;
   text-shadow: none;
}

::selection {
   background: #63ad9f;
   text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #ccc;
   margin: 1em 0;
   padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
   vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
   border: 0;
   margin: 0;
   padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
   resize: vertical;
}

/* ==========================================================================
    Browser Upgrade Prompt
    ========================================================================== */

.browserupgrade {
   margin: 0.2em 0;
   background: #ccc;
   color: #000;
   padding: 0.2em 0;
}

/* ==========================================================================
    Author's custom styles
    ========================================================================== */

/* ==========================================================================
    Helper classes
    ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
   display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*      causes content to wrap 1 word per line:
*      https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   white-space: nowrap;
   width: 1px;
   /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
   clip: auto;
   height: auto;
   margin: 0;
   overflow: visible;
   position: static;
   white-space: inherit;
   width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
   visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*      `contenteditable` attribute is included anywhere else in the document.
*      Otherwise it causes space to appear at the top and bottom of elements
*      that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*      `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
   content: " ";
   /* 1 */
   display: table;
   /* 2 */
}

.clearfix:after {
   clear: both;
}

.clearfix {
   clear: both;
}

/* ==========================================================================
    EXAMPLE Media Queries for Responsive Design.
    These examples override the primary ('mobile first') styles.
    Modify as content requires.
    ========================================================================== */

/* landscape */
@media only screen and (min-width: 1000px) {
   .mobile {
      display: none !important;
   }
   .desktop {
      display: inherit !important;
   }
   #hero_container .content img.splash {
      width: 20%;
   }

   #hero_container .border_edge {
      width: 2.5%;
      height: 6%;
      margin: .5%;
   }

   #hero_container .align_left {
      left: 10px;
   }
   #hero_container .align_right {
      right: 10px;
   }

   section.container {
      width: 50%;
   }

   .horz_divider.left,
   .horz_divider.right {
      background-size: 100%;
   }

   section.container.gallery #imageSlider {
      width: 120%;
      margin-left: -10%;
   }

   section.container.gallery #imageSlider .left,
   section.container.gallery #imageSlider .right {
      background-size: 7%
   }

   section.container.menu .description .callout,
   section.container.ramadan .description .callout {
      display: inline-block;
      margin-bottom: 25px;
   }

   section.container.menu table.threeCol,
   section.container.ramadan table.threeCol {
      width: 50%;
   }
   section.container.menu table.twoCol,
   section.container.ramadan table.twoCol {
      width: 33%;
   }


}

@media only screen and (min-width: 35em) {
   /* Style adjustments for viewports that meet the condition */
}

@media print,
   (-webkit-min-device-pixel-ratio: 1.25),
   (min-resolution: 1.25dppx),
   (min-resolution: 120dpi) {
   /* Style adjustments for high resolution devices */
}

/* ==========================================================================
    Print styles.
    Inlined to avoid the additional HTTP request:
    https://www.phpied.com/delay-loading-your-print-css/
    ========================================================================== */

@media print {
   *,
   *:before,
   *:after {
      background: transparent !important;
      color: #000 !important;
      /* Black prints faster */
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
      text-shadow: none !important;
   }
   a,
   a:visited {
      text-decoration: underline;
   }
   a[href]:after {
      content: " (" attr(href) ")";
   }
   abbr[title]:after {
      content: " (" attr(title) ")";
   }
   /*
       * Don't show links that are fragment identifiers,
       * or use the `javascript:` pseudo protocol
       */
   a[href^="#"]:after,
   a[href^="javascript:"]:after {
      content: "";
   }
   pre {
      white-space: pre-wrap !important;
   }
   pre,
   blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
   }
   /*
       * Printing Tables:
       * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
       */
   thead {
      display: table-header-group;
   }
   tr,
   img {
      page-break-inside: avoid;
   }
   p,
   h2,
   h3 {
      orphans: 3;
      widows: 3;
   }
   h2,
   h3 {
      page-break-after: avoid;
   }
}