@charset "utf-8";

@font-face{
	font-family: "Apercu-Regular";
	src: url("Apercu-Font/Apercu Regular.otf") format('opentype');
}
@font-face{
	font-family: "Apercu-Pro-Regular";
	src: url("Apercu-Font/Apercu Pro Regular.otf") format('opentype');
}
@font-face{
	font-family: "Apercu-Medium";
	src: url("Apercu-Font/Apercu Medium.otf") format('opentype');
}
@font-face{
	font-family: "Apercu-Light";
	src: url("Apercu-Font/Apercu Light.otf") format('opentype');
}
@font-face{
	font-family: "Apercu-Bold";
	src: url("Apercu-Font/Apercu Bold.otf") format('opentype');
}
@font-face{
	font-family: "Apercu-Mono";
	src: url("Apercu-Font/Apercu Mono.otf") format('opentype');
}
@font-face{
	font-family: "Apceru-Pro-Bold";
	src: url("Apercu-Font/Apercu Pro Bold.otf") format('opentype');
}
@font-face{
	font-family: "Apercu-Pro-Medium";
	src: url("Apercu-Font/Apercu Pro Medium.otf") format('opentype');
}
@font-face{
	font-family: "Apercu-Pro-Mono";
	src: url("Apercu-Font/Apercu Pro Mono.otf") format('opentype');
}
@font-face{
	font-family: "Apercu-Pro-Light";
	src: url("Apercu-Font/Apercu Pro Light.otf") format('opentype');
}

/* CSS Document */

/*Navbar*/

*{
    font-family: "Apercu-Pro-Regular", sans-serif;
    margin: 0;
    padding: 0;
}

nav {
   position: fixed;
   z-index: 100000;
   transition: .5s;
}

nav.sticky {
   background-color: #1E1E1E;
}

nav.sticky .navbar-brand {
   	font-size: 2rem;
   	transition: .5s;
	font-family: "Apercu-Pro-Medium", sans-serif;
}

nav.sticky .navbar-brand, nav.sticky .navbar-nav .nav-item a {
   color: #EDEDED;
}

nav .navbar-brand, nav .navbar-nav .nav-item a, nav .navbar-nav-scroll {
   color: #EDEDED;
}

nav .navbar-brand {
   font-family: "Apercu-Pro-Medium", sans-serif;
   letter-spacing: 1px;
   font-size: 30px;
   font-weight: 500;
}

.scroll-down {
   position: absolute;
   bottom: 0px;
   color: #EDEDED;
   width: auto;
   opacity: .7;
}

.scroll-icon {
   position: absolute;
   height: 40px;
   width: 30px;
}

.scroll-icon::before,
.scroll-icon::after {
   content: "";
   position: absolute;
   top: 20%;
   left: 50%;
   height: 10px;
   width: 10px;
   transform: translate(-50%, -100%) rotate(45deg);
   border: 2px solid var #EDEDED;
   border-top: transparent;
   border-left: transparent;
   animation: scroll-down 1s ease-in-out infinite;
}

.scroll-down::before {
   top: 30%;
   animation-delay: 0.3s;
   animation: scroll-down 1s ease-in-out infinite;
}

/*
@keyframes scroll-down {
   0% {
      opacity: 0;
   }
   30% {
      opacity: 1;
   }
   60% {
      opacity: 1;
   }
   100% {
      top: 80%;
      opacity: 0;
   }
}
*/




.jumbotron{
	height: 850px;
	background-image: url("jumbotron.jpg");
	background-attachment: fixed;
	background-size: cover;
    overflow: hidden;
}

.jumbotron .cv{
    text-align: center;
}

.jumbotron .doc{
    color: #1D1D1D;
}



/*Skills*/

.skills{
	min-height: 800px;
    overflow: hidden;
}

.skills .col-lg-4{
    background-color: #EDEDED;
    font-size: 200%;
    text-align: center;
}



/*Certificate*/

.certificate{
	min-height: 800px;
	overflow: hidden;
}

.certificate .col-lg-4{
	font-size: 200%;
	text-align: center;
}



/*About*/

.about{
    min-height: 800px;
    overflow: hidden;
}

.about .image{
    height: 800px;
    background-image: url("about.jpg");
    background-size: cover;
}



/*Footer*/

footer .icon{
    color: #171717;
}








/*Media*/


@media screen and (max-width: 992px) {
	.jumbotron img{
		width: 300px;
		text-align: center;
	}
	
	.jumbotron h1{
		font-family: "Apercu-Pro-Medium", sans-serif;
	}
	
	.jumbotron .row{
		padding-top: 100px;
	}
	
	.jumbotron .cv{
		display: none;
	}
	
	.jumbotron .right{
		display: none;
	}
	
	.skills .col-lg-4{
		padding: 100px 0;
	}
	
	.skills .col-lg-8 .icon{
		padding: 30px 0;
	}
	
	.skills h1{
		font-family: "Apercu-Pro-Medium", sans-serif;
	}
	
	.certificate .col-lg-4{
	background-color: #EDEDED;
	}
	
	.certificate .dsktp{
		display: none;
	}
	
	.certificate .col-lg-4{
		padding: 100px 0;
	}
	
	.certificate h1{
		font-family: "Apercu-Pro-Medium", sans-serif;
	}
	
	.certificate .col-lg-8 .icon{
		padding: 30px 0 40px;
	}
	
	.about h1{
		font-family: "Apercu-Pro-Medium", sans-serif;
	}
	
	.about .col-lg-4{
		background-size: 110%;
		background-repeat: no-repeat;
	}
	
	.about .col-lg-7{
		padding: 0 20px 100px;
	}
}





@media screen and (min-width: 993px) {
	.jumbotron .row{
		padding-top: 150px;
	}
	
	.jumbotron .right{
		padding-top: 180px;
	}
	
	.skills{
    	min-height: 700px;
	}
	
	.skills .col-lg-4{
		padding-top: 300px;
    	height: 700px;
	}
	
	.certificate{
		min-height: 700px;
	}
	
	.certificate .col-lg-4{
		padding-top: 300px;
		height: 700px;
	}
	
	.certificate .mobile{
		display: none;
	}
	
	.certificate .col-lg-8{
		background-color: #EDEDED;
	}
}





@media screen and (min-width: 1368px) {
	.jumbotron .row{
		padding-top: 150px;
	}
	
	.jumbotron .right{
		padding-top: 180px;
	}
	
	.skills .col-lg-4{
		padding-top: 350px;
    	height: 830px;
	}
	
	.certificate .col-lg-4{
		padding-top: 350px;
		height: 830px;
	}
	
	.certificate .mobile{
		display: none;
	}
	
	.certificate .col-lg-8{
		background-color: #EDEDED;
	}
}