body { color: #FFF; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 400; }
body.nav-active { overflow-y: scroll; position: fixed; width: 100%; }
.container { margin: 0 auto; max-width: 1400px; }
h1, h2, h3, h4, h5 { color: #FFF; font-family: Arial, Helvetica, sans-serif; font-weight: 700; }
h1 { color: #0E0E0E; font-family: 'Open Sans', sans-serif; font-size: 18px; text-align: center; text-transform: uppercase; }
h2 { font-size: 52px; }
h3 { font-size: 38px; }
h4 { font-size: 25px; }
h5 { font-size: 23px; font-weight: 400; }
.btn { background: #FFF; border-color: #FFF; color: #A10D0D; padding: 25px 50px; text-transform: uppercase; }
.btn.btnImpact { background: transparent; color: #FFF; padding: 10px 30px; }
.btn:hover { background: #A10D0D; border-color: #A10D0D; color: #FFF; }
.btn.btnImpact:hover { background: #FFF; border-color: #FFF; color: #A10D0D; }
.colsTwoFifths .col { float: left; margin-right: 2%; width: 39%; }
.colsTwoFifths .endCol { margin-right: 0; width: 59%; }
.flex { display: flex; }
.col.flex { flex-direction: column; justify-content: center; }

@media screen and (max-width: 1024px) {
    h2 { font-size: 38px; }
    h3 { font-size: 25px; }
    h4 { font-size: 23px; }
    h5 { font-size: 18px; }
}

@media screen and (max-width: 760px) {
    .cols.flex { display: block; margin-bottom: 0; }
    .colsTwoFifths .col { float: none; margin-right: 0; width: 100%; }
}

header { position: relative; }
header h1 { margin-top: 20px; }
.logo { background: url(../benchmarking/_img/logo_temp.png) no-repeat 0 0; border: 0; height: 60px; left: 10px; margin-top: -30px; position: absolute; top: 50%; width: 270px; }
#nav-toggle { display: block; margin-top: -9px; position: absolute; right: 22px; top: 50%; z-index: 100; }
#nav-toggle .nav-label { color: #0E0E0E; cursor: pointer; font-size: 14px; font-weight: 600; padding: 2px 38px 0 0; position: absolute; right: 0; text-transform: uppercase; }
.nav-active #nav-toggle .nav-label { display: none; }
#nav-toggle #nav-burger { cursor: pointer; height: 19px; position: relative; -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; width: 25px; }
#nav-toggle #nav-burger span { background: #000; display: block; height: 3px; left: 0; opacity: 1; position: absolute; -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out; width: 100%; }
#nav-toggle #nav-burger span:nth-child(1) { top: 0; }
#nav-toggle #nav-burger span:nth-child(2), #nav-toggle #nav-burger span:nth-child(3) { top: 8px; }
#nav-toggle #nav-burger span:nth-child(4) { top: 16px; }
#nav-toggle #nav-burger.open span { background: #fff; }
#nav-toggle #nav-burger.open span:nth-child(1), #nav-toggle #nav-burger.open span:nth-child(4) { left: 50%; top: 12px; width: 0%; }
#nav-toggle #nav-burger.open span:nth-child(2) { -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#nav-toggle #nav-burger.open span:nth-child(3) { -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.menu { color: #FFF; max-height: 100%; min-height: 100%; max-width: 100%; overflow: auto; position: fixed; right: -380px; -webkit-transition: all 300ms ease-out; transition: all 300ms ease-out; top: 0; width: 380px; z-index: 99; }
.nav-active .menu { right: 0; }
.menu ul { background: #0E0E0E; box-shadow: 0 0 10px 5px rgba(0,0,0,0.1); float: right; list-style: none; margin: 0; max-width: 100%; padding: 65px 0 0; width: 380px; }
.menu li { border-bottom: solid 1px #5D5D5D; clear: right; margin: 0; position: relative; }
.menu li a.compareProject { background: url(/benchmarking/_img/_ico/cp-graph.svg) no-repeat 0 50%/22px 22px; }
.menu li a.regionReports { background: url(/benchmarking/_img/_ico/region-pin.svg) no-repeat 0 50%/22px 22px; }
.menu li a.resources { background: url(/benchmarking/_img/_ico/resources.svg) no-repeat 0 50%/22px 22px; }
.menu li a.about { background: url(/benchmarking/_img/_ico/about.svg) no-repeat 0 50%/22px 22px; }
.menu li a.glossary { background: url(/benchmarking/_img/_ico/glossary.svg) no-repeat 0 50%/22px 22px; }
.menu li a.contact { background: url(/benchmarking/_img/_ico/contact.svg) no-repeat 0 50%/22px 22px; }
.menu a { color: #FFF; display: block; font-size: 21px; font-weight: 700; margin: 25px 50px 25px 40px; padding: 0 0 0 40px; }
.menu a span { border-bottom: 2px solid transparent; -webkit-transition: all 0.15s linear; transition: all 0.15s linear; }
.menu p { color: #cbcbcb; font-size: 14px; padding: 0 40px 30px; }
.menu ul ul { max-height: 0; overflow: hidden; padding: 0; position: relative; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
.menu ul ul.active { margin-bottom: 15px; max-height: 300px; }
.menu ul ul li { border: 0; }
.menu ul ul a { font-size: 14px; margin: 0; padding: 0 40px 15px; text-transform: uppercase; }
.menu ul ul a span { border-bottom: 1px solid transparent; }
.toggleSubnav { background: url(/benchmarking/_img/open-close.svg) no-repeat 0 0; cursor: pointer; float: right; height: 21px; position: absolute; right: 24px; -webkit-tap-highlight-color: transparent; top: 0; width: 21px; z-index: 4; }
.toggleSubnav.active { background-position: 0 100%; }
.menu li.register { background-color: #31686B; padding-top: 1px }
.menu li.register a { border-bottom: 0; background: url(/img/register.svg) no-repeat 0 50%/22px 22px; }
.button-register {
    display: block;
    position: absolute;
    top: 50%;
    right: 130px;
    margin-top: -21px;
    z-index: 99;
    border-color: #31686B;
    background: #31686B;
    color: white;
    border-radius: 10px;
    line-height: 1.5em;
    padding: 10px;
    cursor: pointer;
    white-space: nowrap;
}
.button-fbs {
    
    position: absolute;
    top: 50%;
    left: 150px;
    margin-top: -21px;
    z-index: 99;
    border-color: #ffd800;  /* Different color */
    background: #ffd800;    /* Different color */
    color: black;
    border-radius: 10px;
    line-height: 1.5em;
    padding: 10px;
    cursor: pointer;
    white-space: nowrap;
	padding: 17px 24px 16px;
    line-height: 1em;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.933em;
    font-family: Arial, Sans-Serif;
    }
    
.button-fbs a {
        color: black;
        text-decoration: none !important;
    }

/* Media query for screens smaller than 768px (typical mobile devices) */
@media (max-width: 768px) {
    .button-register {
        transform: scale(0.7); /* Scale down the button to 70% of its original size */
		right: 50px;
    }
}
/* Adjust for better fit on iPhone SE */
@media (max-width: 375px) and (max-height: 667px) {
    .button-register {
        transform: scale(0.6); /* Scale down the button to 60% of its original size */
        right: 50px; 
    }
}
.button-register a { color: white; border-bottom: 0 }

@media (max-width: 768px) {
    .button-fbs {
        transform: scale(0.7); /* Scale down the button to 70% of its original size */
		right: 50px;
    }
}
/* Adjust for better fit on iPhone SE */
@media (max-width: 375px) and (max-height: 667px) {
    .button-fbs {
        transform: scale(0.6); /* Scale down the button to 60% of its original size */
        right: 50px; 
    }
}
.button-fbs a { color: black; border-bottom: 0 }


footer { background: #3A3A3A; color: rgba(240,240,240,0.52); font-size: 12px; padding: 60px 50px; }
footer a { border-bottom: none; }
footer img { margin-bottom: 25px; margin-right: 55px; }

.background1, .background2, .background3, .background4, .background5, .background6 { background: no-repeat center/cover; height: 100%; padding: 30px; position: relative; }
.background1 .btn, .background2 .btn, .background4 .btn, .background5 .btn, .background6 .btn { bottom: 0; position: absolute; right: 0; }
.background3 .btn { float: left; text-align: center; width: 200px; }
.background3 .btn:first-of-type { margin-right: 15px; }
.background1 { background-image: url(../img/countryside.jpg); }
.background2 { background-image: url(../img/sheep.jpg); margin-bottom: 4%; }
.background3 { background-image: url(../img/calc-pnl.png);  }
.background4 { background-image: url(../img/wheat.jpg); }
.background5 { background-image: url(../img/laptop.jpg); }
.background6 { background-image: url(../img/tutor.jpg); }
.background1 h2 { margin-top: 150px; padding-right: 33%; }
.background1 h4 { margin-bottom: 100px; padding-right: 33%; }
.background2 h3, .background3 h3 { margin-top: 30px; padding-right: 67%; }
.background2 h5, .background3 h5 { margin-bottom: 60px; padding-right: 33%; }
.background3 h5 { margin-bottom: 15px; }
.background4 h3, .background5 h3, .background6 h3 { margin-top: 80px; padding-right: 67%; }
.background4 p, .background5 p, .background6 p { margin-bottom: 40px; }
.background4 .btn, .background5 .btn, .background6 .btn { padding: 20px 40px; }

/* = Popup windows
----------------------------------------------------------------------------------------------------------------- */
.popupContainer { display: none; z-index: 9999; position: absolute; }
.popup_window { position: fixed; top: 0; left: 0; display: table; width: 100%; height: 100%; transition: all 0.75s ease-out; -webkit-transition: all 0.75s ease-out; }
.popup_inner { display: table-cell; vertical-align: middle; text-align: center; }
.popup_content { max-width: 400px; margin: 0 auto; text-align: left; transition: top 0.5s ease-in-out; }

.popup_open .popup_content { opacity: 1; top: 0; }
.popup_content h1 { margin-bottom: 30px; color: #fff; font-size: 3.2em; line-height: normal; }
.popup_content .btn { margin-top: 10px; }

.popup_window.popup_UK.open,
.popup_window.popup_helper.open { top: 0; }

.popup_close { position: absolute; top: 20px; right: 24px; height: 20px; width: 20px; background: url(../img/menu-close.svg) no-repeat center center; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }
.popup_close { z-index: 1; }
.popup_close.black_cross { background: url(../img/close_black.svg) no-repeat center center; }
.no-svg .popup_close.black_cross { background-image: url(../img/close_black.png); }

.popup_UK, .popup_EU { background: #000; background-size: cover; }

.popup_helperContainer { height: 100%; width: 100%; display: none; position: absolute; top: 0; left: 0; z-index: 999; }
.popup_helper { display: table; background: transparent repeat; }
.popup_helper .popup_content { max-width: 400px; background: #fff no-repeat center 60px; padding: 160px 40px 40px; text-align: center; color: black; }
.popup_warning .popup_content { max-width: 480px; padding: 50px 40px 40px; background: #fff; text-align: center; max-height: 100%; overflow: auto; }

.openPopupUK, openPopupEU { cursor: pointer; }

.popup_joinSurveyContainer { height: 100%; width: 100%; display: none; position: absolute; top: 0; left: 0; z-index: 999;
    border: 5px #31686B;
}
.popup_helper .popup_content.no-image { background: #fff; padding: 30px 40px 20px; }

.popup_joinSurveyContainer .popup_helper .popup_content {
    border: 5px solid #31686B;
}

.popup_joinSurveyContainer .popup_helper .popup_content .btnPopup {
    border-color: #31686B;
    background: #31686B;
    color: white;
    border-radius: 10px;
    line-height: 1.5em;
    padding: 8px 50px;
}

@media screen and (max-width: 1350px) {
    header h1 { text-align: left; padding-left: 20px; }
}

@media screen and (max-width: 1020px) {
    .background1 h2, .background1 h4 { padding-right: 0; }
    .background2 h3, .background3 h3, .background2 h5, .background3 h5, .background4 h3, .background5 h3, .background6 h3 { padding-right: 50%; }
}

@media screen and (max-width: 800px) {
    header h1 { display: none; }
    .btn { padding: 15px 40px; }
    header { padding-top: 60px; }
    .background1, .background2, .background3, .background4, .background5, .background6 { margin-bottom: 30px; }
    .background1 h2, .background1 h4, .background2 h3, .background3 h3, .background2 h5, .background3 h5, .background4 h3, .background5 h3, .background6 h3 { padding-right: 30px; }
    .background4 .btn, .background5 .btn, .background6 .btn { padding: 10px 30px; }
}

@media screen and (max-width: 480px) {
    .background3 .btn:first-of-type { margin-bottom: 15px; }
    .background3 .btn:last-of-type { clear: left; }
}