@charset "UTF-8";

/* Font */
@font-face {
    font-family: 'PF Reminder Pro Regular';
    src: url("./PF\ Reminder\ Pro\ Regular.ttf");
    font-style :normal;
    font-weight: normal;
} 

body{
    font-family:'PF Reminder Pro Regular';
    background-color:white !important;            
    padding-top:50px;    
} 



/*NOTE: CAREFUL WITH PATHS of images in the css - if CSS is to be loaded from a different server!*/
* {
    box-sizing:border-box;
}

html, body
{	
    overscroll-behavior-x:none !important;/*contain NO work TRY TO STOP ACCIDENTA SLIDE TO LEFT ACTIVATING HISTORY!!!!*/
	overscroll-behavior-y: contain;	/*prevent pull-down-to-refresh of mobile chrome*/
    overflow-x:hidden;
    position:relative;/*Try like this*/
    
}


/*Try like this - no good... will try something with code...*/
.virt-root{
    /*touch-action:none;*/ 
    overscroll-behavior-x:none !important;/*NO seem to work...*/
    /*border:1px solid green !important;*/
}

html,  button, input, textarea {
    font-family: Helvetica, Arial, sans-serif;
}

/*Defaults, can be overridden*/
body, h4, button, .site-background, .loading-engine-message { background-color: #273c75;}


/*================================== Designer iframe =============================================*/
.virt-root {
	/* border-top: 1px solid #e7e7e7; */
	position:absolute;	
	width:100%;
    
    top:40px;/*OCT2023 top:28px;	     */
    /*NOTE: we have a problem with height:100% as now product page (BODY) can be quite tall
     So, we need to call the callback PRIOR to executing the zooming!or set best zoom*/
    bottom:0;

    left:-100%;/*OK because the "loading" animation is visible - child visib:visible seems to work even if parent visib:hidden*/
	background-color:white;		
    visibility:hidden;

    /*NOTE: To simulate a fake 3d effect on project template thumbnails (which uses z-index:-1) we need a parent z-index somewhere*/
    z-index:0;
}

/* Hide the 'Active project' option from mobile menu when in the context of A WEBSITEWRAPPER  
ALSO: Now that we hid the header, move the templatecategories up */
.virt-new-project-control-wrapper .header-panel  { display: none; }
.virt-new-project-control-wrapper .master-toolbar .active .template-categories-list { 
    /* top:0;  */
    top:-1px; /*There is a 1px 'tiny white pixel' on the top left -because of rounded corner, moving up 1px hides it!*/
}

.virt-new-project-control-wrapper .master-toolbar-wrapper {padding-top:0px;}



/* ======================== TUNE THE LOOK OF ORDER PANEL (Was in partner profile, moving here) ============== */

/*Collages .collage-view - not set to orderspanel right now*/
tr.order-frame .second-td:after {
    content: "полистеренова рамка с антирефлексно стъкло";
    margin-left: .2em;
    font-family: inherit;
    opacity: 1;
    line-height: .6;
    font-size: 95%;
}



/*ORDER PANEL COMMON CSS*/
.order-panel-viewer .order-delivery .second-td
{
 font-size: 95%;
 text-indent: -20px;
}
    

.order-panel-viewer .order-delivery .first-td
{
visibility:hidden;
}


.order-panel-viewer .delivery-info td
{
    padding-left:10px;
    font-size: 90%;
}


/*Add a phone under the submit order button*/
/* .order-panel-viewer .button-create-order-cell:after
{
  content:"За контакт: " var(--telephone, '0877 372774');
  display: block;
  margin-top: 10px;
} */

/*The tr row itself*/
.order-delivery td {
    position: relative;
    left: -50px;
}

.delivery-radios > td> div
{
    text-indent:0;
    white-space: nowrap;
    margin-top:10px;
    border-bottom: 1px solid #ccc;
    position:relative;
}

.delivery-radios > td > div:before, .delivery-radios > td > div:after {
    content: "";
    position: absolute;
    width: 50px;
    border-bottom: 1px solid  #ccc;
bottom: -1px;
    left: -20px;
    right: -20px;
}

.delivery-radios > td> div:after {
  left:auto;
  display:none;/*TEMP*/
}


.order-panel-viewer .order-delivery .second-td label {   
    display: inline-block;
}



.delivery-radios > td> div input {
    /* background-color: red; */
    opacity: 0;
    position: fixed;
    width: 0;
}

/*Autocomplete - remove arraw in Chrome*/
.order-panel-viewer [list]::-webkit-calendar-picker-indicator {
  display: none;
}

.delivery-radios > td> div input~span {
    border: 1px solid  #ccc;
    border-bottom: 1px solid transparent;
    position: relative;
    line-height: 24px;
    display: inline-block;
    padding-right: 4px;    
    cursor: pointer;
    /*top: 1px;*/
}

/*Selected state*/
.delivery-radios > td> div input:checked~span {
    bottom: -2px;
    cursor: default;
    background-color: white;
    line-height: 25px;
}

/*Econt icon*/
.delivery-radios > td> div label:first-child span {
    padding-left: 20px;
    background-image: url(/couriers/econt.png);
    background-repeat: no-repeat;
    background-position: 4px center;
    background-size: auto 65%;
}

/*Home icon*/
.delivery-radios > td> div label:last-child span:before {
    content: "\e701";
    font-family: Virt;
    vertical-align: middle;
    margin-right: 3px;
    margin-left: 3px;
}



/*============================================ TUNE VIRT ===========================================*/
/*Make input font match the labels */
.virt-app-header-popup input {
    font-family: Roboto Condensed; 
}

/* OCT2023: Right now this class has position:fixed, so it does not position with virt-root but with body */
.virt-preview-shim{
    top:40px;
}

/*VIRT:Do some UI simplification of the app itself OCT2023*/
body.designer-visible .start-screen .virt-avatar{
    top:50px; 
}

/* ALSO - Hide login link in engine */
.virt-root:not(.logged-user) .virt-app-header .virt-avatar {
    display: none;
}


/* ================================================================================================================  */
body.designer-visible
{        
  /*OK - like this it actually DOES help -except if user scrolls horizontally in content area!
        ALSO - pinch-zoom-disable-using-a-meta-tag is not always respected by modern browsers - disable that, too!
      OK - if I moved this to body directly, it disables scrolling, so for time being let it be only if designer visible
    */
    touch-action:none;
        
	padding-top:0;    
    border-bottom:1px solid #ccc;
	overflow:hidden;/*Disable scrolling if designer visible - OK but this seems to trigger unwanted scroll-left-trigger-BACK!*/	       
}


 /*NOV2023: When in item properties page mode -> a vertical scrollbar in phone - try to see why!
//YEP - yet again - see why -> happens with ?domain=false too - obviously
if designer visible -> just disable body:overflow-y?*/
body.designer-visible .virt-root {
    overflow-y:hidden !important;
}

/*OK, try to hack body scroll like this - if overflow-y, the back behavior is NOT triggered - NO EFFECT!*/
/*@media only screen  and (min-width: 250px) and (max-width: 800px) {
    .virt-root{
       border:2px solid green !important;
       overflow-y:visible;
       overflow-x:hidden !important;
    }

    body::-webkit-scrollbar {        
        height: 0px;
        width: 0px;
    }
 }*/


/* Because of a problem on mobile phones, with stuff showing under iframe, let's hide everything but menu and logo*/
/*body.designer-visible > * */
/*The approach above hides the login popup, too! - it is attached directly to the body..*/
body.designer-visible .tab-panel > * { display:none; }
body.designer-visible .app-logo
{          
    width: 80px;
    height: 37px;
    left: 15px;
}

body.designer-visible .virt-root{
    visibility:visible;
    display:block;   
    left:0;
}


/* OCT2023 */
#cssmenu .active{
    background-color: var(--highlight,orange);
}

/* Tune the css */
#cssmenu > ul > li .icon-edit::before{        
    font-family: 'Virt';
    content: "\e203"; 
    margin-right: 2px;
}

#cssmenu > ul > li .icon-information::before{        
    font-family: 'Virt';
    content: "\e121";    
}

