@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,900');
* {
   cursor: url('../img/cursor.cur'),auto;
}

body {
  font-family: 'Poppins', sans-serif;
  z-index: 2;
  overflow: hidden!important;
}

::-moz-selection {
    background: #000;
}
::selection {
    background: #000;

}


/* =Typography
-------------------------------------------------------------- */

p {
    color: #FFF;
    line-height: 40px;
    font-size: 14px;
    font-weight: 100;
    clear: both;
    letter-spacing: 0.4px;
}
hr {
    width: 40px;
    height: 1px;
    background: #FFF;
    border-top: 0;
    margin-top: 0px;
    margin-bottom: 20px;
    clear: both;
    float: left;
}

h1{
	line-height: 45px;
	font-weight: 700;
	font-size: 50px;	
}

p{
	line-height: 25px;
	font-weight: 200;
	font-size: 20px;
}

mark {
    background-color: #000;
    color: #FFF;
	padding: .3em;
}

header.page-title h1{
	text-align:center;
	text-transform:uppercase;
	font-weight:500;
	letter-spacing:1px;
	position:relative;
	margin-bottom:36px;
	padding:0;
	margin-top:0;
	font-size: 40px;
}

header.page-title h1:after{
	content:"";
	display:block;
	width:120px;
	height:4px;
	position:absolute;
	left:0;
	right:0;
	bottom:-5px;
	margin:0 auto;
	background-color:#FFF;
}

.LO-btn{
	color: #000;
	background-color: #FFF;
}
.LO-btn:hover{
	color: #FFF;
	background-color: #000;
}

span a {
    color: #FFF;
    position: relative;
}

span a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 50%;
    left: 0;
    transition: all .2s ease-in-out 0s;
    background-color: #fff;
}

span a:hover {
    color: #fff;
    text-decoration: none;
}

span a:hover::after {
    width: 0;
}

/* Effect 1: Brackets */
.cl-effect a::before,
.cl-effect a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.cl-effect a::before {
	margin-right: 10px;
	color: #CC3333;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.cl-effect a::after {
	margin-left: 10px;
	color: #CC3333;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

.cl-effect a:hover::before,
.cl-effect a:hover::after,
.cl-effect a:focus::before,
.cl-effect a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}
/* End=Typography
-------------------------------------------------------------- */


.section {
  text-align:center;
  font-size: 3em;
  color: #fff;
}

.navbar{
	z-index: 999;
	position: absolute;
}

/* =Right Dots Nav
-------------------------------------------------------------- */

#fp-nav ul li a span, 
.fp-slidesNav ul li a span {
	background: #FFF;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
}
	  
#fp-nav ul li a.active span, 
.fp-slidesNav ul li a.active span, 
#fp-nav ul li:hover a.active span, 
.fp-slidesNav ul li:hover a.active span {
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	background: transparent;
	box-sizing: border-box;
	border: 2px solid #FFF;
}


/* End=Right Dots Nav
-------------------------------------------------------------- */


canvas {
	position:absolute;
}

/* =Animate.css Delay
-------------------------------------------------------------- */

.delay-02 {
animation-delay: .25s;
}
.delay-05 {
animation-delay: .5s;
}
.delay-07 {
animation-delay: .75s;
}
.delay-1 {
animation-delay: 1s;
}
.delay-2 {
animation-delay: 2s;
}
.delay-3 {
animation-delay: 3s;
}
/* End=Animate.css Delay
-------------------------------------------------------------- */

/* =Social Icons
-------------------------------------------------------------- */

.social{
	z-index: 999;
	bottom:20px;
	left: 0;
	position: absolute;
	padding: 0;
	margin: 0;
}

.social li{
  margin: 10px 0;
  padding: 0 20px;
  list-style-type: none;
}

.social ul{
	padding: 0 10px;
}

.vertical{
    writing-mode:tb-rl;
	transform: rotate(180deg);
	font-weight: 500;
	font-size: 15px;
}

.social a{
	color: #FFF;
    text-decoration: none;
}

.social a:hover{
	color: #000;
}
/* End=Social Icons
-------------------------------------------------------------- */


/* FULLPAGE FADE 
.fullpage-wrapper {
	width: 100%!important;
	transform: none!important;
}

.fp-section {
	width: 100%!important;
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
	opacity: 0;
	z-index: 0;
	transition: all .7s ease-in-out;
}

.fp-section.active {
	visibility: visible;
	opacity: 1;
	z-index: 1;
}
/* *******FULLPAGE FADE END*/

.intro{
	font-weight: 700;
}

/* =Home Page
-------------------------------------------------------------- */



/* End=Home Page
-------------------------------------------------------------- */

/* =About Page
-------------------------------------------------------------- */
.about img{
	width: 70%;
/*	-webkit-box-shadow: 0px 0px 25px 4px #00ffff;
	-moz-box-shadow: 0px 0px 25px 4px #00ffff;
	box-shadow: 0px 0px 25px 4px #00ffff; */
	opacity: 1;
}

.about p{
	line-height: 25px;
	font-weight: 400;
	font-size: 20px;
	color: #FFF;
	text-align: justify;
}

.about .btn{
	padding: 10px 30px;
	font-weight: 700;
}

.about-con{
	top: 50%;
	bottom: 50%;
}

.my-skills h5{
   margin: 30px 0 15px 0;
   line-height: 0px;
   text-align: left;
}

.my-skills{
	margin: 0 0 50px 0;
}
.progress-bar{
	background-color: #000;
}

.about a{
	color: #000;
    text-decoration: none;
}
.about a:hover{
	color: #FFF;
    text-decoration: none;
}
/* End=About Page
-------------------------------------------------------------- */

/* =Projects Page
-------------------------------------------------------------- */
.projects{
	margin: 50px 0;
}



.projects a{
	color: #FFF;
    text-decoration: none;
}

.projects a:hover{
	font-weight:700;
	text-decoration: none;
}

.card-body{
	background-color: #222;
	color: #FFF;
}


/* End=Projects Page
-------------------------------------------------------------- */

/* =Contact Page
-------------------------------------------------------------- */


.contact .btn{
	padding: 10px 30px;
	font-weight: 700;
}
/* .contact a{
	color: #000;
	font-weight:700;
    text-decoration: line-through;
}

.contact a:hover{
	font-weight:700;
	text-decoration: none;
	color: #FFF;
}
 */
 
/* End=Contact Page
-------------------------------------------------------------- */

/* =Responsive
-------------------------------------------------------------- */
		/* Extra small devices (portrait phones, less than 576px) */
		@media (max-width: 375px) {
			
		}

		/* Extra small devices (portrait phones, less than 576px) */
		@media (max-width: 575.98px) {
			#fp-nav{
				display: none;
			}
			
		}

		/* Small devices (landscape phones, less than 768px) */
		@media (max-width: 767.98px) {
			.about, .projects, .contact {
				margin: 50px 0;
			}
			.contact{
				margin-bottom: 50px;
			}
		}

		/* Medium devices (tablets, less than 992px) */
		@media (max-width: 991.98px) {
			
		}

		/* Large devices (desktops, less than 1200px) */
		@media (max-width: 1199.98px) {
			
		}
/* End=Responsive
-------------------------------------------------------------- */