@font-face {
	font-family: 'HelveticaNeueLTPro';
	src: url('assets/fonts/HelveticaNeueLTPro-Cn.woff'); 
	src: 
		local('HelveticaNeueLTPro-Cn'),
		local('HelveticaNeueLTPro-Cn'),
		url('assets/fonts/HelveticaNeueLTPro-Cn.woff'), 
		format('woff');
    font-style: normal;
    font-display: swap;
    }
    

@font-face {
	font-family: 'HelveticaNeueLTPro';
	src: url('assets/fonts/HelveticaNeueLTPro-MdCn.woff'); 
	src: 
		local('HelveticaNeueLTPro-MdCn'),
		local('HelveticaNeueLTPro-MdCn'),
		url('assets/fonts/HelveticaNeueLTPro-MdCn.woff'), 
		format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    }

@font-face {
	font-family: 'HelveticaNeueLTPro';
	src: url('assets/fonts/HelveticaNeueLTPro-BlkCn.woff'); 
	src: 
		local('HelveticaNeueLTPro-BlkCn'),
		local('HelveticaNeueLTPro-BlkCn'),
		url('assets/fonts/HelveticaNeueLTPro-BlkCn.woff'), 
		format('woff');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    }

* {
    font-family: "HelveticaNeueLTPro";   
}

html,
body {
    font-size: 16px;
    height: 100%;
    color: #000000;
}

img {
    height: auto;
}

.large-pad {
    padding-left: 5%;
    padding-right: 5%;
}

.pad-left {
    padding-left: 5%;
}

.pad-right {
    padding-right: 5%;
}

.pad-left-7 {
    padding-left: 7.5%;
}

.margin-top {
    margin-top: 4rem;
}

.margin-bottom {
    margin-bottom: 4rem;
}

@media (max-width:1199px) {
    .large-pad {
        padding-left: 30px;
        padding-right: 30px;
    }
    .pad-left, .pad-left-7 {
        padding-left: 30px;
    }
    .pad-right {
        padding-right: 30px;
    }
}

@media (max-width:767px) {
    .large-pad {
        padding-left: 15px;
        padding-right: 15px;
    }
    .pad-left, .pad-left-mobile, .pad-left-7 {
        padding-left: 15px;
    }
    .pad-right, .pad-right-mobile {
        padding-right: 15px;
    }
    .margin-top {
        margin-top: 2rem;
    }
    .margin-bottom {
        margin-top: 2rem;
    }
}

a, a:hover {
    text-decoration: none;
}

ul {
    list-style-type: none;
}

h1, h2 {
    font-size: 3.1rem;
    font-weight: 700;
}

p {
    font-weight: 500;
}

h4 {
    font-size: 2rem;
}

/* HERO */

.img-hero-left {
    object-fit: cover;
    object-position: center left;
    width: 100%;
    height: 100%;
}

.img-hero-right {
    object-fit: cover;
    object-position: right;
    width: 100%;
    height: 100%;
}

.hero-left h1, .advice-section h2 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    text-transform: uppercase;
    font-size: 2.4vw;
    margin-bottom: 0;
}

.img-packshot {
    position: absolute;
    top: 20%;
    left: 0;
}

.hero-left {
    width: 39%;
}

.hero-center {
    width: 24.5%;
}

.hero-right {
    width: 36.5%;
}

.hero-left, .hero-right {
    position: relative;
    z-index: -1;
}

.hero-right p {
    position: absolute;
    right: 30px;
    bottom: 30px;
    font-size: 1.6vw;
    margin-bottom: 0;
    color: #ffffff;
}

.hero-center {
    box-shadow: 0px -10px 12px 12px rgba(0, 0, 0, 0.2);
}

.page h2 {
    color: #5da446;
    margin: 30px 0;
}


/* QA SECTIONS */

.font-green, .qa-section h3 {
    color: #5da446;
}

p, a, a.btn, h4 {
    font-size: 1.35vw;
}

h3, .table th, .table td {
    font-size: 1.65vw;
    font-weight: 700;
}

@media (max-width: 991px) {
    .hero-right p {
        right: 15px;
        bottom: 15px;
    }
}

@media (max-width: 767px) {
    p, a, a.btn, h4 {
        font-size: 1.8vw;
    } 
    h3, .table th, .table td {
        font-size: 2.6vw;
    }
}

@media (max-width: 575px) {
    .hero-left, .hero-right, .hero-center {
        width: 100%;
    }
    .hero-left h1, .advice-section h2 {
        font-size: 6.4vw;
    }
    .hero-right p, p, a, a.btn, h4 {
        font-size: 15px;
    }
    h3, .table th, .table td {
        font-size: 21px;
    }
    .hero-center {
        box-shadow: 0px 3px 12px 12px rgba(0, 0, 0, 0.2);
    }
}

/* ADVICE SECTION */

.advice-section h3 {
    background: rgb(93,164,70);
    background: linear-gradient(90deg, rgba(93,164,70,1) 0%, rgba(164,208,98,1) 100%);
    color: #ffffff;
}

