@import url('forms.css');

/* Body
----------------------------------------------------------------------------------------------------*/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; *behavior: url(/js/boxsizing.htc);
}

body {
    background: #fff;
	text-align: center;
}

    body.info {
        background: #fff url(../img/backgrounds/bg-info.jpg) no-repeat left 250px;
    	text-align: center;
    }

body, h1, h2, h3, h4, h5, h6 {
    font-family: 'Ubuntu', Verdana, Geneva, sans-serif;
}

/* Container & common
----------------------------------------------------------------------------------------------------*/
.container {
	width: 1460px;
	margin: 0 auto;
	padding: 0 17px 0 30px;
	text-align: left;
	position: relative;
}

h1 {
    font-size: 22px;
    line-height: 22px;
    color: #7c9da2;
    font-weight: 500;
    margin: 0 0 30px;
    padding: 12px 0 0;
    border-top: 5px solid #7c9da2;
}

h2 {
    display: inline-block;
    font-size: 22px;
    line-height: 22px;
    color: #7c9da2;
    font-weight: 500;
    margin: 0;
    padding: 12px 0 0;
    border-top: 5px solid #7c9da2;
}

a, a:hover {
    color: #7c9da2;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Header
----------------------------------------------------------------------------------------------------*/
header {
    width: 100%;
    height: 230px;
    position: relative;
}

    header .logo {
        position: absolute;
        top: 52px;
        left: 20px;
    }

        header .logo a {
        	display: block;
        	width: 222px;
        	height: 142px;
        	text-decoration: none;
        	background: url(../img/general/logo.gif) no-repeat left top;
        	background-size: 222px 142px;
        }

            header .logo a:focus {
                -moz-outline: none;
                outline: none;
            }

    header .tagline {
        position: absolute;
        top: 174px;
        left: 491px;
        font-size: 20px;
        line-height: 22px;
        font-weight: 500;
        color: #7c9da2;
    }

        header .tagline a {
            color: #7c9da2;
        }

            header .tagline span,
            header .tagline a span {
                color: #a09b8e;
            }

    header .more {
        position: absolute;
        top: 85px;
        right: 18px;
        text-align: right;
    }

        header .more .about {
            display: block;
            font-size: 18px;
            line-height: 22px;
            font-weight: 500;
            text-transform: lowercase;
        }

            header .more .about a {
                color: #7f7a69;
            }

        header .more .social {
            padding: 22px 0 18px;
        }

        header .more .social a {
            display: inline-block;
            width: 23px;
            height: 23px;
            margin-left: 6px;
        }

            header .more .social a.in {
            	background: url(../img/general/icon-in.png) no-repeat left top;
            	background-size: 23px 23px;
            }

            header .more .social a.tw {
            	background: url(../img/general/icon-tw.png) no-repeat left top;
            	background-size: 23px 23px;
            }

            header .more .social a.ml {
            	background: url(../img/general/icon-mail.png) no-repeat left top;
            	background-size: 23px 23px;
            }

        header .more .contact {
            display: block;
            font-family: 'Ubuntu Mono', Verdana, Geneva, sans-serif;
            font-size: 15px;
            line-height: 22px;
            text-transform: lowercase;
            color: #7f7a69;
        }

            header .more .contact a {
                color: #7f7a69;
            }

/* Content nav
----------------------------------------------------------------------------------------------------*/
.content-container {
    font-size: 22px;
    line-height: 30px;
    color: #010101;
    position: relative;
}

    body.info .content-container {
       min-height: 2200px;
    }

    .content-container .nav-toggle a {
        display: block;
        position: absolute;
        top: 18px;
        left: -34px;
    	z-index: 100;
    	width: 22px;
    	height: 16px;
    	text-decoration: none;
    	background: url(../img/backgrounds/bg-nav-toggle.png) no-repeat left top;
    	background-size: 22px 16px;
    }

    .content-container nav {
        display: none;
        position: absolute;
        top: 18px;
        left: -34px;
    	z-index: 200;
        background: #fff;
        background: rgba(255,255,255,0.8);
        padding: 0 35px 0 0;
    }

        .content-container nav.nav-open {
            display: block;
        }

        .content-container nav ul {
            list-style: none;
            margin: 0;
            padding: 0 0 6px;
            font-size: 18px;
            line-height: 30px;
            font-weight: 500;
        }

            .content-container nav ul.item-nav {
                margin: -8px 0 4px;
                border-bottom: 5px solid #7c9da2;
            }

            .content-container nav ul li.first {
                display: none;
            }

            .content-container nav ul li a {
                display: block;
                padding: 0 3px;
                color: #496573;
            }

                .content-container nav ul li a.active, .content-container nav ul li a:hover {
                    color: #111;
                    text-decoration: none;
                }

            .content-container nav li:hover {
                position: static;
            }

/* Content
----------------------------------------------------------------------------------------------------*/
    .content-container img[style*="left"] {
         margin: 0 10px 0 0;
    }

    .content-container img[style*="right"] {
         margin: 0 0 0 10px;
    }

    .content-container ul {
        list-style: disc;
    }

    .content-container p + ul, .content-container p + ol {
        margin-top: -1.5em;
    }

    .content-container table p, .content-container table ul, .content-container table ol {
        margin-bottom: 0;
    }

        .content-container table p + ul, .content-container table p + ol {
            margin-top: 0;
        }

    .content ul.portfolio-blocks {
        list-style: none;
        margin: 0;
        font-size: 18px;
        line-height: 22px;
        font-weight: 500;
    }

        .content ul.portfolio-blocks li {
            float: left;
            padding: 18px;
            width: 471px;
            height: 400px;
        }

            .content ul.portfolio-blocks li:hover {
                background: #7c9da2;
            }

            .content ul.portfolio-blocks li img {
                display: block;
                vertical-align: middle;
                margin: 0 0 12px;
                width: 435px;
                height: 305px;
            }

            .content ul.portfolio-blocks li a {
                color: #7c9da2;
                text-decoration: none;
            }

            .content ul.portfolio-blocks li:hover a {
                color: #fff;
            }

    .content {
        float: right;
        width: 48%;
        margin-right: 17.7%;
        background: #fff;
        background: rgba(255,255,255,0.9);
        padding: 54px 46px 0 6px;
    }

        body.portfolio .content {
            width: 100%;
            float: none;
            padding: 0;
        }

        .content small {
            font-size: 15px;
        }

        .content .content-project-img {
            padding: 0 48px 0 0;
            margin: 0 -17.7% 0 0;
            width: 152.207002%;
        }

    aside {
        float: left;
        width: 30.78556%;
        padding: 54px 18px 0;
    }

        body.portfolio aside {
            display: none;
        }

        aside h1 {
            display: inline-block;
        }

            body.info aside h1 {
                display: block;
            }

/* Footer
----------------------------------------------------------------------------------------------------*/
footer {
    padding: 120px 18px;
}

    footer .social {
        float: right;
    }

        footer .social a {
            display: inline-block;
            width: 23px;
            height: 23px;
            margin-left: 6px;
        }

            footer .social a.in {
            	background: url(../img/general/icon-in.png) no-repeat left top;
            	background-size: 23px 23px;
            }

            footer .social a.tw {
            	background: url(../img/general/icon-tw.png) no-repeat left top;
            	background-size: 23px 23px;
            }

            footer .social a.ml {
            	background: url(../img/general/icon-mail.png) no-repeat left top;
            	background-size: 23px 23px;
            }

    footer .slogan {
        float: right;
        padding: 0 72px 0 0;
        font-size: 18px;
        line-height: 22px;
        font-weight: 500;
        color: #7c9da2;
        position: relative;
    }

        footer .slogan a {
            color: #7c9da2;
        }

        footer .slogan a span,
        footer .slogan span {
            color: #7f7a69;
        }

        footer .slogan::before {
            content: '';
            display: block;
            position: absolute;
            top: -16px;
            left: -21px;
            width: 25px;
            height: 26px;
        	background: url(../img/general/icon-slogan.png) no-repeat left top;
        	background-size: 25px 26px;
        }
		
	footer .contact {
		display: none;
	}

/* Retina backgrounds
----------------------------------------------------------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) {

    header .logo a {
    	background-image: url(../img/general/logo@2x.gif);
    }

    .content-container .nav-toggle a {
    	background-image: url(../img/backgrounds/bg-nav-toggle@2x.png);
    }

    footer .social a.in,
    header .more .social a.in {
    	background-image: url(../img/general/icon-in@2x.png);
    }

    footer .social a.tw,
    header .more .social a.tw {
    	background-image: url(../img/general/icon-tw@2x.png);
    }

    footer .social a.ml,
    header .more .social a.ml {
    	background-image: url(../img/general/icon-mail@2x.png);
    }
}