html {height: 100%;}
body { min-height: 100%;       position: relative;  font-family: 'Mukta', sans-serif; margin: auto; background: white;}
.a{-webkit-transition-property: all;	-webkit-transition-duration: 200ms;	-moz-transition-property: all;	-moz-transition-duration: 200ms;	transition: all 200ms ease-in-out;}
*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
.clear{width:100%; clear: both;}
h1, h2, h3, h4, h5, p {margin: 0; padding: 0;}


h1{max-width: 800px;}
h1 em{font-style: normal; position: relative; }
h1 em:before{     position: absolute;
    content: " ";
    width: 104%;
    height: 83%;
    background: #55c100;
    opacity: .1;
    margin: 2% 0 0 -2%;}
h2{font-size: 20px;}

.page{position: relative;}

.skew{
    position: relative;
    width: 100%;
    margin: 0 0 -50px 0;
}
.skew:after{
    width: 100%;
    height: 100%;
    top: 0;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 90%);
    background: linear-gradient(-45deg, rgba(20, 126, 0, 1) 0%, rgba(91, 200, 0, 1) 100%);
    content: " ";
    position: absolute;
    background: radial-gradient(circle at bottom, #39d24a, transparent 80%), linear-gradient(to top, #29A5FF 0%, transparent 70%), linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 70%), #5BC800FF;
    animation: bg 30s infinite;
}


@keyframes bg {
    0%, 100% {
        background-color: #2e9d3b;
    }
    25% {
        background-color: #39d24a;
    }
    50% {
        background-color: #39d24a;
    }
    75% {
        background-color: #329318;
    }
}

.skew .content{border-color:rgb(255 255 255 / 10%); padding: 50px 0 100px 0;     z-index: 9;}
.skew .content:before{border-color: rgb(255 255 255 / 10%);     z-index: 9;}
.skew .content:after{border-color: rgb(255 255 255 / 10%);     z-index: 9;}

.skew .content{ min-height: 400px;}

.block{position: relative;}
.content{ padding: 120px 0;        max-width: 1100px; margin: 0 auto;  position: relative; border-style: solid; border-color: rgb(0 0 0 / 10%); border-width: 0 1px 0 1px; }
.content:before{content: " "; width: 50%;height: 100%; border-style: dashed; border-color: rgb(0 0 0 / 10%); border-width: 0 1px 0 1px; position: absolute; left: 25%; top: 0;}
.content:after{content: " "; width: 50%;height: 100%; border-style: dashed; border-color: rgb(0 0 0 / 10%); border-width: 0 1px 0 0; position: absolute; left: 0%; top: 0;}

.content .contentin{position: relative; z-index: 99; padding: 15px;}

