/**Pepo**/

/*@import url('https://fonts.googleapis.com/css?family=Assistant:400,800');*/

/*General Styles*/
body { font-size: 20px;}

/*Header*/    
#header2 { background: transparent; position: fixed;}
#header2 .header-top .address, #header2 #header-left { display: none;}
#header2 ul.menu li a{position: relative; color: #231f20; font-size: 95%; font-weight: bold; padding: 5px 10px;}
#header2 .header-top-left a {width: 30px; height: 30px; text-align: center; border: 2px solid #231f20; border-radius: 5px;}
#header2 .header-top-left svg { fill: #231f20; width: 8px;  height: 16px; position: relative; top: -2px;}
#header2 .header-right-section { display: flex; align-items: center;}
#header2 .max-width { background: #fff;}
#header2 .header-top, #header2 .menu-nav { width: auto;}
#header2 .menu-nav { order: 0; margin-top: 0;}
#header2 .header-top { order: 1; padding: 0;}
#header2 ul.menu { margin-bottom: 0;}
#header2 ul.menu>li:before {display: none;}
#header2 ul.menu li { border-radius: 4px; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; margin-left: 5px;}
#header2 ul.menu li a:focus {opacity: 1; border-bottom: none; }
#header2 ul.menu li.active a, #header2 ul.menu li:hover a  { color: #fff;}
#header2 ul.menu li.logoInMenu:hover { background: transparent;}
#header2 ul.menu li.logoInMenu { width: 100px;}
#header2 ul.menu li.logoInMenu img { max-height: 120px; position: absolute; top: 10px; right: 50%; transform: translate(50%, -50%); -webkit-transform: translate(50%, -50%); }
#header2 .header-top-left a:hover, #header2 .header-top-left a:hover svg {background: #202020; fill: #fff; }
#header2 .header-top-left a { transition: all ease-in-out 150ms;}
#header2.bg .max-width { border-radius: 8px; box-shadow: 0 0 30px rgba(24, 26, 37, 0.15); }

/*Top Banner*/
#home-gallery .flex-control-paging li a.flex-active { background: transparent; }
#home-gallery .flex-control-paging li a { width: 15px; height: 15px; background: #fff; border: 2px solid #fff;}
#home-gallery ol.flex-control-nav.flex-control-paging { bottom: 10%;}
#home-gallery .photoCaption { z-index:10;}
#home-gallery .photoCaption .photoCaptionText { background: none;}
#home-gallery .photoCaption .photoCaptionText:after { display: none;}
#home-gallery .photoCaption .photoCaptionText h2.photoTitle { font-size: 450%; font-family: Assistant-Bold, Arial; color: #fff; margin-bottom: 20px; line-height: 0.9; }
#home-gallery .photoCaption .photoCaptionText a.photoCaptionLink { background: #fff; color: #231f20; border: none; border-radius: 8px; font-weight: bold;}
#home-gallery .photoCaption .photoCaptionText a.photoCaptionLink:hover { background: #202020; color: #fff; }
li.slider-item:after {content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(18,18,18,0.2); pointer-events:none;}

