/*

Destination Waiheke Island
www.destinationwaiheke.co.nz

-- Colours:
---- Header Light-grey      :   #8c9ba5
---- Header Grey            :   #636f78
---- Footer Dark-Grey/Blue  :   #34424f
---- Footer background      :   #e5e5e5
---- Title Purple           :   #a2185b
---- Footer Break           :   #93abb5
---- Footer Grey            :   #5a5f65
---- Footer Grey            :   #9f9f9f
---- Hover light-blue       :   #009fe3
---- Information Light Grey :   #54676f
---- Pastel Colours:
---- -- Green               :   #f0f3e9
---- -- Blue                :   #d9edef
---- -- Orange              :   #fcf3e8
---- -- Gold                :   #feecd5
---- -- Red                 :   #f9eef4

-- Z-Index Reference:
---- 1      :   Main
---- 2      :   Header
---- 3      :   Quick dropdown

*/

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    background: #e5e5e5;
}

html {
    opacity: 0;
}

h1 {
    color: red;
}

/************************************/
/*              HEADER              */
/************************************/

.header {
    /* Flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
    /* ------- */
    width: 100%;
    height: 80px;
    background: white;
    position: relative;
    z-index: 2;
}

.header .navigation {
    /* Flexbox */
    display: flex;
    justify-content: space-between;
    /* ------- */
    width: 50%;
}

.header .navigation .navigationItem, .sidebar .navigationItem {
    text-decoration: none;
    color: #8c9ba5;
    font-family: 'Mada', sans-serif;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.header .navigation .navigationItem:hover {
    color: #636f78;
}

.logo {
    height: 188px;
}

.logo#headerLogo {
    margin-top: 108px;
    padding-right: 100px;
}

.goUp {
    opacity: 0;
    display: none;
    position: fixed;
    bottom: 40;
    right: 50;
    z-index: 9999999;
    font-size: 40px;
    color: #34424f;
    cursor: pointer;
    transition: all 0.2s;
}

.header .fa-bars {
    color: #009fe3;
    margin-right: 70px;
    font-size: 25px;
    cursor: pointer;
    display: none;
}

.sidebar {
    display: none;
    position: fixed;
    width: 250px;
    height: 100%;
    background: #d6f1fc;
    z-index: 9999999;
    top: 0;
    right: -250px;
}

.sidebar .navigationItem {
    display: inline-block;
    color: #34424f;
    width: 100%;
    text-align: center;
    font-size: 17px;
    margin-top: 30px;
}

.sidebar .navigationItem#top {
    margin-top: 50px;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(65, 65, 65, 0.73);
    height: 100%;
    width: 100%;
    z-index: 999999;
}

/************************************/
/*            MAIN COVER            */
/************************************/

.main {
    position: relative;
    background:
        linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
        url(images/background.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 600px;
    z-index: 1;
}

.main .float {
    position: absolute;
    width: 80%;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main .phrase {
    position: relative;
    color: white;
    font-family: 'Mada', sans-serif;
    font-weight: 200;
    font-size: 40px;
    width: 100%;
    text-align: center;
    /* text-shadow: 0px 0px 20px rgba(51, 51, 51, 0.2); */
    text-shadow: 0 0 20px black;
}

.main .navigation {
    /* Flexbox */
    display: flex;
    justify-content: space-between;
    /* ------- */
    position: relative;
    width: 70%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    margin-top: 30px;
}

.main .navigation .navigationBox {
    position: relative;
    width: 30%;
}

.main .navigation .navigationBox .navigationItem {
    position: relative;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Mada', sans-serif;
    width: 75%;
    float: left;
    text-align: center;
    font-size: 18px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 12px 8px 12px;
    border-radius: 0;
    letter-spacing: 1.5px;
    font-weight: 400;
    color: #8c9ba5;
    box-shadow: 0 0 20px rgba(51, 51, 51, 0.2);
    transition: all 0.2s;
    left: 50%;
    transform: translateX(-50%);
}

.main .navigation .navigationBox .dropDown {
    display: none;
    position: absolute;
    width: 100%;
    margin-top: 41px;
    padding-top: 10px;
}

.main .navigation .navigationBox .dropDown .box {
    background: white;
    padding: 20px 0 20px 0;
}

.main .navigation .navigationBox:hover .dropDown {
    display: block;
}

.main .navigation .navigationBox:hover .navigationItem {
    background-color: rgba(255, 255, 255, 1);
    color: #636f78;
}

.main .navigation .navigationBox .dropDown a {
    display: inline-block;
    text-align: center;
    width: 100%;
    margin: 5px 0 5px 0;
    color: #34424f;
    text-decoration: none;
    text-transform: capitalize;
    font-family: 'Mada', sans-serif;
}

.main .navigation .navigationBox .dropDown a:hover {
    color: #009fe3;
}

.main .navigation .navigationBox .dropDown .line {
    position: relative;
    width: 60%;
    height: 1px;
    background: #9f9f9f;
    opacity: 0.2;
    left: 50%;
    transform: translateX(-50%);
    margin: 1px 0 1px 0;
}

.main .extra {
    width: 370px;
    height: 120px;
    background: rgba(0,0,0,0.15);
    position: absolute;
    right: 30px;
    top: 30px;
}

.main .extra img {
    position: relative;
    height: 65%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main .extra a {
    font-family: 'Mada', sans-serif;
    position: absolute;
    width: 150px;
    top: 50%;
    text-transform: uppercase;
    color: white;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    transform: translateY(-50%);
    text-decoration: none;
}

.main .extra a:hover {
    color: #a2185b;
}

.main .extra #right {
    right: 0;
}

.main .extra #left {
    left: 0;
}

/************************************/
/*             FOOTER               */
/************************************/

.footer {
    position: relative;
    width: 100%;
    height: 400px;
    border-top: 1px solid #93abb5;
    font-family: 'Mada', sans-serif;
    background: white;
    color: #9f9f9f;
    font-weight: 500;
    font-size: 14px;
    line-height: 25px;
}

.footer > .float {
    position: absolute;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 75%;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
}

.footer .title {
    text-transform: uppercase;
    color: #34424f;
}

.footer .category {
    text-decoration: none;
    color: #9f9f9f;
}

.cinzLink {
    width: 69px;
    height: 100px;
}

.cinzLogo {
    height: 100px;
}

.subFooter {
    position: absolute;
    background: rgb(240, 240, 240);
    width: 100%;
    height: 121px;
    bottom: 0;
}

.logo#footerLogo {
    bottom: 0;
    position: absolute;
    height: 210px;
}

