* { 
	box-sizing:border-box;
	margin:0;
	padding:0;
	outline:none;
}

/*
html {
	overflow:hidden;
	height:100%;
}
body {
	overflow-y:scroll;
	height:100%;
  xscrollbar-color: transparent transparent;
  scrollbar-color: #345 transparent;
  scrollbar-width: thin;
}
*/


* {
	scrollbar-width:thin; /* to work in dialogs it must be set on * */
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme:dark; /* needed to work in dialogs */
	}
}

a {
    -webkit-tap-highlight-color: transparent;
    
    x-webkit-touch-callout: none;
    x-webkit-user-select: none;
    x-khtml-user-select: none;
    x-moz-user-select: none;
    x-ms-user-select: none;
    xuser-select: none;
}
a:focus {
    xoutline: none !important;
}


a,
button,
input,
textarea {
	opacity:1;
	transition:opacity 0.25s;	
}

a:hover,
a:active,
a:focus,
button:hover,
button:active,
button:focus,
input:hover,
input:active,
input:focus,
textarea:hover,
textarea:active,
textarea:focus {
	opacity:0.75;
}
    
.icon-title {
	xborder:solid 1px red;
	xpadding:1em;
	xbackground-color:red;
	xfont-weight:bold;
	xfont-size:larger;
	margin:0;
	white-space:nowrap;
}
.icon-title .text {
	display:inline-block;
			xfloat:right;
			white-space:break-spaces;
			vertical-align:text-top;
			margin-right:24px;
			padding-left:0.25ex;
}
    .material-symbols-outlined {
			xcontent:'menu';  'arrow_forward';
			xcolor:#ee8623;
			xcolor:#ff0;
			vertical-align:sub;
			xfloat:left;
			
			
    font-family: 'Material Icons';
    xfont-weight:bold;
    xfont-style: normal;
    font-size: 24px;
    xwidth: 24px;
    line-height:0;
    xletter-spacing: normal;
    xtext-transform: none;
    xdisplay: inline-block;
    white-space: nowrap;
    xword-wrap: normal;
    xdirection: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    xposition: absolute;
    xright: 0.5rem;
    xtop: 50%;
    x-webkit-transform: translate(0, -50%);
    xtransform: translate(0, -50%);			
			
			xtext-shadow:0px 1px 4px #0005; 
    }
    
    html, body {
    	overflow-x:hidden; /* Safari on iPad */
    }
	body, button, input, texarea { font-family: 'Inter', sans-serif; background-color: #fff; color: #333; line-height:1.25; }

xbody {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
xhtml {
  height: -webkit-fill-available;
}	
xhtml, 
xbody {
  height: 100vh!important;
  height: 100dvh!important;
}
	
    a { text-decoration: none; color: inherit;}
    .container { 
    	width: 90%; 
    	max-width: 1000px; 
    	margin: 0 auto;
    	xpadding:4rem 0;
        xborder: dashed 1px blue; 
        xtext-align:center;
    }
	.container h2 {
		font-size:3rem;
		font-weight:bold;
		color: #555; 
		xmargin-bottom: 30px;
	}
	.container p {
    	margin:0.6em auto;
    	font-size:1rem;
    	color:#333;
    }
	x.container>:first-child {
		margin-top:0!important;
	}
	x.container>:last-child {
		margin-bottom:0!important;
	}

	.shadow {	      
      xbackground-color:#000;
      box-shadow: 0 0 100px rgba(0,0,0,1);
        
       position:absolute;
        
       height:100px;
       top:-100px;
       
       left:-100px;
       right:-100px;
       
      z-index:50;      
	}

    .nav {
      xbackground-color: #ff0; 
      xborder-bottom: 1px solid #eee;
      xpadding: 15px 0; 
      
      xposition:fixed; sticky; 
      position:absolute;
      
      top:0;
       
      left:0px;
      right:0px;
      xmax-width:1200px;
      xmargin:auto auto;
      
      z-index:100;
      xdisplay:inline-block;
      xtext-align:right;
      xwidth:100%;
      display:flex;
      gap:10px;
      justify-content:space-between;
      padding:10px;

    }
    .nav nav {
     	position:fixed;
     	xposition:sticky;
     	xtop:0;
     	x-webkit-backface-visibility: hidden;
     	xtransform: translateZ(0);
     	
     	z-index:200;
     	xmargin-left:260px;
     	margin-left:155px;
     	right:10px; 
    }
    .nav .logo a {
    	xwidth:100px;
    	xmargin:10px;
    	xoutline:none;
    	text-shadow:0px 1px 4px #0005;
    }
	.nav nav ul {
      list-style: none; /* display: flex; justify-content: flex-start; gap: 20px; */
      
      xbackground-color:#fffd;
      background-color:#ee8623ee;
      
      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
      xheight:50px;
      border-radius:18.5px; 21px;
      xdisplay:inline-block;
      xmargin-right:10px;
      
      display:flex;
      xjustify-content:space-evenly;
      justify-content: flex-end; 
      gap:2.5px;
     xflex-wrap: wrap;
           
      xmargin:10px;
      padding:5px; 5px 5px; 
      text-align:right;
    }
    .nav nav li {
     white-space:nowrap;
    }
	.nav nav li a {
      display:inline-block;
      xtext-transform:uppercase;
      padding:5px 10px;
      font-size:14px;
      
      xbackground-color:#ddd;
      border-radius:16px;
      
     
    }
    .nav nav li a {
    	xoutline:none;
    	xbackground-color:#ee8623ee;    	
    	color:#fff;
    	font-weight:bold;
    	transition:background-color 0.1s;
    }
	.nav nav li a:hover, 
	.nav nav li a:active, 
	.nav nav li a:focus {
       xbackground-color:#e67e22;
       xbackground-color:#ee8623;
       xcolor:#fff;
       background-color:#cc6401;
       xcolor:#fff;
       opacity:1;
       
    }    
	.nav nav li a.active {
       xcolor:orange;
       xbackground-color:#e67e22;
       background-color:#cc6401;
       xcolor:#fff;
    }     
    #create-login-button {
      background-color:#234;
      color:#fff;
      xbox-shadow: 0 4px 18px rgba(0,0,0,0.2);
      xheight:50px;
      border-radius:25px;
      xdisplay:inline-block;
      xmargin-right:10px;
      xdisplay:flex;
      xjustify-content:space-evenly;     
      xmargin:10px;
      xpadding:5px; 
    }


	.nav nav {
		text-align:right;
	}

	.nav nav ul#menu {
		outline:none;
	}
	.nav nav ul#menu.active {
		xdisplay:block;
	}
	.nav nav ul#menu.active:focus, .nav nav ul#menu.active:focus-within {
		xbackground-color:red;
		xdisplay:block;
		xvisibility:visible;
	}	
	.nav nav .menu-button {
		display:none;	

	}