body:not(.mobile-website) #cssmenu > ul > li .virt-icon-grid:before{
    margin-right: 4px;
}

/* =================== Show/hide certain elements based on body css class ======================== */
/*Some elements should only be visible in mobile*/
.mobile-only {
    display:none;
}

/* OCT2023: Define a proper mobile css class - we may need this */
.mobile-website{
    /* border:2px solid red !important; */
}

/*Show mobile-only elements - NOTE: Not ideal if element we want to show needs inline-block or inline...!
    I shall consider doing it differently. NOV2023: Adding a parent css class to kick behavior only when mobile theme set!*/
.mobile-website .mobile-only { display:block; }

/* Home link on toolbar | use important to force precendce over other css*/
.mobile-website .desktop-only {display: none !important;}



/*EXPERIMENT - ok does not feel natural - 1) we have no cursor on click 2) select all no work visually 3) no new line. So I will do it was...*/
/*.courier-address-input {
    border:1px solid red !important;
    position:absolute;
    top:0;
    left:0;
    opacity:.1;
    bottom:0;
    height:100%;
}*/


.tab-panel ul{
    font-family: 'Roboto Condensed', sans-serif;
    margin:0;
    padding:0;
}


.header img,
.tab-panel img, .res-img {
  max-width: 100%;
  height: auto;
}

/*Simulate "cover" - https://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover-and-contain-for-image-elements/21668368*/
.header img,
.contents > * img {
  /*max-width:none;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  min-width: 1000%;
  min-height: 1000%;
  -webkit-transform:scale(0.1);
  transform: scale(0.1);*/
    position: absolute;
    top:0;
    left:0;
    object-fit:cover;
    height:100%;/*Has to be some absolute value. % is applied as part of the actual image size itself!....BUT OK,somehow seems to work as I need it in this scenario*/
}


.tab-panel button {
	/*outline: none;*/
    box-shadow: none;
    cursor:pointer;
    border-color: white;
	color:white;	
    border-style: solid;
    border-width:1px;	
	text-transform:uppercase;
}


.tab-panel h1, .tab-panel h2, .tab-panel h3, .tab-panel h4, .tab-panel h5, .tab-panel h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
 
/*LOGO*/
.app-logo{
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    /*background-image: url(./img/logo.png);*/
    position: absolute;
    top: 0;
    background-size: contain;
    /* background-color: #555; */
    width: 150px;
    height: 70px;
    left: 31px;
    z-index: 1000;
     transition: opacity ease-in .5s; 
}

/*Apply to all logos*/
.app-logo:after {
    content: "";
    left: 0px;
    top: 0px;
    right: -2px;    
    bottom: -2px;
    position: absolute;    
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    background-repeat: inherit;
    filter: brightness(30%) opacity(.3) blur(2px);
}


/*==================== LOGO ===========================*/
.home-page:not(.designer-visible) .app-logo {
    left: 10%;    
    top: 10px;
    width: 20%;
    height: 78px;
    background-color: transparent;    
}


 /*Set a loading icon somewhere... byt only if designer visible! Otherwise - */
.virt-waiting-cursor .products-flatmenu li.active:before,
/*.designer-visible.virt-waiting-cursor:after,*/
/*For mobile - make a visual hint when user is uploading */
.product-content .details-content .upload-reusable-photo.upload-active .upload-icon 
{
    background-image: url(/styles/Images/loading.gif);
    background-position: center center;
    background-repeat: no-repeat;   
    background-size: 100%;
    z-index: 10000;                 
    color:transparent;
}


/*Experimenting with adding materialdesign-like loading http://dev.gojko.net/web/2015/09/19/material-design-progress-pure-css.html*/
.progress-line { 
    display:none; 
    position:fixed;
    top:0;
    left:0;
    z-index:10000;  
}

.progress-line, .progress-line:before {
  height: 3px;
  width: 100%;
  margin: 0;    
}

