@keyframes fadein{
0%   { opacity: 0.3; }
100% { opacity: 1; }
} .service-content-wrap{
display:table;
}
.services-content-left{
width:55%;
display:table-cell;
background: rgba(0,0,0,0.6);
}
.services-content-right{
width:45%;
padding:40px;
background: rgba(0,0,0,0.6);
margin-right: 20px;
display:table-cell;
}
.services-item{
min-height: 672px;
display: flex;
align-items: center;
margin-top: -1px;
}
.services-item h2{
color:white;
letter-spacing:2.5px;
font-weight:800;
font-size:36px;
font-family:Barlow;
}
.services-item span{
color:white;
font-family:Barlow;
}
.services-item a{
background:#ff7700;
color:white;
padding:10px 30px;
border-radius:60px;
transition: 0.6s;
font-family:Barlow;
}
.services-item a:hover{
background:#DA1C00;
color:white;
transition: 0.6s;
}
#stagedesign.services-item{
background:url(//i0.wp.com/www.myth.com.my/wp-content/uploads/2020/03/03-7.jpg);
animation:fadein 2s;
background-size: cover;
}
#eventprop.services-item{
background:url(//i0.wp.com/www.myth.com.my/wp-content/uploads/2020/03/01-5.jpg);
animation:fadein 2s;
background-size: cover;
}
#gimmicklaunch.services-item{
background:url(//i0.wp.com/www.myth.com.my/wp-content/uploads/2020/03/02-3.jpg);
animation:fadein 2s;
background-size: cover;
}
#roadshow.services-item{
background:url(//i0.wp.com/www.myth.com.my/wp-content/uploads/2020/03/10-2.jpg);
animation:fadein 2s;
background-size: cover;
}
#backdrop.services-item{
background:url(//i0.wp.com/www.myth.com.my/wp-content/uploads/2020/03/04-4.jpg);
animation:fadein 2s;
background-size: cover;
}
#exhibition.services-item{
background:url(//i0.wp.com/www.myth.com.my/wp-content/uploads/2020/03/04-1.jpg);
animation:fadein 2s;
background-size: cover;
}
#visual.services-item{
background:url(//i0.wp.com/www.myth.com.my/wp-content/uploads/2020/03/06-6.jpg);
animation:fadein 2s;
background-size: cover;
}
#photobooth.services-item{
background:url(//i0.wp.com/www.myth.com.my/wp-content/uploads/2020/03/08.jpg);
animation:fadein 2s;
background-size: cover;
}
.service-title h2{
padding:31px 40px;
font-size:28px;
font-family:Barlow;
font-weight:700;
letter-spacing: 1.8px;
}
.service-navbar{
box-shadow:1px 2px 16px rgba(0, 0, 0, 0.18);
margin-top: -7px;
background:white;
}
.vertical-menu {
}
.service-navbar .vertical-menu button {
background-color: white;
color: black;
display: flex;
align-items:center;
min-height:70px;
font-size:16px;
text-decoration: none;
font-family:Barlow;
font-weight:500;
padding-left:40px;
background: linear-gradient(to left, white 50%, #DA1C00 50%);
background-size: 200% 100%;
background-position: right bottom;
-webkit-transition: all ease .3s;
transition: all ease .3s;
width:100%;
border-radius:unset;
border:unset;
border-top: 1px solid #cecece;
}
.service-navbar .vertical-menu button:focus {
outline:none;
}
.service-navbar .vertical-menu button:hover {
background-position: left bottom;
color: white;
}
.service-navbar .vertical-menu button.active {
background: linear-gradient(to left, #DA1C00 50%, #DA1C00 50%);
color: white;
}
.service-image-box{
position: absolute;
top:0;
clip-path: polygon(61% 0, 100% 0, 100% 100%, 45% 100%);
background:black;
margin-top: 1px;
}
.service-image-box .services-item img{
}
@media only screen and (max-width: 600px) {
.service-image-box {
position: relative;
top: unset;
clip-path: unset;
margin-top: unset;
}
.services-item {
min-height: unset;
width: unset;
margin-top:unset;
display:block;
}
.vertical-menu{
display: flex;
flex-wrap: wrap;
}
.service-navbar .vertical-menu button{
width:50%;
padding-left:10px;
}
.myth-service{
}
.service-title h2 {
padding: 15px 0px 0px 0px;
text-align: center;
}
.services-content{
width:100%;
}
.services-content-left{
display:none;
}
}