/* suresire.com by pmzo.com */

@font-face { font-family: Montserrat; src: url('src/fonts/montserrat.woff2') format('woff2'), url('src/fonts/montserrat.woff') format('woff'); font-display: swap; }
@font-face { font-family: Montserrat; src: url('src/fonts/montserrat.woff2') format('woff2'), url('src/fonts/montserrat.woff') format('woff'); font-display: swap; }
@font-face { font-family: Montserrat; src: url('src/fonts/montserrat-italic.woff2') format('woff2'), url('src/fonts/montserrat-italic.woff') format('woff'); font-style: italic; font-display: swap; }
@font-face { font-family: Montserrat; src: url('src/fonts/montserrat-italic.woff2') format('woff2'), url('src/fonts/montserrat-italic.woff') format('woff'); font-style: italic; font-display: swap; }

:root {
    --white: rgba(245, 245, 245, 1);
    --white-alt: rgba(245, 245, 245, 0.85);
	--grey: rgba(55, 65, 80, 1);
	--grey-alt: rgba(55, 65, 80, 0.85);
	--black: rgba(10, 10, 10, 1);
	--black-alt: rgba(10, 10, 10, 0.85);
    --green: rgba(0, 160, 120, 1);
    --green-alt: rgba(0, 160, 120, 0.85);
    --blue: rgba(15, 40, 70, 1);
	--blue-alt: rgba(15, 40, 70, 0.85); 
    --font: 'Montserrat', sans-serif;
    --normal: 400;
    --bold: 700;
    --width: 120rem;
	--shadow-top: 0px -2rem 2rem -2rem var(--black-alt);
	--shadow-right: 2rem 0 2rem -2rem var(--black-alt);
	--shadow-bottom: 0px 2rem 2rem -2rem var(--black-alt);
	--shadow-left: -2rem 0 2rem -2rem var(--black-alt);
	--shadow-all: var(--shadow-top), var(--shadow-right), var(--shadow-bottom), var(--shadow-left);
	--shadow-inset: 0 0 2rem 0 var(--black-alt) inset; 
	--gap-small: 1rem;
	--gap-medium: 2rem;
	--gap-large: 3rem;
	--equal: 100%;
}
*, *::after, *::before { margin: 0; padding: 0; border: 0; box-sizing: border-box; outline: none; }
html { font-size: 62.5%; scroll-behavior: smooth; display: grid; place-items: center; }
body { background-color: var(--grey); font-family: var(--font); font-weight: var(--normal); color: var(--white); font-size: 1.6rem; line-height: 1.25; width: 100%; }
a { color: var(--green); text-decoration: none; }
a:active, a:focus, a:hover { color: var(--blue); }
p { margin-bottom: 2rem; line-height: 1.5; } 
strong, b { font-weight: var(--bold); }
em, i { font-style: italic; }
img { max-width: 100%; height: auto; display: block; }

.button { background: var(--green); color: var(--white); padding: 1rem 2rem; border-radius: 2rem; text-align: center; font-weight: var(--bold); box-shadow: var(--shadow-all); text-transform: uppercase; display: inline-block; }
.button:hover, .button:active, .button:focus { color: var(--blue); background: var(--white); box-shadow: none; }

h1 { font-size: 4.2rem; font-weight: var(--bold); margin-bottom: var(--gap-small); }
h2 { font-size: 2.8rem; font-weight: var(--bold); margin-bottom: var(--gap-large); text-align: center; }
h3 { font-size: 2.4rem; font-weight: var(--bold); margin-bottom: var(--gap-medium); text-align: center; }
h4 { font-size: 1.6rem; font-weight: var(--bold); }
h5 { font-weight: var(--bold); }
h6 { font-weight: var(--bold); }
small { font-size: 1.2rem; } 

menu { list-style: none; }
ul { list-style: disc; margin-left: var(--gap-small); }

iframe { border: none; }