.subFooter .float {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.subFooter .social {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background: red; */
    display: inline-block;
    font-size: 30px;
}

.subFooter .social a {
    margin-left: 8px;
    margin-right: 8px;
    text-decoration: none;
    color: #34424f;
    transition: all 0.3s;
}

.subFooter .social a:hover {
    color: #54676f;
}

.subFooter .email {
    display: inline-block;
    text-decoration: none;
    color: #34424f;
    border: 2px solid white;
    border-radius: 0;
    width: 150px;
    height: 30px;
    text-align: center;
    padding-top: 5px;
    transition: all 0.2s;
}

.subFooter .email:hover {
    background: white;
}

.subFooter .copyright {
    color: #9f9f9f;
    font-size: 12px;
    margin-top: 10px;
}

.mailLink {
    color: inherit;
}

/************************************/
/*            QUICKNAV              */
/************************************/

.quickNav {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 75px;
    background: white;
    border-bottom: 1px solid rgb(147, 171, 181, 0.2);
}

.quickNav .navigationBox {
    position: relative;
    display: inline-block;
    width: 250px;
    z-index: 99999;
    margin: 0 10px 0 10px;
    text-align: center;
}

.quickNav .navigationBox .navigationItem {
    text-transform: uppercase;
    font-family: 'Mada', sans-serif;
    color: #34424f;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    letter-spacing: 0.5px;
}

.quickNav .float .navigationItem:hover {
    color: #009fe3;
}

.triangle {
    cursor: default;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid white;
}

.quickNav .navigationBox .dropDown {
    display: none;
    position: absolute;
    width: 100%;
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.2));
    padding-top: 8px;
}

.quickNav .navigationBox .dropDown .box {
    background: white;
    padding: 20px 0 20px 0;
}

.quickNav .navigationBox:hover .dropDown {
    display: block;
}

.quickNav .navigationBox:hover .navigationItem {
    background-color: rgba(255, 255, 255, 1);
    color: #636f78;
}

.quickNav .navigationBox .dropDown a {
    display: inline-block;
    text-align: center;
    width: 100%;
    margin: 5px 0 5px 0;
    color: #34424f;
    text-decoration: none;
    text-transform: capitalize;
    font-family: 'Mada', sans-serif;
}

.quickNav .navigationBox .dropDown a:hover {
    color: #009fe3;
}

.quickNav .navigationBox .dropDown .line {
    position: relative;
    width: 60%;
    height: 1px;
    background: #9f9f9f;
    opacity: 0.2;
    left: 50%;
    transform: translateX(-50%);
    margin: 1px 0 1px 0;
}

/************************************/
/*         SHARED CLASSES           */
/************************************/

.mainHeader {
    position: relative;
    height: 250px;
}

.mainHeader .float {
    position: absolute;
    width: 60%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    color: white;
    font-family: 'Mada', sans-serif;
    font-weight: 200;
    text-align: center;
    text-shadow: 0px 0px 100px rgba(51, 51, 51, 0.8);
}

.mainHeader .title {
    font-size: 55px;
}

.content {
    position: relative;
    background: white;
    width: 100%;
    min-height: 100px;
}

.gridInfo#accomodation .desc {
    position: relative;
    color: #9f9f9f;
    font-family: 'Mada', sans-serif;
    width: 70%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
}

.accomDesc {
    background: white;
    text-align: center;
    font-family: 'Mada', sans-serif;
    color: #9f9f9f;
    padding-bottom: 30px;
}

.details .information .standOut, .row .infoDesc .standOut {
    margin-top: 10px;
    display: inline-block;

}

.details a, .infoDesc a {
    color: #a2185b;
    font-weight: 500;
    text-decoration: none;
}

/************************************/
/*         ADVENTURE PAGE           */
/************************************/

.mainHeader#activities {
    background:
        url(images/activities/adventure/hero.jpg);
    background-position: 50% 30%;
    background-size: cover;
}

.grid {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    width: 1100px;
    flex-wrap: wrap;
    justify-content: center;
}

.gridItem {
    position: relative;
    margin: 8px;
    width: 250px;
    height: 350px;
    cursor: pointer;
    background: #B2B2B2;
    background-size: 300%;
    background-position: center;
    transition: background-size 0.2s;
    flex-grow: 0;
}

.gridItem#filler {
    cursor: pointer;
    display: none;
    background-color: #77B0D2 !important;
}

.fillerText {
    font-family: 'Mada', sans-serif;
    color: white;
    text-align: center;
    width: 80%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.gridItem#dynamix {
    background:
        url(images/cheers.jpg);
    background-size: 300%;
    background-position: center;
}

.gridItem#archery {
    background:
        url(images/activities/adventure/archery.jpg);
    background-size: 400%;
    background-position: 80%;
}

.gridItem#archery:hover {
    background-size: 420%;
}

.gridItem#bowls {
    background:
        url(images/activities/adventure/A8a.jpg);
    background-size: 280%;
    background-position: center;
}

.gridItem#bowls:hover {
    background-size: 290%;
}

.gridItem#ecozip {
    background:
        url(images/activities/adventure/A3a.jpg);
    background-size: 220%;
    background-position: center;
}

.gridItem#ecozip:hover {
    background-size: 230%;
}

.gridItem#yoga {
    background:
        url(images/activities/adventure/yoga.jpg);
    background-size: 220%;
    background-position: center;
}

.gridItem#yoga:hover {
    background-size: 230%;
}