/*
		.logo-etc a:hover,
		.logo-etc  a:active, 
		.logo-etc a:focus {
			opacity:0.75;
			outline:none;
		}
		*/

/*
    header.navbar {
      background-color: #fff; border-bottom: 1px solid #eee;
      padding: 15px 0; position: sticky; top: 0; z-index: 100;
    }
    .navbar .logo a { font-weight: 600; font-size: 1.6rem; color: #e67e22; float:left; }
	.navbar nav {
		clear:both;
		xdisplay:block;
		xtext-align:center;
	}
    .navbar nav ul {
      list-style: none; 
    }
	.navbar nav ul li {
		display:inline-block;
	  xwhite-space:nowrap;
	  margin:5px 20px 5px 0;
    }
	.navbar nav ul li:last-child {
	  margin-right:0;
    }
    .navbar nav ul li a {
      font-weight: 500; color: #333; transition: color 0.3s;
    }
    x.navbar nav ul li a:hover,
    x.navbar nav ul li a.active {
      color: #e67e22; xfont-weight: 600;
    }
*/

    html {
    	scroll-behavior: smooth; /* note that this does not work if windows is set to turn off animations... */
    }
    section, footer {
    	scroll-margin-top:4rem; /* should be the same as the previous block's padding-bottom (i.e. .container padding-bottom) - any box shadow... */
    }
   
	.skew, section.features {
	  --section-spacing:4rem;
	  padding:var(--section-spacing) 0;
	  position:relative;	  
	}
	.skew .container {
		position:relative;
	}	
   .skew.why,
   .skew.pricing,
   .skew.faq {     
     --skew:2deg; /* --skew:atan(20px / 100vw); */     
     --side:calc(100vw * tan(var(--skew))); 
   	 padding:calc(var(--section-spacing) + var(--side)) 0;
   }    
   .skew.why::before,
   .skew.pricing::before,
   .skew.faq::before {     
	   	content: "";
    	background-color:#f5f5f5;    	
    	position: absolute;    	
    	top:var(--side);
    	bottom:0;
    	left:0;
    	right:0;
    	transform:skewY(calc(var(--skew) * -1));
		transform-origin:center left;
		
		
		
		
		
		border:dashed 0 #4562;
		xborder:dashed 0 #fff;
		border-width:3px 0;
		
		xborder:dotted 0 #fff;
		xborder-width:10px 0;
		xoutline:solid 5px #f5f5f5;
   }
