@font-face {
	font-family: Kanit;
	src: url('fonts/Kanit-Regular.ttf');
	font-weight: normal;
    font-display: swap;
}	  
 
@font-face {
	font-family: Kanit;
	src: url('fonts/Kanit-Bold.ttf');
	font-weight: bold;
    font-display: swap;
}	
@font-face {
	font-family: Kanit;
	src: url('fonts/Kanit-Black.ttf');
	font-weight: 800;
    font-display: swap;
}	 
    

    
        
*,
*::after,
*::before {
	box-sizing: border-box;
    font-family: Kanit, sans-serif;
}

:root {
	font-size: 18px;
}

    pre , pre span{
    /* Keyword values */
    white-space: normal;
    white-space: nowrap;
    white-space: pre;
    white-space: pre-wrap;
    white-space: pre-line;
    white-space: break-spaces;
    font-family: Kanit, sans-serif;
    }   
    pre strong {
        font-weight: 400;
    }
    .StrongAwy {
        font-size: 120%;
    }
    
body {
	margin: 0;
	--color-text: #4c4c4c;
	--color-bg: #f5f7fa;
	--color-link: #1c1c1c;
	--color-link-hover: #fff;
	--color-frame: #1c1c1c;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: Kanit, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

    
    

    
*::-webkit-scrollbar {
  width: 10px;
  background-color: #D1D1D1;
  transition-duration: 100ms;
    z-index: 9999999 ;
}

*::-webkit-scrollbar-thumb {
  background-color: #313131;
  
}

	
	
*::-webkit-scrollbar-thumb:hover {
  background-color: #40486A;
	
}

*::-webkit-scrollbar-thumb:active {
  background-color: #4F61A7;
}
  
    
@media only screen and (hover: none) and (pointer: coarse){

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge add Firefox */
* {
  -ms-overflow-style: none;
  scrollbar-width: none; /* Firefox */
}

    #mouse-circle {
        display: none;
    }    
    
    
}    
    
    
    
/* Page Loader */
.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 1000;
}

.js .loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js .loading::after {
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;

}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	position: relative;
}

a::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	background: currentColor;
	left: 0;
	bottom: -0%;
	transform: scale3d(0,1,1);
	opacity: 0;
	transform-origin: 0% 50%;
	transition: transform 0.3s, opacity 0s 0.3s;
}

a:hover::after {
	opacity: 1;
	transition: transform 0.3s;
	transform: scale3d(1,1,1);
}

a:hover {
	color: var(--color-link-hover);
	outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
    /* Provide a fallback style for browsers
	 that don't support :focus-visible */
    outline: none;
    background-color: rgba(255,255,255,0.00);
    border-color: rgba(255,255,255,0.00);
}

a:focus:not(:focus-visible) {
    /* Remove the focus indicator on mouse-focus for browsers
	 that do support :focus-visible */
    background-color: rgba(255,255,255,0.00);
}

a:focus-visible {
	/* Draw a very noticeable focus style for
	 keyboard-focus on browsers that do support
	 :focus-visible */
	outline: none;
	background-color: rgba(255,255,255,0.00);
}

    
    main {
    transition: 300ms;
    }    
    
.frame {
	padding: 3rem 5vw;
	text-align: center;
	position: relative;
	z-index: 1000;
	color: var(--color-frame);
    transition: 300ms;
    top: 0px;
}

.frame a {
	color: var(--color-frame);
}

.frame__title {
    font-size: 2rem;
    margin: 0 0 1rem;
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: 0rem;
    color: rgba(0,0,0,1.00);
}

.frame__title span {
    font-weight: normal;
    font-size: 0.9rem;
    display: block;
    letter-spacing: 0rem;
    margin-left: 1px;
}

.frame__links {
    display: inline;
    color: rgba(255,255,255,1.00);
}

.frame__links a:not(:last-child),
.frame__demos a:not(:last-child) {
	margin-right: 1rem;
}

.frame__demos {
	margin: 1rem 0;
}

a.frame__demo--current,
a.frame__demo--current:hover {
	color: var(--color-text);
}

    
    
.slideshow {
	width: 100vw;
	height: calc(100vh - 13rem);
	position: relative;
	overflow: hidden;
    transition: 300ms;

}
    .slideshow.Up {
    transform: translateY(-100vh); 
    opacity: 0;
    }