.advice-cases-wrapper, .bk-light-green {
    background-color: #d5e8cf;
}

.advice-left-case {
    width: 70%;
}

.advice-right-case {
    width: 30%;
}

.advice-h2-bk, .advice-packshot {
    width: 100%;
}

.advice-section h2 {
    top: 45%;
}

.text-bk-red {
    font-size: 1.4vw;
    color: #ffffff;
    background-color: #d83c29;
}

.advice-packshot-case h3 {
    background: none;
    color: #000000;
}

.advice-right-case img {
    width: 97%;
    margin-left: 2%;
    margin-top: -10%;
}

.btn-download {
    color: #ffffff;
    font-weight: 700;
    padding: 15px;
    background-color: #5da446;
    border: 4px solid #ffffff;
}

.btn-download:hover {
    color: #5da446;
    background-color: #ffffff;
    border: 4px solid #5da446;
}

.table.table-bordered {
    margin-top: -5%;
}

.table th, .table td {
    text-align: center;
}

.table thead th {
    background-color: #ffffff;
    color: #5da446;
    border: 4px solid #5da446;
    width: 5.85vw;
}

.table-bordered tr.green td, .table-bordered tr.green th {
    background-color: #5da446;
    color: #ffffff;
    border: 4px solid #ffffff;
}

.table-bordered tr.green td.grey {
    background-color: #939598;
}

.table-bordered tr.lines th, .table-bordered tr.lines td {
    padding-left: 0;
    padding-right: 0;
    vertical-align: middle;
}

.table-bordered tr.lines hr {
    margin-top: 0;
    margin-bottom: 0;
}

.table-bordered tr.lines th hr {
    border-bottom: 2px solid #5da446;
}

.table-bordered tr.lines td hr {
    border-bottom: 2px solid #939598;
}

.table-bordered tr.reccomendations th, .table-bordered tr.reccomendations td {
    padding-top: 0;
    font-size: 1.35vw;
}

.table-bordered tr.reccomendations th {
    color: #5da446;
}

.table-bordered tr.reccomendations td {
    color: #939598;
}

@media (max-width: 767px) {
    .advice-left-case, .advice-right-case {
        width: 100%;
    }
    .advice-right-case img {
        width: 40%;
        margin-left: 30%;
    }
}

@media (max-width: 575px) {
    .advice-right-case img {
        width: 60%;
        margin-left: 20%;
    }
    .advice-h2-bk {
        width: 300%;
        max-width: 300%;
    }
    .advice-cases-wrapper {
        overflow-x: hidden;
    }
    .advice-packshot {
        width: 70%;
        margin-left: 15%;
    }
    .text-bk-red {
        width: 100%;
        font-size: 15px;
    }
}

/* VIDEO SECTION */

.video-section {
    width: 80%;
    margin-left: 10%;
}

.video-container { 
    position: relative; 
    position: relative;
    height: 100%;
    overflow: hidden; 
}

.video-container iframe, .video-container object, .video-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

@media (max-width: 991px) {
    .video-section {
        width: 90%;
        margin-left: 5%;
    }  
}

@media (max-width: 767px) {
    .video-section {
        width: 100%;
        margin-left: 0;
    }  
}

/* REFERENCES & FOOTER */

.references a {
    color: #000000;
}

footer {
    background-color: #75a16c;
}

.footer-content {
    width: 90%;
}

footer p {
    max-width: 70%;
    font-size: 1vw;
    color: #ffffff;
}

footer hr {
    border-bottom: 3px solid #ffffff;
}

footer ul {
    flex-direction: row;
    padding-left: 0;
    flex-wrap: wrap;
}

footer ul li {
    position: relative;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 1vw;
    display: inline-block;
    margin-right: 40px;
    line-height: 1;
}

footer ul li a {
    color: inherit;
}

footer ul li a:hover {
    color: #fff;
}

footer ul li::after {
    content:'';
    width: 1px;
    height: 1vw;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    right: -19px;
    display: inline-block;
}

footer ul li:last-child {
    margin-right: 0;
}

footer ul li:last-child::after {
    content: none;
}

@media (max-width: 1199px) {
    footer ul li, footer p {
        font-size: 12px;
    }
    footer ul li::after {
        height: 12px;
    }
    .footer-content {
        width: 100%;
    }
}

@media (max-width: 991px) {
    footer ul li {
        margin-bottom: 15px;
    }
    .table.table-bordered {
        margin-top: 30px;
    }
    .table-bordered tr.reccomendations th, .table-bordered tr.reccomendations td {
        font-size: 16px;
    }
    .advice-right-case img {
        margin-top: 2vw;
    }
}

@media (max-width: 575px) {
    .table th, .table td {
        font-size: 12px;
        padding: 5px;
    }
    .table-bordered tr.reccomendations th, .table-bordered tr.reccomendations td {
        font-size: 11px;
    }
    .references a {
        font-size: 12px;
    }
    .btn-download {
        width: 100%;
    }
}