@charset "UTF-8";
/* CSS Document */

		/* 							*/
		/* SLIDER                   */
		/* 							*/
		
			section.component[data-component="slider"] { position: relative; }
			.tpl-starpage section.component[data-component="slider"] {
				margin-top: -85px;
			} 
			
			
			/* layers */

			#slider                           { z-index: 100; }
			#slider .slider-wrapper           { z-index: 200; }
			#slider .side-buttons             { z-index: 100; }			
			#slider .navigator                { z-index: 100; }

			#slider.main {
				min-height: 80vh;
				position: relative;
			}
			@media screen and (min-width: 0px) and (max-width: 959px) { 
				#slider.main {
					min-height: 75vh;
				}
			}
			#slider.testimonials {
				min-height: 200px;
				position: relative;
				margin: 15px 0 15px 0;
				outline: 0px solid red;
			}
			
			
			#slider .backround {
				position: absolute;
				z-index: 100;
				left: 0; top: 0; right: 0; bottom: 0;
				background-image:url("../../images/background/background.webp");
				background-repeat:no-repeat;
				background-size: cover;
				width: 100%;
			}
			#slider .slider-wrapper {
				overflow: hidden;
			}
			#slider.main .slider-wrapper {
				position: absolute;
				width: 100vw;
				top: 100px;
				height: calc(100% - 100px);
			}
			@media screen and (min-width: 0px) and (max-width: 959px) { 
				#slider.main .slider-wrapper {
					top: 10px;
					height: calc(100% - 10px);
				}
			}
			#slider.testimonials .slider-wrapper {
				padding-bottom: 5px;
			}
			#slider .scroller {
				white-space: nowrap;
				height: calc(100% + 0px);
				will-change: transform;
			}
			section.component[data-component="slider"].auto-advance #slider .scroller { }
			section.component[data-component="slider"].moving       #slider .scroller { transition: transform 0.6s ease; }
			
			#slider ul {
				display: block;
				font-size: 0; line-height: 0;
				margin: 0; padding: 0;
				height: calc(100% + 0px);
			}
			#slider ul li {
				display: inline-block;
				vertical-align: top;
				list-style: none;
				white-space: normal;
				height: calc(100% + 0px);
				margin: 0; padding: 0; 
			}
			#slider ul li .contents {
				position: relative;
				left: 50%;
				transform:translateX(-50%);
				height: calc(100% + 0px);
				outline: 0px solid red;
			}
			
			/* Wrapper sizes */
			
				section.component[data-component="slider"][data-slides="2" ] .scroller { width: 200%; }
				section.component[data-component="slider"][data-slides="3" ] .scroller { width: 300%; }
				section.component[data-component="slider"][data-slides="4" ] .scroller { width: 400%; }
				section.component[data-component="slider"][data-slides="5" ] .scroller { width: 500%; }
				section.component[data-component="slider"][data-slides="6" ] .scroller { width: 600%; }
				section.component[data-component="slider"][data-slides="7" ] .scroller { width: 700%; }
				section.component[data-component="slider"][data-slides="8" ] .scroller { width: 800%; }
				section.component[data-component="slider"][data-slides="9" ] .scroller { width: 900%; }
				section.component[data-component="slider"][data-slides="10"] .scroller { width: 1000%; }

			/* Element sizes */

				section.component[data-component="slider"][data-slides="2" ] .scroller ul li { width:calc(100% / 2); }
				section.component[data-component="slider"][data-slides="3" ] .scroller ul li { width:calc(100% / 3); }
				section.component[data-component="slider"][data-slides="4" ] .scroller ul li { width:calc(100% / 4); }
				section.component[data-component="slider"][data-slides="5" ] .scroller ul li { width:calc(100% / 5); }
				section.component[data-component="slider"][data-slides="6" ] .scroller ul li { width:calc(100% / 6); }
				section.component[data-component="slider"][data-slides="7" ] .scroller ul li { width:calc(100% / 7); }
				section.component[data-component="slider"][data-slides="8" ] .scroller ul li { width:calc(100% / 8); }
				section.component[data-component="slider"][data-slides="9" ] .scroller ul li { width:calc(100% / 9); }
				section.component[data-component="slider"][data-slides="10"] .scroller ul li { width:calc(100% / 10); }

			/* Responsive sizes of content  */

				@media screen and (min-width:1440px)                        { #slider.main .contents {width:1200px;} }
				@media screen and (min-width:1240px) and (max-width:1439px) { #slider.main .contents {width:1100px;} }
				@media screen and (min-width:1040px) and (max-width:1239px) { #slider.main .contents {width:1000px;} }
				@media screen and (min-width: 960px) and (max-width:1039px) { #slider.main .contents {width: 900px;} }
				@media screen and (min-width: 860px) and (max-width: 959px) { #slider.main .contents {width: 800px;} }
				@media screen and (min-width: 700px) and (max-width: 859px) { #slider.main .contents {width: 680px;} }
				@media screen and (min-width: 580px) and (max-width: 699px) { #slider.main .contents {width: 560px;} }
				@media screen and (min-width: 310px) and (max-width: 579px) { #slider.main .contents {width: 310px; width: calc(100% - 20px); } }

				#slider.testimonials .contents {width:100%;}

			/* Responsive sizes of side buttons */

				@media screen and (min-width:1440px)                        { #slider.main .side-buttons ul li a { width:calc((100vw - 1200px) / 2.01); } }
				@media screen and (min-width:1240px) and (max-width:1439px) { #slider.main .side-buttons ul li a { width:calc((100vw - 1100px) / 2.01); } }
				@media screen and (min-width:1040px) and (max-width:1239px) { #slider.main .side-buttons ul li a { width:calc((100vw - 1000px) / 2.01); } }
				@media screen and (min-width: 960px) and (max-width:1039px) { #slider.main .side-buttons ul li a { width:calc((100vw -  900px) / 2.01); } }
				@media screen and (min-width: 860px) and (max-width: 959px) { #slider.main .side-buttons ul li a { width:calc((100vw -  800px) / 2.01); } }
				@media screen and (min-width: 700px) and (max-width: 859px) { #slider.main .side-buttons ul li a { width:calc((100vw -  680px) / 2.01); } }
				@media screen and (min-width: 580px) and (max-width: 699px) { #slider.main .side-buttons ul li a { width:calc((100vw -  560px) / 2.01); } }
				@media screen and (min-width: 310px) and (max-width: 579px) { #slider.main .side-buttons ul li a { width:calc((100vw -  310px) / 2.01); } }

				#slider.testimonials .side-buttons ul li a { width: 20px; }

			/* Positions of slides */

				section.component[data-component="slider"][data-index="1"]  #slider.main .scroller { transform:translateX(   0vw); }
				section.component[data-component="slider"][data-index="2"]  #slider.main .scroller { transform:translateX(-100vw); }
				section.component[data-component="slider"][data-index="3"]  #slider.main .scroller { transform:translateX(-200vw); }
				section.component[data-component="slider"][data-index="4"]  #slider.main .scroller { transform:translateX(-300vw); }
				section.component[data-component="slider"][data-index="5"]  #slider.main .scroller { transform:translateX(-400vw); }
				section.component[data-component="slider"][data-index="6"]  #slider.main .scroller { transform:translateX(-500vw); }
				section.component[data-component="slider"][data-index="7"]  #slider.main .scroller { transform:translateX(-600vw); }
				section.component[data-component="slider"][data-index="8"]  #slider.main .scroller { transform:translateX(-700vw); }
				section.component[data-component="slider"][data-index="9"]  #slider.main .scroller { transform:translateX(-800vw); }
				section.component[data-component="slider"][data-index="10"] #slider.main .scroller { transform:translateX(-900vw); }

				section.component[data-component="slider"][data-slides="2" ][data-index="1"] #slider.testimonials .scroller { transform:translateX(calc(-100% / 2 * 0)); }
				section.component[data-component="slider"][data-slides="2" ][data-index="2"] #slider.testimonials .scroller { transform:translateX(calc(-100% / 2 * 1)); }
				section.component[data-component="slider"][data-slides="3" ][data-index="1"] #slider.testimonials .scroller { transform:translateX(calc(-100% / 3 * 0)); }
				section.component[data-component="slider"][data-slides="3" ][data-index="2"] #slider.testimonials .scroller { transform:translateX(calc(-100% / 3 * 1)); }
				section.component[data-component="slider"][data-slides="3" ][data-index="3"] #slider.testimonials .scroller { transform:translateX(calc(-100% / 3 * 2)); }
				section.component[data-component="slider"][data-slides="4" ][data-index="1"] #slider.testimonials .scroller { transform:translateX(calc(-100% / 4 * 0)); }
				section.component[data-component="slider"][data-slides="4" ][data-index="2"] #slider.testimonials .scroller { transform:translateX(calc(-100% / 4 * 1)); }
				section.component[data-component="slider"][data-slides="4" ][data-index="3"] #slider.testimonials .scroller { transform:translateX(calc(-100% / 4 * 2)); }
				section.component[data-component="slider"][data-slides="4" ][data-index="4"] #slider.testimonials .scroller { transform:translateX(calc(-100% / 4 * 3)); }
				section.component[data-component="slider"][data-slides="5" ][data-index="1"] #slider.testimonials .scroller { transform:translateX(calc(-100% / 5 * 0)); }
				section.component[data-component="slider"][data-slides="5" ][data-index="2"] #slider.testimonials .scroller { transform:translateX(calc(-100% / 5 * 1)); }
				section.component[data-component="slider"][data-slides="5" ][data-index="3"] #slider.testimonials .scroller { transform:translateX(calc(-100% / 5 * 2)); }
				section.component[data-component="slider"][data-slides="5" ][data-index="4"] #slider.testimonials .scroller { transform:translateX(calc(-100% / 5 * 3)); }
				section.component[data-component="slider"][data-slides="5" ][data-index="5"] #slider.testimonials .scroller { transform:translateX(calc(-100% / 5 * 4)); }

			/* Marker on navigator */

				section.component[data-component="slider"][data-index="1"]  #slider .navigator ul li:nth-child(1) a,
				section.component[data-component="slider"][data-index="2"]  #slider .navigator ul li:nth-child(2) a,
				section.component[data-component="slider"][data-index="3"]  #slider .navigator ul li:nth-child(3) a,
				section.component[data-component="slider"][data-index="4"]  #slider .navigator ul li:nth-child(4) a,
				section.component[data-component="slider"][data-index="5"]  #slider .navigator ul li:nth-child(5) a,
				section.component[data-component="slider"][data-index="6"]  #slider .navigator ul li:nth-child(6) a,
				section.component[data-component="slider"][data-index="7"]  #slider .navigator ul li:nth-child(7) a,
				section.component[data-component="slider"][data-index="8"]  #slider .navigator ul li:nth-child(8) a,
				section.component[data-component="slider"][data-index="9"]  #slider .navigator ul li:nth-child(9) a,
				section.component[data-component="slider"][data-index="10"] #slider .navigator ul li:nth-child(10) a { background-color: var(--brand_blue); transform: scale(1.2,1.2); pointer-events: none; box-shadow: none;  }

			
			/* contents */
			
				/* layers */
				
				#slider ul li figure     { z-index:1; }
				#slider ul li figcaption { z-index:0; }
				
				#slider.main ul li .contents {
					display: flex;
					align-items: center;
					flex-direction: row;
				}
				@media screen and (min-width: 0px) and (max-width: 959px) { 
					#slider.main ul li .contents {
						display: block;
					}
				}
				#slider.testimonials ul li .contents {
					display: block;
				}
				#slider.main ul li .contents :nth-child(1) { order: 2; }
				#slider.main ul li .contents :nth-child(2) { order: 1; }

				#slider.main ul li figure {
					display: block;
					position: relative;
					vertical-align: top;
					width: 50%;
					height: 40vh;
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center top;
				}
				@media screen and (min-width: 0px) and (max-width: 959px) { 
					#slider.main ul li figure {
						width: 100%;
						max-height: 200px;
						margin-bottom: -25px;
					}
				}
				
				#slider.testimonials ul li figure {
					display: block;
					position: relative;
					vertical-align: top;
					background-repeat: no-repeat;
					background-size: cover;
				}
				#slider.testimonials[data-arrangement="vertical"] ul li figure {
					width: 100%;
					height: auto;
					aspect-ratio:16 / 9;
					margin-bottom: 25px;
				}
				#slider.testimonials[data-arrangement="horizontal"] ul li figure {
					width: 200px;
					height: 200px;
					margin-bottom: -200px;
				}
				#slider.main ul li figcaption {
					display: block;
					position: relative;
					vertical-align: top;
					width: calc(50% - 160px);
					padding: 50px 80px 50px 80px;
					background-color: rgba(255,255,255,0.6);
					box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1);
					left: 10%;
				}
				@media screen and (min-width: 0px) and (max-width: 959px) { 
					#slider.main ul li figcaption {
						padding: 33px 25px 25px 25px;
						width: calc(80% - 50px);
						left: 10%;
					}
				}
				#slider.testimonials ul li figcaption {
					display: block;
					position: relative;
					padding: 0;
					vertical-align: top;
				}
				#slider.testimonials[data-arrangement="horizontal"] ul li figcaption {
					width: calc(100% - 220px);
					margin: 0 0 0 220px;
				}
				#slider.testimonials[data-arrangement="vertical"] ul li figcaption {
					width: 100%;
					margin: 0 0 15px;
				}
				
				/* Extra elements */
				
					#Xslider.main ul li figcaption:before,
					#Xslider.main ul li figcaption:after {
						content:"";
						display: block;
						position: absolute;
						pointer-events: none;
						background-image: url("../../images/background/cell.webp");
						background-size: contain;
						background-repeat: no-repeat;
					}
					#Xslider ul li figcaption:before {
						width:  200px;
						height: 200px;
						left: 60%;
						top: -50%;
					}
					#Xslider ul li figcaption:after {
						width:  100px;
						height: 100px;
						left: -20%;
						top: 70%;
					}




				#slider ul li figcaption h2 {
					color: var(--brand_darkestgray);
					font-family: Lato-Black;
					letter-spacing: 1px;
					margin-bottom: 15px;
				}
				#slider ul li figcaption p {
					font-family: Lato-Light;
					font-size: 1.3rem;
					line-height: 1.6;
					
					display: -webkit-box;
					line-clamp:5;
					-webkit-line-clamp:5;
					-webkit-box-orient: vertical;  
					overflow: hidden;
				}
				#slider ul li figcaption .buttons {
					margin-top: 25px;
					position: relative;
				}
				#slider ul li figcaption .buttons a {
					font-size: 1.3rem;
					padding: 10px 20px;
					background-color: var(--brand_blue);
					color: white;
					box-shadow: none;
					transition: border-color 0.3s ease, background-color 0.3s ease;
				}
				#slider ul li figcaption .buttons a:hover {
					background-color: var(--brand_lightblue);
					border-color:  var(--brand_lightblue);
				}
				#slider ul li figcaption .buttons a em:before {}
				
				@media screen and (min-width: 0px) and (max-width: 959px) { 
					#slider ul li figcaption h2,
					#slider ul li figcaption p,
					#slider ul li figcaption .buttons {
						text-align: left;
					}
				}
				

			/* arrows on sides */
			
				#slider .side-buttons {
					position: relative;
					height: 5px;
					margin-bottom: -5px;
					outline: 0px dashed red;
					background-color: rgba(138,43,226,0.22);
				}
				#slider .side-buttons ul {
					position: relative;
					height: inherit;
					margin: 0; padding: 0;
					font-size: 0; line-height: 0;
				}
				#slider .side-buttons ul li {
					height: 80vh;
					transform: translateY(-100%);
					list-style: none;
					margin: 0; padding: 0;
				}
				#slider .side-buttons ul li:first-child { float: left; }
				#slider .side-buttons ul li:last-child  { float: right;}
				#slider .side-buttons ul li a {
					display: block;
					position: relative;
					height: 80vh;
					background-color: rgba(0,255,255,0.74);
					background-color: transparent;
					color: var(--brand_gray);
					text-decoration: none;
					cursor: default;
					opacity: 0.5;
					transition: opacity 0.5s ease;
				}
				#slider .side-buttons ul li a:hover {
					opacity: 1;
					color: var(--brand_blue);
				}
				
				#slider .side-buttons ul li a i {
					font-size: 30px;
					line-height: 80vh;
					pointer-events: none;
				}
				#slider .side-buttons ul li:first-child a { text-align:right; }
				#slider .side-buttons ul li:last-child  a { text-align:left; }
				#slider .side-buttons ul li:first-child a i:before { content:"\EBA3"; }
				#slider .side-buttons ul li:last-child  a i:before { content:"\EBA8"; }
			
			/* navigator dots */
			
				#slider .navigator {
					position: relative;
					left: 50%;
					transform: translateX(-50%);
					text-align: center;
				}
				#slider.main .navigator {
					top: -30px;
				}
				#slider .navigator > ul {
					text-align: center;
					margin: 0; padding: 0;
					font-size: 0; line-height: 0;
				}
				#slider .navigator > ul li  {
					list-style: none;
					margin: 0 5px 0 5px;
					padding: 0;
				}
				#slider .navigator > ul li a {
					display: block;
					text-decoration: none;
					width: 10px;
					height: 10px;
					border-radius: 10px;
					background-color: rgba(132,132,132,0.77);
					box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.42);
				}
				#slider .navigator > ul li a:hover {
					background-color: var(--brand_blue);
				}