* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: 'Didot';
    src: url('../fonts/Didot.woff2') format('woff2'),
         url('../fonts/Didot.woff') format('woff'),
         url('../fonts/Didot.otf') format('otf');
    font-weight: normal;
    font-style: normal;

}

body {
    font-family: 'Didot';
  font-weight: normal;
  line-height: 32px;
  margin: 0;
}
a{color: #211111;}
a:hover {color: #000;}
p {margin: 0 0 20px;}
.bp-rel {position: relative;}
.clr {clear: both;}
.fl {float: left;}
.fr {float: right;}
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.container.pl0{padding-left: 0;}
.container.pr0{padding-right: 0;}
 .d-flex {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
}
.justify-content-start {
    -webkit-box-pack: start!important;
    -ms-flex-pack: start!important;
    justify-content: flex-start!important;
}
.justify-content-end {
    -webkit-box-pack: end!important;
    -ms-flex-pack: end!important;
    justify-content: flex-end!important;
}
.justify-content-center {
    -webkit-box-pack: center!important;
    -ms-flex-pack: center!important;
    justify-content: center!important;
}
.justify-content-between {
    -webkit-box-pack: justify!important;
    -ms-flex-pack: justify!important;
    justify-content: space-between!important;
}
.justify-content-around {
    -ms-flex-pack: distribute!important;
    justify-content: space-around!important;
}

.align-items-center {
    -ms-flex-align: center!important;
    align-items: center!important;
}

header {
    background: #E3D2C4;
    height: 74px;
}
#landing-page {
    background: url(../img/bg-desktop.svg) no-repeat center top;
    background-size: contain;
    margin: 40px 0 0;
    position: relative;
    height: calc(100vh - 231px);
}
#landing-page .wrap{
    position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 95%;
}
.l-image {
    max-width: 918px;
    margin: 0 auto 30px;
    text-align: center;
}
.l-image img {height: auto;}
.l-text {
    font-size: 25px;
    line-height: 32px;
    text-align: center;
    color: #000000;
    margin-bottom: 30px;
}
.sosmed {}
.sosmed a {margin: 0 10px;}
.sosmed a img {max-width: 60px;}

footer {
    background: #E3D2C4;
    height: 117px;
    font-weight: normal;
    font-size: 25px;
    line-height: 32px;
}
footer span {line-height: normal;}
.desktop_only {display: block;}
.mobile_only {display: none;}

.kaul {width: 60%; display: block; margin: 0 auto;}
.comingsoon {width: 50%; margin: -10px auto 0; display: block;}

@media (max-width: 768px){
    .desktop_only {display: none;}
    .mobile_only {display: block;}
    p {margin-bottom: 10px;}
    header {    height: 45px;
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100%;}
    .kaul {width: 80%;}
    .comingsoon {margin-top: 0; width: 90%;}
    #landing-page {margin: 0; height: 100vh; background-image: url(../img/bg-mobile.svg); background-position: top left; background-size: cover;}
    #landing-page p {font-size: 13px;}
    .l-image {width: 80%;}
    .sosmed a img {max-width: 34px;}
    footer {height: 24px; font-size: 10px;position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;}
}

@media (max-width: 996px) and (orientation: landscape) {
    #landing-page {height: 100%;}
    #landing-page .wrap {    
        position: unset;
        top: unset;
        left: unset;
        transform: unset;
    }
}