@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

@font-face {
    font-family: 'Bunday Clean';
    src: url('Bunday-Clean/BundayClean-SeBold.eot');
    src: url('Bunday-Clean/BundayClean-SeBold.eot?#iefix') format('embedded-opentype'),
        url('Bunday-Clean/BundayClean-SeBold.woff2') format('woff2'),
        url('Bunday-Clean/BundayClean-SeBold.woff') format('woff'),
        url('Bunday-Clean/BundayClean-SeBold.ttf') format('truetype'),
        url('Bunday-Clean/BundayClean-SeBold.svg#BundayClean-SeBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bunday Clean';
    src: url('Bunday-Clean/BundayClean-Bold.eot');
    src: url('Bunday-Clean/BundayClean-Bold.eot?#iefix') format('embedded-opentype'),
        url('Bunday-Clean/BundayClean-Bold.woff2') format('woff2'),
        url('Bunday-Clean/BundayClean-Bold.woff') format('woff'),
        url('Bunday-Clean/BundayClean-Bold.ttf') format('truetype'),
        url('Bunday-Clean/BundayClean-Bold.svg#BundayClean-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bunday Clean';
    src: url('Bunday-Clean/BundayClean-Regu.eot');
    src: url('Bunday-Clean/BundayClean-Regu.eot?#iefix') format('embedded-opentype'),
        url('Bunday-Clean/BundayClean-Regu.woff2') format('woff2'),
        url('Bunday-Clean/BundayClean-Regu.woff') format('woff'),
        url('Bunday-Clean/BundayClean-Regu.ttf') format('truetype'),
        url('Bunday-Clean/BundayClean-Regu.svg#BundayClean-Regu') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Marlina';
    src: url('Marlina/Marlina.eot');
    src: url('Marlina/Marlina.eot?#iefix') format('embedded-opentype'),
        url('Marlina/Marlina.woff2') format('woff2'),
        url('Marlina/Marlina.woff') format('woff'),
        url('Marlina/Marlina.ttf') format('truetype'),
        url('Marlina/Marlina.svg#Marlina') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* width */
::-webkit-scrollbar {width: 8px;}

/* Track */
::-webkit-scrollbar-track {border-radius: 10px;}
 
/* Handle */
::-webkit-scrollbar-thumb {background: #cecece; border-radius: 10px;}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: #b2b2b2;}

@-moz-document url-prefix() {
    .box-nav{background-color: rgba(255, 255, 255, 0.95) !important;}
    .sd-brand {width: 160px !important;}
    .overlay{background-color: rgba(0,89,196,0.95) !important;}
}

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{
    @media {
    
    }
}

body{font-family: Lato;}
p{font-family: Lato; font-size: 15px; color: #000000;}
h1, h2, h3, h4, h5, h6{font-family: Bunday Clean;}
.margin-top01{margin-top: 15px;}
.margin-top02{margin-top: 20px;}
.margin-top03{margin-top: 30px;}
.margin-bttm01{margin-bottom: 10px;}
.margin-bttm02{margin-bottom: 20px;}
.margin-bttm03{margin-bottom: 30px;}
.pad-top01{padding-top: 2vh;}
.pad-top02{padding-top: 4vh;}
.pad-top03{padding-top: 6vh;}
.pad-bottom01{padding-bottom: 2vh;}
.pad-bottom02{padding-bottom: 4vh;}
.pad-bottom03{padding-bottom: 6vh;}
.pad-right{padding-right: 20px;}
.pad-left{padding-left: 20px;}
.marg-right{margin-right: 10px;}
.marg-right02{margin-right: 20px;}
.marg-left{margin-left: 10px;}
.marg-left02{margin-left: 20px;}
.pad-tp03{padding-top: 30px;}
.pad-bttm03{padding-bottom: 30px;}

.marge-head{margin-top: 8rem;}
.marge-foot{margin-bottom: 6rem;}
.pad-head{padding-top: 8rem;}
.pad-foot{padding-bottom: 8rem;}
.marge-foot02{margin-bottom: 100px;}
.pad-foot{padding-bottom: 60px;}
.pad-box01{padding: 30px;}
.pad-box02{padding: 10px;}
.pad-box03{padding: 40px; border-radius: 8px;}
.pad-box04{padding: 15px;}

.no-pads{padding-right: 0px; padding-left: 0px;}
.med-img{width: 100%; max-width: 750px; border-radius: 8px;}

.yellow-box{background-color: #ffec00; padding: 30px 40px; border-radius: 8px;}
.blue-box{background-color: #0072ce; padding: 30px 40px; border-radius: 8px;}

.no-margie-bttm{margin-bottom: 0;}
.bordier{border-radius: 10px;}

.blue-text{color: #0072ce;}
.red-text{color: #dd0021;}
.white-text{color: #ffffff;}

.bolder{font-weight: bold;}
.flexer{display: flex;}
.italer{font-style: italic;}
.aligner01{align-items: flex-start;}
.aligner02{align-items: flex-end;}

/************CONTENIDO***********/
#portada-ra{background-image: url('../shapes/portada-anual.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center;}
.red-triangle{width: 100%; max-width: 1000px; position: absolute; bottom: 0; right: 0; opacity: 0.95;}
.tit-ra{width: 100%; max-width: 300px; margin-top: 3rem;}
.box-port-ra{height: 100vh;}
.box-ra{padding-bottom: 4rem; padding-right: 6%;}
.box-ra02{padding-bottom: 4rem;}
.btn-ra{background-color: rgba(221, 0, 33, 0); border: 1px solid rgba(255, 255, 255, 1); padding: 10px 20px; border-radius: .4rem; color: #ffffff; text-decoration: none; transition: .3s;}
.btn-ra:hover{background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(255, 255, 255, 1); color: #dd0021; text-decoration: none;}

.btn-down-ra{background-color: rgba(0, 114, 206, 1); border: 1px solid rgba(0, 114, 206, 1); padding: 10px 20px; border-radius: .4rem; color: #ffffff; text-decoration: none; transition: .3s;}
.btn-down-ra:hover{background-color: rgba(221, 0, 33, 1); border: 1px solid rgba(221, 0, 33, 1); color: #ffffff; text-decoration: none;}

.port-sos{width: 100%;}
.sos-box{height: 34vh; background-image: url('../shapes/portada-sos01.svg'); background-size: cover; background-repeat: no-repeat; background-position: center center;}
.sos-box01{height: 32vh;}
.sos-box02{height: 34vh; background-image: url('../shapes/portada-sos02.svg'); background-size: cover; background-repeat: no-repeat; background-position: center center;}
.tit-sos{width: 100%; max-width: 800px;}
.btn-down-rs{background-color: rgba(221, 0, 33, 1); border: 1px solid rgba(221, 0, 33, 1); padding: 10px 20px; border-radius: .4rem; color: #ffffff; text-decoration: none; transition: .3s;}
.btn-down-rs:hover{background-color: rgba(0, 114, 206, 1); border: 1px solid rgba(0, 114, 206, 1); color: #ffffff; text-decoration: none;}

.btn-rs{background-color: rgba(221, 0, 33, 0); border: 1px solid rgba(221, 0, 33, 1); padding: 10px 20px; border-radius: .4rem; color: #dd0021; text-decoration: none; transition: .3s;}
.btn-rs:hover{background-color: rgba(221, 0, 33, 1); border: 1px solid rgba(221, 0, 33, 1); color: #ffffff; text-decoration: none;}
.sd-sos{width: 100%; max-width: 300px; margin-top: 2rem;}
.box-down-rs{height: 34vh;}

.overlay-anual {height: 100%; width: 0; position: fixed; z-index: 1100; top: 0; left: 0; overflow-x: hidden; transition: 0.5s; background-color: rgba(221,0,33,0.8); -webkit-backdrop-filter: saturate(150%) blur(10px); backdrop-filter: saturate(150%) blur(10px);}
.overlay-anual-content {position: relative; top: 8%; width: 100%; text-align: left; margin-top: 30px; padding-left: 3vw; overflow: hidden; min-width: 600px;}
.overlay-anual a {padding: 6px 8px; text-decoration: none; font-size: 32px; color: #ffffff; display: block; transition: 0.3s;}
.overlay-anual a > h3{font-size: 1.6rem;}
.overlay-anual a:hover, .overlay a:focus {color: #ffec00;}
.overlay-anual .closebtn {position: absolute; top: 20px; right: 45px; font-size: 60px; z-index: 1200;}

.overlay {height: 100%; width: 0; position: fixed; z-index: 1100; top: 0; left: 0; overflow-x: hidden; transition: 0.5s; background-color: rgba(0,89,196,0.8); -webkit-backdrop-filter: saturate(150%) blur(10px); backdrop-filter: saturate(150%) blur(10px);}
.overlay-content {position: relative; top: 10%; width: 100%; text-align: left; margin-top: 30px; padding-left: 3vw; overflow: hidden; min-width: 600px;}
.overlay a {padding: 8px; text-decoration: none; font-size: 36px; color: #ffffff; display: block; transition: 0.3s;}
.overlay a:hover, .overlay a:focus {color: #ffec00;}
.overlay .closebtn {position: absolute; top: 20px; right: 45px; font-size: 60px;}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}

.movil-div{display: none;}
.desktop-div{display: block;}

.sd-brand{width: 100%; max-width: 160px;}
.box-nav{background-color: rgba(255, 255, 255, 0.8); box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: saturate(150%) blur(10px); backdrop-filter: saturate(150%) blur(10px);}
.sd-nav{padding-top: 10px; padding-bottom: 10px; display: flex; align-items: center;}
.btn-menu-anual{width: 45px; height: 45px; background-color: rgba(221, 0, 33, 1); border-radius: 100px; display: flex; justify-content: center; align-items: center; transition: .5s;}
.btn-menu-anual img{width: 100%; max-width: 25px;}
.btn-menu-anual:hover{cursor: pointer; background-color: rgba(186, 0, 36, 1); box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.25);}

.btn-menu{width: 45px; height: 45px; background-color: rgba(0, 114, 206, 1); border-radius: 100px; display: flex; justify-content: center; align-items: center; transition: .5s;}
.btn-menu img{width: 100%; max-width: 25px;}
.btn-menu:hover{cursor: pointer; background-color: rgba(0, 80, 168, 1); box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.25);}

.box-brand{padding-left: 20px;}
.box-btn {position: absolute; right: 0;}
.box-btn a{background-color: rgba(221, 0, 33, 0); border: 2px solid #dd0021; padding: 10px 20px; border-radius: .4rem; color: #dd0021; text-decoration: none; transition: .3s;}
.box-btn a:hover{background-color: rgba(221, 0, 33, 1); color: #ffffff;}
.evolucion-sos > h5{margin-right: 20px;}
.evolucion-sos{border-bottom: 2px solid #dd0021;}
.ico-evo{width: 100%; max-width: 80px;}
.compromiso-sos{width: 100%; max-width: 800px;}
.temas-materiales{width: 100%; max-width: 1300px;}
.tit-portadilla h2{margin-bottom: 0px; font-size: 2.5rem;}
.tit-portadilla h1{font-family: Marlina; font-size: 5rem;}
.btn-leer{background-color: rgba(221, 0, 33, 0); border: 2px solid #dd0021; padding: 4px 20px; border-radius: .8rem; color: #dd0021; text-decoration: none; transition: .3s;}
.btn-leer:hover{background-color: rgba(221, 0, 33, 1); color: #ffffff; text-decoration: none;}

#portadilla{height: 100vh; background-color: #000000; padding-top: 15vh;}
.sistema-corp{width: 100%; max-width: 1300px;}
#banner0010{height: 52vh; background-color: #000000; margin-top: 4vh; margin-bottom: 4vh;}
.sd-hum{width: 100%; max-width: 200px; margin-left: 15px;}
.eduardo-mizon{width: 100%; max-width: 400px;}
#mensaje-tienda{background-image: url('../shapes/mensaje-tienda-02.jpg'); background-size: cover; background-position: top right; background-repeat: no-repeat;}
.box-ghost01{height: 46vh;}
.btn-prev{background-color: rgba(221, 0, 33, 0.7); padding: 10px 20px; border-radius: .4rem; color: #ffffff; text-decoration: none; transition: .3s;}
.btn-prev:hover{background-color: rgba(221, 0, 33, 1); color: #ffffff; text-decoration: none;}
.btn-next{background-color: rgba(221, 0, 33, 0.7); padding: 10px 20px; border-radius: .4rem; color: #ffffff; text-decoration: none; transition: .3s;}
.btn-next:hover{background-color: rgba(221, 0, 33, 1); color: #ffffff; text-decoration: none;}
.fixed-bottom.nav-bottom{bottom: 30px;}
#banner0011{margin-top: 4vh; margin-bottom: 4vh;}
.img-compromiso{height: 100%; max-height: 60vh;}
.img-compromiso02{width: 100%; max-width: 2560px;}
.triangle01{width: 100%; max-width: 500px; position: absolute; top: 0; right: 0;}
#portadilla01{height: 100vh;}
#img-porta{height: 70vh; background-size: cover; background-position: center center; background-repeat: no-repeat;}
.shape001{height: 100%; max-height: 70vh; position: absolute; left: 0;}
#banner0012{margin-top: 6vh; margin-bottom: 6vh;}
#banner0013{margin-top: 6vh; margin-bottom: 6vh;}
#banner0014{height: 60vh; background-image: url('../shapes/trabajadores-0065452.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; margin-top: 6vh; margin-bottom: 6vh;}
#banner0015{height: 60vh; background-image: url('../shapes/trabajadores-006543.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; margin-top: 6vh; margin-bottom: 6vh;}
#banner0016{height: 60vh; background-image: url('../shapes/trabajadores-0065453.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; margin-top: 6vh;}
#banner0017{height: 60vh; background-image: url('../shapes/proveedores-006874.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; margin-top: 6vh; margin-bottom: 6vh;}
#banner0018{height: 60vh; background-image: url('../shapes/clientes-004566.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; margin-top: 6vh; margin-bottom: 6vh;}
#banner0019{height: 60vh; background-image: url('../shapes/clientes-004567.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; margin-top: 6vh;}
#banner0020{height: 60vh; background-image: url('../shapes/medioambiente-007845.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; margin-top: 6vh; margin-bottom: 6vh;}
#banner0021{height: 60vh; background-image: url('../shapes/medioambiente-007846.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; margin-top: 6vh; margin-bottom: 6vh;}
#banner0022{margin-top: 6vh;}
#comunidad01{background-image: url('../shapes/comunidad-00846.jpg'); background-size: cover; background-position: top right; background-repeat: no-repeat;}
#banner0023{height: 60vh; background-image: url('../shapes/comunidad-00847.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; margin-top: 6vh;}
.img-techo{width: 100%; max-width: 250px;}
.img-jab{width: 100%; max-width: 180px;}
.img-base{width: 100%; max-width: 360px;}
#medioambiente01{background-image: url('../shapes/medioambiente-007844.jpg'); background-size: cover; background-position: top right; background-repeat: no-repeat;}
#banner0024{margin-top: 6vh;}
#proveedores01{background-image: url('../shapes/proveedores-006873.jpg'); background-size: cover; background-position: top right; background-repeat: no-repeat;}
#clientes01{background-image: url('../shapes/clientes-004565.jpg'); background-size: cover; background-position: top right; background-repeat: no-repeat;}
#trabajadores01{background-image: url('../shapes/trabajadores-006540.jpg'); background-size: cover; background-position: top right; background-repeat: no-repeat;}
.descargar-reporte div{display: flex; align-items: flex-start;}
.descargar-reporte img{width: 100%; max-width: 25px; margin-right: 15px;}

#mensaje-presidente{background-image: url('../shapes/mensaje-presidente.jpg'); background-size: cover; background-position: top right; background-repeat: no-repeat;}
#mensaje-gerente{background-image: url('../shapes/mensaje-gerente-corporativo.jpg'); background-size: cover; background-position: top right; background-repeat: no-repeat;}

.cifras-sd{width: 100%; max-width: 200px; margin-bottom: 10px;}
.cifras-box h5{margin-bottom: 0px;}
.mapa{width: 100%; max-width: 1000px;}
.prop-text, .frase-reir{font-family: Marlina;}
.barras-sd{background-image: url('../shapes/barras-sd035.svg'); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 4vh 0px;}
.reir{width: 100%; max-width: 200px;}
#proposito-mision{background-image: url('../shapes/proposito-006852.jpg'); background-size: cover; background-position: top right; background-repeat: no-repeat;}
#historia{background-image: url('../shapes/historia00511.jpg'); background-size: cover; background-position: top right; background-repeat: no-repeat;}
.box-ghost02{height: 54vh;}
.hitos-txt{font-family: Marlina; font-size: 3.5rem;}
.gte-sodimac{width: 100%; max-width: 260px;}
#sodimac-chile{background-image: url('../shapes/sodimac-chile.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat;}
#banner0025{margin-top: 6vh; margin-bottom: 6vh;}
.ico-tienda{width: 100%; max-width: 70px;}
.cifra-tienda{height: 100%; max-height: 40px;}
#sodimac-colombia{background-image: url('../shapes/sodimac-colombia.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat;}
#banner0026{margin-top: 6vh; margin-bottom: 6vh;}
#sodimac-peru{background-image: url('../shapes/sodimac-peru.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat;}
#banner0027{margin-top: 6vh; margin-bottom: 6vh;}
#sodimac-argentina{background-image: url('../shapes/sodimac-argentina.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat;}
#banner0028{margin-top: 6vh; margin-bottom: 6vh;}
#sodimac-brasil{background-image: url('../shapes/sodimac-brasil.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat;}
#banner0029{margin-top: 6vh; margin-bottom: 6vh;}
#sodimac-uruguay{background-image: url('../shapes/sodimac-uruguay.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat;}
#banner0030{margin-top: 6vh; margin-bottom: 6vh;}
#sodimac-mexico{background-image: url('../shapes/sodimac-mexico.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat;}
#banner0031{height: 60vh; background-image: url('../shapes/sodimac-mexico02.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; margin-top: 6vh; margin-bottom: 6vh;}
#imperial{background-image: url('../shapes/imperial.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat;}
#banner0032{margin-top: 6vh; margin-bottom: 6vh;}
.trianle-lines{width: 100%; max-width: 300px; position: absolute;}
.ham-mv{display: none;}
.ver-sos-mv{display: none !important;}
#historia-mv, #proposito-mision-mv, #mensaje-gerente-mv, #mensaje-tienda-mv, #mensaje-presidente-mv{display: none;}