.project-section {
    padding: 30px 0;
}

@media screen and (min-width: 770px) {
    .project-section {
        padding: 30px 0 50px 0;
    }
}

@media screen and (min-width: 1600px) {
    .project-section {
        padding: 30px 0 75px 0;
    }
}

#country-list {
    text-align: center;
    margin: 0 auto 50px auto;
    padding-left: 0;
}

#country-list li {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    margin: 0 20px;
    border-bottom: 3px solid transparent;
}

#country-list li img {
    width: 64px;
}

#country-list li:hover,
#country-list li.active {
    border-bottom: 3px solid #06c;
}

#country-list li.no-projects {
    opacity: 0.2;
}

#country-list li.no-projects:hover {
    border-bottom: 3px solid transparent;
    cursor: no-drop !important;
}

#projects {
    margin: 0 auto;
    text-align: center;
    width: 88%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#application-list {
    width: 80%;
    max-width: 350px;
    margin: 0 auto 50px auto;
}

@media screen and (min-width: 1600px) {
    #projects {
        width: 80%;
    }
}

.project-box {
    flex-basis: 350px;
    margin: 1em;
    position: relative;
}

.project-box-image-container {
    text-align: center;
    background-color: #d1d4d9;
    display: flex;
    position: relative;
    padding-top: 56.25%;
}

.project-box-image-container div.zoom {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.project-box h4 {
    margin-top: 5px;
    text-align: left;
    font-size: 1.4em;
}

.project-box .flag {
    width: auto;
    height: 25px;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1000;
}

.project-box .case-study {
    width: auto;
    position: absolute;
    top: 10px;
    left: 15px;
    z-index: 1000;
    color: #000;
    text-align: left;
    text-shadow: 0 0 5px #666666;
}

.project-box .case-study h3 {
    color: #fff;
    font-size: 1em;
}

.project-box .photo {
    width: 100%;
    height: 56.25%;
}

.project-box:link,
.project-box:visited,
.project-box:hover,
.project-box:active {
    color: #333;
}

#project {
    background-color: #FFF;
    background-image: url(/asset/media/loading.gif);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 30px 30px;
}

#project h2,
#project h3 {
    color: #06C;
    font-weight: bold;
    line-height: 1em;
    text-transform: uppercase;
}

#project h3#location {
    color: #333;
    margin-top: 5px;
    font-weight: 300;
}

#project h2 {
    font-size: 1.6em;
}

#project h3 {
    font-size: 1.2em;
    margin-bottom: 20px;
}

#project-wrapper {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: 50% 50%;
    background-color: #FFF;
}

#project-wrapper .mobile-detector {
    display: block;
}

#details {
    box-sizing: border-box;
    padding: 30px;
    position: relative;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

#details #company-logo {
    display: none;
}

#details #applications-covered {
    box-sizing: border-box;
    margin-top: 10px;
    margin-left: 0;
    margin-right: 0;
}

#details #applications-covered h3 {
    margin-bottom: 10px;
}

#details #applications-covered ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#details #applications-covered li {
    display: block;
    float: left;
    font-size: 0.8em;
    margin: 0 5px 5px 0;
}

#details #applications-covered li a {
    padding: 5px 10px;
    background-color: #06F;
    color: #FFF;
    display: block;
    text-transform: uppercase;
}

#details #applications-covered li a:hover {
    background-color: #333;
}

#quote-wrapper {
    background-color: #333;
}

#quote {
    box-sizing: border-box;
    max-width: 1000px;
    padding: 50px;
    text-align: center;
    margin: 0 auto;
}

#quote p {
    color: #fff;
    margin: 0;
    font-weight: 300;
    margin-bottom: 10px;
}

#quote ol {
    color: #fff;
    text-align: left;
    margin: 25px auto;
    width: 100%;
}

#quote ol li {
    color: #fff;
    padding-left: 20px;
}

#quote p.quote-name {
    font-weight: 600;
}

#quote p.quote-job-title {
    font-size: 0.8em;
}

#gallery-wrapper {
    overflow: hidden;
    position: relative;
    background: #333 url(/asset/media/loading.gif) no-repeat center center;
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}

#gallery {
    width: 100%;
    height: 100%;
}