.virt-waiting-cursor .progress-line {
  background-color: var(--highlight, #b3d4fc);
  display: -webkit-flex;
  display: flex;
}

.progress-line:before {
  background-color: var(--highlightBg, #3f51b5);
  content: '';
  -webkit-animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@-webkit-keyframes running-progress {
  0% { margin-left: 0px; margin-right: 100%; }
  50% { margin-left: 25%; margin-right: 0%; }
  100% { margin-left: 100%; margin-right: 0; }
}
@keyframes running-progress {
  0% { margin-left: 0px; margin-right: 100%; }
  50% { margin-left: 25%; margin-right: 0%; }
  100% { margin-left: 100%; margin-right: 0; }
}


.tab-panel h1
{
	text-align:center;
}

.tab-panel h2
{	
	font-size:120%;	
    /*Fun*/    
    line-height: 2.1em;
    margin-bottom: 0.5em;
    border-bottom-style: dotted;
    border-bottom-width: 4px;
}

.tab-panel h4{     
	font-weight:bold;	
	font-size:110%;
	margin:2em 0 .5em 0;
    font-family:Roboto Condensed;
    color: white;
    line-height: 2;
    padding-left: .5em;
    /*For sake of mobile version*/
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.tab-panel h4:before {
    content:"➥";
    margin-right:3px;
}





/*=========================== price tag (can be further tuned from custom.css) ===================================*/
.price {
   color:black;
   font-size:1.8em;
   background-size:100% 100%;
   background-image:url('./img/price.png');
   font-weight:bold;
   vertical-align:bottom;
   line-height:2.6;
   text-align:center;
   text-indent:0;/*negate this property- it is used in products*/

    position:absolute;
    top: -7px; 
    left: -10px;
    background-size:100% 100%;	
    background-repeat:no-repeat;
    width:100px;
    height:70px;
}

.price.multiprice:before {
    /*content: "from";*/
    margin-right: 1px;
    font-size:60%;   
}

.price:after {
    /*content: "$";*/    
    margin-left: 1px;
    font-size:60%;
}


/*======================= Body shim and tab background UI ==============================*/
.body-shim {  
  position:absolute !important;
  top:0;
  left:0;
  right:0;
  bottom:150px;
  z-index:auto;
    /*background-color: #f1f1f1;*/
   /*background-color:white;*//*because of jpg proj template thumbs*/
   background-color: #f9f9f9;
}

.body-shim:before,
.body-shim:after {
    /*border:1px solid red;*/
    z-index:-1;
    left:0;
    right:0;
    position: absolute;

    border-radius: 100%;
    background-color: inherit;     
    box-shadow: 0 4px 20px rgba(0,0,0,0.55);    
    /*transform: rotate(2deg);*/
    height:200px; 
    top:0;
    transform:translateY(-50%);

}

/*Only show top rounding for home and product + For the other two pages - IN MOBILE!*/
.home-page .body-shim:before,
.product-page .body-shim:before{
    content: "";
}

.body-shim:after {
    content: "";
    top: auto;
    bottom: 0;
    transform: translateY(31%) rotate(3deg);
    /*width: 125%;
    left: -12%;*/
/*NOTE: For sake of tablets wider portrait screens - ok but we will still need to rotate it a bit more...*/
    width: 140%;
    left: -25%;
    height: 400px;
}


/*home page shim*/
.home-page .body-shim { 
    top:400px; 
    /*bottom:60px;*//*Not too sure why in home page bottom acts different than on the others bu tno time to research*/
}

.home-page .body-shim:before{
    left: -10%;   
    height: 400px;    
    transform: translateY(-50%) rotate(-7deg);
    width: 120%;
}


/*product page shim*/
.product-page .body-shim { top:170px; }
.product-page .body-shim:before {
    top: 0;
    transform: translateY(-50%) rotate(-2deg);
    width: 110%;    
    left: -3%;
}


/*================================= Tab panel + tab panel tuning =====================================*/
/*.tab-panel
{	
    overflow:hidden;
   position:relative;
    padding:0 10% 70px;	
    margin-bottom: 10px;
   display:none;
}

.tab-panel.active { display:block; }*/

/*I am introducing change-page animation in mobile because the page UI there is very similar to one another- hence the weird logic here*/
.tab-panel
{	
    overflow:hidden;/*so that the shim extra does not cause problems in MOBILE where body.overflow-x is NOT respected!*/	
    padding:0 10% 70px;	    
    left:-200%;    
    width:100%;   
    position:absolute;    
}

.tab-panel.active
{
   left:0;
   position:relative;/*push down footer*/    
}


/*Product-tab - we have top header that must occupy all page, so we will apply padding differently*/
.tab-product { 
    padding: 0px 12% 70px 17%;
    /*margin-bottom: 60px;*//*Not needed no more*/
}

.tab-delivery, .tab-contact { 
    padding:5px 15% 70px; 
    text-align:left;
}

.tab-panel > *{
    position: relative;
}

.tab-panel p{
    margin-bottom:2.5em;    
    text-indent: 1em;
}

.home-page .keywords{    
    /*margin-left:12%;*/    
    text-indent:0;
}

.home-page .keywords:before{
    content:"";
    /*shape-outside: polygon(0 0, 0 290px, 290px 140px);*/
    shape-outside: polygon(7% 21%, 18% 41%, 31% 57%, 44% 69%, 58% 80%, 75% 89%, 100% 100%, 0 100%, 0 0);
    width: 420px;
    height: 140px;
    position:relative;
    float: left;
}

/*===================================== HOME: HEADER =========================================*/
/*Front page animation*/
.contents img, .header figure {
   opacity:1;
   transition: opacity ease-in .4s;/*OCT2023 1.5s;*/     
}


.contents .fully-opaque,
.header .fully-opaque {
    opacity:0;
    /* border:2px solid red !important; */
}

.header {                
    height:15%;
    min-height:360px;
    color:white;    
	position: relative;        
    display: block;
    border-width: 0 !important;		
}

/*The button*/
body .header > a {
    position:absolute;
    bottom: -2%;
    right: 9%;
    color:white;
    width:auto;
    height:3em;
    line-height:2.7;
    padding:0 1em;    
    text-align:center;
    white-space:nowrap;  
    transition:transform ease-in .1s;  
    border-radius:3em;
    text-transform:uppercase;
    border:3px solid white;
}

.header > a:hover {
    text-decoration:none;
    transform:scale(1.05);
}

/*======================= HEADER: products list UL =====================*/
.header ul {
    position: absolute;
    left: 15px;
    top: 16%;
    text-align: left;
    font-size: 125%;    
    letter-spacing: 0.4px;
    list-style: none;
}

.header ul li {
    margin-bottom: 2px;
}

/*First LI*/
.header ul li:first-child {
    font-size: 138%;
    letter-spacing: 0;
    margin-bottom: 4px;
}

.header ul li:before{
    font-family:'Virt';
    margin-right: 4px;
    font-size: 75%;
}

body .header a, body a.enter-link {    
    color:white;
    /*font-weight:bold;*/    
}


/*======================= HEADER: product images =====================*/
.header .header-images {
    position:absolute;
    left: 27%;
    right:0;    
    top:0;
    /*border:1px solid red;*/
}


.header figure{
     -webkit-backface-visibility:hidden;
    outline: 1px solid transparent;
    overflow:hidden;      
    border:10px solid white;
    border-bottom:none;      
    border-radius:5px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.75);
    cursor:pointer;
    background-color:white;
    position:absolute;
}


/*Force height*/
.header figure:before{
    padding-top: 114%;    
    content: "";
    width: 0;
    float: left;
}

.header figure.tall:before {
    padding-top: 120%;    
}

.header figure figcaption{
  /*color:#555;*/
  position:absolute;
  bottom:0;
  background:white; 
  width:100%;
  height:40px;
  line-height:46px;
  text-align:center;  
  font-size: 20px; 
  text-transform:uppercase;
}

.header figure:hover img {
    opacity:.9;
}


/*================================== HOME: CONTENTS ===========================================*/
.contents{	
    text-align:left;
	min-height:500px;	
    position:relative;        
    margin: 25px 0 0 20px;/*push a lil extra to the right*/
}

.contents > *{	 	 	 
	 margin:.5%;
     display: inline-block;
	 position:relative;	
    width: 48%;
    margin-bottom:3.5em;    
}


/*Act as container for img*/
.contents > a > em {
    top:0;left:0;right:0;bottom:0;position:absolute;overflow:hidden;
}

/*Split the two columns a bit more*/
.contents > *:nth-child(2n+1) { 
    margin-right: 2%;
}

.contents > *{
    min-height:180px;            
}

.contents .list-wrapper a{
    background-color:transparent;
    margin-left:1.2em;
    line-height:1.5;
    font-family: Roboto Condensed;
}

.contents .price {
    font-size: 1.7em;
    line-height: 2.2;
    top: -20px;
    left: -20px;
    width: 83px;
    height: 55px;
    letter-spacing:-1px;
}

.contents .price:before, .contents .price:after {
    letter-spacing:normal;
    font-size:46%;
    margin-right:0;
}

/*NOTE: Perhaps merge for all buttons -with style.css body .header > a*/
.contents > * button {
    position: relative;
    bottom: auto;
    right : auto;        
    height: 3.5em;
    line-height: 2.5;
   font-size:12px;
    padding: 0 2em 0 1.1em;
    text-align: center;
    white-space: nowrap;
    transition: transform ease-in .1s;
    border-radius: 3em;
    text-transform: uppercase;
    border: 3px solid white;     
}

/*Adding the icon as a bit of customization + extra user convenience */
.contents button .app-icon-font {
    font-size: 130%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
}

.contents button:hover{
    transform:scale(1.05);
}

.contents > * button:after {
    display:none;
}

.contents > * > em{
    right:55%;
    top: 0;
    left: 0;    
    bottom: 0;
    position: absolute;
    overflow: hidden;
}

.contents ul {
    list-style:circle;
    position:relative;
    margin-left:1.2em;
}
.contents ul li:empty{display:none;}

.contents ul li {
    margin-bottom: .2em;
}

.contents .list-wrapper {
    position:absolute;
    left: 49%;
    right:0;
    top:2em;          
    text-align:left;
    overflow:hidden;
    text-overflow:ellipsis;
    bottom:3em;
    font-size:108%;
}

.button-wrapper {
    position:absolute;
    left:48%;
    bottom:0;
}

.contents > * > h3 {
    font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
    position: absolute;
    top: -5px;
    left: 49%;
    margin: 0;
    text-transform:uppercase;
}

.contents h3 a {
    color:inherit;
}

/*======================================================= KEYWORDS ===========================================*/
.keywords {	    
    text-indent: 1em;
    position:relative; 
    margin-bottom:30px;
}

/*================================================ FOOTER (instructions) ==========================================*/
footer {	
	min-height:250px;	
    height: 250px;
    max-height:250px;
	text-align:center;     
    padding: 70px 11% 5px 14%;
    width: 100%;	   
    position: relative; 
}

footer > * {
	position:relative;
	display:inline-block;
	width:22%;
	margin:0 1%;	
	height:100%;
	text-align:center;		
	background-size: cover;
    background-position: center center;
}

footer span {
	position:absolute;	
	/*font-weight:bold;*/
	left:0;
	right:0;
	white-space:nowrap;
	line-height: 1.2;
	bottom:.5em;
    color:white;
}

footer .image {
	background-position:center center;
	background-repeat:no-repeat;
	background-size: contain;
	/*background-size: 40% auto;*/
	position:absolute;
	left:0;
	top:1em;
	right:0;
	bottom:3.5em;    
    opacity: .9;
}

/*Consider hiding this..*/
footer .step {
	position: absolute;
    background-image: url(./img/cloud.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: -7px;
    left: -10px;        
    width: 26%;
    max-width: 60px;
    height: 40px;
    text-align: center;
    line-height: 40px;    
    font-size: 150%;
    font-weight: bold;
    font-family: monospace;
}


footer .panel1 .image{ background-image:url('./img/step1.png'); }
footer .panel2 .image{ background-image:url('./img/pc.png');	}
footer .panel3 .image{ background-image:url('./img/step3.png');    }

/*#3*/
footer > *:nth-child(2n+1) { top:-6%;}
/*#1*/
footer > *:first-child { top:-50%; }
/*#2*/
footer > *:nth-child(2n){ top:-20%; }
/*#4*/
footer > *:last-child {  top:0;}

/*Tune the contact list look*/
footer .contact-list {
    font-size: 110%;
    padding: 0;
    bottom: 0;
    left: 0;
}

footer .contact-list a{    
    color:white;    
    font-size:100%;
    font-family:Roboto Condensed;
    vertical-align:middle;
}
footer .contact-list h6{
     display:inline-block;
     margin-bottom:0;
     margin-right:1px;
     font-size:80%;
}


/*================================== contacts ===========================================*/
.contact-list {    
    list-style-type:none;
    font-size:120%;
    font-family:inherit;
    position:relative;            
}

.contact-list h6 {	
	background-image:url("./img/contacts.png");
	background-size: 1.8em auto;
    background-position: -1000px -1000px;
    background-repeat: no-repeat;
    padding: .3em 0 .2em 2em;
    margin:3px;
    display:inline-block;
    font-size:100%;
    font-weight:bold;
}

.tab-panel .contact-list  { 
    margin-bottom: 1em;
    display:inline-block;
    white-space:nowrap;
    margin-top: 2em;
}

.contact-list h6.contact-email { background-position:left 0; }
.contact-list h6.contact-fb { background-position:left -2.4em; }
.contact-list h6.contact-phone { background-position:left -4.8em; }
.contact-list h6.contact-viber { background-position:left -7.2em; }



/*=========================== GDPR ===================================*/
.gdpr {
   background-color: rgba(255,255,255, .9);
    border: 1px solid white;
    position: fixed;
    bottom: 0;    
    z-index: 200000;
    right: 0;
    left: 0;
    padding: 6px;
    padding-right: 100px;
}

.gdpr button {
    position: absolute;
    right: 10px;
    top: 8px;    
    padding: .4em 1.5em;
    border-radius: 10%;
    border-color:#ccc;
    font-size: 110%;
}


/*Changed the selector to tab-product as now price is direct child of tab*/
.tab-product .price{
    font-size: 30px;
    position: relative;
    display: inline-block;
    left: 3px;
    vertical-align: middle;
    top: -2px;
    width: 120px;
    height: 80px;
}


/*=================================== PRODUCT: FLAT MENU================================================*/
.products-flatmenu {
    position: absolute;
    /*top: 12px;*/    
    top: 6px;    
    left: 16%;
    right: 16%;
    list-style-type:none;
    text-align:center;
}

.products-flatmenu li.active {
    border: 1px solid white;
    border-radius: 4px;
}

.products-flatmenu li {
    font-size: 130%;
    display: inline-block;
    margin-left: .4em;
    text-transform: lowercase;
    color: white;    
    padding: 2px 10px;
}

body .products-flatmenu a {
    color: inherit;
}

.products-flatmenu a:hover {
 text-decoration:none;
}

.products-flatmenu .app-icon-font:before {    
    color:inherit;
    margin-right: 3px;    
    /*font-size: 70%;*/
    vertical-align: middle;
}


/*=================== PRODUCT: BUTTONS CSS ============================*/
.product-content button{
	padding: .3em .9em;
    font-size: 140%;
    border-radius: .4em;
    font-weight: bold;    
    white-space: nowrap;
    margin-bottom: .8em;
}

.product-content button .app-icon-font {
    position: relative;
    left: -.3em;
    vertical-align: middle;
    font-size:75%;
}

.product-content button:hover {
	transform:scale(1.02);    
}


/*============================== PRODUCT:HEADER: Dedicated "title content" element =============================*/
/*HACK - to avoid positioning problems we will clone and show this*/
.product-title {
    display:none;
    position: absolute;
    top: 36px;
    left: 0;
    width: 230px;
    font-family: Roboto Condensed;
    text-align: center;
    /*background-color:red;*/
}

/*Make visible only if direct child of product content*/
.tab-product > .product-title {display:block;}


.product-title h3 {    
    text-transform:uppercase;    
    font-weight: bold;
    margin:0;    
     
    white-space: normal;
    line-height: 1.1;/*Needed for bottom line not to overlap with top line in some products*/
    text-align: center;
    color: white;
    text-overflow:ellipsis;
    text-align:center;
    overflow:hidden;
    display:block;
    font-size: 245%;  /*Can fit "Vazglavnica"*/
}

.product-title  h3:after{
    font-size: 38%;      
    width:100%;    
    display:block;
}

.product-title .price {    
    left: 0;
    top: 12px;
    width: 120px;
    height: 67px;
    line-height: 2.2;
}


/*======================= PRODUCT: Product section ====================*/
.product-content .main-image{
    clip-path: ellipse(250% 88% at 83% 88%); /*ellipse(236%  90% at 135% 89%);*/
}

.product-content .details-content .upload-reusable-photo {    
    animation-delay:2000ms;
}

.product-content .details-content .upload-reusable-photo .upload-icon {
    line-height: inherit;
    font-size: 80%;
    margin-left: -10px;    
    height: auto;    
    margin-top: -3px;
    margin-right: 2px;
}

.product-content .details-content .upload-reusable-photo ~label{
    display:block;
    font-family: 'Roboto Condensed';
    text-align:left;
}

.loc-personalize-design {
    font-size: 90%;
    margin-top: 1.5em;
    text-indent: 2em;
    text-align: justify;
}


/*========================= PRODUCT: Newest templates ==============================================*/
.loc-newest-templates {
    /*margin-top:30px;*/
    margin-top: 1em;/*Good for mobile, tmobioo!*/
    text-align:left;
}

.newest-templates {         
    text-align: justify;   /*Better than left and center, eventhough not perfect - last line left-aligned*/
    font-family:Roboto Condensed;    
}

.newest-templates > * {      
   display:inline-block;
   margin:7px;
   /*max-width: 18%;*/ /*Ensure fitting at least 5 rows on screen - or not.. because of this the child image ratio no good in mobile..*/

  /*Experimenting with replicating the look of thumbs inside the app - OK for now no do it, just fix "clocks" */
   /*margin:0px;
   max-width:100px;
   float:none;*/
}

.newest-templates img {
    border-radius: 4px;
    height:86px;/*We are interested to keep the height fixed, not the width! ALso - heuristically this looks like a good width*/    
    /*max-width:none;*/
    vertical-align:middle;    
    object-fit: contain;/*Ensure that width does not distort height*/
}

/*Hide the "Empty Project option" - which does not have a thumb (as it relies on CSS)*/
.newest-templates a[href=''] {
    display: none;
}

/*CLOCKS ONLY*/
.product-clock .newest-templates img {
    border-radius:100%;
}

.newest-templates > *:hover {
    transform:scale(.98);    
}

.newest-templates span {
    background-color:orange;
    vertical-align:middle;
    display:none;
}


/*========================================== PRODUCT: Product content ============================*/
/* set text-align center, so that the two panels inside get centered and align along the rest of the panel contents below*/
.product-content {
	min-height:500px;
	position:relative;		        
    top:90px;

	text-align:center;
	font-size: 118%;	
    margin-bottom:90px;/*Compensate the top:90!*/
}

.product-content .main-image {
	width:100%;	
	margin-bottom:10px;
	cursor:pointer;
    min-height: 300px;
}

.product-content ul {
	margin-left: 1em;
    /*margin-top: 1em;*/
    list-style-type: disc;    
}

.product-content ul li {
    margin-bottom: .3em;
}

/*================================== template.html ================================================*/
.product-content .visual-content {
	display:inline-block;	
	text-align:left;
    vertical-align:top;    
    width: 59%;        
    padding-left:3%;
}
	  
.product-content .details-content {
    float:left;/*We have this in DOM after the image, but we want in desktop UI to render before it*/
	display:inline-block;	
    padding-top: 3.5em;
    width: 40%;
	text-align:left;	
}

/*NOTE: Will probly need this for the MOBILE version!*/
.product-content .details-content h3 {
}

/*HIDE EMPTY DESCRIPTION LI's*/
.product-content .details-content ul li:empty { display:none;}

.product-content .image-list {
	width:100%;
    font-size:0;/*NOTE: Make sure spacing between the images is not a factor - or else they last image blees on a new line*/
	/*height: 150px;*/
}

.product-content .image-list > * {
	width: 24.25%;
	margin-right:1%;
	display:inline-block;	
	background-position: center center;	
	cursor:pointer;
    object-fit:cover;
    height: 100%;/*Has to be some absolute value. % is applied as part of the actual image size itself..or not if we set object-fit?!*/
}


.product-content .image-list > *:last-child { margin-right: 0;}

.product-content .image-list > *:hover {
	transform:scale(1.05);
}


/*===================== User convenience: animate 'choose design' button===============================*/
.product-content .details-content button { 
    margin-top:1.5em;
    animation-name: pulse_animation;
	animation-duration: 5000ms;
	transform-origin:70% 70%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
    margin-left: .5em;
}

.product-content .details-content button:hover {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); 
} 

@keyframes pulse_animation {
	0% { transform: scale(1); }
	33% { 
        transform: scale(1); 
        /*box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);*/
	}
	40% { 
        transform: scale(1.03);
        /*box-shadow: 0 0 0 3px rgba(0, 0, 0, 0);*/ 
	}
	50% { transform: scale(1); 
      /*box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);*/
	}	
	100% { transform: scale(1); }
}



/*========================================== CONTACT: tab ===================================================*/
.tab-contact h4 {
    text-align:left;
    text-transform:uppercase;
    text-align:center;
}

/*Make sure that the contacts UL is centered*/
.tab-contact {
    text-align:center;
}


.tab-contact p {
    /*text-indent: 3em;*/    
    text-align:left;
    line-height:1.4;
}

.tab-contact p:first-letter {
    font-size:130%;
}

.tab-panel .contact-list h6 span {
    font-size: 60%;
    display: block;
    position: absolute;
}

.tab-panel .contact-list li {
    display: inline-block;
    margin-right:1em;
}



/*=============================================== Mobile support ================================================*/
.gdpr.phone-only{
    display:none;
}

@media only screen and (min-width: 250px) and (max-width: 800px) and (orientation:portrait) {
    /* .gdpr { display:none; } */

    /* NOV2023: for time being we will not use it */
    .gdpr.phone-only {
        display:none;
        position:absolute;
        left:0;top:0;bottom:0;right:0;
        width:96%;
        height:80%;
        /*OK - if too big (e.g. tablet) make it smaller*/
        max-width:400px;
        max-height:450px;

        margin:auto;        
        font-size: 1.1rem;
        padding: .6rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.55);
        padding-top:90px;
        overflow:hidden;
        text-align:center;
        background-color: rgba(255,255,255, .97);
        border-radius: 3px;
    }

    .gdpr.phone-only .app-logo {        
        top: 10px !important;
        height: 70px !important;
        position: absolute !important;
        right: 10% !important;
        width: auto !important;
        left:10%  !important;
    }

    .gdpr.phone-only .diagram {
        background-size:contain;
        background-repeat:no-repeat;
        background-position:center;
        background-image:url('./img/step1dark.png');
        display:inline-block;
        height:40%;
        width:100%;
        margin-top:1em;
    }

    .gdpr.phone-only button {
        bottom:5px;
        right:5px;
        top:auto;
    }

    .gdpr.phone-only a {
        font-weight:bold;
    }
}



@media only screen  and (min-width: 250px) and (max-width: 800px)                     
{
    /*Make space for logo + menu- NOTE: CAREFUL - THIS CSS IS COPIED TO ThemePopup (LEGACY LOGIC)! So prevent from screwing*/
    /* OCT2023 - NO MORE*/
    /* body:not(.theme-selector-iframe-body):not(.designer-visible) { 			
		padding-top: 100px;     
	} */

    /*Show mobile-only elements - NOTE: Not ideal if element we want to show needs inline-block or inline...!
    I shall consider doing it differently. NOV2023: Adding a parent css class to kick behavior only when mobile theme set!*/
    /* .mobile-website .mobile-only {
        display:block;
    } */
    
    /*Save some space, make all text use roboto*/
    html,  button, input, textarea {
        font-family: Roboto Condensed; 
    }
    
    /*Logo*/
    /* body.home-page:not(.designer-visible) .app-logo, */    
    body .app-logo, 
    .home-page:not(.designer-visible) .app-logo,
    body.designer-visible .app-logo {
        /* top:2px;
        left: 0;
        right: 0;        
        width: 50%;
        height: 98px;
        margin: auto; */
        /* OCT2023 */
        position: fixed;
        top: 8px;        
        right: 2px;
        width: 55px;/* width: 70px; */
        height: 26px;        
        left: auto;
    }

     /*And dim the logo when we have an active project*/
     /* body.has-active-project .app-logo { opacity:0.7;} *//*OCT2023*/

    /*Hide the logo when designer is visible*/
	/* body.designer-visible .app-logo { display:none; } *//*OCT2023*/
     
    .gdpr { 
        font-size:15px; /*NOV2023*/
        background-color: rgba(255,255,255, .95);
        box-shadow: 0 4px 16px rgba(0,0,0,0.55);
    } 
    .gdpr > div { display:inline; }

   
    /*Introducing change-page animation in mobile because the page UI there is very similar to one another- hence the weird logic here*/
    .tab-panel { 
        opacity:.8; 
        transition: opacity ease-in .1s;/*Add a transition*/            
    }

    .tab-panel.active {   
        opacity:1;/*filter: brightness(100%);*/
    }

    
	/* Reduce left and right padding */
	footer, .home-page footer, .tab-panel {
		padding-left:10px;
		padding-right:10px;
        padding-bottom: 100px;
	}


    footer { padding-top:0px;}


    /*Position the activeproject in the center*/
    /*.active-project {
        left: 0;
        right:0;
        top:5px;
        margin: auto;
    }*/

	/*BETTER: position it on top of the selected menu item - it is more fun*/
    .active-project { 
        transition:left .5s; left:4%; top:2px;        
        position:absolute !important;/*Set as abs pos not as fixed!*/
    }

    .product-page .active-project { left:28%;}
    .delivery-page .active-project { left:53%;}
    .contact-page .active-project { left:75%;}   
    
    /*Hide this one, we will not need it as we use the top space to also display the active project- reduce visual clutter*/
    .top-right-corner { display:none;}

    /*footer Shim element*/
    .body-shim:after {        
        transform: translateY(50%) rotate(8deg);    
        height: 160px;
    }

    /*body shim - change offset and position to make it more reliable to manipulate*/
    .home-page .body-shim:before {
        left: -60%;  
        width: 200%;
        /*top: 200px;*/ /*+60px 3 lines of text - 80px for shim => in that height we need to */  
    }

    /*-10 -> make it popup 80px above*/
    /*.home-page .body-shim:before { transform: translateY(-20%) rotate(-7deg); }*/

    /*product page shim + contact/delivery as well*/
	.product-page .body-shim {
       top: 190px;
    }

    .body-shim:before,
    .product-page .body-shim:before {
        box-shadow: 0 4px 16px rgba(0,0,0,0.55);
        top: 0;
        transform: translateY(-50%) rotate(0deg);
        width: 127%;
        left: -10%;
        height: 150px;
    }

    /*The other two pages- we need to change position, because of the parent has overflow:hidden*/
    .body-shim { 
        top: 75px; 
    }
    .body-shim:before{ content: "";}

    /* OCT2023 */
    .home-page .body-shim {top:310px;}

    /*======================= HEADER: product images =====================*/
    /*Make it as wide as the screen*/
    .header .header-images { 
        left:-5%;/*Not sure why, but 0 not best -> first image too much to the left*/
        top:40px;
        position:relative;
        /*height:25vh;*//*Make it 25% of screen height*/
        height:150px;
    }

    .header ul {        
        position: relative;
        top: 2.8em;
        text-align: center;
        left: 0;
    }

    /*TEMP: See if we keep it like this - hide all rows, except the first row*/
    .header ul li:not(:first-child) {
        display:none;
    }

    /*Do not set explicit height to header*/
    .header {        
        min-height:auto;
        height:auto;
        margin-top:60px;/*OCT2023  */
    }

     /*Force image height*/
    .header figure:before { padding-top: 125%;}
    .header figure {
        max-height:95%;/*Ensure not taller than parent*/
    }

     /*Reduce font-size */
    .header figure figcaption { 
        font-size:15px; 
        height:20px;
        line-height:20px;
    }

    /*TEMP or permanent - hide the "Go to designs" button*/
    .header > a { display: none; }

    /* Position the main text better*/
    body .bottom-left-corner { 
        top:0px;
        bottom: auto;
        font-size:105%;
        text-align: left;
        padding-left: 1.4em;
        line-height: 1.2;
    }

    body .bottom-left-corner a { 
        color: white !important;
        font-weight: normal !important;
    }


    /*Make keywords render all the way from left to right*/
    .home-page .keywords:before { display:none;}
    .home-page .keywords { margin-left:0; text-align:left;}

    .keywords {text-align:center;}
    .tab-product .keywords { margin-left:10px; margin-right:10px;}

    /*Tune producs tab*/
    .tab-product {
        padding-left:0;
        padding-right:0;
    }


    /*================================== PRODUCT DETAILS: PRODUCT TITLE ======================================*/
    /*Hide this - we will show the original panel that is in the product panel*/
    .tab-product > .product-title { display:none; }        
    .tab-product .product-content .product-title {     
        display: block;
        position: relative;        
        width:100%;                
        top:3px;
        margin-bottom: .9em;
        margin-left: 0;
    }

    .tab-product .product-content .product-title h3 {
        color: inherit;
        font-size: 140%;
        margin-top:5px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .tab-product .product-content .product-title  h3:after{
         font-size: inherit;
         display:inline;
         margin-left:4px;
    }

    .tab-product .product-content .price {  
        font-size: 24px;
        left: 0;
        width: 4.5em;
        height: 2.4em;
        right: 0;
        position: absolute;
        margin: auto;
        top: 1em;
        line-height: 2.3;
    }

     /*in mobile version li items inherit the align of parent!*/
	.product-content ul { text-align:left;}	
	/*Title text*/
    .product-content h3 { font-size: 85%;}		
	/*product image*/
	.product-content .visual-content, .product-content .details-content {
         width:100% !important;
         padding-left: 0;         
	}
			
	.product-content {		
		width:100%;		
        font-size: 105%;          
        /* top: 114px; */
        top:49px;/*OCT2023*/
	}

    /*left and right margins for all except images*/
    .product-content > * > *:not(.visual-content){
        margin-left:10px;
        margin-right:10px;
    }

	.product-content .main-image {	
        min-height:220px; 
        clip-path: ellipse(112% 88% at 54% 88%);
        margin-bottom:0;
	}
	
	.product-content .details-content {
		padding-left:0 !important;
		text-align:center !important;
        float:none;
        /*width: 95% !important;*//*because we added left and right margin*/
        width: 100% !important;/*OCT2023*/
	}
	
	.product-content .details-content button{ 
        /*font-size:105%;*/
         font-size: 150%;
	}
	

    /*Split details-content in 2*/
    .product-content .details-content > div {
        width: 100%;
        display:block;
        overflow-x:hidden;
        vertical-align: top;
        margin-bottom:1em;
        /*border:1px solid red;*/                
    }
    /*DEC2021 - let "upload image" button be seen in mobile version, too*/
    /*.product-content .details-content > div:last-child {         
       display: none;
    }*/

    .product-content .details-content .upload-reusable-photo { margin-top:0 }


    /*Reduce text somewhat*/
    .loc-personalize-design { letter-spacing:-1px; font-size:95%; }

    .tab-product h2 { text-align:center; }

    /*Ensure we fit at least 3 designs per row (it is easy to break this in 2 and looks ugly with lotta empty space) */
    .newest-templates > * {
        /* max-width:31%;
        margin:4px 2px; */        
        /*OCT2023*/
        width: 31%;
        margin: 10px 2px;
        text-align: center;
    }

	/*OCT2023 - Hide some but keep them on page for SEO purposes*/
    .newest-templates > .optional { display: none;} 


    /*products flat menu*/
    body .products-flatmenu {
        left: 0;
        right: 0;
        top:0;
    }
    body .products-flatmenu li {
        font-size: 118%;
        max-width: 30%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left:0;
        line-height:1;
        padding: 1px 5px;
    }

    	
	/*Size products on main page*/
    .contents {
        min-height:200px;
        /* margin-top: 70px; */
        margin-top: 160px;/*OCT2023*/
        margin-left:9px;
    }

	.contents > * {		     
		margin-bottom: 2.5em;
        min-height:120px; 
        height:20vmax;     
        width:100%;/*one per row*/
	}

    /*Reduce text size a bit*/
    .contents ul {
        font-size:90%;
    }

    /*Reduce button height a bit*/
    .contents > * button {            
        height: 3em;
        line-height: 2;
        padding: 0 1.5em 0 .8em;
    }


	/*text*/
	h2 {
		border-top: 0;
        font-size: 110%;
        line-height: 1.3;
        text-align: center;
        white-space: nowrap;
        margin: 0;
        letter-spacing: -1px;
	}
	
	
	/* Force size of suggestions and instruction  panels */
	footer {
         height:auto; 
         /*Because of tab-panel overflow:hidden that I had to set to prevent user from being able to scroll body left
             Now the footer is visually too far from the bottom shim. bring it closer*/
         top: -40px;
	}
    	
	footer > * {
		width: 47%;		
		min-height: 12em;		
		margin-bottom: 1.5em;	
		font-size: 90%;
	}

    footer .contact-list a {
        font-size:130%;
    }
	
	
    /*Let it break in > 1 line*/
    .tab-panel .contact-list  {         
        white-space:normal;    
        font-size: 100%;
    }
        
    .tab-contact .contact-list li {        
        margin-right: 0;
        /*width: 49%;*/
        text-align: left;
        width: 60%;
        text-align: left;        
        margin-bottom: .8em;
    }

    /*Reduce width so that it can fit on 2 per row on mobile*/
    .tab-contact .contact-list h6 {
        padding-left: 1.8em;
        margin: 1px;
    }
	

    /*============================== Tune mobile menu ===================================*/
    
    /* OCT2023 - Tune cssmenu itself*/
    body #cssmenu{
        position: fixed !important;
        top:0;                
        box-shadow: none;
        background-color: transparent;
        z-index: 2;
        position:absolute;
        left:40px;
        right:60px;
        width: auto;        
    }

    /* TUNE mobilemenu entry width*/
    #cssmenu > ul > li {    
        width: 33%; 
        max-width: 33%; 
    }
    /*TUNE MENU ITEM HEIGHT*/
    body #cssmenu > ul > li > a
    {        
        padding-left:5px;
        padding-right:5px;
        padding-top: 6px;
        padding-bottom: 5px;
        height:50px;
    }    

    body #cssmenu > ul > li > a::before{        
        display: block;
        font-size:90%;
    }

/* }

@media only screen and (min-width: 220px)  and (max-width: 800px) {  */

	.virt-root{
        /*Setting bottom:0 can cause the toolbar to be hidden in portrait mode!*/
	    /*top: auto !important;	 
		bottom:0 !important;*/		
		/*height: calc(100vh - 30px);*/	
		/*height: 100vh;*/ /*OK, hopefully this fixes the scenario when user swipes  up to hide the browser address bar...*/	
        
        /*Now that we have logic that sets height to the body - it is more corect to set height to 100%, as frame is child of body!*/
        /* top: 30px !important;
        height: calc(100% - 30px);*/

        /* OCT2023 */
        position: fixed;
        top: 0 !important;
        left:0;        
    }
    .virt-root .virt-mobile-menu,
    .virt-root .menu-partner-panel,
    .virt-root .virt-window-shim
    {
        visibility: visible;
    }

    /* TEMP HACK - Prevent these from being viible if designer not active*/
    body:not(.designer-visible) .virt-theme-mobile.active-panel-theme .theme-selector, 
    body:not(.designer-visible) .virt-theme-mobile.active-panel-order .order-create-control{
            visibility: hidden;
    }

    /* TEMP HACK till I rework this control */
    body:not(.designer-visible) .virt-theme-mobile .virt-small-panel {        
        visibility: hidden;
    }

       
    /* ==================== TUNE Profile tab in mobile menu=====================*/
    /* Tune the logged use tab position */
    /* .virt-root .menu-partner-panel .virt-tabstrip .logged-user{        
        position: absolute;
        right: 3px;        
    } */

    /* If logged user - Hide selected tab - as there are just 2 tabs */
    /* .virt-root.logged-user .menu-partner-panel .virt-tabstrip > * { z-index: 1;}
    .virt-root.logged-user .mobile-menu-panel .virt-tabstrip .active {display:none;}
    .virt-root.logged-user .mobile-menu-panel > .virt-multi-panel {top:10px;}
    .virt-root.logged-user .mobile-menu-panel .user-settings-panel {top:50px;} */

    /* NOV2023: OK, now I will try a different logic just hide the first tab if logged user */
    .virt-root .mobile-menu-panel .products-menu-tab { display:none;}    
 }


