@import url(http://fonts.googleapis.com/css?family=Lato:300,400);

body
{
    height: 1000px;
    width: 100%;
    position: relative;
}

#services_link
{
    width: 100%;
    height: 1px;
    float: left;
}


/*-----------------------------------------------------------------------------*/

/* HEADER  */

#header_nav
{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000000;
    width: 100%;
    height: 110px;
    background: #fff;
    border-bottom: 1px solid #d6d6d6;
    padding: 17px 0px 0px 0px;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.27);
}

.logo
{
    height: auto;
}

    .logo img
    {
        max-width: 100%;
        max-height: 100%;
        min-height: 40px;
        margin-top: 10px;
    }



a, a:hover
{
    text-decoration: none;
}

.showcase
{
    height: 560px;
    background: url('../images/glitzgraphix_showcase.jpg') center;
    margin-top: 100px;
}

.section_head
{
    font-family: 'Lato', sans-serif;
    font-size: 30px;
    text-align: center;
    letter-spacing: 3px;
    padding: 35px 0px 20px 0px;
}

.dark
{
    color: #575959;
}

.light
{
    color: #ffffff !important;
}

.section_head_border
{
    background: url('../images/section_head_border.png');
    width: 300px;
    height: 14px;
    margin: 0 auto;
}

.services_desc
{
    font-family: 'Lato', sans-serif;
    color: #747474;
    line-height: 28px;
    padding: 30px 0px;
    font-size: 16px;
    text-align: center;
    margin: 0px 0px 35px 0px;
}

#services
{
    background: #fff;
    padding-bottom: 70px;
}

.service_panel h4
{
    color: #424242;
    font-family: 'Lato', sans-serif;
    padding: 0px;
    font-size: 16px;
    margin: 0px 0px 10px 0px;
}

.service_panel
{
    padding-top: 30px;
    padding-bottom: 30px;
}

    .service_panel p
    {
        color: #989898;
        font-family: 'Lato', sans-serif;
        font-size: 12px;
        line-height: 22px;
        text-align: justify;
        padding: 0px;
        margin: 0px 0px 10px 0px;
    }

    .service_panel a
    {
        width: 100%;
        color: #04b4bb;
        font-family: Calibri;
        font-size: 12px;
        line-height: 22px;
        letter-spacing: 1px;
        text-align: left;
        float: left;
    }

.services_border
{
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 20px;
    margin-bottom: 20px;
    float: left;
}

#about
{
    background: #153e5e;
}

#work
{
    background: #fff;
    height: auto;
    display: block;
    float: left;
    width: 100%;
}

#quote
{
    background: url('../images/quote_bg.png');
    float: left;
    width: 100%;
    padding-bottom: 50px;
}

.quote_text_box
{
    color: #747474;
    background: #242424;
    border: 1px solid #101010;
    padding-top: 13px;
    padding-bottom: 13px;
    margin-bottom: 15px;
    font-family: 'Lato', sans-serif;
    opacity: 0.7;
}

    .quote_text_box::-webkit-input-placeholder
    {
        color: #747474;
    }

    .quote_text_box:-moz-placeholder
    { /* Firefox 18- */
        color: #747474;
    }

    .quote_text_box::-moz-placeholder
    { /* Firefox 19+ */
        color: #747474;
    }

    .quote_text_box:-ms-input-placeholder
    {
        color: #747474;
    }

    .quote_text_box:hover, .quote_text_box:focus
    {
        border: 1px solid #000000;
        outline: none;
        opacity: 0.9;
    }

.quote_btn
{
    background: none;
    border: 0px solid #fff;
    text-align: center;
}

#contact
{
    width: 100%;
    float: left;
    background: #fff;
}

.contact_text
{
    background: #f9f9f9;
    border: 1px solid #dedede;
    font-family: 'Lato', sans-serif;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 15px;
    margin-bottom: 18px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}


    .contact_text::-webkit-input-placeholder
    {
        color: #a9a9a9;
    }

    .contact_text:-moz-placeholder
    { /* Firefox 18- */
        color: #a9a9a9;
    }

    .contact_text::-moz-placeholder
    { /* Firefox 19+ */
        color: #a9a9a9;
    }

.contact_text-ms-input-placeholder
{
    color: #a9a9a9;
}

