/**
    ## project name     : doanerkan personal home page
    ## author           : doanerkan / www.doanerkan.com
    ## date             : 25 Oct 2017
**/

/* #################################################################################### */
/* ##### + + + pages css imported ##################################################### */
/* #################################################################################### */

    @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
    @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css');
    @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
    @import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i|Roboto+Slab:300,400,700');
    @import url('animate.css');
    @import url('hover.css');
    @import url('owl.css');

    body        { margin:0; padding:0; background:#111; color:#666; font:300 15px 'Quicksand', sans-serif; }
    h1, h2, h3, h4, h5, h6      { margin:0; padding:0; }

    .start      {
        width: 100%;
        height: 100%;
    }
    .startArea  {
        width: 80%;
        display:block;
        margin: 0 auto;
    }
    .startArea h3       {
        color: #fff;
        display:block;
        font: 400 95px 'Roboto Slab', sans-serif;
    }
    .startArea h1       {
        color: #0addb8;
        display:block;
        font: 600 52px 'Raleway', sans-serif;
    }
    .startArea span     {
        color: #666;
        display: block;
        margin-top: 20px;
        font: 300 25px 'Roboto Slab', sans-serif;
        line-height:35px;
    }
    .startArea a        {
        color:#0addb8;
        font:300 20px 'Quicksand', sans-serif;
    }
    .startArea a:hover  {
        color:#fff;
        text-decoration:none;
    }

    .aboutUs    {
        background:#1e1e1e;
    }
    .aboutUs .container, .experience .container     {
        width: 80%;
        display:block;
        margin: 0 auto;
        padding:100px 0 120px 0;
    }
    .aboutUs h2, .experience h2                     {
        color: #fff;
        display:block;
        font: 700 52px 'Roboto Slab', sans-serif;
    }
    .aboutUs .steps, .experience .steps             {
        margin:40px 0 0 0;
        font: 300 18px 'Roboto Slab', sans-serif;
        line-height:32px;
    }
    .aboutUs .steps h4, .experience .steps h4       {
        color: #0addb8;
        margin-top:15px;
        font: 700 30px 'Raleway', sans-serif;
    }
    .aboutUs .steps i, .experience .steps i         {
        color: #0addb8;
        font-size:30px;
    }

@media only screen and (max-width: 599px) and (min-width: 0px) {

    .startArea h3       {
        font: 400 50px 'Roboto Slab', sans-serif;
    }
    .startArea span     {
        font: 300 22px 'Roboto Slab', sans-serif;
    }
    .startArea h1       {
        font: 600 35px 'Raleway', sans-serif;
    }

    .aboutUs .container  {
        width: 80%;
        display:block;
        margin: 0 auto;
        padding:50px 0 50px 0;
    }

    .experience .container .row .steps h4       {
        font: 700 18px 'Raleway', sans-serif !important;
    }

}