@charset "utf-8";
/* CSS Document */

body{
    max-width: 1024px;
    width: 99%;
    margin: auto;
    padding-top: 1vw;
}
ul{
    list-style-type: none;
    height: 100%;
    padding: 0 0 0 0;
    margin: auto;
}
/***********************************************/
/************* ----> Navbar CSS <---- *********/
/**********************************************/
.navbar {
	overflow: hidden;
/*     padding-top: 5px; */
/*     padding-bottom: 5px; */
	margin: auto;
}
	.navbar-container {
		display: flex;
		flex-direction: row;
		overflow: hidden;

	}
		.navbar-right{
			width: 100%;
			margin: 0;
			letter-spacing: 3px;
		}
			.navbar-right ul{
				display: flex;
				float: right;
				align-items: center;
/* 				justify-content:center; */
			}
				.navbar-right li{

/* 					vertical-align: bottom; */
					padding-right: 1rem;
					list-style: none;
				}
					.navbar-right li a {
						text-decoration: none;
						color: black;
/* 						font-size: 15px; */
/* 						padding: 0 .15rem 0 .15rem; */
						transition: .3s;
					}
						.navbar-right li a img {
							max-width: none;
						}
		.navbar-header{
			width: 10%;
		}
			.navbar-header a img{
				overflow: hidden;
			}
			.navbar-header a img:hover{
				mix-blend-mode: multiply;
			}
		.fa-hide{
			display: none;
		}
		.last{
		margin-right: -.5rem;
		}

/*****************************************************/
/**************----> Hover Effects  <---- ************/
/************* ----> Back Pulse <---- ***********/
/****************************************************/

@-webkit-keyframes hvr-back-pulse {
  50% {
    background-color: rgba(32, 152, 209, 0.25);
  }
}
@keyframes hvr-back-pulse {
  50% {
    background-color: rgba(32, 152, 209, 0.25);
  }
}
.hvr-back-pulse {
	/*display: inline-block;*/
	/*vertical-align: middle;*/
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	-moz-transform: perspective(1px) translateZ(0);
	-o-transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	overflow: hidden;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	-webkit-transition-property: color, background-color;
	transition-property: color, background-color;
	-moz-transition-property: color, background-color;
	-o-transition-property: color, background-color;
}
.hvr-back-pulse:hover, .hvr-back-pulse:focus, .hvr-back-pulse:active {
	-webkit-animation: hvr-back-pulse 1s linear 0.5s infinite;
	animation: hvr-back-pulse 1s linear 0.5s infinite;
	-moz-animation: hvr-back-pulse 1s linear 10ms infinite;
	-o-animation: hvr-back-pulse 1s linear 0.5s infinite;
	background-color: rgba(32, 152, 209, 0.5);
	color: black;
}
.activeNav{
    background-color: rgba(32, 152, 209, 0.5);
}

/******************* AboutMe CSS *****************/

.aboutMe{
	position: relative;
	background-color: rgba(32, 152, 209, 0.5);
	height: 4vw;
	max-height: 40px;
	min-height: 15px;
	margin-bottom: .5rem;
	letter-spacing: .25vw;
	font-size: min(max(8px, 2vw), 20px);
	overflow: hidden;
}

	.aboutMe li {
        position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		transform: translate(0, -50%);
		text-align: center;
		opacity: 0%;
	}

	.aboutMe li:first-child {
		cursor: default;
		animation: loop 10s infinite;
		-webkit-animation: loop 10s infinite;
	}
	.aboutMe li:last-child {
		cursor: default;
		animation: oplast 10s infinite;
		-webkit-animation: oplast 10s infinite;
	}
	@keyframes loop{
		0% { opacity: 0; }
		5% { opacity: 1; }
		45% { opacity: 1; }
		50% { opacity: 0; }
	}
	@keyframes oplast{
		50% { opacity: 0; }
		55% { opacity: 1; }
		95% { opacity: 1; }
		100% { opacity: 0; }
	}




/******************* ShowID description CSS *****************/

#content{
    border-style:none;
    color: chocolate;
    /*position: relative;*/
    /*width: 50%;*/
    /*text-align: center;*/
}

/******************* Showreel CSS *****************/

#reel {
  	position: relative;
	margin: .5% auto auto auto;
	padding-top: 56.25%;
	overflow: hidden;

}

#vimeo {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	max-height: 576px;
}

/********** Nav will change if < or > than value *********/


@media (max-width: 620px) {
	.navbar-container{
	    flex-direction: column;
	}
	.navbar-right{
        display:flex;
        align-items:center;
        justify-content:center;
        letter-spacing: 1px;
 }
	.navbar-right li{
		padding-right: .5rem;
	}
	.navbar-right ul{
		margin: 10px 0 0 0;
		padding: 0;
	}
	.hideNav{
		display: none !important;
	}
	.fa-hide{
		display: inline-block;
		vertical-align: bottom;
		outline: none !important;
	}
	.navbar-header{
		width:auto;
		text-align: center;
	}

}