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


#keyvisual {
	width: 100%; height: 41.5rem;
	overflow: hidden;
	background-color: #dcdcdc;
	position: relative;
}

#keyvisual::before {
	content: '';
	position: absolute;
	width: 140rem; height: 140rem;
	left: calc(50% - 58.4rem);
	top: calc(50% - 75.6rem);
	background: -webkit-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 66%);
	background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 66%);
}

#keyvisual .boiler {
	position: absolute;
	width: 18.3rem; height: 39.6rem;
	left: calc(50% - 30rem);
	top: 1.9rem;
	background-image: url("../images/boiler.png");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
#keyvisual .logo {
	position: absolute;
	width: 37.5rem; height: 27.7rem;
	left: calc(50% - 7rem);
	top: 7rem;
	background-image: url("../images/logo.short.svg");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.05;
}

#keyvisual .tx {
	position: absolute;
	width: 36rem;
	left: calc(50% - 5rem);
	top: 12rem;
	font-weight: bold;
}

#keyvisual h1 {
	font-size: 5.5rem; line-height: 105%;
	color: var(--grey);
	margin-bottom: 3.6rem;
}
#keyvisual .tx p {
	font-size: 2.2rem; line-height: 105%;
	color: var(--red);
}


#vyhody .middle {
	padding: 2.5rem 0;
}

#vyhody .middle > h1 {
	padding: 1.8rem 3.3rem;
	border: .1rem solid;
	border-color: var(--red);
	font-weight: bold; 
	font-size: 2.3rem; line-height: 110%;
	color: var(--grey);
	text-transform: uppercase;
}

#vyhody article {
	width: 100%;
	margin-top: 3rem;
}

#vyhody article > div:nth-of-type(1){
	width: 14rem; height: 7.5rem;
	background-position: center top;
	background-size: 7.2rem auto;
	background-repeat: no-repeat;
}
#vyhody article:nth-of-type(1) > div:nth-of-type(1){ background-image: url("../images/icon.crystal.enamel.svg"); }
#vyhody article:nth-of-type(2) > div:nth-of-type(1){ background-image: url("../images/icon.thermo.gen.svg"); }
#vyhody article:nth-of-type(3) > div:nth-of-type(1){ background-image: url("../images/icon.ceramic.solution.svg"); }

#vyhody article > div:nth-of-type(2){
	width: 55rem;
}

#vyhody article h1 {
	font-weight: bold; 
	font-size: 1.5rem; line-height: 110%;
	color: var(--red);
	margin-bottom: 0.25rem;
	text-transform: uppercase;
}
#vyhody article p,
#produkty article > div:last-of-type > div:nth-of-type(2) p
{
	font-weight: 300; 
	font-size: 1.25rem; line-height: 125%;
	color: var(--grey-dark);
	padding-left: 1.1rem;
	position: relative;
}
#vyhody article p::before, 
#produkty article > div:last-of-type > div:nth-of-type(2) p::before
{
	content: '';
	position: absolute;
	width: 0.5rem; height: 0.5rem;
	left: 0; top: 0.53125rem;
	border-radius: 50%;
	background-color: var(--grey-dark);
}

#produkty .middle > h1 {
	padding: 1.8rem 5.3rem 3.2rem 3.3rem;
	border: .1rem solid;
	border-color: var(--red);
	font-weight: bold; 
	font-size: 2.3rem; line-height: 110%;
	color: var(--grey);
	text-transform: uppercase;
	position: relative;
	margin-bottom: -1.5rem;
}
#produkty .middle > h1 br {
	display: none;
}
#produkty .middle > h1::after,
#koupit .middle > h1::after
{
	content: '';
	position: absolute;
	width: 8rem; height: 8rem;
	top: -2rem; right: -4rem;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: top center;
	background-image: url("../images/friendship.svg");
}

#produkty .graphic {
	width: 100%; height: 24.5rem;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: top center;
	background-image: url("../images/regulace.png");
}

#produkty {
	padding: 3rem 0 2.5rem;
}

#produkty article {
	margin-top: 4.5rem;
}

