@charset "utf-8";

/* -------------------------------------------------------------------------------------------------------------------------------
  ☯ >>> NULL CLASSES  ======================================================================================================== >>>
________________________________________________________________________________________________________________________________*/

/* >>> NULL CLASSES RESET (CSS CROSS BROWSER RESET) ============================================= */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
  -webkit-text-size-adjust: 100%;                           /* Correction for iPhone font size bug */
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
:focus {
	outline: none;
}
ins {	/* remember to highlight inserts somehow! */
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* FireFox input bug ======================================= */
input::-moz-focus-inner { border:0; padding:0 }

.anchor{
	position:absolute;
	top:0px;
}

/* -------------------------------------------------------------------------------------------------------------------------------
  ☯ >>> HELPING CLASSES  ===================================================================================================== >>>
________________________________________________________________________________________________________________________________*/

/* TAKY TAM BEJT NEMUSI - NA FLOAT DESIGN --- VYŘEŠIT */

	.cleaner {
		clear: both !important;
		font-size: 0 !important;
		height: 0 !important;
		width: auto !important;
		line-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
	}

  .h1dn{
		position: absolute !important;
		width: 0px !important;
		height: 0px !important;
		overflow: hidden !important;
		left: -1px !important;
		top: -1px !important;
		padding: 0 !important;
		margin: 0 !important;
		display: block !important;
		font-size: 1px !important;
		line-height: 1px !important;
	}

/* -------------------------------------------------------------------------------------------------------------------------------
 ☯ >>> FONT DEFINITIONS ====================================================================================================== >>>
_______________________________________________________________________________________________________________________________ */

@font-face {
	font-family: 'RaleighGothic';
	src: url('/data/fonts/RaleighGothicCS.eot');																											/* IE9 Compat Modes */
	src: url('/data/fonts/RaleighGothicCS.eot?#iefix') format('embedded-opentype'),										/* IE6-IE8 */
		 url('/data/fonts/RaleighGothicCS.woff') format('woff'),																				/* Modern Browsers */
		 url('/data/fonts/RaleighGothicCS.ttf') format('truetype');																			/* Safari, Android, iOS */
	font-weight: normal;                                                                              
	font-style: normal;
}

@font-face {
  font-family: 'Raleway-extralight';
  src: url('/data/fonts/raleway-extralight.eot');
  src: url('/data/fonts/raleway-extralight.eot?#iefix') format('embedded-opentype'),
       url('/data/fonts/raleway-extralight.woff2') format('woff2'),
       url('/data/fonts/raleway-extralight.woff') format('woff'),
       url('/data/fonts/raleway-extralight.ttf') format('truetype'),
       url('/data/fonts/raleway-extralight.svg#svgFontName') format('svg');                         /* Legacy iOS */
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Raleway-light';
  src: url('/data/fonts/raleway-light.eot');
  src: url('/data/fonts/raleway-light.eot?#iefix') format('embedded-opentype'),
       url('/data/fonts/raleway-light.woff2') format('woff2'),
       url('/data/fonts/raleway-light.woff') format('woff'),
       url('/data/fonts/raleway-light.ttf') format('truetype'),
       url('/data/fonts/raleway-light.svg#svgFontName') format('svg');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Raleway-medium';
  src: url('/data/fonts/raleway-medium.eot');
  src: url('/data/fonts/raleway-medium.eot?#iefix') format('embedded-opentype'),
       url('/data/fonts/raleway-medium.woff2') format('woff2'),
       url('/data/fonts/raleway-medium.woff') format('woff'),
       url('/data/fonts/raleway-medium.ttf') format('truetype'),
       url('/data/fonts/raleway-medium.svg#svgFontName') format('svg');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Raleway-semibold';
  src: url('/data/fonts/raleway-semibold.eot');
  src: url('/data/fonts/raleway-semibold.eot?#iefix') format('embedded-opentype'),
       url('/data/fonts/raleway-semibold.woff2') format('woff2'),
       url('/data/fonts/raleway-semibold.woff') format('woff'),
       url('/data/fonts/raleway-semibold.ttf') format('truetype'),
       url('/data/fonts/raleway-semibold.svg#svgFontName') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Raleway-bold';
  src: url('/data/fonts/raleway-bold.eot');
  src: url('/data/fonts/raleway-bold.eot?#iefix') format('embedded-opentype'),
       url('/data/fonts/raleway-bold.woff2') format('woff2'),
       url('/data/fonts/raleway-bold.woff') format('woff'),
       url('/data/fonts/raleway-bold.ttf') format('truetype'),
       url('/data/fonts/raleway-bold.svg#svgFontName') format('svg');
  font-weight: bold;
  font-style: normal;
}

/* -------------------------------------------------------------------------------------------------------------------------------
 ☯ >>> BAKESHOP MOBILE PRESET  =============================================================================================== >>>
_______________________________________________________________________________________________________________________________ */

body, ul, li, h1, h2, h3, h4, h5, p, a, div, textarea {
	background-repeat:no-repeat;                              /* We will use also graphics with size and position as background */
  background-color: #abab9f;                              /* Before JS is loaded */
  background-color: var(--backColor);                       /* To be in its design color until JavaScript Loads */
}

h1, h2, h3, h4{
	font-family: 'RaleighGothic', 'Arial CE', Arial, 'Verdana  CE', Verdana, 'Helvetica CE', Helvetica, sans-serif;
  letter-spacing: calc(0.2 * var(--vw));  
  font-weight: normal;
}

div, p, a{
  font-family: 'Raleway-Light', 'Arial CE', Arial, 'Verdana  CE', Verdana, 'Helvetica CE', Helvetica, sans-serif;
  font-weight: normal;
  color:var(--mainColor);
  /* text-shadow: 0px 0px calc(0.7 * var(--vw)) rgba(0, 0, 0, 0.7); */
}
  p b, h1 b, h2 b, h3 b{
    color:var(--contrastColor);
    /* text-shadow: 0px 0px calc(0.7 * var(--vw)) rgba(255, 255, 255, 0.7); */
  }

h1, h2, h3, h4, div, p, img{                                /* Default - So we can put inside elements with absolute positions and use z-index */
  display:block;                                            /* For sure */
  position:relative;
  z-index:100; 
}
h1, h2, h3, h4, div, p, ul, li, a{
  background-color: transparent;                            /* Not inherited from body colour */
}

img{
  /* box-shadow: 0 0 calc(0.7 * var(--vw)) 0 rgba(0, 0, 0, 0.7); */
}


a, a:hover{
	text-decoration: none;                                    /* Should stay inline (will be styled separately) */ 
}


/* >>> GLOBAL UNIVERSAL ELEMENTS ================================================================ */

.img-bl-overlay{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  margin: 0px;
  z-index:115;
  background-image: radial-gradient(transparent, #000000);
  opacity: 0.4;
}

.speccharA{
  position:relative;
  top:calc(-1.7 * var(--vw));

  font-family: 'Arial', 'Trebuchet MS', 'Arial', 'Arial CE', sans-serif;
  font-size: calc(6 * var(--vw));
  line-height: calc(5 * var(--vw));
}

/* >>> PHONE MAIN PAGE GLOBAL LAYOUT & COLORS =================================================== */

#phoneMainPage{
  width: calc(100 * var(--vw));
  height:auto;
  padding-top: calc(18 * var(--vw));                        /* The size of menu */

  background-color: #abab9f;                              /* Before JS is loaded */
  background-color: var(--backColor);
  color:var(--mainColor);
  /* text-shadow: 0px 0px calc(0.7 * var(--vw)) rgba(0, 0, 0, 0.7); */
  /* text-shadow: 0px 0px 2px black;*/

  opacity:0;
  transition:opacity 0.4s ease-in-out;                      /* PAGE ON LOAD FADE IN EFFECT TIMER (waiting because of window.onload) */
}

  #phoneMainPage .pageBlock{
    position:relative;                                      
    z-index:100;
    width: calc(86 * var(--vw));
    margin-left: calc(7 * var(--vw));;
    margin-right: calc(7 * var(--vw));;
  }
    #phoneMainPage .pageBlock img{
      width: calc(86 * var(--vw));                          /* Default is phone display width minus pageBlock margins */
    }
  #phoneMainPage a:hover,
  #phoneMainPage a:hover div{
    color:var(--contrastColor);
    /* text-shadow: 0px 0px calc(0.7 * var(--vw)) rgba(255, 255, 255, 0.7); */
  }
  #phoneMainPage h2{
    text-align: center;
    font-size: calc(12 * var(--vw));;
    line-height: calc(12.5 * var(--vw));;
  }
    #phoneMainPage h2 b{
      font-weight: normal;
      color:var(--contrastColor);
      /* text-shadow: 0px 0px calc(0.7 * var(--vw)) rgba(255, 255, 255, 0.7); */
    }

