body {
    margin:0;padding:0;
	height: 100vh;
	position: relative;
	background-color: #f5f5f5;
    overflow-x:hidden;
    background:#f9f9f9;
}
.anton { font-family:'Anton';}
.tangerine { font-family:'Tangerine';}

.design { position:absolute; font-family:'Tangerine'; color:#999; font-size:2rem; margin-left:6px; margin-top:-11px;}

.first-cont {
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
    background:#f1f1f1;
}

.navbar { padding: 0 1rem; transition: all 0.3s linear; line-height:2; border-bottom:1px solid #f1f1f1; }

.navbar .container {
    border-bottom:1px solid #e1e1e1;
}
.navbar .nav-link {
    border-bottom:2px solid transparent;
    transition: all .3s linear;
}
.navbar .nav-link:hover {
    border-bottom:2px solid #cc1111;
    color:#cc1111 !important;
}

.navbar.scrolled {
    background:#fff;
    border-bottom:1px solid #ddd;
}
.navbar.scrolled .container {
    border-bottom:0;
}


@keyframes stroke {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fadeIn {
	to {
		opacity: 1;
	}
}

@keyframes fadeInText {
	to {
		opacity: 0.9;
	}

}
#ccont {
    position:absolute;
    width:100%;
    height:100%;
    overflow:hidden;

}

#ccont svg { 
    position: absolute; 
	animation: fadeIn 0.5s linear forwards;	
    opacity:0;    
}

.logo-text {
    position:absolute;
    transform: translate(-50%,-50%);
    font-family: 'Raleway', Verdana;
    width:300px;
    text-align:left;
    color:#1c5cb3;
    opacity:0;
}
.l1 { font-size: 2.6rem; animation: fadeInText 1.5s linear forwards; animation-delay:2.5s; top: 65%; left: 50%;  }
.l2 { font-size: 4rem; animation: fadeInText 1.5s linear forwards; animation-delay:3.5s; top: 73%; left: 50%; }

.logo {	
    position:absolute;
	top: 35%;
	left: 50%;
    opacity:0;
	transform: translate(-50%,-50%);
    animation: fadeIn 1.5s linear forwards;	
    animation-delay:1.5s;
}


.logo2 {
	width: 30px;
	height: 30px;
	background-color: #231f20;
	border-radius: 100px;
	opacity: 0;
	animation: fadeIn 0.5s linear forwards;
	animation-delay: 0.5s;
}

.dot { transition: all .5s ease-in-out;  z-index:999; }
.line {    z-index:99; }

.dot:hover circle {
    stroke:#1c5cb3;
    fill:url(#image);
    transition: stroke 1s linear;
    transition: fill 0.3s linear;
}
.dot:hover  {
    cursor:pointer;
    transform:scale(7);
}

.path {
 position:absolute;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

.svg-icon {
  width: 3em;
  height: 3em;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #4691f6;
}

.svg-icon circle {
  stroke: #4691f6;
  stroke-width: 1;
}

.black { color:#333; }
#gallery { width:100%; color:#333; }
#gallery .img {
    background-size:cover;
    height:300px;
}
#gallery .img1 { background-image: url(/img/image1.jpg); }
#gallery .img2 { background-image: url(/img/image2.jpg); }
#gallery .img3 { background-image: url(/img/image3.jpg); }
#gallery .img4 { background-image: url(/img/image4.jpg); }
#gallery .img5 { background-image: url(/img/image5.jpg); }
#gallery .img6 { background-image: url(/img/image6.jpg); }
#gallery .img7 { background-image: url(/img/image7.jpg); }
#gallery .img8 { background-image: url(/img/image8.jpg); }

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.circle {    
  /*stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: stroke 2s ease-out forwards;*/
}

.img-cover {
    position:absolute;
    background:#333;
    width:180px;
    height:111px;
    background-size:cover;
}


#intro {
    background-image: linear-gradient(#f1f1f1, #ddd);
}

@media only screen and (min-width: 1024px) {
    .logo {
        top: 30%;
    }
    .l1 { top: 42%; left: 20%;  }
    .l2 { top: 49%; left: 20%; }
}

html {	scroll-behavior: smooth;}
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}


[class|=space]{display:block;width:100%;overflow:hidden}.space-10{height:10px}.space-15{height:15px}.space-20{height:20px}.space-25{height:25px}.space-30{height:30px}.space-35{height:35px}.space-40{height:40px}.space-45{height:45px}.space-50{height:50px}.space-55{height:55px}.space-60{height:60px}.space-65{height:65px}.space-70{height:70px}.space-75{height:75px}.space-80{height:80px}.space-85{height:85px}.space-90{height:90px}.space-95{height:95px}.space-100{height:100px}.space-105{height:105px}.space-110{height:110px}.space-115{height:115px}.space-120{height:120px}.space-125{height:125px}.space-130{height:130px}.space-135{height:135px}.space-140{height:140px}.space-145{height:145px}.space-150{height:150px}.space-155{height:155px}.space-160{height:160px}.space-165{height:165px}.space-170{height:170px}.space-175{height:175px}.space-180{height:180px}.space-185{height:185px}.space-190{height:190px}.space-195{height:195px}.space-200{height:200px}



.blu { color:#388cff;}

.bottom-container {
	position:relative;
	bottom:0;
	height:60px;
	background:#388cff;
	width:100%;
	color:#eee;	
    margin-top:130px;
}
.bottom-container .left { position:absolute; left:20px; font-size:0.8em;  line-height:60px; }
.bottom-container .right { margin:20px; position:absolute; right:20px; }
.bottom-container .rocket { position:absolute; right:160px; font-size:0.9em; bottom:180px; 
	background:url(/assets/img/brocket.png) no-repeat center center;
	width:110px; height:216px;
}
.bottom-container .cloud { position:absolute; right:60px; font-size:1.2em; bottom:60px; 
	background:url(/assets/img/bcloud.png) no-repeat center center;
	width:350px; height:113px;
}
.socialmediaicons { margin-top:40px;}
.socialmediaicons .fa{
    border-radius: 50%;
	width: 64px;
	line-height:64px;	
	background:#388cff;
	color:#fff;
    font-size:2rem;
    text-align:center;  
}