.slide {
	margin: 0;
    overflow-y: auto;
    padding-bottom: 30%;
}

.slide,
.slide__img-wrap,
.slide__img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
    .slide__img-wrap {
     position: fixed;   
    }
.slide {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 25vh;

}

.js .slide {
	opacity: 0;
	pointer-events: none;
}

.js .slide--current {
	opacity: 1;
	pointer-events: auto;
}
    
    
    
    
    
    
    
    
    

.slide__img-wrap {
will-change: transform;
overflow: hidden;  
transition: 300ms;
}

 
.slide--current .slide__img-wrap{
animation: IntroAnim 1600ms ease alternate forwards;
}    
.slide--Closed .slide__img-wrap {
animation: IntroAnimClose 1600ms ease alternate forwards;     
}    
     
@keyframes IntroAnim {
    0% {
    clip-path: circle(10% at 70% 110%);  
    }
    50% {
    clip-path: circle(10% at 70% 50%);    
    }
    100% {
    clip-path: circle(50% at 70% 50%);  
    }    
}
    
@keyframes IntroAnimClose {
    0% {
    clip-path: circle(50% at 70% 50%);  
    }       

    50% {
    clip-path: circle(10% at 70% 50%);    
    }
    100% {
    clip-path: circle(10% at 70% -20%);  
    }
}
    
        
    
.slide__img {
    background-size: cover;
    will-change: transform;
    -webkit-backspace-visibility: hidden;
    background-position: center center;
}

.slide__caption {
	position: relative;
	padding: 0 10vw;
	cursor: default;
	width: 100%;
}

    
    
    
    
    
    
    
    
    
    
    
    
.slides__caption-headline {
    font-size: 6.5vw;
    font-size: clamp(2rem,6.5vw,5rem);
    line-height: 0.9;
    margin: 0;
    text-transform: uppercase;
    font-weight: 800;
}
    
.text-row {
    position: relative;
    overflow: hidden;
    display: block;
    white-space: nowrap;
    mix-blend-mode: multiply;
}
    
.text-row.Smally {
    font-size: clamp(1.5rem,2.5vw,1rem);
    white-space: pre-wrap;
    }

    
    

    .text-row.Paragraphy {
    font-size: 18px;
    width: 50%;
    /* Keyword values */
    white-space: normal;
    white-space: nowrap;
    white-space: pre;
    white-space: pre-wrap;
    white-space: pre-line;
    white-space: break-spaces;
    /* Global values */
    white-space: inherit;
    white-space: initial;
    white-space: revert;
    white-space: unset;
    font-weight: normal;
    color: rgba(0,0,0,1.00);
    text-transform: capitalize;
    margin-left: 0.2rem;
    line-height: 1.5;
    }    
    

    
    
    
    
.text-row > span {
    display: block;
    position: relative;
    padding: 0rem 0;
transform: translateY(120px);   
    white-space: pre-wrap;
}

.slide--Closed .text-row > span {
transform: translateY(0px);  
    }
    
.slide--current .text-row > span{
animation: IntroTextAnim 800ms ease alternate forwards 800ms;
}    
    
.slide--Closed .text-row > span{
animation: IntroTextCloseAnim 800ms ease alternate forwards 800ms;   
}    
 

@keyframes IntroTextAnim {
    0% {
transform: translateY(120px);     
    }
    100% {
transform: translateY(0px);  
    }    
}    
  
@keyframes IntroTextCloseAnim {
    0% {
transform: translateY(0px);  
    }  
    100% {
transform: translateY(120px);     
    }
  
}
  
.slide--current .text-row.Paragraphy > span{
transform: translateY(120%);
}
    
.slide--current .text-row.Paragraphy > span{
animation: IntroParagraphyAnim 800ms ease alternate forwards 800ms;
}    
@keyframes IntroParagraphyAnim {
    0% {
transform: translateY(120%);     
    }
    100% {
transform: translateY(0px);  
    }    
} 
    
.slide--Closed .text-row.Paragraphy > span{
transform: translateY(0%);
}
    
.slide--Closed .text-row.Paragraphy > span{
animation: IntroParagraphyClosedAnim 800ms ease alternate forwards 800ms;
}    
@keyframes IntroParagraphyClosedAnim {

    0% {
transform: translateY(0px);  
    }
    100% {
transform: translateY(100%);     
    }    
}  
    
    
  
    
.BlueC {
    color: #3a73b4!important;    
    }