/* -------------------------------------------------------------------------------------------------------------------------------
 ☯ >>> PAGE STYLES  ========================================================================================================== >>>
_______________________________________________________________________________________________________________________________ */

/* >>> MAIN (PAGE & MENU) HEADER ============================================================================================== */

#phoneHeader{
  position:fixed;
  top:0px;
  left:0px;
  z-index:300;
  width:calc(100 * var(--vw));
  height:calc(18 * var(--vw));
  background-color: #abab9f;                               /*rgba(31, 28, 20, 0.9);*/

  padding: 0;
  margin: 0;

  box-shadow: 0 0 calc(1.4 * var(--vw)) calc(0.7 * var(--vw)) rgba(0, 0, 0, .65);                   /* Box Shadow syntax: box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit; */
  opacity:0;
  transition:opacity 0.2s ease-in-out;                      /* PAGE ON LOAD FADE IN EFFECT TIMER (waiting because of window.onload) */
  /* transition:all 0.25s ease-in-out; */
}

  /* For Debugging - Solvede in JavaScript with css transition
  .phoneHeaderShadow{
    box-shadow: 0 0 calc(1.4 * var(--vw)) calc(0.7 * var(--vw)) rgba(0, 0, 0, .65);                   /* Box Shadow syntax: box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit; *
  }
  */

  #phoneHeader img{
    /* box-shadow:none; */
  }

  #phoneHeader h1{
    width: calc(100 * var(--vw));
    height: calc(14 * var(--vw));
  }
    #phoneHeader h1 img{
      z-index:550;
      margin-top:calc(3.55 * var(--vw));
      margin-left:calc(34 * var(--vw));
      width:calc(32 * var(--vw));
      opacity:0.9;
      transition:opacity 0.25s ease-in-out;
    }

    #phoneHeader h1 #headerLogoYellow{
      position:absolute;
      top:calc(-3.55 * var(--vw));
      left:0px;
      opacity:0; 
    }

  #phoneHeader #lang-switch{
    position:absolute;
    z-index: 310;
    top:calc(5.5 * var(--vw));
    left: calc(4.5 * var(--vw));
    width: calc(15 * var(--vw));

    font-family: 'Raleway-semibold', 'Arial CE', Arial, 'Verdana  CE', Verdana, 'Helvetica CE', Helvetica, sans-serif;
    font-size: calc(6.5 * var(--vw));
    line-height: calc(7 * var(--vw));

    letter-spacing: calc(0.15 * var(--vw));
    transform: scaleX(0.95);
    opacity:0.7;

    /* transition:color 0.25s ease-in-out; */
  }

  #phoneHeader #menu-hamburger,
  #phoneHeader #menu-hamb-close{
    position:absolute;
    z-index:310;
    right:calc(5.5 * var(--vw));
    top:calc(4.4 * var(--vw));
    width: calc(8 * var(--vw));
    height: calc(8 * var(--vw));
    cursor: pointer;
    opacity:0.8;
    transition:opacity 0.25s ease-in-out;
  }

  #phoneHeader #menu-hamb-close{
    opacity:0;
    top:calc(4.75 * var(--vw));
    right:calc(5.25 * var(--vw));
    z-index:311 !important;
    transition:opacity 0.25s ease-in-out;
   }

