/* DEFAULT FONTS, BACKGROUND COLOUR AND FONT COLOUR FOR PAGE */
body 
{
    font-family: "Helvetica Neue", Arial;
    background: black;
    color: white;
}


/* HEADER */

/* HEADER CONTAINER CONTAINING SUB-CONTAINERS */
#headerContainer
{
    height: 225px;
    text-align: center;
    margin: auto;
}

    /* SOCIAL MEDIA SUBCONTAINER WITHIN HEADER CONTAINER */
    #socialMediaIconsContainer
    {
        position: absolute;
        float: right;
    }

        /* SOCIAL MEDIA ICON SPECS*/
        #socialMediaIcon
        {
            height:30px;
            width:30px;
        }

    /* COMPANY LOGO SUBCONTAINER WITHIN HEADER CONTAINER */
    #logoSubcontainer
    {
        width: 350px;
        text-align: middle;
        transform:translate(0, 50%);
        display: inline-block;
    }

        /* COMPANY LOGO SPECS */
        #logoImage
        {
            height: 75px;
            width: 250px;
        }

    /* WEBSITE LINKS SUBCONTAINER WITHIN HEADER CONTAINER */
    #linksSubcontainer
    {
        width: 350px;
        transform:translate(0, 55%);
        display: inline-block;
        padding-top: 25px;    
        font-size: 0.8em;
    }

    /* LINKS - INTERACTION SPECS */
    a:visited { color: white; text-decoration: none; }
    a:link { color: white; text-decoration: none; }
    a:hover   { color: lawngreen; text-decoration: none; }



/* HERO IMAGE SECTION */

/* HERO BACKGROUND IMAGE */
#background
{
    width: 100%;
    height: 30em;
    padding-top: 100p; 

    background-image: url('images/hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no repeat;
}

    /* SLOGAN ON HERO IMAGE BACKGOUND SPECS */
    #slogan 
    {    
        position: relative;
        top: 150px;
        font-size: 1.5em;
        text-align: center;    
        font-weight: normal;
        display:block;
        font-style: italic;
        font-style: oblique;
    }

    /* BUTTON ON HERO IMAGE BACKGOUND SPECS */
    .heroButton
    {
        position:relative;
        top: 30px;
        padding: 20px 80px;
        border-radius:12px;
        border-width: 0px;
        background-color: black;        
        font-size: 0.5em;
        color: white;
    }

    /* BUTTONS - INTERACTION SPECS */
    button:a { color: white; text-decoration: none; }
    button:hover   { color: lawngreen; text-decoration: none; transition: 0.2s}
    button:active  { color: black; text-decoration: none; background-color: lawngreen; transition: 0.2s}


/* PRODUCT VIDEOS SECTION */
    
/* CONTAINER FOR HOLDING MULTIPLE PRODUCT VIDEO SUBCONTAINERS */
#productContainerMain
{
    padding: 220px 0px 150px 0px;
    text-align: center;    
}

    /* PRODUCT VIDEO SUBCONTAINER SPECS - EACH OF THESE CONTAINERS HAS A VIDEO AND CAPTION WITHIN IT */
    #productContainer
    {
        padding: 50px 20px 50px 20px;
        height: 300px;
        width: 200px;
        display: inline-block;
    }


/* FOOTER SECTION */

/* FOOTER CONTAINER CONTAINING SUB-CONTAINERS */
#footerContainerMain
{
    padding-top:140px;  
    text-align: center;
    line-height: 2em;
}

    /* LIST OF LINKS SUBCONTAINER SPECS FOR EACH LIST OF LINKS*/
    #footerContainer
    {        
        width: 300px;
        height: 300px;
        padding: 0px 10px 0px 10px;
        vertical-align: top;
        text-align: center;
        display: inline-block;  
    }

        /* HEADING STYLING FOR EACH SET OF LINKS IN FOOTER*/
        footerHeading
        {
            font-weight: bold;
            font-style: oblique;
        }

    /* FONT SIZE FOR COPYRIGHT DISCLAIMER*/
    #copyrightDisclaimer
    {
        font-size: 0.8em;
    }



/* SPECS FOR WIDER SCREENS*/
@media screen and (min-width: 1000px) 
{
    /* SO COPYRIGHT DISCLAIMER STAYS WITHIN A 960px WIDE CENTRALISED CONTAINER ON WIDER SCREEN */
    #copyrightDisclaimer
    {
        width: 960px;
        margin: 0 auto;
    }
}



/* SPECS FOR NARROW SCREENS (EG. MOBILES) */
@media screen and (max-width: 500px) 
{
    /* LARGER  FONT FOR LINKS ON MOBILES*/
    #linksSubcontainer
    {
        font-size: 1em;
    }
    /* LARGER  FONT FOR BUTTON TEXT ON MOBILES*/
    .heroButton
    {
        font-size: 0.6em;
    }    
    /* LARGER  FONT FOR FOOTER LINKS ON MOBILES*/
    footerContainer
    {
        font-size: 1.2em;
    }
    /* LARGER  FONT FOR COPYRIGHT DISCLAIMER ON MOBILES*/
    #copyrightDisclaimer
    {
        font-size: 1em;
    }
}