@media (max-width: 991.98px) {
/* ------- start ------- */


/* ------- top bar ------- */

.top-bar {
__margin: 0;
__padding: 0;
width: 100%;
max-width: 100%;
__height: 60px;
__background: #222;
position: relative;
z-index: 10;
}

.top-bar::before {
content: "";
display: block;
background: #fff;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
transform: none;
}

.top-bar .hamburger-button {
}

/* ------- main menu ------- */

.main-menu {
width: 260px;
height: 100%;
background: rgba(0, 0, 0, 0.4);
margin: 0;
padding: 0;
text-align: left;
opacity: 0;
z-index: -1;
}

.main-menu .menu-content {
display: block;
}

.main-menu .logo-link {
display: none;
}

.show {
opacity: 1;
z-index: 20;
}

.main-menu::before {
content: none;
}

.main-menu .menu-wrapper {
padding: 0;
position: relative;
height: calc( 100% - 60px );
align-items: start;
}



/*
.main-menu .menu-wrapper > li {
width: auto;
line-height: calc( var( --main-menu-height ) / 2);
line-height: var( --main-menu-height );
__max-width: 100%;
font-size: 85%;
font-weight: 700;
position: relative;
height: 100%;
__width: 100%;
}
*/

.main-menu .menu-wrapper > li {
flex: 1 1 auto;
position: static;
width: 100%;
}

.main-menu .menu-wrapper > li > a {
text-align: left;
position: relative;
}

._main-menu .menu-wrapper > li > a::before {
content: "";
display: block;
background: rgba(255, 255, 255, .3);
width: calc( 100% - 60px );
height: 1px;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 0);
}

.main-menu .menu-wrapper .inner {
padding-left: 30px;
}

.main-menu .menu-wrapper .menu-item-has-children .inner::after {
font-family: "Font Awesome 6 Pro";
content: "\f0da";
display: block;
position: absolute;
right: 10px;
top: 50%;
transform: translate(0, -50%);
}

.main-menu .menu-wrapper > li > .sub-menu {
__width: 100%;
position: absolute;
background: #212121;
top: 0;
bottom: 0;
left: 100%;
font-weight: 300;
color: #999;
font-size: 95%;
opacity: 1;
opacity: 0;
transition: .3s;
height: 0;
overflow: hidden;
}

.main-menu .menu-wrapper > li > .sub-menu > li a::before {
left: auto;
right: 0;
}

/* ------- main slider ------- */

.section-header .slider-main {
position: static;
}

.section-header .content-wrapper > .mini-cont {
position: static;
transform: none;
padding: 80px 40px 40px;
width: calc( 100% - 160px );
margin: 200px auto 0;
}

.section-header .image-wrapper-resp {
position: static;
}

.section-header .content-wrapper .image {
display: block;
position: static;
width: 120px;
height: auto;
position: absolute;
left: 50%;
top: -60px;
transform: translate( -50%, 0);
}

/* ------- icons one ------- */

.section-icons-one .col-inner {
__padding-top: 0;
}

/* ------- toggle ------- */

.section-toggle .mini-cont {

}

.section-toggle .image-wrapper {
height: 120px;
}

.section-toggle .image:hover {
transform: scale(1.1);
}

.section-toggle .col-text {
margin-top: 20px;
padding-top: 40px;
}

.section-toggle .mini-cont {
display: block;
padding: 50px 0 20px;
}

/* ------- advantages ------- */

.section-advantages > .container {
max-width: 100%;
padding: 0 30px;
}

.section-advantages > .container .wrap {
height: 100%;
}

.section-advantages .section-title-wrapper {
__max-width: 500px;
width: 100%;
position: static;
margin: 0 auto;
text-align: center;
height: auto;
}

.section-advantages .section-title-wrapper .button {
width: 100%;
}

.section-advantages .nav-wrapper {
position: static;
width: 124px;
height: 60px;
margin: 20px auto 0;
}

.section-advantages .nav-wrapper .nav-btn {


position: static;

width: 60px;
height: 60px;
line-height: 60px;
background: #222;
cursor: pointer;
overflow: hidden;
text-align: center;
color: #fff;
transition: all 200ms ease 0s;
box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
}

.section-advantages .nav-wrapper .nav-btn:hover {
background: #ea8d00; /* naranja */
transition: all 200ms ease 0s;
}

.section-advantages .nav-wrapper .prev {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
border-top-right-radius: 0;
float: left;
}

.section-advantages .nav-wrapper .next {
border-bottom-left-radius: 0;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
float: right;
}

.section-advantages .nav-wrapper .prev::before {
content: "\f0d9";
}

.section-advantages .nav-wrapper .next::before {
content: "\f0da";
}

.section-advantages > .container {
height: auto;
}

.section-advantages .column-right .swiper-cont {
position: static;
transform: none;
padding: 60px 0;
height: auto;
}

.section-advantages .sw {
height: 100%;
}

.section-advantages .mini-cont {
padding: 50px 20px 20px 20px;
float: none;
width: 100%;
height: 100%;
position: relative;
text-align: center;
}

.section-advantages .image-cont {
left: 50%;
top: -40px;
transform: translate(-50% , 0);
}

.section-advantages .image-cont:hover {
transform: translate(-50% , 0) rotate(-40deg) scale(1.2);
}

.section-advantages .section-title::before {
width: 100%;
}

.section-advantages .button {
position: relative;
right: auto;
bottom: auto;
margin: 0 auto;
}

/* ------- design ------- */

.section-design .col-left {
text-align: center;
}

.section-design .animarker {
top: 50%;
__background: #fff;
}

.section-design .col-left .text {
margin: 0 auto;
width: 100%;
padding: 0 100px;
}

.section-design .col-left .image-wrap {
width: 100%;
height: 400px;
position: relative;
margin: 40px auto;
overflow: hidden;
}

.section-design .col-left .image-wrap .image-cont {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}

.section-design .col-left .image-wrap .image-cont .image {
width: auto;
height: 100%;
}

.section-design.evento .image-wrap .image-cont.image-1 {
opacity: 1;
transition: all 1s ease 1s;
}

.section-design.evento .image-wrap .image-cont.image-2 {
opacity: .6;
transition: all 1s ease 0s;
}

/* ------- app ------- */

.section-app .col-image .image-cont .image {
position: relative;
top: 1px;
}

/* ------- slider one ------- */

.section-slider-one .swiper-slide .content {
text-align: center;
width: 480px;
padding: 80px 30px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, 0);
}

/* ------- footer ------- */


.sec-footer .footer-top .logo-wrapper::before {
content: none;
}

.sec-footer .footer-bottom .col-menu {
}

.sec-footer .footer-bottom .subscription {
height: 400px;
position: relative;
}

.sec-footer .footer-bottom .col-subscription::before {
width: 100vw;
height: 100%;
left: 50%;
top: 0;
transform: translate(-50%, 0);
}

.sec-footer .footer-bottom .subscription .bg .image {
top: 10%;
}

/* ------- end ------- */

}