/* >>> PHONE MAIN MENU ======================================================================================================== */

#phoneHeader #menuLogoBG{
  position:absolute;
  z-index:10;
  top:0px;
  left:0px;
  width: calc(100 * var(--vw));
  height: calc(18 * var(--vw));
  
  background: linear-gradient(120deg, #000000, #171717, #000000);
  opacity:0;
  transition:opacity 0.25s ease-in-out;
}

#menuContainer{
  position:fixed;
  display:none;
  z-index:500;
  top:  calc(18 * var(--vw));
  left:0px;
  width:100%;
  height:  calc(100% - (18 * var(--vw)));

  opacity:0;
  transition:opacity 0.25s ease-in-out;
}

  #menuContainer .menuBackground{
    position:absolute;
    display:block;
    z-index:510;
    top:-1px;  /* iPhone debug correction */
    left:0px;
    width:100%;
    height:calc(100% + 10px);  /* iPhone debug correction */
    background-color: #151515;
  }
 
  #menuContainer ul{
    margin-top: calc(5 * var(--vw));
  }
    #menuContainer ul li{
      position:relative;
      display:block;
      z-index: 550;
      height: calc(12 * var(--vw));
    }
      #menuContainer ul li a{
        display:block;
        width:100%;
        height: calc(12 * var(--vw));
        font-family: 'RaleighGothic', 'Arial CE', Arial, 'Verdana  CE', Verdana, 'Helvetica CE', Helvetica, sans-serif;
        letter-spacing: 0.2;
        text-align:center;
        color:#e1e1e1;
        font-size: calc(9 * var(--vw));
        line-height: calc(12 * var(--vw));
        opacity:0.9;
        /* text-shadow: none; */
      }
      #menuContainer ul li a:hover{
        opacity:0.9;
        background-color:#070707;
        color:#bcb142;
        /* text-shadow: none; */
      }