.gridItem#fishing {
    background:
        url(images/activities/adventure/A30a.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#fishing:hover {
    background-size: 220%;
}

.gridItem#freedom {
    background:
        url(images/activities/adventure/scooter.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#freedom:hover {
    background-size: 220%;
}

.gridItem#guidedBike {
    background:
        url(images/activities/adventure/A26a.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#guidedBike:hover {
    background-size: 220%;
}

.gridItem#kayak {
    background:
        url(images/activities/adventure/kayak.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#kayak:hover {
    background-size: 220%;
}

.gridItem#lawnGames {
    background:
        url(images/activities/adventure/A2a.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#lawnGames:hover {
    background-size: 220%;
}

.gridItem#popupArchery {
    background:
        url(images/activities/adventure/popup.jpg);
    background-size: 300%;
    background-position: center;
}

.gridItem#popupArchery:hover {
    background-size: 320%;
}

.gridItem#segwai {
    background:
        url(images/activities/adventure/A5a.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#segwai:hover {
    background-size: 220%;
}

.gridItem#paddleboard {
    background:
        url(images/activities/adventure/A35a.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#paddleboard:hover {
    background-size: 220%;
}

.gridItem#dynamix {
    background:
        url(images/activities/adventure/a6a.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#dynamix:hover {
    background-size: 220%;
}

.gridItem#tge-beach {
    background: #E7D595 url(images/activities/adventure/tge-beach.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.gridItem#tge-beach:hover {
    background-size: 110%;
}

.gridItem#tge-best {
    background: #A0CDCD url(images/activities/adventure/tge-best.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.gridItem#tge-best:hover {
    background-size: 110%;
}

.gridItem#tge-island {
    background: #D1DFA0 url(images/activities/adventure/tge-island.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.gridItem#tge-island:hover {
    background-size: 110%;
}

.gridItem#waiheke-tours {
    background:
        url(images/activities/adventure/tours.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#waiheke-tours:hover {
    background-size: 220%;
}

.gridItem#nature {
    background:
        url(images/activities/adventure/nature-walking.jpg);
    background-size: 210%;
    background-position: 0 50%;
}

.gridItem#nature:hover {
    background-size: 220%;
}

.gridItem#snorkelling {
    background:
        url(images/activities/adventure/snorkelling.jpeg);
    background-size: 210%;
    background-position: center;
}

.gridItem#snorkelling:hover {
    background-size: 220%;
}

.gridItem#roundRobin {
    background:
        url(images/activities/adventure/robin.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#roundRobin:hover {
    background-size: 220%;
}

.gridItem#wildWalk {
    background:
        url(images/activities/culture/wildwalk.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#wildWalk:hover {
    background-size: 220%;
}

.gridItem#woozey {
    background:
        url(images/activities/adventure/woozey.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#woozey:hover {
    background-size: 220%;
}

.gridText {
    position: absolute;
    bottom: 20px;
    width: 100%;
}

.gridText .arrow {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid white;
    float: left;
    /* margin-left: -1px; */
}

.gridText .title {
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
    color: white;
    font-weight: 500;
    font-size: 13px;
    font-family: 'Mada', sans-serif;
    line-height: 15px;
    width: 200px;
    float: left;
    text-shadow: 0 0 20px #34424f;
}

.gridInfo {
    padding: 30px 0 30px 0;
    position: relative;
    text-align: center;
}

.gridInfo .title {
    font-family: 'Mada', sans-serif;
    font-weight: 500;
    font-size: 22px;
    color: #34424f;
}

.details {
    z-index: 999;
    cursor: default;
    position: absolute;
    display: none;
    width: 100px;
    height: 100%;
    font-family: 'Mada', sans-serif;
    color: black;
}

.details .fa-times {
    cursor: pointer;
    position: absolute;
    font-size: 20px;
    top: 25;
    right: 30;
    color: black;
    z-index: 3;
}

.details .title {
    font-weight: 500;
    font-size: 18px;
}

.details .description {
    font-size: 14px;
}

.details .information .infoRow {
    position: relative;
    /* background: red; */
    margin-top: 10px;
}

.infoRow .iconContainer {
    text-align: center;
    float: left;
    width: 30px;
    height: 100%;
    padding-right: 7px;
}

.details > .float {
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    padding-right: 80px;
}

/************************************/
/*           INDOORS PAGE           */
/************************************/

.mainHeader#indoors {
    background:
        url(images/activities/activities/A3.jpg);
    background-position: 50% 60%;
    background-size: cover;
}

.gridItem#botanical-fragrance {
    background:
        url(images/activities/indoors/A15a.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#botanical-fragrance:hover {
    background-size: 220%;
}

.gridItem#botanical-gin {
    background:
        url(images/activities/indoors/A16a.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#botanical-gin:hover {
    background-size: 220%;
}

.gridItem#botanical-mini {
    background:
        url(images/activities/indoors/botanical-mini.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#botanical-mini:hover {
    background-size: 220%;
}

.gridItem#burlesque {
    background:
        url(images/activities/indoors/A22a.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#burlesque:hover {
    background-size: 220%;
}

.gridItem#cocktail {
    background:
        url(images/activities/indoors/A14a.png);
    background-size: 210%;
    background-position: center;
}

.gridItem#cocktail:hover {
    background-size: 220%;
}

.gridItem#extraordinary {
    background:
        url(images/activities/indoors/A33a.png);
    background-size: 210%;
    background-position: center;
}

.gridItem#extraordinary:hover {
    background-size: 220%;
}

.gridItem#haka {
    background:
        url(images/activities/culture/A24a.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#haka:hover {
    background-size: 220%;
}

.gridItem#sausage {
    background:
        url(images/activities/indoors/sausage.jpg);
    background-size: 220%;
    background-position: center;
}

.gridItem#sausage:hover {
    background-size: 230%;
}

.gridItem#themed-event {
    background:
        url(images/activities/indoors/A17a.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#themed-event:hover {
    background-size: 220%;
}