footer {
			border-top:dashed 3px #fff;		
}
xsection#home:after {
    content: '';
    position: absolute;
    width: 100%;
    /* height: 100%; */
    bottom: 0;
    /* background-color: red; */
    z-index: 1;
    border-bottom: dashed 3px #fff;
}
    

    .hero-slider { position: relative; height: 100vh; overflow: hidden; }
    .slides-wrapper { position: relative; height: 100%; }
    .slide {
      position: absolute; top: 0; left: 0;
      width: 100%; height: 100%;
      opacity: 0;       
      transition: opacity 1s ease;       
    }
    .slide.active { opacity: 1; z-index: 1; }
    .slide img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
    .overlay {
      position: absolute; top: 0; left: 0;
      width: 100%; height: 100%; background-color: rgba(0,0,0,0.4);
    }
    .slide .content {
      position: absolute; top: 50%; left: 50%;
      width:90%;
      transform: translate(-50%, -50%);
      text-align: center; color: #fff; z-index: 2;
      text-shadow:0px 2px 12px #000;
    }
    .slide .content h1 { font-size: 5rem; margin-bottom: 10px; }
    .slide .content p { font-size: 1.25rem; xfont-weight:bold; margin-bottom222: 10px; }
    .slide .btn {
      background-color: #e67e22; color: white;
      margin-bottom:10px;
      padding: 6px 12px; border-radius: 2px;
      xfont-weight: 600; xtransition: background 0.3s;
      xtext-transform:uppercase;
    }
    .slide .btn:hover { xbackground-color: #cf6d1b; }

	.hero-slider .extras {
		display:flex;
	    justify-content:space-between;
	    align-items:flex-end;
	    xgap:5px;
	    position:absolute;
	    left:1rem;
	    right:1rem;
	    
	    xbottom:1rem;
	    bottom:18px;
	    
	    z-index:1;
	    color:#fff7;
	    font-size:14px;
	}
	.hero-slider .extras .left {
		margin-bottom:7px;
	}
	.hero-slider .extras .left a {
		display:inline-block; 
		margin-top:5px;
		margin-right:5px;
		text-shadow: 0px 1px 4px #0005;
	}
	.hero-slider .extras .left a .material-symbols-outlined {
		vertical-align:middle;
	}
	.hero-slider .extras .left a b {
		margin-left:0.5ex;
	}	
	.hero-slider .extras .left a span {
		display:inline-block; 
	}		
	
    .stamp {
      xbackground-color:#e67e22; 
      xcolor: white;
      background:linear-gradient(#e67e22,#e67e2277);
      box-shadow: 0 4px 18px rgba(0,0,0,0.2);
      
      xposition:absolute;
      xz-index:1;
      xright:2vh;
      xbottom:-1vh;
      
      xdisplay:flex; inline-block;      
      xflex-direction:column;
      xjustify-content:center;      
      xalign-items:center;
      
     text-align:center;
      
      transform:rotate(-5deg);
      
      xwidth:15vh;
      xheight:15vh;
      overflow:hidden;
      xborder-radius:15vh;
      xpadding:10px;
      margin:5px 10px 10px 5px;
      
      									font-size:12px;1.1vh; 
      font-weight:bold;
      line-height:1.2;    	
    	white-space:nowrap;    

    }

    .stamp .sticker {
    
    
          xposition: absolute; 
          xtop: 50%; 
          xleft: 50%;
      xwidth:100%;
      	xtransform: translate(-50%, -50%);
      	xtext-align: center; color: #fff; z-index: 2;
      	xtext-shadow:0px 2px 12px #000;
    
		background-color:#234;
		xbackground-color:#e67e22; 
		xbox-shadow: 0 4px 18px rgba(0,0,0,0.25);
		 
		color:#bcd;
		font-weight:normal;
		
		xpadding:1vh 0vh;
		padding:10px;
		
		text-transform:uppercase;
		letter-spacing:0.5px;
    }
    .stamp .sticker .logo {
		xfont-size:255%;
		xpadding-bottom:0.15vh;    	
		text-transform:none;
		letter-spacing:normal;
		
		color:#bcd!important;
		font-weight:bold!important;
		
    }
    

     .stamp {
     	background:transparent; 
     	box-shadow:none;
     	overflow:visible;
     }
     .stamp .sticker {
     	box-shadow: 0 4px 18px rgba(0,0,0,0.25);     	
     	border-radius:3px;
     }
     .stamp .sticker .logo {
		font-size:240%;
		xpadding-bottom:0.15vh;
		padding-bottom:2px;
		    	
		text-transform:none;
		letter-spacing:normal;
		
		color:#bcd!important;
		font-weight:bold!important;
		
    }
     
             
    .features {
      xbackground-color: #fff; 
      QQQpadding: 100px 0;
    }
    .features .container {
      display: flex; gap: 30px; flex-wrap: wrap; 
      xjustify-content: center;
    }  
    .feature-box {
      xxxbackground-color: #fefefe; 
	  xbackground-color: #70e67e44; 
	  background-color: #345;
	  
	  padding: 20px; 
	  xtext-align: center;
      border-radius: 8px; 
	  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
	  margin-bottom:16px; /* margin-bottom should be the same as the box-shadow bottom height to not show when clicking the nav-link after this one... */
	  
      width: 300px;
    }
    .feature-box i {
      font-size: 2.5rem; color: #e67e22; margin-bottom: 10px;
      font-size: 2.5rem; color: #fff; margin-bottom: 10px;
    }
    .feature-box h3 { margin-bottom: 10px; color: #fff; }
    .feature-box p { color: #fff; opacity:0.75; }
    .feature-box .material-symbols-outlined { color: #ff0; }

    .why {
      xbackground-color: #f5f5f5; 
      QQQpadding: 60px 0; 
      QQQtext-align: center;
    }
    x.why h2 { color: #333; xmargin-bottom: 30px; }
    x.why p { xmax-width: 800px; xmargin: 0 auto 20px; xcolor: #555; }
/*
    .how-it-works {
      background-color: #fff; padding: 60px 0; text-align: center;
    }
    .how-it-works h2 { font-size: 2rem; color: #333; margin-bottom: 30px; }
    .how-steps {
      display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;
    }
    .how-step {
      background-color: #fefefe; border-left: 5px solid #e67e22;
      padding: 15px; border-radius: 4px;
      max-width: 220px; width: 100%;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .how-step img {
      width: 100%; height: auto; border-radius: 6px; margin-bottom: 12px;
    }
    .how-step-content h4 { margin-bottom: 8px; color: #e67e22; font-size: 1.1rem; }
    .how-step-content p { color: #666; font-size: 0.9rem; }
*/
    .pricing {
      xbackground-color: #f5f5f5; 
      QQQpadding: 60px 0; 
      QQQtext-align: center;
    }
    x.pricing h2 { margin-bottom: 30px; color: #333; }
    .pricing .pricing-info {
      max-width: 800px;
      margin: 0 auto 40px;
      text-align: left;
      xbackground-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .pricing .pricing-info p {
      xmargin-bottom: 15px;
      color: #444;
      line-height: 1.4;
    }
    .pricing .pricing-table {
      width: 100%;
	  xmax-width:500px;
      xborder-collapse: collapse;
      xmargin-bottom: 30px;
    }
    .pricing .pricing-table th, .pricing .pricing-table td {
      xborder: 1px solid #ddd;
      padding: 4px 12px;
      text-align:center;
    }
    .pricing .pricing-table th.price, .pricing .pricing-table td.price {
      xtext-align:right;
    }    
    .pricing .pricing-table th {
      background-color: #e67e22;
      color: white;
    }
    .pricing .pricing-table td {
      background-color: #fafafa;
    }
    .pricing .note {
      color: #666;
      font-size: 0.9rem;
      margin:1em 0;
    }

    .app-showcase {
      xbackground-color: #fff; 
      QQQpadding: 60px 0; 
      QQQtext-align: center;
    }
    x.app-showcase h2 { color: #333; margin-bottom: 20px; }
    .app-showcase p { color: #666; xmax-width: 700px; xmargin: 0 auto 30px; }
   	x.app-showcase .app-mockups {
      display: flex; gap: 30px; 
      xjustify-content: center; 
      flex-wrap: wrap;
    }
    .app-showcase a div {
    	text-align:center;
    	font-weight:bold;
    	color:#ee8623;
      xtext-transform:uppercase;
    }    
    .app-showcase img {
      xmax-width: 300px; 
      xwidth: 100%; 
      xheight: auto;
      border-radius: 8px; 
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }

    .references {
      xbackground-color: #fff; 
      QQQpadding: 60px 0; 
      QQQtext-align: center;
    }
    x.references h2 { color: #333; margin-bottom: 30px; }
    .ref-list {
      xdisplay: flex; xflex-direction: xcolumn; xgap: 20px; xalign-items: center;
	  xtext-align:center;
	  
	  max-width:600px;
	  xmargin:auto auto;
	  margin-top:20px;
    }
    .ref-item {
      xbackground-color: #fefefe; 
      xpadding: 20px;
      margin:20px 0;
      border-radius: 6px; xbox-shadow: 0 2px 8px rgba(0,0,0,0.05);
      xwidth: 100%; xmax-width: 700px; xtext-align: left;
    }
    .ref-item h4 { margin-bottom: 5px; color: #e67e22; }
    .ref-item p { color: #666; }

    .logo-clients {
      	
      	xbackground-color: #f5f5f5;
        border: solid 4px #f5f5f5;
    	border-radius: 15px;
    	
      xpadding: 40px 40px; 
      padding: 40px 20px;
      
      text-align: center;
	  max-width:840px;
	  xmargin:auto auto;
    }
    .logo-clients .container2 {
      display: flex; 
      flex-wrap: wrap; 
      xgap: 30px;
      xjustify-content: center; 
      align-items: center;
      
    	gap: 20px;
    	justify-content: space-evenly;      
      
    }
    .logo-clients img {
      max-height: 60px; 
      xmax-width: 150px;
      width: 100px;
      
      object-fit: contain; 
      xopacity: 0.8; 
      xtransition: opacity 0.3s;
      
          
      
    }
    x.logo-clients img:hover { opacity: 1; }
/*
    .contact {
      background-color: #fff; padding: 50px 0; text-align: center;
    }
    .contact h2 { font-size: 1.8rem; color: #333; margin-bottom: 15px; }
    .contact a { color: #e67e22; }
    .contact p { color: #666; }
*/
    footer.footer {
      background-color: #234; 
      color: #789; 
      QQQtext-align: center;
      QQQpadding: 40px 0; 
      font-size: 0.8rem;
      line-height:1.4;
    }

	footer.footer .container {
      xopacity:0.75;
      padding:2rem 0 1rem 0;
    }

	footer.footer .row2 {
      xborder:solid 1px white;
      display:flex;
      flex-wrap: wrap;      
    }
	footer.footer .col {
      xborder:solid 1px red;
      xdisplay:inline-block;
      xwidth:300px;
      min-width:300px;
      max-width:400px;
      margin:10px;
      vertical-align:top;
      text-align:left;
    }
    footer.footer h2 {
    	color:#bcd;
    	font-size:1.5rem;
    }
    footer.footer h2.logo {
    	font-size:2rem;
    }    
    footer.footer p {
    	xmargin:0.6em auto;
    	 color:inherit; 
    	 font-size:inherit;
    }
    footer.footer b {
    	font-weight:normal;
    }
    footer.footer span {
    	display:block;
    }
    footer.footer a {
    	font-weight:bold;
    	color:#bcd;
    }
    footer.footer a:hover {
    	xcolor:#def;
    }
	
	/*
	#account-button {
		background-color:#345;
		color:white;
		padding:8px 16px; 
		text-align: center;
		border-radius: 8px; 		
		float:right;
		font-weight:bold;
		cursor:pointer;
	}
	#account-button:hover {
		background-color:#567;	
	}
	*/
	.field {
		background-color:#345;
		color:white;
		border:none;
		xborder:solid 1px #123;
		padding:8px 8px;
		margin:8px 0;
		border-radius:4px; 		
		xoutline:none;
		font-size:14px;
		xbox-shadow: inset 0 1px 4px rgba(0,0,0,0.25);
		xwidth:264px;
		width:100%;
		color-scheme: dark;
	}
.field::placeholder {
  xfont-weight: bold;
  opacity: 0.5;
  color: white;
}
	
	.button {
		background-color:#99c;
		color:#123;
		xcolor:white;
		border:none;
		padding:4px 10px;
		margin:8px 0;
		border-radius:16px; 		
		xoutline:none;
		font-size:14px;
			xfont-weight:bold;
		line-height:24px;
		cursor:pointer;
	}	
	.button.green {
		xbackground-color:#8b8;
		background-color:#e67e22;
		color:white;
		font-weight:bold;
	}
	/*
	.button:hover,
	.button:active,
	.button:focus {
		opacity:0.75;
	}
	*/
	
.button-icon {
	margin:-2px -2px 0 2px;
	vertical-align:middle;
    width: 24px;
    fill: #123;
}





dialog {
	xmax-height:100%;
  transition: opacity 250ms ease-out, display 300ms, overlay 300ms;  
  transition-behavior: allow-discrete;
  opacity: 0;
  display:none;
  
  	background-color:transparent;
  	color:#fff;
  	border-radius: 8px; 		
	position:fixed; /* needed if not modal */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	xheight:340px;
		
		xwidth:1000px;
		xmax-width:100vw; /* this prevents the dialog to take up space when not shown, so the elements fixed to the right are not put outside the screen... (on mobile) */
		xmax-height:100vh;
		
		xmargin:10px;		
		xoverflow:hidden;
	 	xmax-height: 100vh; calc(100% - 2em - 6px)!important;
		 
	xdisplay:flex;
	border:none!important;
	xoutline:none!important;	
	xbox-shadow: 0 4px 32px rgba(0,0,0,0.5);
	xbox-shadow: 0 4px 32px rgba(0,0,0,0.5), 0px 0px 0.01px 0px #fff7;
	box-shadow: 0 4px 32px rgba(0,0,0,0.5), 0px 0px 50px -25px #fff7;
}
dialog[open] {
  opacity: 1;	
  display:flex;
	xmax-width:revert;
	xmax-height:revert;
}
dialog::backdrop {
  opacity: 0;
  background-color: #0008;
  transition: opacity 250ms ease-out, display 300ms; 
}
dialog[open]::backdrop {
  xbackground-color: #0008;
  opacity: 1;
}
@starting-style {
	dialog[open] {
		opacity: 0;
		xdisplay:none;
	}
	dialog[open]::backdrop {
		opacity: 0;
	}
}

	dialog .image {
		xwidth:188px; 
		xheight:100%;
		xobject-fit: cover; 
		xbackground-color:#fff;
		xopacity: 0.75;
		overflow:hidden;
		margin-right:-1px;
		xbox-shadow: 120px 80px 40px 20px #0ff;
	}
	dialog .image img {
		width:188px; 
		height:100%;
		object-fit: cover; 
		xbackground-color:#fff;
		xopacity: 0.75;
		xtransform: scale(1.1);
	}
	dialog#login .image img {
		filter: brightness(1.1) contrast(.8) blur(.5px);
	}	
	dialog#create .image img {
		filter: brightness(1.1) contrast(.8) blur(.5px);
	}
	dialog#reset .image img {
		filter: brightness(1) contrast(.9) blur(.5px);
	}
	dialog .content {
		background-color:#234;
		width:320px; 
		
xheight:100%;
overflow-y:auto; /* safari did not like height:100% */
		
		padding:25px 15px 10px 15px; 16px 16px 0 16px; 
		xdisplay:flex; 
		xflex-direction:column; 
		xjustify-content: space-between;		
	}
	dialog .content form { /* to make the overflow-y:auto above work better */ 
		display:inline-block;  
    	width:100%;
	}
	
	dialog .close:before {
			content:'close';
			xcolor:#ee8623;
			color:#fff7;
			
			xbackground-color:#ee8623;
			xcolor:#fff;
			xborder-radius:100px;
			xpadding:7px;
			xvertical-align:bottom;
			
    font-family: 'Material Icons';
    xfont-weight: normal;
    xfont-style: normal;
    
    xfont-size: 32px;    
    xwidth: 32px;
    font-size: 24px;
    width: 24px;
    height: 24px;
    
    line-height:0;
    xletter-spacing: normal;
    xtext-transform: none;
    xdisplay: inline-block;
    xwhite-space: nowrap;
    xword-wrap: normal;
    xdirection: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    xposition: absolute;
    
    xright: 10px; rem;
    
    xtop: 50%;
    x-webkit-transform: translate(0, -50%);
    xtransform: translate(0, -50%);			
			
			xtext-shadow:0px 1px 4px #0005;
			xbox-shadow: 0 4px 12px rgba(0,0,0,0.25);

		position:absolute;
		right:5px;
		top:17px;			
	}	
	dialog p {
		xopacity:0.5; 
		xmargin-left:6px; 
		font-size:13px;
		color:#89a;
		margin:5px 0;
	}
	dialog p a {
		font-weight:bold;
		xopacity:1;
		color:#abc;
	}
	dialog p a:hover {
		xopacity:0.5;
	}
	xdialog hr {
		height:1px;
		background-color:#456;
		border:none;
		xmargin:8px 0;
	}
	xdialog .nav {
		position:absolute; 
		bottom:10px; 
		xright:20px; 
		xwidth:60%;
		left:67%;
	}
	xdialog .footer {
		display:none;
	}
	dialog .button {
		float:right;
	}
	


x.why  h2 {
	xmargin:1ex;
}
x.why  p {
	xmargin:1ex;
}
x.why .container {
	xwidth:40%;
}


.why ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-end;
	
}
.why li {
	xdisplay:block;
	display:inline-block;
	
	width:150px;
	xmin-height:100px;
	
	overflow:hidden;
	margin:5px; 
	xobject-fit: cover;
	background-color:#e67e22;
	border-radius:5px;
	padding:10px;
	
	flex-grow: 1;
}
.why li.item1,
.why li.item2,
.why li.item3 {
	width:200px;
	xmin-height:200px;

}

.why li div {	
		color:#fff;
		xword-wrap: break-word;
	text-align:center;
	position:relative;
	xleft:0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);	
    
    font-size:15px;	
}

.why li div strong {
	display:inline-block;
	padding:10px;
	font-size:18px;
	xfont-weight:normal;	
}

x.why li div {
	xdisplay:inline-block;
	xwidth:100%;
	
	xmargin:5px 0;
	xbackground-color:#e67e22;
	color:#fff;
	xopacity:0.5;
	xfont-family:monospace;
xfont-size:20px;
font-size:100%;
	xfont-weight:bold;
	xletter-spacing:1px;
	padding:8px 2ex 9px 2ex;
	xborder-radius:4px;
	line-height:1.15;
}
.why li span {
	color:#fff;
}
.why .icon-title .text {
	display:inline!important;
}

xxxxxxxx.why xxxxxxxsvg {
  width:200px;
  height:200px;
  background-color:green;
  margin:5px;
  
}




.how-to-begin {
	QQQtext-align:center;
	background-color:#fff;
		
}
.how-to-begin .control {
	
}

.flex {
	display:flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap:wrap;		
	gap:2rem;
}

.flex.reverse {
	flex-direction:row-reverse;
}

.intro {
	xdisplay:flex;		
	wxidth:33%;
	xflex:5;
	flex:1;
	min-width:300px;
}
.column, .row {
	xwidth:50%;
	display:flex;
	xflex-direction:column;
	  
	  xjustify-content: flex-end;
	  xjustify-content: space-between;
	  justify-content:center;
	  
	  gap:1rem;
	  flex-wrap:wrap;
	  	
	xflex:8;		
	flex:1;
	min-width:300px;
	xmax-width:400px;
}
.column {
	flex-direction:column;
}

.how-to-begin .column {
  gap:0; 
      align-items: center;
} 
    
.how-to-begin a {
	background-color:#345;
	box-shadow: 0 4px 16px rgba(0,0,0,0.25);
	
	border-radius:8px;
	overflow:hidden;
		
	width:300px;
	xmargin:20px 5px 100px 5px;
	padding:20px;
	xfloat:left;
	display:inline-block;
	vertical-align:top;
	text-align:left;
	margin:0 -13px 16px -13px; /* margin-bottom should be the same as the box-shadow bottom height to not show when clicking the nav-link after this one... */
}	
    
.how-to-begin a,    
.app-showcase .row img {
	transition: transform .25s ease-in-out; /* Animation */
	transform: scale(.95);
	
}

.how-to-begin a:hover,
.app-showcase .row img:hover {
	opacity:1;
	transform:scale(1) translate3d(0,0,0) perspective(1px);
}
.app-showcase .row a:hover {
	opacity:1;
}
.app-showcase .row a:hover div {
	opacity:0.75;
}

.how-to-begin {
	counter-reset:how-to-begin-steps;
}
.how-to-begin a h3 {
	font-size:20px;
	color:#fff;
	line-height:1.2;	
	xfont-weight:900;
}
x.how-to-begin a h3 span {
	font-size:56px;
	color:#ff0;
	float:left;
	margin:-4px 10px 0 0;
	line-height:1;	
}
.how-to-begin a h3:before {
	counter-increment:how-to-begin-steps;
	content:counter(how-to-begin-steps);
	font-size:56px;
	color:#ff0;
	float:left;
	margin:-4px 10px 0 0;
	line-height:1;	
}
.how-to-begin a p {
	font-size:13px;
	color:#fff;
	opacity:0.75;
	clear:both;
	xtext-align: justify; 
	xtext-justify: inter-character;
	margin:20px 0 5px 0;
}

.faq {
	xtext-align:center;
	xbackground-color:#f5f5f5;
	QQQpadding:3rem;		
}

.faq .row {
	padding-top:1.5rem;
}

.faq .container {
	xwidth:50%;	
}

x.faq h2 {
	text-align:center;
	margin-bottom:20px;
}




.photos {			
	display:flex;
    flex-wrap: wrap;
    justify-content:center;
    align-items:center;
    padding:1rem 1rem 0 1rem;   
}
.photos img {	
	display:block;
	width:100%;
	margin:0;	
	border:solid 10px white;
	border-radius:2px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.25);	
	transform:rotate(-2.5deg);	
}
.faq .photos img {		
	width:55%;	
	margin:1rem -20px;	
	transform:rotate(calc(12deg - 10deg * sibling-index()));
}
.faq .photos img:last-child {
	margin:-10% -10% 0 -10%;
}

.symbol {
	font-size:200px; 
	margin:0 0 -1rem 10px; 
	line-height:normal; 
	opacity:0.1;
}





.faq .category {
	margin-bottom:10px;
	font-weight:bold;	
}


.faq .category .toggleparent {
	background-color:#345;
	border-radius:3px;
	xpadding:8px 10px;
}

.faq .category .toggle {
	
	display:block;
	xborder-bottom:solid 1px #aaa;
	xmargin-bottom:10px;
	xtext-align:center;
	
	xbackground-color:#ddd;
	xxcolor:#fff;
	xbackground-color:#345;
	color:#fff;
	
	xborder-radius:3px;
	xpadding:5px 10px;
	padding:8px 10px;
}



.faq .category .toggle:hover,
.faq .category .toggle:active,
.faq .category .toggle:focus {		
	xcolor:#fff7;	
	xopacity:1;
}
.faq .category.active .toggle {		
	color:#ff0;	
	opacity:1;
}



x.faq .category ul {
	display:none;
	opacity: 0; 
	transition: opacity 1s ease, display 1s;
}
x.faq .category.active ul {
	display:block;
	opacity:1;
}

.faq .category ul {  
  opacity:0;
  display:none;  
  xheight:0;
 xoverflow:hidden;
  xtransition: opacity 0.9s, display 0.9s;    
  xtransition: opacity 0.9s, display 0.9s, height 0.9s, allow-discrete;
  transition-property: opacity, display;
  transition-duration: 0.25s;
  xtransition-delay: 2250ms 0ms;
 xtransition-behavior: allow-discrete;  
}

.faq .category.active ul {
  opacity:1; 
  display:block;
  xheight:auto;
}

/* rules are to be set as beginning-state for transitioning 
   from "display:none" to a visible display:
   https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
*/
@starting-style {
  .faq .category.active ul {
 	opacity: 0;
  	xdisplay: none;
  	 xheight:0;
  }
}

.faq .category .toggle:after {
    xcontent: "+";
	content: "keyboard_arrow_down";
    font-family: 'Material Icons';
    font-weight:normal;
    
    xfont-style: normal;
    font-size: 24px;
    xwidth: 24px;
    line-height:0;
    xletter-spacing: normal;
    xtext-transform: none;
    xdisplay: inline-block;
    white-space: nowrap;
    xword-wrap: normal;
    xdirection: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    xposition: absolute;
    xright: 0.5rem;
    xtop: 50%;
    x-webkit-transform: translate(0, -50%);
    xtransform: translate(0, -50%);			
    
    float:right;
    xbackground-color:#ff0;
		
    xmargin-right: 6px;
    xbackground-color:#999;
    display:inline-block;
    overflow:hidden;
    xwidth:1.5ex;
    width:18px;
    line-height:0.8;
   xtext-align:left;  
   xtext-align:center;
    xvertical-align:middle;  
}
.faq .category.active .toggle:after {
    xcontent: "-";
    content: "keyboard_arrow_up";"
}

.faq .category li {
	xmax-width:320px;
	
	xdisplay:inline-block;
	margin:10px 0;
	display:block;
	xmargin:10px auto;
		
	xpadding:10px;
	xbackground-color:#ddd;
	color:#333;
	border-radius:5px;
	text-align:left;
	vertical-align:top;
}

x.faq .category li a {
	xfont-weight:bold;
	text-decoration:underline;
}

.faq .question {
	xborder:solid 1px red;
	xpadding:1em;
	xbackground-color:red;
	xfont-weight:bold;
	xfont-size:larger;
	margin:0;
	white-space:nowrap;
	
}

.faq .question {
	font-weight:normal;		
}



.faq .question:active,
.faq .question:focus {
	xfont-weight:bold;
	xcolor:#000;		
}



.faq .question span {
	display:inline-block;
			xfloat:right;
			white-space:break-spaces;
			vertical-align:text-top;
			margin-right:10px;
			xfont-weight:normal;
}
x.faq .question:before {
			content:'contact_support';			
			xcontent:'help_center';
			
			color:#678;
			vertical-align:middle;
			xfloat:left;
			
			
    font-family: 'Material Icons';
    xfont-weight:bold;
    xfont-style: normal;
    font-size: 24px;
    xwidth: 24px;
    line-height:0;
    xletter-spacing: normal;
    xtext-transform: none;
    xdisplay: inline-block;
    white-space: nowrap;
    xword-wrap: normal;
    xdirection: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    xposition: absolute;
    xright: 0.5rem;
    xtop: 50%;
    x-webkit-transform: translate(0, -50%);
    xtransform: translate(0, -50%);			
			
			xtext-shadow:0px 1px 4px #0005;
		}
		
.faq .answer {
	xborder:solid 1px green;
	xpadding:1em;
	xbackground-color:green;
xfont-size:smaller;
	xmargin:5px 0 15px 24px;
	
	display:none;
	
	background-color: #fff;
	border:solid 3px #567;
	xpadding: 10px 1.5ex;
    padding: 10px 1ex;
    
    border-radius: 5px;	
	
	font-weight:normal;
	
    margin:0;
}


x.faq .answer.active {
	display:block;
}
.faq li.active .answer {
	display:block;
}
.faq li.active .question {
	font-weight:bold;
	letter-spacing:-0.15px;
	color:#000;
	opacity:1;
}

  
.faq .answer a {
	text-decoration:underline;	
}    
    
@media (max-width: 1140px) { /* note that this must match the media in the js */  

	.faq .row {
		padding-top:0;
	}

	.photos img {
		display:none;
	}	
	.photos img:last-child {
		display:block;
	}
	.faq .photos img:last-child {
		width:100%;	
		margin:0;
		transform:rotate(-2.5deg);	
	}	

	.nav nav ul#menu {
		opacity:0;
		display:none;
		transition:opacity 250ms ease-out, display 300ms, overlay 300ms;  
		transition-behavior:allow-discrete;	
	}
	.nav nav.no-transition ul#menu {
		transition:none;	
	}
	.nav nav.active ul#menu {
		opacity:1;	
		display:flex;
		@starting-style {
			opacity:0;
		}		
	}		
	
	
		.nav nav ul#menu {
			xdisplay:none;
		xdisplay:flex;
			flex-direction: column;
			
			xvisibility:hidden;	
			position:absolute;
			xz-index:200;
			right:0;
			margin:5px 0 10px 0;
			
			xopacity: 0; 
			
			xtransition: opacity 0.25s ease;
			xtransition-behavior: allow-discrete;
			xtransition-property: display, opacity;
			xtransition-property: opacity;
  			xtransition-duration: 1.25s;
		}
/*
@starting-style {
  .nav nav ul#menu {
 	opacity: 0;
  	display: none;
  	 xheight:0;
  	 xtransition: opacity 0.25s ease;
  }
}
*/		
		.nav nav ul#menu>:first-child {
			text-align:left;
		}
		
		/* .nav nav ul#menu.active { */
		
		x.nav nav.active ul#menu {
		
			opacity:1;
		
xtransition: opacity 0.25s ease;
		xtransition-behavior: allow-discrete;
		xtransition-property: opacity;
		xtransition-duration: 1.25s;
		
			xdisplay:flex;
			xflex-direction: column;
		}
		

		
		
		
		
		
		.nav nav .menu-button {
			display:inline-block;
			xwidth:100px;	
			xmargin-top:10px; 2rem;			
			xposition:relative;
		}   
		.nav nav .menu-button a {
		
			xmargin-top:10px; 2rem;			
			xposition:relative;
			xoutline:none;
		} 
 
		.nav nav .menu-button a:before {
			content:'menu';  'arrow_forward';
			color:#ee8623;
			
			background-color:#ee8623;
			color:#fff;
			border-radius:100px;
			padding:7px;
			xvertical-align:bottom;
			
    font-family: 'Material Icons';
    xfont-weight: normal;
    xfont-style: normal;
    
    xfont-size: 32px;    
    xwidth: 32px;
    font-size: 24px;
    width: 24px;
    height: 24px;
    
    line-height: 1;
    xletter-spacing: normal;
    xtext-transform: none;
    display: inline-block;
    white-space: nowrap;
    xword-wrap: normal;
    xdirection: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    xposition: absolute;
    
    xright: 10px; rem;
    
    top: 50%;
    x-webkit-transform: translate(0, -50%);
    xtransform: translate(0, -50%);			
			
			xtext-shadow:0px 1px 4px #0005;
			box-shadow: 0 4px 12px rgba(0,0,0,0.25);
		}
		/*
		.nav nav .menu-button a:hover,
		.nav nav .menu-button a:active, 
		.nav nav .menu-button a:focus {
			opacity:0.75;
		}
		*/
		.nav nav.active .menu-button a:before {
			content:'close';
		}

		
      x.navbar nav ul {
        flex-direction: column; align-items: flex-end; gap: 10px;
      }
      .slide .content h1 { font-size: 3rem; }
      x.how-steps { flex-direction: column; }
      .pricing .pricing-info, .pricing .pricing-table {
        width: 100%;
        overflow-x: auto;
      }
      dialog {
		xheight:revert;
	 }
	  dialog .image {
		display:none;
	 }
	  x.hero-slider { height: 500px;}				
}

.cikado-consent-banner.cikado-show {
	position:fixed!important;
}