body{background-color: #1D1D1D;font-family: 'Oxanium', cursive;background-image: url('../images/darkpattern.jpg');background-position: center;}

.orange{color:#FFBA00!important;}
.bg{background-color: #1D1D1D!important;}
.color{color:#D9D9D9!important;}

main {position: fixed;right: 0;left: 0;top: 0;display: flex;bottom: 0;-webkit-box-pack: center;justify-content: center;-webkit-box-align: center;align-items: center;z-index: 999;background: #090707;transition: all ease .6s;opacity: 1;visibility: visible;}
main.load {opacity: 0; visibility: hidden; }
main h2 {font-weight: 500;margin-top: 20px;color: #fdba00;letter-spacing: 2px;text-align: center;margin-right: -3px;}
.dank-ass-loader {display: -webkit-box;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-box-align: center;align-items: center;}
.dank-ass-loader .row {display: -webkit-box;display: flex;}
.arrow {width: 0;height: 0;margin: 0 -6px;border-left: 12px solid transparent;border-right: 12px solid transparent;border-bottom: 21.6px solid #FFBA00;-webkit-animation: blink 1s infinite;animation: blink 1s infinite;-webkit-filter: drop-shadow(0 0 18px #FFC107);filter: drop-shadow(0 0 18px #FFC107);}
.arrow.down {-webkit-transform: rotate(180deg);transform: rotate(180deg);}
.arrow.outer-1 {-webkit-animation-delay: -0.0555555556s;animation-delay: -0.0555555556s;}
.arrow.outer-2 {-webkit-animation-delay: -0.1111111111s;animation-delay: -0.1111111111s;}
.arrow.outer-3 {-webkit-animation-delay: -0.1666666667s;animation-delay: -0.1666666667s;}
.arrow.outer-4 {-webkit-animation-delay: -0.2222222222s;animation-delay: -0.2222222222s;}
.arrow.outer-5 {-webkit-animation-delay: -0.2777777778s;animation-delay: -0.2777777778s;}
.arrow.outer-6 {-webkit-animation-delay: -0.3333333333s;animation-delay: -0.3333333333s;}
.arrow.outer-7 {-webkit-animation-delay: -0.3888888889s;animation-delay: -0.3888888889s;}
.arrow.outer-8 {-webkit-animation-delay: -0.4444444444s;animation-delay: -0.4444444444s;}
.arrow.outer-9 {-webkit-animation-delay: -0.5s;animation-delay: -0.5s;}
.arrow.outer-10 {-webkit-animation-delay: -0.5555555556s;animation-delay: -0.5555555556s;}
.arrow.outer-11 {-webkit-animation-delay: -0.6111111111s;animation-delay: -0.6111111111s;}
.arrow.outer-12 {-webkit-animation-delay: -0.6666666667s;animation-delay: -0.6666666667s;}
.arrow.outer-13 {-webkit-animation-delay: -0.7222222222s;animation-delay: -0.7222222222s;}
.arrow.outer-14 {-webkit-animation-delay: -0.7777777778s;animation-delay: -0.7777777778s;}
.arrow.outer-15 {-webkit-animation-delay: -0.8333333333s;animation-delay: -0.8333333333s;}
.arrow.outer-16 {-webkit-animation-delay: -0.8888888889s;animation-delay: -0.8888888889s;}
.arrow.outer-17 {-webkit-animation-delay: -0.9444444444s;animation-delay: -0.9444444444s;}
.arrow.outer-18 {-webkit-animation-delay: -1s;animation-delay: -1s;}
.arrow.inner-1 {-webkit-animation-delay: -0.1666666667s;animation-delay: -0.1666666667s;}
.arrow.inner-2 {-webkit-animation-delay: -0.3333333333s;animation-delay: -0.3333333333s;}
.arrow.inner-3 {-webkit-animation-delay: -0.5s;animation-delay: -0.5s;}
.arrow.inner-4 {-webkit-animation-delay: -0.6666666667s;animation-delay: -0.6666666667s;}
.arrow.inner-5 {-webkit-animation-delay: -0.8333333333s;animation-delay: -0.8333333333s;}
.arrow.inner-6 {-webkit-animation-delay: -1s;animation-delay: -1s;}

@-webkit-keyframes blink {
	0% {
		opacity: 0.1;
	}
	30% {
		opacity: 1;
	}
	100% {
		opacity: 0.1;
	}
}

@keyframes blink {
	0% {
		opacity: 0.1;
	}
	30% {
		opacity: 1;
	}
	100% {
		opacity: 0.1;
	}
}



header {position: fixed;background: black;left: 0;top: 0;bottom: 0;height: 100vh;width: 60px;padding: 10px;}

header {}
header nav div {}
header nav div.menu {position: absolute;top: 50%;transform: translateY(-50%);right: 0;left: 0;text-align: center;}
header nav div.menu ul li a img {width: 100%;max-width: 100%;transition: all ease .4s;filter: grayscale(1);}
header nav div.menu ul li a:hover img {filter: grayscale(0);}

header nav div.menu ul li a {padding: 14px;color: #4A4A4A;display: block;position: relative;}
header nav div.menu ul li {margin: 5px 0px;display: block;}
header nav div.menu ul li a p {font-size: 14px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);right: 0;color: #ffba00;font-weight: 500;height: 0px;overflow: hidden;transition: all ease .4s;}
header nav div.menu ul li a:hover p {height: 14px;}
header nav div.menu ul li a:hover img {transform: scale(0);}
header nav div.menu ul li a.active img {filter: none;}

header nav div.me span {color: orange;font-size: 45px;}
header nav div.me {width: 100%;text-align: center;}
header nav div.me h1 {color: white;font-size: 13px;font-weight: 100;}

header nav div.social {position: absolute;bottom: 20px;right: 0;left: 0;text-align: center;font-size: 35px;}
header nav div.social a {color: #bbbbbb;transition: all ease .4s;}
header nav div.social a:hover {color: white;}
header nav div.social a:hover {color: white;}


section.index {display: flex;align-items: center;height: 100vh;}
section.index h3 {font-size: 4vw;color: #d9d9d9;font-weight: bold;font-family: 'Oswald', sans-serif;margin-top:10px;margin-top: 5vh;}
section.index h4 {font-size: 6.5vw;color: #d9d9d9;font-weight: bold;font-family: 'Oswald', sans-serif;margin-top:10px;}
section.index h5 {font-size: 4vw;color: #d9d9d9;font-weight: bold;font-family: 'Oswald', sans-serif;margin-top:10px;}
section.index p {font-size: 1.4vw;color: gray;margin-top: 1rem;}
section.index h2 {color: #ffba00;font-size: 25vw;}

section.index a {border: 1px solid #ffba00;padding: 15px 40px;display: inline-block;margin-top: 15px;font-size: 21px;color: #ffba00;text-transform: uppercase;transition: all ease .4s;}
section.index a:hover {text-decoration: none;background: #ffba00;color: #1d1d1d;}

.container-fluid {padding: 0px 200px;}

div.welcome.about p {color: #cccccc!important;line-height: 37px;font-size: 17px;}

section.index div.services h5 span {position: absolute;left: 0;opacity: 0;transition: all ease .8s;}
section.index div.services:hover h5 span {opacity: 1;left: 15vw;color:#ffba00;}
section.index div.services:hover h5{color:#bbbbbb!important;}
section.index .welcome.about.services {cursor: default;}

section.works .container-fluid {padding: 0px 75px;padding-right: 15px;}
section.works {}
section.works h1 {font-size: 5vh;white-space: nowrap;overflow: hidden;color: gray;font-family: 'Oswald', sans-serif;margin-bottom: 4px;}
section.works h1 {text-align: left;background: -webkit-gradient(linear, right top, left top, color-stop(20%, gray),color-stop(40%, #ffa500), color-stop(60%, #ffa500), color-stop(80%, gray));background: linear-gradient(to left, gray 20%, #ffa500 40%, #ffa500 60%, gray 80%);background-size: 200% auto;color: #000;background-clip: text;text-fill-color: transparent;-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: shine 3s linear infinite;animation: shine 3s linear infinite;}
section.works h1 span {margin-right: 19px;}

section.works .wrapper:hover h1 {-webkit-animation: shine 1s linear infinite;animation: shine 1s linear infinite;}
section.works .d2 h1 {animation: shine 4.5s cubic-bezier(0.86, 0.19, 1, 1) infinite;}

section.works .wrapper {opacity: .3;transition: all ease .4s;margin-bottom: 30px;}
section.works .wrapper:hover {opacity: 1;}

section.works .owl-works {}
section.works .owl-works div.item {}
section.works .owl-works div.item a {display: block;position: relative;transition:all ease .4s;}
section.works .owl-works div.item a p {position: absolute;left: 0;top: 15%;font-size: 20px;transform: translateY(-50%);right: 30%;text-align: center;color: black;font-weight: 400;transition: all ease .4s;opacity: 0;}
section.works .owl-works:hover div.item a {opacity: .4;}
section.works .owl-works div.item a:hover{opacity:1;}
section.works .owl-works div.item a:hover p {opacity: 1;right: 0%;}

section.works .owl-works .owl-nav {position: absolute;z-index: 99;bottom: 0;right: 0;left: 18px;margin: 0;display: flex;justify-content: center;}
section.works .owl-works .owl-nav button img {width: 45px;}
section.works .owl-works .owl-nav button {position: relative;}

section.works .owl-works .owl-nav button:hover {}

section.works .owl-works .owl-nav button.owl-prev , .owl-works .owl-nav button.owl-next {outline:none;background: white;padding: 12px;margin: 0px -23px;border-radius: 55px;transition: all ease .3s;opacity: 0;}
section.works .owl-works .owl-nav button.owl-prev:hover, .owl-works .owl-nav button.owl-next:hover {background: black;}
section.works .owl-works .owl-nav button.owl-prev img,section.works .owl-works .owl-nav button.owl-next img {width: 45px;padding: 10px;transition: all ease .4s;}
section.works .owl-works .owl-nav button.owl-prev:hover img,section.works .owl-works .owl-nav button.owl-next:hover img {filter: invert(1);padding: 5p;padding: 5px;}
section.works .wrapper:hover .owl-nav button:not(.disabled) {opacity: 1;margin: 0px 0px;}
section.works .owl-works .owl-nav button.owl-prev {border-bottom-right-radius: 0px;}
.owl-works .owl-nav button.owl-next {border-bottom-left-radius: 0px;}
section.works .owl-works div.item a p:before {content: '';position: absolute;right: 0;left: 0;bottom: -5px;top: -5px;background: orange;z-index: -1;box-shadow: 0px 2px 6px black;}


section.index.contact {}

section.index.contact form {max-width: 100%}
section.index.contact form input {width: 100%;display: block;margin-bottom: 5px;padding: 10px 10px;border: 2px solid transparent;transition: all ease .4s;background: #ababab;}
section.index.contact form input:focus {border: 2px solid #ffba00;background: black;color: white;}

section.index.contact form textarea {width: 100%;display: block;margin-bottom: 5px;padding: 10px 10px;border: 2px solid transparent;transition: all ease .4s;background: #ababab;}
section.index.contact form textarea:focus {border: 2px solid #ffba00;background: black;color: white;}

section.index.contact form input::placeholder ,section.index.contact form textarea::placeholder {
	color: black;
}

section.index.contact form input:focus::placeholder ,section.index.contact form textarea:focus::placeholder {
	color: white;
}


section.index.contact button {border: 1px solid #ffba00;padding: 10px 25px;display: block;margin-top: 10px;margin-left: auto;font-size: 14px;color: #ffba00;text-transform: uppercase;transition: all ease .4s;background:none;}
section.index.contact button:hover {text-decoration: none;background: #ffba00;color: #1d1d1d;}

@-webkit-keyframes shine {
	to {
		background-position: 200% center;
	}
}
@keyframes shine {
	to {
		background-position: 200% center;
	}
}



@media screen and (max-width: 1199px){
	.text-scroll {max-height: 250px;overflow: auto;}
	section.index h4 {font-size: 5vw;}

	section.index a {font-size: 17px;padding: 12px 24px;}
	.container-fluid {padding: 0px 130px;}

	section.index h2 {font-size: 33vw;}
}



@media screen and (max-width: 991px){
	section.index.contact {min-height: 100vh;height: unset;padding-bottom: 100px;}
	section.index.about {min-height: 100vh;height: unset;padding-bottom: 100px;}
	section.index.skills {min-height: 100vh;height: unset;padding-bottom: 100px;}
}


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

	section.index.skills{margin-top: 100px}
	.container-fluid {padding: 0px 15px;}
	header {top: unset;right: 0;height: 70px;z-index: 999;width: 100%;padding: 0px;}

	header nav div.menu {top: unset;position: relative;transform: unset;width: 100%;}
	header nav div.menu ul li {max-width: 100px;margin: auto;flex: 1;width: 100%;}
	header nav div.menu ul {display: flex;align-items: center;width: 100%;justify-content: center;}
	header nav {display: flex;align-items: center;}
	header nav div.social {bottom: unset;left: 10px;top: 10px;position: fixed;right: unset;}
	header nav div.me {width: 57px;}
	header nav div.menu ul li a {padding: 15px;}
	header nav div.menu ul li {max-width: 75px;margin: auto;flex: 1;width: 100%;}

	section.index.about {margin-top: 100px;}

	.text-scroll {max-height: unset;overflow: unset;}
	section.works .container-fluid {padding: 50px 15px;}
	section.index.contact{margin-top: 50px;}
}


@media screen and (max-width: 575px){
	.container-fluid {padding: 0px 15px;}
	header {top: unset;right: 0;height: unset;z-index: 999;width: 100%;padding: 0px;}
	header nav div.menu ul li {max-width: 65px;margin: auto;flex: 1;width: 100%;}
	section.index h3 {font-size: 30px;}
	section.index h4 {font-size: 40px;}
	section.index h5 {font-size: 26px;}

	section.index p {font-size: 11px;}
	section.index a {font-size: 14px;padding: 9px 15px;}
	section.index h2 {font-size: 12rem;text-align: center;margin-bottom: -65px;}
	header nav div.me {width: 42px;}
	header nav div.me span {color: orange;font-size: 29px;}
	header nav div.me h1 {color: white;font-size: 9px;font-weight: 100;}
	.owl-nav {display: none!important;}
}