body {
font-family: "Manrope", serif;
}
/*MOBILE HEADER*/

.loggedin #mobile-header {
    position: relative;
    z-index: 2;
    background-color: transparent;
    box-shadow: none;
}

.notloggedin #mobile-header {
    position: absolute;
    z-index: 2;
    background-color: transparent;
    box-shadow: none;
    height: 120px;
}
@media (max-width: 400px) {
.notloggedin #mobile-header {
    height: 80px;
}
}

#mobile-header button {
    color: #1a1a1a;
    font-size: 24px;
    position: relative;
    background-color: white;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 100;
transition: 0.3s;
z-index: 9999;
}

#mobile-header button:hover {
    color: white;
    background-color: #67aa5c;
}

#mobile-header button {
position: fixed !important;
left: auto;
    right: 5vw;
}

#mobile-header .langchooser {
    top: 38px;
    right: auto;
    left: 70px;
}


/* TITLES */

.c-title-xl {
    font-size: 2vw !important;
    font-weight: 300 !important;
    text-align: left !important;
    border-bottom: 0  !important;
}

.c-title-lg {
    font-size: 40px !important;
    font-weight: 800 !important;
    text-align: left !important;
    border-bottom: 0  !important;
}

.c-titlex2 {
    font-size: clamp(2.625rem, 1.515rem + 2.959vw, 6.25rem); /*42-100*/
    font-weight: 800;
}

@media (max-width: 400px) {
.c-titlex2 {
    font-size: 26px;
}

}

.c-text-lg {
    font-size: 24px;
}


.c-title-border {
    border-left: 5px solid #67aa5c;
    padding-left: 15px !important;
}

.c-title-border-white {
    border-left: 5px solid white;
}

#contenttop .pagetitle {
    border-left: 5px solid #67aa5c;
    padding-left: 15px !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    text-align: left !important;
    border-bottom: 0px  !important;
    margin-top: 50px  !important;
    padding-bottom: 0px;
    margin-left: 3vw;
}

/* END TITLES */

/* BUTTONS */

.c-button-wb {
    display: inline-block;
    color: black;
    min-width: 170px;
    background-color: white;
    text-align: center;
    padding: 20px 10px;
    transition: 0.3s;
    margin-right: 15px;
    font-weight: 500;
    text-decoration: none;
}

.c-button-wb:hover {
    background-color: black;
    color: white;
}

.c-button-yellow {
    display: inline-block;
    padding: 15px;
    background-color: #48783F;
    color: white;
    text-decoration: none;
    min-width: 150px;
    text-align: center;
    font-weight: 900;
    font-size: 16px;
}

.c-button-yellow:hover {
    background-color: black;
}

/* END BYTTONS */

.c-maxw-1280 {
max-width: 90vw;
margin-left: auto;
margin-right: auto;
    width: 100%;
padding-bottom: 5vh;
}.c-newlogo {
    background-image: url('/cache/files/3e798f4b8d405e51ee5c69d1b695857ddcf10a57.svg');
    background-position: center;
    background-size: contain;
background-repeat: no-repeat;
}


a.mobile-header-startlink {
    background-image: url('/cache/files/3e798f4b8d405e51ee5c69d1b695857ddcf10a57.svg');
    background-position: center;
    background-size: contain;
background-repeat: no-repeat;
width: 200px;
    transform: translate(0%, 0%);
        left: 5vw;
}

@media (max-width: 1024px) {
a.mobile-header-startlink {
right: auto;
        left: 20px;
        transform: translate(-0%, 0%);
        width: 200px;
}
}
@media (max-width: 400px) {
a.mobile-header-startlink {
right: auto;
        left: 20px;
        transform: translate(-0%, 0%);
        width: 120px;
}
}

.side-nav__header {
    background-image: url('/cache/files/b7a20ee646fb35888cfdd0a2d9eb9bff2f34e9fb.svg') !important;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    margin: 10px;
}

.side-nav__header {
    max-height: 140px;
    height: 30%;
}

@media (max-width: 540px) {
.side-nav__header {
    max-height: 100px;
    height: 30%;
}

}.c-newsletter {
padding-top: 100px;
padding-bottom: 100px;
width: 60%;
margin: auto;
}

.c-newsletter form {
    margin: auto;
}

.c-newsletter form label {
    display: block;
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.4em;
    font-weight: 800;
font-family: 'Manrope', sans-serif;
}

.c-newsletter form input {
    padding: 10px;
    border: 2px solid #d3d3d3;
    border-radius: 5px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}


.c-newsletter form input:focus-visible {
outline: none;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
}

.c-newsletter form input::placeholder {
color: #d1d1d5;
font-size: 14px;
}

