@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');

.hterror {

overflow-x:hidden;
overflow-y:hidden;
}

body {
margin: 0px;
padding: 0px;

background: url(https://manager.lbooking.online/CmsImages/erback.jpg);
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;

}

.container-right {

position: relative;
right: 0;
width: 1024px;
margin-left: auto;
margin-right: 0;
top: 30px;
z-index: 9;



}



.right1 {
width: 250px;
transform: rotate(45deg);
box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.10);
height: 500px;
position: relative;
right: -380px;
top: -370px;
background: #fff;
z-index: 9999;
animation: slideitem 0.5s;

}


@keyframes slideitem {
  from {top: -2000px;}
  to {top: -380px;}
}

.right2 {

width: 250px;
transform: rotate(45deg);
box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.10);
height: 500px;
position: relative;
right: -2000px;
top: -820px;
background: #fff;
z-index: 9999;

  -webkit-animation: slides 0.5s forwards;
    -webkit-animation-delay: 0s;
    animation: slides 0.5s forwards;
    animation-delay: 0s;

}


@keyframes slides {
    100% { right: -781; }
}

.right3 {


width: 250px;
transform: rotate(45deg);
box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.10);
height: 500px;
position: relative;
right: -382px;
top: -922px;
background: #fff;
z-index: 9999;
animation: slideitem2 0.7s;

}


@keyframes slideitem2 {
  from {top: 2000px;}
  to {top: -922px;}
}

.right4 {

width: 250px;
transform: rotate(45deg);
box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.10);
height: 500px;
position: relative;
right: -2000px;
top: -1450;
background: #fff;
z-index: 9999;

  -webkit-animation: slides2 0.7s forwards;
    -webkit-animation-delay: 0s;
    animation: slides2 0.7s forwards;
    animation-delay: 0s;

}


@keyframes slides2 {
    100% { right: -863; }
}

.right3im {

width: 500px;
transform: rotate(-90deg);
height: 250px;
left: -125px;
position: relative;
top: 125px;
object-fit: cover;
object-position: center;
z-index:10;
}


.right1im {

width: 500px;
transform: rotate(-90deg);
height: 250px;
left: -125px;
position: relative;
top: 125px;
object-fit: cover;
object-position: -185px;
z-index:10;

}


.right3text {

z-index: 11;
position: relative;
transform: rotate(-90deg);
left: 90px;
top: 80px;
color: #fff;
text-transform: uppercase;
text-align: left;
font-size: 18px;
font-family: 'Comfortaa', cursive !important;


}


.right3top {

position: relative;
z-index: 12;
transform: rotate(-90deg);
color: #fff;
font-size: 14px;
width: 500px;
left: -225px;
top: -70px;
font-family: 'Comfortaa', cursive !important;

}


.container-left {

color: #252b2d;
font-size: 36px;
position: absolute;
text-align: left;
left: 5%;
top: 100px;
font-family: 'Comfortaa', cursive !important;
line-height: 50px;
z-index: 9999999999999;
}


.buttons-container {

display:flex;
z-index: 999;
position:relative;
}

.item1 {

background: #fff;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.10);
margin-right:25px;
}




.item1:hover {

background: #f78119;

}


.item1:hover img {

filter:brightness(100);

}



.item3 {

background: #fff;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.10);

}

.item3:hover {

background: #f78119;

}


.item3:hover img {

filter:brightness(100);

}





@media screen and (min-width: 2500px) {


.right1im {

    top: 124px;

    object-position: -30px;

}


.container-right {

right: 45;
top: 175px;



}

.container-left {


    font-size: 70px;

    line-height: 90px;
}



}


@media screen and (min-width: 1800px) {




.container-right {

right: 45;
top: 175px;



}

.container-left {


    font-size: 50px;

    line-height: 70px;
top: 200px;
}


.right1im {

    top: 124px;

    object-position: -30px;

}


}




@media (min-width: 1440px) and (max-width: 1799px) {

.container-right {

right: 45;
top: 70px;



}


.container-left {

top: 115px;
font-size:42px;
line-height:60px;

}




}




@media (min-width: 1024px) and (max-width: 1249px) {

.container-right {

right: 45;
top: 70px;
top:25%;


}

.container-left {
    font-size: 25px;

    line-height: 40px;
top: 30px;

}

.right1 {
width: 150px;
height: 300px;
right: -695px;
top: -249px;

}


@keyframes slideitem {
  from {top: -2000px;}
  to {top: -249px;}
}

.right1im {
    width: 300px;
    height: 150px;
    left: -75px;
    top: 75px;
    object-position: -29px;

}


.right2 {
width: 150px;
height: 300px;
top: -535px;


}

@keyframes slides {
    100% { right: -918; }
}


.right3 {
   width: 150px;
height: 300px;
right: -694px;
top: -610px;

}


@keyframes slideitem2 {
  from {top: 2000px;}
  to {top: -610px;}
}


.right3im {
    width: 300px;
    height: 150px;
    left: -75px;
    top: 75px;


}


.right3text {
    left: 45px;
    top: 40px;

    font-size: 14px;

}


.right3top {

    font-size: 9px;
    width: 300px;
    left: -135px;
    top: -64px;
}


.right4 {
width: 150px;
height: 300px;
top: -980;


}

@keyframes slides2 {
    100% { right: -998; }
}

}