.content .contentbox{position: relative; z-index: 99;}
.content .contentbox .boxin{padding: 15px; float:left; width: 25%;}
.content .contentbox .boxin h2{border-style: solid; border-width: 0 0 0 2px; border-color:#55c100; margin: 0 0 0 -15px; padding: 0 0 0 15px; }
.content .contentbox .boxin p{}
.content .contentbox .boxin .falbig{font-size: 32px; color: #55c100;}
.content .contentbox .boxin img{max-width: 100%;}

.content .contentbox .boxlarge{
    float: left;
    width: 50%;
    background: #ffffff;
    box-shadow: 9px 10px 19px 6px #00000017;
}

.content .contentbox .boxlarge2{
    padding: 15px;
    float: left;
    width: 50%;
}

.content .contentbox .boxlarge.tripple{width: 75%;}

.content .contentbox .boxlarge .boxlargein{width:50%; float:left; padding: 15px}
.content .contentbox .boxlarge.tripple .boxlargein{width:33.33333%; }
.content .contentbox .boxlarge .boxlargein .img{aspect-ratio: 1 / 1;padding: 30px;display: flex;align-items: center;justify-content: center;}
.content .contentbox .boxlarge .boxlargein .textsquare{aspect-ratio: 1 / 1;padding: 5px;display: flex;align-items: center;justify-content: center;}
.content .contentbox .boxlarge .boxlargein .textsquare .falbig{font-size: 32px; color: darkgrey; margin-bottom: 5px; display: block;}
.content .contentbox .boxlarge .boxlargein img{max-width: 100%;}

.content .contentbox .imgsquare{aspect-ratio: 1 / 1;padding: 50px;display: flex;align-items: center;justify-content: center; position: relative;}
.content .contentbox .imgsquare img, .content .contentbox .imgsquare svg{width: 100%; opacity: .7; height: auto; }

.content .contentbox .imgsquare .textbox{ opacity: 0; position: absolute; transition: opacity 250ms ease-in-out;
    background: #4b4b5c;
    color: white;

    width: 100%; height: 100%; padding: 15px;display: flex;align-items: center; justify-content: center;}
.content .contentbox .imgsquare .textbox .falbig{font-size: 32px; color: white; margin-bottom: 5px; display: block;}
.content .contentbox .imgsquare:hover .textbox{ opacity: 1;}


.block.dark{color:white; background: #2a2a3f;    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 90%); margin: -50px 0;}
.block.dark .content .contentbox .boxin h2{  border-color:#29A5FF;  }
.block.dark .content{border-color:rgb(255 255 255 / 10%)}
.block.dark .content:before{border-color: rgb(255 255 255 / 10%)}
.block.dark .content:after{border-color: rgb(255 255 255 / 10%)}
.block.dark h1 em:before{ background: #29A5FF;}

.home{}
.home .menu{text-align: right; margin: -30px 0 30px 0;}
.home .open-col6{width: 50%; float:left;}
.home .logo img{max-height: 70px; max-width: 168px; aspect-ratio: 168 / 70}
.home .openclaim{    border-style: solid;
    border-width: 0 0 0 2px;
    border-color: white;
    color: white;
    font-size: 23px;
    margin: 0 0 0 -15px;
    padding: 0 0 0 15px;}
.home .openclaim span{position: relative;}
.home .openclaim span:before{  position: absolute;
    content: " ";
    width: 104%;
    height: 83%;
    background: white;
    opacity: .2;
    margin: 2% 0 0 -2%;}
.home .box{}
.home .box .btn{margin: 0 15px 0 0;}

.home .landingphone{position: relative; margin-bottom: -150px;}
.home .landingphone .dot{
    border-radius: 23px 23px 0 23px;color:dimgrey;
    background: white;
    position: absolute;
    text-align: left;
    padding: 10px 20px;
    font-weight: bold;
    color: #2a2a3e;
    box-shadow: 3px 4px 14px 0px #00000017;
    z-index: 999;
    margin-top: 0px;opacity: 1;transition: opacity 500ms ease-in-out, margin-top 500ms ease-in-out;
}
.home .landingphone .dot.start{margin-top: 10px; opacity: 0;}
.home .landingphone .dot span{font-size: 9pt; display: block;     margin: 0 0-5px 0; color:darkgrey;}
.home .landingphone .dot.rev{  border-radius: 0 23px 23px 23px  ;}
.home .landingphone img{max-width: 100%; display: block;margin: 10px 0px 0 0px; }



.btn { color: #FFF;padding: 10px 15px; cursor: pointer;border-radius: 50px; background: rgba(255, 255, 255, 0.2); text-decoration: none; display: inline-block;}
.btn.btmnain{background: white; color: green; font-weight: bold;}
.btn:hover { background: rgba(255, 255, 255, 0.3);}
.btn.btmnain:hover { opacity: 1; background: white; transform: translate(0,-2px) scale(1.01,1.01);    box-shadow: 3px 4px 14px 0px #00000017;}
.btn.btnsmall{font-size: 10pt; padding: 7px 15px; }


.block.dark.foot{   clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);  }
.block.dark.foot a{color:white;}
.block.dark.foot .content .contentbox .boxin h2{  border-color: white;  }


.alert{color:white; font-weight: bold; padding: 10px; border-radius: 5px; margin: 20px 0 0 0 !important;}
.alert.red{background:#C91E4C;}
.alert.done{background: #64C553;}



.contact{ color:White;

    background: radial-gradient(circle at bottom, #39d24a, transparent 80%), linear-gradient(to top, #29A5FF 0%, transparent 70%), linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 70%), #5BC800FF;
    animation: bg2 30s infinite;
    clip-path: polygon(0 0, 100% 5%, 100% 100%, 0% 95%);
}

.computer_ill{position: relative; width: 65%; float:right; margin: -180px 20px -40px 0; z-index: 99;}
.computer_ill img{width: 100%;}
.computer_ill .comp{position: absolute; top: 0; left: 0; width: 100%;}
.computer_ill .comp img{width: 100%;}
.computer_ill .comp_dot{
    border-radius: 23px 23px 0 23px;
    color: dimgrey;
    background: white;
    position: absolute;
    text-align: left;
    padding: 10px 20px;
    font-weight: bold;
    color: #2a2a3e;
    box-shadow: 3px 4px 14px 0px #00000017;
    z-index: 999;
    margin-top: 0px;
    opacity: 1;
    transition: opacity 500ms ease-in-out, margin-top 500ms ease-in-out;
}
.computer_ill .comp_dot span {
    font-size: 9pt;
    display: block;
    margin: 0 0-5px 0;
    color: darkgrey;
}

.computer_ill .comp_dot.start{margin-top: 10px; opacity: 0;}

.content .contentbox .boxin.cont_photo{    background: #ffffff; padding:   15px;
    box-shadow: 9px 10px 19px 6px #00000017;}
.content .contentbox .boxin.cont_photo img{max-width: 80%; margin-left: 0; border-radius: 50%; margin: 15px auto ; display: block;
    filter: grayscale(25%);
}
.content .contentbox .boxin.cont_photo p a{color:black;}
.content .contentbox .boxin.cont_photo h2{border-color:transparent; border-width: 0 0 0 0px; }
.contboxes {margin-top: -80px;}

@keyframes bg2 {
    0%, 100% {
        background-color: #29A5FF;
    }
    25% {
        background-color: #2e9d3b;
    }
    50% {
        background-color: #29A5FF;
    }
    75% {
        background-color: #329318;
    }
}

.contact{width: 100%; margin-top: -80px;}
.block.contact .content{border-color:rgb(255 255 255 / 10%)}
.block.contact .content:before{border-color: rgb(255 255 255 / 10%)}
.block.contact .content:after{border-color: rgb(255 255 255 / 10%)}

.contact .openclaim{    border-style: solid;
    border-width: 0 0 0 2px;
    border-color: white;

    color: white;
    font-size: 23px;
    margin: 0 0 0 -15px;
    padding: 0 0 0 15px;}



.contact label{width: 100%;  padding: 15px 0 0px 15px; display: inline-block;  opacity: .8; font-size: 10pt; font-weight: bold;}
.contact .select{      transition: all 200ms ease-in-out;
    background: white;
    font-size: 10pt;
    cursor: pointer;
    color: black;
    font-weight: bold;
    padding: 15px 0 15px 45px;
    text-align: left;
    display: inline-block;
    border-radius: 15px;
    width: 100%;
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-color: #e8e8e8;
    }
.contact .select:before{     content: " ";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
    border-color: #e8e8e8;
    position: absolute;
    left: 12px;
    top: 50%;
    font-family: "Font Awesome 5 Pro";
    margin: -7px 0 0 0; }
.contact .select:hover{opacity: 1; background: white; transform: translate(0,-2px) scale(1.005,1.005);    box-shadow: 3px 4px 14px 0px #00000017;}
.contact .select.aktivni{color:white; background: #42b584;}
.contact .select.aktivni:before{ background: none; border:white; content: "\f00c"; color:white;}

.contact .line{margin: 0  7px; }
.contact .line .col{padding: 7px; float:left; width: 100%;}
.contact .line .thrd{width: 33.3333%;}
.contact .line .qutr{width: 50%;}
.contact .select span{display:block; opacity: .8; font-size: 9pt; margin: -3px 0; }

.contact input, .contact textarea{
    border-width: 1px;
    border-style: solid;
    border-color: #e8e8e8;
    border-radius: 15px;
    font-weight: bold; text-align: left;
    padding: 15px;
    font-family: 'Mukta', sans-serif;
    width: 100%;
}
.contact textarea{ min-width: 100%; max-width: 100%;}

form {position: relative; z-index: 99; color:black; padding: 3px;}

.contact button{     display: block;
    margin: 5px auto 5px auto;
    width: 280px;
    float: none;
    color:black !important;
    font-size: 12pt;
    border-width: 1px;
    border-style: solid;
    border-color: #e8e8e8;
    border-radius: 25px;
    padding: 15px;
}


form:valid button{
    border-color: #42b584;
    background: #42b584 !important;
    color: white !important;

}


.contact .small{padding: 15px; font-size: 9pt; opacity: .5; text-align: center;}

/*
.contact .line:has(input:required:valid){
    background: green;
}
input:not(:placeholder-shown) {
    border-color: green;
}
textarea:not(:placeholder-shown) {
    border-color: green;
}*/

form input:focus, form textarea:focus{outline: none; opacity: 1; background: white; transform: translate(0,-2px) scale(1.005,1.005);    box-shadow: 3px 4px 14px 0px #00000017;  transition: all 200ms ease-in-out;}


.infowin{background: #e67322;    padding: 15px 0; font-size: 10pt; color:white;}
.infowin .text{padding: 10px 0; float:left;}





@media screen and (max-width: 650px) {

    .computer_ill{width: 90%; }
    .computer_ill .comp_dot{
        display: none;
    }
    .content .contentbox .boxin {
        width: 50%;
    }
    .content:before {
        display:none
    }
    .home .open-col6 {
        width: 100%;
    }
    .content .contentbox .boxlarge {
        width: 100%;
    }
    .content .contentbox .boxlarge.tripple {
        width: 100%;
    }
    .content .contentbox .boxlarge.tripple .boxlargein {
        width: 50%;
    }
    .content .contentbox .boxlarge2 {
        width: 100%;
    }

    .contact .content .contentbox .boxin { display:none }
    .contact .content .contentbox .boxlarge {
        width: 90%;
        margin: 0 auto;
        float: none;
    }

    .contact .line .qutr {
        width: 100%;
    }
    .contact .line .thrd {
        width: 100%;
    }
    .contact button {
        width: 80%;
    }
    .landingphone{
      display: none;
    }
    .menu{
      display: none;
    }
    .home .box .btn {
        margin: 0 0px 15px 0px;
    }

    .contact {
        clip-path: polygon(0 0, 100% 2%, 100% 100%, 0% 100%);
    }
    .block.dark.foot {
        clip-path: polygon(0 0, 100% 2%, 100% 100%, 0% 100%);
    }
    .block.dark {
        clip-path: polygon(0 0, 100% 2%, 100% 100%, 0% 98%);
    }

    .content .contentbox .imgsquare {
        aspect-ratio:inherit;
        padding: 50px;
    }
}



@media screen and (max-width: 480px) {

    .content:after {
        display:none;
    }
    .content .contentbox .boxlarge {
        width: 100%;
    }
    .content .contentbox .boxin {
        width: 100%;
    }

    .content .contentbox .boxlarge .boxlargein {
        width: 100%;
    }
    .content .contentbox .boxlarge.tripple .boxlargein {
        width: 100%;
    }
    .content .contentbox .boxlarge .boxlargein .img {
        aspect-ratio: initial;
    }
    .content .contentbox .boxlarge .boxlargein .textsquare {
        aspect-ratio: initial;
    }
}