.c-newsletter form .submit {
margin-top: 20px;
text-align: center;
}

.c-newsletter form .submit button {
    font-size: 14px;
    font-weight: 400;
    padding: 20px 25px;
    color: white;
    background-color: #595959;
    transition: 0.3s;
    letter-spacing: 1px;
    border-radius: 3px;
    border-color: transparent;
    min-width: 170px;
}

.c-newsletter form .submit button:hover {
color: white;
background-color: #e0751b;
}

@media only screen and (max-width: 768px) {
.c-newsletter {
width: 90%;
}
}@media(max-width:768px){
#mobile-header .langchooser {
    top: 20px;
    right: 10px;
    left: auto;
}

.c-title-xl {
    font-size: 30px !important;
}

.c-text-lg {
    font-size: 20px;
}

.c-title-lg {
    font-size: 30px !important;
}

#contenttop .pagetitle {
    margin-left: 15px;
}

}/*GREEN BOX*/
.c-section-bigcta {
    background-color: #439d57;
    padding-top: 100px;
    padding-bottom: 100px;
text-align: center;
color: #fff;
}

.c-section-bigcta p {
max-width: 90vw;
margin-left: auto;
margin-right: auto;
font-size: clamp(1.625rem, 0.554rem + 2.857vw, 3.125rem); /*26-50*/
margin-bottom: 20px;
}



.c-footer {
max-width: 90vw;
margin: 6vh auto 0 auto;
display: flex;
gap: 10vh;
}
@media (max-width: 912px) {
.c-footer {
    flex-direction: column;
}
}



.c-contact-info-boxes {
    display: flex;
    gap: 3vh;
    flex-wrap: wrap;
max-width: 90%;
}

.c-contact-info-box {
padding: 15px;
}

.c-contact-info-label {
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 5px;
    color: #2F6F3D;
}

a.c-contact-info-link {
    text-decoration: none;
    font-size: clamp(16px, 1vw, 22px);
border-bottom: 1.5px solid #ccc;
padding-bottom: 20px;
display: inline-block;
position: relative;
}

a.c-contact-info-link::after {
    content: '';
    width: 0%;
    background-color: #67aa5c;
    transition: 1s;
    height: 1.5px;
    position: absolute;
    bottom: -1.5px;
    left: 0;
display: block;
    z-index: 2;
}

a.c-contact-info-link:hover::after {
    width: 100%;
}





/*FORM*/
.c-contactform .contactform {
    text-align: left;
    max-width: 100%;
    margin: 0 auto;
}

@media (max-width: 912px) {
.c-contactform .contactform {
    text-align: center;
}
}

.c-contactform div.contactform form p {
    position: relative;
    max-width: 100%;
    width: 100%;
}

.c-contactform .contactform p.required input, .c-contactform .contactform p input {
    border: 0;
    border-bottom: 1.5px solid #ccc;
    background-color: white;
    color: black;
    width: 100%;
}

.c-contactform div.contactform p label {
    display: flex;
    color: #000;
    gap: 3px;
    font-size: .9em;
    padding: 0.2em 0 0 0.71em;
    position: absolute;
    z-index: 1;
    align-items: center;
font-weight: 900;
}

.c-contactform .contactform p.required label:before {
    content: "* ";
    font-size: 18px;
    font-weight: 900;
    color: #67aa5c;
    line-height: 0.8;
}

.c-contactform .contactform textarea, .c-contactform .contactform p.required textarea {
    border: 0;
    border-bottom: 1.5px solid #ccc;
    background-color: white;
    color: black;
    width: 100%;
}


.contactform button {
margin-top: 2vh;
    display: inline-block;
    padding: 15px;
    background-color: #2F6F3D;
border: 1px solid  #2F6F3D;
    color: white;
    text-decoration: none;
    min-width: 150px;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
}

.contactform button:hover {
    background-color: black;
border: 1px solid  black;
}




/* FOOTER */

.c-footer a {
display: inline-block;
text-decoration: none;
margin-bottom: 0px;
}

.c-social-boxes {
padding: 20px;
    display: flex;
    gap: 2vh;
    flex-wrap: wrap;
max-width: 90%;
}


.c-social-boxes a span.fa {
    display: flex;
    width: 50px;
    height: 50px;
    padding-left: 6px;
    padding-top: 4px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    background-color: #67aa5c;
    font-size: 25px;
transition: 0.3s;
color: white;
}

.c-social-boxes a span.fa:hover  {
background-color: black;
color: white;
}.side-nav__container {
    width: 100%;
max-width: 100%;
position: relative;
z-index: 999;
}


