@font-face {
    font-family: 'lineto-circular';
    src: url(../fonts/lineto-circular-pro-bold.ttf);
    font-weight: 700;
}

@font-face {
    font-family: 'lineto-circular';
    src: url(../fonts/lineto-circular-pro-black.ttf);
    font-weight: 500;
}
@font-face {
    font-family:Circular-Black;
    src: url(../fonts/lineto-circular-pro-bold.ttf);
    font-weight: 700;
}

@font-face {
    font-family:Circular;
    src: url(../fonts/lineto-circular-pro-bold.ttf);
    font-weight: 500;
}
@media (min-width: 768px) {
body {
    margin:0;
    padding:0;
    overflow: hidden;
    background: black;
    width: 100%;
    height: 100vh;
}
}
text {
	font-family:Circular;
-webkit-transform-style: preserve-3d;
}
svg#Layer_1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-item-align: center;
        align-self: center;
    height: 100%;
    width: 100%;
}

.hidden {
    display: none;
}
.logo {padding-top:37px}
html {
	background: black;
}
.logotext {max-width:380px;color:white;font-size:45px;font-family:Circular-Black;position:absolute;top: 170px;animation-duration: 2s;}
.logotext > p,.logotext2 > p {margin:0}
.blurme { 
-webkikt-filter: url('#myblurfilter'); 
filter: url('#myblurfilter'); }
.blurme2 { 
-webkikt-filter: url('#myblurfilter2'); 
filter: url('#myblurfilter2'); }

.logotext2 {
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    max-width: 380px;
    color: white;
    font-size: 48px;
    font-family: Circular-Black;
    position: absolute;
    top: 170px;
}
.blurdown {opacity: 0;}
body.zoomed .blurdown {
	position:absolute;
/* height:100px; */
width:100%;
background:#000;
filter:blur(60px);
 animation: opacity .3s ease-in 0.7s forwards;
}

body.zoomed .logotext {
    animation: hide .3s ease-in .1s forwards;
}
body.zoomed .logotext2 {
    animation: opacity .3s ease-in 2.7s forwards;
}
@-webkit-keyframes overlayHide {
  from {
    opacity: 1;
        visibility: visible;
  }
  to {
    opacity: 0;
        visibility: hidden;

    }
}

@keyframes overlayHide {
  from {
    opacity: 1;
        visibility: visible;
  }
  to {
    opacity: 0;
        visibility: hidden;

    }
}

