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

body{ height: calc((var(--vh, 1vh) * 100) - 1px); font-family: sans-serif;}
*{
    font-family: 'Open Sans', sans-serif;
}


.container{ width: 100%; height: 100%; display: grid; grid-template-columns: 300px 1fr;}
.container > div{ height: 100%;}
.container .left{ display: flex; flex-direction: column; position: relative; background-color: #fa8d00; z-index: 10;}
.container .left .logo{ position: relative; padding: 15px; overflow: hidden; box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, .5); margin-top: 10px; width: calc(100% + 30px); height: 130px; min-height: 130px; border-radius: 0 130px 130px 0; background-color: white; z-index: 3;}
.container .left .logo b{ display: none;}
.container .left .logo.c{ display: flex; align-items: center; justify-content: center;}
.container .left .logo.c img{ width: 200px;}
.container .left .logo.r{ display: flex; align-items: center; justify-content: flex-end;}
.container .left .logo.r b{ top: 50%; transform: translateY(-50%); left: 40px; font-size: 30px; font-weight: 700; display: flex; flex-direction: column; position: absolute; color: #fa8d00;}
.container .left .logo.r b > span{ text-shadow: -2.5px 2.5px 3px #e4dfd6; position: relative;}
.container .left .logo.r b > span > span{ position: relative; z-index: 2;}

.container .left .logo.r b > span:nth-child(2){ transform: translateX(40px);}
.container .left .logo.r img{ border-radius: 50%; height: 100%;}
.container .left .current-order{ display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 20px 0;}
.container .left .current-order > strong{ position: relative; font-size: 30px; font-weight: 700; color: white;}
.container .left .current-order > strong::before{ background-color: rgba(0, 0, 0, .2); left: 0; top: 50%; transform: translate(5px, 7px); content: ''; display: inline-block; width: 100%; height: 20%; position: absolute;}
.container .left .current-order > strong > span{ position: relative; z-index: 1;}
.container .left .current-order > b{ font-size: 60px; color: white; font-weight: 700;}
.container .left .others{ height: 100%; padding: 20px 0; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.container .left .others::before{ transform: rotate(4deg) translateY(-15px); box-shadow: 0 0px 15px 5px rgba(0, 0, 0, .9); content: ''; display: inline-block; position: absolute; top: 0; left: 0; z-index: 2; width: 100%;}
.container .left .others > strong{ margin-bottom: 10px; position: relative; font-size: 20px; font-weight: 700; color: white;}
.container .left .others > strong::before{ background-color: rgba(0, 0, 0, .2); left: 0; top: 50%; transform: translate(5px, 6px); content: ''; display: inline-block; width: 100%; height: 20%; position: absolute;}
.container .left .others > strong > span{ position: relative; z-index: 1;}
.container .left .others b{ position: relative; color: white;}
.container .left .others b::before{ position: absolute; left: 50%; transform: translateX(-50%); content: '\f107'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900;}
.container .left .others b:nth-of-type(1){ font-size: 40px; margin-bottom: 50px;}
.container .left .others b:nth-of-type(1)::before{ bottom: -40px; opacity: .9;}
.container .left .others b:nth-of-type(2){ font-size: 34px; margin-bottom: 50px; opacity: .9;}
.container .left .others b:nth-of-type(2)::before{ bottom: -40px; opacity: .9;}
.container .left .others b:nth-of-type(3){ font-size: 28px; margin-bottom: 50px; opacity: .8;}
.container .left .others b:nth-of-type(3)::before{ bottom: -40px; opacity: .9;}
.container .left .others b:nth-of-type(4){ font-size: 22px; opacity: .7;}
.container .left .others b:nth-of-type(4)::before{ display: none;}
.container .left .footer{ display: flex; align-items: center; justify-content: center; padding: 10px 0; border-top: 1px solid #e48203; width: calc(100% - 20px); margin: 0 auto;}
.container .left .footer a{ transition: all .2s ease; opacity: .5; font-size: 12px; font-weight: 700; text-decoration: none; color: #3e2300;}
.container .left .footer a:hover{ opacity: 1;}



.container .right{ position: relative; z-index: 1; background-color: #dfe3e8;}
.container .right .slider{ width: 100%; height: 100%;}
.container .right .slider > div{ overflow: hidden; width: 100%; height: 100%; position: relative;}
.container .right .slider > div .item{ transition: all 1.5s ease; overflow: hidden; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.container .right .slider > div .item.left{ transform: translateX(-100%);}
.container .right .slider > div .item.right{ transform: translateX( 100%);}
.container .right .slider > div .item img{ height: 100%; width: 100%; object-fit: cover;}
.container .right .slider > div .item video{ height: 100%; width: 100%; object-fit: cover;}



@media screen and (max-width: 668px) {
    .container{ grid-template-columns: 1fr;}
    .container .right{ display: none;}
    .container .left .logo{ box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .5);; width: 100%; border-radius: 0; height: 90px; min-height: 90px;}
    .container .left .logo.r b{ display: none;}
    .container .left .logo.r{ justify-content: center;}
    .container .left .current-order > strong{ font-size: 27px;}
    .container .left .current-order > b{ font-size: 50px;}
}

@media screen and (min-height: 900px){
     .container{ grid-template-columns: 400px 1fr;}
     .container .left .current-order > strong{ font-size: 40px;}
     .container .left .current-order > strong::before{ transform: translate(6px, 8px);}
     .container .left .current-order > b{ font-size: 75px;}
     .container .left .others > strong{ font-size: 30px;}
     .container .left .others > strong::before{ transform: translate(6px, 8px);}
     .container .left .others b:nth-of-type(1){ font-size: 50px; margin-bottom: 50px;}
     .container .left .others b:nth-of-type(2){ font-size: 45px; margin-bottom: 50px; opacity: .9;}
     .container .left .others b:nth-of-type(3){ font-size: 40px; margin-bottom: 50px; opacity: .8;}
     .container .left .others b:nth-of-type(4){ font-size: 35px; opacity: .7;}
     .container .left .others b:nth-of-type(4)::before{ display: none;}
     .container .left .footer a{ font-size: 15px;}
 }


@media screen and (min-height: 1100px){ 
   .container{ grid-template-columns: 500px 1fr;} 
   .container .left .current-order > strong{ font-size: 50px;} 
   .container .left .current-order > strong::before{ transform: translate(7px, 10px);} 
   .container .left .current-order > b{ font-size: 85px;} 
   .container .left .others > strong{ font-size: 40px;} 
   .container .left .others > strong::before{ transform: translate(7px, 10px);} 
   .container .left .others b:nth-of-type(1){ font-size: 60px;} 
   .container .left .others b:nth-of-type(2){ font-size: 55px;} 
   .container .left .others b:nth-of-type(3){ font-size: 50px;} 
   .container .left .others b:nth-of-type(4){ font-size: 45px;} 
   .container .left .others b:nth-of-type(4)::before{ display: none;} 
}

@media screen and (max-height: 600px) and (min-width: 800px) {
	.container .left .logo{ min-height: 70px; padding: 10px;}
	.container .left .logo.r b{ flex-direction: row;}
	.container .left .logo.r b > span:nth-child(2){ transform: unset;}
   .container .left .others b:nth-of-type(3)::before,
   .container .left .others b:nth-of-type(4),
   .container .left .others b:nth-of-type(4)::before{ display: none;} 
}*/

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

body{ height: calc((var(--vh, 1vh) * 100) - 1px); font-family: sans-serif;}
*{
    font-family: 'Open Sans', sans-serif;
	}


.container{ width: 100%; height: 70%; display: grid; grid-template-columns: 40% 1fr;}
.container > div{ height: 100%;}
.container .left{ display: flex; flex-direction: column; position: relative; background-color: #fa8d00; z-index: 10;}
.container .left .logo{ position: relative; padding: 15px; overflow: hidden; box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, .5); margin-top: 10px; width: calc(100% + 30px); height: 130px; min-height: 130px; border-radius: 0 130px 130px 0; background-color: white; z-index: 3;}
.container .left .logo b{ display: none;}
.container .left .logo.c{ display: flex; align-items: center; justify-content: center;}
.container .left .logo.c img{ width: 200px;}
.container .left .logo.r{ display: flex; align-items: center; justify-content: flex-end;}
.container .left .logo.r b{ top: 50%; transform: translateY(-50%); left: 40px; font-size: 7vh; font-weight: 700; display: flex; flex-direction: column; position: absolute; color: #fa8d00;}
.container .left .logo.r b > span{ text-shadow: -2.5px 2.5px 3px #e4dfd6; position: relative;}
.container .left .logo.r b > span > span{ position: relative; z-index: 2;}
.container .left .logo.r b > span:nth-child(2){ transform: translateX(40px);}
.container .left .logo.r img{ border-radius: 50%; height: 100%;}
.container .left .current-order{ display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 20px 0;}
.container .left .current-order > strong{ position: relative; font-size: 5.5vh; font-weight: 700; color: white;}
.container .left .current-order > strong::before{ background-color: rgba(0, 0, 0, .2); left: 0; top: 50%; transform: translate(5px, 7px); content: ''; display: inline-block; width: 100%; height: 20%; position: absolute;}
.container .left .current-order > strong > span{ position: relative; z-index: 1;}
.container .left .current-order > b{ font-size: 25vh; color: white; font-weight: 700;}
.container .left .others{ height: 100%; padding: 20px 0; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.container .left .others::before{ transform: rotate(4deg) translateY(-15px); box-shadow: 0 0px 15px 5px rgba(0, 0, 0, .9); content: ''; display: inline-block; position: absolute; top: 0; left: 0; z-index: 2; width: 100%;}
.container .left .others > strong{ margin-bottom: 10px; position: relative; font-size: 2.8vh; font-weight: 700; color: white;}
.container .left .others > strong::before{ background-color: rgba(0, 0, 0, .2); left: 0; top: 50%; transform: translate(5px, 6px); content: ''; display: inline-block; width: 100%; height: 20%; position: absolute;}
.container .left .others > strong > span{ position: relative; z-index: 1;}
.container .left .others b{ position: relative; color: white;}
.container .left .others b::before{ position: absolute; left: 50%; transform: translateX(-50%); content: '\f107'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900;}
.container .left .others b:nth-of-type(1){ font-size: 6.4vh; margin-bottom: 50px;}
.container .left .others b:nth-of-type(1)::before{ bottom: -40px; opacity: .9;}
.container .left .others b:nth-of-type(2){ font-size: 6.4vh; margin-bottom: 50px; opacity: .9;}
.container .left .others b:nth-of-type(2)::before{ bottom: -40px; opacity: .9;}
.container .left .others b:nth-of-type(3){ font-size: 6.4vh; margin-bottom: 50px; opacity: .8;}
.container .left .others b:nth-of-type(3)::before{ bottom: -40px; opacity: .9;}
.container .left .others b:nth-of-type(4){ font-size: 6.4vh; opacity: .7;}
.container .left .others b:nth-of-type(4)::before{ display: none;}
.container .left .footer{ display: flex; align-items: center; justify-content: center; padding: 10px 0; border-top: 1px solid #e48203; width: calc(100% - 20px); margin: 0 auto;}
.container .left .footer a{ transition: all .2s ease; opacity: .5; font-size: 12px; font-weight: 700; text-decoration: none; color: #3e2300;}
.container .left .footer a:hover{ opacity: 1;}



.container .right{ position: relative; z-index: 1; background-color: #dfe3e8;}
.container .right .slider{ width: 100%; height: 100%;}
.container .right .slider > div{ overflow: hidden; width: 100%; height: 100%; position: relative;}
.container .right .slider > div .item{ transition: all 1.5s ease; overflow: hidden; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.container .right .slider > div .item.left{ transform: translateX(-100%);}
.container .right .slider > div .item.right{ transform: translateX( 100%);}
.container .right .slider > div .item img{ height: 100%; width: 100%; object-fit: cover;}
.container .right .slider > div .item video{ height: 100%; width: 100%; object-fit: cover;}

.bottom{ width: 100%; height:30%; background-color: ##fa8d00; display: flex;}
.bottom .m1{width: 100%; height:100%;position: relative; background-color: #fa8d00; z-index: 10; padding:25px}
.bottom .m1 span{ font-size: 7vh; font-weight: 700; display: flex; flex-direction: column; position: absolute; color: #ffffff;}

.bottom .m1 .others{ height: 100%; padding: 5px 0; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.bottom .m1 .others::before{ content: ''; display: inline-block; position: absolute; top: 0; left: 0; z-index: 2; width: 100%;}
.bottom .m1 .others > strong{ margin-bottom: 5px; position: relative; font-size: 2.8vh; font-weight: 700; color: white;}
.bottom .m1 .others > strong::before{ background-color: rgba(0, 0, 0, .2); left: 0; top: 50%; transform: translate(5px, 6px); content: ''; display: inline-block; width: 100%; height: 20%; position: absolute;}
.bottom .m1 .others > strong > span{ position: relative; z-index: 1;}
.bottom .m1 .others b{ position: relative; color: white;}
.bottom .m1 .others b::before{ position: absolute; left: 50%; transform: translateX(-50%); content: '\f068'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900;}
.bottom .m1 .others b:nth-of-type(1){ font-size: 15.4vh; margin-bottom: 50px;}
.bottom .m1 .others b:nth-of-type(1)::before{ bottom: -50px; opacity: .9;}
.bottom .m1 .others b:nth-of-type(2){ font-size: 6.4vh; margin-bottom: 50px; opacity: .9;}
.bottom .m1 .others b:nth-of-type(2)::before{ bottom: -40px; opacity: .9;}
.bottom .m1 .others b:nth-of-type(3){ font-size: 6.4vh; margin-bottom: 50px; opacity: .8;}
.bottom .m1 .others b:nth-of-type(3)::before{ bottom: -40px; opacity: .9;}
.bottom .m1 .others b:nth-of-type(4){ font-size: 6.4vh; opacity: .7;}
.bottom .m1 .others b:nth-of-type(4)::before{ display: none;}

.animate-charcter
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #000000 0%,
    #ffffff 29%,
    #ffffff 67%,
    #ffffff 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
  font-size: 25vh;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

@media screen and (max-width: 668px) {
    .container{ grid-template-columns: 1fr;}
    .container .right{ display: none;}
    .container .left .logo{ box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .5);; width: 100%; border-radius: 0; height: 90px; min-height: 90px;}
    .container .left .logo.r b{ display: none;}
    .container .left .logo.r{ justify-content: center;}
    .container .left .current-order > strong{ font-size: 27px;}
    .container .left .current-order > b{ font-size: 50px;}
}

@media screen and (min-height: 900px){
    .container{ grid-template-columns: 40% 1fr;}
    .container .left .current-order > strong{ font-size: 70px;}
    .container .left .current-order > strong::before{ transform: translate(6px, 8px);}
    .container .left .current-order > b{ font-size: 250px;}
    .container .left .others > strong{ font-size: 30px;}
    .container .left .others > strong::before{ transform: translate(6px, 8px);}
    .container .left .others b:nth-of-type(1){ font-size: 50px; margin-bottom: 50px;}
    .container .left .others b:nth-of-type(2){ font-size: 45px; margin-bottom: 50px; opacity: .9;}
    .container .left .others b:nth-of-type(3){ font-size: 40px; margin-bottom: 50px; opacity: .8;}
    .container .left .others b:nth-of-type(4){ font-size: 35px; opacity: .7;}
    .container .left .others b:nth-of-type(4)::before{ display: none;}
    .container .left .footer a{ font-size: 15px;}
}

@media screen and (min-height: 1100px){
    .container{ grid-template-columns: 40% 1fr;}
    .container .left .current-order > strong{ font-size: 50px;}
    .container .left .current-order > strong::before{ transform: translate(7px, 10px);}
    .container .left .current-order > b{ font-size: 85px;}
    .container .left .others > strong{ font-size: 40px;}
    .container .left .others > strong::before{ transform: translate(7px, 10px);}
    .container .left .others b:nth-of-type(1){ font-size: 60px;}
    .container .left .others b:nth-of-type(2){ font-size: 55px;}
    .container .left .others b:nth-of-type(3){ font-size: 50px;}
    .container .left .others b:nth-of-type(4){ font-size: 45px;}
    .container .left .others b:nth-of-type(4)::before{ display: none;}
}

@media screen and (max-height: 700px) {
    .container{ grid-template-columns: 40% 1fr;}
    .container .left .logo.r b > span:nth-child(2){ transform: unset;}
    .container .left .logo.r b{ flex-direction: row; gap: 5px; left: 25px;}
    .container .left .logo{ min-height: 15vh; height: 15vh;}
    .container .left .others{ padding: 10px 0;}
	.container .left .logo{padding: 5px;}
}

@media screen and (max-height: 600px){
    .container .left .current-order{ margin: 10px 0;}
    .container .left .others b:nth-of-type(1){ margin-bottom: 30px;}
    .container .left .others b:nth-of-type(1)::before{ bottom: -30px;}
    .container .left .others b:nth-of-type(2){ margin-bottom: 35px;}
    .container .left .others b:nth-of-type(2)::before{ bottom: -30px;}
    .container .left .others b:nth-of-type(3){ margin-bottom: 35px;}
    .container .left .others b:nth-of-type(3)::before{ bottom: -25px;}
    
	.container .left .others > strong{ font-size: 3.2vh;}
    .container .left .others b:nth-of-type(1){ font-size: 6vh;}
    .container .left .others b:nth-of-type(2){ font-size: 5vh;}
    .container .left .others b:nth-of-type(3){ font-size: 4vh;}
    .container .left .others b:nth-of-type(4){ font-size: 3vh;}
}