#gallery-window .galleryImage {
    background-color: #333;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    z-index: 12;
}

#gallery-window .galleryImage.active {
    z-index: 10;
    display: block;
}

#products-wrapper {
    background-color: #06C;
    padding: 30px 0;
}

#products-wrapper h3 {
    color: #FFF;
    text-align: center;
    margin: 20px auto;
    width: 88%;
}

#products {
    margin: 20px auto 0 auto;
    max-width: 1400px;
    width: 88%;
    text-align: center;
}

#products p.small {
    font-size: 0.8em;
}

#systems-wrapper {
    padding: 30px 0;
}

#systems-wrapper h3 {
    color: #333;
    margin: 0 20px 30px 20px;
    text-align: center;
}

#systems {
    margin: 0 auto;
    width: 88%;
}

#systems .system {
    background-color: #FFF;
    background-size: 75px 75px;
    background-position: center 20px;
    background-repeat: no-repeat;
    box-sizing: border-box;
    box-shadow: 0 4px 40px -2px rgba(0, 0, 0, 0.2);
    float: left;
    max-width: 500px;
    margin: 15px 0;
    padding: 20px;
    text-align: center;
    width: 100%;
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}

#systems .system.smart {
    background-image: url(/shared/media/projects/controls/smart.svg);
}

#systems .system.smartscan {
    background-image: url(/v4/img/controls/icons/smartscan.svg);
}

#systems .system.smart-external {
    background-image: url(/shared/media/projects/controls/smart-external.svg);
}

#systems .system.smartscan-radar {
    background-image: url(/shared/media/projects/controls/smartscan-radar.svg);
}

#systems .system.smart-lcm {
    background-image: url(/shared/media/projects/controls/smart-lcm.svg);
}

#systems .system.eco {
    background-image: url(/shared/media/projects/controls/eco.svg);
}

#systems .system.smart-tr {
    background-image: url(/shared/media/projects/controls/smart-tr.svg);
}

#systems .system.commissioning {
    background-image: url(/shared/media/projects/controls/commissioning.svg);
}

#systems .system.autotest {
    background-image: url(/shared/media/projects/controls/autotest.svg);
}

#systems .system.scanlight-at {
    background-image: url(/shared/media/projects/controls/scanlight-at.svg);
}

#systems .system h4 {
    text-transform: uppercase;
    font-weight: bold;
    color: #333;
    margin: 90px 0 15px 0;
}

#systems .system p {
    padding: 5px 0 0 0;
    margin: 0;
    font-size: 1.1em;
}

#projects-bottom-margin {
    height: 150px;
    clear: both;
}

/******************* CASE STUDY ************************/
#the-challenge {
    background-color: #f1f4f9;
    padding: 75px 30px 50px 30px;
}

#the-solution {
    background-color: #fff;
}

#the-challenge,
#the-solution {
    position: relative;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

#the-challenge-content,
#the-solution-content {
    margin: 0 auto;
}

#the-solution {
    padding: 50px 30px;
}

#the-challenge h2,
#the-solution h2 {
    font-weight: bold;
    color: #06c;
    text-align: center;
    margin-bottom: 50px;
}

#case-study-boxes {
    text-align: center;
    background-color: #fff;
    padding-bottom: 50px;
}

#case-study-boxes div {
    display: inline-block;
    vertical-align: top;
    width: 250px;
    margin: 20px;
    padding: 20px 35px;
    height: 250px;
    text-align: left;
    box-sizing: border-box;
    background: linear-gradient(to bottom left, #06c, #00478d);
}

#case-study-boxes div h4 {
    color: #fff;
    text-transform: uppercase;
    font-size: 1.3em;
    margin-top: 10px;
    margin-bottom: 0;
}

#case-study-boxes div img {
    height: 65px;
}

#case-study-boxes div#energy-saving-box {
    background: linear-gradient(to bottom left, #a2c03b, #657d28);
}

#case-study-boxes div#energy-saving-box p,
#case-study-boxes div#roi-box #roi-title {
    font-size: 3.5em;
    font-weight: bold;
    margin: 0;
    color: #fff;
}

#case-study-boxes div#roi-box #roi-number {
    font-size: 2.7em;
    margin: 0;
    color: #fff;
}