.side-nav__container {
    will-change: transform, opacity;
    transition: 0.5s;
}

.side-nav--visible .side-nav__container {
    -webkit-transform:  translateX(0%);
    -ms-transform:  translateX(0%);
    transform: translateX(0%);
}

aside.side-nav--animatable .side-nav__container {
    -webkit-transition: transform 0.5s linear, opacity 0.5s;
    -moz-transition: transform 0.5s linear, opacity 0.5s;
    -o-transition: transform 0.5s linear, opacity 0.5s;
    transition: transform 0.5s linear, opacity 0.5s;
}

aside.side-nav--visible.side-nav--animatable .side-nav__container {
    -webkit-transition: transform 0.5s linear, opacity 0.5s;
    -moz-transition: transform 0.5s linear, opacity 0.5s;
    -o-transition: transform 0.5s linear, opacity 0.5s;
    transition: transform 0.5s linear, opacity 0.5s;
}

.side-nav__footer {
    box-shadow: none;
}

.side-nav__content {
    display: flex;
    align-items: center;
    justify-content: center;
text-align: center;
}
.side-nav ul {
display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
gap: 3vh;
}


.side-nav ul li a {
    font-weight: 900;
    font-size: clamp(1.25rem, 0.791rem + 1.224vw, 2.75rem); /*20 - 44*/
    padding-left: 0px;
transition: 1.2s ease-out;
line-height: 1.4em;
}


.side-nav__content li:hover {
background-color: #67aa5c40 !important;
}


.side-nav ul li a:hover{
letter-spacing: 8px;
}



.side-nav__hide {
    position: absolute;
    left: auto;
right: 5vw;
    top: 40px;
    background-color: black;
    border: none;
    color: #FFF !important;
    width: 24px;
    height: 24px;
    padding: 20px;
    margin: 0;
display: flex;
    align-items: center;
    justify-content: center;
}


.c-mobile-menu-social-boxes {
padding: 20px;
    display: flex;
    gap: 2vh;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.c-mobile-menu-social-boxes a {
text-decoration: none;
}

.c-mobile-menu-social-boxes a span.fa {
    display: flex;
    width: 40px;
    height: 40px;
    padding-left: 6px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    background-color: #67aa5c;
    font-size: 20px;
transition: 0.3s;
color: white;
}

.c-mobile-menu-social-boxes a span.fa:hover  {
background-color: black;
color: white;
}/* TOP SECTION */

.c-top-section-video {
    overflow: hidden;
    position: relative;
    height: 100vh;
    width: 100%;
background-color: #000000;
}

.c-top-section-video video {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.c-top-section-video .c-text-lg.c-title-border {
    max-width: 650px;
}

.c-top-section-video .c-playvideo {
    transform: initial;
    top: auto;
    left: auto;
    right: 5%;
    bottom: 5%;
}

.c-top-section-darkover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgb(0 0 0 / 44%);
}

.c-top-video {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    z-index: 18;
    color: white;
    width: 90vw;
}

#contenttop .c-top-video h1 {
    color: white;
}

.c-top-section {
    min-height: 100vh;
    display: flex;
}

.c-top-section-box {
    width: 50%;
}

.c-top-section-box-inner {
    height: 100%;
}