.wrap { width: 100%; max-width: var(--width); margin: 0 auto; box-shadow: var(--shadow-right), var(--shadow-left); }
.wrap > * { padding-top: 6rem; background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; box-shadow: var(--shadow-top); }
.wrap .contain { padding: 5rem var(--gap-medium); margin: 0 auto; min-height: 100vh; background-color: var(--blue-alt); box-shadow: var(--shadow-top), var(--shadow-bottom); } 
.wrap section { width: 100%; }

.separator { height: 20rem; width: 100%; display: grid; place-items: center; font-size: 4rem; line-height: 4rem; font-weight: bold; }
.separator a { display: grid; place-items: center; width: 6rem; height: 6rem; background-color: var(--white-alt); box-shadow: var(--shadow-all); border-radius: 50%; }
.separator a span { display: block; }

#home { background-image: url(src/bg/home.webp); }
#home .contain { margin-top: -9rem !important; padding-top: 12rem; }
.page-header { display: flex; flex-direction: column-reverse; text-align: center; justify-content: space-between; }
.page-header h2 { font-size: 2.2rem; }
.counter { margin-bottom: var(--gap-medium); display: flex; flex-direction: row; justify-content: center; }
.digits { display: block; width: 100%; font-style: normal; }
.digit { margin: .125rem; color: var(--grey); background: var(--white); padding: .25rem; display: inline-block; width: 2rem; text-align: center; font-weight: bold; font-size: 1.6rem; box-shadow: var(--shadow-inset); transition: transform 0.5s ease-in-out; }
.users { display: block; width: 100%; text-transform: uppercase; text-align: center; letter-spacing: .125rem ; font-size: 1.6rem; display: grid; place-items: center;  }
.header-content { display: flex; flex-direction: column; gap: var(--gap-medium); margin-bottom: var(--gap-small); }
.header-content .button { margin-bottom: var(--gap-medium); }
.page-intro { display: flex; flex-direction: column; justify-content: space-between; width: 100%; max-width: var(--equal); }
.page-intro p { margin-bottom: var(--gap-small); }
.page-intro ul { margin-bottom: var(--gap-medium); }
.demo-promo { display: flex; flex-direction: column; justify-content: space-between; }
.demo-video { width: 100%; max-width: 100%;  margin-bottom: var(--gap-medium); height: auto; aspect-ratio: 16/9; background-image: url(src/demo-video.webp); background-size: cover; }
.demo-promo h3 { font-size: 1.6rem; text-align: left; margin-bottom: var(--gap-medium);  }
.demo-promo h4 { font-weight: normal; font-size: 1.6rem; text-align: left; margin-bottom: var(--gap-medium);  }


#about { background-image: url(src/bg/about.webp); }
.feature { background: var(--grey-alt); box-shadow: var(--shadow-all); display: flex; flex-direction: column-reverse; gap: var(--gap-small); }
.feature-details { padding: var(--gap-medium); }
.feature-details h3 { margin-bottom: 1rem; }
.feature-details p { margin-bottom: 1rem; }
.feature-details ul { margin-bottom: 1rem; }
.feature-gallery.double img:nth-of-type(1) { margin-bottom: var(--gap-small); }
.subfeature { padding-top: var(--gap-small); background: var(--grey-alt); box-shadow: var(--shadow-all); }
.subfeature-gallery { display: flex; flex-direction: column; gap: var(--gap-medium); }
.subfeature-gallery div { display: flex; flex-direction: column !important; }
.subfeature-gallery img { max-width: 100%; }
.subfeature p { margin-bottom: 0; padding: var(--gap-small) var(--gap-medium); }
.subfeature h4 { text-align: center; padding: 0 0 var(--gap-small) 0; }
#about hr { margin: var(--gap-small) var(--gap-medium); height: var(--gap-medium); background-image: url(src/bg/about.webp); background-size: cover; background-position: center center; background-attachment: fixed; box-shadow: var(--shadow-inset); }

