@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html,
body{
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    max-width: 1500px;
    margin: 0 auto;
}
body{
    background-color: #f8fbf6;
    padding-bottom: clamp(60px, calc(min(2vw, 30px)), 165px);
    position: relative;
}
ul {
    padding-left: 25px;
    margin-bottom: 1em;
}
ul li {
    margin-bottom: 0.5em;
    list-style-type: disc;
}
strong,b {
  font-weight: 700;
}
.home_content{
    margin-top: clamp(60px, calc(min(10vw, 150px)), 160px);
    margin-bottom: clamp(30px, calc(min(5vw, 75px)), 60px);
    display: flex;
    position: relative;
}
section{
    flex-basis: 50%;
}
section.mobile{
    display:none;
    flex-basis: 100%:
}
article.more{
    cursor: pointer;
}
#article_1{
  margin-top: clamp(-100px, calc(max(-5vw, -75px)), -20px)
}
h2.title{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(22px, calc(min(4vw, 58px)), 58px);
    color: white;
}
h2.title > span{
    padding: clamp(5px, calc(min(2vw, 30px)), 45px) clamp(10px, calc(min(2vw, 30px)), 35px);
    display: block;
}
.navimg{
  width: 100%;
  max-width: 100%;
  display: block;
}
.navimg.hover,
.navimg.mobile{
  display: none;
}
h2.title{
  background-size: cover;
  background-repeat: no-repeat;
}
.lead{
  background-repeat: repeat;
}
.lead > span {
    padding: clamp(15px, calc(min(5vw, 75px)), 105px) clamp(10px, calc(min(2vw, 30px)), 35px);
    display: block;
    color: #6c6a5b;
    font-size: clamp(22px, calc(min(2.2vw, 36px)), 38px);
    line-height: clamp(26px, calc(min(2.5vw, 40px)), 44px);
}
.popup{
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    background: #f8fbf6;
    flex-direction: column;
    cursor: default;
    display: none;
    z-index: 9;
}
.popup.show{
    display: flex;
}
.popup .head{
    display: flex;
    align-items: flex-end;
}
.popup .head h2{
    flex-basis: 50%;
    font-size: clamp(22px, calc(min(4vw, 58px)), 58px);
    position: relative;
}
.popup .head .title:after {
  content: ' ';
  position: absolute;
  right: 20px;
  height: clamp(15px, calc(min(3vw, 45px)), 50px);
  background: url('/assets/templates/files/close.png');
  background-size: contain;
  width: clamp(15px, calc(min(3vw, 45px)), 50px);
  top: clamp(5px, calc(min(3vw, 45px)), 40px);
  cursor: pointer;
}
.popup .head img{
    width: 50%;
    max-width: 100%;
    margin-top: clamp(-160px, calc(max(-10vw, -150px)), -60px);
}
.popup .content{
    flex-grow: 1;
    border-left: clamp(5px, calc(min(2vw, 30px)), 25px) solid #b3cf2d;
    border-right: clamp(5px, calc(min(2vw, 30px)), 25px) solid #b3cf2d;
    border-bottom: clamp(5px, calc(min(2vw, 30px)), 25px) solid #b3cf2d;
    background-color: white;
    color: #6c6a5b;
    font-size: clamp(20px, calc(min(2.2vw, 26px)), 28px);
    line-height: clamp(24px, calc(min(2.5vw, 30px)), 34px);
    font-weight: 400;
}
.popup .content > img,
.popup .content > div > div img{
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
}
.popup .content > div > div img{
    object-fit: contain;
    height: auto;
}
.popup .content > div > div > h1{
    font-size: clamp(22px, calc(min(4vw, 58px)), 58px);
    line-height: clamp(26px, calc(min(4.5vw, 62px)), 64px);
    color: #6c6a5b;
    font-weight: 700;
    font-family: 'Roboto Condensed', sans-serif;
}
.popup .content > div > div > h2{
    font-size: clamp(22px, calc(min(3vw, 38px)), 38px);
    line-height: clamp(26px, calc(min(3.5vw, 42px)), 44px);
    color: #6c6a5b;
    font-weight: 500;
    padding-top: clamp(20px, calc(min(2vw, 30px)), 40px);
    padding-bottom: clamp(40px, calc(min(2vw, 30px)), 60px);
}
.tpl_2 .content > div {
    padding: clamp(30px, calc(min(4vw, 60px)), 120px) clamp(20px, calc(min(10vw, 150px)), 300px);
}
.tpl_3 .content > div {
    display: flex;
    min-height: clamp(20vw, calc(min(70vw, 1038px)), 1038px);
}
.tpl_3 .content > div > div {
    flex-basis: 50%;
    padding: clamp(30px, calc(min(3vw, 45px)), 60px) clamp(20px, calc(min(2vw, 30px)), 40px);
}
.tpl_3 .content > div > div:last-child {
    background: url('/assets/templates/files/akt-content-bg.gif');
}
a[name=up]{
    position: absolute;
    right: clamp(20px, calc(min(3vw, 50px)), 50px);
    bottom: clamp(20px, calc(min(3vw, 50px)), 40px);
    cursor: pointer;
    height: 0;
    width: 0;
    border-bottom: clamp(20px, calc(min(4vw, 30px)), 30px) solid black;
    border-left: clamp(25px, calc(min(4vw, 35px)), 35px) solid transparent;
    border-right: clamp(25px, calc(min(4vw, 35px)), 35px) solid transparent;
}
a[name=up] img{
    max-width: 50px;
    display:none;
}
.accordion {
    margin: clamp(20px, calc(min(2vw, 30px)), 25px) clamp(-20px, calc(max(-2vw, -30px)), -10px);
    padding: 0;
}
.accordion li {
    list-style-type: none;
    background: url('/assets/templates/files/akt-content-bg.gif');
    padding: clamp(15px, calc(min(3vw, 45px)), 30px) clamp(10px, calc(min(2vw, 30px)), 20px);
    cursor: pointer;
    margin-bottom: clamp(5px, calc(min(2vw, 30px)), 10px);
    position: relative;
}
.accordion li:after {
  content: '+';
  position: absolute;
  right: 20px;
  height: clamp(20px, calc(min(2vw, 30px)), 40px);
  width: clamp(20px, calc(min(2vw, 30px)), 40px);
  top: clamp(10px, calc(min(3vw, 45px)), 30px);
  font-size: 50px;
  font-weight: 300;
}
.tpl_3 .accordion,
.accordion li + div {
    display: none;
}
.accordion li.open + div {
    display: block;
    padding: clamp(15px, calc(min(3vw, 45px)), 30px) clamp(10px, calc(min(2vw, 30px)), 20px);
    display: flex;
    gap: 25px;
}
.accordion li.open + div > div {
    flex-basis: 50%;
}
.accordion li.open:after {
  transform: rotate(45deg);
}
footer{
    display: flex;
    background-image: url(/assets/templates/files/footer-bg.gif);
    background-repeat: repeat;
    color: #fff;
    font-size: clamp(18px, calc(min(2vw, 28px)), 28px);
    padding: clamp(10px, calc(min(2vw, 30px)), 30px) clamp(20px, calc(min(2vw, 30px)), 40px);
    font-weight: 700;
    font-family: 'Roboto Condensed', sans-serif;
    line-height: clamp(22px, calc(min(2.5vw, 34px)), 34px);
    gap: 1%;
}
footer:after{
    content: '';
    margin-top: 5px;
    background-image: url(/assets/templates/files/footer2-bg.gif);
    background-repeat: repeat;
    height: clamp(50px, calc(min(2vw, 30px)), 150px);
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
}
footer a,
footer a:visited{
    text-decoration: none;
    color: #fff;
    cursor: pointer;
}
footer img{
    max-width: 100%;
}
footer div:first-child{
    flex-basis: 32%;
}
footer div:nth-child(2){
    flex-basis: 15%;
}
footer div:nth-child(3){
    flex-basis: 40%;
}
footer div:last-child{
    flex-basis: 10%;
}
@media (max-width: 1275px) {
    /*Tablet*/
}
@media (max-width: 500px) {
    /*Phone*/{
        display:none;
    }
    .home_content {
        margin-top: 0;
    }
    section,
    #article_1 .navimg {
        display: none;
    }
    section.mobile {
        display: flex;
        flex-basis: 100%;
        flex-direction: column;
    }
    #article_1 .navimg.mobile{
        display:block;
    }
    .popup {
        bottom: auto;
    }
    .popup .head {
        align-items: stretch;
        flex-direction: column;
    }
    .popup .head img {
        margin-top: 0;
        width: 100%;
    }
    .popup .head h2 {
         order: 1;
    }
    .tpl_3 .content > div {
        flex-direction: column;
    }
    footer {
        flex-direction: column;
        gap: 25px;
    }
    footer img {
        max-width: 150px;
    }
    footer a {
        display: block;
    }
}