/* CSS Document */



/*.preview:hover {
 transform: scale(.75);
}*/

.shine figure{
	position: relative;
	overflow: hidden;
}
.shine figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.shine figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .65s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	95% {
		left: 75%;
		opacity: .3;
	}
}


main{
	padding-left: 60px;
	padding-right: 60px;
	padding-top: 40px;
	
}
	
	header{
	padding-right: 80px;
	
		
}



.logo{
	width: 100%;
	max-width: 400px;
	margin-top: 80px;
	margin-bottom: 50px;

}
	

body
{
  margin: 0;
  padding: 0;
  
  /* make it look decent enough */
  
  color: #cdcdcd;
  font-family: "Avenir Next", "Avenir", sans-serif;
}

.home{
	color: #000000;
	padding-top: 10px;
	line-height: 18px;
	
}


h1{

/*font-family: miller-banner, serif;

font-weight: 700;

font-style: normal;*/
	
	font-family: acumin-pro, sans-serif;
font-weight: 500;
font-style: normal;	
color: #000000;
font-size: 1.75em;	
/*border-bottom: 2.5px solid #34065A;*/
padding-bottom: 10px;
	
}

h2{
	
font-family: acumin-pro, sans-serif;
font-weight: 500;
font-style: normal;	
color: #FFFFFF;
font-size: 1.75em;	
border-bottom: 2.5px solid #ffffff;	
padding-bottom: 10px;

	
}

h3{
	font-family: acumin-pro, sans-serif;
font-weight: 500;
font-style: normal;	
	color: #000000;
	
	padding-top: 15px;
	padding-bottom: 15px;
	
	padding-right:10px;
	font-size: 1.75em;
	
}

h4{
	
font-family: acumin-pro, sans-serif;
font-weight: 500;
font-style: normal;	
	padding-left: 60px;
	padding-right: 60px;
	color: #FFFEFE;
	font-size: 1.75em;
	padding-top: 50px;
	padding-bottom: 10px;
	
}

h5{
font-family: miller-banner, serif;
padding-top: 10px;
font-weight: 300;
font-style: normal;
font-size: 1.25em;	
color: #000000;
padding-bottom: 8px;
border-bottom: 2px solid #461450;

}

h6{
	font-family: acumin-pro, sans-serif;
font-weight: 300;
font-style: italic;
color: #000000;
}

p{
	color: #000000;
	padding-top:7px;
	padding-bottom: 15px;
	line-height: 1.35em;
}

.activities{
	color: #000000;
	padding-top:5px;
	padding-bottom: 5px;
}

.bold{
font-family: acumin-pro, sans-serif;
font-weight: 700;
font-style: normal;	
}

.experience{
	padding-bottom: 5px;
}

.rectangle1 {
  height: 4px;
  background: rgb(67,0,95);
background: linear-gradient(90deg, rgba(67,0,95,1) 0%, rgba(245,68,157,1) 100%);

}

.rectangle2{
	height: 5px;
 background: rgb(67,0,95);
background: linear-gradient(90deg, rgba(67,0,95,1) 0%, rgba(245,68,157,1) 100%);
text-align: center;
margin-bottom: 15px;
	
}


.rectangle3{
	 height: 5px;
  background: rgb(67,0,95);
background: linear-gradient(90deg, rgba(67,0,95,1) 0%, rgba(245,68,157,1) 100%);
	text-align: center;
	margin-bottom: 40px;
}

.rectangle4{
	 height: 4px;
  background: #FFFFFF;
	margin-left: 60px;
	margin-right: 60px;
}

footer{
	background-color: #34065A;
	padding-left: 80px;
	padding-right: 80px;
	padding-top: 70px;
	padding-bottom: 10px;	
}

.footer{
	font-size: .55em;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 10px;
	color: #FFFFFF;
}

footer ul{
	
	padding-bottom: 50px;
}


footer a:link, footer a:active, footer a:visited{
	color: #FFFFFF;
	
}

footer a:hover{
	transition: color .25s linear 0s;
	color:#DB41AF;
}

.box{
	background-color: #7E7E7E;
	margin-top: 45px;
	
}

.box1{
	padding: 30px;
}

.featured-work{
	width: 100%;
	max-width: 300px;
	display: block;
	margin: auto;	
	box-shadow: 7px 7px 7px rgba(0, 0, 0, .3);
}

