/* 
    Created on : Jun 15, 2016, 4:51:43 PM
    Author     : Steve James <SD.James@outlook.com>
*/

#display-error
{

    font-family: Arial;
    font-size: 11px;
    text-transform: uppercase;
    color: rgb(211, 0, 0);
    /*text-align: center;*/
}


.big_heading {
    -moz-flex-grow: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
    -ms-flex: 1;
    /*    padding: 3.75em 3em 3.3em 3em;*/
    font-weight: 900;
    font-size: 1.5em;
}

.dialog_heading {
    -moz-flex-grow: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
    -ms-flex: 1;
    /*    padding: 3.75em 3em 3.3em 3em;*/
    font-weight: 900;
    font-size: 1.5em;
    text-align: center;
}



.dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.dialog:target {
    opacity:1;
    pointer-events: auto;
}

.dialog > div {
    width: 360px;
    position: relative;
    margin: 10% auto;
    padding: 40px;
    border-radius: 0px;
    background: #fff;
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.not_found{

    /*    position: fixed;  or absolute 
        top: 50%;
        left: 50%;
         bring your own prefixes 
        transform: translate(-50%, -50%);*/

    text-align: center;
    font-weight: 900;
    font-size: 1.5em;
}

.big_heading{
    text-align: center;
    font-weight: 900;
    font-size: 1.5em;
}

/*        Miniport by Pixelarity*/

.box {
    background: #fff;
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Desktop */
@media screen and (min-width: 737px) {
    .box {
        padding: 2em;
        word-wrap:break-word
    }

    .box.style1 {
        padding: 3em 2em 3.5em 2em;
    }

    .box.style1 h3 {
        margin-bottom: 0.5em;
    }

    .box.style2 h3 {
        margin-bottom: 0.25em;
    }

    .box.style2 .image {
        position: relative;
        left: 2em;
        top: 2em;
        margin: -4em 0 4em -4em;
        width: auto;
    }


}

/* Mobile */
@media screen and (max-width: 736px) {

    .box {
        padding: 30px 20px 30px 20px;
        margin: 0 0 20px 0;
        word-wrap:break-word
    }

    .box h3 {
        margin-bottom: 0.25em;
    }

    .box .image.centered {
        margin-bottom: 1em;
    }

    .box .image.featured {
        position: relative;
        left: 20px;
        top: 20px;
        margin: -50px 0 50px -40px;
        width: auto;
    }

}


/*TODO fix margin/alignment of tiles properly*/

/* Tiles from px-phantom*/

.tiles {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;

    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    postiion: relative;
    margin: -2.5em 0 2.5em -2.5em;
}

.tiles article {
    -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
    transition: transform 0.5s ease, opacity 0.5s ease;
    position: relative;
    width: calc(25% - 2.5em);
    margin: 1.25em 0 0 2.5em;
}


@media screen and (max-width: 1280px) {


    .tiles article {
        width: calc(33.33333% - 2.5em);
        margin: 1.25em 0 0 2.5em;
    }

}

@media screen and (max-width: 980px) {

    .tiles {
        margin: -2.5em 0 2.5em -2.5em;
    }

    .tiles article {
        width: calc(50% - 2.5em);
        margin: 2.5em 0 0 2.5em;
    }

}

/*@media screen and (max-width: 736px) {


    .tiles {
        margin: -1.25em 0 0 0;
    }

    .tiles article {
        margin: 2.5em 0 0 2.5em;
        width: calc(40%);
        margin: 1.25em 1.25em 0 2.5em;

    }

    .tiles article:hover > .image {
        -moz-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        -ms-transform: scale(1.0);
        transform: scale(1.0);
    }



}*/

@media screen and (max-width: 480px) {

    .tiles {
        margin: 0 0 2.5em 0;
    }

    .tiles article {
        width: 100%;
        margin: 1.25em 0 0 0;
    }

}

.tiles article > .image {
    -moz-transition: -moz-transform 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease;
    transition: transform 0.5s ease;
    position: relative;
    display: block;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}



.tiles article > .image img {
    display: block;
    width: 100%;
}

.tiles article > a .content > :last-child {
    margin-bottom: 0;
}

/*Zoom in on picture when hovered*/
body:not(.is-touch) .tiles article:hover > .image {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

body:not(.is-touch) .tiles article:hover > .image:before {
    background-color: #333333;
    opacity: 0.35;
}

body:not(.is-touch) .tiles article:hover > .image:after {
    opacity: 0;
}

body:not(.is-touch) .tiles article:hover .content {
    max-height: 15em;
    opacity: 1;
}

* + .tiles {
    margin-top: 2em;
}

body.is-loading .tiles article {
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0;
}

body.is-touch .tiles article .content {
    max-height: 15em;
    opacity: 1;
}

.grey {
    opacity: 0.4;
    filter: alpha(opacity=40);  msie 
    background-color: #000;
}