body {
	background-color: #ffffff;
	padding-top: 60px;
	height:100%;
}

.container {
	max-width: 1000px;
	width: 825px;
}

.container:after {
    content: '';
    display: block;
    clear: both;
}

.left{
	float: left;
	width: 220px;
}

.left img{
	width: 220px;
}

.right{
	float: right;
	width: 580px;
}

.notext {
	height: 40px;
	margin-top: 25px;
	background: #ffe67b;
}

.notext:hover{
	background: #ffce00;
}

.right a{
	background: #ffe67b;
	padding-left: 3px;
	padding-right: 3px;
	color: #000000;
}

.right a:hover{
	background: #ffce00;
}

.right p{
	font-size:18px;
	color: #000000;
	font-family: 'fraunces', 'Arial', sans-serif;
	font-weight: 300;
}

#memoji{
	width: 50%; 
	margin-left: 20px; 
	transform: rotate(-5deg);
}

.brandlogos {
	width: 90%
}

.hidden{
	display: none;
}

.jumbotron {
	margin-top: 20px;
}

.portfolio-thumb-title {
	padding: 20px;
	vertical-align: middle;
	padding-top: auto;
	padding-bottom: auto;
	background-color: #d8d8d8;
}

h3 {
	font-size: 16px;
	font-family: 'Fraunces', serif;
	font-weight: 200;
	color: #000000;
}

.embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; overflow: hidden; 
  max-width: 100%; 
} 

.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; 
  height: 100%; 
}
.work-img {
	width: 100%;
	position: relative; 
	height: auto;
	margin-bottom: 20px;
}

.work-img img {
	width: 100%;
	height: auto;
}

.film-16-9 {
	padding-bottom: 56%;
}

.film-4-3 {
	padding-bottom: 75%;
}

.work-copy {
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 20px;
}

.work-copy p {
	font-size: 14px;
	font-family: 'Caudex', serif;
	font-weight: 400;
	color: #d3482b;
}

.work-img iframe {
	position: absolute; 
	padding-top: 20px;
	top: 0; 
	left: 0;
	width: 100%; 
	height: 100%; 
	display: block;
	border: 0px;
}

.bottom {
	padding-bottom: 60px;
}

.top {
	padding-top: 20px;
}

.grid-item-content {
	width:100%;
	height: auto;
	padding: 10px;
}

.grid-item-content img {
	width: 100%;
	position: relative;
	left: 0px;
	top: 0px;
}

.portfolio-thumb {
	position: relative;
}

.portfolio-thumb-hover {
	position: absolute;
	bottom: 20px;
	left: 20px;
	height: 75px;
	right: 20px;
	opacity: 0.8;
	z-index: 1;
	padding-top: auto;
	padding-bottom: auto;
	vertical-align: middle;	
	background-color: #f2dbdc;
}

.portfolio-thumb-hover:hover {
    opacity: 0.8;
}


.no-pad {
  padding-right:0px;
  padding-left:0px;
}

.no-pad-within > [class^="col-"],
.no-pad-within > [class*=" col-"] {
  padding-right:0;
  padding-left:0;
}

/*-----------media rules-----------*/

@media screen and (max-width: 825px) {
    
    body {
    	padding-top: 30px;
    }
    
    .jumbotron {
    	width: 100%;
    	padding-bottom: 20px;
    }
    
    .container {
    	width: 100%;
    }
    
    .header{
    	width: 100%;
    }
    
    .left {
    	float:none;
    	width: 100%;
    }
    .right {
    	float: none;
    	padding-left: 2%;
    	text-align: left;
    	width:100%;
    }
    
    .notext{
    	height: 6vw;
    	width: 69vw;
    	margin-bottom: 20px;
    }
    
    .left img{
    	width: 40%;
    }
    
    #memoji{
    	width:25%;
    }

	.brandlogos {
		width: 100%
	}
    
    .grid-item-content img {
		width: 100%;
		position: relative;
		left: 0px;
		top: 0px;
	}
    
    .grid-item-content {
		position: relative;
	}
	
	
	.portfolio-thumb-hover {
		opacity: 0.8;
		height:  80px;
		bottom: 20px !important;
		left: 20px;
		top: auto;
		right: 20px;
	}
}

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

	.right p{
		font-size:14px;
	}

}