/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}
html,
body {
  height: 100%;  
}
body {
    font-size: 1em;
    line-height: 1.4;
    background: #FFF;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img { vertical-align: middle; }


/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Casetagram maintenance page custom style
   ========================================================================== */

    @font-face {
        font-family: 'pangram';
        font-display: swap;
        src: url('../fonts/pangram/pangram-extrabold-webfont.woff2') format('woff2'),
             url('../fonts/pangram/pangram-extrabold-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }

    @font-face {
        font-family: 'pangram';
        font-display: swap;
        src: url('../fonts/pangram/pangram-black-webfont.woff2') format('woff2'),
             url('../fonts/pangram/pangram-black-webfont.woff') format('woff');
        font-weight: bold;
        font-style: normal;

    }

/*    @font-face {
        font-family: 'bree_ltlight';
        src: url('../fonts/breelight-webfont.eot');
        src: url('../fonts/breelight-webfont.eot?#iefix') format('embedded-opentype'),
             url('../fonts/breelight-webfont.woff') format('woff'),
             url('../fonts/breelight-webfont.ttf') format('truetype'),
             url('../fonts/breelight-webfont.svg#bree_ltlight') format('svg');
        font-weight: normal;
        font-style: normal;

    }*/

    h2 {
        font-family: "pangram",Helvetica,Arial,sans-serif;
        /*font-family: 'bree_ltlight', Arial, Sans-serif;*/
        font-size: 29px;
        font-weight: bold;
        font-style: normal;
    }

    p{
        font-family: "pangram",Helvetica,Arial,sans-serif;
        /*font-family: 'bree_ltlight', Arial, Sans-serif;*/
        font-weight: bold;
        font-style: normal;
        color: #ea594e;
    }

    /* general style */
    #casetagram-logo {
        width: 360px;
        height: 120px;
        text-indent: -9999px;
        background: url('../img/casetify-logo.png') no-repeat top left; 
    }
    .mt-wrapper {
        width: 960px;
        display: table;
        table-layout: fixed;
        margin: 0 auto;
        padding: 100px 0 0 0;
    }
    .mt-table-cell {
        position: relative;
        display: table-cell;
        vertical-align: middle;
    }
    .relative { position: relative; }

    /* case */
    .mt-table-cell:first-child {
        width: 360px;
    }
    [alt="sad face"] {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -120px 0 0 -86px;
        z-index: 3;
        opacity: 0;
        -webkit-animation: appear-opacity 0.9s 0.9s ease-out forwards;
                animation: appear-opacity 0.9s 0.9s ease-out forwards;
    }
    [alt="case"] {
        display: block;
        margin: 0 auto;
        z-index: 2;
    }
        /* Wheels */
        [alt="wheel"] {
            width: 100%;
            height: auto;
            -webkit-animation: wheel 30s linear infinite;
                    animation: wheel 30s linear infinite;
        }
        .wheel1,
        .wheel2,
        .wheel3 {
            position: absolute;
            -webkit-transform: scale(0);
                    transform: scale(0);
            opacity: 0;
        }
        .wheel1 {
            top: 168px;
            left: 0;
            -webkit-animation: appear 0.6s 0.2s ease-out forwards;
                    animation: appear 0.6s 0.2s ease-out forwards;
        }  
        .wheel2 {
            width: 60px;
            height: 60px;
            top: -77px;
            left: 160px;
            -webkit-animation: appear 0.6s 0.5s ease-out forwards;
                    animation: appear 0.6s 0.5s ease-out forwards;
        }   
        .wheel3 {
            width: 100px;
            height: 100px;
            top: -38px;
            left: 221px;
            -webkit-animation: appear 0.6s 0.7s ease-out forwards;
                    animation: appear 0.6s 0.7s ease-out forwards;
        }        

    /* message */
    .mt-table-cell:last-child { width: 600px; }
        /* message */
        .social { 
            list-style: none; 
            padding: 0;
            margin: 30px 0 0 0;
        }
        .social li { display: inline; }
        .social li  a{ 
            display: inline-block; 
            padding: 8px;
            -webkit-transform: translateY(0px);
                    transform: translateY(0px);
            -webkit-transform: translateY(0px);
                    transform: translateY(0px);
            -webkit-transition: -wekit-transform 0.3s ease-out;
                    transition: transform 0.3s ease-out;
        }
        .social li  a:hover{ 
            -webkit-transform: translateY(-3px);
                    transform: translateY(-3px);
        }

    /* animation */
    @keyframes wheel {
        0% { transform: rotate(0deg);}
        100% { transform: rotate(360deg);}
    }
    @-webkit-keyframes wheel {
        0% { -webkit-transform: rotate(0deg);}
        100% { -webkit-transform: rotate(360deg);}
    }

    /* appear */
    @keyframes appear {
        0% { 
            transform: scale(0);
            opacity: 0;
        }
        100% { 
            transform: scale(1);
            opacity: 1;
        }
    }
    @-webkit-keyframes appear {
        0% { 
            -webkit-transform: scale(0);
            opacity: 0;
        }
        100% { 
            -webkit-transform: scale(1);
            opacity: 1;
        }
    }

    /* appear opacity */
    @keyframes appear-opacity {
        0% { 
            margin: -120px 0 0 -86px;
            opacity: 0;
        }
        100% { 
            margin: -60px 0 0 -86px;
            opacity: 1;
        }
    }
    @-webkit-keyframes appear-opacity {
        0% { 
            margin: -120px 0 0 -86px;
            opacity: 0;
        }
        100% { 
            margin: -60px 0 0 -86px;
            opacity: 1;
        }
    }



/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 60em) {
    
    .mt-wrapper {
        width: 95%;
        display: block;
        margin: 0 auto;
        padding: 100px 0 0 0;
    }
    #casetagram-logo {
        margin: 0 auto;
        width: 180px;
        height: 60px;
        background: url('../img/casetify-logo.png') no-repeat contain; 
        background-size: 100%;
    }
    /* .maintenance-message span {
    	display: none;
    }
    .maintenance-message:after {
    	content: 'Our app is temporarily down for maintenance';
    } */
    .mt-table-cell:last-child { 
        width: 100%; 
        display: block;
        text-align: center;
    }
    .mt-table-cell:first-child {
        display: none;
    }

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}