.DarkBlueC {
    color: #0E3F77!important;
}    
.GreenC {
    color: #48a74b!important;    
    }    
    .BlackC {

    color: rgba(22,22,22,1.00)!important;
    }


    
    
    
.slides__caption-link {
    display: inline-block;
    margin-top: 1rem;
    text-indent: 0.2vw;
    font-size: 1.75rem;
    font-weight: 300;
    font-size: clamp(1rem, 5vw, 1.75rem);
    overflow: hidden;
    cursor: pointer;
    text-shadow: 1px 1px 1px rgba(255,255,255,1.00);
}
.slides__caption-link.Smaller{
    font-size: clamp(1rem, 5vw, 1rem);
    margin-right: 20px;
}
.slides__caption-link:hover {
    color: var(--color-text)
}
    
.slides__caption-link span {
display: inline-block;
transform: translateX(-200%);      
}

.slide--Closed .slides__caption-link span {
transform: translateX(0%);      
}
    
.slide--current .slides__caption-link span {
animation: IntroLinkAnim 800ms ease alternate forwards 800ms;      
    }
.slide--Closed .slides__caption-link span {
animation: IntroLinkCloseAnim 800ms ease alternate forwards 800ms;      
    } 
    
@keyframes IntroLinkAnim {
    0% {
transform: translateX(-200%);    
    }
    100% {
transform: translateX(0px);  
    }    
}       
@keyframes IntroLinkCloseAnim {

    0% {
transform: translateX(0px);  
    }
    100% {
transform: translateX(-200%);     
    }    
}       
    
    
    
    .PDFViewLink {
    background-image: url(Imgs/Icons/PDF.png);
    background-repeat: no-repeat;
    background-position: -20px center;
    background-size: auto 0px;
    padding-left: 20px;
    color: #2B2B2B;
    font-size: 80%!Important;
    margin-left: -1px;    
    }
    

    
.slide--Closed .PDFViewLink {
background-size: auto 19px; 
background-position: 5px center;
}
    
.slide--current .PDFViewLink {
animation: PDFViewLinkAnim 800ms ease alternate forwards 800ms;      
    }
.slide--Closed .PDFViewLink {
animation: PDFViewLinkCloseAnim 800ms ease alternate forwards 800ms;      
    } 
    
@keyframes PDFViewLinkAnim {
    0% {
background-size: auto 0px;
background-position: -20px center;        
    }
    100% {
background-size: auto 19px;
background-position: 5px center; 
    }    
}       
@keyframes PDFViewLinkCloseAnim {

    0% {
background-size: auto 19px;
background-position: 5px center;
    }
    100% {
background-size: auto 0px;
background-position: -20px center;
    }    
}     
    
    
    
    

.slides-nav {
	display: flex;
	align-items: center;
	justify-content: center;
    transition-duration: 400ms;
    display: flex;
    justify-content: center;
    margin-left: auto;
    align-items: flex-end;
    position: fixed;
    bottom: 0px;
    right: 0px;
    transform-origin: right bottom;
    padding-right: 50px;
    padding-bottom: 25px;    
    user-select: none;
}
    
  
    

.slides-nav__button {
    display: block;
    cursor: pointer;
    background: none;
    border: 0;
    width: 55px;
    height: 24px;
    padding: 0;
    margin-top: -20px;
    margin-bottom: 20px;
    margin-right: -2.25rem;
    margin-left: 3.75rem;

    -webkit-appearance: none;
    -moz-appearance: none;
    transition-duration: 400ms;
}
.slides-nav__button:hover {
    transform: scale(1.2)
    
}
.slides-nav.SliderTimerSS .slides-nav__button {
        transform: scale(0);
        pointer-events: none;
        
}     
 .slides-nav.SliderTimerSS .IntroDot {
opacity: 0.5;
pointer-events: none;
}  
 .slides-nav.SliderTimerSS .IntroDot.HideNow {
transform: scale(0)!important;
}    
    
.slides-nav__button:focus {
	outline: none;
}

.slides-nav svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: #000;
    
}

.slides-nav__index {
	margin-left: 2rem;
	white-space: nowrap;
	color: #000;
	border: 0px solid var(--color-text);
	border-radius: 50%;
	padding: 1rem 1.5rem;
	text-align: center;
	display: flex;
	align-items: center;
}

