/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
    background: url('images/bkimg1.png');
}

html, body {
    margin: 0;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    background-color: #f5f5f5;
    height: 100%;
}



/* --------------------- */
/* --------------------- */
/* Content section start */
/* --------------------- */
/* --------------------- */

/* This contains all elements below the Header */
.contentsection {
    width: 100%;
    height: 100%;
}

/* ----------------------------------------------- */
/* This is where the content Header Section starts */
/* ----------------------------------------------- */

/* Contains the "Welcome to" "VisualVo", Line break and "PageName" div */
.ContentHeader {
    padding-top: 50px;
    text-align: center;
}

/* Styles the "VisualVO div (The"VO" is styled by the "y1" class) */
.VisualVO {
    margin-top: -30px;
    margin-bottom: -30px;
}

/* Custom h1 styling */
h1 {
    font-size: 64px;
}

/* Styles the "VO" in VisualVO */
y1 {
    color: #FFCA05;
}

/* Yellow line break */
hr {
    width: 50px;
    height: 5px;
    background-color: #FFCA05;
    border: none;
}

/* Styles the text below the line break */
.PageName {
    padding-top: 10px;
}

/* ----------------------------------------------------- */
/* This is where the Functions Navigation Section starts */
/* ----------------------------------------------------- */
/* The hexagons (FunctionNavBtns) are added in sections(Levels) multiple buttons can be added to a section (level) they y-axis spacing is done on the levels. x-axis spacing is done at btn level. */



/* Styles the container div for all functionNav elements */
.FunctionNavSection {
    width: 100%;
    height: 100%;
    float: left;
    padding-top: 50px;
    transition: transform .5s; /* Animation */
    transform: scale(1.0); /* Zoom */
}

/* styles the first level in the "honeycomb". Left:50% and Translate -50% used to center contents. white-space set to no wrap to maintain structure. */
.FunctionNavInnerSection1 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    float: left;
    z-index: 10;
}

/* styles the second level in the "honeycomb". Left:50% and Translate -50% used to center contents. white-space set to no wrap to maintain structure. */
.FunctionNavInnerSection2 {
    margin-top: 105px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    float: left;
}

/* styles the second level in the "honeycomb". Left:50% and Translate -50% used to center contents. white-space set to no wrap to maintain structure. */
.FunctionNavInnerSection3 {
    margin-top: 210px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    float: left;
}


/* Function Buttons container Here */
.FunctionNavBtn {
    display: inline-block;
    height: 200px;
    width: 230px;
    border: none;
    text-align: center;
    margin-left: 0px;
    margin-right: 0px;
}

    /* Function Buttons link */
    .FunctionNavBtn a {
        display: inline-block;
        height: 200px;
        width: 230px;
        border: none;
        text-align: center;
        margin-left: 0px;
        margin-right: 0px;
        transition: transform .5s; /* Animation */
        transform: scale(1.00); /* Zoom */
    }

        /* Function Buttons link:hover state */
        .FunctionNavBtn a:hover {
            transition: transform .5s; /* Animation */
            transform: scale(1.05); /* Zoom */
        }

/* Function Buttons text. Due to svg the negative margin needs to be used to overlay the text */
.FunctionNavBtnText {
    margin: -48% 0%;
    text-align: center;
    width: 100%;
    float: left;
    font-size: 18px;
    color: white;
}

/* Same as FunctionNavBtnText, but margin set for two lines of text */
.FunctionNavBtnTextTwoLine {
    margin: -51% 0%;
    text-align: center;
    width: 100%;
    float: left;
    font-size: 18px;
    color: white;
}

/* Spacer to be added to sections in order to space buttons */
.BtnSpacer {
    display: inline-block;
    width: 130px;
    height: 0px;
}

/* svg float set. Styling to be set in html (svg path inserted) */
svg {
    float: left;
}

/* --------------------------- Content section end ---------------------------- */




/* ---------------------------- */
/* ---------------------------- */
/* Adapt for Mobile screen size */
/* ---------------------------- */
/* ---------------------------- */


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

    /* Content Section size adjustment */
    .contentsection {
        transition: transform .5s; /* Animation */
        transform: scale(0.9); /* Zoom */
    }

    /* Content Header Section size adjustment */
    .ContentHeader {
        padding-top: 10px;
        text-align: center;
        transition: transform .5s; /* Animation */
        transform: scale(0.9); /* Zoom */
    }

    /* FunctionNavSection padding removed */
    .FunctionNavSection {
        padding-top: 0px;
        transition: transform .5s; /* Animation */
        transform: scale(0.9); /* Zoom */
    }

    /* FunctionNavInnerSection1 whitespace set to normal to allow hexagons/function buttons to wrap (at width size specified) */
    .FunctionNavInnerSection1 {
        white-space: normal;
        width: 230px;
    }

    /* unctionNavInnerSection2 whitespace set to normal to allow hexagons/function buttons to wrap (at width size specified) */
    .FunctionNavInnerSection2 {
        margin-top: 215px;
        white-space: normal;
        width: 230px;
    }

    /* unctionNavInnerSection2 whitespace set to normal to allow hexagons/function buttons to wrap (at width size specified) */
    .FunctionNavInnerSection3 {
        margin-top: 645px;
        white-space: normal;
        width: 230px;
    }

    /* FunctionNavBtn spacing adjusted */
    .FunctionNavBtn {
        margin-top: 10px;
    }

    /* BtnSpacer spacer removed */
    .BtnSpacer {
        display: none;
    }
}



/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in {
    opacity: 0; /* make things invisible upon start */
    -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

    .fade-in.one {
        -webkit-animation-delay: 0.3s;
        -moz-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

    .fade-in.two {
        -webkit-animation-delay: 0.5s;
        -moz-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }

    .fade-in.three {
        -webkit-animation-delay: 0.7s;
        -moz-animation-delay: 0.7s;
        animation-delay: 0.7s;
    }

    .fade-in.four {
        -webkit-animation-delay: 0.9s;
        -moz-animation-delay: 0.9s;
        animation-delay: 0.9s;
    }