/* ---------- grid ---------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.row:after {
    content: "";
    display: block;
    clear: both;
}

[class*='col-'] {
    float: left;
    display: table;
}

.col-1 {width: 100%;}
.col-2 {width: 50%;}
.col-3 {width: 33.33333%;}
.col-4 {width: 25%;}
.col-5 {width: 5%;}
.col-10 {width: 10%;}
.col-20 {width: 20%;}
.col-40 {width: 40%;}
.col-60 {width: 60%;}
.col-75 {width: 75%;}


/* ---------- fonts ---------- */

h1, h2, h3, h4, h5, a, p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
    text-decoration: none;

}

h2, h3, a {
    text-align: center;
}

h1, h2, a {
    text-transform: uppercase;
}

h1 {
    letter-spacing: .5em;
}

p {
    color: #7f8289;
}

h1 {font-size: 16px;}
h2 {font-size: 32px;}
h3 {font-size: 16px;}
h4 {font-size: 24px;}
h5 {font-size: 14px;}
p {font-size: 14px;}
a  {font-size: 10px;}

/* when before or after used */
.menu a:link, .menu a:visited {
    color: white;
}

/* when over or used */
.menu a:hover, .menu a:active {
    color: white;
    background: #db5c62;
}

.red {
    color: #db5c62;
}


/* ---------- main ---------- */

.pageA {
    padding: 8% 4% 8% 4%;
}

.pageB {
    color: white;
    padding: 8% 4% 8% 4%;
    background: #2f3237;
}

.lineA {
    border-top: 1px solid lightgray;
}

.lineB {
    border-top: 1px solid #3c3f44;
}

.arrow {
    width: 0;
	height: 0;
    border-right: 1em solid transparent;
	border-left: 1em solid transparent;
	border-bottom: 1em solid #2f3237;
    margin: auto;
}

.contentTitle {
    padding: 0 0 2% 0;
}

.contentDescription {
    padding: 2% 0 8% 0;
}

.content {
    padding: 2% 0 4% 0;
}


/* ---------- header/footer ---------- */

header {
    position: fixed;
    background: #26292d;
    z-index: 1;
}

footer {
    background: #26292d;
}

.logo, .copy {
    padding: 0 0 0 2%;
}


.logo h1, .menu a, .copy p {
    display: table-cell;
    vertical-align: middle;
}

.logo, .menu, .copy, .social {
    height: 48px;
}

.logo, .menu {
    color: white;
}

.menu {
    table-layout: fixed;
}

.info {
    padding: 2% 0 0 0;
    text-align: center;
}

.social {
    text-align: right;
}

.social img {
    opacity: 0.4;
}

.social img:hover {
    opacity: 1;
}


/* ---------- images ---------- */
.portrait {
    width: 256px;
    height: 256px;
    margin: auto;
}

.about-image {
    float:left;
}


/* ---------- contact form ---------- */

form input, form textarea, form button {
    width: 100%;
    padding: 0.75em;
    background: #26292d;
    margin: 0 0 1% 0;
    font-size: 14px;
    color: #f0f0f0;
    border: none;
}

form textarea {
    height: 256px;
    resize: none;
}

form button {
    background: #3c3f44;
    color: #26292d;
    border: none;
}


/* ---------- other ---------- */


img {
    max-width: 100%;
    vertical-align: top;
}

/* ---------- mobile ---------- */

@media only screen and (max-width: 768px) {
    .col-1 {width: 100%;}
    .col-2 {width: 100%;}
    .col-3 {width: 100%;}
    .col-4 {width: 100%;}
    .col-5 {width: 100%;}
    .col-10 {width: 100%;}
    .col-20 {width: 100%;}
    .col-40 {width: 100%;}
    .col-60 {width: 100%;}
    .col-75 {width: 100%;}
    .logo, .copy, .social {
        text-align: center;
    }
}

/* ---------- lightbox ---------- */

.gallery {
    padding: 8% 0 0 0;
}

.thumbs {
    padding: 0 0 0 0;
}

.thumbsImage {
    float: left;
    padding: .5%;
}

.devices {
    text-align: right;
}

.devices img {
    width: 100%;
}

.thumbsImage:hover {
    box-shadow: inset 0 0 0 1px black;
}

.lightbox {
    position: fixed;
    width: 100%;
    height: 100%;
    margin: auto;
    top: -100%;
    left: 0;
    background: #000;
    background: rgba(0, 0, 0, 0.8);

    opacity: 0;

    z-index: 2;

    transition: opacity .5s ease-in-out;
}

.lightbox img {
    position: absolute;
    max-width: 0;
    max-height: 0;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 3px solid white;

    transition: .5s ease-in-out;
}

.lightboxClose {
    position: absolute;
    width: 50px;
    height: 50px;
    margin: auto;
    top: 0;
    right: 0;
    background: white;
    transition: all .5s ease-in-out;
}

.lightbox:target {
    top: 0;

    opacity: 1;
}

.lightbox:target img {
    max-width: 100%;
    max-height: 100%;
}

/* ---------- featured ---------- */

.slider {
    padding-top: 48px;
}

.slider div img {
    width:100%;
}

.parent {
    position: relative; /* allow for overlay elements */
}

.child {
    position: absolute;
    margin: auto;
    width: 25%;
    height: 25%;
    top: 0;
    bottom: 0;
    left: 0;

    padding: 2% 0 0 2%;
}

.child h2, .child p {
    color: white;
    text-align: left;
}