/*
Project Name: Pixelflower 2015
Project URI: http://pixelflower.com
Author: Pixelflower
Author URI: http://pixelflower.com
Description: Pixelflower is custom-designed website.
Version: 3.0
*/

/* small tablet to large tablet 
----------------------------------------------- */
@media screen and (min-width: 580px) and (max-width: 980px)
{
    .wrapper
    {
        padding: 0px 20px 0px 20px;
    }
    .illu
    {
        padding: 0px 20px 20px 0px;
    }
}

/* large tablet 
----------------------------------------------- */
@media screen and (min-width: 830px) and (max-width: 980px)
{
    .illu.double
    {
        width: 540px;
    }
    .text
    {
        width: 40%;
        width: calc(100% - 510px);
    }
    .text.wide
    {
        width: 50%;
        width: calc(100% - 440px);
    }
    .text.front
    {
        width: 30%;
        width: calc(100% - 540px);
    }
    .context
    {
        padding: 0px 0px 0px 20px;
    }
}

/* small tablet 
----------------------------------------------- */
@media screen and (min-width: 580px) and (max-width: 830px)
{
    .illu.double
    {
        width: 270px;
    }
    .illu.big
    {
        width: 250px;
    }
    .illu.big img
    {
        width: 250px;
    }
    .text
    {
        width: 40%;
        width: calc(100% - 270px);
    }
    .text.wide
    {
        width: 50%;
        width: calc(100% - 270px);
    }
    .text.front
    {
        width: 30%;
        width: calc(100% - 270px);
    }
    .context
    {
        float: none;
        padding: 0px 0px 0px 0px;
    }
    h2
    {
        font-size: 180%;
    }
}


/* phone to small tablet
----------------------------------------------- */
@media screen and (max-width: 580px)
{
    body
    {
        background: none !important;
    }
    .wrapper
    {
        padding: 0px 20px 0px 20px;
    }
    .nav-main
    {
        text-align: center;
    }
    .nav-main li a
    {
        padding: 13px 7px 12px 7px;
    }
    .illu, .illu.double, .illu.big
    {
        float: none;
        padding: 0px 0px 20px 0px;
        width: 100%;
    }
    .illu img, .illu.double img, .illu.big img
    {
        max-width: 100%;
    }
    .text, .text.wide, .text.front
    {
        float: none;
        width: 100%;
    }
    .context
    {
        float: none;
        width: 100%;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
	margin-top: 3em;
	padding-top: 2em;
	border-top: #CCC 1px solid;
    }
}