.container{
	padding-top: 30px;
	padding-bottom:30px;
	
}

.column{
padding-top: 30px;
padding-bottom: 30px;
}


.column1{
	padding-left: 8px;
	padding-right: 8px;
}


footer li{
	
	padding-top: 10px;
	color: #FFFFFF;
}


#desktop-nav{
	display: none;
}


#port-res a:link, #port-res a:active, #port-res a:visited{
	color: #000;
	text-decoration: none;
	
}

#port-res a:hover{
color: #000;
}

#port-res{
	color: #000;
	font-size: 1.35em;
	text-decoration: none;
}

.link{
	padding-bottom: 15px;
	padding-top: 15px;
}

#menuToggle
{
  display: block;
  position: relative;
  top: 50px;
left: 50px;
  z-index: 1;

  -webkit-user-select: none;
  user-select: none;
margin-bottom: 50px;	

}

#menuToggle a
{
  text-decoration: none;
  color: #FFFFFF;
  transition: color 0.3s ease;
}

#menuToggle a:hover{
  color:#DB41AF;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
	
	
}

/*
 * hamburger bars
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background-color: #4A0A7C;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
	

}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  /*background: #232323;*/
	background:#FFFFFF;
	
	
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */


#menu{/*this styles box that slides out*/
  position: absolute;
  width: 200px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
	padding-bottom: 1134px;
  background:#454343;
	
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	
}

#menu li
{
  padding: 10px 0; 
  font-size: 22px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}

#art{
	width: 100%;
	max-width: 350px;
	margin: auto;
	display:block;	
	
}


#art a:hover{
	width: 100px;
  height: 100px;
	
}


.double{
	display: flex;
	
}

@media screen and (min-width:768px){
		
	
	#menu{
		display: none;
	}
	
	#menuToggle{
		display: none;
	}
	
	#desktop-nav{
	display: block;
	text-decoration: none;	
	
}
	
	
	#desktop-nav li{
	
	font-size: 1.15em;
		padding-left: 18px;
	}
	
	#desktop-nav ul{
		display: flex;
		float: right;
		padding-top: 30px;
	}
	
	#desktop-nav a:link, #desktop-nav a:active, #desktop-nav a:visited{
		text-decoration: none;
		text-align: right;
		color:#34065A;
			

	}
	
	#desktop-nav a:hover{
		transition: color .25s linear 0s;
	color:#DB41AF;
		
	}
	
	.container{
		display: flex;
		padding-left: 50px;
		padding-right: 50px;
	}
	
	.big-container{
		display: flex;
		margin: auto;
		
	}
	
	.column1{
		
		justify-content: center;
		
	}
	
	.logo{
		max-width: 425px;
		width: 100%;
		
		
	}
	
	header{
	padding-right: 80px;
		text-align: left;
}
	
	h3{
	font-size: 2.05em;
	
	color: #000000;
	text-align: left;
	padding-top: 15px;
	padding-bottom: 15px;
	
}
	
	
	
	#tier1{
		max-width: 450px;
		width:100%;
	}
	
	#freddie{
		max-width: 450px;
		width:100%;
	}
	
	.column{
		padding-left: 13px; 
		padding-right: 13px; 
		padding-top: 30px;
		padding-bottom: 30px;
		
		
		
	}
	
	
}

	
@media screen and (min-width:1000px){
	.big-container{
		justify-content: center;
	}
	
	#art{
		max-width: 350px;
		width: 100%;
	}
		
	.logo{
		max-width: 475px;
		width: 100%;
		
	}
	
	.container{
		display: flex;
		justify-content: center;
		
		
	}
	
	
	#tier1{
		max-width: 450px;
		width:100%;
	}
	
	#freddie{
		max-width: 450px;
		width:100%;
	}
	
	h4{
		padding-left: 17%;
		padding-right: 17%;
	}
	
	.rectangle4{
		margin-left: 17%;
		margin-right: 17%;
		
	}
	
	main{
		padding-left: 17%;
		padding-right: 17%;
	}
	header{
		padding-left: 17%;
		padding-right: 17%;
	}
	
	footer{
		padding-left: 17%;
		padding-right: 17%;
	}
	
	.container{
		padding-left: 17%;
		padding-right: 17%;
	}
	
}