/*Tablets in potrait mode*/
@media screen and (min-width:500px)  and (orientation:portrait){

 /*body {
    background-color:yellow !important;
  }*/
    /*Hide this for time being - simplest!*/
    .header ul, .bottom-left-corner {
        display:none;
    }

    /*Reduce padding to fit better*/
    footer,
    .tab-panel {
        padding-left:2%;
        padding-right:2%;
    }

    .header .header-images {
        left: 0;
        height:250px;
        /*background-color: pink !important;*/
    }

    .home-page .body-shim {
        top: 500px;
    }

    .contents > * {    
        width: 47%;        	
        height:12vmax;
    }

    .body-shim:after { 
        transform: translateY(31%) rotate(0deg);
    }
}


/*=================================== Menu =====================================================*/
#cssmenu ul > li.active:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    margin: auto;
    bottom: -5px;
    /* background-color: #555; */
    background-color: inherit;
    left: 0;
    right: 0;
    transform: rotate(45deg);
    box-shadow: 2px 0px 1px rgba(0,0,0,0.1);    
}

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1.3;
  display: block;
  position: relative;
  box-sizing: border-box;
}

#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#cssmenu {    
    position: relative;    
    z-index: 1;
} 
/*We set this for the sake of li.active:after*/
#cssmenu > ul { background-color:inherit;}