.gridItem#wellbeing {
    background:
        url(images/activities/indoors/wellbeing.jpg);
    background-size: 210%;
    background-position: 70% 50%;
}

.gridItem#wellbeing:hover {
    background-size: 220%;
}

.gridItem#trivia {
    background:

        url(images/activities/indoors/A18a.jpg);
    background-size: 210%;
    background-position: center;
}

.gridItem#trivia:hover {
    background-size: 220%;
}

/************************************/
/*       TEAM BUILDING PAGE         */
/************************************/

.mainHeader#team-building {
    background:

        url(images/activities/teambuilding/hero.jpg);
    background-position: 0% 40%;
    background-size: cover;
}

/************************************/
/*          CULTURE PAGE            */
/************************************/

.mainHeader#culture {
    background:

        url(images/activities/activities/A4.jpg);
    background-position: 0% 40%;
    background-size: cover;
}

/************************************/
/*           VENUES PAGE            */
/************************************/

.mainHeader#venues {
    background:
        url(images/conferences/venues/hero.jpg);
    background-position: 0% 50%;
    background-size: cover;
}

.rowImage {
    background: #b2b2b2;
}

.gridItem#venbeachfront {
    background:
        url(images/conferences/venues/beachfront.jpg);
    background-size: 100%;
    background-position: center;
}

.gridItem#venbeachfront:hover {
    background-size: 110%;
}

.gridItem#private {
    background:
        url(images/conferences/venues/homes.jpg);
    background-size: 100%;
    background-position: center;
}

.gridItem#private:hover {
    background-size: 110%;
}

.gridItem#hall {
    background:
        url(images/conferences/venues/hall.jpg);
    background-size: 100%;
    background-position: center;
}

.gridItem#hall:hover {
    background-size: 110%;
}

.gridItem#venvineyard {
    background:
        url(images/conferences/venues/vineyards.jpg);
    background-size: 100%;
    background-position: center;
}

.gridItem#venvineyard:hover {
    background-size: 110%;
}

.gridItem#lodge {
    background:
        url(images/conferences/venues/lodge.jpg);
    background-size: 100%;
    background-position: center;
}

.gridItem#lodge:hover {
    background-size: 110%;
}

/************************************/
/*          TRANSPORT PAGE          */
/************************************/

.gridInfo#transport {
    padding: 50px 0 10px 0;
}

.content#transport {
    padding-bottom: 40px;
}

.mainHeader#transport {
    background:
        url(images/bay-ferry.jpg);
    background-position: 0% 40%;
    background-size: cover;
}

.row {
    height: 260px;
    /* background: red; */
    width: 100%;
    display: flex;
    justify-content: center;
    font-family: 'Mada', sans-serif;
    align-items: center;
    /* background: red; */
    /* border-top: 1px solid #93abb5; */
    /* border-bottom: 1px solid #93abb5; */
}

.rowImage {
    height: 80%;
    width: 30%;
    background-position: center;
    background-size: cover;

}

.rowImage#ferry {
    background-image: url(images/fullers.jpg);
}

.rowImage#transfer {
    background-image: url(images/waiheke-executive.jpg);
}

.rowImage#charter {
    background-image: url(images/charter.jpg);
}

.rowImage#helicopter {
    background-image: url(images/heletranz.jpg);
}

.rowInfo {
    width: 30%;
    margin-left: 40px;
}

.infoTitle {
    color: #a2185b;
    font-weight: 300;
    font-size: 25px;
}

.infoDesc {
    font-weight: 200;
    font-size: 14px;
    line-height: 22px;
    margin-top: 10px;
}

/************************************/
/*        ACCOMODATION PAGE         */
/************************************/

.mainHeader#accomodation {
    background:

        url(images/conferences/accommodation/hero.jpg);
    background-position: 0% 70%;
    background-size: cover;
}

.gridItem#resort {
    background:

        url(images/resort.png);
    background-size: 100%;
    background-position: center;
}

.gridItem#apartments {
    background:

        url(images/conferences/accommodation/beachfront.jpg);
    background-size: 100%;
    background-position: center;
}

.gridItem#beach {
    background:

        url(images/beachfront.png);
    background-size: 100%;
    background-position: center;
}

.gridItem#centre {
    background:

        url(images/centre.png);
    background-size: 100%;
    background-position: center;
}

.gridItem#else {
    background:

        url(images/conferences/accommodation/outside.jpg);
    background-size: 100%;
    background-position: center;
}

.gridItem#lodges {
    background:

        url(images/lodge.png);
    background-size: 100%;
    background-position: center;
}

.gridItem#resort:hover, .gridItem#beach:hover, .gridItem#apartments:hover, .gridItem#else:hover, .gridItem#centre:hover, .gridItem#lodges:hover {
    background-size: 105%;
}

.gridItem.accomodation {
    width: 420px;
    height: 230px;
}

.gridItem.accomodation .float {
    padding-right: 30px;
}

/************************************/
/*           DINING PAGE            */
/************************************/

.mainHeader#dining {
    background:

        url(images/conferences/dining/hero.jpg);
    background-position: 0% 60%;
    background-size: cover;
}

.gridItem#vineyard {
    background:
        url(images/conferences/dining/vineyard.jpg);
    background-size: 100%;
    background-position: center;
}

.gridItem#beachfront {
    background:
        url(images/conferences/dining/beachfront.jpg);
    background-size: 100%;
    background-position: center;
}

.gridItem#award {
    background:
        url(images/conferences/dining/village.jpg);
    background-size: 100%;
    background-position: center;
}

.gridItem#casual {
    background:
        url(images/conferences/dining/functions.jpg);
    background-size: 100%;
    background-position: bottom;
}

.gridItem.dining {
    width: 420px;
    height: 230px;
}

.gridItem.dining .float {
    padding-right: 30px;
}

.gridItem#vineyard:hover, .gridItem#beachfront:hover, .gridItem#award:hover, .gridItem#casual:hover{
    background-size: 105%;
}

/************************************/
/*          CONTACT PAGE            */
/************************************/

