* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    vertical-align: baseline;
	font-size: 100%;
}

body {
    width: 100%;
	background-color: powderblue;
	text-align: center;
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	margin: 0 auto;
}
main {
	padding: 1%;
}

h1 {
	color: cornflowerblue;
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	font-weight: 900;
	font-size: 3rem;
	line-height: 3.5rem;
	margin:0 auto;
	letter-spacing: -5px;
}
h2 { 
	font-family: 'Montserrat', sans-serif;
	color: darkviolet;
	font-size: 1.5rem;
	line-height: 1.75rem; 
	font-weight: 900;	 
}
h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: midnightblue;
}
p {
	color: slategray;
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	font-size: 1 rem;
	font-weight: 400;
	text-align: left;
}
.title {
	margin-top:5px;
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	width: 400px;
	margin: 0 auto;
}
.title_box {
	border:10px ; 
	border-style:solid inset; 
	border-color: powderblue; 
	padding: .25em;
	background-color: white;
	width: 180px;
	margin: 1%;
	border-radius: 2%;
}
.text_block {
	width: 30rem;
	background-color:powderblue;
	padding: 2%;
	margin: 0 auto;
	margin-top: 2%;
	margin-bottom: 2%;
	font-size: 1 rem;
	line-height: 1.25;
	color: black;
	border-radius: 10px;
	border: 2px solid navy;
}
/* NAV BAR */

nav {
	height: 60px;
	width: 100%;
	background: darkgrey;
	position: fixed;
	z-index: 1001;
}

nav li {
	display:inline;
}

nav a {
	display: inline-block;
	text-decoration: none;
	font-weight: 400;
	width: 140px;
	text-align: center;
	padding: 17px 0;
	color: navy;
	transition: .2s;
	border-right: 1px solid gainsboro;
}

nav a:hover {
	color:white;
	background-color: darkviolet;
}

nav a:active {
	color: white;
	background-color: darkviolet;
}

.logo {
	display:inline;
	float: left;
}

#ham-button {
	display:none;
}
/* NAV BAR END*/
/* SOCIAL BAR */

#social {
	z-index: 1000;
	position: fixed;
	width: 80px;
	background-color: darkviolet;
	right: 0;
	top: 20%;
	border-radius: 2%;
}

#social li {
	list-style-type: none;
}

#social a{
	display:inline-block;
	text-align:center;
	height: 80px;
	border-bottom: 1px solid white;
	line-height: 80px;
	width: 100%;
	text-decoration: none;
	font-size: 1.5em;
	color: white;
	transition: .2s
}
#social a:hover {
	background-color: white;
	color:darkviolet;
}
/* SOCIAL BAR END*/

#address{
	width: 400px;
	margin: 0 auto;
	padding: 10px;
}

/* SPLASH */
.splash {
	margin: 0 auto;
	
}
#logo_top {
	width: 35%;
	padding: 4%;
	transform: translateX(-50%);
	position: relative;
	opacity:.8;
	animation-duration: 3s;
	animation-name: in;
	animation-fill-mode: forwards;
	margin: 0 auto;
	margin-left: 25%;
	animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 2%;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}

@-webkit-keyframes in {
	from {opacity: 0;  }
	to { opacity:.8; }
}
@-o-keyframes in {
	from {opacity: 0;  }
	to { opacity:.8; }
}
@-moz-keyframes in {
	from {opacity: 0;  }
	to { opacity:.8; }
}
@keyframes in {
	from {opacity: 0;  }
	to { opacity:.8; }
}
.fade-in {
	animation-name: float;
	animation-duration: 1.5s;
	animation-direction:alternate;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
	}