#case-study-boxes #energy-saving-box h4 {
    color: #fff;
    font-weight: bold;
}

@media screen and (min-width: 560px) {
    #systems {
        width: 530px;
    }

    #systems .system {
        background-size: auto 100%;
        background-position: top left;
        height: 140px;
        margin: 15px;
        text-align: left;
    }

    #systems .system h4 {
        text-align: left;
        margin: 0 0 0 30%;
    }

    #systems .system p {
        margin-left: 30%;
    }

    #the-challenge-content,
    #the-solution-content {
        max-width: 830px;
        margin: auto;
    }
}

@media screen and (min-width: 650px) {
    #quote ol {
        width: 50%;
    }
}

@media screen and (min-width: 1090px) {
    #systems {
        width: 1060px;
    }
}

@media screen and (min-width: 1200px) {
    #project-wrapper {
        -ms-grid-columns: 50% 50%;
        grid-template-columns: 50% 50%;
        -ms-grid-rows: 100%;
    }

    #project-wrapper .mobile-detector {
        display: none;
    }

    #gallery-wrapper {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }

    #details {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        height: 100%;
    }

    #products-wrapper {
        padding: 50px 0;
    }

    #products {
        margin: 30px auto 0 auto;
    }
}

@media screen and (min-width: 1500px) {
    #details {
        padding: 75px 75px 175px 75px;
    }

    #details h2,
    #details h3 {
        width: 70%;
    }

    #project h2 {
        font-size: 2em;
    }

    #project h3 {
        font-size: 1.6em;
        margin-bottom: 40px;
    }

    #project p {
        font-size: 1.1em;
    }

    #details #company-logo {
        display: block;
        position: absolute;
        right: 75px;
        top: 75px;
    }

    #details #company-logo img {
        max-width: 200px;
        max-height: 70px;
    }

    #details #applications-covered {
        position: absolute;
        bottom: 75px;
        width: 100%;
    }

    #details #applications-covered h3 {
        font-size: 1.4em;
        width: 100%;
    }

    #details #applications-covered li {
        font-size: 0.8em;
    }

    #quote {
        text-align: center;
        width: 100%;
    }

    #products-wrapper {
        padding: 75px 0;
    }

    #products {
        margin: 40px auto 0 auto;
    }

    #systems-wrapper {
        padding: 75px 0;
    }
}

@media screen and (min-width: 2000px) {
    #details {
        padding: 100px 100px 200px 100px;
    }

    #project h2 {
        font-size: 2.6em;
    }

    #project h3 {
        font-size: 1.8em;
        margin-bottom: 30px;
    }

    #project p {
        font-size: 1.2em;
    }

    #details #company-logo {
        right: 100px;
        top: 100px;
    }

    #details #company-logo img {
        max-width: 200px;
        max-height: 80px;
    }

    #details #applications-covered h3 {
        font-size: 1.4em;
        width: 100%;
    }

    #details #applications-covered li {
        font-size: 1em;
    }
}

@media screen and (min-width: 2400px) {
    #project h3 {
        font-size: 1.8em;
        margin-bottom: 80px;
    }

    #details #company-logo img {
        max-width: 250px;
        max-height: 120px;
    }
}

#gallery #next,
#gallery #prev {
    cursor: pointer;
    height: 75px;
    margin-top: -37.5px;
    opacity: 1;
    position: absolute;
    top: 50%;
    width: 75px;
    z-index: 13;
}

#gallery #next {
    right: 0;
}

#gallery #prev {
    left: 0;
}

@media screen and (min-width: 770px) {
    #gallery #next,
    #gallery #prev {
        margin-top: -50px;
        opacity: 0;
    }

    #gallery #next {
        height: 100px;
        right: -40px;
        width: 100px;
    }

    #gallery #prev {
        height: 100px;
        left: -40px;
        width: 100px;
    }
}

@media screen and (min-width: 1150px) {
    #gallery #next,
    #gallery #prev {
        height: 150px;
        margin-top: -75px;
        width: 150px;
    }
}

@media screen and (min-width: 2000px) {
    #gallery #next,
    #gallery #prev {
        height: 200px;
        margin-top: -100px;
        width: 200px;
    }
}