@charset "UTF-8";

/*
Theme Name: KOPIX
Version: 99999999.7

*/
html {
    box-sizing: border-box
}
body {
    font-size: 18px;
    background-color: white;
    margin: 0px auto!important;
    position: relative;
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
    overflow-x: hidden;
    background-color: white;
    transition: all .5s;
}
*, :after, :before {
    box-sizing: inherit
}
ol, ul {
    list-style-type: none
}
blockquote, body, dd, dl, figure, h1, h2, h3, h4, h5, h6, li, ol, p, ul {
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 300;
}
hr, pre {
    margin: 0;
    line-height: 1.3rem
}
hr {
    border-style: none;
    background: #19cade;
    height: .125em
}
.aligner:after, .aligner:before {
    display: table;
    line-height: 0
}
.aligner>.aligner {
    clear: none
}




a {color: #4e2113;text-decoration:none;font-weight:bold;transition: all .3s;-webkit-transition: all .3s}
footer a {/* border-bottom: 1px solid #737373; */padding-bottom:4px;color: #eed6ad;display: inline-block;}
footer a:hover {transform: scale(1.09);}
a#more {

}

h2 {font-weight:bold;margin-bottom: 20px;color: white;display: none;}
.finished-video h2 {display:block}
.intro-part {
    height: 100vh;
    align-items: center;
    justify-content: center;
    display: flex;
    /* display: block; */
    /* margin: 0px auto; */
    /* max-height: 800px; */
    flex-direction: column;
    align-items: center;
    /* justify-content: left; */
    /* height: auto; */
}

.hero-video {
    background-color: #29b473;
    /* width: 100vw; */
    margin: 0px auto;
    position: relative;
    height: auto;
    overflow: hidden;
    z-index: 0;
    border-radius: 20px;
    line-height: 0;
    margin: 20px;
    font-size: 0;
    /* border: 2px solid transparent; */
    box-sizing: border-box;
    /* max-height: 96vh; */
    /* max-width: 1640px; */
    transition: all .3s;
}

.hero-video videooo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: .69;
}

.hero-video video {width: 100%;/* opacity: 0; *//* display: none; */position: relative;z-index: 0;transition: all .73s;max-width: 1400px;}


.hero-video {}

.over-video {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    font-size: 1rem;
    /* overflow: visible; */
}


#content {font-size:0;display: block;width: 100%;height: 100%;}
#content .left {
    font-size: 1rem;
    color: white;
    line-height: 2rem;
    width: 50%;
    display: inline-block;
    /* background-color: red; */
    height: 100%;
    vertical-align:middle;
    padding: 70px;
    color: #150035;
    z-index: 99;
    position: relative;
    align-items: center;
    justify-content: left;
    /* display: inline-flex; */
    /* flex-direction: column; */
    /* align-items: unset; */
}

#content .right {
    font-size: 1rem;
    color: white;
    line-height: 2rem;
    width: 50%;
    display: inline-block;
    /* background-color: blue; */
    height: 100%;
    vertical-align:middle;
    overflow: visible;
}

#content .right:after {content:"";width:100%;height:100%;display:block;background-image: url(art2.svg);background-repeat: no-repeat;background-position: right;position: absolute;top: 0;right: 0;z-index: 1;}
#content .right:before {content:"";width:100%;height:100%;display:block;background-image: url(art1.svg);background-repeat: no-repeat;position: relative;background-position: 20% 34%;z-index: 2;margin-left: 30px;}


#content .logo {
    width: 139px;
    height: 50px;
    background-image: url(logo.svg);
    display: block;
    background-repeat: no-repeat;
    background-position: left;
    /* background-color: black; */
    background-size: contain;
}
#content ul {margin: 40px 0px;/* margin-bottom: 10%; */}
#content ul li {
    font-weight: bold;
    font-size: 1.027rem;
    margin-bottom: 8px;
}
#content ul li:before {content:"";display:inline-block;vertical-align:middle;width:50px;height:50px;/* background-color:green; */margin-right:10px;background-image: url(art3.svg);background-size: 120px;background-position: -34px -23px;margin: 2px 14px 2px -6px;}

#content ul li:nth-child(1):before {}
#content ul li:nth-child(2):before {
    background-position: -34px -98px;
}
#content ul li:nth-child(3):before {
    background-position: -34px -174px;
}
#content ul li:nth-child(4):before {
    background-position: -34px -250px;
}


#content .btn {
    display: block;
    height: 60px;
    width: 290px;
    background-color: white;
    margin-bottom: 10px;
    align-self: normal;
}


#content .btn.btn2 {background-color:#150035}



#content .btn:after {content:"";width:20px;height: 31px;/* background-color:red; */display:inline-block;vertical-align:middle;margin-top: 8px;margin-left: 29px;background-image: url(art3.svg);background-size: 99px;background-position: -38px -264px;transition: all .3s;}
#content .btn:before {content:"";width: 201px;height: 42px;/* background-color:blue; */display:inline-block;vertical-align:middle;margin-top: 8px;margin-left: 16px;}