.header_pic{
	width: 35%;
	margin:5%;
}
.header_text {
    position: relative;
    transform: translate(50%,-50%);
    text-transform: uppercase;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	font-size: 7vw;
	line-height: 7vw;
	font-weight: 700;
	margin-top: 10%;
	margin-bottom: 5%;
    color: darkviolet;
    text-shadow: 1px 1px 1px #919191,
        1px 2px 1px #919191,
        1px 3px 1px #919191,
        1px 4px 1px #919191,
        1px 5px 1px #919191,
        1px 6px 1px #919191,
        1px 7px 1px #919191,
        1px 8px 1px #919191,
        1px 9px 1px #919191,
        1px 10px 1px #919191,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(211, 181, 181, 0.4);
}
/* ANIMATION SECTION */

	.slider {
		/* line them up horizontally */
		display: flex;
	  
		/* allow for scrolling */
		overflow-x: auto;
	  
		/* make it smooth on iOS */
		-webkit-overflow-scrolling: touch;
		padding: 1%;
	  }
	  .slider > div {
		/* make sure the width is honored */
		flex-shrink: 0;
		width: 45%;
		
	  }
	  .slider {
		/* ... */
	  
		/* each slide snaps into place */
		scroll-snap-points-x: repeat(500px);
		scroll-snap-type: mandatory;
	  }
	  .youtube-video-container {
		position: relative;
		overflow: hidden;
		width: 100%;
	  }
	  
	  .youtube-video-container::after {
		display: block;
		content: "";
		padding-top: 56.25%;
	  }
	  
	  .youtube-video-container iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	  }
/* END ANIMATION SECTION */
/* BUTTON */
button {
	margin: 0 auto;
	margin-bottom: 1%;
	margin-top:1%;
	cursor: pointer;
	outline: none;
	border:none;
	background-color:cornflowerblue;
	font-weight: 800;
	text-transform: uppercase;
	padding: 20px 40px;
	color:white;
	box-shadow: 2px 2px black;
	transition: .2s;
	letter-spacing: 2px;
	border-radius: 10px;
	border: 2px solid navy;
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}
button a:hover {
	color:white;
	background-color: darkviolet;
}
button a:active {
	color: white;
	background-color: darkviolet;
}
button:hover {
	background-color: white;
	color:cornflowerblue;
	box-shadow: 1px 1px black;
	}
/* END BUTTON */


/* WEB DESIGN*/
.gallery_box{
	padding: 10px;
}
.anim {
	border-radius: 2%;
	box-shadow: -10px 3px 6px rgba(0, .2, 0, 0.3);
}
.portfolio {
	margin-bottom: 100px;
  }
  
  .portfolio-description {
	text-align: left;
	margin-bottom: 50px;
	line-height:1rem;
  }
  
  .portfolio-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
	grid-row-gap: 5vw;
	grid-column-gap: 2vw;
	justify-content: space-evenly;
  }
  .portfolio-item {
	border: 1px solid #eee;
  }
  .portfolio-item-link {
	position: relative;
	display: block;
	height: 400px;
	overflow: hidden;
	border-bottom: 1px solid #eee;
  }
  .portfolio-item-link img {
	width: 100%;
	height: auto;
	transform: translateY(0px);
	transition: 3s ease;
  }
  
  .portfolio-item-link:hover img {
	transform: translateY(calc(-100% + 400px));
	transition: 5s ease;
  }
  
  .portfolio-item-link:hover .portfolio-item-eye {
	opacity: 1;
  }
  
  .portfolio-item-link:hover .portfolio-item-gradient {
	opacity: 1;
  }
  
  .portfolio-item-description {
	padding: 20px 40px;
  }
  
  .portfolio-item-description-title {
	margin-bottom: 15px;
	font-size: 1.5rem;
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  }
  
  .portfolio-item-description-text {
	font-size: 1.25rem;
	margin-bottom: 15px;
	width: 300px;
	text-align: left;
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  }
  
  .portfolio-item-description-link {
	padding: 5px 10px;
	font-size: 12px;
	line-height: 1.5;
	border: 1px solid #ccc;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: powderblue;
  }

  .portfolio-item-description-link:hover {
	border-bottom-color: #adadad;
	background-color: #ebebeb;
  }
  .card {
	/* Add shadows to create the "card" effect */
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
	width: 95%;
	padding: 3%;
	margin:0 auto;
  }
  
  /* On mouse-over, add a deeper shadow */
  .card:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  /* Add some padding inside the card container */
  .container {
	padding: 2px 16px;
  }