.slides-nav__index > span {
	width: 2rem;
}

.slides-nav__index-current {
	position: relative;
	overflow: hidden;
}

.slides-nav__index-current span {
	display: inline-block;
}

 
    
    

     .HeaderLogo {
    width: auto;
    height: auto;
    max-height: 40px;
    display: inline-block;
    }    
    
    .SliderBar {
    width: 100%;
    height: 4px;
    position: fixed;
    bottom: -0px;
    left: 0px;
    right: 0px;
    display: block;
    }
    
    .SliderBarCurrent {
    width: 0%;
    background-color: rgba(0,0,0,0.81);
    height: 100%;
    display: block;
    transition-duration: 400ms;    
          
    }
    .SliderBarCurrent.Start {
    animation: SliderBarCurrent 10000ms infinite ;   
    }
    
@keyframes SliderBarCurrent {
    0% {
width:0%;     
    }
    100% {
width:100%; 
    }    
}  
       
#mouse-circle {
    position: fixed;
    width: 64px;
    height: 64px;
    margin-top: -32px;
    margin-right: -32px;
    margin-left: -32px;
    margin-bottom: -32px;
    border: 1px solid #000000;
    border-radius: 50%;
    pointer-events: none !important;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0);
    z-index: 9999;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: 200ms ease ;
    opacity: 0.9;
}
    
    
    
    
    
    
    
    
    
