/**
 * Owl Carousel v2.1.6
 * Copyright 2013-2016 David Deutsch
 * Licensed under MIT (https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE)
 */
.owl-carousel,
.owl-carousel .owl-item { -webkit-tap-highlight-color: transparent; position: relative } 

.owl-carousel { /*display:none; */
 width: 100%; z-index: 1 } 

.owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y } 

.owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 } 

.owl-carousel .owl-stage-outer { position: relative; overflow: hidden; -webkit-transform: translate3d(0, 0, 0) } 

.owl-carousel .owl-item { min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-touch-callout: none } 

.owl-carousel .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d } 

.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled { display: none } 

.owl-carousel .owl-dot,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } 

.owl-carousel.owl-loaded { display: block } 

.owl-carousel.owl-loading { opacity: 0; display: block } 

.owl-carousel.owl-hidden { opacity: 0 } 

.owl-carousel.owl-refresh .owl-item { display: none } 

.owl-carousel.owl-drag .owl-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } 

.owl-carousel.owl-grab { cursor: move; cursor: grab } 

.owl-carousel.owl-rtl { direction: rtl } 

.owl-carousel.owl-rtl .owl-item { float: right } 

.no-js .owl-carousel { display: block } 

.owl-carousel .animated { animation-duration: 1s; animation-fill-mode: both } 

.owl-carousel .owl-animated-in { z-index: 0 } 

.owl-carousel .owl-animated-out { z-index: 1 } 

.owl-carousel .fadeOut { animation-name: fadeOut } 

@keyframes fadeOut { 
 0% { opacity: 1 } 

 100% { opacity: 0 } 
 }

.owl-height { transition: height .5s ease-in-out } 

.owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity .4s ease } 

.owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d } 

.owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000 } 

.owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url(owl.video.play.png) no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform .1s ease } 

.owl-carousel .owl-video-play-icon:hover { -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3) } 

.owl-carousel .owl-video-playing .owl-video-play-icon,
.owl-carousel .owl-video-playing .owl-video-tn { display: none } 

.owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity .4s ease } 

.owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100% } 

/* Arrows */

.owl-nav { position: absolute; top: 0; margin: 0 0 0 0; width: 100%; left: 0; height: 100%; pointer-events: none; } 

.owl-prev,
.owl-next { cursor: pointer; background: transparent; border: none; position: absolute; top: 0; display: block; width: 100px; height: 100%; padding: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; text-indent: -9999px; margin: 0 0 0 0; background-repeat: no-repeat; background-position: center center; pointer-events: all; } 

.owl-prev:hover,
.owl-prev:focus,
.owl-next:hover,
.owl-next:focus { outline: none; } 