#cssmenu > ul > li {
    float: left;
    background-color:inherit;    
    max-width: 25%; 
    /*overflow: hidden;*//*NOPE- like this the :after element for .active is not visible - perhaps change the A CSS to get both!*/
    text-overflow: ellipsis;
}

#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
  white-space: nowrap;
}

#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu > ul > li > a {    
  padding: 11px 17px;
  font-size: 14px;
  color:white;  
  text-decoration: none;  
  font-weight: 700;
  /* letter-spacing: 1px; */
  /* text-transform: uppercase; */
  text-transform: capitalize;
  white-space: nowrap;
}

#cssmenu > ul > li:hover > a {
  color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 30px;
}


@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    #cssmenu {
        width: 100%;
    }
}



/* ====================================== DEC2024: Merge with css above ====================================== */


/*===================== hilite color - get from css --var  =================================*/
.site-color { color: var(--highlightBg, #273c75)  !important;}
body, h4, button, .site-background { background-color: var(--highlightBg, #273c75);}


.virt-icon-grid:before{
    font-family:'Virt';
    margin-right:2px;
}



/*Hide/show login. NOTE: There is a class logged-user that gets set to virt-root as well! Make sure it no mix up*/
.logged-user .enter-link { display: none !important;}

/* Hide the one inside app */
.logged-user .virt-root .virt-app-header .virt-avatar { display: none;}

/* Handle userprojects link visibility */
body a.userprojects-link { 
    display: none;    
    position: fixed;
    left: 101px;
    top: 18px;
    z-index: 1;
    color: white;
    font-size: 115%;
    font-family: 'Roboto Condensed',sans-serif;
}

body a.userprojects-link:hover{
    text-decoration: none;
}
body a.userprojects-link:hover:after{
    content:"↴";
    vertical-align: middle;
    position: relative;
    top:2px;    
}

.has-userprojects .userprojects-link {display: block;}


.project-designer {display:none !important;} 
 .has-active-project .project-designer {display:inline-block !important;} 

/*================== Hide header and other stuff ===========*/
/* Hide stuff from previous version of the website */
.header, .body-shim { display:none; }
/* For time being hide ability of user to delete projects*/
.virt-new-project-control-wrapper .projects-delete {display:none !important;}

  
  /* =================== Menu ============== */
  #cssmenu {
    position: fixed;    
    width: 100%;
    top: 0;    
    box-shadow: 0 0px 4px  var(--highlightBg, #273c75);/* OCT2023 For non-home pages */
 }	


  #cssmenu > ul > li > a{
    font-size: 20px;
 }
  
 
 .virt-mobile-menu {        
    box-shadow: 0 0px 4px var(--highlightBg, #273c75);
}

 /* =================== Logo ============== */
 .home-page:not(.designer-visible) .app-logo,
 .app-logo  {        
    left: 20px;
    position: absolute;
    height: 105px;
    top: 60px;
    width: 220px;       
    z-index: 0; /*So that when scrolling the page down, it goes under the menu*/
 }

 body.designer-visible .app-logo {    
    height: 50px;
    top: 0px;
    width: 80px;
    left: 9px;    
    z-index: 2;/*Show it over the menu*/
 }

  /*==================== Footer - move it to top ============================*/
  footer{
    position: absolute;
    top: 0;
    background-color: var(--highlight);
    box-shadow: 0 0px 3px var(--highlightBg, #273c75);
    left: 0;
    padding-left: 250px;
    padding-bottom: 30px;
    padding-top: 50px;
    right: 0;
    width: auto;
    cursor: default;
  }
  
  /* Make the precedence stronger */
  body footer.instructions > * {
     top: 0; 
  }  
  
 footer span {
     bottom: 0.2em;
     font-size: 120%;
 }

 footer .step{
    display:none;
    height: 37px;    
    line-height: 35px;
    box-shadow: inset 3px 10px 7px -10px var(--highlightBg, #273c75);
    background-image:none;    
    width: 40px;        
    background-color: white;
    border-radius: 100%;
    color: var(--highlightBg);
 }


/* ======================== Contact credentials ============== */
footer .contact-list{
    white-space: nowrap;
    font-size: 115%;
}

footer .contact-list h6{
    margin: 0;
    background-size: 2.3em auto;
}

.contact-list h6.contact-phone { background-position: left -6.1em; }
.contact-list h6.contact-viber { background-position: left -9.1em; }


  
/* ====================== Slogan ========================== */
body footer .company-slogan {           
    height: auto;
    width: 100%;
    position: absolute;
    top: 0px;
    margin-left: 0;
    list-style: none;
    font-size: 136%;
    text-align: left;
    padding-top: 0px;
    padding-left: 0px;
    border-top-left-radius: 30px;
    /* box-shadow: inset 3px 10px 10px -10px var(--highlightBg, #273c75); */
    bottom: 0px;
    color: white;
    left: -10px;
}

/* footer .company-slogan li {
    display: inline;
} */

footer .company-slogan >*:before{
    color:var(--highlightBg, #273c75);   
    content: "◉";    
    font-size: 120%;    
    margin-right: 3px;
    line-height: 0;    
    vertical-align: middle;    
    position: relative;
    top: 2px;
}



  /* ================= Home page  ==============*/  
  /* Tune tab-panel position because of header */
  .tab-panel{
    margin-top:210px;
  }

  a.loc-learn-more {
    font-size: 120%;
    font-family: 'Roboto Condensed';    
  }

      
  /* Home page - one product per row*/
  body:not(.mobile-website) .contents > * {
      min-height: 180px;
      width: 100%;
  }
  
  /* Product layout */
  body:not(.mobile-website) .contents > * > h3{ left: 0;}  
  body:not(.mobile-website) .contents > * > em { left: 15%;}  
  body:not(.mobile-website) .contents > * button{ font-size: inherit;}
  body:not(.mobile-website) .contents .list-wrapper {    
    left: 47%;    
    top: 0;
    font-size: 120%;
  }
  
  .contents .price { font-family: 'Roboto Condensed';}
  body:not(.mobile-website)   .contents .price{ left: 14%;}

  .product-title h3{ color: inherit;}

  .contents > * img{ border-radius: 4px; }
  
  .contents h3 a{
    color:var(--highlightBg, #273c75);    
  }

  /* ================= Tune Product page ==========================*/
   .product-title{ top:5px;left: 10px;}
   

  .products-flatmenu li{
    color:inherit;
    font-size: 136%;    
    margin-left: 0;            
   }

   .products-flatmenu li.active {
        border-bottom-width: 4px;
        border-bottom-style: solid;
        border-color: var(--highlightBg);
        border-radius: 0;
    }

   .products-flatmenu .app-icon-font:before {    
    margin-right: -2px;
   }
 
   .products-flatmenu li:not(.active) a:hover {
    text-decoration: underline;
   }

   body:not(.mobile-website) .product-content .details-content {
        padding-top: 0;
   }
 
   .product-content .details-content button {
        margin-top:0.5em;/*At present is 1.5*/        
    }

/* ================= Tune font-size because of the changed font ========= */
.tab-contact {    
    font-size: 120%;
}
.loc-personalize-design{
    font-size:100%;
    letter-spacing: 0 !important;/*negate legacy mobile*/
}    

.keywords{
    font-size: 118%;
    text-align: center;
    /* font-weight: bold; */
}
/* .tab-home .keywords{    
    font-family: 'Roboto Condensed', sans-serif;
} */

/* Negate existing css */
.keywords::before { display: none;}

.keywords > div{
    margin-top:.7em;
}
/* Keywords contacts */
.keywords table{        
    display: inline-block;
    margin-top:.7em;
}

.keywords table td{
    text-align:left;
    font-weight: bold;
}

.keywords table td:first-child{
    text-align: right;
    padding-right: 0.2em;
    font-weight: normal;
}
   


/* ================================ Tuning engine UI ============================ */ 
.virt-root{
    top:52px;
}
 
/* NOTE: Scrollbar should not be in higlight color - this is conceptually wrong */
.virt-root *::-webkit-scrollbar-thumb {
    background-color: rgba(100,100,100,.2);    
}

.virt-app-header-popup{
    top:1px;
}

.virt-new-project-control-wrapper>.right-panel {
    /* left: 85px; *//*DEC2024*/    
    left: 100px;    
    width: 158px;
}

.view-port {
    /* left: 235px; *//*DEC2024*/
}

.virt-new-project-control-wrapper{
    width: 236px;
}

.virt-root:not(.virt-theme-mobile) .cup-view.virt-small-panel{
    left: 257px;/* left: 234px; *//*DEC2024*/
}


.virt-new-project-control-wrapper.clock-view .virt-template-category .project-thumb-image {    
    border-radius: 100%;
}



/* ========================== MOBILE TUNING ============== */
@media only screen  and (min-width: 250px) and (max-width: 800px)       {       
    .menu-partner-panel{
        top:50px;/*default is 45*/
    }
            
    .tab-panel {
        margin-top: 0;/*panel's position is relative*/
        padding-bottom: 1em;         
        padding-right: 0px;/* Remove the right margin - fit more text on page */
    }

    .product-content { 
        top: 0; 
        margin-bottom: 25px;
    }

    /* Main-page */
    .contents { margin-top:30px;}
    /* A shim element */
    .contents:before {
        clip-path: ellipse(112% 88% at 54% 88%);
        content: "";
        background-color: white;     
        position: absolute;
        top: -16px;
        left: -25px;
        height: 150px;
        right: -25%;
        z-index: 0;
    }
               
    .contents .list-wrapper {
        top: 1.5em;/*is 2em*/
        bottom: 4em;/* At present - 3em. Allow for 4 lines of visible text*/
    }

    .product-content .details-content button {
        margin-top:0em;/*At present is 1.5*/        
    }

    a.loc-learn-more {        
        display: block;
        margin-left: 1em;
        position: relative;
        bottom: -0.2em;
    }

    /* Ensure a background shim to cover some white background behind products main product image */
    .visual-content:before {
        content: "";
        background-color: var(--highlight);
        position: absolute;
        top: 0;
        width: 100%;
        height: 60px;
    }
        

    /*Tune (reduce) menu buttons font-size*/
    body #cssmenu > ul > li > a{
        font-size: 17px;
        font-weight: normal;
        padding-left: 0;
        padding-right: 0;
        padding-top: 6px;
        overflow: hidden;
        white-space: nowrap;
    }
    #cssmenu > ul > li > a::before {        
        line-height: 1.1;
    }

    /*Hide all info in header - except the slogan list*/
    .instructions > div{display: none;} 

    /* Slogan */
    body footer.instructions { 
        padding-bottom: 0;
        padding-left: 0;
        padding-top: 50px;/*Better leave it to start from top:0 and pad 50px, then start at 50 and pad 0 - because of background color - when site loads, looks better*/
        min-height: auto;
    }


    body .mobile-only.company-slogan{        
        padding-top:.6em;
        padding-bottom:.3em;
        margin:0;
        position: static;        
        font-size: 120%;        
        padding-left: 5px;
        min-height: auto;        
        bottom: auto;        
        color: white;
        background-color: var(--highlight, #273c75);
        box-shadow: 0 0px 3px var(--highlightBg, #273c75);        
    }

    .mobile-only.company-slogan li{ line-height: 1.5; white-space: nowrap;}
    .mobile-only.company-slogan li:before{ 
        content:"✔";        
        font-size: 90%;
        font-weight: bold;
        margin-right: 4px;
        color: #0f0;
        top: 0;
    }    
    

    /* TEMP: Duplicate logo and other options defined in /common/styles.css - because of css precedence */
    body .app-logo, .home-page:not(.designer-visible) .app-logo, body.designer-visible .app-logo {
        position: fixed;
        top: 0px;
        right: 2px;       
        width: 55px; 
        height: 50px;
        left: auto;
        z-index: 1;
    }  

    /* The contact footer - mobile version only  */        
    .designer-visible .contact-list.mobile-only { display: none;}

    .contact-list.mobile-only{
        position: fixed;
        bottom:0;        
        left:0;
        right: 0;
        height: 1.8em;
        background-color: var(--highlight);
        margin: 0;
        padding: 0;      
        padding-top:.3em;
        color:white;  
        z-index: 1;
        font-size: 120%;
        box-shadow: inset -1px 2px 5px 0px var(--highlightBg, #273c75);
        font-family: 'Roboto Condensed';    
    }

    .contact-list.mobile-only > li a{ color: inherit;}

    .contact-list.mobile-only > li {
        /* max-width: 31%; */
        display: inline-block;
        vertical-align: top;
        text-overflow: clip;
        overflow: hidden;        
        white-space: nowrap;

        position: absolute;
        margin:auto;
        left:0;
        right:0;
        /* border:1px solid red; */
        width:33.3%;
    }

    .contact-list.mobile-only > li:first-child{ 
        right:auto;
    }
    .contact-list.mobile-only > li:last-child{
        /* max-width: 36%; */
        left:auto;
    } 

    .contact-list.mobile-only > li h6 {
        width: 1.4em;
        height: 1.4em;
        vertical-align: middle;
        margin: 0px;
        margin-right: 1px;
        padding: 0;
        background-size: 1.4em auto;
        /* border:1px solid red; */        
    }

    .contact-list h6.contact-viber {
        background-position: left -5.5em;
    }

    .contact-list h6.contact-phone {
        background-position: left -3.7em;
    }
}