.contact {
    width: 100%;
    height: 550px;
    /* background: rgb(247, 247, 247); */
    background: white;
}

.contactPage#final {
    display: none;
    width: 100%;
    height: 350px;
}

.contactPage#final .title {
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    margin-top: 50px;
}

.contactPage#final .desc {
    position: relative;
    text-align: center;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
}

.contactHeader {
    background:
        /* linear-gradient(20deg, rgb(8,174,234, 0.2) 0%, rgb(42,245,152, 0.2) 100%), */
        url(images/contact/hero.jpg);
    width: 100%;
    height: 500px;
    background-size: cover;
}

.contactHeader .textFloat {
    color: white;
    font-family: 'Mada', sans-serif;
    padding-top: 150px;
}

.contactHeader .textFloat .title {
    font-size: 45px;
    font-weight: 500;
}

.contactHeader .textFloat .desc {
    width: 380px;
    color: white;
    letter-spacing: 0.5px;
    font-weight: 300;
    font-size: 20px;
    margin-top: 15px;
}

.contactBox {
    background:white;
    width: 70%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    height: auto;
    margin-top: -150px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
}

.contactInformation {
    position: relative;
    width: 100%;
    background: #13406C;
    height: 80px;
    font-family: 'Mada', sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.contactInformation .title {
    color: white;
    margin-left: 15%;
    margin-top: 40px;
}

.informationItem {
    display: flex;
    width: auto;
    align-items: center;
}

.informationItem .fal {
    float: left;
    color: #9FACBB;
    font-size: 18px;
}

.informationItem .informationText {
    float: left;
    margin-left: 10px;
    line-height: 15px;
    font-size: 14px;
    color: white;
}

.enquiry {
    position: relative;
    width: 100%;
    height: auto;
}

.contactTitle {
    font-family: 'Mada', sans-serif;
    font-size: 22px;
    color: #13406C;
    font-weight: 400;
    width: 80%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height: 6%;
    margin-top: 5%;
    margin-bottom: 3%;
}

.contactTitle .fal {
    float: right;
    font-size: 30px;
    color: rgb(92,174,228);
}

.contactPage#page2, .contactPage#page3, .contactPage#page4, .contactPage#page5 {
    display: none;
}

.contactPage.hidden {
    display: none;
}

.contactPage {
    position: relative;
    width: 80%;
    /* background: red; */
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Mada', sans-serif;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
}

.contactInput {
    float: left;
    /* background: red; */
    height: 57px;
    margin: 10px 15px 10px 15px;
    width: 220px;
    flex-grow: 1;
    flex-shrink: 1;
    transition: all 0.3s;
}

.contactPage input, .contactPage select, .contactPage textarea {
    display: block;
    border: 0;
    height: 40px;
    width: 100%;
    font-family: 'Mada', sans-serif;
    border-bottom: 1px solid #EEF0F3;
    background: 0;
    font-size: 14px;
    /* background: rgb(252,252,252) */
}

.contactPage textarea {
    resize: vertical;
    max-height: 70px;
    min-height: 40px;
}

.contactPage input:focus, .contactPage textarea:focus {
    outline: 0;
    border-bottom: 1px solid #009fe3;
}

.contactInput#name, .contactInput#company, .contactInput#email, .contactInput#phone {
    width: 320px;
}

.contactInput#arrival, .contactInput#departure, .contactInput#guests, .contactInput#flexible {
    width: 150px;
}

.contactInput#comments {
    width: 500px;
}

.blueLabel {
    color: #009fe3;
}

label {
    display: block;
    top: 0;
    min-width: 100px;
    /* text-transform: capitalize; */
    font-size: 13px;
    font-weight: 400;
    color: #ADB3B9;
}

.radioText {
    float: left;
    margin-top: 11px;
}

input[type=radio] {
    float: left;
    width: 25px;
}

input[type=radio]#no {
    margin-left: 20px;
}

.contactPage .continue {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    /* background: red; */
    height: 100px;
    display: flex;
    justify-content: space-between;
    color: #13406C;
    margin-top: 15px;
    padding-bottom: 20px;
}

.contactPage .continue .more, .contactPage .continue .send {
    width: 40%;
    height: 100%;
    /* background: green; */
}

.contactPage .continue .title {
    text-align: center;
    font-size: 14px;
    margin-top: 10px;
}

.continueButton {
    position: relative;
    width: 65%;
    height: 35px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    cursor: pointer;
    line-height: 35px;
    text-align: center;
    border: 1px solid rgb(19, 64, 108, 0.5);
    font-size: 13px;
    transition: all 0.15s;
}

.continueButton:hover {
    background: rgb(19, 64, 108, 0.5);
    color: white;
}

.contactPage .continue .or {
    width: 10%;
    height: 100%;
    /* background: blue; */
    float: left;
    line-height: 100px;
    text-align: center;
    /* font-style: italic; */
    font-size: 18px;
    font-weight: 500;
}

.radioType {
    width: 120px !important;
    float: left !important;
}

.contactPage#page2 {
    /* background: blue; */
    flex-direction: column;
    height: 500px;
    justify-content: flex-start !important;
    padding-bottom: 25px;
}

.contactPage#page2 .contactInput {
    width: 200px;
    height: 70px;
    flex-grow: 0 !important;
    /* background: red; */
}

.contactPage#page4 {
    height: 500px;
    flex-direction: column;
}

.contactInput#roomLayout {
    height: 250px !important;
}

.contactPage#page5 {
    flex-direction: column;
    height: 370px;
    justify-content: flex-start !important;
}

.contactPage#page3 {
    height: 450px;
}

.contactInput#venuePreferred, .contactInput#tickets, .contactInput#budget {
    width: 430px !important;
}

#callPreferred .contactLabel {
    width: 250px;
}

.testTable, .testTable td {
    border: 1px solid black;
    border-collapse: collapse;
}

.contactPage#page5 .contactInput.tall {
    width: 350px !important;
}

.contactInput.tall {
    height: auto !important;
    width: 220px !important;
}