@-webkit-keyframes workflow {
  from {
    stroke-dashoffset: 3482;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes workflow {
  from {
    stroke-dashoffset: 3482;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes workflowTwo {
  from {
    stroke-dashoffset: 1660;

  }
  to {
    stroke-dashoffset: 2060;
  }
}
@keyframes workflowTwo {
  from {
    stroke-dashoffset: 1660;

  }
  to {
    stroke-dashoffset: 2060;
  }
}

@keyframes workflowMob1 {
  from {
    stroke-dashoffset: 495;

  }
  to {
    stroke-dashoffset: 0;
  }
}

        
@-webkit-keyframes circlegreen {
  from {
    fill: #232323;
  }
  to {
    fill: #74c36a;

  }
}
        
@keyframes circlegreen {
  from {
    fill: #232323;
  }
  to {
    fill: #74c36a;

  }
}

@-webkit-keyframes circleyellow {
  from {
    fill: #232323;
  }
  to {
    fill: #f9f270;

  }
}

@keyframes circleyellow {
  from {
    fill: #232323;
  }
  to {
    fill: #f9f270;

  }
}
        
@-webkit-keyframes opacity {
  from {
    opacity: 0;
        visibility: hidden;
  }
  to {
    opacity: 1;
        visibility: visible;
  }
}
        
@keyframes opacity {
  from {
    opacity: 0;
        visibility: hidden;
  }
  to {
    opacity: 1;
        visibility: visible;
  }
}


@-webkit-keyframes hide {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}


@keyframes hide {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.pl-140{padding-left: 140px;}
.st4375 {
    stroke-dasharray: 3480;
    stroke-dashoffset: 3482;
    -webkit-animation: workflow 6s linear 2s forwards;
            animation: workflow 6s linear 2s forwards;
    stroke: url(#linear)!important;
}



.st4379 {
    stroke-dasharray: 3480;
    stroke-dashoffset: 3482;
    -webkit-animation: workflow 6s linear 2s forwards;
            animation: workflow 6s linear 2s forwards;
    stroke: url(#linear2)!important;
}
.twopartLines, .twopartLinesFirst {
    fill:none;
    stroke:#232323;
    stroke-width: 4;
    stroke-miterlimit: 10;
}
.twopartLinesBg {
    fill:none;
    stroke:#232323;
    stroke-width: 4;
    stroke-miterlimit: 10;
}
#st4376_f, #st4374_f,.debls-812 {
    fill: #232323;
    -webkit-animation: circlegreen .1s ease-in 0.95s forwards;
            animation: circlegreen .1s ease-in 0.95s forwards;
}
#st4376_l {
    fill: #232323;
    -webkit-animation: circleyellow .5s ease-in 3.2s forwards;
            animation: circleyellow .5s ease-in 3.2s forwards;
}
#st2277_l {
    fill: #232323;
    -webkit-animation: circleyellow .5s ease-in 2.7s forwards;
            animation: circleyellow .5s ease-in 2.7s forwards;
}
#oneTooltip {
    opacity:0;
    visibility: hidden;
    -webkit-animation: opacity 1s ease-in 2.5s forwards;
            animation: opacity 1s ease-in 2.5s forwards;
}
.answer1box {
    opacity:0;
    visibility: hidden;
    -webkit-animation: opacity 1s ease-in 2.5s forwards;
            animation: opacity 1s ease-in 2.5s forwards;
}
.answer2box {
-webkit-transform-style: preserve-3d;
    opacity:0;
    visibility: hidden;
    -webkit-animation: opacity 1s ease-in 3s forwards;
            animation: opacity 1s ease-in 3s forwards;
}

#oneTooltip.hide,.answer1box.hide,.answer1box.hide {
-webkit-animation: hide .3s ease-in .1s forwards;
        animation: hide .3s ease-in .1s forwards;
    opacity:1;
    visibility: visible;
	-webkit-transform-style: preserve-3d;
	
}
                

.overlay {
    position: absolute;
    background: black;
    width: 100%;
    height: 100vh;
    z-index: 1;
    -webkit-animation: overlayHide 1.4s linear 0.5s forwards;
            animation: overlayHide 1.4s linear 0.5s forwards;

}

.zoomObject {
    -webkit-transition: 0.8s;
    transition: 1.5s;
               -webkit-transform: scale(2.8) translate(-398px, 43px);
               transform: scale(2.8) translate(-398px, 43px);


}
.st4384 {
    fill: #232323;
}
.partTwoCircleHidden {
    opacity: 0;
    -webkit-transition: 2s;
    transition: 2s;
}

.zoomObject .st4384, .zoomObject .st2105, .zoomObject .st2103 {
        -webkit-animation: circlegreen .1s ease-in 1.4275s forwards;
                animation: circlegreen .1s ease-in 1.4275s forwards;
}
 .zoomObject .st1627 {
        -webkit-animation: circleyellow 2s ease-in 2.5s forwards;
                animation: circleyellow 2s ease-in 2.5s forwards;
		
}
.zoomObject .st1623 {
	        -webkit-animation: circlegreen 2s ease-in 2.5s forwards;
                animation: circlegreen 2s ease-in 2.5s forwards;
}

.zoomObject .flc1 {
	        -webkit-animation: circleyellow 1s ease-in 2.5s forwards;
                animation: circleyellow 1s ease-in 2.5s forwards;
	
}
.zoomObject .st4375 {
    stroke-dasharray: 3480;
    stroke-dashoffset: 3482;
    -webkit-animation: workflow 6s linear 1s forwards;
            animation: workflow 6s linear 1s forwards;
    stroke: url(#step2leftline)!important;
}
.cls-7{fill:url(#radial-gradient-3);stroke:url(#radial-gradient-4);}
.zoomObject .twopartLines {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1660;
    -webkit-animation: workflowTwo 2s linear 3s forwards;
            animation: workflowTwo 2s linear 3s forwards;
    stroke: url(#linear)!important;
}
.zoomObject .greenmidline {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1660;
    -webkit-animation: workflowTwo 2s linear 2s forwards;
            animation: workflowTwo 2s linear 2s forwards;
    stroke: url(#linearmidline)!important;
}
.zoomObject .twopartLinesFirst {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1660;
    -webkit-animation: workflowTwo 2s linear 1s forwards;
            animation: workflowTwo 2s linear 1s forwards;
    stroke: url(#linear)!important;
}
.partTwoHideLineBlack {
    opacity: 0;
    -webkit-transition: 1;
    transition: 1;
}
.zoomObject .partTwoCircleHidden {
	fill: #232323;
    opacity: 1;
	-webkit-animation: circleyellow .1s ease-in 2.85s forwards;
	        animation: circleyellow .1s ease-in 2.85s forwards;

}
.zoomObject .partTwoHideLineBlack {
    opacity: 1;
}


.title {
    font-family: 'lineto-circular';
    font-size: 45px;
    color: white;
    max-width: 380px;
    padding-top: 120px;
    z-index: 2;
    position: absolute;
}

.logo {
    position: absolute;
    top:30px;
    z-index: 10;
}

.st2999, .st2998, .st2995,text.ans1,text.ans2,text.ans3,.panir1,.panir2,.panir3,.panir4 {
	opacity:0;
	visibility:hidden;
	-webkit-transition: 3s;
	transition: 3s;

}
.zoomObject .abstep2-1,.zoomObject .ans1,.zoomObject .panir1 {-webkit-animation: opacity 1s ease-in 3s forwards;animation: opacity 1s ease-in 2s forwards;}
.zoomObject .abstep2-2,.zoomObject .ans2,.zoomObject .panir2 {-webkit-animation: opacity 1s ease-in 4s forwards;animation: opacity 1s ease-in 3s forwards;}
.zoomObject .abstep2-3,.zoomObject .ans3,.zoomObject .panir3 {-webkit-animation: opacity 1s ease-in 5s forwards;animation: opacity 1s ease-in 4s forwards;}
.zoomObject .panir4 {-webkit-animation: opacity 1s ease-in 0s forwards;animation: opacity 1s ease-in 0s forwards;}

.st2999 {
	    fill: #FFF96D!important;
}
.st2998 {
    fill: #43F377!important;
}
.st2995 {
    fill: #CAFF79!important;
}
	.st2975{fill:none;stroke:#333333;stroke-width:6;stroke-miterlimit:10;}
	.st2976{fill:none;stroke:url(#SVGID_2983_);stroke-width:6;stroke-miterlimit:10;}
	.st2977{fill:url(#st4374_f_1_);}
	.st2978{fill:none;stroke:url(#SVGID_2984_);stroke-width:6;stroke-miterlimit:10;stroke-dasharray:3480;stroke-dashoffset:3482;}
	.st2979{fill:#333333;}
	.st2980{fill:none;stroke:url(#SVGID_2985_);stroke-width:6;stroke-miterlimit:10;}
	.st2981{fill:none;stroke:url(#SVGID_2986_);stroke-width:6;stroke-miterlimit:10;stroke-dasharray:3480;stroke-dashoffset:3482;}
	.st2982{display:none;fill:url(#SVGID_2987_);stroke:url(#SVGID_2988_);stroke-miterlimit:10;}
	.st2983{display:none;fill:#CAFF79;}
	.st2984{fill:#010000;}

	.st2986{font-size:18px;}
	.st2987{display:none;fill:url(#SVGID_2989_);stroke:url(#SVGID_2990_);stroke-miterlimit:10;}
	.st2988{display:none;fill:#43F377;}
	.st2989{fill:none;stroke:url(#SVGID_2991_);stroke-width:4;stroke-miterlimit:10;}
	.st2990{fill:url(#SVGID_2992_);}
	.st2991{fill:none;stroke:url(#SVGID_2993_);stroke-width:4;stroke-miterlimit:10;}
	.st2992{fill:none;stroke:url(#SVGID_2994_);stroke-width:4;stroke-miterlimit:10;}
	.st2993{fill:url(#SVGID_2995_);stroke:url(#SVGID_2996_);stroke-miterlimit:10;}
	.st2994{fill:url(#SVGID_2997_);stroke:url(#SVGID_2998_);stroke-miterlimit:10;}
	.st2995{fill:#CAFF79;transform: scale(1.25) translate(-292px,-88px);}
	.st2996{font-size:5.33px;}
	.st2997{fill:url(#SVGID_2999_);stroke:url(#SVGID_3000_);stroke-miterlimit:10;}
	.st2998{fill:#43F377;transform: scale(1.23) translate(-250px,-77px);}
	.st2999{fill:#FFF96D;transform: scale(1.25) translate(-252px,-80px);}
.st2996 {
    font-size: 5.33px;
}

.st2993 {
    fill: url(#SVGID_2995_);
    stroke: url(#SVGID_2996_);
    stroke-miterlimit: 10;
}
.hideonmob{display:none}
.hideoneTablet {display:none}
.panir1 {fill-opacity: 0.5;
    stroke-opacity: 0.1;

	}
.panir2 {fill-opacity: 0.5;
    stroke-opacity: 0.1;

	}
.panir3 {fill-opacity: 0.5;
    stroke-opacity: 0.1;

	}
.panir4 {
	fill-opacity: 1;
    stroke-opacity: 0.1;
}
.debls-891, .answer2box {
		cursor:pointer;
}
@media  (min-width: 1100px) and (max-width: 1500px){
	.zoomObject {
    -webkit-transition: 0.8s;
    transition: 1.5s;
               -webkit-transform: scale(2.8) translate(-295px, 43px);
               transform: scale(2.8) translate(-295px, 43px);
}
}
@media all and (max-width: 768px){
	.blurme2 { 
-webkikt-filter: url('#myblurfilter3'); 
filter: url('#myblurfilter3'); }
	.blurdown {opacity: 0;}
body.zoomed .blurdown {
position: absolute;
    height: 167px;
    margin-top: -35px;
    width: 100%;
    background: #000;
    filter: blur(35px);
    animation: opacity .3s ease-in 0.7s forwards;
}
.logo {padding-top:7px}
.logo > img {width:122px}
.logotext,.logotext2 {max-width:210px;color:white;font-size:24px;font-family:Circular-Black;position:absolute;top: 90px;animation-duration: 2s;}

.debls-815 {
        stroke: url(#linear2Mob)!important;
}
.debls-816 {
            stroke: url(#linearMob)!important;
}
.debls-815, .debls-816 {
    stroke-dasharray: 532;
    stroke-dashoffset: 536;
    animation: workflowMob1 4s linear 2s forwards;
}

.debls-81 {
    fill:#232323;
    animation: circlegreen .3s ease-in 1.9s forwards;
}
.debls-890, .debls-896, .debls-891,.debls-894,.debls-888{
    opacity: 0;
    visibility: hidden;
    animation: opacity 1s ease-in 6s forwards;
}
.debls-891.mek, .debls-896.mek,.debls-894 {
        animation: opacity 1s ease-in 5s forwards!important;
}
 .debls-881 {
   fill: #caff79; 
}

.debls-1173e {
fill:#FFF46D }
.debls-890e  {
fill:#CAFF79 }
.debls-896e {
fill:#43F377 }


.debls-1171, .debls-1177,.debls-1179  {opacity:0;visibility:hidden}
.zoomshowmob {
    opacity: 0!important;
    visibility: hidden!important;
}

    .zoomObject .debls-1173e, .zoomObject .debls-1171 {
        animation: opacity 1s ease-in 4s forwards;
    }
    .zoomObject .debls-890e, .zoomObject .debls-1177 {
        animation: opacity 1s ease-in 4.5s forwards;
    }
    .zoomObject .debls-896e, .zoomObject .debls-1174,.zoomObject .debls-1179 {
        animation: opacity 1s ease-in 5s forwards;
    }
.zoomObject .debls-881 {     
	fill:#232323;
    animation: circlegreen .3s ease-in 3.1s forwards;}
.zoomObject .debls-883 {     
	fill:#232323;
    animation: circlegreen .3s ease-in 3.9s forwards;}
.zoomObject .debls-884 {     
	fill:#232323;
    animation: circlegreen .3s ease-in 4.8s forwards;}
	.zoomObject .debls-884ss {     
	fill:#232323;
    animation: circleyellow .3s ease-in 3.8s forwards;}
.zoomObject .debls-890, .zoomObject .debls-891 {

    animation: hide 1s ease-in 0s forwards!important;

}
.zoomObject .debls-882 { stroke: #232323}
.zoomObject .debls-882,.zoomObject .debls-886  {
	 stroke: url(#linearMob)!important;
	 stroke-width: 2px;
}

.zoomObject .debls-885 {
	 stroke: url(#linearMob3)!important;
	 stroke-width: 2px;
}
.zoomObject .debls-882 {
	
    stroke-dasharray: 492;
    stroke-dashoffset: 495;
    animation: workflowMob1 4s linear 3.1s forwards;
}
.zoomObject .debls-885 {
	
    stroke-dasharray: 492;
    stroke-dashoffset: 495;
    animation: workflowMob1 4s linear 3.9s forwards;
}
.zoomObject .debls-886 {
	
    stroke-dasharray: 492;
    stroke-dashoffset: 495;
    animation: workflowMob1 4s linear 4.8s forwards;
}

    .zoomObject {
        -webkit-transition: 3s;
        transition: 3s;
		-webkit-transform: scale(3) translate(-33%,-5%);
            transform: scale(3) translate(-33%,-5%);
    }
    
    .title {
        font-family: 'lineto-circular';
        font-size: 35px;
        color: white;
        max-width: 270px;
        padding-top: 111px;
        padding-left: 20px;
    }
    .first-link {
        right: 47%;
        bottom: 53%;
        padding: 70px 140px;
    }
}

@media all and (min-width: 1440px) {
    .first-link {
        right: 62%;
        bottom: 49%;
    }
}

@media all and (min-width: 1200px) {
    .first-link {
        right: 60%;
        bottom: 47%;
    }

}
@media (min-width: 922px) and (max-width: 1199px) {
    .first-link {
        right: 63%;
        bottom: 47%;
    }
.zoomObject {
    -webkit-transition: 0.8s;
    transition: 1.5s;
    -webkit-transform: scale(3.8) translate(-21vw, 43px);
    transform: scale(3.8) translate(-21vw, 43px);
}
}
@media  (min-width: 769px) and (max-width: 970px) {
	.hideoneTablet {display:block}
	.hideoneDT{display:none}
	.hideonmob{display:none}
    .first-link {
        right: 63%;
        bottom: 47%;
    }
.logotext { font-size: 33px;}
.zoomObject {
    -webkit-transition: 3s;
    transition: 3s;
        -webkit-transform: scale(2.8) translate(-31.5%, 7%);
           transform: scale(2.8) translate(-31.5%, 7%);
}
.zoomObject .answer2box {
    visibility: hidden;
    opacity: 0;
    animation: hide 3s ease-in 6s forwards;
}
}

.container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-right: 15px;
    padding-left: 15px;
}

@media (max-width: 768px) {
.hideoneDT{display:none}
.hideonmob {display:block}
.hideoneTablet {display:none}

}

@media (min-width: 768px) {
    .container {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width: 992px) {
    .container {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width: 1200px) {
    .container {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width: 576px) {
    .container {
        width: 540px;
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .container {
        width: 720px;
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    .container {
        width: 960px;
        max-width: 100%;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
        max-width: 100%;
    }
}