@import url('https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i');

/* UNIVERSAL */

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  font-size: 100%;
  font-family: 'Rubik', sans-serif;
  color: #333447;
  background: #f6f5f3;
}
	
	
	
	*{
		
		box-sizing: border-box;
		margin:0;
		padding: 0;
		border: 0;
		outline: none;
	}
	
	
	
	
	
	/* TYPOGRAPHY */

h1 {
  font-size: 2.125rem;
  font-weight: 700;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.375rem;
}

h4 {
  font-size: 1.125rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.875rem;
}

p {
   font-weight: 200;
   line-height: 1.8;
   color: #9999a3;
}
 
 

 
 
.content p {
  font-size: 0.9rem;
  line-height: 1.8;
  margin-bottom: 20px;
}

.content p.last-p{
  margin-bottom: 0;
}

.content a:link, .content a:active, .content a:visited{
color: #fd3e3d;
text-decoration: none;
}

.content a:hover{
text-decoration: underline;
}



.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-heavy {
  font-weight: 700;
}

.font-ultra {
  font-weight: 900;
}
	
/* POSITIONING */

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.justify {
  text-align: justify;
}
	
	

header{
margin: 20px 0;
}

	
header h1{
text-transform: uppercase;
color: #d5d0c9;
font-size: 1.5rem;
letter-spacing: 2px;
text-align: center;
}	
	
	
header h1 a{
color: #d5d0c9;
text-decoration: none;
 -webkit-transition: color 2s; 
  transition: color 2s; 
}

header h1 a:hover{
  color: #333447;
}



.intro{
padding: 20px 0;
}

.intro p{
font-size: 1.25rem;
line-height: 1.4;
font-weight: 300;
text-align: center;
}





.row{
	position: relative;
	width: 100%;
}

.row::after, .thumbnails::after {
	content: "";
	display: table;
	clear: both;
}



nav {
padding-top: 0;
text-align: center;
font-size: 14px;
letter-spacing: 1px;
}

nav a{
margin: 0 10px;
 text-decoration: none;
 text-transform: uppercase;
 font-weight: 500;
 color: #333447;
}








.thumbnails{
width: 96%;
margin: 0 auto;
}



.item{
	width:100%;
	margin: 1% 0;
	height: inherit;
	float: left;
	vertical-align: baseline;
	position: relative;
}





.item img{
	width: 100%;
	height: auto;
	display: block;
	opacity: 1;
	transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
	-webkit-transition: opacity .3s ease-in-out;
	-webkit-backface-visibility: hidden;
}


.item:hover {
background-color: #000;
-webkit-backface-visibility: hidden;
}

.item:hover img{
opacity: 0.5;
-webkit-backface-visibility: hidden;
}


	.item-name{
	opacity: 0;
	transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	position: absolute;
	z-index: 20;
	margin: 0 auto;
	text-align: center;
	top: 50% !important;
	transform: translateY(-50%);
	width: 100%;
	color:#fff;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	text-transform: uppercase;
	}



.item:hover .item-name{
opacity: 1;
}
	
	
	
	
	
.item-detail-name h2{
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}	
	


.item-detail-img img{
width: 100%;
max-width: 100%;
height: auto;
display: block;
}


.item-description{

}



footer{
border-top: 1px solid #dadada;
display: block;
margin: 20px auto;
}

footer p{
  font-size: .75rem;
  text-align: center;
  color: #cdc8c0;
}


 
footer .social{
text-align: center;
}
  

footer .social a{
color: #cdc8c0;
text-decoration: none;
margin: 0 10px;
 -webkit-transition: color 2s; 
  transition: color 2s; 
}

footer .social a:hover{
  color: #333447;
}



.prev-next {
font-size: .85rem;
text-align: center;
}

.prev-next a{
margin: 0 10px;
color: #333447;
 -webkit-transition: color 2s; 
  transition: color 2s; 
}


.prev-next a:hover{
color: #d5d0c9;
}