:root {
--animate-duration: 2000ms;
}
.banner { display: flex; background-repeat: no-repeat; background-position: top center; background-size: cover; clear: both; height: auto;min-height: 100vh; }
.banner h1 { color: #fff; font-size: 56px; font-weight: 700; text-transform: uppercase; margin-bottom: 50px; line-height: 1.196em; }
.banner p { max-width: 632px; font-size: 20px; }
.banner p:last-child {margin-bottom: 0;}
.ovlay { background-color: rgba(249, 162, 26, 0.83); padding: calc(8% + 72px) 0px 8%; width: 100%; display: flex; align-items: center; }
.btn-about { background-color: #fff; border-radius: 0px; color: #000; font-family: 'urw-din'; font-size: 16px; font-weight: 400; line-height: 40px; text-transform: uppercase; width: 140px; }
.btn-about:hover { background-color: #000; color: #fff; }
.btn-video { background-color: transparent; border: 2px solid #fff; border-radius: 0px; color: #fff; font-family: 'urw-din'; font-size: 16px; font-weight: 400; line-height: 38px; margin-left: 15px; text-transform: uppercase; width: 140px; }
.btn-video:hover { border-color: #000; color: #000; }
.about { clear: both; padding: 0; width: 100%; height:100vh; display:flex; align-items:center; padding-top:72px; }
.about h1 { font-family: 'urw-din'; line-height: 1.2857em; }
.about figure { position: relative; padding: 0px 15% 15% 0px; }
.about figure .overlay { background-color: rgba(251, 155, 5, 0.8); height: 90%; right: 0; position: absolute; bottom: 0; width: 90%; z-index: 1; mix-blend-mode: multiply; }
.display { clear: both; padding: 0; position: relative; width: 100%; overflow: hidden; height:100vh; display:flex; align-items:center; padding-top:72px; }
.display figure { margin: 0px; }
.display .quote { height: 100%; z-index: 1; mix-blend-mode: multiply; display: flex;align-items: center;position: relative; padding-right: 30px; }
.display .quote:before {content: '';display: block;position: absolute;left: calc(-30px - 110px);top: -80px;bottom: -80px;right: 0;background-color: rgba(251, 155, 5, 0.8);}
.display .quote p { font-family: 'urw-din'; font-size: 32px; line-height: 1.28125em; }
.display .quote img { margin: 8% 0px 10px; }
.display .quote * {position: relative;z-index: 10;}
.subsription { padding:9% 0; padding-top:calc(9% + 72px); display:flex; align-items:center; }
.subsription .ready { margin:0; } @media only screen and (max-width: 767px) {
.banner h1 { font-size: 32px; }
.btn-about, .btn-video { font-size: 15px; line-height: 32px; margin: 5px 0px; width: 100%; }
.about {padding: 150px 0;}
.display {padding: calc(80px + 150px) 0;}
.display .quote { position: relative; padding: 0; width: 100%; }
.display .quote:before {left: -30px;right: -30px;}
.display .quote p { font-size: 20px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.banner h1 { font-size: 46px; }
.banner p { max-width: 532px }
.display .quote p { font-size: 20px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.display .quote p { font-size: 25px; }
}.vidbg-container {
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.vidbg-container video {
position: absolute;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: 0.25s opacity ease-in-out;
max-width: none;
opacity: 0;
}
.vidbg-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}@font-face {
font-family: 'URW DIN';
src: local('../fonts/URW DIN Regular'), local('URW-DIN-Regular'),
url(//projectamber.org.uk/wp-content/themes/projectamber/assets/fonts/URWDIN-Regular.woff2) format('woff2'),
url(//projectamber.org.uk/wp-content/themes/projectamber/assets/fonts/URWDIN-Regular.woff) format('woff'),
url(//projectamber.org.uk/wp-content/themes/projectamber/assets/fonts/URWDIN-Regular.ttf) format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'URW DIN';
src: local('../fonts/URW DIN Bold'), local('URW-DIN-Bold'),
url(//projectamber.org.uk/wp-content/themes/projectamber/assets/fonts/URWDIN-Bold.woff2) format('woff2'),
url(//projectamber.org.uk/wp-content/themes/projectamber/assets/fonts/URWDIN-Bold.woff) format('woff'),
url(//projectamber.org.uk/wp-content/themes/projectamber/assets/fonts/URWDIN-Bold.ttf) format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'URW DIN';
src: local('../fonts/URW DIN Bold Italic'), local('URW-DIN-Bold-Italic'),
url(//projectamber.org.uk/wp-content/themes/projectamber/assets/fonts/URWDIN-BoldItalic.woff2) format('woff2'),
url(//projectamber.org.uk/wp-content/themes/projectamber/assets/fonts/URWDIN-BoldItalic.woff) format('woff'),
url(//projectamber.org.uk/wp-content/themes/projectamber/assets/fonts/URWDIN-BoldItalic.ttf) format('truetype');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'URW DIN Demi';
src: local('../fonts/URW DIN Demi'), local('URW-DIN-Demi'),
url(//projectamber.org.uk/wp-content/themes/projectamber/assets/fonts/URWDIN-Demi.woff2) format('woff2'),
url(//projectamber.org.uk/wp-content/themes/projectamber/assets/fonts/URWDIN-Demi.woff) format('woff'),
url(//projectamber.org.uk/wp-content/themes/projectamber/assets/fonts/URWDIN-Demi.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'URW DIN Demi';
src: local('../fonts/URW DIN Demi Italic'), local('URW-DIN-Demi-Italic'),
url(//projectamber.org.uk/wp-content/themes/projectamber/assets/fonts/URWDIN-DemiItalic.woff2) format('woff2'),
url(//projectamber.org.uk/wp-content/themes/projectamber/assets/fonts/URWDIN-DemiItalic.woff) format('woff'),
url(//projectamber.org.uk/wp-content/themes/projectamber/assets/fonts/URWDIN-DemiItalic.ttf) format('truetype');
font-weight: normal;
font-style: italic;
}