/* -------------------------------------------------------------------------------------------------------------------------------
 ☯ >>> PAGE STYLES - PHONE MAIN PAGE  ======================================================================================== >>>
_______________________________________________________________________________________________________________________________ */

/* >>> MAIN VISUAL ============================================================================== */

#phoneMainPage .mainVisualCont{
  position:relative;
  display:block;

  width: 100%;

  /* @TODO - zmerit vierwport javascriptem - pridat jako vh */

  height: calc(var(--vw) * 160.778);                        /* Phone Display 16 : 9 minus header 14 * vw minus bar 3% * vw */
  margin: 0px;

  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
#phoneMainPage .mainVisualCont .imgMainVisual{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 1; 
    margin: 0px;
  }
  #phoneMainPage .mainVisualCont #imgMainVisual-02{
    position:absolute !important;
    top:0px;
    left:0px;

    z-index:111;
    opacity: 0;
    transition:opacity 1.5s ease-in-out !important;
  }
  #phoneMainPage .mainVisualCont #mainVisOverlay{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0px;
    z-index:115;
    background-image: radial-gradient(transparent, #000000);
    opacity: 0.4;
  }

  /* #phoneMainPage .h2-Block1{
    display:block;
    margin-top: calc(9 * var(--vw));
  } */

/* >>> MAP HEADER TEXT ========================================================================== */

#phoneMainPage #txtHeader{
  margin-top: calc(14 * var(--vw));
}

/* >>> BUTTON ESHOP ============================================================================= */

#phoneMainPage #pageLinkEshop{
  margin-top: calc(12 * var(--vw));
  text-align: center;
}
#phoneMainPage #pageLinkEshop a{
    display:inline-block;
    width: calc(70 * var(--vw));
    height: calc(6 * var(--vw));
    padding-top: calc(1 * var(--vw));
    padding-bottom: calc(4 * var(--vw));
    
    font-family: 'RaleighGothic', 'Trebuchet MS', 'MS Sans Serif', Arial, Helvetica;
    font-size: calc(10 * var(--vw));
    color:var(--contrastColor);
    /* text-shadow: 0px 0px calc(1.5 * var(--vw)) rgba(255, 255, 255, 0.7); */
    letter-spacing: calc(0.2 * var(--vw));
    
    background-color: var(--mainColor);
    border-radius: calc(7 * var(--vw));
    /* box-shadow: 0 0 calc(0.7 * var(--vw)) 0 rgba(0, 0, 0, 0.5); */
  }
    #phoneMainPage #pageLinkEshop a:hover{
      background-color: var(--contrastColor);
      color: var(--mainColor);
      /* text-shadow: 0px 0px calc(0.7 * var(--vw)) rgba(0, 0, 0, 0.7); */
      /* box-shadow: 0 0 calc(0.7 * var(--vw)) 0 rgba(255, 255, 255, 0.7); */
    }

/* >>> TOP CONTACT ============================================================================== */

#phoneMainPage #topContact{
  margin-top: calc(12 * var(--vw));
}
  #phoneMainPage #topContact p{
      font-family: 'RaleighGothic', 'Trebuchet MS', 'MS Sans Serif', Arial, Helvetica;
      text-align: center;
      font-size: calc(11 * var(--vw));
      line-height: calc(11 * var(--vw));
      letter-spacing: calc(0.2 * var(--vw));

      padding-top: calc(2 * var(--vw));
      padding-bottom: calc(1.5 * var(--vw));
    }
    #phoneMainPage #topContact a{
      font-family: 'RaleighGothic', 'Arial CE', Arial, 'Verdana  CE', Verdana, 'Helvetica CE', Helvetica, sans-serif;     
    }
    #phoneMainPage #topContact b{
      color:var(--contrastColor);
      /* text-shadow: 0px 0px calc(0.7 * var(--vw)) rgba(255, 255, 255, 0.7); */
      font-weight:normal;
    }

/* >>> MAP & GOOGLE MAPS ======================================================================== */