.PreViewDiv {
    position: fixed;
    background-color: #e9f7ff;
    width: 100%;
    height: 100%;
    top: 100%;
    padding-top: 20vh;
    padding-right: 10vw;
    padding-left: 10vw;
    left: 0;
    overflow: hidden;
    z-index: 99;
    overflow-y: auto;
    transition: 600ms ease;
    pointer-events: none;
    transform-origin: bottom;
    opacity: 0;
    background-size: 0px auto;
    background-position: calc(100% + 100%) 20vh;
    background-repeat: no-repeat;
    padding-bottom: 20vh;
    }

    .PreViewDiv.Active {
  opacity: 1;
  top: 0%;      
  pointer-events: auto;
    }    

    
    .SecondPreviewStyle {
    background-position: 55vw calc(100% + 10vw);
    background-size: 55vw auto;
    background-color: #F5F7F9;
    }
    
    .SecondPreviewStyle .PreviewHeading { 
    margin-left: 0vw;
    }

    .SecondPreviewStyle .PreviewPre {
        width: 60%;
    }
    
    
    .PreviewItem {
    display: block;
    transition-duration: 200ms;
    transform: translateY(0vh);
    }
    .PreviewItem.PreviewItemHide {
    opacity: 0;
    position: absolute;
    top: 100vh;
        
    }
    
    
    .PreviewImg {
    background-repeat: no-repeat;
    background-position: center center;
    width: 50%;
    height: 80vh;
    display: inline-block;
    background-image: url(Imgs/Icons/Loading.gif);
    }
    .PreviewTexts {
    display: inline-block;
    vertical-align: top;
    padding-left: 2vw;
    }
    .PreviewItem[About="ContactUs"] .PreviewTexts{
    padding-left: 0vw;    
    }
    .PreviewItem[About="ContactUs"] .PreviewPre{
    width:100%!important;   
    }
    .PreviewHeading {
    font-size: clamp(1rem,3.5vw,3rem);
    display: inline-block;
    width: auto;
    margin-left: -6vw;
    vertical-align: top;
    text-transform: uppercase;
    line-height: 0.9;
    mix-blend-mode: multiply;
    max-width: 100%;
    transition-duration: 600ms;    
    }
    .PreviewHeading span{
    display: block;
    font-size: clamp(1.5rem,4.5vw,4rem);    
    }
    .PreviewPre {
    width: 28vw;
    text-transform: capitalize;
    transition-duration: 600ms;
    line-height: 30px;
    }
    .PreviewBackButton {
    position: relative;
    top: -44px;
    cursor: pointer;
    transition-duration: 300ms;
    padding: 5px;
    left: 0px;
    }
    .PreviewBackButton:hover {
    left: -8px;
    }
    .PreviewBackButton svg{
    height: 20px;
    width: 50px;
    margin-top: -5px;
    display: inline-block;
    vertical-align: middle;
    }    
    
    

    
    
    
    
    
    
    
    
    
    
    
    .IntroDotsDiv {
    display: inline-block; 
    transform-origin: center;
     transition: 200ms;   
    }
    .IntroDot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 3px solid rgba(0,0,0,1.00);
    border-radius: 50%;
    background-color: rgba(0,0,0,0.50);
    -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.09);
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.09);
    mix-blend-mode: multiply;
    cursor: pointer;
    transition-duration: 300ms;
    pointer-events: auto;
    margin-left: 4px;        
    }
    .IntroDot:hover {
        transform: scale(1.1)
    }
    .IntroDot.Active {
    background-color: rgba(255,255,255,1.00);
    }
    
    
    

    
    
    
    
    
    
    
    
    .MenuDiv {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    top: -100%;
    z-index: 999;
    background-color: #e9f7ff;
    text-align: left;
    transition: 800ms ease; 
    pointer-events: none;
    }
    .MenuDiv.Active {
    top: 0%; 
    pointer-events: auto;    
    }
    .LinksDiv {
    width: 50%;
    display: inline-block;
    height: 100%;
    position: relative;
    }
    
    .MenuLink {
    height: 33.333%;
    margin: 0px;
    padding: 0px;
    width: 100%;
    display: block;
    text-align: center;
    background-color: #e9f7ff;
    color: #3a73b4;
    font-weight: bolder;
    font-size: 28px;
    transition: 800ms ease;
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
    left: -100%;
    }
    
    .MenuLink.Active{
    left: 0px;
    position: relative;        
    }
    .MenuLink.Selected{
    background-color: rgba(41,112,187,1.00);
    color: rgba(255,255,255,1.00);     
    }
    .MenuLink:hover {
    background-color: rgba(62,129,199,1.00);
    color: rgba(255,255,255,1.00);
    }
    
    
    .MenuLink span{
    display: inline-block;
    text-align: center;
    width: 100%;
    line-height: 33.3vh;    
    }
    
    .MenuContactsDiv {
    display: inline-block;
    padding-top: 88px;
    padding-right: 88px;
    padding-left: 88px;
    padding-bottom: 88px;
    width: calc(50% - 10px);
    color: #3a73b4;
    vertical-align: top;
    position: relative;
    transform: translateX(-50%);
    transition: 600ms ease;
    opacity: 0;
    height: 100%;        
    }
    .MenuContactsDiv.Active {
    transform: translateX(0%) ;       
    opacity:1;    
    }
    .MenuContactsDiv h4{
    text-transform: uppercase;
    font-weight: bolder;
    width: auto;
    display: inline-block;
    font-size: 55px;
    line-height: 1;
    margin-left: -4px;
    margin-bottom: 0px;
    }
    .MenuContactsDiv h4 span{
    font-size: 22px;
    display: block;
    padding-left: 4px;
    }
    
    
    #LazyLoaderImg {
    padding: 0px;
    margin: 0px;
    position: fixed;
        opacity: 0;
        pointer-events: none;
    }    
    
    
    

    .ContactForm {
        width:100%;
    }
    .CFDiv {
    width: auto;
    display: inline-block;
    margin-right: 10px;
    vertical-align: top;
    }
   
    .CFInput {
    border-radius: 16px;
    padding-top: 10px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
    background-color: rgba(255,255,255,1.00);
    color: rgba(23,61,128,1.00);
    border: 1px solid rgba(255,255,255,1.00);
    width: 300px;
    height: 50px;
    margin-bottom: 10px;
    display: block;
    }
    .CFInput.Warning {
    border-color: rgba(215,17,20,1.00);        
    }
    .CFSend {
    padding-top: 10px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
    background-color: #3a73b4;
    border-radius: 16px;
    width: 300px;
    height: 50px;
    border-style: none;
    color: rgba(255,255,255,1.00);
    text-align: left;
    cursor: pointer;
    transition: 200ms;
    -webkit-box-shadow: inset 2px -2px rgba(0,18,46,0.30);
    box-shadow: inset 2px -2px rgba(0,18,46,0.30);
    transform: translateX(1px) translateY(-1px);
    position: relative;
    display: block;
    cursor: pointer;
    }
    .CFSend .SendMsg{
    font-size: 14px!important;  
    }
    .CFSendIcon {
    display: block;
    position: absolute;
    top: -18px;
    right: -10px;
    width: 60px;
    height: 60px;
    background-image: url(Imgs/Icons/Send.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: rgba(255,255,255,0.00);
    font-size: 0px;
    transform: rotate(15deg);
    transition: 300ms;    
    }
    
    .CFSend:hover {
    transform: translateX(-1px) translateY(1px);
    -webkit-box-shadow: inset 0px 0px rgba(0,18,46,0.30);
    box-shadow: inset 0px 0px rgba(0,18,46,0.30);
    }
    .CFSend:hover .CFSendIcon{
    transform: rotate(10deg);   
    }
    
    textarea.CFInput {
    height: 170px;
    margin-bottom: 10px;
    }
    

    #GoogleMap {
    width: 100%;
    display: inline-block;
    height: 450px;
    border-radius: 16px;
    margin-top: 40px;
    -webkit-box-shadow: -2px 2px rgba(0,51,85,0.10);
    box-shadow: -2px 2px rgba(0,51,85,0.10);
    }    
    
	
	.SocialButton {
    display: inline-block;
    width: 30px;
    /* border-radius: 50%; */
    margin-top: 0px;
    margin-right: 8px;
    margin-left: 8px;
    margin-bottom: 8px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 25px auto;
    cursor: pointer;
    transition-duration: 200ms;
    transform: scale(0);
    font-size: 0px;
    color: rgba(255,255,255,0.00);
    vertical-align: middle;
	}	
    .SocialButton.Loading {
    background-image: none!important;
    animation: none!important;
    transition:none!important;	    
    }
		.FaceBookBTN:not(.Loading) {
	background-image: url(Imgs/Icons/facebook.png);
	margin-left: -10px;
	margin-right: -4px;
	
	animation: Third 100ms linear 1000ms forwards;		
		}	
		.LinkedInBTN:not(.Loading) {
	background-image: url(Imgs/Icons/LinkedIn.png);	
	animation: Third 100ms linear 1200ms forwards;
    margin-right: 0px;        
		}	    
		.TwitterBTN:not(.Loading) {
	background-image: url(Imgs/Icons/twitterNew2.png);
	animation: Third 100ms linear 1400ms forwards;		
		}	

		
	.SocialButton:hover {
		transform: scale(1.1)!important;
		}    

    	.SocialButton:focus {
		background-size: 30px auto;
         background-repeat: no-repeat; 
        background-position: center center;    
		}  
    
    
