.bs-box,
.flexslider {
display: inline-block;
float: left
}
.bs-box .content,
.bs-box .content ul>li>a {
color: var(--wp--preset--color--background)
}
.bs-box .client-logos,
.bs-box .content {
text-align: center;
width: 100%;
position: absolute
}
.w-100{
width: 100%;
}
.flexslider {
display: inline-block;
float: left;
width: 100%;
margin: 0 !important;
overflow: visible !important
}
.bs-box {
width: 100vw;
margin: 0;
position: relative
}
.bs-box .content {
z-index: 999;
top: 40%
}
.bs-box .content h3 {
font-size: 1.2rem;
line-height: 1.2;
margin: 0 auto 1%;
display: block
}
.bs-box .content h2 {
font-size: 3.7rem;
font-weight: 700;
line-height: 1;
margin: 0 auto 1rem
}
.bs-box .content ul {
display: inline-block;
list-style: none;
padding: 0
}
.bs-box .content ul>li {
display: inline-block;
float: left
}
.bs-box .content ul>li>a {
display: inline-block;
text-decoration: none;
border: solid var(--wp--preset--color--background) 1px;
padding: 1rem 2rem;
margin: 1rem;
font-size: 1rem;
line-height: 1;
border-radius: 5px;
font-weight: 600
}
.bs-box .client-logos {
bottom: 3%;
left: 0
}
.bs-box .client-logos ul {
display: inline-block;
list-style: none;
padding: 0;
width: 96%
}
.bs-box .client-logos ul>li {
display: inline-block;
width: 20%;
float: left;
margin: 0
}
.bs-box .client-logos ul>li>img {
display: inline-block;
margin: 0 3%;
width: 94%;
max-width: 200px
}
.bs-box .line {
-webkit-transition: 6s;
-moz-transition: 6s;
-o-transition: 6s;
transition: 6s;
position: absolute;
bottom: calc(3% + 4px);
height: 2px;
background: var(--wp--preset--color--background);
right: 2%;
width: 0
}
.animateline .bs-box .line {
width: calc(94% - 50px)
}
.flexslider .flex-control-nav {
width: 98vw !important;
position: absolute;
bottom: 3%;
text-align: left;
height: 10px;
z-index: 99;
left: 2vw;
}
.flexslider .flex-control-paging li a.flex-active {
background: var(--wp--preset--color--background) !important
}
.flexslider .flex-control-paging li a {
width: 7px !important;
height: 7px !important;
background: rgba(0, 0, 0, 0) !important;
border: 1px solid var(--wp--preset--color--background) !important
}
.flexslider .flex-control-nav li {
margin: 0 .3rem
}
.mobile-mark {
display: none
}
@media only screen and (max-width:450px) and (min-width:320px) {
.bs-box,
.mobile-mark {
display: inline-block;
margin: 0
}
.bs-box {
width: 100%;
position: relative;
float: left;
min-height: 120vw
}
.flexslider .slides img {
height: 120vw !important;
width: auto !important;
left: -100vw;
position: relative;
z-index: 0
}
.bs-box .content {
position: absolute;
z-index: 999;
top: 20vw;
color: var(--wp--preset--color--background);
text-align: center;
width: 100vw
}
.bs-box .content ul{text-align:center;}
.bs-box .content ul>li{float:unset;}
.bs-box .client-logos {
display: none
}
.animateline .bs-box .line {
width: calc(90vw - 80px)
}
.mobile-mark {
position: absolute;
z-index: 9;
left: 0;
top: 90vw;
}
.flexslider .flex-control-nav {
width: 98vw !important
}
.bs-box .content h2 {
font-size: 1.8rem !important;
font-weight: 700;
line-height: 1;
margin: 0 1rem 1rem
}
.maintopcc{
top:10vw !important;
}
.parallex {display: inline-block !important;
width: 100vw !important;
overflow: hidden !important;}
}
@media only screen and (max-width:992px) and (min-width:451px) {
.bs-box,
.mobile-mark {
display: inline-block;
margin: 0
}
.bs-box {
width: 100%;
position: relative;
float: left;
min-height: 80vw
}
.flexslider .slides img {
height: 100vw !important;
width: auto !important;
left: -75vw;
position: relative;
z-index: 0
}
.bs-box .content {
position: absolute;
z-index: 999;
top: 35vw;
color: var(--wp--preset--color--background);
text-align: center;
width: 100vw
}
.bs-box .client-logos {
display: none
}
.animateline .bs-box .line {
width: calc(90vw - 80px)
}
.mobile-mark {
position: absolute;
z-index: 9;
left: 0;
top: 85vw
}
.flexslider .flex-control-nav {
width: 98vw !important
}
.bs-box .content h2 {
font-size: 2.5rem !important;
font-weight: 700;
line-height: 1;
margin: 0 1rem 1rem
}
.maintopcc{
top:10vw !important;
}
}