#phoneMainPage #pageLinkGMaps{
  margin-top: calc(11 * var(--vw));
}
  #phoneMainPage #pageLinkGMaps h2{                            /* TEXT BAKLESHOP MAP */
    display: block;
    margin-bottom: calc(14 * var(--vw));
  }
  #phoneMainPage #pageLinkGMaps a{
    position:relative;
    display: block;
    width: calc(86 * var(--vw));
    margin-left: calc(7 * var(--vw));
    margin-right: calc(7 * var(--vw));
    
    font-family: 'RaleighGothic', 'Trebuchet MS', 'MS Sans Serif', Arial, Helvetica;
    font-size: calc(9 * var(--vw));
  }
  #phoneMainPage #pageLinkGMaps a div{
    font-family: 'RaleighGothic', 'Arial CE', Arial, 'Verdana  CE', Verdana, 'Helvetica CE', Helvetica, sans-serif;
    position:absolute;
    right:0px;
    top:0px;
    padding-left: calc(11 * var(--vw));
    color: var(--contrastColor);
    /* text-shadow: none; */
    /* text-shadow: 0px 0px calc(1 * var(--vw)) rgba(255, 255, 255, 0.5); */

    background-image: url('/data/img/mobile-white/globals/hand-r.png');
    background-repeat: no-repeat;
    background-size: calc(10 * var(--vw)) calc(8 * var(--vw));  /* Image Hand Ratio: 1.457 */
    background-position: 0px calc(1.75 * var(--vw));
  }
  #phoneMainPage #pageLinkGMaps a:hover div{
    color: var(--mainColor);
    /* text-shadow: 0px 0px calc(0.7 * var(--vw)) rgba(0, 0, 0, 0.7); */
  }
  #phoneMainPage #pageLinkGMaps img{
    margin-top: calc(2 * var(--vw));
    width: calc(86 * var(--vw));                                /* image ratio is 1.31 */
    height: calc(65.6 * var(--vw));
    margin-left: 0px;
    margin-right: 0px;
  }

/* >>> OUR ESTABLISHMENTS ======================================================================= */

#phoneMainPage #txtOurBranches{
  margin-top: calc(15 * var(--vw));
  /* text-shadow: 0px 0px calc(0.7 * var(--vw)) rgba(0, 0, 0, 0.7); */
}

/* >>> BIG BAKESHOP KOZÍ ======================================================================== */

  #phoneMainPage #blBshopKozi{                               /* Also styled as .pageBlock */
    margin-top: calc(22 * var(--vw));
  }
  #phoneMainPage #blBshopKozi h2{
    position:absolute;
    z-index:150;
    right: calc(0.4 * var(--vw));
    top: calc(-16.7 * var(--vw));
    letter-spacing: 0px;
    font-size: calc(23 * var(--vw));
    line-height: calc(23 * var(--vw));
    color: var(--contrastColor);
    /* text-shadow: 0px 0px calc(2.1 * var(--vw)) rgba(255, 255, 255, 0.4); */
  }
    #phoneMainPage #blBshopKozi h2 b{
      position:absolute;
      z-index:150;
      text-align:right;
      top: calc(2.8 * var(--vw));
      right: calc(25.3 * var(--vw));
      width: calc(14 * var(--vw));
      font-size: calc(7 * var(--vw));
      line-height: calc(6.3 * var(--vw));
      color: var(--mainColor);
      text-shadow:none;
      /* text-shadow: 0px 0px calc(0.7 * var(--vw)) rgba(0, 0, 0, 0.7); */
    }
    #phoneMainPage #blBshopKozi h2 i{
      position:absolute;
      z-index:150;
      text-align:right;
      top: calc(21 * var(--vw));
      right: calc(0.8 * var(--vw));
      
      font-size: calc(7 * var(--vw));
      line-height: calc(7 * var(--vw));
      color: var(--mainColor);
      /* text-shadow: 0px 0px calc(0.7 * var(--vw)) rgba(255, 255, 255, 1); */
    }
    #phoneMainPage #blBshopKozi #img1-BSKozi{
      width: calc(86 * var(--vw));
      height: calc(57.3 * var(--vw));
      margin-bottom: calc(1 * var(--vw));
    }
    #phoneMainPage #blBshopKozi #img2-BSKozi{
      margin-left: calc(34.8 * var(--vw));
      width: calc(51.2* var(--vw));
    }
    #phoneMainPage #blBshopKozi #img3-BSKozi{
      position: absolute;
      top: calc(58.3 * var(--vw));
      left:0px;
      width: calc(34.05 * var(--vw));
    }
    #phoneMainPage #blBshopKozi #img4-BSKozi{
      position: absolute;
      top: calc(93.3 * var(--vw));
      left:0px;
      width: calc(34.05 * var(--vw));
    }
    #phoneMainPage #blBshopKozi .img-bl-overlay{
      opacity: 0.2;
    }

