@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
img {
max-width: 100%;
}
button {
display: block;
}
.ddtf-mobile .wrapper {
width: 100%;
max-width: 1080px;
margin: 0 auto;
font-family: 'Poppins', sans-serif;
}
.ddtf-mobile .header {
background-color: rgba(0, 0, 0, 0.26);
display: table;
width: 100%;
height: 70px;
position: absolute;
left: 0;
}
.ddtf-mobile .header .inner {
display: table-cell;
height: 80px;
vertical-align: middle;
padding: 0 20px;
}
.ddtf-mobile .header .logo {
display: flex;
width: 70px;
float: left;
}
.toggle_menu_btn {
float: right;
background: transparent;
color: #fff;
border: none;
font-size: 30px;
cursor: pointer;
padding: 0;
display: flex;
margin-top: 18px;
}
.ddtf-mobile .banner {
display: flex;
}
.ddtf-mobile .cta_bar {
display: table;
background-color: #000;
width: 100%;
}
.ddtf-mobile .cta_bar .inner {
display: table-cell;
height: 80px;
vertical-align: middle;
}
.ddtf-mobile .cta_bar .inner .actions {
text-align: center;
}
.ddtf-mobile .btn {
display: inline-block;
max-width: 100px;
text-decoration: none;
padding: 8px 30px;
background: #888;
color: #fff;
border-radius: 3px;
font-weight: 600;
max-width: 500px;
}
.ddtf-mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
font-family: 'Poppins', sans-serif;
display: none;
overflow: hidden;
z-index: 200000;
}
.ddtf-mobile-menu .menu_sidebar {
background: #fff;
width: 300px;
height: 100%;
overflow: auto;
position: absolute;
left: -300px;
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.37);
padding: 30px 0;
}
.ddtf-mobile-menu .menu_sidebar ul,
.ddtf-mobile-menu .menu_sidebar .menu {
margin: 0;
padding: 0;
list-style: none;
}
.ddtf-mobile-menu .menu_sidebar ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
font-weight: 600;
color: #333;
border-top: 1px solid #aaa;
}
.ddtf-mobile-menu .menu_sidebar ul li:last-child a {
border-bottom: 1px solid #aaa;
} @media (max-width: 575.98px) {
.banner.mobile {
display: flex;
}
.banner.tablet {
display: none;
}
} @media (min-width: 576px) and (max-width: 1080px) {
.banner.mobile {
display: none;
}
.banner.tablet {
display: flex;
}
}
@media (min-width: 1080px) {
.ddtf-mobile {
display: none;
}
}