.contactInput.tall .inputLine {
    width: 100%;
    height: 40px;
    position: relative;
}

.contactInput.tall input {
    height: 100%;
    margin: 0;
}

.contactInput.tall .radioText {
    height: auto;
    position: relative;
    margin: 0;
    top: 50%;
    transform: translateY(-50%);
}

.continueButton.separate {
    position: absolute;
    width: 200px;
    left: 80%;
    transform: translateX(-80%);
    display: block !important;
    bottom: 20;
    color: #13406C;
}

.continueButton.separate.prev {
    left: 20%;
    transform: translateX(-20%);
}

.requiredAsterisk {
    color: #E95C36;
    margin-left: 2px;
}

.requiredBackground {
    background-color: rgb(233, 92, 54, 0.2);
}

/************************************/
/*         CHRISTMAS PAGE           */
/************************************/

.mainHeader#christmas {
    background:

        url(images/events/christmas-hero.jpg);
    background-position: 0% 60%;
    background-size: cover;
}

.content#christmas .infoDesc {
    font-size: 16px;
    line-height: 25px;
    margin-top: 0;
}

.rowInfo.left {
    margin-left: 0;
    margin-right: 40px;
}

.content#christmas .info {
    font-family: 'Mada', sans-serif;
    font-weight: 300;
    width: 70%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
}

.content#christmas .info .title {
    font-weight: 500;
}

.gridItem#entertainment {
    background:
        url(images/events/entertainment.jpeg);
    background-size: 100%;
    background-position: center;
}

.gridItem#entertainment:hover {
    background-size: 105%;
}

.row .infoDesc b {
    font-weight: 400;
}

.gridItem#dining {
    background:
        url(images/events/dining.jpg);
    background-size: 100%;
    background-position: center;
}

.gridItem#dining:hover {
    background-size: 105%;
}

.gridItem#activities {
    background:
        url(images/events/activities.jpg);
    background-size: 100%;
    background-position: center;
}

.gridItem#activities:hover {
    background-size: 105%;
}

.gridItem#tip {
    background:
        url(images/background.jpg);
    background-size: 100%;
    background-position: center;
}

.gridItem#tip:hover {
    background-size: 105%;
}

/************************************/
/*       STAG AND HENS PAGE         */
/************************************/

.mainHeader#stag {
    background:

        url(images/events/E2.jpg);
    background-position: 0% 50%;
    background-size: cover;
}

.rowImage#dining {
    background:
        url(images/events/dining.jpg);
    background-size: 100%;
    background-position: center;
}

.rowImage#activities {
    background:
        url(images/events/activities.jpg);
    background-size: 100%;
    background-position: center;
}

.rowImage#tip {
    background:
        url(images/background.jpg);
    background-size: 100%;
    background-position: center;
}

/************************************/
/*       ENTERTAINMENT PAGE         */
/************************************/

.mainHeader#entertainment {
    background:
        url(images/events/entertainment/hero.jpg);
    background-position: 0% 65%;
    background-size: cover;
}

.infoDesc li {
    list-style-type: none;
}

.open {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 13px;
}

.rowImage#technical {
    background-image: url('images/events/entertainment/tech.jpg');
}

.rowImage#stylists {
    background-image: url('images/events/entertainment/hire.jpg');
}

.rowImage#experiences {
    background-image: url('images/events/entertainment/experience.jpg');
}

.rowImage#maori {
    background-image: url('images/events/entertainment/maori.jpg');
}


/************************************/
/*        WHY WAIHEKE PAGE          */
/************************************/

.mainHeader#waiheke {
    background:

        url(images/why-waiheke/hero.jpg);
    background-position: 0% 70%;
    background-size: cover;
}

.rowImage#venues {
    background-image: url('images/why-waiheke/venues.jpg');
    background-size: cover;
}

.rowImage#accommodation {
    background-image: url('images/why-waiheke/accommodation.jpg');
    background-size: cover;
}

.rowImage#entertainment {
    background-image: url('images/why-waiheke/entertainment.jpg');
    background-size: cover;
}

.content#waiheke {
    font-family: 'Made', sans-serif;
    color: #475a62;
    height: 1150px;
}

.content#waiheke a {
    color: #009fe3;
}

.row#wide .rowInfo {
    width: 67%;
}

#whyTransport .rowInfo {
    width: 60%;
}

.row#wide {
    margin-top: 50px;
}

.content#waiheke .awards {
    position: relative;
    width: 50%;
    margin-top: 80px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}

.content#waiheke .title, .content#waiheke .desc {
    position: relative;
    width: 60%;
    font-weight: 300;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.content#waiheke .title {
    padding-top: 60px;
    font-weight: 500;
    font-size: 20px;
}

.content#waiheke .desc {
    padding-top: 10px;
    line-height: 24px;
    padding-bottom: 30px;
}

/************************************/
/*         WHAT WE DO PAGE          */
/************************************/

.mainHeader#us {
    background:
        url(images/why-us/tge.jpg);
    background-position: 0% 50%;
    background-size: cover;
}

.content#whyus .usLine {
    position: relative;
    width: 60%;
    height: auto;
    display: inline-block;
    margin-top: 0;
    /* background: red; */
}

.content#whyus .usBack > .title {
    display: none;
}

.content#whyus .box {
    /* background: blue; */
    width: auto;
    height: 40px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.content#whyus .usBack .box .icon {
    display: inline-block;
    width: 75px;
    /* background: yellow; */
    float: left;
    height: 40px;
}

.content#whyus .usBack .box .title {
    /* background: green; */
    text-align:left;
    float: left;
    padding-top: 12px;
    padding-right: 15px;
}

.content#whyus .usBack .box .desc {
    /* background: pink; */
    text-align: left;
    padding-top: 12px;
}

.clientTitle {
    text-align: center;
    font-family: 'Mada', sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: #34424f;
    margin-top: -30px;
}

.clientText {
    position: relative;
    text-align: center;
    font-family: 'Mada', sans-serif;
    font-weight: 300;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 10px;
    height: 90px;
}