/* >>> BAKESHOP LITTLE BAKERY =================================================================== */

#phoneMainPage #blBshopLittle{                             /* Also styled as .pageBlock */
  margin-top: calc(42 * var(--vw)); 
}
#phoneMainPage #blBshopLittle h2{
  width:100%;                                               /* For sure because there are lot of absolute positioning inside */
  z-index:150;
  text-align:left;
  letter-spacing: 0px;
}
  #phoneMainPage #blBshopLittle h2 span{
    position:absolute;
    display:block;
    z-index:150;
    
    top: calc(-29 * var(--vw));
    left: calc(1.5 * var(--vw));
    width: calc(50 * var(--vw));

    font-size: calc(20 * var(--vw));
    line-height: calc(17.5 * var(--vw));
    text-align:left;
  }
  #phoneMainPage #blBshopLittle h2 b{
    position:absolute;
    z-index:150;

    top: calc(-13.7 * var(--vw));
    right: calc(1 * var(--vw));
    width: calc(20 * var(--vw));

    font-size: calc(7 * var(--vw));
    line-height: calc(6.3 * var(--vw));
    text-align:right;
  }
  #phoneMainPage #blBshopLittle h2 i{
    position:absolute;
    z-index:150;
    top: calc(7 * var(--vw));
    left: calc(1.5 * var(--vw));
    
    font-size: calc(9 * var(--vw));
    line-height: calc(7 * var(--vw));
  }
  #phoneMainPage #blBshopLittle #img1-BSLittle{
    margin-bottom: calc(1 * var(--vw));
  }
  #phoneMainPage #blBshopLittle #img2-BSLittle{
    width: calc(51.1 * var(--vw));
  }
  #phoneMainPage #blBshopLittle #img3-BSLittle{
    position: absolute;
    top: calc(87 * var(--vw));
    right:0px;
    width: calc(34 * var(--vw));
  }
  #phoneMainPage #blBshopLittle #img4-BSLittle{
    position: absolute;
    top: calc(122.25 * var(--vw));
    right:0px;
    width: calc(34 * var(--vw));
  }
  #phoneMainPage #blBshopLittle .img-bl-overlay{
    opacity: 0.3;
  }

/* >>> OUR BRANCHES TEXTS DESCRIPTIONS ========================================================== */

  #phoneMainPage #txtKoziAfter p,
  #phoneMainPage #txtBLittleAfter p{
    padding-top: calc(3 * var(--vw));
    font-size: calc(4.7 * var(--vw));
    line-height: calc(5 * var(--vw));
    font-family: 'Raleway-medium', 'Arial CE', Arial, 'Verdana  CE', Verdana, 'Helvetica CE', Helvetica, sans-serif;
    clear:both;
    /* text-shadow: 0px 0px calc(0.7 * var(--vw)) rgba(0, 0, 0, 1); */
  }
  #phoneMainPage #txtBLittleAfter p{
    color: var(--mainColor);
    font-family: 'Raleway-medium', 'Arial CE', Arial, 'Verdana  CE', Verdana, 'Helvetica CE', Helvetica, sans-serif;
    
    /* text-shadow: none; */
    /* text-shadow: 0px 0px calc(2 * var(--vw)) rgba(255, 255, 255, 0.5); */
  }

/* >>> ANYTIME FOR COFFEE ======================================================================= */

  #phoneMainPage #txtCoffee{
    margin-top: calc(14 * var(--vw));
  }

  #phoneMainPage #txtCoffee h2{
    margin-bottom: calc(12 * var(--vw));
  } 
    #txtCoffee #txtCoffeeFootH{
      font-family: 'RaleighGothic', 'Arial CE', Arial, 'Verdana  CE', Verdana, 'Helvetica CE', Helvetica, sans-serif;
      letter-spacing: calc(0.2 * var(--vw));
      text-align: left;
      margin-top: calc(3 * var(--vw));
      font-size: calc(14.4 * var(--vw));
      line-height: calc(14.4 * var(--vw));
    }

    .phoneMainCs #txtCoffee #txtCoffeeFootH{
      font-size: calc(13.45 * var(--vw));
      line-height: calc(13.45 * var(--vw));




    }

/* >>> LINKS ESHOP AND GALLERY ================================================================== */

#phoneMainPage #linksMenu{
  margin-top: calc(25 * var(--vw));
}

#phoneMainPage #linksMenu img{
  width: calc(45 * var(--vw));
}

/* ARROW LINKS ================================================================================== */