.contact_text:hover, .contact_text:focus
{
    outline: none;
    border: 1px solid #dedede;
}


.captcha_refresh
{
    background: url('../images/refresh_btn.png') no-repeat;
}

.contact_send_btn
{
    background: #06bdc4;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #0bafb5;
    padding-top: 11px;
    padding-bottom: 11px;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    top: 0px;
    left: 0px;
}



.contact_form_holder
{
    padding-top: 60px;
}

.contact_info
{
    font-family: 'Lato', sans-serif;
    color: #575959;
    margin-bottom: 22px;
    float: left;
}

    .contact_info img
    {
        margin-right: 10px;
        float: left;
        margin-top: 5px;
    }

    .contact_info span
    {
        float: left;
    }

.social
{
    width: 100%;
    float: left;
    background: #06bdc4;
}

#social
{
    background: #06bdc4;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-top: 10px;
}

#footer
{
    height: 110px;
    float: left;
    width: 100%;
    background: #000;
    margin-top: -5px;
    padding-bottom: 15px;
}

    #footer p
    {
        color: #4e4e4e;
        text-align: center;
        padding-top: 3px;
    }

.copyright
{
    padding-top: 23px;
    text-align: center;
}

.work_filter
{
    width: 420px;
    margin: 20px auto;
}













.container
{
    /* You can see the purpose of transition by resizing the window.	*/
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#filters
{
    padding: 0;
    list-style: none;
    margin: 30px auto;
    text-align: center;
}

    #filters li
    {
        float: left;
    }

        #filters li span
        {
            display: block;
            padding: 5px 20px;
            text-decoration: none;
            color: #a3a3a3;
            cursor: pointer;
            border: 1px solid #b0b0b0;
            margin: 0px;
            font-family: 'Lato', sans-serif;
        }

            #filters li span.active
            {
                color: #fff;
                background: #5bbec2;
            }


#portfoliolist .portfolio
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    width: 25%;
    display: none;
    float: left;
    overflow: hidden;
}

.portfolio-wrapper
{
    overflow: hidden;
    position: relative !important;
    cursor: pointer;
}

.portfolio img
{
    max-width: 100%;
    position: relative;
}

//hide its label by default .portfolio .label
{
    position: absolute;
    width: 100%;
    height: 40px;
    bottom: -40px;
}