/******************/		
 @keyframes Third {
 0% {
 transform:scale(0);
}
 100% {
 transform:scale(1);
}
} 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
@media screen and (min-width: 53em) {
    

    .text-row.Mediumy {
    font-size: clamp(2.5rem,3.5vw,2rem);
    white-space: pre-wrap;
    }   
    .JustifyPre {
    text-align: justify;text-justify: inter-word;    
    }
    
    
	.frame {
		position: fixed;
		text-align: left;
		z-index: 100;
		top: 0;
		left: 0;
		display: grid;
		align-content: space-between;
		width: 100%;
		max-width: none;
		height: 100vh;
		padding: 2rem 3.5rem;
		pointer-events: none;
		grid-template-columns: 25% 50% 25%;
		grid-template-rows: auto auto auto;
		grid-template-areas: 'title links info'
							'... ... ...'
							'demos demos nav';
	}

	.frame__demos {
		margin: 0;
		grid-area: demos;
		justify-self: start;
		align-self: end;
	}
	.frame__links {
		grid-area: links;
		padding: 0;
		justify-self: center;
	}

	.slides-nav {
		grid-area: nav;
		justify-self: end;
		align-self: end;
	}
	.frame a,
	.frame button {
		pointer-events: auto;
	}
	.slideshow {
		height: 100vh;
	}
	.slides-nav {
		margin-bottom: -1rem;
	}
	.slides-nav__index {
		margin-right: -2rem;
	}
	.slideshow {
		background: var(--color-bg);
	}

}
        
 

    
@media screen and (max-height: 1000px) { 
    
    
    .PreViewDiv {
        padding-top: 25vh;
    }
    
    
    }
@media screen and (max-height: 600px) { 
    
    
    .PreViewDiv {
        padding-top: 50vh;
    }
    
    
    }
    

    
 