/* FOR DEMONSTRATION, THAT WE CAN USE ALSO ONE GRAPHIC FILE (ITEMS.PNG) WITH ALL GRAPHICS IN ONE REQUEST, INSTEAD OF MANY REQUESTS FOR EACH IMAGE

USED 37px OF ORIGINAL "A" TAG's HEIGHT -> MEASURED AS 8.55 OF RELATIVE UNITS (Mobile display width in % as responsive)
-> WHICH MEANS THAT RECALCULATION RATIO IS 37 pixels / 8.55 measured = 4,327485380116959 - WE WILL USE THIS EXACT NUMBER FOR ALL OF ARROW ELEMENTS
AND ITS RECALCULATIONS FOR RESPONSIVE (FINAL DISPLAY W. % ROUNDED TO 2 DECIMAL NUMBERS - SHOULD BE PRECISE ENOUGH. WE WILL CHECK THE RESULT IN BROWSER) */

/* AFTER: Tested at FF (Gecko) and iPhone SE3 (WebKit - should be same as V8) after all calculations - worked very smoothly. The ratio is for intended arrows width in dipslay percents. */

#phoneMainPage #linksMenu .arrowLinks{
  position:absolute;
  left: calc(48 * var(--vw));
  top:0px;
  width: calc(30.04 * var(--vw));                           /* Original 130px (Default Container width) */
}
#phoneMainPage #linksMenu .arrowLinks a{
  /* border:1px solid red; */                               /* Temporary ratio measuring border for intended arrow width in design */
  display:block;
  height: calc(8.55 * var(--vw));                           /* WE'RE USING THIS ELEMENT FOR RATIO CALCULATION - ORIGINAL WAS IN 37 PX, 8.55 FITS EXACTLY TO THE TEMPORARY RED ELEMENT BORDER (BY EYE) */
  background-image:url("/data/img/items.png");

  /* WE NEED TO ADD BACKGROUND SIZE RECALCULATED BY PHONE'S DISPLAY WIDTH : 8.55 / 37 = 0,231081081081081 IS RATIO FOR 1 PIXEL (1/RATIO) APPLIED ON ORIGINAL BS ITEMS.PNG FILE FROM 2012

     WIDTH:  ORIGINAL ITEMS.PNG WIDTH 210px * 0,231081081081081 = 48,527 (rounded)
     HEIGHT: ORIGINAL ITEMS.PNG WIDTH 1200px * 0,231081081081081 = 277,297 (rounded)
  */

  background-size: calc(48.527 * var(--vw)) calc(277.297 * var(--vw));                                        

  font-family: 'RaleighGothic', 'Arial CE', Arial, sans-serif;
  font-size: calc(7.85 * var(--vw));                        /* 34px in original */
  line-height: calc(8.08 * var(--vw));                      /* 35px in original */

  padding-top: calc(0.92 * var(--vw));                      /* 4px in original */
  padding-left: calc(2.08 * var(--vw));                     /* 9px in original */
}

/* Also with different picture wich is another size arrow and with hovers which only change bacground crop reactangle at background position in image */

#phoneMainPage #linksMenu .arrowLinks .linkMedArr{
    width:  calc(27.5 * var(--vw));                         /* 119px; in original */
    color:var(--contrastColor);
    /* text-shadow: 0px 0px calc(0.7 * var(--vw)) rgba(255, 255, 255, 0.7); */
    background-position:0px  calc(-9.71 * var(--vw));       /* -42px; in original ...ETC. */
  }
  #phoneMainPage #linksMenu .arrowLinks .linkMedArr:hover{
      background-position:0px 0px;
      color:var(--mainColor);
      /* text-shadow: 0px 0px calc(0.7 * var(--vw)) rgba(0, 0, 0, 0.7); */
  }
#phoneMainPage #linksMenu .arrowLinks .linkLargeArr{
    margin-top: calc(4 * var(--vw));
    width: calc(23.57 * var(--vw));
    color:var(--contrastColor);
    /* text-shadow: 0px 0px calc(0.7 * var(--vw)) rgba(255, 255, 255, 0.7); */
    background-position:0px  calc(-29.12 * var(--vw));    
}
  #phoneMainPage #linksMenu .arrowLinks .linkLargeArr:hover{
    color:var(--mainColor);
    /* text-shadow: 0px 0px calc(0.7 * var(--vw)) rgba(0, 0, 0, 0.7); */
    background-position:0px  calc(-19.41 * var(--vw));
  }

/* >>> CONTACT ================================================================================== */