#demo { background-image: url(src/bg/demo.webp); }
#demo .contain {  }
.tablet { border: 1rem solid var(--black); border-radius: 1.5rem; box-shadow: var(--shadow-all); margin: var(--gap-medium) auto; width: auto; }
.screen { border: .5rem solid var(--black); border-radius: 0.25rem; background: var(--white); width: 100%; height: auto; }
.tablet img { width: 100%; height: auto; aspect-ratio: 48/25; }
#demo .form { display: flex; flex-direction: column; }
.demo-form { padding: var(--gap-small) var(--gap-small) 0 var(--gap-small); background: var(--grey-alt); box-shadow: var(--shadow-all); }
.demo-content {display: flex; flex-direction: column; gap: var(--gap-medium);}
.demo-content section { width: 100%; max-width: var(--equal); }
.demo-brochure { padding: 0 0 var(--gap-small) 0; display: flex; flex-direction: column;  }
.demo-brochure .button { margin-bottom: var(--gap-medium); }
#demo .form-frame { width: 100%; height: 38rem; box-shadow: var(--shadow-all); background: var(--grey-alt); overflow: hidden; }

#support { background-image: url(src/bg/support.webp); padding-bottom: 0 !important; }
#support .contain { }
.support-content {display: flex; flex-direction: column; gap: var(--gap-medium); } 
.support-content iframe { height: 57rem; }
#support img { margin: 0 auto; }
.manual-buttons  { display: flex; flex-direction: row; gap: var(--large); justify-content: space-evenly; margin-top: var(--gap-medium); margin-bottom: var(--gap-medium); }
.manual-buttons .button { width: 45%; display: inline-block; }


#footer { width: 100%; text-align: center; padding: var(--gap-small); color: var(--grey); background: var(--white); box-shadow: var(--shadow-inset); }
#footer .address { font-style: normal; margin-bottom: var(--gap-small); }
#footer .email {  margin-bottom: var(--gap-small); }
#footer .phone {  margin-bottom: var(--gap-small); }
#footer .logos { margin: var(--gap-small) auto; width: 32rem; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
#footer .logos a { display: block; max-width: 14rem; }
#footer a { color: var(--blue); line-height: 1.5; }
#footer a:focus, #footer a:hover, #footer a:active { color: var(--green); }
.copyright { font-size: 1.2rem; }

.contacts-strip { display: flex; flex-direction: column; gap: var(--gap-small); background: var(--white-alt); color: var(--grey); padding: var(--gap-small) var(--gap-medium); width: calc( 100% + var(--gap-medium) + var(--gap-medium) ); margin-left: calc( -1 * var(--gap-medium) ); font-size: 1.6rem; margin-top: var(--gap-medium); box-shadow: var(--shadow-all) }
.contacts-strip a { font-weight: bold; }

/** forms **/

.form-frame { width: 100%; box-shadow: var(--shadow-all); background: var(--grey-alt); overflow: hidden; }
form label { display: none; }
form input, form textarea, form button { padding: 1rem; margin-bottom: 2rem; height: 4rem; color: var(--black); font-family: var(--font); width: 100%; font-size: 1.6rem; box-shadow: var(--shadow-inset); }
form button { cursor: pointer; }
.form-demo { }
.form-support {  }	
.form-support textarea { height: 16rem; }
.form-support, .form-demo { padding: var(--gap-medium); padding-bottom: 0; background: transparent; }

nav { position: fixed; top: 0; left: 0; width: 100%; height: 6rem; background-color: var(--white-alt); backdrop-filter: blur(.5rem); -webkit-backdrop-filter: blur(.5rem); box-shadow: var(--shadow-bottom); display: grid; place-items: center; z-index: 100;}
nav div { display: flex; flex-direction: row; justify-content: space-between; width: 100%; max-width: var(--width); padding: 0 var(--gap-medium); }
nav menu { display: none; flex-direction: column; align-content: center; justify-content: center;  align-items: center; gap: 2rem; font-size: 1.8rem; width: 100vw; height: calc(100vh - 6rem); position: absolute; top: 6rem; left: 0; background: var(--white-alt); backdrop-filter: blur(.5rem); -webkit-backdrop-filter: blur(.5rem); }
nav li { display: inline-block; }
nav a { display: block; color: var(--green); font-weight: var(--bold); }
nav a:hover, nav a:active, nav a:focus { color: var(--blue); text-decoration: none; }
nav a.logo { height: 4.5rem; width: auto; display: block; }
nav a.logo img { height: 4.5rem; width: auto; display: block; }
nav a.button { text-transform: none; font-size: 1.6rem; }
nav a.button:hover, nav a.button:active, nav a.button:focus { color: var(--white); background: var(--blue); }