@media screen and (min-width: 1201px) {  /* For Footer */ 
    .PreviewItem .MenuContactsDiv {
        display: none!important;
    }
    footer.forMobile {
        display: none;
    }
}
    
@media screen and (max-width: 1200px) {  
    
    .LinksDiv {
        width: 100%;
        height: 100%
    }
    
    .MenuContactsDiv {
        padding:18px;
        padding-top: 32px;
    }    
    
    .PreviewPre {
        width: 36vw;
    }
    

    .PreviewItem .MenuContactsDiv {
        transform: none!important;
        opacity: 1!important;
    }
    .MenuContactsDiv.forPC {
     display: none;
    }
    
    
    
}
    
@media screen and (max-width: 1200px) and (min-width: 701px) { 
    
    .CFDiv {
        width: calc(55% - 10px);
        margin: 0px;
    }  
    
    .CFDiv:nth-of-type(2) {
    float: right;
    margin-right: 0px;
    text-align: right;
    width:calc(45% - 10px)    
    }
    .CFDiv:nth-of-type(2) .CFInput {
        margin-right: 0px;
        width: 100%
    }
    .CFDiv:nth-of-type(3) {
    margin-right: 0px;
    text-align: right;
    width: 100%;
    margin-top: 20px;
    }
    textarea.CFInput {
        width: 100%;
        margin-right: 0px;
    }
    .CFSend {
        width: 100%;
    }
}
    
    
@media screen and (max-width: 52.999em) {
    
   
    .MenuDiv {
     z-index: 1000;   
    }

    
    .text-row:last-of-type {
        margin-bottom: 20px;
    }
    
    .PDFViewLink { 
        margin-left: -5px;
    }
    

    .frame {
    padding:0px;
    text-align: center;
    position: absolute;
    z-index: 1000;
    width: 100%;
    }
    .frame__title {
    margin: 0px;
    position: absolute;
    top: 10px;
    left: 3vw;
    transform: scale(0.7);
    padding: 20px;
    transform-origin: left top;
    }   
    .slide__caption {
    padding: 0 6vw;   
    }
    
.MenuButton {
    position: fixed;
    top: 10px;
    right: 28px;
    transform: scale(0.9);

    transform-origin: right top;
    }    
.slideshow {
    width: 100vw;
    height: calc(100vh - 0em);
    position: relative;
    overflow: hidden;
    transition: 600ms ease;
    padding-top: 9em;

}
.slides-nav {
    display: flex;
    justify-content: center;
    transition-duration: 400ms;
    margin-left: auto;
    align-items: flex-end;
    position: fixed;
    bottom: 0px;
    right: 0px;
    transform: scale(0.7);
    transform-origin: right bottom;
    flex-direction: column;
    padding-right: 20px;
    padding-bottom: 0px;
}
    .slides-nav__button {
    margin-right: 25px;
    margin-top: 10px;  
    margin-bottom: 0px;    
    }    

    
.slide {
    padding-top: 120px;
    overflow-y: auto;
    padding-bottom: 80px;

    }
    .text-row.Paragraphy {
        font-size: 16px;
        width: 60%;
    }
    .slides__caption-link {
    margin-top: 0px;
    font-size: 16px;
    margin-right: 16px;
    }  
    .slide__img-wrap {
     position: fixed;
    }

@keyframes IntroAnim {
    0% {
    clip-path: circle(10% at 90% 110%);  
    }
    50% {
    clip-path: circle(10% at 90% 50%);    
    }
    100% {
    clip-path: circle(55vh at 90% 50%);  
    }    
} 
@keyframes IntroAnimClose {
    0% {
    clip-path: circle(55vh at 90% 50%);  
    }       

    50% {
    clip-path: circle(10% at 90% 50%);    
    }
    100% {
    clip-path: circle(10% at 90% -20%);  
    }
}    
    
    
    
    .SecondPreviewStyle .PreviewPre {
        width: 80%;
        font-size: 16px;
    }    
    

    .MenuContactsDiv {
        width:calc(100% - 0px)
    }
    
    
    .PreviewPre,.PreviewImg {
        width: 100%;
    } 
    .PreviewHeading {
        margin-left: 0px;
    }
    .PreviewHeading br{
        display: none;
    }
    
    
    }     
    
    
    
