html{scroll-behavior:smooth}
*{box-sizing:border-box;margin:0;padding:0}
body{background:#F6F5F4;color:#332c25;font-family:'NotoSans-Light', sans-serif;width:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:scroll}
p{font-weight:300;margin-bottom:2rem;font-size:2rem}
h2{writing-mode:vertical-rl;transform: scaleY(-1) scaleX(-1);font-size:6rem;line-height:1.3;font-weight:500}
.wrapper{width:1456px;margin:auto}
.sector{display:flex;flex-direction:row}
picture img{width:100%;height:auto}

/*** Navigation Styles ***/
header{width:100%;padding:2rem 0}
header .wrapper{display:flex}
header .brand{width:180px;height:85px}
nav{width:100%;display:grid;grid-template-columns:1fr 1fr}
#brand{display:flex;align-items:center}
.langSelectorListItem, .langSelectorList{list-style:none}
.langSelector{position:relative;display:flex;height:fit-content;justify-content:flex-end}
.langSelector abbr{text-decoration:none}
.langSelectorTitle abbr{margin-left:0.19rem}
.langSelectorHeader{background-color:#eeebe9;color:#332c25;cursor:pointer}
.langSelectorTitle{display:flex;padding:1rem;font-weight:400;flex-direction:row;align-items:center}
.langSelectorBody{display:none;position:absolute;right:0;top:100%;background-color:#b6ada5;transition:all 0.5s ease-in-out}
.langSelectorHeader:hover + .langSelectorBody,.langSelectorHeader:focus + .langSelectorBody,.langSelectorBody:hover,.langSelectorBody:focus,.langSelectorBody:active{display:block}
.langSelectorListItem + .langSelectorListItem{border-top:1px solid #f6f5f4}
.langSelectorListName{display:flex;align-items:center;flex-direction:row;justify-content:space-between;padding:1rem;transition:all 0.2s ease-in-out}
.langSelectorListName,.langSelectorListName:link,.langSelectorListName:visited{text-decoration:none;color:#fff}
.langSelectorListName:hover,.langSelectorListName:focus,.langSelectorListName:active,.langSelectorListName.active{background-color:#a6a7b6;color:#fff}
.langSelectorListNameFlag img{padding:0 10px 0 0}
.langSelector svg{width:40px;height:30px;margin-right:10px}
.langSelectorListNameFlag{display:flex}

/*** Content ***/
#section-1,#section-2,#section-3{padding:8rem 0}
.title{width:12%}
.text{width:88%}
#banner{padding:4rem 0 8rem}
#banner h1{font-size:7rem;text-align:center;margin:0 0 4rem;font-weight:300}
#banner .sector{display:flex;flex-direction:row}
#banner .text .perspective img{margin:0 0 4rem;background:#eeebe9;border-radius:30px}
#banner .text .back img{margin:4rem 0 0;background:#eeebe9;border-radius:30px}
#section-1,#section-3{background-color:#edebe9}
#section-1 .wrapper .sector .text > p{margin:0 0 4rem}
#section-1 .wrapper .sector .text > picture img,#section-3 .wrapper .sector .text > picture img{margin:0 0 6rem;background:#f6f5f4;border-radius:30px}
.specyfication{background:#f6f5f4;border-radius:30px;}
.line{display:flex;flex-direction:row;align-items:center;border-bottom:3px solid #eeebe9}
.line:last-child{border:0}
.line .image{display:flex;flex-direction:column;align-items:center;border-right:3px solid #eeebe9}
.line .desc h3{font-size:2rem;line-height:1.3;font-weight:500}
.line .desc{padding:30px}
.line .desc p{margin:0;font-size:1.6rem;line-height:1.3}
#section-2 .inner-grid{margin:0 0 6rem}
#section-2 .inner-grid div, #section-3 .inner-grid div{overflow:hidden;border-radius:20px;display:flex}
#section-2 .inner-grid div img, #section-3 .inner-grid div img{transition: .3s ease-in-out}
#section-2 .inner-grid div img:hover, #section-3 .inner-grid div img:hover{transform:rotate(2deg) scale(1.05)}
.inner-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-column-gap:40px}
.half{display:grid;grid-template-columns:1fr 1fr}
.half-left{display:grid;grid-template-columns:1fr 708px;grid-column-gap:40px}
.half-right{display:grid;grid-template-columns:708px 1fr;grid-column-gap:40px}
#section-3 h1{font-size:4rem;text-align:center;margin:8rem 0 4rem;font-weight:300}
#section-3 .inner-grid {margin:6rem 0 0}
#footer{padding:8rem 0 2rem;background-color:#dad6d2}
#footer .wrapper{display:flex;justify-content:space-between}
#footer .brand {width:200px;height:100px}
#footer .text{width:60%}
#footer .bottom p{text-align:center;font-weight:300;margin:4em 0 0}
.firma{float:left;display:flex;flex-direction:column;align-items:flex-start;}
.firma .adress{font-size:1.5rem;line-height:1.5rem;font-weight:300;}
.firma .adress small{font-size:1.0rem;}
.firma .myRtl{font-size:1.5rem;font-weight:300;margin-top:20px;user-select: none;direction:rtl;unicode-bidi: bidi-override;}
.firma .twitter .icon{border-radius:50%;height:70px;width:70px;display:flex;justify-content:center;align-items:center;margin-right:5px;}
.firma .twitter .icon svg{height:35px;}
.firma .twitter{margin:10px 0 0 -12px;}
.firma .twitter a:hover .icon{opacity:.6;}
.firma .twitter a{display:flex;align-items:center;flex-direction:row;font-size:1.5rem;font-weight:300;text-decoration:none;color:#332c25;}

@media screen and (max-width: 1536px) and (min-width: 1272px) {
	p{font-size:1.6rem}
	h2{font-size:4.2rem;line-height:1.8;margin:0}
	.wrapper{width:90%;margin:auto}
	#banner{padding:0 0 4rem}
	#section-1,#section-2,#section-3{padding:6rem 0}
	#banner .sector img{width:100%;height:auto;margin:0 0 3rem;border-radius:10px}
	#banner h1{font-size:4.4rem;margin:0 0 3rem}
	#section-1 .wrapper .sector .text > img{width:100%;height:auto;margin:0 0 3rem;border-radius:15px}
	.line{display:flex;flex-direction:row;border-bottom:3px solid #eeebe9}
	.line .image img{width:300px;height:auto}
	.line .desc{padding:10px 15px}
	.line .desc h3{font-size:1.6rem}	
	.line .desc p{font-size:1.2rem}
	#section-2 .half{grid-template-rows:auto;grid-template-columns:auto;grid-row-gap:40px}
	#section-2 .half-left,.half-right{display:flex;flex-direction:row}
	#section-2 .inner-grid{grid-column-gap:20px;margin:0 0 3rem}
	#section-2 .inner-grid div img{height:auto;width:100%}
	#section-3 .collapsible{padding:15px;font-size:1.6rem}
	#section-3 .wrapper .sector .text .gallery{width:100%;height:250px;margin:0 0 3rem;border-radius:15px}
	.slideshow-container{max-width:216px;left:39px;top:16px;margin:auto}
	#section-3 h1{font-size:3rem;margin:3rem 0 0}
	#footer{padding:4rem 0 3rem}
	#footer .wrapper{flex-direction:column}
	#footer .text{width:100%}
	header .brand,#footer .brand{width:100px;height:50px}
	#footer .bottom p{margin:3rem 0 0}
	.responsives{max-width:297px;height:250px}
}

@media screen and (max-width: 1272px) and (min-width: 767px) {
	p{font-size:1rem}
	h2{font-size:2.8rem;line-height:1.8;margin:0}
	.wrapper{width:90%;margin:auto}
	#banner{padding:0 0 4rem}
	#section-1,#section-2,#section-3{padding:4rem 0}
	#banner .sector img{width:100%;height:auto;margin:0 0 2rem;border-radius:10px}
	#banner h1{font-size:2.4rem;margin:0 0 2rem}
	#section-1 .wrapper .sector .text > p{margin:0 0 2rem}
	#section-1 .wrapper .sector .text > img{width:100%;height:auto;margin:0 0 2rem;border-radius:15px}
	.line{display:flex;flex-direction:row;border-bottom:3px solid #eeebe9}
	.line .image img{width:220px;height:110px}
	.line .desc{padding:10px 15px}
	.line .desc h3{font-size:1.2rem}	
	.line .desc p{font-size:1rem}
	#section-2 .half{grid-template-rows:auto;grid-template-columns:auto;grid-row-gap:40px}
	#section-2 .half-left,.half-right{display:flex;flex-direction:row}
	#section-2 .inner-grid{grid-column-gap:20px;margin:0 0 2rem}
	#section-2 .inner-grid div img{height:auto;width:100%}
	#section-3 .collapsible{padding:15px;font-size:1.6rem}
	#section-3 .wrapper .sector .text .gallery{width:100%;height:250px;margin:0 0 2rem;border-radius:15px}
	.slideshow-container{max-width:216px;left:39px;top:16px;margin:auto}
	#section-3 h1{font-size:2rem;margin:2rem 0 0}
	#footer{padding:4rem 0 2rem}
	#footer .wrapper{flex-direction:column}
	#footer .text{width:100%}
	header .brand,#footer .brand{width:100px;height:50px}
	#footer .bottom p{margin:2em 0 0}
	.responsives{max-width:297px;height:250px}
}

@media screen and (max-width: 767px) and (min-width: 479px) {
	p{font-size:1rem}
	h2{font-size:1.8rem;line-height:1.8;margin:0}
	.wrapper{width:90%;margin:auto}
	#banner{padding:0 0 4rem}
	#section-1,#section-2,#section-3{padding:4rem 0}
	#banner .text .perspective img,#section-1 .wrapper .sector .text > picture img,#section-3 .wrapper .sector .text > picture img{width:100%;height:auto;margin:0 0 2rem;border-radius:15px}
	#banner .text .back img{margin:1rem 0 0;border-radius:15px}
	#banner h1{font-size:2.4rem;margin:0 0 2rem}
	#section-1 .wrapper .sector .text > p{margin:0 0 2rem}
	#section-1 .wrapper .sector .text > img{width:100%;height:auto;margin:0 0 2rem;border-radius:15px}
	.specyfication{border-radius:15px}
	.line{display:flex;flex-direction:row;border-bottom:3px solid #eeebe9}
	.line .image img{width:220px;height:110px}
	.line .desc{padding:10px 15px}
	.line .desc h3{font-size:1.2rem}	
	.line .desc p{font-size:.8rem}
	#section-2 .half{grid-template-rows:auto;grid-template-columns:auto;grid-row-gap:40px}
	#section-2 .half-left,.half-right{display:flex;flex-direction:row}
	#section-2 .inner-grid{grid-row-gap:20px;margin:0 0 2rem}
	#section-2 .inner-grid div img,#section-3 .inner-grid div img{height:auto;width:100%}
	#section-2 .inner-grid div, #section-3 .inner-grid div{border-radius:15px}
	#section-3 .collapsible{padding:15px;font-size:1.6rem}
	#section-3 .wrapper .sector .text .gallery{width:100%;height:250px;margin:0 0 2rem;border-radius:15px}
	.slideshow-container{max-width:216px;left:39px;top:16px;margin:auto}
	#section-3 h1{font-size:2rem;margin:2rem 0 0}
	.inner-grid{grid-column-gap:20px}
	#footer{padding:4rem 0 2rem}
	#footer .wrapper{flex-direction:column}
	#footer .text{width:100%}
	header .brand,#footer .brand{width:100px;height:50px}
	#footer .bottom p{margin:2em 0 0}
	.responsives{max-width:297px;height:250px}
	.firma{margin-top:10px;}
	.firma .adress{font-size:1.5rem;}
	.firma .adress small{font-size:1.0rem;}
	.firma .myRtl{font-size:1.1rem;}
	.firma .twitter{margin:10px 0 0 -6px;}
	.firma .twitter a{font-size:1.1rem;}
	.firma .twitter .icon svg{height:30px;}
	.firma .twitter .icon{height:50px;width:50px;}
}

@media screen and (max-width: 479px) {
	p{font-size:1rem}
	h2{font-size:1.4rem;line-height:1.4;margin:0}
	.wrapper{width:90%;margin:auto}
	.langSelectorListNameFlag img{width:50px}
	#banner{padding:0 0 4rem}
	#section-1,#section-2,#section-3{padding:4rem 0}
	#banner .text .perspective img,#section-1 .wrapper .sector .text > picture img,#section-3 .wrapper .sector .text > picture img{width:100%;height:auto;margin:0 0 2rem;border-radius:10px}
	#banner .text .back img{margin:1rem 0 0;border-radius:10px}
	#banner h1{font-size:2.4rem;margin:0 0 2rem}
	#section-1 .wrapper .sector .text > p{margin:0 0 2rem}
	#section-1 .wrapper .sector .text > img{width:100%;height:auto;margin:0 0 2rem;border-radius:10px}
	.line{display:flex;flex-direction:column;border-bottom:10px solid #eeebe9}
	.line .image img{width:100%;height:auto}
	.line .image{border-right:0}
	.line .desc{padding:15px}
	.line .desc h3{font-size:1.2rem}	
	.line .desc p{font-size:1rem}
	.specyfication{border-radius:10px}
	#section-2 .half{grid-template-rows:auto;grid-template-columns:auto;grid-row-gap:40px}
	#section-2 .half-left,.half-right{display:flex;flex-direction:row}
	#section-2 .inner-grid,#section-3 .inner-grid{grid-template-columns:auto;grid-row-gap:20px;margin:0 0 2rem}
	#section-2 .inner-grid div img,#section-3 .inner-grid div img{height:auto;width:100%}
	#section-2 .inner-grid div, #section-3 .inner-grid div{border-radius:10px}
	#section-3 .collapsible{padding:15px;font-size:1.6rem}
	#section-3 .wrapper .sector .text .gallery{width:100%;height:250px;margin:0 0 2rem;border-radius:10px}
	.slideshow-container{max-width:216px;left:39px;top:16px;margin:auto}
	#section-3 h1{font-size:2rem;margin:2rem 0 0}
	#footer{padding:4rem 0 2rem}
	#footer .wrapper{flex-direction:column}
	#footer .text{width:100%}
	header .brand,#footer .brand{width:100px;height:50px}
	#footer .bottom p{margin:2em 0 0}
	.responsives{max-width:297px;height:250px}
	.firma{margin-top:10px;}
	.firma .adress{font-size:1.5rem;}
	.firma .adress small{font-size:1.1rem;}
	.firma .myRtl{font-size:1.1rem;}
	.firma .twitter{margin:10px 0 0 -6px;}
	.firma .twitter a{font-size:1.1rem;}
	.firma .twitter .icon svg{height:30px;}
	.firma .twitter .icon{height:50px;width:50px;}
}