/* ---------------------------------------------------------
   HTML5 Bones
   This stylesheet contains print styling and a section for 
   you to simply add your own. This is a basic template 
   after all.
   ---------------------------------------------------------*/

    /* Default link styling */
    a:link { color:#0271fb; }
    a:visited { color:#bd02fb; }
    a:hover, a:focus { color:#000; }
    a:active { color:#fb0e02; }
    
    
    
/* ---------------------------------------------------------
   Author's styles
   ---------------------------------------------------------*/
    body {
        background-color: #f89842;
        text-align: center;
        font-family: 'Khand', sans-serif;  
    }

    #logo {
        width: 550px;
        margin-top: 50px;
    }

    #footer-row{
        height: auto;
        margin-top: 180px;
        padding: 11px 5%;
        background-color: #111424;
    }

    #footer-row a{
        display: inline-block;
        height: 58px;
        vertical-align: top;
        margin: 10px 18px;
    }

    #footer-row img {
        height: 58px;
    }

    #footer-row div {
        display: inline-block;
    }

    #footer-info {
        margin-top: 28px;
        margin-bottom: 20px;
        padding: 0 5%;
        font-size: 25px;
        font-weight: bold;
        line-height: 30px;   
        color: white;
    }

    @media (max-width: 600px) {
        #logo {
            width: 90%;
            margin-top: 20px;
        }

        #footer-row a{
            height: 48px;
            margin: 10px 15px;
        }

        #footer-row a img {
            height: 48px;
        }

        #footer-row{
            margin-top: 90px;
        }

        #footer-info {
            margin-top: 35px;
            font-size: 23px;
        }
    }

    @media (max-width: 320px) {
        #footer-row a{
            height: 40px;
            margin: 8px 13px;
        }

        #footer-row a img {
            height: 40px;
        }

        #footer-info {
            font-size: 22px;
        }
    }

    @media (max-width: 800px) and (orientation: landscape) {
        #logo {
            width: 38%;
            margin-top: 0;
        }

        #footer-row{
            margin-top: 0;
        }

        #footer-row a img {
            height: 35px;
        }

        #footer-row a{
            display: inline-block;
            height: 35px;
            margin: 4px 18px;
        }
    
        #footer-row img {
            height: 35px;
        }
    }

    @media (min-width: 800px) and (max-width: 1024px) and (orientation: landscape) {
        #logo {
            width: 40%;
            margin-top: 0;
        }

        #footer-row{
            margin-top: 120px;
        }

        #footer-row a img {
            height: 40px;
        }

        #footer-row a{
            display: inline-block;
            height: 40px;
            margin: 6px 18px;
        }
    
        #footer-row img {
            height: 40px;
        }
    }
    
/* ---------------------------------------------------------
   Print styles
   ---------------------------------------------------------*/
@media print {
    * {
        color:#000 !important;
        box-shadow:none !important;
        text-shadow:none !important;
        background:transparent !important;
    }
    html { background-color:#fff; }
    /* Hide navigation */
    nav { display:none; }

    /* Show link destinations in brackets after the link text */
    a[href]:after { content: " (" attr(href) ") "; }
    a[href] {
        font-weight:bold;
        text-decoration:underline;
        color:#06c;
        border:none;
    }
    /* Don't show link destinations for JavaScript or internal links */ 
    a[href^="javascript:"]:after, a[href^="#"]:after { content:""; }
    
    /* Show abbr title value in brackets after the text */
    abbr[title]:after { content: " (" attr(title) ")"; }

    figure { 
        margin-bottom:1em; 
        overflow:hidden;
    }

    figure img { border:1px solid #000; }
}