@import url("https://use.typekit.net/wqd5hmw.css");
@import url('https://fonts.googleapis.com/css2?family=El+Messiri&family=Montserrat+Alternates:ital,wght@0,300;0,700;1,300;1,700&display=swap');
@import url("/work/pastrydedi-web/styles/fotorama.css");

@media screen {
/* ------------------------------------------------------
@ NORMALIZE
------------------------------------------------------ */
* { vertical-align: baseline; margin: 0; padding: 0; font-size: 100%; box-sizing: border-box; }
header, nav, section, article, aside, footer, hgroup { display: block; }
h1, h2, h3, h4, h5, h6, p, li, blockquote, cite, div { cursor: default; }
ol, ul { list-style-type: none; }
a, embed, object, .button, input:focus, textarea:focus, select:focus { outline: none; }
a, a:hover { text-decoration: none; }
a, a h1, a h2, a h3, a h4, a h5, a h6, a p, a li, a blockquote, a cite, a div { cursor: pointer !important; }
iframe, fieldset, img { border: 0; }
img, video { max-width: 100%; height: auto; }
  
/* ------------------------------------------------------
@ UNIVERSAL ELEMENTS – TYPO, COLORS, OTHERS
------------------------------------------------------ */
/* TYPO */
body { background: rgba(120,120,120,1.00); }

body, select { font-family: 'Montserrat Alternates', sans-serif; font-size: 13px; text-align: center;
-webkit-text-size-adjust: none;
   -moz-text-size-adjust: none; 
    -ms-text-size-adjust: none; 
        text-size-adjust: none; }

#page, select { color: rgba(120,120,120,1.00); }

.ff-keto { font-family: 'Montserrat Alternates', sans-serif; font-weight: 700; }
.ff-script { font-family: "renata", sans-serif; font-weight: 400 !important; }
.ff-arabic { font-family: 'El Messiri', sans-serif; font-weight: 400 !important; }

h1 { font-size: 300%; line-height: 1.1em; font-weight: 300; }
h2 { font-size: 160%; line-height: 1.2em; font-weight: 300; }
h3 { font-size: 120%; line-height: 1.3em; font-weight: 300; }
h4, h5, h6, p, li { font-size: 100%; line-height: 1.6em; font-weight: 300; }  
  
.fs-normal { font-size: 100%; line-height: inherit; }
.fs-small { font-size: 75%; line-height: inherit; }
.fs-85 { font-size: 85%; }

.fw-normal { font-weight: 300; }
.fw-bold { font-weight: 700; }
  
/* COLORS */  
.gray-light { color: rgba(200,200,200,1.00); }
.gray-dark { color: rgba(120,120,120,1.00); }
.blue { color: rgba(146,183,226,1.00); }
.white { color: rgba(255,255,255,1.00); }

/* OTHERS */
.fl-left { float: left; }
.fl-right { float: right; }
.clear { clear: both; }

.ta-left { text-align: left; }
.ta-center { text-align: center; }
.ta-right { text-align: right; }
  
.holder { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.holder.hero { position: relative; min-height: 200px; padding: 15% 0 0; border-radius: 10px 10px 0 0; background-color: rgba(255,255,255,0.20); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.5; }
.holder.hero::after { content:""; position: absolute; left: 0; right: 0; bottom: 0; display: block; height: 50%; background-image: linear-gradient(rgba(200,200,200,0.00), rgba(200,200,200,1.00)); }

.boxset { width: 100%; overflow: auto; }
.boxset .box { float: left; }
  
.show { display: block; }
.hide { display: none; }


/* ------------------------------------------------------
@ SITE LAYOUT, CUSTOM CONTENT
------------------------------------------------------ */
#page { background: rgba(200,200,200,1.00) url("/work/pastrydedi-web/images/master-head-light.png") no-repeat center top; }  

  #master-head { position: relative; z-index: 2; }      
    
    .holder.uni-head { min-height: 100px; }

    .master-head-logo { position: relative; display: block; width: 50%; max-width: 260px; margin: 0 auto; }
    .master-head-logo a { display: block; width: 100%; margin: 0 auto; text-indent: 200%; white-space: nowrap; overflow: hidden; background: url("/work/pastrydedi-web/images/master-head-logo.png") no-repeat center top; background-size: contain; }    

    /* MENU --------------------------- */
    .master-head-nav li a { color: rgba(120,120,120,0.50); }
    .master-head-nav li a:hover { color: rgba(120,120,120,1.00); }    
    
    .master-head-nav li a span { position: relative; padding: 6px 0; }
      
      .menu-toggle { position: absolute; z-index: 2; right: 20px; top: 20px; display: block; width: 54px; height: 54px; text-indent: 200%; white-space: nowrap; overflow: hidden; background: url("/work/pastrydedi-web/images/icon-menu.png") no-repeat center bottom; background-size: 50px 100px; }    
      .menu-toggle.open { background-position: center top; }
      .menu-list { display: none; }
      .menu, .menu ul, .menu li { display: inline-block; }
      .menu { margin: 0 auto; }
      .menu li { position: relative; z-index: 1; float: left; font-size: 90%; letter-spacing: 0px; font-weight: 700; text-transform: uppercase; }    
      .menu li a { position: relative; z-index: 1; display: block; line-height: 32px; }
      .menu li + li { padding-left: 40px; }
      .menu li + li a:before { content:""; position: absolute; left: -22px; top: 14px; display: inline-block; width: 4px; height: 4px; background: rgba(120,120,120,0.50); }        
          
      /* ACTIVE MENU Matrix */
      .page-pastry-menu .nav-pastry-menu a,
      .page-pastry-menu .nav-pastry-menu a:hover,
      .page-stories-of-famous-women .nav-stories-of-famous-women a,
      .page-stories-of-famous-women .nav-stories-of-famous-women a:hover,
      .page-about-us .nav-about-us a,
      .page-about-us .nav-about-us a:hover,
      .page-contact .nav-contact a,
      .page-contact .nav-contact a:hover { color: rgba(120,120,120,1.00) !important; }

      .page-pastry-menu .nav-pastry-menu a span::before,
      .page-stories-of-famous-women .nav-stories-of-famous-women a span::before,
      .page-about-us .nav-about-us a span::before,
      .page-contact .nav-contact a span::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -6px; width: 100%; height: 1px; border-top: dotted 1px rgba(120,120,120,1.00); transform: translate(-50%, 0); }  

      .page-pastry-menu .nav-pastry-menu a span::after,
      .page-stories-of-famous-women .nav-stories-of-famous-women a span::after,    
      .page-about-us .nav-about-us a span::after,
      .page-contact .nav-contact a span::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -6px; width: 100%; height: 1px; border-top: dotted 1px rgba(120,120,120,1.00); transform: translate(-50%, 0); }

  
  #master-content { position: relative; z-index: 1; }
    
  /* HOME contents ------------------------------------- */
    
    .holder.home-slider { max-width: 1024px; padding: 0 0 60px; }
     
      .fotorama { position: relative; }
      .fotorama__stage { min-height: 360px; padding-top: 55%; }
      
        .hero-image { position: relative; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center -40px; background-size: auto 70%; }          
        .hero-image.slide1 { background-image: url("/work/pastrydedi-web/images/strudels/Henrietta.png"); }
        .hero-image.slide2 { background-image: url("/work/pastrydedi-web/images/strudels/Monisha.png"); }
        .hero-image.slide3 { background-image: url("/work/pastrydedi-web/images/strudels/Kathrine.png"); }
        .hero-image.slide4 { background-image: url("/work/pastrydedi-web/images/strudels/KETO-hero.png"); }

        .hero-text { position: absolute; bottom: 0; left: 50%; width: 100%; text-align: center; transform: translate(-50%, 0); }
          
          .hero-text h3 { font-size: 360%; line-height: 1.15em; padding: 0 20px; } 
          
          .hero-text a { display: inline-block; margin-top: 20px; padding: 3px; border: solid 2px rgba(146,183,226,1.00); }
          .hero-text a span { display: inline-block; padding: 10px 15px; background: rgba(146,183,226,1.00); }
          .hero-text a:hover { border-color: rgba(120,120,120,1.00); }
          .hero-text a:hover span { background: rgba(120,120,120,1.00);  }
       
    .holder.home-info { max-width: 100%; padding: 60px 20px 40px; background: rgba(120,120,120,1.00); }
    .holder.home-info h1 { position: relative; max-width: 700px; margin: 0 auto; padding-left: 20px; line-height: 1.6em; text-align: left; border-left: dotted 1px rgba(200,200,200,1.00); }
    
  /* A LA CARTE contents ------------------------------------- */
    
    .holder.alacarte { width: 100%; padding-top: 40px; padding-bottom: 60px; } 
    .holder.alacarte h2 { margin-top: 60px; }

      .boxset.alacarte-strudels-set {margin-top: 60px; }
      .boxset.alacarte-strudels-set .box { position: relative; width: 100%; padding: 20px 20px 40px; margin-bottom: 60px; }
      .boxset.alacarte-strudels-set.keto .box { margin-bottom: 30px; }

        .strudel-holder { padding: 20px; border: dotted 1px rgba(255,255,255,0.40); }
        .strudel-holder:hover { border-color: rgba(255,255,255,0.80); background: rgba(255,255,255,0.20); }
        
          .strudel-holder img { position: absolute; z-index: 1; left: 0; bottom: 0; right: 0; max-width: 100%; margin: 0 auto; }

          .strudel-info { height: 225px; padding: 20px 10px 0; background: rgba(255,255,255,0.20); }
          .strudel-info.keto { padding-top: 15px; }

            .strudel-name { position: relative; z-index: 2; font-size: 260%; line-height: 1.1em; padding-top: 5px; }
            
            .strudel-content { position: relative; z-index: 2; line-height: 1.3em; }
            .strudel-content + .strudel-content { margin-top: 5px; }

            .strudel-price { position: absolute; z-index: 1; top: 0; right: 0; display: inline-block; padding: 3px; border-radius: 100%; border: solid 2px rgba(146,183,226,1.00); }
            .strudel-price span { display: inline-block; width: 78px; height: 78px; line-height: 78px; white-space: nowrap; border-radius: 100%; background: rgba(146,183,226,1.00); color: rgba(255,255,255,1.00); }
            .strudel-price.scone span {line-height: 68px; }
            .strudel-price.scone span > span { width: auto; height: auto; line-height: normal; border-radius: none; background: none; position: absolute; left: 0; bottom: 18px; right: 0; z-index: 2; }                      
          
        .keto-info { clear: both; margin: 0 20px; padding: 20px 20px 60px; font-size: 90%; }
        .keto-info h3 { font-weight: 700; }
        .keto-info p { margin-top: 25px; }
        
            .net-carbs { position: absolute; z-index: 1; top: 35%; left: 5px; display: inline-block; padding: 25px 22px 22px; line-height: 1.15em; background: url("/work/pastrydedi-web/images/net-carbs-star.png") no-repeat center center; background-size: 100% 100%; }
            .net-carbs span { display: inline-block; color: rgba(255,255,255,1.00); }

      
      .boxset.alacarte-drinks-set { position: relative; margin-top: 60px; }
      .boxset.alacarte-drinks-set::before,
      .boxset.alacarte-drinks-set::after { content: ""; position: absolute; top: 20px; bottom: 0; z-index: -1; display: none; width: 1px; height: auto; border-left: dotted 1px rgba(120,120,120,1.00); }    
      .boxset.alacarte-drinks-set .box { width: 100%; padding: 20px; }

        .alacarte-drink-list { display: block; width: 100%; overflow: auto; }
        .alacarte-drink-list + .alacarte-drink-list { margin-top: 40px; }
        .alacarte-drink-list li { overflow: auto; }
        .alacarte-drink-list li + li { clear: both; border-bottom: dotted 1px rgba(120,120,120,1.00); }
        /*.alacarte-drink-list li:nth-of-type(2) { border: none; }*/
        .alacarte-drink-list h3 { padding-bottom: 20px; }    
        .alacarte-drink-list span { display: inline-block; padding: 5px 0; }
        .alacarte-drink-list span.fl-left { width: 70%; text-align: left; }
        .alacarte-drink-list span.fl-right { width: 30%; text-align: right; }

    .holder.alacarte-info { max-width: 100%; padding: 60px 20px 40px; background: rgba(120,120,120,1.00); }
    .holder.alacarte-info h1 { margin: 0 auto; padding: 0 20px; line-height: 2em; }  

      .boxset.alacarte-story-set { max-width: 1280px; margin: 0 auto; }
      .boxset.alacarte-story-set .box { width: 100%; padding: 20px; text-align: left; color: rgba(255,255,255,1.00); }    
      .boxset.alacarte-story-set .box h3 { padding-bottom: 20px; }
        
  /* STORIES OF FAMOUS WOMEN contents ------------------------------------- */
  
    .holder.stories-of-famous-women-hero { background-image: url("/work/pastrydedi-web/images/heroes/hero-stories-of-famous-women.jpg"); }
    .holder.stories-of-famous-women-block { padding-top: 40px; padding-bottom: 60px; }
    
      .intro-text { max-width: 800px; padding-top: 40px; margin: 0 auto; }
      
      .boxset.stories-of-famous-women-set { position: relative; padding-top: 40px; padding-bottom: 40px; }
      .boxset.stories-of-famous-women-set + .boxset.stories-of-famous-women-set::before { content:""; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); height: 0; width: 60%; border-top: dotted 1px rgba(120,120,120,1.00); }
      .boxset.stories-of-famous-women-set .box { width: 100%; padding: 20px; text-align: left; }
      .boxset.stories-of-famous-women-set .box:nth-of-type(1) { text-align: center; }
      .boxset.stories-of-famous-women-set .box:nth-of-type(1) img { width: 100%; max-width: 200px; padding: 10px; background: rgba(255,255,255,0.20); border: dotted 1px rgba(255,255,255,0.40); }
      .boxset.stories-of-famous-women-set .box:nth-of-type(2) h3 { font-size: 220%; line-height: 1.1em; text-align: center; padding-bottom: 20px; }      
    
  /* ABOUT US contents ------------------------------------- */
    
    .holder.about-us-hero { background-image: url("/work/pastrydedi-web/images/heroes/hero-about-us.jpg"); }
    .holder.about-us-block { max-width: 1000px; padding-top: 40px; padding-bottom: 60px; }

      .boxset.about-us-set { padding-top: 40px; }
      .boxset.about-us-set .box { width: 100%; padding: 20px; text-align: left; }
      .boxset.about-us-set .box h3 { padding-bottom: 20px; }

  /* CONTACT contents ------------------------------------- */
    
    .holder.contact-hero { background-image: url("/work/pastrydedi-web/images/heroes/hero-contact.jpg"); }
    .holder.contact-block { padding-top: 40px; padding-bottom: 60px; }
    
      .boxset.contact-set { padding-top: 40px; }
      .boxset.contact-set .box { position:  relative; width: 100%; padding: 20px; text-align: left; }
      .boxset.contact-set .box .iframe-border { padding: 10px; background: rgba(255,255,255,0.20); border: dotted 1px rgba(255,255,255,0.40); }
      .boxset.contact-set .box .iframe-holder { position: relative; width: 100%; min-height: 200px; padding-top: 60.5%; }
      .boxset.contact-set .box iframe { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }            
      .boxset.contact-set .box ul { margin-top: 20px; }
      .boxset.contact-set .box li + li { margin-top: 5px; } 
      .boxset.contact-set .box li a { margin-right: 10px; }
      .boxset.contact-set .box li a img { width: 30px; height: 30px; }
      
      .boxset.contact-set .box a.button { display: inline-block; margin-top: 20px; padding: 3px; border: solid 2px rgba(146,183,226,1.00); }
      .boxset.contact-set .box a.button span { display: inline-block; padding: 10px 15px; background: rgba(146,183,226,1.00); }
      .boxset.contact-set .box a.button:hover { border-color: rgba(120,120,120,1.00); }
      .boxset.contact-set .box a.button:hover span { background: rgba(120,120,120,1.00);  }
  
  /* ERROR contents ------------------------------------- */
  
    .holder.error-block { padding-top: 80px; padding-bottom: 160px; }    
    .holder.error-block h2 { margin-top: 20px; }
    .holder.error-block p { max-width: 480px; margin: 20px auto 0; }
    .holder.error-block a { display: inline-block; margin-top: 20px; padding: 3px; border: solid 2px rgba(146,183,226,1.00); }
    .holder.error-block a span { display: inline-block; padding: 10px 15px; background: rgba(146,183,226,1.00); }
    .holder.error-block a:hover { border-color: rgba(120,120,120,1.00); }
    .holder.error-block a:hover span { background: rgba(120,120,120,1.00);  }

  
  #master-foot { position: relative; z-index: 2; background: rgba(120,120,120,1.00); }  

    .holder.uni-foot { padding-top: 40px; padding-bottom: 40px; }
    .holder.uni-foot p, 
    .holder.uni-foot a { color: rgba(255,255,255,0.40); }
    .holder.uni-foot p + p { margin-top: 20px; }