/* END WEB DESIGN*/
/* bio */
.profile_pic {
	max-width: 35%;
	border-radius: 50%;
	margin: 0 auto;
}

#profile_avatar{
	opacity: 0;
	border-radius: 50%;
}
#profile_avatar:hover {
	opacity:100%;
}
/* END bio*/

/* recommendation*/

.gallery_container{
    padding: 1rem;
    column-count: 3;
}
img .gallery_container{
    width: 100%;
    margin-bottom: 1em;
}
#slider,  #slider .slide{
	width: 500px;
	height: 500px;
  }
  #slider {
	overflow: hidden;
	margin: 0 auto;
	font-size: 1em;
	background: powderblue;
  }
  #slider .container {
	position: relative;
	width: 9000px; /* Assign an insanely large width */
	top: 0;
	right: 0;
	animation: slide-animation 25s infinite;
  }
  #slider .slide {
	position: relative;
	float: left;
	box-sizing: border-box;
	padding: 20px 20px;
  }
  .ref_avatar {
	  width:120px;
  }
  /* recommendation*/
  
  /* [ANIMATION] */
  @keyframes slide-animation {
	0% { 
	  opacity: 0;
	  right: 0;
	}
	11% {
	  opacity: 1;
	  right: 0; 
	}
	22% { right: 100%; }
	33% { right: 100%; }
	44% { right: 200%; }
	55% { right: 200%; }
	66% { right: 300%; }
	77% { right: 300%; }
	88% {
	  opacity: 1;
	  right: 400%; 
	}
	100% {
	  opacity: 0;
	  right: 400%;
	}
  }

/* SECTION HEADER*/

.wrap {
	padding:3vh;
	background-color: powderblue;
	margin-bottom: 1vh;
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23b6aeaa' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.header_pic {
	width: 30%;

animation:  bounceIn 2s ease-in-out 3s 2;
}
/* SECTION HEADER*/

.profile_container{
    height: 400px;
    width: 400px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
}
.overlay{
    height: 400px;
    width: 400px;
    position: relative;
    top: 0;
    left: 400px;
    transition-property: left;
    transition-duration: .5s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile_container:hover .overlay{
    left: 0;
}
/* MOTION GRAPHICS*/
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: cornflowerblue;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
/* MOTION GRAPHICS END*/

.bitCache {
	width: 40%;
}
.cards {
	max-width: 960px;
	margin: 0 auto 30px;
  }
  
  article {
	position: relative;
  }
  
  .article-img {
	height: 20%;
	width: 100%;
	object-fit: cover;
  }
  
  .article-title {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.2);
  }
/*UX*/
.brief {
	display: grid;
	grid-template-columns: auto auto;
	width: 100%;
	
}
/*END UX*/

/*FOOTER*/

footer p {
    text-align: center;
    color: cornflowerblue;
    margin: 60px auto;
}
/* END FOOTER*/
  @media (min-width: 700px) {
	.leading {
	   display: flex;
	   align-items: center;
	 }
   }
   /* Grid styles -------------------------------------------------*/
   .cards {
	 display: grid;
	 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	 grid-gap: 30px;
   }
@media (max-width: 800px){
	.hero{
		min-height: 600px;
	}
    .gallery_container{
        column-count: 2;
	}
}

@media(max-width: 600px){
    .gallery_container{
        column-count: 1;
    }
}

/* Menu resposiveness */
@media screen and (min-width: 680px) and (max-width: 1365px) {
	#ham-button {
	border:none;
	color:white;
	margin:0;
	padding:0;
	display:block;
	background-color: black;
	z-index: 2000;
	position:fixed;
	top: 10%;
	left: 0;
	width:10vh;
	height: 10vh;
	text-align: center;
	box-shadow: none;
	transform: translateY(-50%);
	transition: transform 1s;
	font-size: 1.5em;
	}