#phoneMainPage #contact{
  margin-top: calc(27 * var(--vw));;
}
  #phoneMainPage #contact p{
      font-family: 'RaleighGothic', 'Trebuchet MS', 'MS Sans Serif', Arial, Helvetica;
      font-size: calc(11 * var(--vw));
      line-height: calc(11 * var(--vw));
      letter-spacing: calc(0.2 * var(--vw));

      border-top: calc(0.3 * var(--vw)) solid #e1e1e1;
      padding-top: calc(2 * var(--vw));
      padding-bottom: calc(1.5 * var(--vw));
    }
    #phoneMainPage #contact a{
      font-family: 'RaleighGothic', 'Arial CE', Arial, 'Verdana  CE', Verdana, 'Helvetica CE', Helvetica, sans-serif;     
    }
    #phoneMainPage #contact a:hover{
      color: #a59717;
    }
    #phoneMainPage #contact b{
      /* color:#BFB02C; */
      color:var(--middleColor);
      color:#BFB02C;
      font-weight:normal;
    }
    #phoneMainPage #contact i{
      color:var(--contrastColor);
      text-shadow: 0px 0px calc(1 * var(--vw)) rgba(0, 0, 0, 0.4);
      color:#a59717;
    }
    
    #phoneMainPage #contact .companyJustice{
      display:block;
      padding-top: calc(2 * var(--vw));
      border-top:0px;

      font-family: 'Raleway-extralight', 'Arial CE', Arial, 'Verdana  CE', Verdana, 'Helvetica CE', Helvetica, sans-serif;
      font-size: calc(3.2 * var(--vw));
      line-height: calc(3.6 * var(--vw));
    }
    
    #phoneMainPage #contact .cntBottom{
      border-bottom: calc(0.3 * var(--vw)) solid #e1e1e1;
    }
    #phoneMainPage #contact .speccharA{
      position:relative;
      top:calc(-1.7 * var(--vw));

      font-family: 'Arial', 'Trebuchet MS', 'Arial', 'Arial CE', sans-serif;
      font-size: calc(6 * var(--vw));
      line-height: calc(5 * var(--vw));
    }

/* >>> SOCIAL NETWORKS SVGS ===================================================================== */

#contact #nw-links{
	position:absolute;
  z-index: 150;
	right:calc(-2 * var(--vw));
	top:calc(1.4 * var(--vw));
  border:0px !important;
}
  #contact #nw-links a{
		display:block;
    margin-top:calc(0.6 * var(--vw));
	}
  #contact #nw-links a svg{
    width:calc(12 * var(--vw));
    height:calc(12 * var(--vw));
  }
	#contact #nw-links #inst-link svg{
    width:calc(10.9 * var(--vw));
    height:calc(10.9 * var(--vw));
  }
	#contact #nw-links #fb-link svg{
    position: relative;
    right:calc(1.1 * var(--vw));
    width:calc(12.9 * var(--vw));
    height:calc(12.9 * var(--vw));
  }

/* >>> COPYRIGHT 2025 ==================================================================================================== >>>	*/

.copy2025{
  z-index:3;
  width: calc(86 * var(--vw));
  margin-left: calc(7 * var(--vw));
  margin-right: calc(7 * var(--vw));
  margin-top: calc(14 * var(--vw));
  padding-bottom: calc(5 * var(--vw));
}
  .copy2025 p,
  .copy2025 p i{
    font-family: 'RaleighGothic', 'Trebuchet MS', 'MS Sans Serif', Arial, Helvetica;
    font-size: calc(7 * var(--vw));
    line-height: calc(7 * var(--vw));
  }
  .copy2025 i{
    float:right;
    font-style: normal;
  }
  .copy2025 .speccharC{
    font-family: sans-serif;
    font-size: calc(5 * var(--vw));
    line-height: calc(5 * var(--vw));
  }

/* >>> MAIN PAGE FOOTER BACKGROUND ============================================================================================ */

#phoneMainPage .mainBgFooter{
  position:absolute !important;
  z-index:1;
  bottom:0px;
  width: calc(100 * var(--vw));
  height: calc(140 * var(--vw));
}

  #phoneMainPage .mainBgFooter img{
    position:absolute;
    z-index:1;
    width: calc(100 * var(--vw));
    height: calc(140 * var(--vw));
    /* box-shadow: none; */
 /*opacity: 0.6; */
  }

  #phoneMainPage .mainBgFooter div{
    position:absolute;
    width: calc(100 * var(--vw));
    height: calc(60 * var(--vw));
    z-index:2;
    top:0px;
    
    background: linear-gradient(to top, transparent 0%, #abab9f 100%);
  }