/* ------------------------------------------------------
@ ANIMATIONS
------------------------------------------------------ */
a, .hero-image, .hero-text a span, .strudel-holder, .boxset.contact-set .box a.button span, .holder.error-block a span {
-webkit-transition: all 0.5s 0s ease;
   -moz-transition: all 0.5s 0s ease;
     -o-transition: all 0.5s 0s ease; 
        transition: all 0.5s 0s ease; }
}

/* ------------------------------------------------------
@ RESPONSIVE OPTIONS
------------------------------------------------------ */
@media screen 
and (min-width: 480px) {  
  .hero-image { background-position: center -80px; background-size: auto 100%; }
}

@media screen 
and (max-width: 639px) {
  #page { background-size: 120% auto; }
  .master-head-logo { padding: 30px 0 0 0; }
  .master-head-logo a { padding-top: 30%; }    
  .master-head-nav ul { padding: 20px 0; }
  .menu, 
  .menu ul,
  .menu li { width: 100%; }
  .menu li a { line-height: 3em; }
  .menu li + li { padding-left: 0; padding-top: 10px; }
  .menu li + li a:before { display: none; }
  .strudel-holder img { max-height: 200px !important; }
  .strudel-name br { display: none !important; }
}

@media screen 
and (min-width: 640px) {
  .master-head-logo { padding: 30px 0 10px 0; }
  .master-head-logo a { padding-top: 30%; }  
  .menu-toggle { display: none; }
  .menu-list { display:  block !important; }  
  .boxset.alacarte-strudels-set .box,
  .boxset.alacarte-drinks-set .box,
  .boxset.about-us-set .box,
  .boxset.contact-set .box { width: 50%; }
  .boxset.alacarte-strudels-set .box:nth-of-type(2n+1) { clear: both; }
  .boxset.alacarte-strudels-set .box:nth-of-type(1) { clear: none; } 
  .boxset.alacarte-drinks-set::before { display: block; left: 50% }
  .boxset.stories-of-famous-women-set .box:nth-of-type(1) { width: 27%; text-align: right; }
  .boxset.stories-of-famous-women-set .box:nth-of-type(2) { width: 73%; }
  .boxset.stories-of-famous-women-set .box:nth-of-type(2) h3 { text-align: left; }
  .holder.hero { margin-top: 25px; }
}

