/**
 *  MarketingSuite error page styles. No ScriptKit styles in addition.
 *
 *  @author Paweł Kuźnik <pawel.kuznik@copernica.com>
 *  @author Tsvetelina Ikonomova <tsvetelina.ikonomova@copernica.com>
 */

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

/**
 *  Map (parse) the content attribute of the meta viewport - needed for scaling
 */
@viewport 
{
    width: extend-to-zoom;
    min-zoom: 1;
    max-zoom: 1;
}

/**
 *  Set override for the base font color in the whole page
 */
html, body
{
    font-family: 'Lato', sans;
    font-weight: 300;
    color: #505050;
    margin: 0px;
}

/**
 *  Fix the font size by smaller screens with portrait orientation
 */
@media all and (max-width: 500px) and (orientation: portrait) 
{
    html, body
    {
        font-size: .80rem;
    }
}

/**
 *  Fix the font size by smaller screens with landscape orientation
 */
@media all and (max-width: 900px) and (orientation: landscape) 
{
    html, body
    {
        font-size: .75rem;
    }
}

@keyframes page-404-background
{
    from { background-position: 0 0, 0 bottom; }
    to { background-position:  -100vw 0, 0 bottom; }
}

/**
 *  styles for the overall container 
 */
.page-404 
{
    /** no odd position shift caused by margins in absolute child */
    position: absolute;

    /** set the dimmensions */
    min-width: 100%;
    min-height: 100%;
    height: 100vh;
    width: 100vw;

    background-color: #C9DAEC;
    background-image: url('/pages/404background-clouds.svg'), url('/pages/404background.svg');
    background-repeat: repeat-x, no-repeat;
    background-size: contain;

    animation-name: page-404-background;
    animation-duration: 60s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/**
 *  the container with actual content
 */
.page-404 article
{
    /** cause indicator is absolute */
    position: relative;

    /** position the container */
    display: block;
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4em;

    /** add spacing between the content and the border */
    padding: 1.2em;
    
    /** define the looks of the box */
    background-color: #fff;
    border-color: .1em solid #ccc;

    /**
     *  set bottom borderw with some radius
     *  Top border will be animated with an indicator class
     */
    border-bottom-left-radius: .5em;
    border-bottom-right-radius: .5em;
}

/**
 *  Fix the article size and position by smaller screens with portrait orientation
 */
@media all and (max-width: 500px) and (orientation: portrait) 
{
    .page-404 article
    {
        margin-top: 6rem;
        max-width: 100%;
    }
}

/**
 *  Fix the article size and position by smaller screens with landscape orientation
 */
@media all and (max-width: 900px) and (orientation: landscape) 
{
    .page-404 article
    {
        margin-top: 1rem;
        max-width: 100%;
    }
}

/**
 *  Keyframes used for the indicator class to make expansion on width
 */
@keyframes indicator-expand
{
    from { width: 0; }
    to { width: 100%; }
}

/**
 *  This element will be an expanding (in 30 seconds) elements
 *  indicating when the reload to ms.copernica.com should occur.
 */
.page-404 article .indicator
{
    /** position indicator */
    position: absolute;
    top: 0;
    left: 0;

    /** How big and what color should be applied on the indicator */
    height: .25em;
    background-color: #c30e0f;

    /** define the animation */
    animation-name: indicator-expand;
    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

/**
 *  Generic overrides for a header inside an article tag.
 */
article h1 
{
    margin-bottom: 1em;
    font-size: 1.5rem;
    font-weight: 600; /* yeah, Lato is exclusive on weight so we need +100 weight to the one that we import */
}

/**
 *  Generic overrides for a paragraph inside an article tag.
 */
article p 
{
    font-size: 1.2rem;
    line-height: 1.4em;
}

/**
 *  The container with all products links
 */
.page-404 article nav
{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;

    /** add border to the top, it's a nice way to separate content a little */
    border-top: .1em solid #f1f1f1;

    /** and add some spacing between border and the content */
    padding-top: 1em;
}

/**
 *  Set proper sizes of product icons. 
 */
.page-404 article nav a img
{
    width: 100%;
}

/**
 *  Set some spacing between the product icons.
 */
.page-404 article nav a 
{
    flex-shrink: 0;
    flex-basis: 7rem;
    padding: .5em;
}


/**
 *  Fix the product icons size and position by smaller screens with portrait orientation
 */
@media all and (max-width: 500px) and (orientation: portrait) 
{
    .page-404 article h1
    {
        font-size: 1.9rem
    }
    
    .page-404 article p
    {
        font-size: 1.7rem
    }
    
    .page-404 article nav a 
    {
        box-sizing: border-box;
        flex-basis: 50%;
    }

    .page-404 article nav a:nth-child(2n)
    {
        padding-left: 2em;
    }

    .page-404 article nav a:nth-child(2n+1)
    {
        padding-right: 2em;
    }
}

/**
 *  Fix the product icons size and position by smaller screens with landscape orientation
 */
@media all and (max-width: 900px) and (orientation: landscape) 
{
    .page-404 article h1
    {
        font-size: 1.9rem
    }
    
    .page-404 article p
    {
        font-size: 1.7rem
    }
    
    .page-404 article nav a
    {
        box-sizing: border-box;
        flex-basis: 16%;
    }
}