@font-face {
font-family: font1;
src: url(font1.woff2);
}

@font-face {
font-family: font2;
src: url(font2.woff2);
}

@font-face {
font-family: font3;
src: url(font3.woff2);
}


/* Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body{
background-color: #f9f9f9;
font-family: font1;
font-size: 1em;
}

a{
text-decoration: none;
}

.nav ul{
list-style: none;
margin: 20px 0px 0px 0px;
}

/* Header */
.header{
background-color: #222;
box-shadow: 1px 1px 5px 0px #000;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}

/* Logo */
.logo{
display: inline-block;
color: #f9f9f9;
font-size: 30px;
margin: 8px 10px 0px 20px;
width: 32px;
}

/* Nav menu */
.nav{
width: 100%;
height: 100%;
position: fixed;
background-color: #222;
overflow: hidden;

}

.menu a{
display: block;
padding: 12px;
color: #999;
font-family: font2;
}

.menu a:hover{
color: #FFF;
background-color: #080808;
}

.nav{
max-height: 0;
transition: max-height .5s ease-out;
}

/* Menu Icon */

.hamb{
cursor: pointer;
float: right;
padding: 25px 20px;
}


.hamb-line {
background: #f9f9f9;
display: block;
height: 2px;
position: relative;
width: 25px;
}

.hamb-line::before, .hamb-line::after {
background: #f9f9f9;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}

.hamb-line::before{
top: 9px;
}

.hamb-line::after{
top: -9px;
}


.side-menu {
display: none;
}

/* Toggle menu icon */

.side-menu:checked ~ nav{
max-height: 100%;
}

.side-menu:checked ~ .hamb .hamb-line {
background: transparent;
}

.side-menu:checked ~ .hamb .hamb-line::before {
transform: rotate(-45deg);
top:0;

}

.side-menu:checked ~ .hamb .hamb-line::after {
transform: rotate(45deg);
top:0;
}

.Highlight {
background-color: #080808;
color: #FFF !important;
}

#A, #B, #C {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 30px;
width: 100%;
}

#A {
height: calc(100vw / 1.8 + 47px);
}

.over {
 background: rgba(0, 0, 0, .7);
width: 100%;
height: calc(100vw / 1.8 + 47px);
position: fixed;
right: 0;
top: 0;
z-index: -2;
}

.dots {
postion: absolute;
}

.in {
font-family: font3;
margin-top: 40px;
color: #FFF;
z-index: 0;
text-align: center;
Font-size: 25px;
text-shadow: 1px 4px 5px #000000;
direction: rtl;
}

.title {
margin-top: 50px;
}

#B {
position: relative;
background-color: #fdce65;
z-index: 1;
text-align:center;
}

#C {
position: relative;
background-color: #aacbf5;
text-align:center;
padding-bottom: 200px;
direction: rtl;
}

.gradient {
border: 0px solid red;
width: 100%;
height: 100px;
margin-top: 0px;
margin-bottom: 0px;
background: #aacbf5;
z-index: -1;
}
.gradient svg {
height: 100%;
width: 100%;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}
.gradient svg .main {
fill: #fdce65;
}

#A video {
width: 100vw;
height: auto;
object-fit: cover;
left: 0;
right: 0;
top: 47px;
bottom: 0;
z-index: -2;
position: fixed;
opacity: 1;
}

.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5);
transition: 0.3s;
max-width: 250px;
display: inline-block;
margin: 30px 30px;
text-align:center;
vertical-align: top;
border-radius: 25px;
padding: 20px;
}

.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.8);
}

.card img {
opacity: .6;
border-bottom: 1px solid #000;
}

.card img:hover {
opacity: 1;
}

.container {
padding: 2px 16px;
}

.skew {
color: #fff;
padding: 20px;
margin: 20px;
transform: skewX(-20deg);
width: 85%;
display: inline-block;
border-radius: 10px;
//box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5);
box-shadow: -5px 0px 0px 0px black, 5px 0px 0px 0px black;
outline: 2px dashed #CCC;
outline-offset:-10px;
}

.skew p {
transform: skewX(20deg);
text-align: right;
direction: rtl;
}

.color1 {
background: #325651;
}

.color2 {
background: #323c56;
}

.color3 {
background: #563232;
}

.color4 {
background: #484e12;
}

.clear {
clear: both;
padding:50px;
}

.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #d1e4fb;
}

.address {
margin: 0px -5px 0px 0px;
font-size: .8em;
}

.address:before {
background-image: url(address.png);
background-size: 30px 30px;
display: inline-block;
width: 30px; 
height: 30px;
vertical-align: middle;
margin-left: 5px;
margin-right: 3px;
filter: drop-shadow(0 0 2px #000);
position: absolute; top: -23px; bottom: 0px; left: -6px; opacity: 1;
content: "";
}

.postalcode:before {
background-image: url(postalcode.png);
background-size: 30px 30px;
display: inline-block;
width: 30px; 
height: 30px;
vertical-align: middle;
margin-left: 5px;
margin-right: 3px;
filter: drop-shadow(0 0 2px #000);
position: absolute; top: -23px; bottom: 0px; left: -6px; opacity: 1;
content: "";
}

.telephone:before {
background-image: url(telephone.png);
background-size: 30px 30px;
display: inline-block;
width: 30px; 
height: 30px;
vertical-align: middle;
margin-left: 5px;
margin-right: 3px;
filter: drop-shadow(0 0 2px #000);
position: absolute; top: -23px; bottom: 0px; left: -6px; opacity: 1;
content: "";
}

.email:before {
background-image: url(email.png);
background-size: 30px 30px;
display: inline-block;
width: 30px; 
height: 30px;
vertical-align: middle;
margin-left: 5px;
margin-right: 3px;
filter: drop-shadow(0 0 2px #000);
position: absolute; top: -23px; bottom: 0px; left: -6px; opacity: 1;
content: "";
}

.map {
text-align: center;
width: 90%;
max-width: 500px;
display: block;
margin: 0px auto;
padding: 20px;
background-color: #92add0;
border: dashed 2px #fff;
border-radius: 20px;
}

.map img {
width: 100%;

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.8);
border-radius: 20px;
}


/* Responsiveness */

@media (min-width: 768px) {
.nav{
max-height: none;
top: 0;
position: relative;
float: right;
width: fit-content;
background-color: transparent;

}

.menu li{
float: right;
}


.nav ul{
list-style: none;
margin: 0px 50px 0px 0px;
}

.menu a:hover{
//background-color: transparent;
background-color: #080808;
color: #FFF;

}

.hamb{
display: none;
}
	
.in {
font-family: font3;
margin-top: 40px;
color: #FFF;
z-index: 0;
text-align: center;
font-size: 50px;
direction: rtl;
}

.title {
margin-top: 180px;
}

.skew {
max-width: 350px;
}

}