@media screen 
and (min-width: 768px) {
  body { font-size: 15px; }
  .master-head-logo { padding: 40px 0 20px 0; }
  .master-head-logo a { padding-top: 40%; }   
  .menu li { font-size: 80%; letter-spacing: 1px; }
  .strudel-info { height: 275px; }
}

@media screen 
and (min-width: 1024px) {  
  .holder.home-info,
  .holder.alacarte-info { padding: 80px 20px 40px; }  
  .boxset.alacarte-strudels-set .box,  
  .boxset.alacarte-drinks-set .box,
  .boxset.alacarte-story-set .box { width: 33.333333%; }  
  .boxset.alacarte-strudels-set .box:nth-of-type(3n+1) { clear: both; }
  .boxset.alacarte-strudels-set .box:nth-of-type(2n+1) { clear: none; }
  
  /*
  .boxset.alacarte-strudels-set.keto .box { width: 50%; }
  .boxset.alacarte-strudels-set.keto .box:nth-of-type(3n+1) { clear: none; }  
  .boxset.alacarte-strudels-set.keto .box:nth-of-type(2n+1) { clear: both; }
  .boxset.alacarte-strudels-set.keto .box:nth-of-type(1) { clear: none; }*/
  .boxset.alacarte-strudels-set.keto .box img { max-height: 225px; }
  
  .boxset.alacarte-drinks-set::before { left: 33.333333% }
  .boxset.alacarte-drinks-set::after { display: block; right: 33.333333% }
}

@media screen 
and (max-width: 1280px) {
  .holder.hero { border-radius: 0; }
}

@media screen 
and (min-width: 1280px) {
  body { font-size: 17px; }
  .master-head-logo a { padding-top: 50%; }
  .menu li { font-size: 70%; letter-spacing: 2px; }  
  .strudel-holder img { max-height: 250px !important; }
  .strudel-info { height: 300px; }
}