.c-top-section-yellowbox {
   background-color: #ffca25;
    height: 100%;
border-bottom-right-radius: 5vw;
display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/* VERTICAL CAROUSEL */

.c-top-section-grids {
    display: flex;
margin-left: 10px;
    margin-right: 10px;
    height: 100vh;
    overflow: hidden;
}

.c-top-section-grids-col {
    margin: 10px;
    width: 33.33%;
display: flex;
    flex-direction: column;
  position: relative;
}

.c-top-section-grids-col img {
    width: 100%;
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

.c-vertical-carousel-anim-1 {
  animation: marquee-vertical-1 25s linear infinite;
  position: absolute;
  top: 0;
}

.c-vertical-carousel-anim-2 {
  animation: marquee-vertical-2 25s linear infinite;
  position: absolute;
  top: 0;
}

.c-top-section-grids-col-50 .c-vertical-carousel-anim-1, .c-top-section-grids-col-50 .c-vertical-carousel-anim-2 {
  top: -150%;
}

@keyframes marquee-vertical-1 {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes marquee-vertical-2 {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}


/* VERTICAL CAROUSEL END */



.c-title-box {
width: 60%;
}

.c-mini-video video {
    width: 100%;
    height: auto;
}

.c-playvideo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.c-play-anim {
position: absolute;
animation: 10s spin linear infinite;
transform: rotate(0deg);
}

@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(359deg);}
}

.c-play-button {
position: relative;
}


/*COMPANY*/


.c-section-company {
padding-top: 100px;
padding-bottom: 100px;
background-color: #1a1a1a;
}

.c-section-company .c-title-lg {
color: white !important;
}

.c-section-company .row p{
font-size: 1.2em;
letter-spacing: 2px;
text-align: justify;
}

.c-section-company ul {
list-style-type: none !important;
    display: flex;
    gap: 4vh;
    flex-wrap: wrap;
    padding-left: 0px !important;
}

.c-section-company ul li{
background-color: #385E31;
padding: 15px !important;
line-height: 1.4em;
font-weight: 600;
letter-spacing: 1px;
font-size: 1.4em;
}

/*EXPERTISE*/

.c-section-expertise {
    padding-top: 100px;
    padding-bottom: 100px;
}

.c-expertise-container {
display: flex;
}

.c-expertise-boxes {
    width: 65%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.c-expertise-slider {
width: 35vw;
}

.c-expertise-image {
height: 100vh;
background-size: cover;
}

.c-expertise-box {
    display: flex;
    width: 50%;
    margin-top: 30px;
    margin-bottom: 30px;
}

.c-expertise-box-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.c-expertise-box-link .c-button-yellow:hover {
background-color: black;
color: white;
}

.c-expertise-icon {
    display: inline-block;
    width: 100px;
    height: 100px;
    position: relative;
    background-color: #f1f1f1;
}

.c-expertise-icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.c-expertise-text {
width: calc(100% - 100px);
    padding-left: 15px;
    padding-right: 15px;
}

#contenttop .c-expertise-text h2 {
    text-align: left;
    border: 0;
    margin-bottom: 0;
    font-weight: 800;
}


/*METRICS*/

.c-section-metrics {
    background-color: #439d57;
    padding-top: 100px;
    padding-bottom: 100px;
    color: white;
}

.c-metric-boxes {
    display: flex;
    justify-content: space-around;
    text-align: center;
gap: 4vh;
}

.c-metric-box {
width: 260px;
position: relative;
}

.c-metrics-icon {
height: 50px;
width: auto;
}

.c-metric-title {
    display: block;
    font-size: clamp(2.5rem, 0.714rem + 4.762vw, 5rem); /*40 - 80*/
    font-weight: 800;
    margin-bottom: 0px;
}

.c-metric-text {
    display: block;
    font-size: 26px;
    font-weight: 900;
    margin-bottom: 0px;
}




.c-section-opticalfiber {
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url('cache/files/notfound');
    background-size: cover;
    background-position: right center;
}

#contenttop .c-section-opticalfiber h1 {
color: white;
}

#contenttop .c-section-opticalfiber p {
font-size: 20px;
max-width: 650px;
margin-bottom: 0px;
}


/*WHY US*/

.c-section-whyus {
background-color: #f1f1f1;
padding-top: 100px;
padding-bottom: 100px;
}

.c-whyus-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 90vw;
gap: 4vh;
}

.c-whyus-box {
    width: 30%;
    display: flex;
    margin-bottom: 20px;
    margin-top: 20px;
    align-items: flex-end;
}

.c-whyus-num {
width: 100px;
    height: 100px;
    background-color: white;
    color: #439d57;
    position: relative;
}

.c-whyus-num span {
    position: absolute;
    font-size: 70px;
    font-weight: 800;
    line-height: 0.8;
    bottom: 0;
    left: 0;
}
.c-whyus-text {
    width: calc(100% - 100px);
    margin-left: -20px;
    position: relative;
}

.c-whyus-text span{
line-height: 1.8em;
font-size: 1.2em;
font-weight: 800;
margin-bottom: 5px;
}

.c-section-customers {
padding-top: 100px;
padding-bottom: 100px;
}

.c-customers-container {
display: flex;
    flex-direction: row;
    align-items: center;
}

.c-customers-image img{
height: 70px;
width: auto;
margin: 20px;
}



/*GREEN BOX*/
.c-section-bigcta {
    background-color: #439d57;
    padding-top: 100px;
    padding-bottom: 100px;
text-align: center;
color: #fff;
}

.c-section-bigcta p {
max-width: 90vw;
margin-left: auto;
margin-right: auto;
font-size: clamp(1.625rem, 0.554rem + 2.857vw, 3.125rem); /*26-50*/
margin-bottom: 20px;
}




