/******************************************************************


	------------------------
	-- TABLE OF CONTENTS --
	------------------------
	
	--  01. Basic
	--  02. Preloader
    --  03. Image Container
    --  04. Content Area
    --  05. Content Area --> Intro
    --  06. Content Area --> About
    --  07. Content Area --> Service
    --  08. Content Area --> Work
    --  09. Content Area --> Contact
    --  10. Content Area --> Footer
 
 
 ******************************************************************/




/** 1. Basic
*******************************************************************/

html
{
    font-size: 10px;
}

body
{
    font-family: 'Arapey', serif;
    font-weight: 300;
    font-style: normal;

    color: #000;
    background: #fff;

    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6
{
    font-family: 'Abril Fatface', cursive;
    font-weight: normal;

    letter-spacing: .05em;

    color: #000;;
}

h1
{
    font-size: 4.4rem;
}

h2
{
    font-size: 3.9rem;
}

h3
{
    font-size: 3.4rem;
}

h4
{
    font-size: 2.9rem;
}

h5
{
    font-size: 2.4rem;
}

h6
{
    font-size: 1.9rem;
}

p
{
    font-size: 1.8rem;
}

a,
a:hover,
a:focus
{
    cursor: pointer;
    -webkit-transition: all 300ms ease;
         -o-transition: all 300ms ease;
            transition: all 300ms ease;
    text-decoration: none;
}

a:hover
{
    color: #111;
}

@media (max-width:600px)
{
    html
    {
        font-size: 8px;
    }
}

@media (max-width:500px)
{
    html
    {
        font-size: 7px;
    }
}


/** 3. Image Container
*******************************************************************/

.image-container
{
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;

    width: 50%;
    height: 100%;
}

.image-container .background-img
{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    -webkit-transition: opacity 1s ease;
         -o-transition: opacity 1s ease;
            transition: opacity 1s ease;

    background: url(../img/background.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

@media (max-width:1200px)
{
    .image-container
    {
        position: relative;
        z-index: 10;
        top: 0;
        left: 0;

        width: 100%;
        height: 100vh;
    }
}



/** 4. Content Area
*******************************************************************/

.content-area
{
    position: relative;
    left: 0;

    width: 100%;
}

.content-area .content-area-inner
{
    position: relative;
    left: 50%;
    
    width: 50%;
    overflow-x: hidden;
}

.content-area .content-area-inner section
{
    max-width: 520px;
    margin: 0 auto 18vh auto;
}

.content-area .content-area-inner section:last-child
{
    margin-bottom: 10vh;
}

.content-area .content-area-inner section h3.headline
{
    margin-bottom: 1.2em;
}

@media (max-width:1200px)
{
    .content-area .content-area-inner
    {
        left: 0;

        width: 100%;
    }
}



/** 5. Content Area --> Intro
*******************************************************************/


#intro
{
    position: relative;

    height: 100vh;
    margin-bottom: 0;
}

#intro .container-mid
{
    position: absolute;
    top: 50%;

    width: 100%;

    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}