*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    margin: 10px;
    font-family: 'Open Sans', 'sans-serif';
    background-color: #FAFAFA;
}

html {
    overflow-y: scroll;
    /*Prevents scrollbar resizing screen*/
}

/*Start of Responsive header */
.nav {
    height: 70px;
    width: 100%;
    background-color: #F4F4F4;
    position: relative;
    border-radius: 2.5px;

}

.nav>.nav-header {
    display: inline;
}

.nav>.nav-header>.nav-title {
    display: block;
    float: left;
    font-size: 35px;
    font-family: Copperplate, Papyrus, fantasy;
    font-weight: bold;
    /*Full page title colour*/
    padding: 7px 10px 10px 40px;
    color: #191970;
}

.nav>.nav-btn {
    display: none;
}

.nav>.nav-links {
    float: right;
    font-size: 18px;
    font-weight: bold;
    padding-right: 3em;

}

.nav>.nav-links>a {
    font-family: Copperplate,Papyrus,fantasy;
    display: inline-block;
    margin: 7px 10px;
    padding: 14px 10px 12px 5px;
    color: #191970;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.nav>.nav-links>a:hover {
    padding: 14px 10px 12px 5px;
    list-style: none;
    background-color: #dcdcdc;
    color: #000;
    transition: 1s;
    border-radius: 2em;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

.nav>#nav-check {
    display: none;
}

.nav>.nav-links>a:active {
    color: green;
}



/*Burger bar responsive narrow */
@media (max-width:600px) {
    .nav>.nav-btn {
        display: inline-block;
        position: absolute;
        right: 30px;
        /*Burger position to left and 30mm pad*/
        top: 0px;
    }

    .nav>.nav-btn>label {
        display: inline-block;
        width: 50px;
        height: 50px;
        padding: 18px;
        /*pads burger bar*/
    }


    .nav>.nav-btn>label>span {
        display: block;
        width: 30px;
        /*Burger label width*/
        height: 12px;
        /*Burger label height*/
        border-top: 2px solid #000000;
        /*Burger colour*/
    }

    .nav>.nav-links {
        position: absolute;
        display: block;
        width: 100%;
        background-color: #DCDCDC;
        height: 0px;
        transition: all .75s ease-in;
        /*Burger dropdown opening speed*/
        overflow-y: hidden;
        top: .85em;
        /*Drop down for burger bar-bottom clearance*/
        left: 0px;
        text-align: left;
    }

    .nav>.nav-links>a {
        font-family: auto;
        display: block;
        width: 100%;
        color: #191970;
        /*Colours drop down tap targets*/
        font-size: 16px;
        /*Burger Drop down tap target size*/
        padding: 10px;

    }

    .nav>#nav-check:not(:checked)+.nav-links {
        height: 0px;
    }

    .nav>#nav-check:checked+.nav-links {
        height: calc(55vh - 50px);
        overflow-y: auto;
        position: relative;
        /*Needed for dropdown clearance on small screen*/
    }

    .nav>.nav-header>.nav-title {
        display: block;
        float: left;
        font-size: 20px;
        color: #191970;
        /*Full page title colour*/
        padding: 13px 10px 13px 10px;
        font-weight: bold;
    }
}

/*Burger bar responsive wide */
@media (min-width:600px) and (max-width:1260px) {
    .nav>.nav-btn {
        display: inline-block;
        position: absolute;
        right: 30px;
        /*Burger position to left and 30mm pad*/
        top: 0px;
    }

    .nav>.nav-btn>label {
        display: inline-block;
        width: 30px;
        height: 10px;
        padding: 18px 30px 0 0;
        /*pads burger bar*/
    }

    .nav>.nav-btn>label>span {
        display: block;
        width: 30px;
        /*Burger label width*/
        height: 12px;
        /*Burger label height*/
        border-top: 2px solid #000000;
        /*Burger colour*/
    }

    .nav>.nav-links {
        position: absolute;
        display: block;
        width: 100%;
        background-color: #DCDCDC;
        height: 0px;
        transition: all .75s ease-in;
        /*Burger dropdown opening speed*/
        overflow-y: hidden;
        top: .1em;
        /*Drop down for burger bar-bottom clearance*/
        left: 0px;
        text-align: left;
    }

    .nav>.nav-links>a {
        font-family: auto;
        display: inline-block;
        width: 100%;
        color: #191970;
        /*Colours drop down tap targets*/
        font-size: 18px;
        /*Burger Drop down tap target size*/
        padding: 10px;

    }

    .nav>#nav-check:not(:checked)+.nav-links {
        height: 0px;
    }

    .nav>#nav-check:checked+.nav-links {
        height: calc(50vh - 50px);
        /*Alters height of burger bar drop down*/
        overflow-y: auto;
        position: relative;
        /*Needed for dropdown clearance on small screen*/
    }

    .nav>.nav-header>.nav-title {
        display: block;
        float: left;
        font-size: 30px;
        color: #191970;
        /*Full page title colour*/
        padding: 12px 10px 12px 20px;
        font-weight: bold;
    }
}

/*Nav settings end*/
/*-------------------------------------------------------------------------------------------*/
/*csv settings start*/