@media (max-width: 990px) {


.c-section-company .c-title-lg {
margin-left: 0px;
}

.c-section-opticalfiber .c-title-lg {
margin-left: 0px;
}

.c-section-whyus .c-title-lg {
margin-left: 0px;
}

.c-section-expertise .c-title-lg {
margin-left: 15px;
}

.c-expertise-text p {
   padding: 0px;
}


.c-top-video .c-button-wb {
margin-bottom: 10px;
}

.c-top-section {
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.c-expertise-boxes {
    width: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-left: 15px;
}


.c-expertise-box {
    display: flex;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
    
}



.c-expertise-container {
    display: flex;
    flex-direction: column;
}


.c-whyus-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
}



.c-section-whyus {
    background-color: #f1f1f1;
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 15px;
}

.c-whyus-box {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    margin-top: 20px;
    align-items: flex-end;
    
}



.c-section-customers {
    padding-left: 15px;
    padding-right: 15px;
}



.c-expertise-slider {
width: 100%;
}


.c-expertise-box-link {
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.c-metric-boxes {
flex-wrap: wrap;
}


.c-customers-container {
    flex-wrap: wrap;
}
}.c-espa-container .c-close-espa {
cursor: pointer;
}

.c-espa-container.active-espa {
    position: fixed;
    width: auto;
    right: 3%;
    bottom: 3%;
    z-index: 999;
transform: scale(1);
}

.c-espa-container.active-espa .c-espa-mini {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
opacity: 0;
transition: 0.5s;
transition: opacity 0s;
}



.c-espa-container.active-espa .c-espa-box {
    background-color: white;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0;
    padding-left: 0;
    text-align: center;
    box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
    transition: 0.5s;
    transition: border-radius 0s;
    width: auto;
overflow: hidden;
height: 60px;
position: relative;
z-index: 3;
}



.c-espa-container.active-espa .c-close-espa {
    position: absolute;
    right: 0px;
    top: -45px;
    background-color: #67aa5c;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    box-shadow: 0px 0px 5px rgb(0 0 0 / 30%);
transition: 0.5s;
z-index: 90;
}

.c-espa-container.active-espa .c-linetop {
    position: absolute;
    width: 20px;
    height: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    background-color: white;
transition: 0.5s;
}

.c-espa-container.active-espa .c-linebottom {
    position: absolute;
    width: 20px;
    height: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: white;
transition: 0.5s;
}

.c-espa-container.active-espa p {
width: 90%;
margin: auto;
}

.c-espa-container.active-espa p, .c-espa-container.active-espa a {
opacity: 1;
transition: 0.5s;
}


/* DECTIVATE */

.c-espa-container.deactive-espa {
    position: fixed;
    width: auto;
    right: 3%;
    bottom: 3%;
z-index: 999;
transition: 0.5s;
transform: scale(1);
}

.c-espa-container.deactive-espa .c-espa-mini {
    position: absolute;
   /* left: 50%;*/
   /* top: 50%;*/
    /*transform: translate(-50%, -50%);*/
    /*transition: 0.5s;*/
opacity: 1;*/
}

.c-espa-container.deactive-espa .c-espa-mini img {
    width: 100px;
    height: auto;
    transition: 0.5s;
    overflow: hidden;
border-radius: 50%;
}

.c-espa-container.deactive-espa .c-espa-box {
    background-color: white;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
    transition: 0.5s;
    transition: border-radius 0s;
    height: 100px;
    width: 100px;
overflow: hidden;
}


.c-espa-container.deactive-espa .c-close-espa {
    position: absolute;
    right: 0px;
    top: -15px;
    background-color: #67aa5c;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    box-shadow: 0px 0px 5px rgb(0 0 0 / 30%);
transition: 0.5s;
z-index: 90;
}

.c-espa-container.deactive-espa .c-linetop {
    position: absolute;
    width: 20px;
    height: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    background-color: white;
transition: 0.5s;
}

.c-espa-container.deactive-espa .c-linebottom {
    position: absolute;
    width: 20px;
    height: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: white;
transition: 0.5s;
}

.c-espa-container.deactive-espa p, .c-espa-container.deactive-espa a {
opacity: 0;
transition: 0.5s;
}




.c-espa-container.active-espa .c-espa-box img {
width: 100%;
height: auto;
opacity: 1;
transition: 0.5s;
transition: opacity 0s;
height: 60px;
width: 460;
}

.c-espa-container.deactive-espa .c-espa-box img {
width: 100%;
height: auto;
opacity: 0;
transition: 0.5s;
transition: opacity 0s;
}


@media (max-width:768px) {

.c-espa-container.active-espa {
transform: scale(0.8);
}

.c-espa-container.deactive-espa {
transform: scale(0.8);
}

.c-espa-container.active-espa .c-espa-box {
height:auto;
}

.c-espa-container.active-espa .c-espa-box img {
width:100%;
height:auto;
}

}