.clientText .organizer {
    font-weight: 400;
    font-style: italic;
}

#clientSection {
    height: 115px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    /* background: blue; */
    padding-bottom: 30px;
}

#clientSection:hover {
    cursor: pointer;
}

.client {
    position: relative;
    float: left;
    margin-left: 15px;
    margin-right: 15px;
    text-align: center;
    /* background: red; */
    height: 90px;
}

.client:focus {
    outline:0 !important;
}

.client img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-width: 80%;
    max-height: 70%;
    margin-left: auto;
    margin-right: auto;
}

.section#photos {
    padding-top: 50px;
    background: white;
}

.section#photos .row {
    height: 350px;
    margin-top: 30px;
}

.section#photos .rowInfo {
    width: 50%;
}

.infoTitle span.title {
    font-size: 14px;
}

.rowImage#webbs {
    background-image: url(images/webbs.jpg);
    width: 20%;
}

.rowImage#lavinia {
    background-image: url(images/lavinia.jpg);
    width: 20%;
}

/************************************/
/*            404 PAGE              */
/************************************/

.notFound {
    /* background-color: #08AEEA;
    background-image: linear-gradient(20deg, #08AEEA 0%, #2AF598 100%); */

    background:
        linear-gradient(20deg, rgb(8,174,234, 0.8) 0%, rgb(42,245,152, 0.8) 100%),
        url(images/ian-schneider-41925.jpg);
    width: 100%;
    font-family: 'Mada', sans-serif;
    color: white;
    background-size: cover;
}

.notFound .number {
    padding-top: 100px;
    text-align: center;
    font-size: 90px;
    font-weight: 500;
}

.notFound .title {
    font-weight: 400;
    font-size: 25px;
    text-align: center;
}

.notFound .desc {
    font-weight: 300;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 150px;
}

/************************************/
/*          USLINE SECTION          */
/************************************/

.usBack {
    width: 100%;
    padding-bottom: 50px;
    background: white;
}

.usLine {
    position: relative;
    width: 80%;
    height: 290px;
    /* padding: 50px 0 50px 0; */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 30px;
}

.usLine .box {
    height: 130px;
    width: 200px;
    margin-left: 10px;
    margin-right: 10px;
    font-family: 'Mada', sans-serif;
}

.usLine .box .icon {
    width: 100%;
    text-align: center;
    height: 40%;
}

.usLine .box .icon img {
    height: 80%;
}

.usLine .box .icon i {
    font-size: 40px;
    color: #9F9F9F;
}

.usLine .box .desc {
    color: #9f9f9f;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
}

.usLine .box .title {
    color: #a2185b;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
}

.usBack .title {
    text-align: center;
    color: black;
    font-family: 'Mada', sans-serif;
    font-weight: 500;
    font-size: 20px;
}

.gridItem#filler .usBack > .title {
    display: none;
}

.gridItem#filler .usBack .box .desc {
    display: none;
}

.gridItem#filler .usBack .usLine {
    display: inline-block;
}

.gridItem#filler .usBack .box {
    position: relative;
    width: 100%;
    left: 0;
    height: 28px;
    margin-bottom: 12px;
    margin-left: -20px;
}

.gridItem#filler .usBack .box .icon {
    /* background: yellow; */
    width: 100px;
    float: left;
    height: 28px;
    width: 55px;
}

.gridItem#filler .usBack .box .icon .fas {
    font-size: 28px;
    color: white;
}

.gridItem#filler .usBack .box .icon img {
    height: 100%;
    content:url("/images/why-us/waiheke-white.svg");
}

.gridItem#filler .usBack .box .title {
    /* background: pink; */
    display: inline-block;
    float: left;
    color: white;
    margin-top: 5px;
    margin-left: 10px;
}

.gridItem#filler .usBack {
    background: 0;
}

/************************************/
/*          ENQUIRY ACTION          */
/************************************/

.enquiryAction {
    display: inline-block;
    width: 100%;
    height: 100px;
    background: #F2F2F2;
    background-position: center;
    background-size: 100%;
    text-align: center;
    font-family: 'Mada', sans-serif;
    font-weight: 300;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
}

.enquiryAction .desc {
    padding-top: 25px;
    font-size: 14px;
    color: #596B72;
}

.enquiryAction .line {
    height: 1.5px;
    width: 300px;
    background: white;
    margin: 5px auto 5px auto;
}

.enquiryAction .title {
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    color: #A8346A;
}

/************************************/
/*          MEDIA QUERIES           */
/************************************/

@media (max-width: 1110px) {
    .main .float {
        width: 95%;
    }
    .main .phrase {
        font-size: 37px;
    }
    .cinzLink {
        display: none;
    }
    .grid {
        width: 80%;
    }
    .gridItem {
        width: 23%;
        height: 300px;
    }

    .details .title {
        font-size: 16px;
    }

    .details .description {
        font-size: 13px;
    }

    .details .information .infoRow {
        font-size: 14px;
        margin-top: 5px;
    }
}