/*Four Icons Section*/
.sections .four-grid-section { max-width: 1150px; padding: 120px 15px 120px; margin-bottom: 0;}
.four-grid-section .grid-boxes .grid-box-title h3 a { color: #231f20; font-size: 80%; font-weight: bold;}
.four-grid-section .grid-box.section-animation-item { width: 19%; padding: 0; margin: 0 30px; border: 2px solid #231f20; border-radius: 20px;}
.four-grid-section .grid-boxes .grid-box-image { padding-bottom: 73%; margin-bottom: 0;}
.four-grid-section .grid-boxes .grid-box-image-container { padding:30px;}
.four-grid-section .grid-boxes .grid-box-image-container:after { content: ""; display: block; position: absolute; background: #454647; width: 95%; height: 2px; bottom: 0px; 
    right: 50%; transform: translateX(50%); -webkit-transform: translateX(50%); }
.four-grid-section .grid-box-title { display: block; background-image: url("../../../warehouse/temp/Pepo/white-title-bg.jpg"); background-size: cover; background-position: center center; 
    border-bottom-right-radius: 19px; border-bottom-left-radius: 19px; padding: 10px 0 13px; transition: all ease-in-out 400ms; -webkit-transition: all ease-in-out 400ms;}
.four-grid-section .grid-box.section-animation-item:hover .grid-box-title{ background: url('../../../warehouse/temp/Pepo/paper-title-bg.jpg'); background-position:center;}
.grid-boxes .box-image-animation:hover img { transform: none; -webkit-transform: none;}

/*About Section*/
.about-section { background: url('../../../warehouse/temp/Pepo/00-about-bg.jpg'); background-size: cover; background-position: center; text-align: right; padding: 130px 280px; margin-bottom: 0;}
.about-section .section-title {display: inline-block; }
.about-section .grid-text { width: 505px; }
.about-section .grid-text-content { width: 100%; padding: 0;}
.about-section .section-title h2 { font-size: 225%; font-family: Assistant-Bold, Arial;}
.about-section .section-title h2:after { content: ""; display: block; width: 100%; height: 4px; background: #000; margin: 30px 0 25px; }
.about-section .grid-text p { color: #231f20; font-size: 105%; margin-top: 0; } 
.grid-text .sec-button {background: #231f20; padding: 6px 30px; margin: 20px auto 0; border-radius: 8px; box-shadow: 0px 5px 9px 0 rgba(0, 0, 0, 0.17); transition: all ease-in-out 200ms; -webkit-transition: all ease-in-out 200ms;}
.about-section .hvr-float:active, .about-section .hvr-float:focus, .about-section .hvr-float:hover { transform: none; -webkit-transform: none; color: #231f20; background: #fff;}

/*Gallery Title Section*/
.gallery-title-section { padding: 135px 0 90px; margin-bottom: 0; }
.gallery-title-section .top-title { font-size: 225%; }
.gallery-title-section .bottom-title { font-size: 285%; font-family: Assistant-Bold, Arial; }
.gallery-title-section .grid-text p { display: inline-block; margin-top: 0; line-height: 1; position: relative;}
.gallery-title-section .grid-text p:before { content: ""; width: 32px; height: 130px; position: absolute; background: url('../../../warehouse/temp/Pepo/01-title-deco-right.png'); 
    background-size: contain;  background-position: center; background-repeat: no-repeat; right: -40px; top: 50%; transform: translate(50%, -50%); -webkit-transform: translate(50%, -50%);}
.gallery-title-section .grid-text p:after { content: ""; width: 32px; height: 130px; position: absolute; background: url('../../../warehouse/temp/Pepo/01-title-deco-left.png'); 
    background-size: contain;  background-position: center; background-repeat: no-repeat; left: -40px; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}

/*Gallery Section*/
.grid-gallery-section { margin-bottom: 8px; }
.gallery-cubes>div { padding: 7px; }
.gallery-cubes .image-link-inner {color: #fff; background: transparent; border: 3px solid;}

/*Footer*/
footer { padding-top: 0;}
#SiteFooter #partners-section {background: url('../../../warehouse/temp/Pepo/00-footer-bg.jpg'); background-size: cover; background-position:center; padding: 25px 0 35px;}
#partners-section p .footer-more-info { display: inline-block; background: rgba(255,255,255,0.8); border-radius: 8px; font-size: 90%; font-weight: bold; margin-top: 15px; padding: 5px 20px; }
.site-credit.alternative { padding: 15px 0;}
#partners-section a { padding: 0;}

/*****Inner Pages*****/
/*General Styles*/
#headline { margin-bottom: 75px;}
#headline h1 { display: inline-block; position: relative; font-size: 143%;     font-family: Assistant-Bold, Arial;}
#GridPage { padding-top: 110px; }
h6 { font-size: 90%; font-weight: bold; }
#text1 p:last-child { margin-bottom: 0; }
section#GridTop:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.2);}
.normal-form select, .normal-form input, .normal-form textarea {border-radius: 6px;}

/*About Page*/
#headline h1:before { content: ""; width: 32px; height: 130px; position: absolute; background: url('../../../warehouse/temp/Pepo/01-title-deco-right.png'); 
    background-size: contain;  background-position: center; background-repeat: no-repeat; right: -40px; top: 50%; transform: translate(50%, -50%); -webkit-transform: translate(50%, -50%);}
#headline h1:after { content: ""; width: 32px; height: 130px; position: absolute; background: url('../../../warehouse/temp/Pepo/01-title-deco-left.png'); 
    background-size: contain;  background-position: center; background-repeat: no-repeat; left: -40px; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
span.enTitle { font-size: 93%; font-weight: bold; }
div#gridshort-view { margin-top: 40px; }

/*Menu Page*/
#MenuModule .menuModuleNav a { transition: all ease-in-out 200ms; -webkit-transition: all ease-in-out 200ms; margin: 0 0 10px; padding: 0 10px; border-radius: 8px; font-size: 121%;}
#MenuModule .menuModuleNav a.selected, #MenuModule .menuModuleNav a:hover, #MenuModule .menuModuleNav a:focus { background: #231f20; color: #fff;}
.grid-menu-section {margin: 0 auto; }
.menuModuleTextItemTitle, .menuModuleTextItemPrice, .menuModuleTextItemSubjectTitle, .menuModuleTextItemSubjectDescription { font-weight: bold;}
.menuModuleTextItemDescription {text-align: right; font-size: 90%;}
input.form-control { background: #fff; }
.menu-page #DynamicFormObject .dynamicFormObjectField .must:before { right: 18px; }
.menu-page #DynamicFormObject .dynamicFormObjectField #name-4.must:before { top: 10%; }
.menu-page .form-container-wide #DynamicFormObject .dynamicFormObjectSubmit {float: right; padding: 0 10px;}
.menu-page .form-container-wide #DynamicFormObject .dynamicFormObjectFields .top-form { line-height: 1;}
.menu-page .form-container-wide #DynamicFormObject .dynamicFormObjectFields .top-form span.form-subtitle { font-weight: 400; font-size: 68%; }

/*Events Page*/
.form-container-wide #DynamicFormObject .dynamicFormEndText, .form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText { display: none;}
.form-container-wide #DynamicFormObject .dynamicFormObjectFields { width: 100%;}
.form-container-wide #DynamicFormObject .dynamicFormObjectSubmit { display: inline-block; float: none; }
select.input-data.form-control { background: #fff; font-size: 90%;}
#DynamicFormObject input[type=submit] { border: 1px solid #000;}
.events-page #DynamicFormObject .dynamicFormObjectField .must:before { right: 18px;}
.events-page .normal-form select { border: 1px solid #000;}
.form-container-wide #DynamicFormObject .dynamicFormObjectFields .top-form { font-size: 145%; color: #231f20; font-weight: bold;}
#SiteGrid.layout-bottom #GridPromo { padding-top: 40px; }

/*Album Page*/
.album-page section#GridTop:after { background-color: #fff;}
.album-page .section-animation-item { opacity: 1; transition: none; -webkit-transition: none;}

/*Contact Page*/
#contactview { overflow: visible;}
#contactform, .form-container-wide #DynamicFormObject, #tableorderform {width:100%; background: url('../../../warehouse/temp/Pepo/00-footer-bg.jpg'); background-size: cover; background-position:center;}
.normal-form { border: 3px solid #000; border-radius: 20px; }
input.input-data, textarea.input-data { background: #fff; font-size: 90%;}
.normal-form input[type=submit], #DynamicFormObject input[type=submit] {font-size: 99%; background-color: #231f20;}
#contactform .contact-container .pull-right, .form-container-wide #DynamicFormObject .dynamicFormObjectField, #tableorderform #tableorder-form .pull-right { padding: 0 10px 15px; }
.normal-form:after { display: none;}
.normal-form .input-time-wrapper select { margin-bottom: 0; background: #fff;}
#contactform textarea { margin-top: 0;}
#contact-boxes { margin-bottom: 0;}
#contactDetails .contactDetailsText1 p { font-size: 100%;}
#contactform .contact-container { width: 85%;}
.normal-form input[type=submit]:hover, .normal-form input[type=submit]:focus, .normal-form select, #DynamicFormObject input[type=submit]:hover, #DynamicFormObject input[type=submit]:focus {border: 1px solid #000; }

/*Reservations Page*/
.reservations-page .must:before { right: 20px; top: 9%;}

@media(min-width: 1025px) {
    /*Header*/
    #header2 { padding-top: 50px;}
    #header2 .max-width { max-width: 1080px}
    #header2 .header-right-section {padding: 22px 90px 22px 70px;}
    #header2 .header-top-left { margin-right: 25px;}
    #header2 .max-width { border-radius: 8px;}
    #header2 ul.menu li.active, #header2 ul.menu li:hover { color: #fff; background: #202020; }
    #header2 ul.menu li.last-item { margin-left: 10px; }

    /*About Section*/
    .about-section { background-position: center 0%; background-repeat: no-repeat;}
}

@media (min-width: 768px) {
    /*Header*/
    #header2 ul.menu li.logoInMenu {margin: 0 5px 0 15px;}

    /*Top Banner*/
    #home-gallery .photoCaption .photoCaptionText a.photoCaptionLink { padding: 5px 70px;}
    #home-gallery .photoCaption .photoCaptionText { max-width: 100%;}

    /*****Inner Pages*****/
    /*General Styles*/
    #text1, #text2 {max-width: 87%;}
    p.txt-right, p.txt-left, .txt-left { display: inline-block; width: 48% !important; text-align: right; vertical-align: top;}
    p.txt-right { margin-left: 10px; }
    p.txt-left, .txt-left {margin-right: 10px; }

    /*Menu Page*/
    .grid-menu-section { max-width: 1170px;}
    .menu-page .form-container-wide #DynamicFormObject .dynamicFormObjectField { width: 33%;}
    .menu-page .form-container-wide #DynamicFormObject .dynamicFormObjectSubmit { width: 33%; }
    .menu-page .form-container-wide #DynamicFormObject .dynamicFormObjectField {margin-bottom: 15px;}

    /*Events Page*/
    .form-container-wide #DynamicFormObject .dynamicFormObjectField { width: 25%; }
    .form-container-wide #DynamicFormObject .dynamicFormObjectSubmit { width: 30%;}

    /*Contact Page*/
    .submit-btn .col-xs-12.col-md-4.col-sm-6.pull-right { width: 30%; }
    input.input-data, textarea.input-data {  margin-bottom: 0;}
}

@media(min-width: 1281px) and (max-width: 1440px) {
    .about-section {padding: 130px 180px;}
}

@media(min-width: 1170px) and (max-width: 1280px) {
    .about-section {padding: 130px 80px;}
    .normal-form input { max-width: 100%;}
}
@media(min-width: 1025px) and (max-width: 1110px) {
    #header2 ul.menu li.logoInMenu img      { max-height: 105px; }
    #header2 ul.menu li.logoInMenu          { width: 80px; }
    #header2 .header-right-section          { padding: 22px 20px 22px 20px;text-align: center;display: inline-block; }
    #header2 .max-width                     { max-width: 1080px; }
    #header2 .menu-nav                      { float: none !important; display: inline-block; vertical-align: middle; }
    #header2 .header-top                    { float: none !important;display: inline-block; vertical-align: middle; position: absolute;left: -20px; }
    #header2 #header-container              { text-align: center; }
}




@media(max-width: 1024px) {
    /*Header*/
    #header2 { padding: 0;}
    #header2 .max-width { max-width: 100%; width: 100%;}
    #nav-toggle span, #nav-toggle span:after, #nav-toggle span:before, #nav-toggle-mobile span, #nav-toggle-mobile span:after, #nav-toggle-mobile span:before {height: 4px;
        width: 40px; border-radius: 5px; background: #202020;}
    #header2 .menu-nav .closed,  #header2 .menu-nav .opened{ display: none !important;}
    #header2 .header-right-section { background: #fff; width: auto; padding: 25px 15px;}
    #header2 .menu-nav .opened { color: #202020; font-size: 106%; }
    #header2 .header-top-left { display: block;}
    #header2.open .header-top.social-links { display: none; }
    #header2 .LogoCentered ul.menu {width: 100vw; height: 100vh; background: url('../../../warehouse/temp/Pepo/00-footer-bg.jpg'); background-position: center; padding: 0; 
        z-index:0;}
    #header2 ul.menu li { padding: 30px 0;}
    #header2 ul.menu li.social-mobile { display: none; }
    #header2 ul.menu li a { font-size: 200%; padding: 7px 25px;}
    #header2 ul.menu li.active { background: transparent;}
    #header2 ul.menu li.active a, #header2 ul.menu li:hover a {background: #202020; border-radius: 10px;}
    #header2 ul.menu li:first-child { margin-top: 5vh; }
    #header2 #header-left { display: block; width: 144px; height: 120px; position: absolute; top: 0; left: 0;}

    /*Four Icons Section*/
    .sections .four-grid-section { padding: 70px 15px 70px;}
    .four-grid-section .grid-box.section-animation-item { width: 32%; margin: 10px;}

    /*About Section*/
    .about-section { padding: 30px 30px 45px;}
    .about-section .grid-text { width: 350px; }

    /*Gallery Title Section*/
    .gallery-title-section { padding: 75px 0 50px; }

    /*Gallery Section*/
    .gallery-cubes>div { padding: 4px; }
    .grid-gallery-section { margin-bottom: 4px; }

    /*****Inner Pages*****/
    /*General Styles*/
    #GridPage { padding-top: 70px; }
    #headline { margin-bottom: 55px; }

    /*About Page*/
    #ContentGridShortModule .gridshort-view-item {margin-bottom: 25px; }

    /*Menu Page*/
    .menu-page .grid-menu-section { padding-bottom: 0;}

}

@media(min-width: 768px) and (max-width: 1024px) {
    /*Contact Page*/
    #contactform .contact-container .pull-right { width: 33%; }
    #contactform .contact-container .textareaWrapper { width: 100%; }
}

@media(max-width: 767px) {

    /*Header*/
    #header2 ul.menu li { padding: 10px 0; }
    #header2 ul.menu li a { font-size: 130%; }
    #header2 .phone-icon, #header2.open #header-left { display: none;}    
    #header2 ul.menu li:first-child { margin-top: 9vh; }

     /*Top Banner*/
    #home-gallery .photoCaption .photoCaptionText { max-width: 100%; }
    #home-gallery .photoCaption .photoCaptionText h2.photoTitle { font-size: 300%; }
    #home-gallery .photoCaption .photoCaptionText a.photoCaptionLink { padding: 5px 20px;}
    #home-gallery ol.flex-control-nav.flex-control-paging { bottom: 12%; }
    #home-gallery .scroll-down { bottom: 5%; }
    #home-gallery .scroll-down svg { width: 40px; height: 22px; }
    
    /*Four Icons Section*/
    .sections .four-grid-section { padding: 40px 15px 60px; }
    .four-grid-section .grid-box.section-animation-item { width: 43%; margin: 15px 9px; }
    .four-grid-section .grid-boxes .grid-box .grid-box-title h3 { margin: 0;}
    .four-grid-section .grid-box-title {padding: 0px 0 8px;}

    /*About Section*/
    .about-section { padding: 0 15px 70px; background-position: 57%;}
    .about-section .grid-text { width: 290px; }
    .about-section .grid-text p {font-size: 90%;}
    .about-section .section-title h2 {max-width: 100%;}
    .about-section .section-title h2:after {height: 3px; width: 70%; margin: 20px 0;}
    .about-section .section-title { margin-bottom: 0;}
    .grid-text .sec-button { font-size: 99%; padding:10px 30px;}

    /*Gallery Title Section*/
    .gallery-title-section { padding: 65px 0 40px; }
    .gallery-title-section .grid-text-content { width: 100%; }
    .gallery-title-section .top-title { font-size: 135%; }
    .gallery-title-section .bottom-title { font-size: 175%; }
    .gallery-title-section .grid-text p:before, .gallery-title-section .grid-text p:after, #headline h1:before, #headline h1:after { width: 20px; height: 100px;}
    .gallery-title-section .grid-text p:before {right: -10px;}
    .gallery-title-section .grid-text p:after {left: -10px;}

    /*Gallery Section*/
    .gallery-cubes>div { padding: 7px; }

    /*Footer*/
    #SiteFooter #partners-section { padding: 25px 0 15px;}
    #partners-section p .footer-more-info { width: 95%; font-size: 80%; padding: 15px;}
    #SiteFooter #partners-section img { max-width: 130px;}

    /*****Inner Pages*****/
    /*General Styles*/
    #GridPage { padding-top: 50px; }
    #headline { margin-bottom: 35px; }
    #headline h1 { font-size: 119%;}
    div#gridshort-view {text-align: center; }
    #ContentGridShortModule .gridshort-view-item { width: 89%; }
    #text1, #lobbyText { text-align: right;}

    /*About Page*/
    #SiteGrid.layout-bottom #GridPromo { padding-top: 40px; } 

    /*Menu Page*/
    .menuModuleContentPart {padding: 50px 25px 15px; }
    .menu-page .form-container-wide #DynamicFormObject .dynamicFormObjectFields .top-form span.form-subtitle { font-size: 64%;}
    .menu-page #DynamicFormObject .dynamicFormObjectField .must:before { right: 21px; }
    .menu-page #DynamicFormObject .dynamicFormObjectField #name-4.must:before { top: 15%;}
    .grid-form-section {  margin: 0 auto 10px;}

    /*Events Page*/
    .events-page #DynamicFormObject .dynamicFormObjectField .must:before { right: 21px; }
    .form-container-wide #DynamicFormObject .dynamicFormObjectFields .top-form { display: block; font-size: 120%; margin-bottom: 15px;}
    .form-container-wide #DynamicFormObject .dynamicFormObjectSubmit { padding: 0 10px;}
    #SiteGrid.layout-bottom #GridPromo { margin: auto auto 20px;}
    .select-wrapper:after { top: 25%;}

    /*Contact Page*/
    #contactform { padding-top: 20px; }
    #contactform .contact-form-submit {margin-bottom: 10px; }
    #contactform .contact-form-comment {font-size: 85%; }
    #contactDetails .contactDetailsText1 p {width: 95%; margin: 0 auto; }
    #contactform textarea { margin-bottom: 10px;}
    .normal-form textarea { padding: 10px 17px 0 0 ;}

    /*Reservations Page*/
    #tableorderform {width: 90%; margin: 40px auto 5%; }
    .normal-form-submit { width: 100%;}
    .normal-form .input-time-wrapper select { margin-bottom: 15px; }
    #tableorderform #tableorder-form .pull-right.comment-line { padding: 0; margin: 0;}
    #tableorderform .mobile-strip, .normal-form-comment {font-size: 85%;}
}

@media(min-width: 361px) and (max-width: 450px) {
    /*Footer*/
    #partners-section p .footer-more-info { font-size: 60%;}
    #SiteFooter #partners-section a, #SiteFooter .footer-text .menu-nav a { font-size: 105%; }/*65*/
}

@media(max-width: 375px) {
    .gallery-title-section .top-title { font-size: 132%; }
    .gallery-title-section .bottom-title { font-size: 170%; }
    .about-section {background-position: 47%; }
    .about-section .grid-text { width: 230px; }
    #partners-section p .footer-more-info { padding: 15px 0;}
    
}

@media(max-width: 360px) {
    .about-section {background-position: 48%; }
    .about-section .grid-text { width: 210px; }
    .gallery-title-section .top-title { font-size: 115%; }
    .gallery-title-section .bottom-title { font-size: 150%; }
    .gallery-title-section .grid-text p:before { right: -5px; }
    .gallery-title-section .grid-text p:after { left: -5px; }
    #SiteFooter #partners-section a { font-size: 81%;}
}

@media(max-width: 320px) {
    /*Header*/
    #header2 ul.menu li { padding: 10px 0; }

    .about-section { background-position: 43%; }
    .about-section .grid-text p {width: 86%; }

    /*Footer*/
    #SiteFooter #partners-section a { font-size: 66%; }

    /*****Inner Pages*****/
    /*General Styles*/
    #headline h1:before { right: -20px;}
    #headline h1:after { left: -20px;}

    /*Events Page*/
    .form-container-wide #DynamicFormObject .dynamicFormObjectFields .top-form {font-size: 110%;}
    .normal-form select { width: 100%; }
}