#produkty article > div:first-of-type {
	
	border-right: .1rem solid;
	border-top: .1rem solid;
	border-bottom: .1rem solid;
	border-color: var(--red);
}

#produkty article > div:first-of-type > div {
	border-left: .1rem solid;
	height: 4.5rem;
	border-color: var(--red);
	align-content: center; align-items: center;
	box-sizing: border-box;
}
#produkty article > div:first-of-type > div:nth-of-type(1),
#produkty article > div:first-of-type > div:nth-of-type(2) 
{
	color: var(--grey);
	width: 22.5rem;
}
#produkty article > div:first-of-type > div:nth-of-type(3) 
{ 
	color: var(--red); 
	width: 24.8rem;
}

#produkty article > div:first-of-type > div:nth-of-type(3),
#produkty article > div:first-of-type > div:nth-of-type(2) 
{
	font-size: 1rem; line-height: 110%;
	text-transform: uppercase;
	padding-left: 1.25rem;
}
#produkty article > div:first-of-type > div:nth-of-type(1) { padding-left: 2.5rem; }

#produkty article h1 {
	font-size: 2.3rem; line-height: 110%;
}

#produkty article > div:last-of-type {
	margin-top: 2.25rem;
	position: relative;
}

#produkty article > div:last-of-type > div:nth-of-type(1) {
	width: 22.5rem;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: top center;
	position: relative;
}

#produkty article[data-product="okc125"] > div:last-of-type > div:nth-of-type(1) {
	height: 29.8rem;
	background-image: url("../data/okc125.jpg");
}
#produkty article[data-product="okc160"] > div:last-of-type > div:nth-of-type(1) {
	height: 33.2rem;
	background-image: url("../data/okc160.jpg");
}
#produkty article[data-product="okc200"] > div:last-of-type > div:nth-of-type(1) {
	height: 33.8rem;
	background-image: url("../data/okc200.jpg");
}
#produkty article[data-product="okce125"] > div:last-of-type > div:nth-of-type(1) {
	height: 29.8rem;
	background-image: url("../data/okce125.jpg");
}

#produkty article > div:last-of-type > div:nth-of-type(1) > div {
	text-align: center;
	position: absolute;
	font-weight: bold;
	padding-bottom: 0.35rem;
	border-bottom: 0.15rem solid; border-color: var(--grey);
}

#produkty article > div:last-of-type > div:nth-of-type(1) > div:first-of-type {
	bottom: 0; right: 4.3rem; width: 12.5rem;
}

#produkty article > div:last-of-type > div:nth-of-type(1) > div:last-of-type {
	top: 0; right: 0;
	transform: rotate(-90deg) translateX(1.5rem); transform-origin: right 1.5rem;
}
#produkty article[data-product="okc125"] > div:last-of-type > div:nth-of-type(1) > div:last-of-type, 
#produkty article[data-product="okce125"] > div:last-of-type > div:nth-of-type(1) > div:last-of-type
{
	width: 26.9rem;
}
#produkty article[data-product="okc160"] > div:last-of-type > div:nth-of-type(1) > div:last-of-type {
	width: 30rem;
}
#produkty article[data-product="okc200"] > div:last-of-type > div:nth-of-type(1) > div:last-of-type {
	width: 30.4rem;
}


#produkty article > div:last-of-type > div:nth-of-type(2) {
	width: 44rem;
	padding-top: 2.25rem;
}

#produkty article > div:last-of-type > div:nth-of-type(2) a {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.8rem 1.2rem;
	background-color: var(--grey);
	color: #fff;
	font-weight: 600;
	font-size: 1.6rem; line-height: 110%;
}
#produkty article > div:last-of-type > div:nth-of-type(2) a:hover {
	text-decoration: none;
	background-color: var(--red);
}

#koupit {
	padding-top: 7rem;
}
#koupit .middle > h1 {
	padding: 1.8rem 5.3rem 1.8rem 3.3rem;
	border: .1rem solid;
	border-color: var(--red);
	font-weight: bold; 
	font-size: 2.3rem; line-height: 110%;
	color: var(--grey);
	text-transform: uppercase;
	position: relative;
	margin-bottom: -1.5rem;
}
#koupit .middle a {
	font-size: 2rem; line-height: 110%;
	color: var(--red);
	font-weight: bold; 
	padding-top: 4rem;
	text-transform: uppercase;
}

