/*
THEME NAME: AdamPortfolio Final
Designed by Adam Westbrook
*/

/*CSS IMPORTS*/
@import "css/reset.css"; /*THIS LOADS THE RESETS*/
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700);

html, body {font-family: 'Roboto', serif; font-size: 18px; display: block; line-height: 1.4em; color: #303c52; min-height: 100%; margin-bottom: -60px;}

/*TYPOGRAPHY*/
h1 {font-size: 2.2em; font-weight: 400; font-weight: bold; color: #000; margin-bottom: 20px;}
h2.introduction {font-size: 1.2em; line-height: 1.3em; font-weight: bold;}
h3.portfoliotitle, h3.pagetitle {font-weight: 700; font-size: 1.3em;}
h4.portfoliometadata {font-weight: 300; text-transform: uppercase; font-size: 0.8em;}
h5.portfoliolink a {color: #fff; background-color: #000; padding: 10px; text-transform: uppercase;}
h6.overlay {font-weight: 300; font-size: 0.8em; color: #fff; text-align: center; text-transform: uppercase; background-color: #000; padding-top: 25%; padding-bottom: 25%;}
p.introduction, p.portfoliotext, p.pagetext {line-height: 1.5em; padding: 10px 0 10px;}
p {line-height: 1.5em; padding: 10px 0 20px;}
a {text-decoration: none; }
a:hover {}
a:visited {text-decoration: none; color: #b6695f;}

/*GLOBAL CLASSES*/
.contained {width: 90%; margin: 100px auto 0;}
.left {float: left;}
.right {float: right}
article {overflow: hidden; height: 100%;}
article:after {content: "";display: block;}
.clearfloat {clear: both;}

/*MENUS & FOOTER*/

#menu {width: 100%; height: 40px; background-color: #000; display: block; position: fixed; top: 0; z-index: 30;}
ul#menu-menu, #menumobile ul {width: 90%; height: 40px; margin: 0 auto;}
li.menu-item, #menumobile li {width: 12%; height: 40px; float: left; text-align: left;}
li.menu-item a, #menumobile li a {color: #fff; font-weight: 300; font-size: 0.8em; text-transform: uppercase; line-height: 40px; text-align: center; position: relative;}

#menumobile {width: 100%; height: 40px; background-color: #000; display: block; position: relative; top: 0; z-index: 30; visibility: hidden;}

footer {width: 100%; height: 30px; clear: both; margin-top: 50px; bottom:0; left: 0; overflow: hidden; border-top: 1px solid #303c52;}
#credits {width: 50%; margin: 0 auto;}
#credits p {color: #303c52; font-size: 0.7em; text-transform: uppercase; text-align: center;}

/*HOMEPAGE*/

#homepage {clear: both; padding-bottom: 50px;}

#introduction {width: 90%; margin: 100px auto; padding-bottom: 30px;}
#words {width: 60%; float: left;}
#portrait {width: 35%; float: right; padding-right: 5%;}
img#portrait {width: 50%; margin: 0 auto;}

img {display: block;}
#portfolio {width: 100%; height: auto; display: block; position: relative; margin-top: 80px; overflow: hidden;}
.portfolioitem {width: 33.3333%; height: 100%;float: left; position: relative; }
.portfolioitem a {padding: 0; margin: 0;}
.overlay {position: absolute; top:0; left; 0; background-colour: #000; width: 100%; height: 100%; opacity: 0;}
.overlay:hover {opacity: 1; -webkit-transition: opacity 0.6s ease-out; -moz-transition: opacity 0.6s ease-out; transition: opacity 0.6s ease-out;}


/*PORTFOLIO PAGES*/

article {position: relative; overflow: hidden; height: 100%; display: block;}
#portfoliowords {width: 30%; margin-right: 10%; position: fixed;}
#portfoliopictures {width: 60%;}


/*OTHER PAGES*/
#pagewords {width: 30%; margin-right: 10%; position: relative;}

/*RESPONSIVE*/

/*BIG SCREENS*/

@media only screen and (min-width: 1680px) {

.portfolioitem {width: 25%;}

}


/*TABLETS*/

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

.portfolioitem {width: 50%;}
li.menu-item {width: 15%;}
#portfoliowords {width: 100%; position: relative; float: none;}
#portfoliopictures {width: 100%; float: none;}
#pagewords {width: 75%; margin-right: 0; position: relative;}
#credits {width: 80%; margin: 0 auto;}
}

/*PHONES*/

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

body {font-size: 12px;}
#menu {visibility: hidden;}
#menumobile {visibility: visible;}
h1 {text-align: center;}
#introduction {width: 95%; margin: 50px auto; padding-bottom: 30px;}
#words {width: 100%; float: none;}
#portrait {width: 100%; float: none; padding: 10px 0 20px;}
.portfolioitem {width: 100%;}
#portfolio {margin-top: 10px; }

.overlay {opacity: 0;}
.overlay:hover {opacity: 0;}
#portfoliowords {width: 100%; position: relative; float: none;}
#portfoliopictures {width: 100%; float: none;}
#pagewords {width: 100%; margin-right: 0; position: relative;}

#credits {width: 90%; margin: 0 auto;}
}