.toggle { font-size: 3rem; display: grid !important; height: 4.5rem; place-items: center; color: var(--green); background: transparent; }
.toggle:focus, .toggle:hover, .toggle:active { color: var(--blue); }
.toggle span { display: block; line-height: 4.5rem; }

/*** medium  ***/
@media screen and (min-width:960px) {
	:root {
		--gap-small: 1.5rem;
		--gap-medium: 3rem;
		--gap-large: 4.5rem;
		}
	.page-header { flex-direction: row; justify-content: space-between; text-align: left; padding-top: var(--gap-medium); margin-bottom: var(--gap-medium); }
	header .logo { height: 6rem; display: inline-block;  }
	header h1 { display: inline-block; font-size: 8rem; }
	header h2 { text-align: left; font-size: 2.8rem; }
	header p { margin-bottom: var(--gap-medium); font-size: 2rem; }
	.demo-intro { display: grid; align-items: center; }
	
}
/*** large  ***/
@media screen and (min-width:960px) {
	:root {
		--gap-small: 2rem;
		--gap-medium: 4rem;
		--gap-large: 6rem;	
		--equal: calc( 50% - ( var(--gap-large) / 2 ) );
		}

	h2 { font-size: 4.2rem; margin-bottom: var(--gap-medium); }
	
	#home .contain { padding-top: 8rem; }
	.header-content { display: flex; flex-direction: row; gap: var(--gap-large); margin-top: var(--medium); }
	#home li { font-size: 2rem; margin-bottom: 1rem; }
	.demo-promo { width: 100%; max-width: var(--equal); }
	.demo-promo h3 { font-size: 2rem; margin-bottom: var(--gap-small);  }
	.demo-promo h4 { font-size: 2rem; margin-bottom: var(--gap-small);  }
	.demo-content { flex-direction: row; justify-content: space-between; gap: var(--gap-large);}
	.demo-video { max-width: 100%; height: auto; aspect-ratio: 16/9; margin-bottom: var(--gap-small); }
	.page-intro ul { margin-bottom: var(--gap-small); }
	
	.counter { flex-direction: column; }
	.digits {  }
	.users { letter-spacing: .25rem ; margin-top: 1rem; font-size: 2rem; }
	.digit { margin: .25rem; padding: .5rem; width: 3rem; font-size: 2.4rem; }
	
	#about { }

	.feature { gap: 0; }
	.feature.rl { flex-direction: row; }
	.feature.lr { flex-direction: row-reverse; }	
	.features img { box-shadow: var(--shadow-all); cursor: zoom-in; }	
	.feature-gallery { width: 65%; }
	.feature-details { display: grid; place-items: center; width: 35%;  }
	.feature-gallery.single img {  }
	.feature-gallery.double img { max-width: 65%; }
	.feature-gallery.double img:nth-of-type(1) { float: left; z-index: 5; position: relative; }
	.feature-gallery.double img:nth-of-type(1):hover { z-index: 15; }
	.feature-gallery.double img:nth-of-type(2) { float: right; z-index: 10; position: relative; margin-top: -8rem; }
	.subfeature div { flex-direction: row; }
	.subfeature h4 { font-size: 2rem; }

	#demo { }
	#demo .form { flex-direction: row; gap: var(--gap-large); justify-content: space-between; }
	.demo-form, #demo figure { width: 100%; }
	.tablet { height: 30rem; border: 1.5rem solid var(--black); border-radius: 3rem; box-shadow: var(--shadow-all); margin: 0 auto var(--gap-small) auto; width: auto; margin-bottom: var(--gap-small); }
	.screen { border: 1rem solid var(--black); border-radius: 0.5rem; background: var(--white); width: 100%; height: auto; }
	.tablet img { width: auto; height: 25rem; }
	.demo-brochure .button { margin-top: 0; margin-bottom: 0; }
	
	.contacts-strip { flex-direction: row; justify-content: space-between; font-size: 2rem; }

	#support {  }	
	.support-content { flex-direction: row; gap: var(--gap-large); }
	#support .manual { display: flex; flex-direction: column; gap: var(--gap-small); justify-content: space-between; }
	#support .manual img { height: 38rem; width: auto; max-width: 100%; aspect-ratio: 3/4; margin: 0 auto; display: block; box-shadow: var(--shadow-all); }
	#support .manual p { display: grid; place-items: center; font-size: 1.8rem; margin-bottom: 0; margin-bottom: .4rem; }
	#support .manual div { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: var(--gap-medium); width: 100%; }
	.manual-buttons { margin-top: 0; margin-bottom: 0; }
	.manual-buttons .button { width: 33%; }
	
	.contact-form { }
	.contact-form { width: 100%; }
	.contact-form textarea { height: 16rem; }
	
	nav menu { display: flex; flex-direction: row; align-content: center; justify-content: space-between;  align-items: center; gap: 2rem; font-size: 1.8rem; height: 4.5rem; width: auto; position: sticky; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
	.toggle { display: none !important; }
	
}

#hgallery { display:block; content:''; position:fixed; top:0; left:0; width:100%; height:100vh; background-color: var(--black-alt); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); visibility: hidden; display: -webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: center; -ms-flex-pack:center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0;-webkit-transition: .3s; transition: .3s; z-index:99999; } 
.hg-disable-scrolling { overflow: hidden!important } 
#hg-bg{ position:absolute;top:0;left:0;width:100%;height:100vh;z-index:1 } 
#hg-bg::after { content:'';position:absolute;display:block;top:20px;right:20px;width:30px;height:30px;background-image:url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xOSA2LjQxTDE3LjU5IDUgMTIgMTAuNTkgNi40MSA1IDUgNi40MSAxMC41OSAxMiA1IDE3LjU5IDYuNDEgMTkgMTIgMTMuNDEgMTcuNTkgMTkgMTkgMTcuNTkgMTMuNDEgMTJ6Ii8+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPg==);background-position:center;background-size:contain;cursor:pointer;opacity:.8}#hg-bg::after:hover{background-color:var(--white)}#hgallery.open{visibility:visible!important;opacity:1 } 
#hg-pic-cont{max-width:calc(70% - 40px);max-height:90vh;cursor:default;z-index:12;position:relative;background-color:var(--white);-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:scale(1);transform:scale(1)}#hg-pic-cont.hg-transition{-webkit-transform:scale(.1);transform:scale(.1)}
#hg-subtext{color:#ddd;font-size:14px;position:absolute;display:block;left:5px;top:calc(100% + 6px)}
#hg-howmany{color:#aaa;font-size:14px;position:absolute;display:block;right:5px;bottom:-20px}
#hg-pic{width:auto;height:auto;min-height:100px;min-width:100px;max-width:100%;max-height:90vh;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;cursor:default;-o-object-fit:contain;object-fit:contain;margin:0}
#hg-pic:hover{-webkit-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}
#hgallery button{position:absolute;display:block;margin:auto 0;width:60px;height:60px;z-index:11;cursor:pointer;background-color:transparent;border:0;outline:0;opacity:0;-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s;visibility:hidden}#hgallery button img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}
#hgallery.open button{visibility:visible;opacity:.7}
#hgallery button:hover{opacity:1}
#hgallery button#hg-prev{left:10px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}
#hgallery button#hg-prev:active{left:7px}
#hgallery button#hg-next{right:10px}
#hgallery button#hg-next:active{right:7px}
#hgallery #hg-next-onpic,#hgallery #hg-prev-onpic{position:absolute;top:0;left:0;width:34%;height:100%;cursor:pointer}
#hgallery #hg-next-onpic{right:0;left:auto;width:66%}
.hg-unvisible{opacity:0!important;visibility:hidden}
@media (max-width:1100px){
		#hg-pic-cont { max-width:calc(100% - 40px); }
	}