#idea {
	padding: 8rem 0 5.5rem;
}


#idea div p {
	font-weight: 300; 
	font-size: 1.25rem; line-height: 125%;
	color: var(--grey-dark);
}
#idea div.middle:first-of-type p {
	width: 33rem;
}
#idea .middle > h1 {
	padding: 1.8rem 3.3rem 3.3rem;
	border: .1rem solid;
	border-color: var(--red);
	font-weight: bold; 
	font-size: 2.3rem; line-height: 110%;
	color: var(--grey);
	text-transform: uppercase;
	margin-bottom: -1.5rem;
}
#idea .middle > h1 span {
	color: var(--red);
}

#idea .graphic {
	width: 100%; height: 44rem;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("../data/background.jpg");
}
#idea div.middle:last-of-type {
	padding-top: 2rem;
}

#idea div.middle:last-of-type > div {
	width: 13.5rem; height: 3.6rem;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top left;
	background-image: url("../images/certificates.png");
}
#idea div.middle:last-of-type p {
	width: 52rem;
}

@media (max-width: 500px){
	
#keyvisual { height: 65rem; }

#keyvisual::before {
	width: 90rem; height: 90rem;
	left: calc(50% - 32rem); top: -12rem;
}

#keyvisual .boiler {
	left: calc(50% - 10.5rem);
	top: 3rem;
}
#keyvisual .logo {
	width: 100%; height: 15.4rem;
	left: 0; top: 46rem;
}

#keyvisual .tx { width: 100%;	left: 0;	top: 43rem; }
#keyvisual h1 {	font-size: 3.9rem; line-height: 105%;	margin-bottom: 2.7rem; }
#keyvisual .tx p { font-size: 1.7rem; line-height: 105%; }	
	
#vyhody article > div:nth-of-type(2){
	width: 100%;
}
	
#vyhody article > div:nth-of-type(1){
	background-position: left top;
}
#vyhody article:nth-of-type(2) > div:nth-of-type(1){ height: 8.5rem; }
	
#vyhody .middle > h1 {
	padding: 1.8rem 1.8rem;
	font-size: 2rem; line-height: 110%;
}
	
#produkty {
	padding-top: 4.5rem;
}	
#produkty .middle > h1 br {
	display: inline;
}	
#produkty .graphic {
	height: 11rem;
}
	
#produkty article > div:first-of-type {
	border-left: .1rem solid;
	border-color: var(--red);
}
#produkty article > div:first-of-type > div {
	border-left: none;
	width: 100% !important;
}
	
#produkty article > div:first-of-type > div:nth-of-type(1),
#produkty article > div:first-of-type > div:nth-of-type(2) 
{
	border-bottom: .1rem solid;
	border-color: var(--red);
	padding-left: 1.25rem;
}
#produkty article > div:first-of-type > div:nth-of-type(3),
#produkty article > div:first-of-type > div:nth-of-type(2) 
{
	height: 2.5rem;
}
	
#produkty .middle > h1 {
	padding: 1.8rem 1.8rem 2.3rem;
	font-size: 2rem; line-height: 110%;
	margin-bottom: -1rem;
}
#produkty .middle > h1::after {
	width: 6rem; height: 6rem;
	top: -4rem; right: auto; left: 0;
}
	
#koupit .middle > h1 {
	padding: 1.8rem ;
	font-size: 2rem; line-height: 110%;
}
#koupit .middle > h1::after {
	width: 6rem; height: 6rem;
	top: -4rem; right: auto; left: 0;
}
#koupit {
	padding-top: 8.5rem;
}
	
#idea div.middle:first-of-type p, 
#idea div.middle:last-of-type p {
	width: 100%;
	margin-top: 2rem;
}
#idea .middle > h1 {
	padding: 1.8rem ;
	font-size: 1.8rem; line-height: 110%;
}
#idea div.middle:first-of-type {
	padding-bottom: 1rem;
}
	
}