.here td {
    padding: 10px 15px;
    font-size: 16px;
}

.here table {
    border-collapse: collapse;
    width: 100%;
}

.here tr:first-child td {
    padding: 15px;
    font-size: 18px;
    font-family: 'allura';
    font-weight: bold;
    color: #191970;
}


/* TEMPLATE 1 COLOR */

.template1 tr:first-child td {
    background-color: #F0F0F0 !important;
}

.template1 td {
    border-color: #CCCCCC;
    border-style: solid;
}

.template1.hor tr:nth-child(odd),
.template1.ver td:nth-child(even) {
    background-color: #F6F6F6;
}


/* TEMPLATE 2 COLOR */

.template2 tr:first-child td {
    background-color: #F38630 !important;
}

.template2 td {
    border-color: #AAAAAA;
    border-style: solid;
}

.template2.hor tr:nth-child(odd),
.template2.ver td:nth-child(even) {
    background-color: #FCFBE3;
}


/* TEMPLATE 3 COLOR */

.template3 tr:first-child td {
    background-color: #F0F8FF !important;
}

.template3 td {
    border-color: #DCDCDC;
    border-style: solid;
}

.template3.hor tr:nth-child(odd),
.template3.ver td:nth-child(even) {
    background-color: #F0F8FF;
}


/* TEMPLATE 4 COLOR */

.template4 tr:first-child td {
    background-color: #9DE0AD !important;
}

.template4 td {
    border-color: #BBBBBB;
    border-style: solid;
}

.template4.hor tr:nth-child(odd),
.template4.ver td:nth-child(even) {
    background-color: #C2FFD6;
}


/*BORDER*/

.allBorder td {
    border-width: 1px;
}

.vertiBorder td {
    border-left-width: 1px;
}

.vertiBorder td:first-child {
    border-left-width: 0 !important;
}

.horiBorder td {
    border-bottom-width: 1px;
}

@media only screen and (max-width: 414px) {
    .here table {
        width: 100%;
    }

    /* Force table to not be like tables anymore */
    .here table,
    .here thead,
    .here tbody,
    .here th,
    .here td,
    .here tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .here tr:first-child {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .here tr {
        border: 1px solid #dcdcdc;
    }

    .here td {
        /* Behave like a "row" */
        border: none;
        position: relative;
        padding-left: 45%;
        font-size: 16px;
    }

    .here td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        /* Label the data */
        content: attr(data-column);
        color: #000;
        font-weight: bold;
        font-size: 16px;
        z-index: 1111111;
    }
}

/*csv settings end*/
/*------------------------------------------------------------------------------------------------------------*/
/*Footer settings start*/

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-flow: column nowrap;
    /*This justify-content is essentially unnecessary in Firefox and Chrome due to the flex: 1 1 auto on the main.  However, it's needed to push the footer down on IE11*/
    justify-content: space-between
}

.footer ul {
    list-style: none
}

a {
    text-decoration: none
}

.flex-rw {
    display: flex;
    flex-flow: row wrap;
    background: #F4F4F4;
}

footer {

    width: 100%;
    border-radius: 2.5px;
}

.footer-list-top {
    width: 32.3%;
    padding-bottom: 1em;
}

.footer-list-top>li {
    text-align: center;
}

.footer-list-header {
    color: #191970;
    font: 1EM "Oswald", sans-serif;
    margin: 0 0 15px 0;
    /*Pads between footer description and links*/
}

.footer-list-anchor {
    font: .5em "Open Sans", sans-serif;
    color: #696969;
}

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

    .footer-list-top {
        width: 29%;
    }

    .footer-list-header {
        font-size: 1em;
    }

    .footer-list-anchor {
        font-size: .5em;
    }
}


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

    .footer-list-top {
        width: 30%;
    }

    .footer-list-header {

        font-size: .75em
    }

    .footer-list-anchor {
        font-size: .5em
    }
}

.header,
.footer {

    flex: 0 1 100%;
    grid-column: 1 / -1;
}

.fa-download,
.fa-file-pdf-o {
    color: red;
}

.fa-home,
.fa-youtube-play,
.fa-envelope {
    color: #191970;
}


/*Footer settings end*/
/*---------------------------------------------------------------------------------------------------------------------------*/
/*Button Settings*/

button-places {
    margin: 0;
    display: inline-block;
    max-width: 100%;
}

/* BUTTON STYLES */
button-places {
    padding: 12px;
    font-family: helvetica;
    font-size: 14px;
    color: #fff;
    background: #191970;
    border-radius: 30px;
    transition: all 0.3s ease 0s;
}

button-places:hover {
    background: green;
    color: #000;
    font-weight: bold;
    box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
    transform: translateY(-7px);
}

/*ButtonSettings End*/
/*-------------------------------------------------------------------------------------------------------------------------*/
/*File/csv download bar settings*/

.file-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /*This puts side by side, remove for one on top of other*/
    grid-gap: 6px;
    max-height: 100%;
}
.download_pdf p {
    text-align: center;
    background-color: #fff;
    border:1px solid #DCDCDC;
}

.download_csv p {
    text-align: center;
    background-color: #fff;
    border:1px solid #DCDCDC;
}
/*File/csv download bar settings end*/