.owl-prev:before,
.owl-next:before { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 

.owl-prev.disabled,
.owl-next.disabled { display: none; } 

.owl-prev { left: 0; } 

.owl-next { right: 0;} 

#testimonials .owl-prev:after,
#testimonials .owl-next:after { content: ""; position: absolute; top: 0; width: 50px; height: 100%; background-repeat: no-repeat; background-position: center center; opacity: 0.15; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } 


#testimonials .owl-prev:after { left: 0; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%333333' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e") } 

#testimonials .owl-next:after { right: 0; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%333333' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"); } 

#testimonials .owl-prev:hover:after,
#testimonials .owl-prev:focus:after,
#testimonials .owl-next:hover:after,
#testimonials .owl-next:focus:after { opacity: 0.3; } 

.owl-dots { width: 100%; height: 8px; text-align: center; margin-top: 30px; } 

.owl-dot { width: 8px; height: 8px; background: #ccc; border-radius: 5px; display: inline-block; margin: 0 3px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } 

.owl-dot.active { width: 36px; background: var(--blue); } 
/****************************************************************/

.mt-0 {margin-top:0 !important;} .mt-10 {margin-top:10px !important;} .mt-15 {margin-top:15px !important;} .mt-20 {margin-top:20px !important;} .mt-30 {margin-top:30px !important;} .mt-50 {margin-top:50px !important;} .mt-75 {margin-top:75px !important;} .mt-100 {margin-top:100px !important;} .mt-150 {margin-top:150px !important;} .mb-0 {margin-bottom:0 !important;} .mb-10 {margin-bottom:10px !important;} .mb-15 {margin-bottom:15px !important;} .mb-20 {margin-bottom:20px !important;} .mb-30 {margin-bottom:30px !important;} .mb-50 {margin-bottom:50px !important;} .mb-75 {margin-bottom:75px !important;} .mb-100 {margin-bottom:100px !important;} .mb-150 {margin-bottom:150px !important;} .pt-0 {padding-top:0 !important;} .pt-10 {padding-top:10px !important;} .pt-15 {padding-top:15px !important;} .pt-20 {padding-top:20px !important;} .pt-30 {padding-top:30px !important;} .pt-50 {padding-top:50px !important;} .pt-75 {padding-top:75px !important;} .pt-100 {padding-top:100px !important;} .pt-150 {padding-top:150px !important;} .pb-0 {padding-bottom:0 !important;} .pb-10 {padding-bottom:10px !important;} .pb-15 {padding-bottom:15px !important;} .pb-20 {padding-bottom:20px !important;} .pb-30 {padding-bottom:30px !important;} .pb-50 {padding-bottom:50px !important;} .pb-75 {padding-bottom:75px !important;} .pb-100 {padding-bottom:100px !important;} .pb-150 {padding-bottom:150px !important;} @media (max-width: 768px) {.hide_mob {display:none;} .show_mob {display:block;} .mt-0-mob {margin-top:0;} .mt-10-mob {margin-top:10px !important;} .mt-15-mob {margin-top:15px !important;} .mt-20-mob {margin-top:20px !important;} .mt-30-mob {margin-top:30px !important;} .mt-50-mob {margin-top:50px !important;} .mt-75-mob {margin-top:75px !important;} .mt-100-mob {margin-top:100px !important;} .mt-125-mob {margin-top:125px !important;} .mt-150-mob {margin-top:150px !important;} .mb-0-mob {margin-bottom:0 !important;} .mb-10-mob {margin-bottom:10px !important;} .mb-15-mob {margin-bottom:15px !important;} .mb-20-mob {margin-bottom:20px !important;} .mb-30-mob {margin-bottom:30px !important;} .mb-50-mob {margin-bottom:50px !important;} .mb-75-mob {margin-bottom:75px !important;} .mb-100-mob {margin-bottom:100px !important;} .mb-125-mob {margin-bottom:125px !important;} .mb-150-mob {margin-bottom:150px !important;} .pt-0-mob {padding-top:0 !important;} .pt-10-mob {padding-top:10px !important;} .pt-15-mob {padding-top:15px !important;} .pt-20-mob {padding-top:20px !important;} .pt-30-mob {padding-top:30px !important;} .pt-50-mob {padding-top:50px !important;} .pt-75-mob {padding-top:75px !important;} .pt-100-mob {padding-top:100px !important;} .pt-125-mob {padding-top:125px !important;} .pt-150-mob {padding-top:150px !important;} .pb-0-mob {padding-bottom:0 !important;} .pb-10-mob {padding-bottom:10px !important;} .pb-15-mob {padding-bottom:15px !important;} .pb-20-mob {padding-bottom:20px !important;} .pb-30-mob {padding-bottom:30px !important;} .pb-50-mob {padding-bottom:50px !important;} .pb-75-mob {padding-bottom:75px !important;} .pb-100-mob {padding-bottom:100px !important;} .pb-125-mob {padding-bottom:125px !important;} .pb-150-mob {padding-bottom:150px !important;}}

* { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 

html { scroll-behavior: smooth; width: 100%; overflow-x: hidden;} 

:root { --blue: #5B85DA; --orange: #FF9600; --green: #46DD2C; --purple: #D11A83; --yellow: #FFFD00; --red: #d30e00; } 

body { margin: 0; font-family: 'Kodchasan', sans-serif; font-size: 16px; color: #474747; width: 100%; overflow-x: hidden; } 

a { text-decoration: none; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } 
a:hover { text-decoration: none; } 

header { padding: 150px 0 150px; padding: 100px 0 0 0; } 

section { padding: 75px 0; } 

h1,
h2,
h3 { background: -webkit-linear-gradient(left, var(--blue), var(--orange)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 

h1 { font-size: 256px; font-weight: 200; } 

.h2 { position: relative; display: block; padding: 0 0 20px 0; margin: 0 0 20px 0; } 

.h2:after { position: absolute; bottom: 0; left: 0; content: ""; background: #5b85da; height: 3px; width: 50px; } 

.centered .h2:after { left: 50%; margin: 0 0 0 -25px; } 

.navbar-brand img {height: 20px; width: auto;}

.navbar-nav .nav-link,
.navbar-nav .nav-link:visited,
.navbar-nav .nav-link:link,
.navbar-nav .nav-link:not(.active) { color: #313131; position: relative; height: 68px; line-height: 68px; padding: 0 10px; margin: 0 1px; overflow: hidden; transition: all .35s ease-in-out; text-transform: none; letter-spacing: 0.5px; font-weight: bold; } 


.nav-link.blue:hover,
.nav-link.blue.active { color: #007bff; } 

.nav-link.green:hover,
.nav-link.green.active { color: #26b01c; } 

.nav-link.yellow:hover,
.nav-link.yellow.active { color: #c9c500; } 

.nav-link.orange:hover,
.nav-link.orange.active { color: #fc9300; } 

.nav-link.red:hover,
.nav-link.red.active { color: #fa4545; } 

.nav-link.violet:hover,
.nav-link.violet.active { color: #ff2ba3; } 

.nav-link.magenta:hover,
.nav-link.magenta.active { color: magenta; } 

#about, #expertize, #references, #contact, #testimonials {scroll-margin-top: 67px;}

.navbar { padding: 0 1rem; box-shadow: 0 0 35px rgba(0, 0, 0, 0.3); height: 68px; overflow: hidden; background: white; width: 100vw;} 

.navbar-brand { padding-top: 19px; padding-bottom: 19px; } 

.centered { text-align: center; } 








#hero { padding: 68px 0 0 0; height: 100vh; overflow: hidden; background-image: linear-gradient(180deg, #3a60b1 0%, #5c87b6 100%);} 

.cloud {position: absolute; z-index:9; bottom: -500px; left: 50%; width: 400px; height: 400px; transform: translate(-50%, -50%); opacity: 0.9;}
.cbasel {position: absolute; left: 0; bottom: 0; width: 60%; height: 70px; border-radius: 50px; background: white;}
.cbaser {position: absolute; right: 0; bottom: 0; width: 60%; height: 50px; border-radius: 50px; background: white;}

.c1 {
    position: absolute; left: 5%; bottom: 0; width: 40%; height: 40%; border-radius: 100px; background: white; 
    animation: b1 5s ease-in-out infinite;
}
.c2 {
    position: absolute; left: 50%; bottom: 0; width: 50%; height: 50%; border-radius: 100px; background: white; transform: translateX(-50%); 
    animation: b2 4s ease-in-out infinite;
}
.c3 {
    position: absolute; right: 5%; bottom: 0; width: 30%; height: 30%; border-radius: 100px; background: white; 
    animation: b3 7s ease-in-out infinite;
}

.cslogan {
    text-align:center; width: 100%; padding: 0 5% 5%; font-size: 40px; line-height: 120%; position: absolute; bottom:5%; left:0; color: black;
    background: -webkit-linear-gradient(90deg, #3a60b1, #1e3650);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes b1 { 
0% { width: 40%; height: 40%;} 
50% { width: 35%; height: 35%;} 
100% { width: 40%; height: 40%; } 
}
    
@keyframes b2 { 
0% { width: 50%; height: 50%; } 
50% { width: 52%; height: 52%; } 
100% { width: 50%; height: 50%; } 
}
    
@keyframes b3 { 
0% { width: 30%; height: 30%; } 
50% { width: 25%; height: 25%; } 
100% { width: 30%; height: 30%; } 
}

.path { width: 100%; height: auto; overflow: visible; } 

.path svg { width: 100%; height: auto; } 

.hat { width: 100%; height: auto; z-index: 5; pointer-events: none; display: block; position: absolute; bottom: -100vh; left: 50%; transform: translateX(-50%); /* display: none; */ } 

.hat svg { width: 100%; height: auto; max-height: 90vh; } 

.bg_back { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-repeat: repeat-x; background-position: center left; background-image: url(../images/clouds_b.svg); background-size: auto 100%; animation: b 50s linear infinite; filter: blur(1px); -webkit-filter: blur(1px); opacity: 0.9; } 

.bg_front { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background-repeat: repeat-x; background-position: center left; background-image: url(../images/clouds_f.svg); background-size: auto 100%; animation: f 40s linear infinite; opacity: 0.9; } 

@keyframes f { 
0% { background-position: calc(3.5555 * 100vh) center } 
100% { background-position: calc(-3.5555 * 100vh) center } 
}

@keyframes b { 
0% { background-position: calc(-3.5555 * 100vh) center } 
100% { background-position: calc(3.5555 * 100vh) center } 
}





.slicing, .slogan { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); color: white; text-align: center; z-index: 3; } 
.slogan {text-shadow: 0 0 30px rgba(0, 0, 0, 0.2);}

.slicing span.add, .slogan span.add { font-size: 48px; display: block; color: #fff} 

.t { font-size: 100px; overflow: hidden; height: 50px; line-height: 100px; font-weight: 600; width: 100%; } 
.slogan .t { font-size: 100px; line-height: 120%; font-weight: 600; height: auto; width: 100%; overflow: visible; min-height: 120px; } 

.b { font-size: 100px; overflow: hidden; height: 62px; line-height: 100px; font-weight: 600; width: 100%; } 

.t span { display: block; width: 100%; text-align: center;} 

.b span { position: absolute; bottom: 12px; left: 0; display: block; width: 100%; text-align: center;} 








#about { overflow-x: hidden; background-image: linear-gradient(134deg, #fff 0%, #ddd 100%); } 

.perspective { perspective: 500px; width: 100%; overflow-y: visible; } 

/* Hide scrollbar for Chrome, Safari and Opera */
.perspective::-webkit-scrollbar { display: none; } 

/* Hide scrollbar for IE, Edge and Firefox */
.perspective { -ms-overflow-style: none; /* IE and Edge */
 scrollbar-width: none; /* Firefox */ } 



.about_txt { transform: rotateY(-5deg); opacity: 0; -webkit-transition: all .5s ease-out; transition: all .5s ease-out; } 

.about_txt.show { opacity: 1; } 

#main_title { transform: perspective(355px) rotateY(37deg) scale(0.5); text-shadow: -60px 80px 7px rgba(0, 0, 0, 0.1); display: inline-block;} 

.avatar {text-align: center;}
.avatar img {border-radius: 50%; box-shadow: inset 0px 0px 15px rgba(0,0,0,0.9);  transform:scale(0); max-width: 100%; height: auto;
    -webkit-transition: all 1s ease-out; transition: all 1s ease-out;
}
.screwed .avatar img {transform:scale(1) rotate(-360deg);}


section#references { padding: 0; } 

.reference { background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: auto 700px; height: calc(100vh - 68px); display: flex; justify-content: center; align-items: center; box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.3); overflow: hidden; } 

.reference.yellow,
.reference.yellow .tech_used { background-color: var(--yellow); } 

.reference.green,
.reference.green .tech_used { background-color: var(--green); } 

.reference.purple,
.reference.purple .tech_used { background-color: var(--purple); } 

.butt { display: inline-block; padding: 20px; border-radius: 100px; font-size: 16px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; background-color: var(--blue); background: white; color: #212121; box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.7); opacity: 0.85; /*margin: -75px 0 0 -75px; */
 width: 150px; height: 150px; text-align: center; display: flex; align-items: center; line-height: 24px; justify-content: center; transform: rotate(0deg); } 

.butt:after { content: ""; width: 210px; height: 210px; border-radius: 120px; border: 3px solid white; position: absolute; top: -30px; left: -30px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.85; } 

.butt:hover { /*background-color: var(--orange); */
 color: #212121; transform: rotate(360deg); opacity: 1; } 

.butt:hover:after { width: 230px; height: 230px; top: -40px; left: -40px; opacity: 1; } 

.no_margin { margin: 0 !important; } 




#more_references { overflow: hidden; width: 100%; } 

#more_references h2 { text-align: center; padding: 0 0 50px 0; } 

.more_references { /*display: flex; justify-content: space-between; */
 width: auto; height: 242px; overflow: hidden; padding: 10px 0; } 

.add_reference { display: block; margin: 0px; padding: 0 15px 5px 15px; width: 250px; float: left; } 

.add_reference .img { overflow: hidden; width: 100%; height: auto; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; border: 1px solid #ddd; border-radius: 4px;} 

.add_reference .img img { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: 100%; height: auto; border-radius: 4px; } 

.add_reference:hover .img { transform: scale(1.02); } 

.add_ref_txt { padding: 10px 0px; color: #212121; font-size: 14px; } 

.add_ref_txt span { display: block; text-transform: uppercase; font-size: 11px; color: #474747; } 

#ref_rl .more_references { -webkit-animation: smoothscroll 27s linear infinite; -moz-animation: smoothscroll 27s linear infinite; -ms-animation: smoothscroll 27s linear infinite; -o-animation: smoothscroll 27s linear infinite; animation: smoothscroll 27s linear infinite; } 

#ref_lr .more_references { -webkit-animation: smoothscroll2 27s linear infinite; -moz-animation: smoothscroll 27s linear infinite; -ms-animation: smoothscroll2 27s linear infinite; -o-animation: smoothscroll2 27s linear infinite; animation: smoothscroll2 27s linear infinite; } 










#contact { background: #f4f4f4; padding: 100px 0; background-image: linear-gradient(180deg, #f4f4f4 0%, #ccc 100%); } 

#contact .row { display: flex; align-items: center; } 

#contact h2 { font-size: 96px; } 

p.inset { padding-left: 80px; } 

.inset img { width: 160px; height: auto; margin: 15px 0 0 0; } 

.form-control { height: 50px; padding: 0 15px; font-size: 1rem; line-height: 50px; color: #495057; background-color: rgba(255, 255, 255, 0.7);} 
.form-control:focus { background-color: rgba(255, 255, 255, 0.8);} 

textarea.form-control { line-height: 28px; padding: 12px 15px; } 

.btn { color: #fff; padding: 0 30px; font-size: 1rem; line-height: 50px; border-radius: 0.25rem; } 

.ccc {background:#ccc;}



#testimonials { background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent 40%), radial-gradient(circle at bottom right, rgb(94, 83, 130) 0%, rgb(132, 89, 188) 100%, #333 75%); padding: 170px 0; color: white; } 

#testimonials img { height: 80px; width: auto; margin: 0 auto 15px auto; padding: 20px; background: white; } 

#testimonials .owl-stage { display: flex; align-items: stretch; align-content: center; width: 100%; } 

#testimonials .owl-stage .owl-item { display: flex; align-items: center; width: 100%; } 

#testimonials .owl-stage .owl-item .centered { padding: 0 100px; width: 100%;} 

#testimonials h2 { color: white; background: none; -webkit-background-clip: unset; -webkit-text-fill-color: white; } 

.line { height: 3px; width: 100%; text-align: center; margin: 0 0 15px 0; } 

.line:after { content: ""; width: 100px; height: 2px; margin: 0 auto; background: var(--blue); background: #e7e7e7; display: inline-block; } 

.grey_txt p, .grey_txt a {color: #ddd;}
.grey_txt a {color: #fff;}
.grey_txt a:hover {color: var(--orange);}

@keyframes wave { 
 0% { margin-left: 0; } 
 100% { margin-left: -1600px; } 
 }

@keyframes swell { 0%,
 100% { transform: translate3d(0, -25px, 0); } 
 50% { transform: translate3d(0, 3px, 0); } 
 }

.waves { position: absolute; top: 0; left: 0; height: 100px; overflow: hidden; width: 100%; transform: rotate(180deg); } 

.waves:nth-of-type(2) { top: auto; bottom: 0; transform: none; } 

.wave { background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='198' %3E%3Cdefs%3E%3ClinearGradient id='a' x1='50%25' x2='50%25' y1='-10.959%25' y2='100%25'%3E%3Cstop stop-color='%23fff' stop-opacity='.25' offset='0%25'/%3E%3Cstop stop-color='%23fff' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='white' fill-opacity='0.5' d='M.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z' transform='matrix(-1 0 0 1 1600 0)'/%3E%3C/svg%3E") repeat-x; background-size: 1600px 100px !important; position: absolute; /* top: -198px; */
 bottom: 0px; width: 6400px; height: 198px; height: 100px; animation: wave 15s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; transform: translate3d(0, 0, 0); } 

.wave:nth-of-type(2) { background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='198' %3E%3Cdefs%3E%3ClinearGradient id='a' x1='50%25' x2='50%25' y1='-10.959%25' y2='100%25'%3E%3Cstop stop-color='%23fff' stop-opacity='.25' offset='0%25'/%3E%3Cstop stop-color='%23fff' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='white' d='M.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z' transform='matrix(-1 0 0 1 1600 0)'/%3E%3C/svg%3E") repeat-x; bottom: -30px; animation: wave 15s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 15s ease -1.25s infinite; opacity: 1; } 

.waves:nth-of-type(2) .wave:nth-of-type(2) { background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='198' %3E%3Cdefs%3E%3ClinearGradient id='a' x1='50%25' x2='50%25' y1='-10.959%25' y2='100%25'%3E%3Cstop stop-color='%23fff' stop-opacity='.25' offset='0%25'/%3E%3Cstop stop-color='%23fff' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%23f4f4f4' d='M.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z' transform='matrix(-1 0 0 1 1600 0)'/%3E%3C/svg%3E") repeat-x; } 









.tab-content { padding: 0px; margin: 30px 0 0 0; } 

#kontakt i { color: #5b85da; display: inline-block; width: 20px; text-align: center; margin-right: 10px; } 

p.small_info { font-size: 10px; line-height: 16px; padding: 0 0 8px; } 

.response { padding: 10px 0 0 0; } 

.captcha { position: relative; } 

.captcha img { position: absolute; top: 1px; right: 1px; } 

.box { padding: 30px; background: #5b85da; color: #fff; } 

img.responsive { width: 100%; height: auto; } 








#github {background: #f7f7f7; }
#github .row {align-items:center;  }
.github img {opacity: 0.5; max-width: 100%; height: auto; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; max-width: 120px; }
.github a:hover img {opacity: 1; }
.centered {text-align: center; }








.nav-pills {border-bottom: 1px solid #eee;}
.nav-pills .nav-link { border-radius: 0; border-bottom: 3px solid transparent; color: #444;}
.nav-pills .nav-link:hover { border-bottom: 3px solid #eee; color: #444;}
.nav-pills .nav-link span { font-weight: bold; color: var(--blue);}
.nav-pills .nav-link.active, .nav-pills .nav-link.active:hover, .nav-pills .show>.nav-link {
    color: #444;
    background-color: white;
    border-bottom: 3px solid var(--blue);
}

@keyframes sunrays { 
    0% { transform: rotate(0deg); opacity: 1;} 
    100% { transform: rotate(360deg); opacity: 1;} 
}
.exp_holder {width: 100%; position: relative;}
.sunray {width: 100%; height: auto; z-index:0; position: absolute; top:0; left: 0;  
    -webkit-animation: sunrays 29s linear infinite; 
    -moz-animation: sunrays 29s linear infinite; 
    -ms-animation: sunrays 29s linear infinite; 
    -o-animation: sunrays 29s linear infinite; 
    animation: sunrays 29s linear infinite;
}
.tab-pane img {z-index:1;}








@media (min-width: 992px) and (max-width: 1080px) {
    .about_txt.show {padding-right: 30px;}
    .reference {background-size: 100vw auto;}
}

@media (min-width: 768px) and (max-width: 991px) {

}


@media (max-width: 991px) {

    .about_txt.show {padding-right: 30px;}

    .slogan .t {
        font-size: 70px;
        min-height: 84px;
    }

    .avatar {position: absolute; top:0; left: 0; width: 110px;}

    .avatar img {
        max-width: 110px;
    }

    #main_title {width: auto; transform: perspective(155px) rotateY(15deg) scale(1); font-size: 80px; margin: 0 0 30px 200px;} 

    .reference {background-size: 100vw auto;}
    .navbar-toggler {width: 40px; height: 20px; padding: 0;}
    .navbar-toggler-icon {
        width: 40px;
        height: 20px;
        vertical-align: top;
    }
    .navbar-toggler-icon:focus, .navbar-toggler:focus {outline: none; }

    .navbar-toggler .navbar-toggler-icon span {
        width: 100%; height: 1px; background: #666; position: absolute; top: 50%; left: 0; opacity:0; 
        -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
    }

    .navbar-toggler .navbar-toggler-icon span:first-child {top: 10px; transform: rotate(45deg); opacity: 1;}
    .navbar-toggler .navbar-toggler-icon span:last-child {top: auto; bottom: 9px; transform: rotate(-45deg); opacity: 1;}

    .navbar-toggler.collapsed .navbar-toggler-icon span {opacity: 1;}
    .navbar-toggler.collapsed .navbar-toggler-icon span:first-child {top: 0; opacity: 1; transform: rotate(0deg);}
    .navbar-toggler.collapsed .navbar-toggler-icon span:last-child {bottom: -2px; opacity: 1; transform: rotate(0deg);}

    .nav-link.blue,
    .nav-link.blue.active { color: #007bff !important; } 

    .nav-link.green,
    .nav-link.green.active { color: #26b01c !important; } 

    .nav-link.yellow,
    .nav-link.yellow.active { color: #c9c500 !important; } 

    .nav-link.orange,
    .nav-link.orange.active { color: #fc9300 !important; } 

    .nav-link.red,
    .nav-link.red.active { color: #fa4545 !important; } 

    .nav-link.violet,
    .nav-link.violet.active { color: #ff2ba3 !important; } 

    .nav-link.magenta,
    .nav-link.magenta.active { color: magenta !important; } 

    .navbar-collapse {
        background: white; padding: 0px 0; position: fixed; top: 68px; left: 0; width: 100%; border-top: 1px solid #eee; height: auto; opacity:0; box-shadow: 0px 15px 15px rgba(0,0,0,0.1); pointer-events: none;
        -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
    }
    .navbar-collapse.show {
        opacity:1; pointer-events: all;
    }
    .navbar .collapse:not(.show) {
        display: block;
    }
    .navbar-nav .nav-link, .navbar-nav .nav-link:visited, .navbar-nav .nav-link:link, .navbar-nav .nav-link:not(.active) {
        height: 42px;
        line-height: 42px;
        padding: 0; text-align:center; display: inline-block; 
    }
    .navbar-nav {flex-direction: row; justify-content: space-around;}
    .nav-item {line-height: 1;}
}


@media (max-width: 767px) {

    body {width: 100vw; overflow-x: hidden !important;}

    /*body.overflow {overflow: hidden; width: 100vw; height: 100vh;}*/

    .navbar-collapse {
        background: rgba(255, 255, 255, 0.88); min-height: calc(100vh - 68px); opacity:0; box-shadow: none; backdrop-filter: blur(6px); overflow-y: scroll;
    }
    .navbar-nav {flex-direction: column; width: 100%; }
    .navbar-collapse {display: flex; align-content: center; width: 100vw;}
    .navbar-nav .nav-link, .navbar-nav .nav-link:visited, .navbar-nav .nav-link:link, .navbar-nav .nav-link:not(.active) {
        display: block; height: 52px;  line-height: 52px;
    }

    #main_title {margin: 0 0 30px 150px;} 

    #github {text-align:center; }

    .slogan {padding: 0 20px;}

}


@media (max-width: 500px) {

    .nav-pills {border-bottom: none;}
    .nav-pills .nav-link {
        border-radius: 0;
        border-bottom: 3px solid transparent;
        color: #444;
    }
    .nav-pills .nav-item {width: 100%;}
    .nav-pills .nav-link:hover {border-bottom: 3px solid transparent;}
    .nav-pills .nav-link.active, .nav-pills .nav-link.active:hover, .nav-pills .show>.nav-link {
        background-color: #eee; border-bottom: 3px solid transparent;
    }
    #testim .owl-nav {display: none; }
    #testimonials .owl-stage .owl-item .centered {padding: 0;}
    .cloud {
        width: 80vw;
        height: 80vw;
    }
    .cslogan {
        padding: 0 5% 5%;
        font-size: 30px;
        bottom: 5%;
        left: 0;
    }
}


@media (max-width: 450px) {
    .avatar img {max-width: 80px;    }
    #main_title {
        transform: none;
        font-size: 60px;
        margin: 0 0 30px 100px;
    }
    #contact {padding-top:20px;}
    #contact h2 {font-size: 60px;}
    #expertize {padding-bottom:20px;}
}


@media (max-width: 350px) {
    .cslogan {bottom: 2%;}
}