html {
box-sizing: border-box
}
*,
*::after,
*::before {
box-sizing: inherit
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block
}
body {
line-height: 1
}
ol,
ul {
list-style: none;
margin: 0;
padding: 0
}
blockquote,
q {
quotes: none
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
@media print {
p,
blockquote {
orphans: 2;
widows: 2
}
blockquote,
ul,
ol {
page-break-inside: avoid
}
h1,
h2,
h3,
caption {
page-break-after: avoid
}
* {
background: transparent !important;
color: black !important;
text-shadow: none !important;
-webkit-filter: none !important;
filter: none !important;
-ms-filter: none !important
}
a,
a:visited {
text-decoration: underline
}
a[href]:after {
content: " (" attr(href) ")"
}
abbr[title]:after {
content: " (" attr(title) ")"
}
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: ""
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid
}
thead {
display: table-header-group
}
tr,
img {
page-break-inside: avoid
}
img {
max-width: 100% !important
}
@page {
margin: 0.5cm
}
p,
h2,
h3 {
orphans: 3;
widows: 3
}
h2,
h3 {
page-break-after: avoid
}
}
@media (orientation: landscape) and (max-device-width: 768px) {
html,
body {
-webkit-text-size-adjust: 100%
}
}
@font-face {
font-family: 'FFDINWebProBold';
src: url(//normaal.fr/wp-content/themes/normaal/assets/fonts/2ED66B_0_0.eot);
src: url(//normaal.fr/wp-content/themes/normaal/assets/fonts/2ED66B_0_0.eot?#iefix) format("embedded-opentype"), url(//normaal.fr/wp-content/themes/normaal/assets/fonts/2ED66B_0_0.woff2) format("woff2"), url(//normaal.fr/wp-content/themes/normaal/assets/fonts/2ED66B_0_0.woff) format("woff"), url(//normaal.fr/wp-content/themes/normaal/assets/fonts/2ED66B_0_0.ttf) format("truetype")
}
@font-face {
font-family: 'FFDINWebPro';
src: url(//normaal.fr/wp-content/themes/normaal/assets/fonts/2ED66B_1_0.eot);
src: url(//normaal.fr/wp-content/themes/normaal/assets/fonts/2ED66B_1_0.eot?#iefix) format("embedded-opentype"), url(//normaal.fr/wp-content/themes/normaal/assets/fonts/2ED66B_1_0.woff2) format("woff2"), url(//normaal.fr/wp-content/themes/normaal/assets/fonts/2ED66B_1_0.woff) format("woff"), url(//normaal.fr/wp-content/themes/normaal/assets/fonts/2ED66B_1_0.ttf) format("truetype")
}
@font-face {
font-family: 'normaalregular';
src: url(//normaal.fr/wp-content/themes/normaal/assets/fonts/normaal-webfont.eot);
src: url(//normaal.fr/wp-content/themes/normaal/assets/fonts/normaal-webfont.eot?#iefix) format("embedded-opentype"), url(//normaal.fr/wp-content/themes/normaal/assets/fonts/normaal-webfont.woff2) format("woff2"), url(//normaal.fr/wp-content/themes/normaal/assets/fonts/normaal-webfont.woff) format("woff"), url(//normaal.fr/wp-content/themes/normaal/assets/fonts/normaal-webfont.ttf) format("truetype"), url(//normaal.fr/wp-content/themes/normaal/assets/fonts/normaal-webfont.svg#normaalregular) format("svg");
font-weight: normal;
font-style: normal
}
body {
font-family: "FFDINWebPro", sans-serif;
font-size: 15px;
color: #111;
line-height: 140%
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "FFDINWebProBold", sans-serif;
color: #111;
margin: 0;
line-height: 140%
}
h1,
.h1-like {
font-size: 41px;
text-transform: uppercase
}
@media only screen and (max-width: 767px) {
h1,
.h1-like {
font-size: 20px
}
}
h2,
.h2-like {
font-size: 32px;
text-transform: uppercase
}
@media only screen and (max-width: 767px) {
h2,
.h2-like {
font-size: 18px
}
}
h3,
.h3-like {
font-size: 32px;
font-weight: 600
}
@media only screen and (max-width: 767px) {
h3,
.h3-like {
font-size: 16px
}
}
h4,
.h4-like {
font-size: 24px;
font-weight: 600
}
@media only screen and (max-width: 767px) {
h4,
.h4-like {
font-size: 18px
}
}
h5,
.h5-like {
font-size: 16px;
font-weight: 400
}
h6,
.h6-like {
font-size: 16px;
font-weight: 600
}
.aa-title {
letter-spacing: 2px;
font-family: "normaalregular", sans-serif;
text-transform: uppercase
}
.aa-title u {
font-family: "FFDINWebProBold", sans-serif;
text-transform: none;
font-size: 30px;
text-decoration: none;
display: block;
line-height: 100%
}
.aa-title span {
color: #eb0f00;
letter-spacing: -1px;
margin-right: 4px;
display: inline-block;
text-transform: none
}
.clear {
clear: both
}
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both
}
.mobile-only {
display: none !important
}
@media only screen and (max-width: 767px) {
.desktop-only {
display: none !important
}
.mobile-only {
display: block !important
}
}
.container {
padding: 0 10px;
max-width: 1190px;
margin-left: auto;
margin-right: auto
}
.container::after {
clear: both;
content: "";
display: table
}
.container .row {
display: block
}
.container .row::after {
clear: both;
content: "";
display: table
}
.container .omega {
margin-right: 0
}
@media only screen and (min-width: 767px) {
.grid_1 {
float: left;
display: block;
margin-right: 2.56122%;
width: 5.98555%
}
.grid_1:last-child {
margin-right: 0
}
.grid_2 {
float: left;
display: block;
margin-right: 2.56122%;
width: 14.53232%
}
.grid_2:last-child {
margin-right: 0
}
.grid_3 {
float: left;
display: block;
margin-right: 2.56122%;
width: 23.07909%
}
.grid_3:last-child {
margin-right: 0
}
.grid_4 {
float: left;
display: block;
margin-right: 2.56122%;
width: 31.62585%
}
.grid_4:last-child {
margin-right: 0
}
.grid_5 {
float: left;
display: block;
margin-right: 2.56122%;
width: 40.17262%
}
.grid_5:last-child {
margin-right: 0
}
.grid_6 {
float: left;
display: block;
margin-right: 2.56122%;
width: 48.71939%
}
.grid_6:last-child {
margin-right: 0
}
.grid_7 {
float: left;
display: block;
margin-right: 2.56122%;
width: 57.26616%
}
.grid_7:last-child {
margin-right: 0
}
.grid_8 {
float: left;
display: block;
margin-right: 2.56122%;
width: 65.81293%
}
.grid_8:last-child {
margin-right: 0
}
.grid_9 {
float: left;
display: block;
margin-right: 2.56122%;
width: 74.3597%
}
.grid_9:last-child {
margin-right: 0
}
.grid_10 {
float: left;
display: block;
margin-right: 2.56122%;
width: 82.90646%
}
.grid_10:last-child {
margin-right: 0
}
.grid_11 {
float: left;
display: block;
margin-right: 2.56122%;
width: 91.45323%
}
.grid_11:last-child {
margin-right: 0
}
.grid_12 {
float: left;
display: block;
margin-right: 2.56122%;
width: 100%
}
.grid_12:last-child {
margin-right: 0
}
}
* {
box-sizing: border-box
}
body {
background: #fefef3
}
body.admin-bar {
padding-top: 32px
}
a {
text-decoration: none;
color: #000
}
a:hover {
color: #eb0f00;
text-decoration: none
}
img {
height: auto;
max-width: 100%;
display: block
}
@media only screen and (max-width: 767px) {
img {
width: 100%
}
}
blockquote {
color: #111;
font-style: italic;
font-size: 18px;
line-height: 170%
}
blockquote p:before {
content: " “ ";
color: #F6CFE5
}
blockquote p:after {
content: " ” ";
color: #F6CFE5
}
hr {
background: #F0F0F0;
border: none;
height: 1px
}
table {
border-collapse: collapse;
border-spacing: 0
}
table th {
border: 1px solid gray;
padding: 0.2em;
text-align: left
}
table td {
border: 1px solid gray;
padding: 0.2em
}
.mobile-only {
display: none !important
}
.txtleft {
text-align: left
}
.txtright {
text-align: right
}
.txtcenter {
text-align: center
}
.hidden {
visibility: hidden
}
.main {
background: #fefef3;
position: relative;
padding-top: 140px
}
.home .main {
margin-top: 90%;
padding-top: 40px;
z-index: 10
}
.home .main:before {
content: "";
display: block;
background: url(//normaal.fr/wp-content/themes/normaal/assets/img/scratch.png) repeat-x top center;
height: 100px;
width: 100%;
position: absolute;
top: -25px
}
@media only screen and (max-width: 767px) {
.home .main:before {
top: -30px
}
}
@media only screen and (max-width: 1200px) {
.home .main {
position: relative;
top: -10px;
margin-top: 0
}
}
.main.generaal-content {
padding-top: 0
}
@media only screen and (max-width: 767px) {
.main.staaf-content {
padding-top: 80px
}
}
.main.filmgraphy-single {
padding-top: 100px
}
@media only screen and (max-width: 1200px) {
body.no-scroll {
height: 100%;
overflow: hidden;
position: fixed
}
body.menu-opened .wrapper {
-webkit-transform: translateX(290px);
-ms-transform: translateX(290px);
transform: translateX(290px);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s
}
.wrapper {
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
z-index: 99
}
}
@media only screen and (max-width: 767px) {
.desktop-only {
display: none !important
}
.mobile-only {
display: block !important
}
img {
max-width: 100%
}
body {
padding-top: 0
}
}
@-webkit-keyframes translate_y {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
50% {
-webkit-transform: translateY(10px);
transform: translateY(10px)
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes translate_y {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
50% {
-webkit-transform: translateY(10px);
transform: translateY(10px)
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
.primary-btn,
.secondary-btn {
display: inline-block;
text-align: center;
-webkit-appearance: none;
border-radius: 0;
background: none;
line-height: 100%
}
.primary-btn [class*="flr-"],
.secondary-btn [class*="flr-"] {
font-size: 20px;
vertical-align: middle
}
.primary-btn:hover,
.secondary-btn:hover {
background: #fefef3;
text-decoration: none
}
.primary-btn:active,
.secondary-btn:active {
background: #fefef3;
text-decoration: none
}
.primary-btn {
font-family: "normaalregular", sans-serif;
background: #f0f1e8;
padding: 15px 15px;
color: #eb0f00;
font-size: 40px;
border-radius: 8px;
text-transform: uppercase;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
.primary-btn:hover {
color: #FFF;
background: #eb0f00;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
.primary-btn.small {
font-size: 14px;
height: 40px;
padding-top: 10px
}
.primary-btn [class*="flr-"] {
position: relative;
vertical-align: sub;
font-size: 30px;
color: #eb0f00;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
.primary-btn:hover [class*="flr-"] {
color: #FFF
}
.primary-btn.success {
font-weight: 600;
color: #FFF;
background: #5BC89F;
border-color: #5BC89F
}
.primary-btn.alert {
font-weight: 600;
color: #FFF;
background: #FF5E76;
border-color: #FF5E76
}
.primary-btn.disabled {
opacity: 0.4
}
.primary-btn.disabled:hover,
.primary-btn.disabled:active {
cursor: default;
background: none;
color: #111
}
.primary-btn.disabled:hover [class*="flr-"],
.primary-btn.disabled:active [class*="flr-"] {
color: #eb0f00
}
.secondary-btn {
color: #eb0f00;
border: 1px solid #fefef3;
height: 40px;
width: 40px;
vertical-align: middle;
border-radius: 20px;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
.secondary-btn [class*="flr-"] {
line-height: 190%
}
.secondary-btn:hover {
color: #FFF;
background: #fefef3;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
.secondary-btn:active {
color: #FFF
}
.secondary-btn.light {
color: #fefef3;
border-color: #FFF;
background: #FFF;
vertical-align: middle;
border-radius: 20px;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
.secondary-btn.light:hover {
color: #FFF;
background: #fefef3;
border-color: #fefef3;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
@media only screen and (max-width: 767px) {
.secondary-btn {
height: 30px;
width: 30px
}
.secondary-btn [class*="flr-"] {
line-height: 140%
}
}
.close-btn {
background: none;
border: none;
width: 30px;
height: 30px;
text-align: center;
line-height: 160%;
cursor: pointer
}
.close-btn [class*="flr-"] {
color: #eb0f00
}
.close-btn:hover [class*="flr-"] {
color: #fefef3
}
.share-btn {
color: #eb0f00;
background: none;
border: none;
cursor: pointer;
padding: 0
}
.share-btn [class*="flr-"] {
color: #eb0f00;
vertical-align: middle;
font-size: 18px
}
.back-btn {
color: #888;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
.back-btn u {
text-decoration: none
}
@media only screen and (max-width: 767px) {
.back-btn {
font-size: 12px
}
}
.back-btn [class*="flr-"] {
margin-right: 10px;
text-align: center;
font-size: 20px;
display: inline-block;
line-height: 190%;
color: #eb0f00;
border: 1px solid #fefef3;
height: 40px;
width: 40px;
vertical-align: middle;
border-radius: 20px;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
@media only screen and (max-width: 767px) {
.back-btn [class*="flr-"] {
height: 30px;
width: 30px;
line-height: 140%
}
}
.back-btn:hover {
color: #eb0f00;
text-decoration: none
}
.back-btn:hover [class*="flr-"] {
background: #fefef3;
color: #FFF
}
form p {
margin-bottom: 20px
}
form label {
font-weight: 600;
color: #111;
display: block;
margin-bottom: 10px
}
button,
input,
select,
textarea {
font-family: arial, sans-serif;
font-size: 100%
}
form input[type="text"],
form input[type="email"],
form input[type="date"],
form input[type="password"],
form textarea,
form select {
border: 2px solid #ddd;
background: #FFF;
padding: 0 10px;
width: 100%;
height: 40px;
color: #111;
-webkit-border-radius: 0;
-webkit-appearance: none !important
}
form input[type="text"],
form input[type="email"],
form input[type="date"],
form input[type="password"],
form textarea {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1)
}
form input[type="radio"],
form input[type="checkbox"] {
margin: 0 5px 0 0
}
form input:disabled {
background: #F0F0F0;
box-shadow: none;
font-style: italic
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="date"]:focus,
form input[type="password"]:focus,
form textarea:focus,
form select:focus {
border-color: #888
}
form textarea {
padding: 10px;
height: 150px;
width: 100%;
vertical-align: top
}
form button,
form input[type="submit"] {
padding-top: 0 !important;
cursor: pointer
}
form .error-field label {
color: #FF4160
}
form .error-field input[type="text"],
form .error-field input[type="email"],
form .error-field input[type="date"],
form .error-field input[type="password"],
form .error-field textarea,
form .error-field select,
form .error-field .customSelect {
border: 1px solid #FF4160
}
form .error-info {
background: #FF4160;
font-weight: 600;
font-style: italic;
color: #FFF;
position: relative;
padding: 10px;
display: block;
font-size: 14px;
margin: 10px 0 0px 0;
max-width: 470px
}
form .valid-field input[type="text"],
form .valid-field input[type="email"],
form .valid-field input[type="date"],
form .valid-field input[type="password"],
form .valid-field textarea,
form .valid-field select,
form .valid-field .customSelect {
border: 1px solid #0047BB
}
.custom-select {
position: relative;
display: block;
border: 1px solid #ddd
}
.custom-select select {
width: 100%;
margin: 0;
background: #FFF;
border: 1px solid transparent;
outline: none;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.custom-select:after {
content: "";
position: absolute;
width: 8px;
height: 4px;
top: 50%;
right: 1em;
margin-top: -2px;
background-image: url(//normaal.fr/wp-content/themes/normaal/assets/img/custom-select-pointer.png);
background-repeat: no-repeat;
background-size: 100%;
z-index: 2;
pointer-events: none
}
.custom-select:hover {
border-color: #888
}
.custom-select select:focus {
outline: none;
border-color: #FFF
}
.custom-select option {
font-weight: normal
}
x:-o-prefocus,
.custom-select::after {
display: none
}
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
.custom-select select::-ms-expand {
display: none
}
.custom-select select:focus::-ms-value {
background: transparent;
color: #222
}
}
@-moz-document url-prefix() {
.custom-select {
overflow: hidden
}
.custom-select select {
width: 120%;
width: calc(100% + em)
}
}
.custom-select select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000
}
form .custom-checkbox,
form .custom-radio {
line-height: 100%
}
form .custom-radio input+label {
margin-right: 20px;
padding-top: 4px
}
form .custom-checkbox input[type="checkbox"]:not(:checked),
form .custom-checkbox input[type="checkbox"]:checked,
form .custom-radio input[type="radio"]:not(:checked),
form .custom-radio input[type="radio"]:checked {
position: absolute;
left: -9999px
}
form .custom-checkbox input[type="checkbox"]:not(:checked)+label,
form .custom-checkbox input[type="checkbox"]:checked+label,
form .custom-radio input[type="radio"]:not(:checked)+label,
form .custom-radio input[type="radio"]:checked+label {
position: relative;
padding-left: 30px;
cursor: pointer
}
form .custom-checkbox label {
margin-bottom: 10px
}
form .custom-checkbox input[type="checkbox"]:not(:checked)+label:before,
form .custom-checkbox input[type="checkbox"]:checked+label:before,
form .custom-radio input[type="radio"]:not(:checked)+label:before,
form .custom-radio input[type="radio"]:checked+label:before {
content: '';
position: absolute;
left: 1px;
top: 3px;
width: 16px;
height: 16px;
border: 1px solid #ddd;
background: #FFF;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1)
}
form .custom-checkbox input[type="checkbox"]:not(:checked)+label:before,
form .custom-checkbox input[type="checkbox"]:checked+label:before {
top: -1px;
border-radius: 4px
}
form .custom-radio input[type="radio"]:not(:checked)+label:before,
form .custom-radio input[type="radio"]:checked+label:before {
border-radius: 20px
}
form .custom-checkbox input[type="checkbox"]:checked+label:before,
form .custom-radio input[type="radio"]:checked+label:before {
border: 1px solid #ddd
}
form .custom-checkbox input[type="checkbox"]:not(:checked)+label:after,
form .custom-checkbox input[type="checkbox"]:checked+label:after,
form .custom-radio input[type="radio"]:not(:checked)+label:after,
form .custom-radio input[type="radio"]:checked+label:after {
content: '✔';
position: absolute;
top: 0px;
left: 5px;
font-size: 14px;
color: #fefef3;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
form .custom-radio input[type="radio"]:not(:checked)+label:after,
form .custom-radio input[type="radio"]:checked+label:after {
content: '';
top: 8px;
left: 6px;
width: 8px;
height: 8px;
background: #fefef3;
border-radius: 10px
}
form .custom-checkbox input[type="checkbox"]:not(:checked)+label:after,
form .custom-radio input[type="radio"]:not(:checked)+label:after {
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0)
}
form .custom-checkbox input[type="checkbox"]:checked+label:after,
form .custom-radio input[type="radio"]:checked+label:after {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
form .custom-checkbox input[type="checkbox"]:disabled:not(:checked)+label:before,
form input[type="checkbox"]:disabled:checked+label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd
}
form .custom-checkbox input[type="checkbox"]:disabled:checked+label:after {
color: #999
}
form .custom-checkbox input[type="checkbox"]:disabled+label {
color: #aaa
}
@font-face {
font-family: 'icomoon';
src: url(//normaal.fr/wp-content/themes/normaal/assets/fonts/icomoon.eot?-i97gh7);
src: url(//normaal.fr/wp-content/themes/normaal/assets/fonts/icomoon.eot?#iefix-i97gh7) format("embedded-opentype"), url(//normaal.fr/wp-content/themes/normaal/assets/fonts/icomoon.ttf?-i97gh7) format("truetype"), url(//normaal.fr/wp-content/themes/normaal/assets/fonts/icomoon.woff?-i97gh7) format("woff"), url(//normaal.fr/wp-content/themes/normaal/assets/fonts/icomoon.svg?-i97gh7#icomoon) format("svg");
font-weight: normal;
font-style: normal
}
[class^="flr-"],
[class*=" flr-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
font-size: 30px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.flr-arrow-left:before {
content: "\e600"
}
.flr-arrow-top:before {
content: "\e601"
}
.flr-arrow-right:before {
content: "\e602"
}
.flr-arrow-bottom:before {
content: "\e603"
}
.flr-arrow-back:before {
content: "\e604"
}
.flr-check:before {
content: "\e605"
}
.flr-turnoff:before {
content: "\e606"
}
.flr-search:before {
content: "\e607"
}
.flr-download:before {
content: "\e608"
}
.flr-arrow-light-right:before {
content: "\e609"
}
.flr-menu-mobile:before {
content: "\e60a"
}
.flr-close:before {
content: "\e60b"
}
.header {
position: fixed;
width: 100%;
height: 70px;
top: 0;
background: #E1E3DC;
z-index: 99;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform, 0.6s;
transition: transform, 0.6s;
-webkit-transition-timing-function: cubic-bezier(0, 0.655, 0, 1.03);
transition-timing-function: cubic-bezier(0, 0.655, 0, 1.03)
}
.admin-bar .header {
top: 32px
}
.header:after {
content: "";
display: block;
background: url(//normaal.fr/wp-content/themes/normaal/assets/img/scratch-menu.png) no-repeat left top;
width: 100%;
height: 65px;
position: absolute;
left: 0;
bottom: -26px;
z-index: -1
}
.header .aa-title {
padding-top: 14px;
font-size: 30px;
text-align: center;
font-family: "normaalregular", sans-serif;
color: #eb0f00;
display: none
}
.header .aa-title span u {
text-transform: uppercase;
display: none;
text-decoration: none
}
@media only screen and (max-width: 1200px) {
.header .aa-title {
display: block
}
}
@media only screen and (max-width: 767px) {
.header .aa-title {
font-size: 16px;
padding-top: 15px
}
.header .aa-title span {
display: block
}
}
.header .logo {
position: absolute;
top: 0;
left: 0;
width: 70px;
height: 70px;
background: #fefef3
}
.header .logo img {
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px
}
@media only screen and (max-width: 767px) {
.header .logo img {
width: 50px
}
}
.header .main-menu {
margin: 24px 0 0 90px
}
@media only screen and (max-width: 1200px) {
.header .main-menu {
margin: 0;
float: none
}
}
.header .form-search {
position: absolute;
top: 14px;
right: 70px;
margin: 0 14px 0 0;
width: 200px
}
@media only screen and (max-width: 1200px) {
.header .form-search {
position: relative;
right: auto;
width: auto;
top: auto;
margin: 10px
}
}
.header .form-search input[type="text"] {
padding-right: 40px;
width: 100%;
border-radius: 4px
}
@media only screen and (max-width: 1200px) {
.header .form-search input[type="text"] {
border-radius: 0px
}
}
.header .form-search .search-btn {
background: none;
border: none;
position: absolute;
width: 40px;
height: 40px;
right: 0;
top: 0;
padding: 0
}
.header .form-search .search-btn [class*="flr-"] {
color: #e0e2db
}
.header .langue-select {
position: absolute;
top: 18px;
right: 10px;
height: auto
}
@media only screen and (max-width: 1200px) {
.header .langue-select {
position: relative;
right: auto;
width: auto;
top: auto;
margin: 10px
}
}
.header .langue-select ul li {
float: none;
width: auto;
position: relative;
padding: 0px !important;
margin: 0px !important;
list-style-type: none !important
}
.header .langue-select ul li a {
display: block;
font-size: 11px;
text-decoration: none !important;
color: #444;
border: none;
background: none;
padding: 10px 10px 0 10px;
line-height: 100%
}
.loading .header,
.hide-header .header {
-webkit-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px)
}
.footer {
position: relative;
z-index: 9;
background: #fefef3;
padding: 60px 0 20px 0;
font-family: "FFDINWebPro", sans-serif
}
.footer .legal {
text-align: center;
font-size: 12px
}
.open-menu {
display: none;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
@media only screen and (max-width: 1200px) {
.navigation {
position: fixed;
top: 0;
left: 0;
width: 290px;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
-webkit-transform: translateX(-290px);
-ms-transform: translateX(-290px);
transform: translateX(-290px);
box-shadow: -4px 0 4px rgba(0, 0, 0, 0.1)
}
}
.navigation .main-menu {
text-align: center
}
.navigation .main-menu li {
display: inline-block;
margin: 0 20px 0 0;
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform, 0.4s;
transition: transform, 0.4s;
-webkit-transition-timing-function: cubic-bezier(0, 0.47, 0.225, 1.195);
transition-timing-function: cubic-bezier(0, 0.47, 0.225, 1.195)
}
@media only screen and (max-width: 1200px) {
.navigation .main-menu li {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
margin: 0;
text-align: left;
display: block
}
}
.navigation .main-menu li.current-menu-item a {
color: #eb0f00
}
.navigation .main-menu li a {
display: block;
font-size: 20px;
letter-spacing: 2px;
font-family: "normaalregular", sans-serif;
text-transform: uppercase;
color: #FFF;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
@media only screen and (max-width: 1200px) {
.navigation .main-menu li a {
color: #555
}
}
.navigation .main-menu li a span {
color: #eb0f00;
display: inline-block;
text-transform: none
}
@media only screen and (max-width: 1200px) {
.navigation .main-menu li a {
font-size: 16px;
padding: 20px 10px;
border-bottom: 2px solid #eb0f00
}
li:first-child .navigation .main-menu li a {
border-top: 2px solid #eb0f00
}
}
.navigation .main-menu li a:hover {
color: #eb0f00
}
.navigation .main-menu li a:hover span {
color: #eb0f00
}
.loading .navigation .main-menu li {
opacity: 0;
-webkit-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px)
}
@media only screen and (max-width: 1200px) {
.loading .navigation .main-menu li {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transform: translateX(-100px);
-ms-transform: translateX(-100px);
transform: translateX(-100px)
}
}
.navigation .main-menu li:nth-child(1) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s
}
.navigation .main-menu li:nth-child(2) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s
}
.navigation .main-menu li:nth-child(3) {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s
}
.navigation .main-menu li:nth-child(4) {
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s
}
.navigation .close-menu {
color: #fefef3;
font-weight: bold;
font-size: 16px;
display: block;
padding: 10px;
width: 100%;
background: none;
border: none;
border-bottom: 1px solid #fefef3;
cursor: pointer;
text-align: right;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
.open-menu {
color: #eb0f00;
font-weight: bold;
display: none;
position: absolute;
top: 0;
right: 0;
padding: 0 10px;
z-index: 99;
width: auto;
height: 70px;
background: none;
border: none;
cursor: pointer;
text-align: center;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
.open-menu [class*="flr-"] {
font-size: 50px
}
@media only screen and (max-width: 1200px) {
.open-menu {
display: block
}
}
.footer-menu {
margin: 0;
list-style: none;
text-align: center
}
.footer-menu li {
margin: 0 15px;
display: inline-block
}
.footer-menu li a {
font-size: 12px;
padding: 0;
color: #111;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
.footer-menu li a:hover {
text-decoration: underline
}
.project-list {
margin-bottom: 20px;
display: block
}
.project-list::after {
clear: both;
content: "";
display: table
}
.project-list .project-item {
float: left;
display: block;
margin-right: 2.56122%;
width: 23.07909%;
position: relative;
display: block;
overflow: hidden;
margin-bottom: 1.8125em
}
.project-list .project-item:last-child {
margin-right: 0
}
.project-list .project-item:nth-child(4n+0) {
margin-right: 0
}
.project-list .project-item:hover h3 {
color: #eb0f00
}
.project-list .project-item h3 {
font-family: "FFDINWebProBold", sans-serif;
font-weight: normal;
font-size: 16px;
display: inline-block;
line-height: 100%;
position: absolute;
bottom: 20px;
left: 0px;
padding: 10px 10px 10px 20px;
max-width: 200px;
background: #fefef3;
text-transform: uppercase;
z-index: 9;
color: #000;
border-radius: 0 8px 8px 0;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
.project-list .project-item img.img-color {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 6;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
.project-list .project-item:hover img.img-color {
opacity: 1
}
.project-list .project-item:before {
content: "";
display: block;
color: #FFF;
background: url(//normaal.fr/wp-content/themes/normaal/assets/img/ajax-loader.gif) #eb0f00 no-repeat center center;
width: 40px;
height: 40px;
border-radius: 40px;
position: absolute;
left: 50%;
top: 50%;
margin: -20px 0 0 -20px;
opacity: 0;
z-index: 12;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
.project-list .project-item.loader:before {
opacity: 1;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
@media only screen and (max-width: 767px) {
.project-list .project-item {
float: left;
display: block;
margin-right: 2.56122%;
width: 48.71939%;
margin-bottom: 1.8125em
}
.project-list .project-item:last-child {
margin-right: 0
}
.project-list .project-item:nth-child(2n+0) {
margin-right: 0
}
.project-list .project-item h3 {
font-size: 14px;
position: absolute;
bottom: 10px;
left: 0px;
right: auto;
max-width: none;
padding: 5px;
font-weight: normal
}
}
.project-content {
margin-bottom: 20px;
position: relative
}
.project-content .project-header {
margin-bottom: 20px
}
.project-content .project-cover {
margin-bottom: 20px
}
.project-content .project-infos {
display: table;
width: 100%;
margin: 0;
border-top: 20px solid #fefef3;
border-bottom: 20px solid #fefef3
}
.project-content .project-infos .project-logo {
display: table-cell;
width: 40%;
vertical-align: middle;
text-align: center
}
@media only screen and (max-width: 767px) {
.project-content .project-infos .project-logo {
display: block;
width: auto
}
}
.project-content .project-infos .project-logo img {
margin: 0 auto
}
.project-content .project-infos .project-text {
display: table-cell;
padding: 20px;
background: #fefef3;
width: 60%
}
@media only screen and (max-width: 767px) {
.project-content .project-infos .project-text {
display: block;
width: auto
}
}
.project-content .project-infos .project-text .title {
font-size: 30px;
font-weight: normal;
margin-bottom: 0px
}
.project-content .project-infos .project-text p {
margin-bottom: 15px
}
.project-content .expand-btn {
border: none;
background: #d3d7d2;
color: #111;
cursor: pointer;
padding: 0;
padding: 0 10px;
height: 40px
}
.project-content .expand-btn [class*="flr-"] {
vertical-align: middle;
font-size: 20px
}
.project-content .more-infos {
text-align: left;
display: none;
padding: 20px 0
}
.project-content .more-infos p {
margin-bottom: 15px
}
.project-content .partners-list {
margin-bottom: 20px;
text-align: center
}
.project-content .partners-list li {
display: inline-block;
margin: 0 10px 20px 10px
}
.project-content .partners-list li img {
max-height: 40px;
width: auto
}
@media only screen and (max-width: 767px) {
.project-content .partners-list li img {
max-height: 50px
}
}
.project-content .project-video {
margin: 20px 0
}
.project-content .project-video .item iframe {
max-height: 500px;
width: 100%
}
@media only screen and (max-width: 767px) {
.project-content .project-video .item iframe {
max-height: 300px
}
}
.project-content .project-video .owl-video-tn {
opacity: 0.6 !important
}
.project-content .project-video-nav {
text-align: center
}
.project-content .project-video-nav li {
cursor: pointer;
display: inline-block;
margin: 10px 10px 10px 10px;
font-family: "normaalregular", sans-serif;
text-transform: uppercase;
color: #111;
padding: 10px;
background: #E1E3DC;
border-radius: 8px;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
.project-content .project-video-nav li:hover,
.project-content .project-video-nav li.active {
background: #eb0f00;
color: #FFF
}
@media only screen and (max-width: 767px) {
.project-content .project-video-nav li {
font-size: 12px;
margin: 10px 5px 10px 5px;
padding: 5px
}
}
.project-content .project-gallery {
margin-bottom: 20px
}
.project-content .project-gallery li {
margin-bottom: 1%
}
.main h1 {
margin-bottom: 40px
}
section {
padding: 40px 0
}
section h2 {
margin: 0 0 40px 0
}
section h2 img {
max-height: 40px
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(//normaal.fr/wp-content/themes/normaal/assets/img/mask.png) no-repeat center bottom; background-size: cover;
z-index: 8;
opacity: 0.6; -webkit-transition: opacity, 1s;
transition: opacity, 1s;
-webkit-transition-delay: 2s;
transition-delay: 2s
}
.loading .mask {
opacity: 1
}
.video {
padding: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 500px
}
@media only screen and (max-width: 1200px) {
.video {
position: relative;
top: auto;
left: auto;
min-height: 0;
padding-top: 60px
}
}
.video .poster {
display: none
}
@media only screen and (max-width: 767px) {
.video .poster {
display: block
}
}
.video video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%)
}
@media only screen and (max-width: 1200px) {
.video video {
width: 100%;
height: 100%;
position: relative;
top: auto;
left: auto;
min-width: auto;
min-height: auto;
-webkit-transform: none;
-ms-transform: none;
transform: none;
z-index: 9
}
}
@media only screen and (max-width: 767px) {
.video video {
display: none
}
}
.home .main {
padding-top: 150px;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
-webkit-transition-timing-function: cubic-bezier(0, 0.47, 0.225, 1.195);
transition-timing-function: cubic-bezier(0, 0.47, 0.225, 1.195);
-webkit-transition-delay: 1.2s;
transition-delay: 1.2s
}
@media only screen and (max-width: 1200px) {
.home .main {
padding-top: 40px
}
}
.home .main h1 {
position: absolute;
left: 50%;
top: 10px;
max-width: 800px;
margin-left: -400px;
text-align: center;
font-size: 40px;
font-family: "FFDINWebProBold", sans-serif;
font-weight: normal;
text-transform: none;
color: #111;
color: rgba(0, 0, 0, 0.8);
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform, 0.4s;
transition: transform, 0.4s;
-webkit-transition-timing-function: cubic-bezier(0, 0.47, 0.225, 1.195);
transition-timing-function: cubic-bezier(0, 0.47, 0.225, 1.195);
-webkit-transition-delay: 1.2s;
transition-delay: 1.2s
}
@media only screen and (max-width: 1200px) {
.home .main h1 {
position: relative;
top: -30px;
left: auto;
max-width: none;
margin: 0
}
}
@media only screen and (max-width: 960px) {
.home .main h1 {
font-size: 20px;
width: auto;
margin: 0 10px
}
}
.home .main h1 span {
display: inline-block;
font-family: "normaalregular", sans-serif;
color: #eb0f00;
background: #fffdf6;
border-radius: 8px;
padding: 5px 10px
}
.home .main h1 span u {
text-transform: uppercase;
display: none;
text-decoration: none
}
.home .main h1 [class^="flr-"] {
font-size: 30px;
color: #eb0f00;
position: absolute;
bottom: -16px;
left: 50%;
margin-left: -15px;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
-webkit-animation: translate_y 1.5s infinite;
animation: translate_y 1.5s infinite
}
.home .main.scroll {
padding-top: 40px
}
.home .main.scroll h1 {
-webkit-transform: translateY(-50px);
-ms-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0
}
.home h2 {
margin-bottom: 40px
}
.home.loading h1 {
opacity: 0;
-webkit-transform: translateY(50px);
-ms-transform: translateY(50px);
transform: translateY(50px)
}
.story {
background: #f8f5de;
position: relative;
padding: 0
}
@media only screen and (max-width: 1200px) {
.story {
padding-top: 100px;
background: url(//normaal.fr/wp-content/themes/normaal/assets/img/generaal-bg.jpg) no-repeat top center;
background-size: 1050px auto
}
}
.story .container {
position: relative;
padding: 0
}
@media only screen and (max-width: 1200px) {
.story .section-bg {
display: none
}
}
.story h1.aa-title {
position: absolute;
top: 140px
}
.story .bubble {
position: absolute
}
.story .bubble h2 {
cursor: pointer;
position: relative;
background: #fefef3;
background: rgba(255, 253, 246, 0.8);
color: #111;
border-radius: 220px / 120px;
font-size: 16px;
text-align: center;
padding: 20px;
display: inline-block;
line-height: 100%;
margin-bottom: 10px;
line-height: 150%;
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
-webkit-transition-timing-function: cubic-bezier(0, 0.47, 0.225, 1.195);
transition-timing-function: cubic-bezier(0, 0.47, 0.225, 1.195)
}
.story .bubble h2 u {
font-family: "normaalregular", sans-serif;
font-size: 16px;
color: #eb0f00;
display: inline-block;
text-decoration: none;
line-height: 150%
}
@media only screen and (max-width: 1200px) {
.story .bubble h2 {
margin-bottom: 20px
}
}
.story .bubble h2.expanded {
visibility: hidden;
opacity: 0;
-webkit-transform: translateY(-50px);
-ms-transform: translateY(-50px);
transform: translateY(-50px)
}
.story .bubble h2:after {
content: "";
display: block;
position: absolute;
left: 20px;
bottom: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 10px 0 0px;
border-color: rgba(255, 253, 246, 0.8) transparent transparent transparent;
-webkit-transform: rotate(14deg);
-ms-transform: rotate(14deg);
transform: rotate(14deg)
}
@media only screen and (max-width: 1200px) {
.story .bubble h2:after {
display: none
}
}
.story .bubble .bubble-content {
text-align: left;
position: relative;
background: #fefef3;
color: #111;
font-size: 15px;
border-radius: 12px;
padding: 10px 30px 10px 20px;
max-width: 500px;
margin-left: 0;
visibility: hidden;
opacity: 0;
-webkit-transform: translateY(50px);
-ms-transform: translateY(50px);
transform: translateY(50px);
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
-webkit-transition-timing-function: cubic-bezier(0, 0.47, 0.225, 1.195);
transition-timing-function: cubic-bezier(0, 0.47, 0.225, 1.195)
}
.story .bubble .bubble-content em {
text-decoration: none;
font-style: normal;
display: inline-block
}
.story .bubble .bubble-content .close-bubble {
background: none;
border: none;
position: absolute;
right: -10px;
top: -10px;
padding: 10px;
border-radius: 50px;
background: #fefef3;
cursor: pointer
}
.story .bubble .bubble-content .close-bubble [class*="flr-"] {
font-size: 14px
}
.story .bubble .bubble-content .close-bubble:hover [class*="flr-"] {
color: #eb0f00
}
.story .bubble .bubble-content.visible {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
@media only screen and (max-width: 1200px) {
.story .bubble .bubble-content {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
max-width: none;
margin: 0;
border-radius: 8px;
text-align: center;
padding: 0 20px
}
}
.story .bubble.first {
text-align: left;
left: 20%;
top: 18%
}
.story .bubble.second {
text-align: right;
right: 40%;
top: 34.5%
}
.story .bubble.second h2 {
padding: 30px
}
.story .bubble.second h2:after {
left: auto;
right: 20px;
bottom: 4px;
border-width: 14px 10px 0 0px;
-webkit-transform: rotate(-36deg);
-ms-transform: rotate(-36deg);
transform: rotate(-36deg)
}
.story .bubble.third {
text-align: right;
right: 25%;
top: 52%
}
.story .bubble.third h2 {
border-radius: 230px / 150px;
padding: 30px
}
.story .bubble.third h2:after {
bottom: auto;
left: auto;
right: 20px;
top: 7px;
border-width: 14px 10px 0 0px;
-webkit-transform: rotate(-144deg);
-ms-transform: rotate(-144deg);
transform: rotate(-144deg)
}
.story .bubble.fourth {
left: 51%;
top: 71%
}
.story .bubble.fourth h2 {
border-radius: 300px / 120px;
padding: 20px
}
.story .bubble.fourth h2:after {
bottom: -1px;
left: 18px;
-webkit-transform: rotate(28deg);
-ms-transform: rotate(28deg);
transform: rotate(28deg)
}
.story .bubble.fifth {
left: 51%;
top: 90%
}
.story .bubble.fifth h2:after {
left: -9px;
bottom: 22px;
-webkit-transform: rotate(64deg);
-ms-transform: rotate(64deg);
transform: rotate(64deg)
}
@media only screen and (max-width: 1200px) {
.story .bubble.first,
.story .bubble.second,
.story .bubble.third,
.story .bubble.fourth,
.story .bubble.fifth {
text-align: center;
margin-bottom: 40px;
position: relative;
top: auto;
bottom: auto;
left: auto;
right: auto;
width: auto
}
.story .bubble.first h2,
.story .bubble.second h2,
.story .bubble.third h2,
.story .bubble.fourth h2,
.story .bubble.fifth h2 {
padding: 10px 20px;
float: none;
border-radius: 8px;
margin: 0 10px 10px 10px
}
.story .bubble.first .bubble-content,
.story .bubble.second .bubble-content,
.story .bubble.third .bubble-content,
.story .bubble.fourth .bubble-content,
.story .bubble.fifth .bubble-content {
max-width: none;
border-radius: 8px;
padding: 10px 20px;
margin: 0 20px;
position: relative;
top: auto;
bottom: auto;
left: auto;
right: auto;
width: auto
}
}
.studios {
position: relative;
background: #fefef3;
padding: 80px 0 50px 0
}
.studios:before {
content: "";
display: block;
background: url(//normaal.fr/wp-content/themes/normaal/assets/img/scratch.png) repeat-x top center;
height: 100px;
width: 100%;
position: absolute;
top: -25px
}
@media only screen and (max-width: 767px) {
.studios:before {
top: -30px
}
}
.studios .studio-carrousel {
position: relative;
margin-bottom: 80px;
margin-left: 100px;
overflow: hidden;
max-height: 360px;
overflow: hidden
}
.studios .studio-carrousel:nth-child(2) {
margin-left: 0;
margin-right: 100px
}
@media only screen and (max-width: 1200px) {
.studios .studio-carrousel {
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 0px
}
}
@media only screen and (max-width: 767px) {
.studios .studio-carrousel {
max-height: none
}
}
.studios .studio-carrousel .studio-info {
position: absolute;
top: 0;
width: 400px;
height: 100%;
padding: 20px;
z-index: 95
}
.studios .studio-carrousel .studio-info em {
text-decoration: none;
font-style: normal;
display: inline-block
}
@media only screen and (max-width: 767px) {
.studios .studio-carrousel .studio-info {
position: relative;
top: auto;
width: auto;
height: auto
}
.studios .studio-carrousel .studio-info:after {
z-index: 99;
content: "";
display: block;
position: absolute;
left: 50%;
margin-left: -10px;
bottom: -20px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 0 20px;
border-color: #007bff transparent transparent transparent
}
}
.studios .studio-carrousel .studio-info .title {
text-align: right;
padding-right: 30%;
margin-bottom: 30px
}
.studios .studio-carrousel .studio-info .title h2 {
margin: 0;
display: inline-block
}
.studios .studio-carrousel .studio-info .title h2 span {
display: none
}
.studios .studio-carrousel .studio-info .title span {
font-family: "normaalregular", sans-serif;
color: #FFF;
display: block;
text-align: right;
text-transform: uppercase
}
.studios .studio-carrousel .studio-info p {
color: #FFF;
margin-bottom: 15px
}
.studios .studio-carrousel .slick-carousel {
margin-bottom: 0
}
.studios .studio-carrousel.first .studio-info {
left: 0;
background: #E82E2E;
background: rgba(232, 46, 46, 0.95);
border-radius: 10px;
}
@media only screen and (max-width: 767px) {
.studios .studio-carrousel.first .studio-info {
background: #E82E2E
}
.studios .studio-carrousel.first .studio-info:after {
border-color: #E82E2E transparent transparent transparent
}
}
.studios .studio-carrousel.second .studio-info {
right: 0;
background: #1C7DC7;
background: rgba(28, 125, 199, 0.95);
border-radius: 10px;
}
@media only screen and (max-width: 767px) {
.studios .studio-carrousel.second .studio-info {
background: #1C7DC7
}
.studios .studio-carrousel.second .studio-info:after {
border-color: #1C7DC7 transparent transparent transparent
}
}
.studios .studio-carrousel.second .studio-info h2 img {
max-height: 60px
}
.studios .studio-carrousel.third .studio-info {
left: 0;
background: #4BAB13;
background: rgba(75, 171, 19, 0.95);
border-radius: 10px;
}
@media only screen and (max-width: 767px) {
.studios .studio-carrousel.third .studio-info {
background: #4BAB13
}
.studios .studio-carrousel.third .studio-info:after {
border-color: #4BAB13 transparent transparent transparent
}
}
.press {
background-size: 100% auto !important;
position: relative
}
@media only screen and (max-width: 1200px) {
.press {
background-size: 1800px auto !important
}
}
@media only screen and (max-width: 767px) {
.press {
background-size: 2400px auto !important
}
}
.press:before {
content: "";
display: block;
background: url(//normaal.fr/wp-content/themes/normaal/assets/img/scratch.png) repeat-x top center;
height: 100px;
width: 100%;
position: absolute;
top: -28px
}
@media only screen and (max-width: 767px) {
.press:before {
top: -30px
}
}
.press h3 {
background: #fefef3;
padding: 5px;
display: inline-block;
border-radius: 8px;
position: relative;
bottom: -30px;
margin-left: 20px
}
.press h3:before {
content: "";
display: block;
height: 50px;
background: #fefef3;
position: absolute;
width: 600px;
left: -600px;
bottom: 0;
z-index: 9
}
.press .press-list {
padding: 20px;
background: #fefef3;
background: rgba(248, 248, 239, 0.6);
border-radius: 20px;
}
@media only screen and (max-width: 767px) {
.press .press-list {
padding-top: 50px
}
}
.press .press-list li {
font-family: "FFDINWebProBold", sans-serif
}
.press .press-list li p {
font-size: 20px
}
.press .press-list li span {
display: block;
color: #eb0f00;
font-size: 18px
}
.press .press-list li:nth-child(even) {
text-align: right;
margin-right: 52%
}
@media only screen and (max-width: 767px) {
.press .press-list li:nth-child(even) {
margin: 0 0 20px 0;
text-align: left
}
}
.press .press-list li:nth-child(odd) {
margin-left: 52%
}
@media only screen and (max-width: 767px) {
.press .press-list li:nth-child(odd) {
margin: 0 0 20px 0;
text-align: left
}
}
.staaf-content h1.aa-title {
background: #fefef3;
padding: 5px;
display: inline-block;
border-radius: 8px;
position: relative;
bottom: -30px;
margin: 0 0 0 20px
}
.staaf-content .team-list {
background: #f8f8ef;
padding-top: 40px
}
.staaf-content .team-list li {
width: 50%;
margin-bottom: 20px;
position: relative;
display: block
}
.staaf-content .team-list li::after {
clear: both;
content: "";
display: table
}
@media only screen and (max-width: 767px) {
.staaf-content .team-list li {
width: auto
}
}
.staaf-content .team-list li .team-list-content {
background: #e9eae2;
width: 600px;
display: block
}
.staaf-content .team-list li .team-list-content::after {
clear: both;
content: "";
display: table
}
@media only screen and (max-width: 1200px) {
.staaf-content .team-list li .team-list-content {
width: 100%
}
}
.staaf-content .team-list li .team-list-content .portrait {
width: 25%
}
.staaf-content .team-list li .team-list-content .info {
width: 75%;
padding-top: 10px;
margin-right: 0
}
.staaf-content .team-list li .team-list-content .info h4 {
font-family: "FFDINWebPro", sans-serif;
font-weight: normal;
font-size: 24px
}
@media only screen and (max-width: 1200px) {
.staaf-content .team-list li .team-list-content .info h4 {
font-size: 20px
}
}
.staaf-content .team-list li .team-list-content .info p {
font-size: 18px
}
@media only screen and (max-width: 1200px) {
.staaf-content .team-list li .team-list-content .info p {
font-size: 14px
}
}
.staaf-content .team-list li .team-list-content .info .show-modal {
margin-top: 20px;
border: none;
background: #e9eae2;
color: #111;
cursor: pointer;
height: 35px;
position: relative
}
.staaf-content .team-list li .team-list-content .info .show-modal [class*="flr-"] {
vertical-align: middle;
font-size: 20px
}
@media only screen and (max-width: 1200px) {
.staaf-content .team-list li .team-list-content .info .show-modal {
margin-top: 0px
}
}
.staaf-content .team-list li+li {
float: left
}
@media only screen and (max-width: 767px) {
.staaf-content .team-list li+li {
float: none
}
}
.staaf-content .team-list li:nth-child(1) .team-list-content .portrait,
.staaf-content .team-list li:nth-child(4) .team-list-content .portrait,
.staaf-content .team-list li:nth-child(5) .team-list-content .portrait,
.staaf-content .team-list li:nth-child(8) .team-list-content .portrait,
.staaf-content .team-list li:nth-child(9) .team-list-content .portrait {
float: right
}
.staaf-content .team-list li:nth-child(1) .team-list-content .info,
.staaf-content .team-list li:nth-child(4) .team-list-content .info,
.staaf-content .team-list li:nth-child(5) .team-list-content .info,
.staaf-content .team-list li:nth-child(8) .team-list-content .info,
.staaf-content .team-list li:nth-child(9) .team-list-content .info {
text-align: right;
float: right;
padding-right: 15px
}
.staaf-content .team-list li:nth-child(1) .team-list-content .info .show-modal,
.staaf-content .team-list li:nth-child(4) .team-list-content .info .show-modal,
.staaf-content .team-list li:nth-child(5) .team-list-content .info .show-modal,
.staaf-content .team-list li:nth-child(8) .team-list-content .info .show-modal,
.staaf-content .team-list li:nth-child(9) .team-list-content .info .show-modal {
right: -15px;
padding: 0 25px 0 10px
}
.staaf-content .team-list li:nth-child(2) .team-list-content .portrait,
.staaf-content .team-list li:nth-child(3) .team-list-content .portrait,
.staaf-content .team-list li:nth-child(6) .team-list-content .portrait,
.staaf-content .team-list li:nth-child(7) .team-list-content .portrait {
float: left
}
.staaf-content .team-list li:nth-child(2) .team-list-content .info,
.staaf-content .team-list li:nth-child(3) .team-list-content .info,
.staaf-content .team-list li:nth-child(6) .team-list-content .info,
.staaf-content .team-list li:nth-child(7) .team-list-content .info {
text-align: left;
float: left;
padding-left: 15px
}
.staaf-content .team-list li:nth-child(2) .team-list-content .info .show-modal,
.staaf-content .team-list li:nth-child(3) .team-list-content .info .show-modal,
.staaf-content .team-list li:nth-child(6) .team-list-content .info .show-modal,
.staaf-content .team-list li:nth-child(7) .team-list-content .info .show-modal {
left: -15px;
padding: 0 10px 0 25px
}
.staaf-content .team-list li:nth-child(even) .team-list-content {
float: right
}
@media only screen and (max-width: 767px) {
.staaf-content .team-list li:nth-child(even) .team-list-content {
float: none
}
}
.staaf-content .team-list li:nth-child(odd) .team-list-content {
float: left
}
@media only screen and (max-width: 767px) {
.staaf-content .team-list li:nth-child(odd) .team-list-content {
float: none
}
}
.staaf-content .team-list li:first-child .team-list-content {
float: right
}
@media only screen and (max-width: 767px) {
.staaf-content .team-list li:first-child .team-list-content {
float: none
}
}
.staaf-content .team-list li:nth-child(1),
.staaf-content .team-list li:nth-child(4),
.staaf-content .team-list li:nth-child(8) {
background: #E9EAE2
}
.staaf-content .team-list li:nth-child(1) .team-list-content,
.staaf-content .team-list li:nth-child(4) .team-list-content,
.staaf-content .team-list li:nth-child(8) .team-list-content {
background: #d3d7d2
}
.staaf-content .team-list li:nth-child(1) .team-list-content .show-modal,
.staaf-content .team-list li:nth-child(4) .team-list-content .show-modal,
.staaf-content .team-list li:nth-child(8) .team-list-content .show-modal {
padding: 0 25px 0 10px;
right: -15px;
left: auto
}
.staaf-content .team-list li:nth-child(3),
.staaf-content .team-list li:nth-child(7) {
background: #E9EAE2
}
.staaf-content .team-list li:nth-child(3) .team-list-content,
.staaf-content .team-list li:nth-child(7) .team-list-content {
background: #d3d7d2
}
.staaf-content .team-list li:nth-child(3) .team-list-content .show-modal,
.staaf-content .team-list li:nth-child(7) .team-list-content .show-modal {
padding: 0 10px 0 25px;
left: -15px;
left: auto
}
.staaf-content .team-list li:nth-child(2) .team-list-content .info .show-modal,
.staaf-content .team-list li:nth-child(5) .team-list-content .info .show-modal,
.staaf-content .team-list li:nth-child(6) .team-list-content .info .show-modal,
.staaf-content .team-list li:nth-child(9) .team-list-content .info .show-modal {
background: #d3d7d2
}
.staaf-content .staaf-list {
background: #f8f8ef;
padding-top: 40px
}
.staaf-content .staaf-list li {
width: 50%;
margin-bottom: 20px;
position: relative;
float: left;
display: block
}
.staaf-content .staaf-list li::after {
clear: both;
content: "";
display: table
}
@media only screen and (max-width: 767px) {
.staaf-content .staaf-list li {
width: auto;
float: none
}
}
.staaf-content .staaf-list li .team-list-content {
background: #e9eae2;
width: 600px;
display: block
}
.staaf-content .staaf-list li .team-list-content::after {
clear: both;
content: "";
display: table
}
@media only screen and (max-width: 1200px) {
.staaf-content .staaf-list li .team-list-content {
width: auto
}
}
.staaf-content .staaf-list li .team-list-content .portrait {
width: 25%
}
.staaf-content .staaf-list li .team-list-content .info {
width: 75%;
padding-top: 10px
}
.staaf-content .staaf-list li .team-list-content .info h4 {
font-family: "FFDINWebPro", sans-serif;
font-weight: normal;
font-size: 24px
}
@media only screen and (max-width: 1200px) {
.staaf-content .staaf-list li .team-list-content .info h4 {
font-size: 20px
}
}
.staaf-content .staaf-list li .team-list-content .info p {
font-size: 18px
}
@media only screen and (max-width: 1200px) {
.staaf-content .staaf-list li .team-list-content .info p {
font-size: 14px
}
}
.staaf-content .staaf-list li .team-list-content .info .show-modal {
margin-top: 20px;
border: none;
background: #d3d7d2;
color: #111;
cursor: pointer;
height: 35px;
position: relative
}
.staaf-content .staaf-list li .team-list-content .info .show-modal [class*="flr-"] {
vertical-align: middle;
font-size: 20px
}
@media only screen and (max-width: 1200px) {
.staaf-content .staaf-list li .team-list-content .info .show-modal {
margin-top: 0px
}
}
.staaf-content .staaf-list li:nth-child(1) .team-list-content .portrait,
.staaf-content .staaf-list li:nth-child(2) .team-list-content .portrait,
.staaf-content .staaf-list li:nth-child(5) .team-list-content .portrait,
.staaf-content .staaf-list li:nth-child(6) .team-list-content .portrait,
.staaf-content .staaf-list li:nth-child(9) .team-list-content .portrait,
.staaf-content .staaf-list li:nth-child(10) .team-list-content .portrait,
.staaf-content .staaf-list li:nth-child(13) .team-list-content .portrait {
float: left
}
.staaf-content .staaf-list li:nth-child(1) .team-list-content .info,
.staaf-content .staaf-list li:nth-child(2) .team-list-content .info,
.staaf-content .staaf-list li:nth-child(5) .team-list-content .info,
.staaf-content .staaf-list li:nth-child(6) .team-list-content .info,
.staaf-content .staaf-list li:nth-child(9) .team-list-content .info,
.staaf-content .staaf-list li:nth-child(10) .team-list-content .info,
.staaf-content .staaf-list li:nth-child(13) .team-list-content .info {
text-align: left;
float: left;
padding-left: 15px
}
.staaf-content .staaf-list li:nth-child(1) .team-list-content .info .show-modal,
.staaf-content .staaf-list li:nth-child(2) .team-list-content .info .show-modal,
.staaf-content .staaf-list li:nth-child(5) .team-list-content .info .show-modal,
.staaf-content .staaf-list li:nth-child(6) .team-list-content .info .show-modal,
.staaf-content .staaf-list li:nth-child(9) .team-list-content .info .show-modal,
.staaf-content .staaf-list li:nth-child(10) .team-list-content .info .show-modal,
.staaf-content .staaf-list li:nth-child(13) .team-list-content .info .show-modal {
left: -15px;
padding: 0 10px 0 25px
}
.staaf-content .staaf-list li:nth-child(3) .team-list-content .portrait,
.staaf-content .staaf-list li:nth-child(4) .team-list-content .portrait,
.staaf-content .staaf-list li:nth-child(7) .team-list-content .portrait,
.staaf-content .staaf-list li:nth-child(8) .team-list-content .portrait,
.staaf-content .staaf-list li:nth-child(11) .team-list-content .portrait,
.staaf-content .staaf-list li:nth-child(12) .team-list-content .portrait {
float: right
}
.staaf-content .staaf-list li:nth-child(3) .team-list-content .info,
.staaf-content .staaf-list li:nth-child(4) .team-list-content .info,
.staaf-content .staaf-list li:nth-child(7) .team-list-content .info,
.staaf-content .staaf-list li:nth-child(8) .team-list-content .info,
.staaf-content .staaf-list li:nth-child(11) .team-list-content .info,
.staaf-content .staaf-list li:nth-child(12) .team-list-content .info {
text-align: right;
float: right;
padding-right: 15px
}
.staaf-content .staaf-list li:nth-child(3) .team-list-content .info .show-modal,
.staaf-content .staaf-list li:nth-child(4) .team-list-content .info .show-modal,
.staaf-content .staaf-list li:nth-child(7) .team-list-content .info .show-modal,
.staaf-content .staaf-list li:nth-child(8) .team-list-content .info .show-modal,
.staaf-content .staaf-list li:nth-child(11) .team-list-content .info .show-modal,
.staaf-content .staaf-list li:nth-child(12) .team-list-content .info .show-modal {
right: -15px;
padding: 0 25px 0 10px
}
.staaf-content .staaf-list li:nth-child(odd) .team-list-content {
float: right
}
@media only screen and (max-width: 767px) {
.staaf-content .staaf-list li:nth-child(odd) .team-list-content {
float: none
}
}
.staaf-content .staaf-list li:nth-child(even) .team-list-content {
float: none
}
@media only screen and (max-width: 767px) {
.staaf-content .staaf-list li:nth-child(even) .team-list-content {
float: none
}
}
.staaf-content .staaf-list li:nth-child(1) .team-list-content,
.staaf-content .staaf-list li:nth-child(4) .team-list-content,
.staaf-content .staaf-list li:nth-child(5) .team-list-content,
.staaf-content .staaf-list li:nth-child(8) .team-list-content,
.staaf-content .staaf-list li:nth-child(9) .team-list-content,
.staaf-content .staaf-list li:nth-child(12) .team-list-content {
background: #d3d7d2
}
.staaf-content .staaf-list li:nth-child(1) .team-list-content .show-modal,
.staaf-content .staaf-list li:nth-child(4) .team-list-content .show-modal,
.staaf-content .staaf-list li:nth-child(5) .team-list-content .show-modal,
.staaf-content .staaf-list li:nth-child(8) .team-list-content .show-modal,
.staaf-content .staaf-list li:nth-child(9) .team-list-content .show-modal,
.staaf-content .staaf-list li:nth-child(12) .team-list-content .show-modal {
background: #e9eae2
}
.staaf-content .staaf-list li:nth-child(2),
.staaf-content .staaf-list li:nth-child(3),
.staaf-content .staaf-list li:nth-child(6),
.staaf-content .staaf-list li:nth-child(7),
.staaf-content .staaf-list li:nth-child(10),
.staaf-content .staaf-list li:nth-child(11) {
background: #DADBD4
}
.staaf-content .staaf-carousel {
background: #E9EAE2;
margin: 40px 0
}
.staaf-content .staaf-carousel .container {
padding: 0
}
.staaf-content .staaf-carousel .slick-carousel {
margin-bottom: 0
}
.staaf-content .staaf-carousel .slick-carousel .slick-prev,
.staaf-content .staaf-carousel .slick-carousel .slick-next {
z-index: 99
}
.staaf-content .staaf-carousel .slick-carousel .slick-prev {
left: 10px
}
@media only screen and (max-width: 767px) {
.staaf-content .staaf-carousel .slick-carousel .slick-prev {
display: none !important
}
}
.staaf-content .staaf-carousel .slick-carousel .slick-next {
right: 10px
}
@media only screen and (max-width: 767px) {
.staaf-content .staaf-carousel .slick-carousel .slick-next {
display: none !important
}
}
.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 800px;
min-width: 400px;
height: auto;
z-index: 9999999999;
visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%)
}
@media only screen and (max-width: 767px) {
.md-modal {
-webkit-transform: none;
-ms-transform: none;
transform: none;
visibility: visible;
width: auto;
height: auto;
position: relative;
top: auto;
left: auto;
display: none;
min-width: 0;
clear: both
}
}
.md-show .md-modal {
visibility: visible
}
.md-modal .md-content {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
opacity: 0;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
@media only screen and (max-width: 767px) {
.md-modal .md-content {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1
}
}
.md-show .md-modal .md-content {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1
}
.md-modal button {
position: absolute;
top: 10px;
right: 10px;
border: none;
background: none;
cursor: pointer;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
.md-modal button:hover {
color: #eb0f00
}
.md-modal .popup-text {
background: #FEFEF3;
color: #000;
padding: 20px
}
.md-modal .popup-text h4 {
text-align: left;
font-family: "FFDINWebPro", sans-serif;
font-weight: normal;
color: #000
}
.md-modal .popup-text h4 span {
font-size: 16px
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
background: rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s
}
.hide-header .md-overlay {
opacity: 1;
visibility: visible
}
@media only screen and (max-width: 767px) {
.md-overlay {
display: none
}
}
.aa-title.contact {
margin: 0 auto;
padding: 10px 0;
text-align: center;
line-height: 100%
}
.aa-title.contact a {
display: block;
font-family: "FFDINWebPro", sans-serif;
font-size: 20px;
margin-left: 5px
}
.contact-list {
margin: 80px 0px 20px 0px
}
.contact-list li {
float: left;
display: block;
margin-right: 2.56122%;
width: 22.43878%;
background: #f0f1e8;
border-radius: 8px;
padding: 40px;
text-align: center;
font-family: "FFDINWebPro", sans-serif;
font-size: 18px;
min-height: 240px
}
.contact-list li:last-child {
margin-right: 0
}
@media only screen and (max-width: 767px) {
.contact-list li {
width: auto;
margin: 0;
float: none;
margin-bottom: 20px;
min-height: none
}
}
.contact-list li h2 img {
max-width: 185px;
display: inline-block;
margin-bottom: 10px
}
.contact-list li h2 span {
display: none
} .project-content .project-infos {
display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start;
text-align: center; width: 100%;
max-width: 1100px; margin-left: auto;
margin-right: auto;
border: 0; padding: 0;
background: transparent;
}
.project-content .project-infos .project-logo {
order: 1; width: 100%;
margin: 0 0 20px 0; display: block !important;
}
.project-content .project-infos .project-logo img {
max-width: 300px; width: 100%;
height: auto;
margin: 0 auto; display: block;
}
.project-content .project-infos .project-text {
order: 2;
width: 100%;
max-width: 800px; padding: 0; background: transparent;
margin: 0 auto;
text-align: center; } .project-content .project-infos .project-text .title {
margin-bottom: 10px;
}  .project-content .project-infos {
display: flex !important; flex-direction: column; align-items: center; text-align: center; border: 0; padding: 0;
background: transparent;
} .project-content .project-infos .project-logo,
.project-content .project-infos .project-text {
display: block !important;
width: 100% !important;
float: none !important;
vertical-align: baseline !important;
padding: 0 !important;
background: transparent !important;
} .project-content .project-infos .project-logo {
display: flex;
justify-content: center;
margin: 0 0 20px 0;
} .project-content .project-infos .project-logo img {
width: auto !important; max-width: 300px; height: auto;
display: block;
} @media (max-width: 480px) {
.project-content .project-infos .project-logo img {
max-width: min(70vw, 300px); }
} .project-content .project-infos .project-text {
max-width: 800px; margin: 0 auto;
}  .project-content .project-video .item iframe,
.project-content .project-video .item video {
max-height: none !important;
} .project-content .project-video .item.video-embed,
.project-content .project-video .owl-item .item.video-embed {
position: relative !important;
width: 100% !important; padding-top: 56.25% !important;
height: 0 !important; overflow: hidden;
} .project-content .project-video .item.video-embed iframe,
.project-content .project-video .item.video-embed video,
.project-content .project-video .item.video-embed .wp-video,
.project-content .project-video .item.video-embed .mejs-container {
position: absolute !important;
top: 0; left: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
display: block;
border: 0;
} .project-content .project-video .wp-block-embed,
.project-content .project-video .wp-block-video,
.project-content .project-video .wp-block-embed__wrapper {
margin: 0 !important;
}
.project-content .project-video .wp-block-embed__wrapper iframe {
width: 100% !important;
height: 100% !important;
} .project-content .project-video .owl-carousel,
.project-content .project-video .owl-stage-outer,
.project-content .project-video .owl-stage,
.project-content .project-video .owl-item {
height: auto !important;
}  .project-content .project-video {
margin-bottom: 5px !important; } .project-content .project-video-nav {
margin-top: 5px !important;
margin-bottom: 40px !important; } .project-content .project-video-nav li {
display: inline-block;
margin: 0 8px;
padding: 4px 10px;
border-radius: 8px;
background: rgba(0,0,0,0.05);
transition: background 0.2s ease;
cursor: pointer;
}
.project-content .project-video-nav li:hover {
background: rgba(0,0,0,0.15);
}
.project-content .project-video {
margin-bottom: 60px !important; } .project-content .project-video .item.video-embed {
border-radius: 40px; overflow: hidden; position: relative;
}  .project-content .project-video {
margin-bottom: 60px !important;
} .project-content .project-video:has(+ .project-video-nav) {
margin-bottom: 10px !important;
}