@media (max-width: 865px) {
    .rowInfo {
        width: 350px;
    }
    .details .information .infoRow:last-child {
        display: none;
    }
    .footer .experiences, .footer .information {
        display: none;
    }
    .mainHeader {
        height: 170px;
    }
    .gridText .title {
        width: 135px;
    }
    .gridItem {
        background-size: cover !important;
    }
    .usLine {
        height: auto;
    }
    .usLine .box {
        height: 100px;
        width: 180px;
        margin-left: 5px;
        margin-right: 5px;
        font-family: 'Mada', sans-serif;
    }
    .usLine .box .icon {
        height: 40%;
    }
    .usLine .box .icon i {
        font-size: 30px;
        color: #9F9F9F;
    }
    .usLine .box .desc {
        font-size: 11px;
    }
    .usLine .box .title {
        font-size: 12px;
    }
    .contactBox {
        width: 100% !important;
    }
    .contactHeader {
        height: 450px;
    }
    .contactHeader .textFloat {
        margin-left: 0 !important;
        padding-top: 100px;
    }
    .contactHeader .textFloat .title, .contactHeader .textFloat .desc {
        text-align: center;
        width: 100%;
    }
    .contactInformation {
        height: 30px;
    }
    .contactInformation .informationItem {
        display: none;
    }
    .contactPage {
        width: 95%;
        overflow-x: hidden;
    }
    .contactPage .continue {
        width: 90%;
    }
    .contactPage .continueButton {
        width: 130px;
    }
    .contactInput {
        width: auto !important;
        margin: 5px 5px 5px 5px;
    }
    .contactInput.tall {
        width: 180px !important;
    }
    .contactInput#venuePreferred, .contactInput#tickets, .contactInput#budget {
        width: 200px !important;
    }
    .contactPage#page4 {
        height: 650px;
        flex-direction: row;
    }
    .contactPage#page5 {
        flex-direction: row;
        height: 700px;
    }
    .contactInput#anyoneElse {
        margin-top: 50px;
    }
    .g-recaptcha {
        margin-top: 30px;
    }
    .section#photos .row {
        width: 100%;
    }
    .section#photos .row .rowInfo {
        width: 100%;
    }
    .section#photos .row .rowImage {
        display: none;
    }
}

@media (max-width: 693px) {
    .gridItem {
        height: 230px;
        background-size: cover !important;
    }

    .gridInfo .description {
        width: 85%;
    }
    .subFooter .social {
        display: none;
    }

    .main .navigation {
        width: 90%;
    }

    .header .navigation {
        display: none;
    }

    .logo#headerLogo {
        padding-right: 0;
        margin-left: 70px;
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header .fa-bars {
        display: inline-block;
    }

    .address {
        display: none;
    }

    .footer {
        height: 280px;
    }

    .logo#footerLogo {
        display: none;
    }

    .footer > .float {
        top: 20;
        display: inline-block;
    }

    .subFooter {
        position: absolute;
        height: 100px;
    }

    .subFooter > .float {
        position: absolute;
        top: 15;
        left: 50%;
        transform: translateX(-50%);
    }

    .email {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    .contactInfo {
        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        line-height: 20px;
    }

    .phrase {
        margin-top: 180px;
    }

    .main {
        height: 540px;
        background:
            url(images/background.jpg);
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
    }

    .dropDown .triangle {
        display: none;
    }

    .main .navigation {
        display: inline-block;
        position: relative;
        width: 100%;
        left: 0;
        transform: none;
    }

    .main .navigation .navigationBox {
        position: relative;
        width: 100%;
    }

    .main .navigation .navigationBox .navigationItem {
        width: 100%;
        border-radius: 0;
        padding: 10px 0 8px 0;
        box-shadow: none !important;
        background: white;
    }

    .main .navigation .navigationBox {
        height: 72px;
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
    }

    .main .navigation .navigationBox .dropDown {
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 31px;
        background: rgba(255,255,255,0.8);
    }

    .main .navigation .navigationBox .dropDown .box {
        position: relative;
        padding: 0;
        display: inline-block;
        left: 50%;
        transform: translateX(-50%);
        background: none;
        text-align: center;
        width: auto;
    }

    .main .navigation .navigationBox .dropDown a {
        width: auto;
        margin: 5px 15px 5px 15px;
    }

    .main .navigation .navigationBox .dropDown a:hover {
        color: #009fe3;
    }

    .main .navigation .navigationBox .dropDown .line {
        display: none;
    }
    .gridText .arrow {
        display: none;
    }
    .gridText .title {
        width: 90%;
        text-align: center;
        top: 40%;
        background: rgba(0,0,0,0.4);
        left: 50%;
        transform: translateX(-50%);
        font-size: 18px;
        line-height: 22px;
    }
    .gridText {
        top: 0;
    }
    .details .information .infoRow {
        display: none;
    }
    .logo {
        height: 130px;
    }
    .logo#headerLogo {
        margin-top: 75px;
        padding-right: 100px;
    }

    .header .fa-bars {
        font-size: 22px;
    }

    .headerSidebar {
        font-size: 10px;
    }

    .header {
        height: 55px;
    }
}

@media (max-width: 462px) {
    .logo {
        height: 117px;
    }
    .header {
        display: inline-block;
        height: 50px;
    }
    .logo#headerLogo {
        position: absolute;
        margin-top: 0;
        padding-right: 0;
    }
    .header .headerSidebar {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -20px;
    }
    .details .description {
        width: 100%;
        font-size: 12px;
    }
    .details .float {
        padding-right: 10px;
        left: 10px;
    }
    .details .fa-times {
        top: 10px;
        right: 10px;
    }
    .gridInfo .title {
        position: relative;
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
    }

    .gridText .title {
        top: 50%;
    }

    .gridItem {
        width: 90%;
        height: 130px;
    }

    .phrase {
        font-size: 25px !important;
        margin-top: 100px;
    }

    .main .navigation .navigationBox .dropDown a {
        margin: 5px 5px 5px 5px;
    }
    .usLine .box {
        width: 40%;
    }
    .mainHeader .float {
        width: 90%;
        margin-top: 30px;
    }
    .mainHeader .title {
        font-size: 40px;
    }
    .usLine .box {
        width: 120px;
        margin-top: 20px;
    }
    .row {
        /* background: blue; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
        margin-top: 20px;
    }
    .rowImage {
        background-repeat: no-repeat !important;
        width: 50%;
        height: 100px;
    }
    .rowInfo {
        /* background: green; */
        margin: 0;
        margin-top: 10px;
        text-align: center;
    }
    .usBack .usLine {
        width: 90% !important;
    }
    .usBack .box {
        width: 300px !important;
        position: relative;
        left: 45% !important;
        transform: translateX(-50%) !important;
    }
    .usBack .box .desc {
        width: 300px !important;
        padding-top: 17px !important;
    }
    .usBack .box .title {
        padding: 0 !important;
    }
    .usBack .box .icon {
        height: 100% !important;
    }
    #clientSection {
        margin-top: 80px;
    }
}