@media (min-width: 768px) and (max-width: 1023px) {



.container-right {
    right: 335;
    top: 104px;
width:700px;

}

.container-left {
    font-size: 25px;

    line-height: 40px;
top:100px;
}

.right1 {
width: 150px;
height: 300px;
right: -695px;
top: -249px;

}


@keyframes slideitem {
  from {top: -2000px;}
  to {top: -249px;}
}

.right1im {
    width: 300px;
    height: 150px;
    left: -75px;
    top: 75px;
    object-position: -29px;

}


.right2 {
width: 150px;
height: 300px;
top: -535px;


}

@keyframes slides {
    100% { right: -918; }
}


.right3 {
   width: 150px;
height: 300px;
right: -694px;
top: -610px;

}


@keyframes slideitem2 {
  from {top: 2000px;}
  to {top: -610px;}
}


.right3im {
    width: 300px;
    height: 150px;
    left: -75px;
    top: 75px;


}


.right3text {
    left: 45px;
    top: 40px;

    font-size: 14px;

}


.right3top {

    font-size: 9px;
    width: 300px;
    left: -135px;
    top: -64px;
}


.right4 {
width: 150px;
height: 300px;
top: -980;


}

@keyframes slides2 {
    100% { right: -998; }
}

}





@media (min-width: 550px) and (max-width: 767px) {



.container-right {
right: 452;
top: 100px;
width: 500px;
}

.container-left {
    font-size: 18px;

    line-height: 32px;

top: 100px;
}

.right1 {
width: 150px;
height: 300px;
right: -695px;
top: -249px;

}


@keyframes slideitem {
  from {top: -2000px;}
  to {top: -249px;}
}

.right1im {
    width: 300px;
    height: 150px;
    left: -75px;
    top: 75px;
    object-position: -29px;

}


.right2 {
width: 150px;
height: 300px;
top: -535px;


}

@keyframes slides {
    100% { right: -918; }
}


.right3 {
   width: 150px;
height: 300px;
right: -694px;
top: -610px;

}


@keyframes slideitem2 {
  from {top: 2000px;}
  to {top: -610px;}
}


.right3im {
    width: 300px;
    height: 150px;
    left: -75px;
    top: 75px;


}


.right3text {
    left: 45px;
    top: 40px;

    font-size: 14px;

}


.right3top {

    font-size: 9px;
    width: 300px;
    left: -135px;
    top: -64px;
}


.right4 {
width: 150px;
height: 300px;
top: -867;


}

@keyframes slides2 {
    100% { right: -888; }
}



.logoer {


width:100px;

}


.item1 {
    width: 35px;
    height: 35px;
margin-right:10px;
}



.item1 img {
    width: 21px !important;


}


.item3 {
    width: 35px;
    height: 35px;

}

.item3 img {
    width: 21px !important;


}

}





@media (min-width: 320px) and (max-width: 549px) {





.container-right {
right: 470;
top: 100px;
width: 300px;
}

.container-left {
    font-size: 16px;
    line-height: 28px;
top: 90px;
}

.right1 {
width: 150px;
height: 300px;
right: -695px;
top: -249px;

}


@keyframes slideitem {
  from {top: -2000px;}
  to {top: -249px;}
}

.right1im {
    width: 300px;
    height: 150px;
    left: -75px;
    top: 75px;
    object-position: -117px;

}


.right2 {
width: 150px;
height: 300px;
top: -535px;


}

@keyframes slides {
    100% { right: -918; }
}


.right3 {
   width: 150px;
height: 300px;
right: -694px;
top: -610px;

}


@keyframes slideitem2 {
  from {top: 2000px;}
  to {top: -610px;}
}


.right3im {
    width: 300px;
    height: 150px;
    left: -75px;
    top: 75px;


}


.right3text {
    left: 45px;
    top: 40px;

    font-size: 14px;

}


.right3top {

    font-size: 9px;
    width: 300px;
    left: -135px;
    top: -64px;
}


.right4 {
width: 150px;
height: 300px;
top: -665;


}

@keyframes slides2 {
    100% { right: -688; }
}



.logoer {


width:100px;

}


.item1 {
    width: 35px;
    height: 35px;
margin-right:10px;
}



.item1 img {
    width: 21px !important;


}


.item3 {
    width: 35px;
    height: 35px;

}

.item3 img {
    width: 21px !important;


}

}