.portfolio .label-bg
{
    background: #e95a44;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.portfolio .label-text
{
    color: #fff;
    position: relative;
    z-index: 500;
    padding: 5px 8px;
}

.portfolio .text-category
{
    display: block;
    font-size: 9px;
}




/*------------------------------------MENU----------------------------*/


.rmm
{
    display: block;
    position: relative;
    width: 100%;
    padding: 0px;
    text-align: center;
    line-height: 19px !important;
    float: right;
    margin: 20px 0px 0px 0px;
}

    .rmm *
    {
        -webkit-tap-highlight-color: transparent !important;
        font-family: calibri;
    }

    .rmm a
    {
        color: #575959;
        text-decoration: none;
    }

        .rmm a:hover
        {
            color: #26b5bb;
            text-decoration: none;
        }


    .rmm .rmm-main-list, .rmm .rmm-main-list li
    {
        margin: 0px;
        padding: 0px;
    }

    .rmm ul
    {
        display: block;
        width: auto !important;
        margin: 0 auto !important;
        overflow: hidden;
        list-style: none;
        padding: 0px;
    }


        /* sublevel menu - in construction */
        .rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a
        {
            display: none !important;
            height: 0px !important;
            width: 0px !important;
        }
    /* */


    .rmm .rmm-main-list li
    {
        display: inline;
        padding: 0px;
        margin: 0px !important;
    }

.rmm-toggled
{
    display: none;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin: 0 auto !important;
}

.rmm-button:hover
{
    cursor: pointer;
}

.rmm .rmm-toggled ul
{
    display: none;
    margin: 0px !important;
    padding: 0px !important;
}

    .rmm .rmm-toggled ul li
    {
        display: block;
        margin: 0 auto !important;
    }




/* GRAPHITE STYLE */

.rmm.graphite .rmm-main-list li a
{
    display: inline-block;
    padding: 8px 20px 8px 20px;
    margin: 0px -3px 0px -3px;
    font-size: 15px;
    color: #575959;
}


    .rmm.graphite .rmm-main-list li a:hover
    {
        color: #00afb6;
    }


.rmm.graphite .rmm-toggled
{
    width: 95%;
    background-color: #153e5e;
    min-height: 36px;
    border-radius: 0px;
}

.rmm.graphite .rmm-toggled-controls
{
    display: block;
    height: 36px;
    color: white;
    text-align: left;
    position: relative;
    border-radius: 6px;
}

.rmm.graphite .rmm-toggled-title
{
    position: relative;
    top: 9px;
    left: 15px;
    font-size: 16px;
    color: white;
}

.rmm.graphite .rmm-button
{
    display: block;
    position: absolute;
    right: 15px;
    top: 8px;
}

    .rmm.graphite .rmm-button span
    {
        display: block;
        margin-top: 4px;
        height: 2px;
        background: white;
        width: 24px;
    }

.rmm.graphite .rmm-toggled ul li a
{
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 0px 10px 0px;
    border-bottom: 1px solid #153e5e;
    border-top: 1px solid #1c4b70;
}

    .rmm.graphite .rmm-toggled ul li a:active
    {
        border-bottom: 1px solid #444444;
        border-top: 1px solid #444444;
    }






/* MINIMAL STYLE */







.rmm.minimal .rmm-main-list li a
{
    display: inline-block;
    padding: 8px 30px 8px 30px;
    margin: 0px -3px 0px -3px;
    font-size: 15px;
}

.rmm.minimal .rmm-toggled
{
    width: 95%;
    min-height: 36px;
}

.rmm.minimal .rmm-toggled-controls
{
    display: block;
    height: 36px;
    color: #333333;
    text-align: left;
    position: relative;
}

.rmm.minimal .rmm-toggled-title
{
    position: relative;
    top: 9px;
    left: 9px;
    font-size: 16px;
}

.rmm.minimal .rmm-button
{
    display: block;
    position: absolute;
    right: 9px;
    top: 7px;
}

    .rmm.minimal .rmm-button span
    {
        display: block;
        margin: 4px 0px 4px 0px;
        height: 2px;
        background: #333333;
        width: 25px;
    }

.rmm.minimal .rmm-toggled ul li a
{
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 0px 10px 0px;
    border-bottom: 1px solid #dedede;
    color: #333333;
}

.rmm.minimal .rmm-toggled ul li:first-child a
{
    border-top: 1px solid #dedede;
}













/* #Tablet (Portrait) */
@media only screen and (min-width: 768px) and (max-width: 959px)
{


    .project_desc_text
    {
        height: 112px;
    }



    .rmm a
    {
        color: #fff;
        text-decoration: none;
    }

        .rmm a:hover, 
        {
            color: #26b5bb;
            text-decoration: none;
        }

        .rmm a:visited, 
        {
            color: #26b5bb;
            text-decoration: none;
        }

        .rmm a:active 
        {
            color: #26b5bb;
            text-decoration: none;
        }    
}


/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media only screen and (max-width: 767px)
{


    #portfoliolist .portfolio
    {
        width: 48%;
        margin: 1%;
    }

    .service_icon
    {
        text-align: center;
        padding-bottom: 13px;
    }

        .service_icon img
        {
            margin: 0 auto;
        }

    .service_content h4, .service_content p, .service_content a
    {
        text-align: center !important;
    }

    .quote_btn
    {
        margin-top: 7px;
    }

        .quote_btn img
        {
            margin: 0 auto;
        }



    .work_filter
    {
        width: 100% !important;
        margin: 20px auto;
    }

        .work_filter li
        {
            width: auto;
            font-size: 14px !important;
        }


    .rmm
    {
        opacity: 0.8;
        margin-top: 20px;
        float: left;
    }


        .rmm a
        {
            color: #fff;
            text-decoration: none;
        }

            .rmm a:hover
            {
                color: #26b5bb;
                text-decoration: none;
            }
}

/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media only screen and (max-width: 480px)
{

    .rmm
    {
        opacity: 0.8;
        margin-top: 33px;
        float: left;
    }

    .logo img
    {
        margin-left: -30px;
    }
}