/*
Theme Name:		Marraman 2017
Theme URI:		#
Description:	Custom WP theme for Marraman.com
Version:		1.0
Author:			Peter Marra
*/

.clear {
clear: both;	
}

body, html {
height: 100%;	
}

body {
background: #fff;
color: #666;
}

h2 {
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-weight: 600;
font-size: 28px;
letter-spacing: 3px;
}

h1 {
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 300;
font-size: 24px;
letter-spacing: 1px;
}

h1,
h2 {
line-height: 1.2;
}

h1 span {
color: #ef483e;	
}

h2.white {
color: #fff;	
}

section h2 {
margin-bottom: 10px;	
}


p.subhead {
font-size: 20px;
font-family: 'Open Sans Condensed', sans-serif;
margin-bottom: 20px;
line-height: 1.3;
}

header {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 25% 0 0;
text-align: center;
position: relative;
overflow: hidden;
}

header figure {
width: 240px;
height: 240px;
vertical-align: top;
margin: -120px auto 20px;
background: transparent url(img/profile-pic.jpg) center center no-repeat;
background-size: cover;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
transition: all 0.3s ease 0s;	
}

header figure:hover {
width: 280px;
height: 280px;
margin-top: -140px;	
}

header figure.night {
background-image: url(img/profile-pic-night.jpg);
}

header .down-arrow {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #ef483e;;
cursor: pointer;
display: block;
height: 0;
width: 0;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -50px;
}


#contact {
position: fixed;
left: 20px;
top: 50px;
width: 40px;
z-index: 100;
}

#contact div {
border: solid 2px #fff;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
transition: all 0.2s ease 0s;
background: #ef483e;
margin-bottom: 6px;
line-height: 40px;
font-size: 24px;
color: #fff;
text-align: center;
}

#contact div:hover {
width: 50px;
height: 50px;
line-height: 50px;
font-size: 30px;
margin-top: -5px;
margin-left: -5px;
}


section {
padding: 50px;
text-align: center;
overflow: hidden;
}

section#awards {
background: #ef483e;
padding-bottom: 200px;
}

section#awards p.subhead,
section#thesis p.subhead {
color: #fff;	
}

section#thesis {
background: #ef483e;
padding-bottom: 50px;
}

div.award {
vertical-align: top;
width: 200px;
height: 200px;
background-color: #fff;
background-size: 200px 200px;
background-position: center center;
background-repeat: no-repeat;
margin: 0 15px;
display: inline-block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease 0s;	
}


div.award#telly {
background-image: url(img/awards/telly-400.jpg);	
}

div.award#davey {
background-image: url(img/awards/davey-400.jpg);	
}

div.award#w3 {
background-image: url(img/awards/w3-400.jpg);	
}

div.award span {
display: table;
width: 100%;
height: 100%;
opacity: 0;
background: transparent url(img/white-90.png) 0 0 repeat;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}

div.award span h3 {
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 300;
font-size: 22px;
line-height: 1.3;	
}

div.award span h3 a {
color: #ef483e;
font-weight: 700;
}

div.award:hover {
width: 220px;
height: 220px;	
}

div.award:hover span {
opacity: 1.0;
transition: all 0.3s ease 0s;	
}

div.award-wrap {
max-width: 660px;
margin: 20px auto;
position: relative;
}

div.award-descrip {
position: absolute;
left: 0;
top: 0;
opacity: 0;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-size: 18px;
line-height: 1.5;
}

div.award-descrip.award-on {
transition: all 0.3s ease 0s;	
opacity: 1;	
}

div.award-descrip a {
color: #fff;	
}

.fluid-width-video-wrapper {
width: 100%;
height: auto;
padding-bottom: 30px !important;
}

.portfolio-column {
width: 30%;
max-width: 440px;
margin: 0 10px;
vertical-align: top;
display: inline-block;
min-width: 300px;	
}

.portfolio-item {
width: 100%;
margin: 20px 0;
vertical-align: top;
display: inline-block;
box-sizing: border-box;
border: solid 1px #eee;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.portfolio-item img {
width: 100%;
height: auto;
vertical-align: top;
transition: all 0.3s ease 0s;
opacity: 1.0;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5p
}

.portfolio-item img:hover {
opacity: 0.7;
}

.portfolio-item.web {
padding-top: 0;
}

.portfolio-item.web h4 {
margin: 0;
padding: 10px;
background: #ef483e;
color: #fff;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

.portfolio-row#bww {
margin-left: -50px;
padding: 30px 50px;
width: 100%;
box-sizing: content-box;
clear: both;
background: #ef483e;
color: #fff;
}

h4,
#bww p { 
margin-top: 40px;
margin-bottom: 10px;
line-height: 1.2;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 24px;
font-weight: 300;
}

#bww p {
margin-top: 5px;
}

.portfolio-item {
padding-top: 40px;
margin: 20px auto;
max-width: 600px;
background: #fff;
}

.portfolio-column.other .portfolio-item {
margin-top: 0;
padding-top: 0;
}

#bww .fluid-width-video-wrapper {
	
}

#bww h4,
h3.other {
margin-top: 40px;
font-family: 'Open Sans', sans-serif;
font-size: 28px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 10px;
line-height: 1.2;	
}


figure.thesis-cover {
width: 220px;
height: 220px;
background: #fff url(img/thesis-cover.png) center center no-repeat;
background-size: cover;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
transition: all 0.3s ease 0s;
margin: 20px auto;
display: block;
vertical-align: top;
}

figure.thesis-cover:hover {
width: 240px;
height: 240px;	
}