.slide-the-drawer {
	transform: translateX(100vw);
}
.slide-the-burger {
	transform: translateX(300vw);
}
nav {
	display: block;
	left:-100vw;
	height:100vh;
	transition: transform 1s;
	width:100vw;
}
nav ul {
	height:auto;
}
nav li {
	width: 100%;
	float:left;
	position: relative;
}
nav li a {
	width:100%;
	text-align: left;
	text-indent: 5vw;
	line-height: 8vh;
	font-size: 4em;
}
.logo {
	width: 100%;
}
}
@media screen and (min-width: 680px) and (max-width: 1365px) {
#social {
	top: 30%;
	}
}
/*responsive*/

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

	.main .gallery .image-pack .imgbox{
		position: absolute;
		height: 250px;
		width: 250px;
		display: inline-block;
		margin:0 1%;
	}
	.gallery {
		height: auto;
		width: auto;
	}
	p {
		width: 280px;
		padding: 0;
	}
	main {
	padding: 0;
	}
	p {
		width: 200px;
	}
	h1 {
		
		line-height: 1.5rem;
		margin-left: 60%;
		letter-spacing: -2px;
	
	}
	h2 {
		line-height: 1.5rem;
		margin: 0 auto;
		padding: 2%;
		
	}
	.header_pic{
		width: 55%;
	}
	.header_text {
		margin: 0 auto;
		margin-top: 2%;
		font-size: 12vw;
		line-height: 11vw;
		padding:2%;
		text-shadow: 1px 1px 1px #919191,
			1px 1px 1px #919191,
			1px 2px 1px #919191,
			1px 3px 1px #919191,
			1px 4px 1px #919191,
			1px 5px 1px #919191,
			1px 6px 1px #919191,
			1px 7px 1px #919191,
			1px 8px 1px #919191,
			1px 9px 1px #919191,
		1px 9px 6px rgba(16,16,16,0.4),
		1px 11px 5px rgba(16,16,16,0.2),
		1px 12px 17px rgba(16,16,16,0.2),
		1px 15px 30px rgba(211, 181, 181, 0.4);
	}
	.brief {
		display: grid;
		grid-template-columns: none;
	}
	.slider > div {
		/* make sure the width is honored */
		
		width: 80%;
		
	  }
	  .slider {
		/* ... */
	  flex-direction: column;
		/* each slide snaps into place */
	  }
	  .video-container{
		  width:250px
	  }
	.title {
		font-size: 2rem;
		margin: 0 auto;
	}
	.card {
		/* Add shadows to create the "card" effect */
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
		transition: 0.3s;
		width: 98%;
		padding: 1%;
		margin:0 auto;
	  }
	.text_block {
		width: 18rem;
		font-size: 1rem;
		padding: 3%;
	}
	
	#social {
		width: 50px;
		top:20%;
	}
	#social a {
		height: 50px;
		line-height: 50px;
		font-size: 1.5em;
	}
	.profile_pic img{
		width: 95%;
		margin: 0 auto;
	}
	#logo_top {
		margin: auto 0;
		width:50%;
		
		padding: 3%;
	}
	.references {
		width: 400px;
		margin: 0 auto;	
	}
	#ham-button {
		border:none;
		color:white;
		margin:0;
		padding:0;
		display:block;
		background-color: black;
		z-index: 2000;
		position:fixed;
		top: 60%;
		left: 0;
		width:10vh;
		height: 10vh;
		text-align: center;
		box-shadow: none;
		transform: translateY(-50%);
		transition: transform 1s;
		font-size: 1.5em;
	}
	.slide-the-drawer {
		transform: translateX(100vw);
	}
	.slide-the-burger {
		transform: translateX(300vw);
	}
	nav {
		display: block;
		left:-100vw;
		height:100vh;
		transition: transform 1s;
		width:100vw;
	}
	nav ul {
		height:auto;
	}
	nav li {
		width: 100%;
		float:left;
		position: relative;
	}
	nav li a {
		width:100%;
		text-align: left;
		text-indent: 10vw;
		float: center;
	}

	.wrap {
		padding:.5vh;
	}
	.portfolio-item-description-text {
		font-size: 1.25rem;
		line-height: 1rem;
		margin: 0 auto;
		margin-bottom: 15px;
		width: 250px;
		text-align: left;
	}
}