@import url(http://weloveiconfonts.com/api/?family=fontawesome); body { padding: 0; margin: 0; color: #666; font-family: 'Roboto', sans-serif; font-weight: 300; } img {max-width: 100%;} .container { width: 96%; padding: 2%; clear: both; } .border { border-bottom: 1px dashed #666; } .white { background: url(../img/linen.png) repeat; overflow: hidden; } .big-wrap { vertical-align: middle; display: table-cell; width: 500rem; height: 60rem; } .content { width: 95%; max-width: 1200px; margin: 0 auto; } .intro { background: url(../img/66157_551582364861105_1711431160_n.jpg) no-repeat fixed center center; background-size: cover; color: #fff; text-align: center; } .instagram { background: url(../img/531733_551583194861022_2142672544_n.jpg) no-repeat fixed center left; background-size: cover; color: #fff; } .contact a { color: #fff; font-weight: bold; } .contact a:hover { background: cadetblue; color: #fff; } h1 { font-weight: 300; font-size: 7em; line-height: .8em; font-family: 'Roboto', sans-serif; } .brackets { font-size: 1.2em; } .stalemate { font-family: 'Stalemate', Arial, sans-serif; font-weight: 400; font-size: 1.2em; } h2 { margin: 0 0 20px 0; font-family: 'Roboto', sans-serif; font-weight: 100; font-size: 2.5em; } h3 { margin: 0 0 20px 0; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1em; } p { padding: 0 0 20px 0; margin: 0; } .intro p { font-size: 1.2em; font-weight: 300; } a { text-decoration: none; color: cadetblue; transition: all ease-in-out .2s; -moz-transition: all ease-in-out .2s; -webkit-transition: all ease-in-out .2s; -o-transition: all ease-in-out .2s; } .nav-wrap { width: 100%; position: fixed; background: rgba(0,0,0,.7); opacity: 1; transition: all ease-in-out .2s; -moz-transition: all ease-in-out .2s; -webkit-transition: all ease-in-out .2s; -o-transition: all ease-in-out .2s; } .nav-wrap:hover { opacity: 1; } .nav { width: 100%; margin: 0 auto; list-style: none; } .nav li { float: left; margin-right: 10px; } .nav a { padding: 10px 20px; display: block; color: #fff; transition: all ease-in-out .2s; -moz-transition: all ease-in-out .2s; -webkit-transition: all ease-in-out .2s; -o-transition: all ease-in-out .2s; } .nav a:hover, a:hover, .nav li:hover a { color: salmon; } .nav li ul { position: absolute; left: 0; background: cadetblue; width: 100%; display: none; transition: all ease-in-out .5s; -moz-transition: all ease-in-out .5s; -webkit-transition: all ease-in-out .5s; -o-transition: all ease-in-out .5s; } .nav li:hover ul { display: block; } .nav li ul li { margin: 0; } .nav li:hover ul li a { color: #fff; } .nav li ul li a:hover { background: salmon; color: #fff; } .portfolio-object { float: left; width: 19%; padding: 0% 3% 3% 3%; } .portfolio-object img { max-width: 100%; margin: 0 auto; } .contact .top { float: right; font-size: 2em; padding-top: 5px; color: rgba(255,255,255,.5); transition: all ease-in-out .2s; -moz-transition: all ease-in-out .2s; -webkit-transition: all ease-in-out .2s; -o-transition: all ease-in-out .2s; } .contact .top:hover { color: rgba(255,255,255,1); padding-top: 0; padding-bottom: 5px; background: none; } ul { margin: 0; padding: 0; list-style: none; } .content ul { margin-left: 10px; } .content li { margin-left: 20px; margin-bottom: 10px; text-indent: -35px; } .button { background: cadetblue; float: left; color: #fff; padding: 10px 20px; transition: all ease-in-out .2s; -moz-transition: all ease-in-out .2s; -webkit-transition: all ease-in-out .2s; -o-transition: all ease-in-out .2s; } .button:hover { background: salmon; color: #fff; } .tablet-show, .mobile-show { display: none; } .cb { clear: both; } .half { width: 48%; float: left; } .half.alpha { margin-right: 2%; } .half.omega { margin-left: 2%; } [class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; padding: 0 10px; } .button [class*="fontawesome-"]:before { padding: 0 0 0 10px; } .instagram-wrap {float: left; width: 9%; margin: .5%; background: coral;} /*================================================== Tablet ================================================== */ @media only screen and (max-width : 65em) { .portfolio-object { width: 40%; display: inline-block; float: none; vertical-align: top; } .tablet-show { display: block; } .tablet-hide { display: none; } .contact a { color: #fff; } .contact a:hover { background: salmon; color: #fff; } .intro { background-attachment: scroll; background-position: top center !important; padding-top: 125px; } .contact { background-attachment: scroll; background-position: top center !important; } .container, .big-wrap { display: block; width: 94%; float: left; height: auto; padding: 3%; } h1 { font-size: 3em; text-shadow: 1px 1px 6px rgba(0,0,0,.4); } .intro p { font-size: 1em; text-shadow: 1px 1px 6px rgba(0,0,0,.4); } .button { display: block; } } /*================================================== Phone ================================================== */ @media only screen and (max-width : 45em) { h1 { font-size: 2em; } h2 { font-size: 1.5em; } .portfolio-object { width: 100%; padding: 0 0 20px 0; } .content { width: 100%; } .mobile-show { display: block; } .mobile-hide { display: none; } .nav-wrap { background: rgba(0,0,0,.5); opacity: 1; } .nav { text-align: center; } .nav li { display: inline-block; margin: 0; float: none; } .nav a { padding: 5px; } .half { width: 100%; } .half.alpha { margin-right: 0%; border-bottom: 1px dashed #666; padding-bottom: 20px; margin-bottom: 20px; } .half.omega { margin-left: 0%; } } /* |\ `__\\ //__' || || \__`\ |'__/ `_\\ //_' _.,:---;,._ __________________ \_: :_/ | | |@. .@|