#content .btn:hover:after {margin-left: 37px;}

#content .btn.btn1:after {}
#content .btn.btn1:before {
    background-image: url(logo-1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}

#content .btn.btn2:after {
    background-position: -38px -324px;
}
#content .btn.btn2:before {
    background-image: url(logo-2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}

.copyright {display: block;font-size: .8rem;margin-top: -40px;margin: 20px auto;max-width: 1310px;/* margin-top: -40px; *//* clear: both; */text-align: left;align-items: center;justify-content: center;flex-direction: row;padding-bottom: 40px;color: #150035;transition: all .3s;width: 100%;text-align: center;}

#content .logo {display:none}
.finished-video #content .logo {display:block}


#content ul {display:none}
.finished-video #content ul {display:block}

#content .btn {display:none}
.finished-video #content .btn {display:block;/* display: inline-block; */}



#content .right:after {display:none}
.finished-video #content .right:after {display:block}


#content .right:before {display:none}
.finished-video #content .right:before {display:block}


.finished-video video {/* opacity:0; */margin-left: -100%;}
.finished-video .hero-video {/* width:1px; */}

body.finished-video {/* background-color: #150037; */}
body.finished-video .copyright {
    /* padding-left: 40px; */
}
.copyright a {color:#29b473; font-size:inherit; font-weight:bold;}


#content .logo {opacity: 0;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation: contactTop 520ms ease-out .5s forwards;
    -moz-animation: contactTop 520ms ease-out .5s forwards;
    -ms-animation: contactTop 520ms ease-out .5s forwards;
    animation: contactTop 520ms ease-out .5s forwards;
}


#content .right:after {opacity: 0;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation: contactTop 520ms ease-out 1.5s forwards;
    -moz-animation: contactTop 520ms ease-out 1.5s forwards;
    -ms-animation: contactTop 520ms ease-out 1.5s forwards;
    animation: contactTop 520ms ease-out 1.5s forwards;
}


#content .right:before, h2 {opacity: 0;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation: contactTop 520ms ease-out 1s forwards;
    -moz-animation: contactTop 520ms ease-out 1s forwards;
    -ms-animation: contactTop 520ms ease-out 1s forwards;
    animation: contactTop 520ms ease-out 1s forwards;
}


#content ul,  .copyright {opacity: 0;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation: contactTop 520ms ease-out 1.3s forwards;
    -moz-animation: contactTop 520ms ease-out 1.3s forwards;
    -ms-animation: contactTop 520ms ease-out 1.3s forwards;
    animation: contactTop 520ms ease-out 1.3s forwards;
}


#content .btn.btn1 {opacity: 0;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation: contactTop 520ms ease-out 1.5s forwards;
    -moz-animation: contactTop 520ms ease-out 1.5s forwards;
    -ms-animation: contactTop 520ms ease-out 1.5s forwards;
    animation: contactTop 520ms ease-out 1.5s forwards;
}


#content .btn.btn2 {opacity: 0;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation: contactTop 520ms ease-out 1.8s forwards;
    -moz-animation: contactTop 520ms ease-out 1.8s forwards;
    -ms-animation: contactTop 520ms ease-out 1.8s forwards;
    animation: contactTop 520ms ease-out 1.8s forwards;
}


@-webkit-keyframes contactTop{
    0%{
        opacity:0;
        -webkit-transform:translateY(-19px)
}
    100%{
        opacity:1;
        -webkit-transform:translateY(0)
}
}
@-moz-keyframes contactTop{
    0%{
        opacity:0;
        -moz-transform:translateY(-19px)
}
    100%{
        opacity:1;
        -moz-transform:translateY(0)
}
}



@media only screen and (min-width: 221px) and (max-width: 880px) {



.over-video {position:relative;height: auto;width: initial;}
    #content .left {width: 100%;padding: 40px 20px 20px 20px;text-align: center;}
.finished-video video {margin-top:-100%;margin-left: 0; opacity:0;}
    .hero-video {/* margin:10px; */background-color: white;border-radius: 0;}
    .finished-video .hero-video {background-color:#29b473;border-radius: 20px;}
    .intro-part {padding: 10px 0px;display: block;border-radius: 0;}

    .copyright {display:block; padding:20px; font-size:.7rem; padding-left:60px; opacity:0}
    .finished-video .copyright {opacity:1}
    #content .right {display:block;width:100%;height: 31vh;padding-bottom: 40px;}
    #content ul {margin: 60px auto 40px auto;text-align: left;max-width: 190px;}
    #content .logo {margin:20px auto}
    #btn-holders {margin:20px auto;max-width: 291px;display:block;text-align: center;}
    .copyright {text-align:center}
}