/* ---------- BODY ---------- */

@font-face {
font-family:'Archivo ExtraBold';
src: url('Archivo ExtraBold.eot');
src: url('Archivo ExtraBold.eot?#iefix') format('embedded-opentype'),
url('Archivo ExtraBold.woff2') format('woff2'),
url('Archivo ExtraBold.woff') format('woff');
font-weight: 800;
font-style: normal;
font-stretch: normal;
unicode-range: U+0020-FB02;
-webkit-font-feature-settings: "tnum";
-moz-font-feature-settings: "tnum";
-ms-font-feature-settings: "tnum";
-o-font-feature-settings: "tnum";
font-feature-settings: "tnum";
}

@font-face {
font-family:'Archivo';
src: url('Archivo Regular.eot');
src: url('Archivo Regular.eot?#iefix') format('embedded-opentype'),
url('Archivo Regular.woff2') format('woff2'),
url('Archivo Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-stretch: normal;
unicode-range: U+0020-FB02;
-webkit-font-feature-settings: "tnum";
-moz-font-feature-settings: "tnum";
-ms-font-feature-settings: "tnum";
-o-font-feature-settings: "tnum";
font-feature-settings: "tnum";
}

html {
height: 100%;
min-height: 100%;
overflow-y: scroll;
scroll-behavior: smooth;
}

body {
background: #000000;
text-align: left;
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100%;
margin: 0 0 0 0;
}

body {
opacity: 0;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-ms-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
transition-property: opacity;
}

body.fade {
opacity: 1;
}

/* ---------- CONTENT ---------- */

.header {
position: relative;
width: 100%;
clear: both;
margin: 0 0 0 0;
padding: 8px 0 0 0;
}

@media screen and (max-width: 1023px) {
.header {
margin: -2px 0 0 0;
}
}

@media screen and (max-width: 767px) {
.header {
margin: -4px 0 0 0;
}
}

.content {
position: relative;
width: 100%;
clear: both;
margin: 0 0 0 0;
}

.footer {
position: relative;
width: 100%;
clear: both;
margin: 0 0 0 0;
}

/* TEXT */

.text {
position: relative;
margin: 80px 48px 80px 48px;
padding: 0 0 0 0;
}

@media screen and (max-width: 1023px) {
.text {
margin: 60px 36px 60px 36px;
padding: 0 0 0 0;
}
}

@media screen and (max-width: 767px) {
.text {
margin: 40px 24px 40px 24px;
padding: 0 0 0 0;
}
}

h1,
h2,
h3,
h4 {
font-family: 'Archivo ExtraBold', sans-serif;
letter-spacing: -0.01em;
text-align: center;
text-transform: uppercase;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

h1 {
font-size: 70px;
line-height: 64px;
color: #70778E;
}

h2 {
font-size: 23px;
line-height: 32px;
color: #CCCCCC;
}

.darktourism {
font-size: 46.5px;
line-height: 48px;
color: #CCCCCC;
}

.number {
font-size: 44px;
line-height: 46px;
color: #333333;
}

.title1 {
font-size: 70px;
line-height: 64px;
color: #E30613;
}

.title2 {
font-size: 23px;
line-height: 32px;
color: #E30613;
}

p {
font-family: 'Archivo', sans-serif;
font-size: 23px;
line-height: 30px;
letter-spacing: -0.01em;
text-align: center;
text-transform: uppercase;
color: #808080;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

strong {
font-family: 'Archivo ExtraBold', sans-serif;
color: #CCCCCC;
}

@media screen and (max-width: 1023px) {
h1,
.title1 {
font-size: 52.5px;
line-height: 48px;
}
}

@media screen and (max-width: 1023px) {
h2,
.title2,
p {
font-size: 17.25px;
line-height: 24px;
}
}

@media screen and (max-width: 1023px) {
.darktourism {
font-size: 34.875px;
line-height: 36px;
}
}

@media screen and (max-width: 1023px) {
.number {
font-size: 33px;
line-height: 34.5px;
}
}

@media screen and (max-width: 767px) {
h1,
.title1 {
font-size: 35px;
line-height: 32px;
}
}

@media screen and (max-width: 767px) {
.title1 {
margin: 3px 0 0 0;
}
}

@media screen and (max-width: 767px) {
h2,
.title2,
p {
font-size: 15px;
line-height: 21px;
margin: 2px 0 0 0;
}
}

@media screen and (max-width: 767px) {
h2,
.title2 {
}
}

@media screen and (max-width: 767px) {
.darktourism {
font-size: 23.25px;
line-height: 24px;
}
}

@media screen and (max-width: 767px) {
.number {
font-size: 22px;
line-height: 23px;
margin: 3px 0 0 0;
}
}

a {
outline: none;
text-decoration: none;
}

a:link,
a:visited,
a:hover {
color: #808080;
}

.ahover {
background:
linear-gradient(to right, rgba(128, 128, 128, 1), rgba(128, 128, 128, 1)),
linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
color: #808080 !important;
background-size: 100% 1px, 0 1px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 0.3s;
}

.ahover:hover,
.ahover:focus {
background-size: 0 1px, 100% 1px;
}

/* LINE */

.line {
position: relative;
width: 96px;
height: 1px;
background: #F4F3F1;
clear: both;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
opacity: 0.5;
}

@media screen and (max-width: 1023px) {
.line {
width: 72px;
}
}

@media screen and (max-width: 767px) {
.line {
width: 48px;
margin: -1px auto -1px auto;
}
}

/* IMAGE */

.logos {
position: relative;
margin: 72px 48px 72px 48px;
padding: 0 0 0 0;
}

@media screen and (max-width: 1023px) {
.logos {
margin: 54px 36px 54px 36px;
}
}

@media screen and (max-width: 767px) {
.logos {
margin: 33px 24px 33px 24px;
}
}

ul,
h2 ul,
p ul {
list-style: none;
text-align: center;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

li,
h2 li,
p li {
margin-right: 0;
display: inline-block;
}

.logo {
height: 64px;
width: auto;
margin: 8px 14px 8px 14px;
opacity: 0.8;
}

@media screen and (max-width: 1023px) {
.logo {
height: 48px;
margin: 6px 10px 0 10px;
}
}

@media screen and (max-width: 767px) {
.logo {
height: 32px;
margin: 8px 10px 2px 10px;
}
}

.kosakowskifilms {
height: 64px;
width: auto;
margin: 11px 14px 16px 14px;
}

@media screen and (max-width: 1023px) {
.kosakowskifilms {
height: 48px;
margin: 12px 10px 9px 10px;
}
}

@media screen and (max-width: 767px) {
.kosakowskifilms {
height: 32px;
}
}

.credit {
font-family: 'Archivo', sans-serif;
font-size: 11.5px;
line-height: 12px;
letter-spacing: -0.01em;
text-align: center;
text-transform: uppercase;
color: #808080;
margin: 8px 0 0 0;
padding: 0 0 30px 0;
}

@media screen and (max-width: 1023px) {
.credit {
margin: 8px 0 0 0;
padding: 0 0 22px 0;
}
}