@media screen and (max-width: 700px) {  
     .MenuContactsDiv {
        width:calc(100% - 0px)
    }   
    
    .CFDiv {
        width: calc(100% - 0px);
        margin: 0px;
    }    
    .CFInput,.CFSend {
        width: 100%;
        display: inline-block;
    }
    
    
    }
    
@media screen and (max-width: 600px) {   
    


.text-row.Paragraphy {
    font-size: 16px;
    width: 80%;
}    
.BetterWater {
    font-size: 55px;
}
.slides__caption-link {
   /* display: block;*/
}
    
@keyframes IntroAnim {
    0% {
    clip-path: circle(10% at 100% 110%);  
    }
    50% {
    clip-path: circle(10% at 100% 50%);    
    }
    100% {
    clip-path: circle(50% at 100% 60%);  
    }    
} 
@keyframes IntroAnimClose {
    0% {
    clip-path: circle(50% at 100% 60%);  
    }       

    50% {
    clip-path: circle(10% at 100% 50%);    
    }
    100% {
    clip-path: circle(10% at 100% -20%);  
    }
} 

    .SecondPreviewStyle .PreviewPre {
        width: 100%
    }    
    .PreViewDiv.Active {
    padding-bottom: 30vh;
    padding-top: 25vh;
    padding-right: 7.2vw;
    padding-left: 7.2vw;
    }    
    
    }
    
 @media screen and (max-width: 500px) {      
    

     
.BetterWater {
    font-size: 40px;
    padding: 0px!Important;
}

    }
 @media screen and (max-width: 400px) {      
    
.BetterWater {
    font-size: 38px;
    padding: 0px!Important;
}
    
    
    }
    
  
    .GoogleMpasA {
    display: block;
    width: 80px;
    height: 50px;
    background-image: url(Imgs/Icons/Google-Maps.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    /* margin-left: 25px; */
    margin-top: -30px;
    font-size: 0x;
    color: rgba(0,0,0,0.00);
    transition: 200ms;    
    }  
    .GoogleMpasA:hover,.GoogleMpasA:focus {
    font-size: 0x!important;
    color: rgba(0,0,0,0.00)!important;
    background-image: url(Imgs/Icons/Google-Maps.png)!important;   
    transform: scale(1.1);
    background-repeat: no-repeat!important; 
    background-size: contain!important; 
    background-position: center center!important;    
    }
    .SeeAlso {
    cursor: pointer;
    }
    .SeeAlso.Activated {
    pointer-events: none;
    color: currentColor;
    font-weight: bold;
    text-decoration: underline;
    }    
    
    
    
    .SeeAlso.PDFViewLink {
    background-image: url(Imgs/Icons/PDF.webp);
    background-repeat: no-repeat;
    background-position: 0px top;
    background-size: auto 20px;
    padding-left: 25px;
    color: #2B2B2B;
    font-size: 100%!Important;
    margin-left: 0px;   
    }
    .SeeAlso.PDFViewLink:hover {
        color: #17477A;
    }
    
    .ToChooseLi {
    text-align: left;
    list-style: none;
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 10px;
    color: #000;
    margin-right: 20px;
    transition-duration: 200ms; 
    cursor: pointer;
    transform-origin: left;
    }
    .ToChooseLi:hover {
        transform: scale(1.05)
    }
    .ToChooseLi::before {
    content: "";
    display: inline-block;	
    width: 40px;
    height: 40px;
    border: none;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: -3px;
    background-size: contain;
    background-color: #FFF;
    }
    .ToChooseLi.Active {
    color: #0050A6;
    }
    .ToChooseLi.Active::before {
    	background-image: url('Imgs/Icons/True.png');
    	background-color: none;
    }
    
    .ContactsData,.ContactsData a {
        color: #3a73b4!important;
    }    
    .ContactsData a:hover{
        color: #3a73b4!important;
    }
    
    
    
@media (any-pointer: coarse) {
    .IntroDot {
    width: 28px;
    height: 28px;
    margin-left: 5px;
    margin-right: 5px;
    border-size:1px;    
    }    
}    
    
    
    footer {
    width: 100%;
    padding-top: 20px;
    margin-top: 50px;
    }
    footer p{
    width: 100%;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    }
    
    footer p a:hover{
    color: rgba(16,105,211,1.00);
    }    
    
    
    footer.forPC {
    position: absolute;
    bottom: 155px;
    }
    
    footer.forPC p {
    text-align: left;
    color: rgba(0,0,0,1.00);
    }