File size: 8.45Kb
/*
* Author: Carlos Alvarez
* URL: http://Alvarez.is
*
* Project Name: NYC Design
* Version: 1.0
* Date: 04-20-2014
* URL:
*/
/* ==========================================================================
Base Styles, Bootstrap Modifications & Fonts Import
========================================================================== */
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
html,
button,
input,
select,
textarea {
color: #222;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #f2c2c9;
color: #a4003a;
text-shadow: none;
}
::selection {
background: #16a085;
color: #a4003a;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
.centered {
text-align: center
}
/* ==========================================================================
General styles
========================================================================== */
html,
body {
height: 100%;
}
body {
font-family: "Lato" sans-serif;
font-weight: 400;
font-size: 16px;
color: #000;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Oswald", sans-serif;
font-weight: 300;
}
/* ==========================================================================
MENU CONFIGURATION
========================================================================== */
.menu {
position: fixed;
right: -200px;
width: 260px;
height: 100%;
top: 0;
z-index: 10;
text-align: left;
}
.menu.menu-open {
right: 0px;
}
.menu-wrap {
position: absolute;
top: 0;
left: 60px;
background: #1a1a1a;
width: 200px;
height: 100%;
}
.menu h1.logo a {
font-family: "Oswald", sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.15em;
line-height: 40px;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
}
.menu h1.logo a:hover {
color: #f85c37;
}
.menu img.logo {
margin: 20px 0;
max-width: 160px;
}
.menu a {
margin-left: 20px;
color: #808080;
display: block;
font-size: 12px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.menu a:hover {
color: #ffffff;
}
.menu a:active {
color: #ffffff;
}
.menu a > i {
float: left;
display: inline-block;
vertical-align: middle;
text-align: left;
width: 25px;
font-size: 14px;
line-height: 40px;
margin: 25px 2px;
}
.menu-close {
cursor: pointer;
display: block;
position: absolute;
font-size: 14px;
color: #808080;
width: 40px;
height: 40px;
line-height: 40px;
top: 20px;
right: 5px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.menu-close:hover {
color: #ffffff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
/* Push the body after clicking the menu button */
.body-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.body-push-toright {
left: 200px;
}
.body-push-toleft {
left: -200px;
}
.menu,
.body-push {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#menuToggle {
position: absolute;
top: 20px;
left: 0;
z-index: 11;
display: block;
text-align: center;
font-size: 14px;
color: #ffffff;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
background: rgba(0,0,0,0.25);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menuToggle:hover {
color: #ffffff;
background: rgba(0,0,0,0.2);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
/* ==========================================================================
Wrap Sections
========================================================================== */
#headerwrap {
background: url(../img/back.jpg) no-repeat center top;
margin-top: 0px;
padding-top:120px;
text-align:center;
background-attachment: relative;
background-position: center center;
min-height: 700px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#headerwrap h1 {
color:#ffffff;
margin-top: 90px;
padding-bottom: 30px;
letter-spacing: 8px;
font-size: 100px;
font-weight: bold;
text-shadow: 2px 2px 2px #000;
}
/* About Wrap & Conf */
#aboutwrap {
margin-top: 80px;
margin-bottom: 80px;
}
.name {
text-align: center;
}
.name p {
font-size: 22px;
font-weight: lighter;
margin-top: 15px;
letter-spacing: 2px;
}
.name-label {
width: 60px;
height: 60px;
margin: 0 auto 45px;
border-top: 1px solid #000;
background: url(../img/name-label.png) center bottom no-repeat;
background-size: 35px 35px;
}
.name-zig {
width: 73px;
height: 17px;
margin: 38px 0 38px;
background: url(../img/name-zig.png) 0 0 no-repeat;
background-size: 73px 17px;
}
.name-desc h2 {
font-family: 'Oswald', sans-serif;
font-size: 40px;
line-height: 1.45;
font-weight: 300;
}
/* Separator About - Parallax Section */
.sep {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.about {
background-image: url(../img/about-sep.jpg);
}
/* Portfolio Wrap Section */
#portfoliowrap {
display: block;
margin-top: 80px;
margin-bottom: 80px;
}
#portfoliowrap h1 {
font-weight: 300;
text-align: center;
margin-bottom: 50px;
}
.mt {
margin-top: 50px;
}
.mb {
margin-bottom: 60px;
}
#portfoliowrap i {
font-size: 50px;
}
.proc {
padding-top: 15px;
padding-bottom: 15px;
border-bottom: solid 2px transparent;
}
#portfoliowrap .proc:hover {
background-color: #eee;
border-bottom: solid 2px #2f2f2f
}
.portfolio {
background-image: url(../img/portfolio-sep.jpg);
}
/* Service Wrap */
#servicewrap {
display: block;
margin-top: 80px;
margin-bottom: 80px;
}
#servicewrap h1 {
font-weight: 300;
text-align: center;
margin-bottom: 20px;
}
.service {
text-align: left;
}
.service small {
font-size: 12px;
font-weight: bold
}
.service i {
float: left;
margin-right: 15px;
font-size: 30px;
vertical-align: middle;
}
.service .text {
color: #767676
}
/* Testimonials Wrap */
#testimonials {
display: block;
margin-top: 80px;
margin-bottom: 80px;
background-color: #f3f3f3;
}
/* Contact Wrap */
#contactwrap {
background-color: #2f2f2f;
margin-top: 0px;
padding-top: 25px;
padding-bottom: 25px;
}
#contactwrap p {
color: #f2f2f2;
}
#contactwrap small {
font-size: 13px;
}
.contact {
background-image: url(../img/contact-sep.jpg);
}
#contactwrap label {
color: #f2f2f2;
margin-top: 10px;
}
/* Gallery Configuration */
.photo-wrapper {
display: block;
position: relative;
overflow: hidden;
background-color: #2f2f2f;
-webkit-transition: background-color 0.4s;
-moz-transition: background-color 0.4s;
-o-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.project .overlay {
position: absolute;
text-align: center;
color: #fff;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.project:hover .photo-wrapper {
background-color: #2f2f2f;
background-image:url(../img/zoom.png);
background-repeat:no-repeat;
background-position:center;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: relative;
}
.project:hover .photo {
opacity: 10;
filter: alpha(opacity=4000);
opacity: 0.1;
filter: alpha(opacity=40);
}
.project:hover .overlay {
opacity: 100;
filter: alpha(opacity=10000);
opacity: 1;
filter: alpha(opacity=100);
}
.desc {
margin-top: 25px;
}