@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	text-decoration: none;

}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

html { scroll-behavior: smooth; }
button:focus {outline:0;}
img{ width:100%; height: auto;}
img.bottomline{margin-bottom:-2px;}
*, :after, :before {box-sizing: border-box;}


/* WEB STRUCTURE */
html, body{display: flex;  width:100%; background-color:#f9f9f9; text-align: center; font-family: 'Merriweather', serif; color:#2E2D2C; }
/*ASIDE*/
aside{ width:25em; height:100%; padding-top:4.4em;  background-color:#2E2D2C;}
aside .header{ width: 25em; margin: 0 auto; position: fixed;}
aside .logo{ width: 7em; height:6.4em; margin: 0 auto; background-image: url("../images/Logo/alvaro-carmona-logo.svg"); background-size: contain; background-repeat: no-repeat; display: block;}
aside .menu-button{display:none;}
aside nav{ width:80%; margin: 6em auto 0; text-align: left;}
aside nav li{ margin-bottom: 2em;}
aside nav li:first-child{ display:none;}
aside nav a{font-size:1.2em; font-weight:400;  font-family: 'Barlow', sans-serif; color: white; text-decoration: none;  display:block; position: relative; padding: 0.8em; transition: all 0.3s 0s ease-out; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
aside nav a:hover{ background-color: rgba(0,0,0,0.20);  -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.5s ease-in-out;}
aside nav a.active{color:#02D1F4; cursor:default;}
aside nav a.active:hover{ background-color:transparent;}

/*CASE STUDY SUBMENU*/
aside nav li.case-studies{ margin-bottom: 0.5em;}
aside nav .case-study-menu { margin-left: 0.5em;}
aside nav .case-study-menu li:first-child{ display:block;}
aside nav .case-study-menu li{margin-bottom: 0em; }
aside nav .case-study-menu li a{ line-height: 1.2em;}
aside nav .case-study-menu li:last-child{ margin-bottom: 2em;}

/*dark mode*/
aside nav .dark-mode{font-size:1.2em; padding: 0.8em; background-color: rgba(0,0,0,0.10); color:#999999;  font-weight:400;  font-family: 'Barlow', sans-serif; display: inline-block;  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
aside nav .dark-mode button{ width: 2.8em; padding:0.28em; margin: 0.1em 0 0 0.6em; cursor: pointer; background-color:rgba(255,255,255,0.2);  -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; border:none;  -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.5s ease-in-out;}
aside nav .dark-mode button.on{background-color:#81e4fc;}
aside nav .dark-mode button div{ width: 1.25em; height: 1.25em; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
aside nav .dark-mode button.off div{float: left; background-color:rgba(255,255,255,0.4);  -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.5s ease-in-out;}
aside nav .dark-mode button.on div{float:right; background-color:#00b7dc;  -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.5s ease-in-out;}

/*SECONDARY NAV*/
.secondary-nav-column{ padding-top:4.4em; width:4em; height: 100%;  background-color:#454444;}
.secondary-nav{position: fixed;}
.secondary-nav a{display:flex; margin-bottom:0.6em; }
.secondary-nav a .icon-box{padding:0.8em 0.6em;}
.secondary-nav a:hover .icon-box{ background-color: #373636; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.secondary-nav a p{font-size:0; color: black; font-weight: 500; width:0; line-height: 1.9em; text-align: left;  padding:0; position: relative; font-family: 'Barlow', sans-serif; white-space: nowrap; opacity: 0; transition: opacity 0.5s 0s ease-out; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
.secondary-nav a:hover p{font-size: 1.2em; min-width: 11.1em; line-height: 1.9em; text-align: left;  padding:0.7em 0 0.7em 0.9em; z-index: 999; visibility: visible; opacity: 1; }
.secondary-nav a:hover p .right-triangle {display:block; position: absolute; left: 0.7em; top:1.1em; width: 0; height: 0; background: transparent; border-top: 10px solid transparent; border-left: 10px solid #373636;border-bottom: 10px solid transparent;margin:0 0 0 -0.7em;}
.secondary-nav .icon{font-size: 2.01em; color:white;}
.secondary-nav .icon.active{font-size: 2.01em; color:#02D1F4;}

/*MAIN*/
main{width:75%;text-align:center;}


/*CONTENT*/
.box-section{ width: 100%; padding:8em 0; text-align: center; }
.box-main{ padding:6em 0 0;}
.container-1{ width:60%; margin: 0 auto;}
.container-2{ width:70%; margin: 0 auto;}
.container-3{ width:80%; margin: 0 auto;}
.label-container{width: 100%; display: flex; justify-content: space-between; }
.label-container span{display: inline-block; margin: 0 auto;}
.content-1-2col{display:grid; grid-template-columns:30% auto;}
.content-2col{display:grid; grid-template-columns:1fr 1fr;}
.content-3col{display:grid; grid-template-columns:1fr 1fr 1fr;}
.content-4col{display:grid; grid-template-columns:1fr 1fr 1fr 1fr;}
.content-5col{display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr;}
.gap80{ column-gap: 5em;}
.gap100{ column-gap: 6.25em;}
.grid-gap80{ grid-gap:5em;}
.grid-gap100{ grid-gap:6.25em;}



/*FONTS*/
/*@import url('https://fonts.googleapis.com/css2?family=Barlow&family=Barlow+Condensed:wght@300;400;500;600;700&family=Merriweather:ital,wght@0,300;0,700;1,700&display=swap');*/
@font-face {
    font-family: 'fontello';
    src: url('../font/fontello.eot?47184096');
    src: url('../font/fontello.eot?47184096#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?47184096') format('woff'),
       url('../font/fontello.ttf?47184096') format('truetype'),
       url('../font/fontello.svg?47184096#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
}


/*COLORS*/
.blue-gradient{ background: #02d1f4; background: -moz-linear-gradient(left,  #02d1f4 0%, #63ffc9 100%); background: -webkit-linear-gradient(left,  #02d1f4 0%,#63ffc9 100%); background: linear-gradient(to right,  #02d1f4 0%,#63ffc9 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02d1f4', endColorstr='#63ffc9',GradientType=1 ); color:black;}
.bg-black{ background-color: black; color: white !important;}
.bg-black h1, .bg-black h2, .bg-black h3, .blue-gradient h2{font-weight: 600;}
.bg-grey{background-color: #F5F5F5; color: #2E2D2C;}
.bg-light-grey{background-color: #Fbfbfb; color: #2E2D2C;}
.bg-white{background-color: white; color: #2E2D2C;}
.blue-pr{color:#02D1F4;}
.black-grad{background: rgb(69,68,68); background: linear-gradient(0deg, rgba(69,68,68,1) 0%, rgba(0,0,0,1) 36%); color: white;}

/*TYPOGRAPHY*/
h1, h2, h3, h4{font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: -0.015em; }
h1{ font-size:2.5em; font-weight: 600;}
h2{ font-size:2.5em; font-weight: 600;}
h3{ font-size:1.5em; font-weight: 600;}
h3.headline{margin-top:1.5em;}
h3.lastline{margin-top:2.5em; font-family: 'Merriweather', serif; text-transform: none;}
h4{font-size: 1.2em;}
h5{font-family: 'Barlow', sans-serif; font-weight: 700;}
.bg-black h1, .bg-black h2, .bg-black h3{font-weight: 500 !important;}
.paragraph-1{ font-size:1.1em; line-height: 2em; width: 80%; margin: 0 auto; font-weight: 400; text-align: left; font-family: 'Merriweather', serif;}
.paragraph-1.full{ width:100%;}
.paragraph-2{ font-size:1.15em; line-height: 2.25em; font-weight: 700; width: 80%; margin: 0 auto; font-style: oblique; text-align: center;}
.paragraph-3{ font-size:1.1em; line-height: 2em; margin: 0 auto; font-weight: 400; text-align: left; display: grid; grid-template-columns:2em auto; column-gap:1.25em;}
.paragraph-list{font-size:1.1em; line-height: 2em; width: 80%; margin: 0 auto; font-weight: 400; text-align: left; list-style-type: disc;}
.num-list{ list-style-type: decimal; list-style-position: inside;}
.quote{font-size:1.15em;color:#02D1F4; font-style: oblique; font-weight: 700;}
.note{ font-size: 1.1em; font-style: oblique;}
.label{font-size:1.8em; font-weight: 300; font-family: 'Barlow Condensed', sans-serif; }
.superscript{vertical-align: super; font-size:50%; }
.txt-center{text-align: center;}
.txt-left{text-align: left;}
.oblique{ font-style: oblique;}
.bold{ font-weight: 700;}
.border-grey{border: 1px solid #cccccc;}
.strikethrought{ text-decoration: line-through; }
.shadow{box-shadow: -1px -1px 27px -1px rgba(0,0,0,0.20); -webkit-box-shadow: -1px -1px 27px -1px rgba(0,0,0,0.20); -moz-box-shadow: -1px -1px 27px -1px rgba(0,0,0,0.20);}
.icon{ font-family: "fontello"; font-style: normal; font-weight: normal; speak: never; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1.25em; margin-left: .2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.circle {font-size: 1em; margin-top: 0.2em; width: 2rem; height: 2rem; border-radius: 50%; background: #2E2D2C; text-align: center; margin: 0px auto; font-family: 'Barlow', sans-serif; font-weight: 700; color: white; display: inline-block; line-height: 1.75em !important;}
.inactive{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3;}
.active{ color:#02D1F4 !important;}
.img-hero{ width: 100%; height:20em; margin-bottom: -3px; background-image:url("../images/design-management/hero-img.png"); background-repeat: no-repeat; background-size:cover; background-position: center center;}

/*MARGINGS*/
.mrg-1{margin-top:8em;}
.mrg-2{margin-top:6em;}
.mrg-3{margin-top: 3.125em;}
.mrg-4{margin-top: 2em;}
.mrg-5{margin-top: 1.1em;}
/*PADINGS*/
.pad0{ padding: 0 !important;}


/*COMPONENTS*/

/*index project box*/
/*design viewer*/
.design-viewer ::-webkit-scrollbar {display: none;}
.design-viewer .switcher button{ font-size:1.2em; font-weight:400;  font-family: 'Barlow', sans-serif; text-decoration: none; color:#2E2D2C; border: none; background-color:transparent; transition: all 0.5s 0s ease-out; cursor: pointer;}
.design-viewer .switcher button:active{border:none;}
.design-viewer .switcher button.inactive:hover, .design-viewer .switcher a.inactive:hover .icon {  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; color:#2E2D2C;}
.design-viewer .switcher button span:after{ content: "version"}
.design-viewer .switcher .icon{font-size:3em; color:#2E2D2C; }
.design-viewer .switcher .icon.icon-mobile{font-size:2.4em;}
.design-viewer .note:after{content: "Scroll down over the screen to see the full design"}
/*desktop*/

.design-viewer .mockup-desktop {text-align: center; margin: 0 30px;}
.design-viewer .mockup-desktop .mockup-display {box-shadow: 0 2px 20px 2px rgb(12 44 76 / 8%); position: relative; background: #fff; max-width: 85%; padding: 23px 20px; border-radius: 15px 15px 0 0; margin: 0 auto -5px;}
.design-viewer .mockup-desktop .mockup-display:before { width: 8px; height: 8px; top: 7px; content: ""; background: #edf0f2; border-radius: 50%; position: absolute; left: 50%;transform: translateX(-50%);}
.design-viewer .mockup-desktop .mockup-display .mockup-image {padding: 56.25% 1px 1px; position: relative; max-width: 100%; overflow: hidden; background: #fff; border: 1px solid #eaeaea;}
.design-viewer .mockup-desktop .desktop-body { width: 100%; height: 30px; background: #fff; box-shadow: 0 2px 20px 2px rgb(12 44 76 / 8%); border-radius: 0 0 30px 30px; margin-top: -2px; display: inline-block;position: relative;}
.design-viewer .mockup-desktop .desktop-body:before {content: ""; width: 150px; height: 6px; position: absolute; left: 50%; top: 0; transform: translateX(-50%); border-top: none; border-radius: 0 0 3px 3px; background: #edf0f2;}
.design-viewer .mockup-desktop .mockup-display .mockup-image img {position: absolute; top: 0; left: 0; height: auto;}
.design-viewer .mockup-desktop .mockup-image img {max-width: 100%;}
.design-viewer .mockup-desktop .mockup-image:hover {overflow-y: scroll;}
.design-viewer .desktop-thumbnails div{display: inline-block; width:9vw; height: 4.8vw; margin:0 3.2em 0 0; opacity: 0.3; overflow: hidden; border: 1px solid #cccccc;}
.design-viewer .desktop-thumbnails.hbl-dsk div{margin:0 1.6em 3.2em 1.6em;}
.design-viewer .desktop-thumbnails div:last-child{margin-right: 0;}
.design-viewer .desktop-thumbnails div.active, .design-viewer .desktop-thumbnails div:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1;}


/*mobile*/
.design-viewer .mobile-container{display:none;}
.mockup-mobile {position: relative; background: #fff; padding: 55px 20px; box-shadow: 0 2px 20px 2px rgba(12,44,76,.08); border-radius: 30px; display: inline-block; margin: 0 auto; max-width: 85%;}
.mockup-mobile:after, .mockup-mobile:before { content: ""; height: 8px; background: #edf0f2; position: absolute; top: 23px;}
.mockup-mobile:before {width: 8px; border-radius: 50%; left: 52px;}
.mockup-mobile .mockup-image { padding-top: 177.77778%; position: relative; width:320px; max-width: 100%; overflow: hidden; border-radius: 3px;  border: 1px solid #eaeaea; background: #fff;}
.mockup-mobile .mockup-image img {position: absolute; top: 0; left: 0; border-radius: 3px; max-width:100%; }
.mockup-mobile:after {width: 40px; border-radius: 3px; left: 50%; transform: translateX(-50%);}
.mockup-mobile:after, .mockup-mobile:before {content: ""; height: 8px; background: #edf0f2; position: absolute; top: 23px;}
.mockup-mobile .mockup-image:hover {overflow-y: scroll;}
.design-viewer .mobile-thumbnails div{display: inline-block; width:5.2vw; height: 9vw; margin:0 2.5em 0 0; opacity: 0.3; overflow: hidden; border:1px solid #cccccc;}
.design-viewer .mobile-thumbnails div:last-child{ margin-right: 0;}
.design-viewer .mobile-thumbnails.hbl-mv div{margin:0 1.6em 3.5em 1.6em;}
.design-viewer .mobile-thumbnails div.active, .design-viewer .mobile-thumbnails div:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1;}


/*TABLE*/
.table{border: 1px solid #2E2D2C; border-right:0;}
.col{border-right:1px solid #2E2D2C;}
.table h4{ padding: 0.8em 0; font-weight: 600; background-color: #f2f2f2; border-bottom: 1px solid #2E2D2C;  }
.table-list{list-style-type: disc; padding:10%; list-style-position: inside;}
.table-list h5{font-size: 1em; font-weight: 700; text-align: left; }
.table-list li{font-size:0.9em; line-height: 1.8em; margin-top: 1.2em; font-weight: 400; text-align: left;}

/*RESULTS*/
.results{ text-align: center; font-weight:600 ; font-family: 'Barlow', sans-serif;}
.results .col{display: inline-block; width:18%;}
.results div.col:last-child{border-right:0;}
.results .number{ font-size:2.6em;}
.results .title{font-size:1em; margin-top: 0.8em;}
.results .before-after{font-size:0.7em; margin-top: 0.8em;}
.results .before-after .before{ margin-right:0.2em; opacity: 0.6; }
.results .before-after .after{margin-left:0.2em;}

/*EXPERIENCE*/
.experience{ width:55%; margin-left:auto; margin-right:auto; display:grid; grid-template-columns:1fr 1fr 2fr; column-gap:5%;  text-align: center; font-weight:600 ; font-family: 'Barlow', sans-serif; text-transform:uppercase;}
.experience .number{ font-size:1.8em; }
.experience .title{font-size:1em; line-height:1.7em; margin-top: 0.8em; font-weight:400;}


/*LIST LINKS*/
.list-item-box{width:70%; display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap:3em; align-items: center; margin-left:auto; margin-right:auto;}
.list-item{font-size:1.4em; line-height: 1.5em; padding:0.6em; text-align:center; margin-bottom: 0.6em; font-weight: 300; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; display:inline-block; transition: all 0.3s 0s ease-out; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.list-item i.icon{ font-size:2.2em; display: block; margin: 0 auto 0.2em;}

/*IMG HERO*/
.img-hero{ width: 100%; height:20em; margin-bottom: -3px; background-repeat: no-repeat; background-size:cover; background-position: center center;}
.img-hero.management{background-image:url("../images/design-management/hero-img.png");}
.img-hero.about{background-image:url("../images/about/alvaro-carmona.png");}
/*FOOTER*/
footer{background: linear-gradient(-45deg, #02D1F4, #EC0F45, #FF4DC2, #63FFC9, #02D1F4); background-size: 2000% 400%; animation: gradient 30s ease infinite;}

@keyframes gradient {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}
footer .footer-nav{padding:6em 0;}
footer .footer-nav a{ font-size:1.1em; padding: 1em 0; margin: 0 1em; width: 12em;  background-color: black; font-family: 'Barlow', sans-serif; font-weight: 400; color: white; border: 1px solid black; display: inline-block; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
footer .footer-nav a:hover{background-color: rgba(255,255,255,0.30); border: 1px solid white;}
footer .copyright{font-size:1em; padding: 3.25em 0; background-color: black; font-family: 'Barlow', sans-serif; font-weight: 400; color: white; text-align: center;}
footer .copyright img{ width:6em; height: auto;}



/*INDEX*/
body.index{}
body.index main{ width: 70%; background-color: white; height: 100%;}
.box-index{padding:6em 10% 11.9% 10%;}
.project{ padding: 4em; height:28em;  width:100%; color:#2E2D2C; position: relative; background-color: white; text-align:left; display:grid; grid-template-columns:20em auto; column-gap: 3em;  -webkit-box-shadow: 1px 1px 11px 1px rgba(0,0,0,0.15); box-shadow: 1px 1px 11px 1px rgba(0,0,0,0.15); overflow: hidden; position: relative; transition: all 0.3s 0s ease-out;}
.project.mrg-top{ margin-top:6.4em }
.project .project-logo{ width:100%; height:100%; display: grid; align-items: center; text-align: center;  position: relative;  transition: all 0.3s 0s ease-out;}
.project.ueni .project-logo{background-color: black;}
.project.ueni .project-logo img {width:35%; height:auto; margin: 0 auto; }
.project.apb .project-logo{background-color: #446221;}
.project.apb .project-logo img {width:48%; height:auto; margin: 0 auto; }
.project.herbalife .project-logo{background-color:#7bc143;}
.project.herbalife .project-logo img {width:48%; height:auto; margin: 0 auto;}
.txt-goto{position: absolute; top:20em; left:5.75em; color:white; font-size: 1.4em; padding: 0.5em 1em; background: linear-gradient(-45deg, #02D1F4, #EC0F45, #FF4DC2, #63FFC9, #02D1F4); background-size: 2000% 400%; animation: gradient 20s ease infinite; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: -0.015em; transition: all 0.5s 0s ease-out; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; }
.project-text{ align-self: center; position: relative;}
.project-text .text{opacity: 1; transition: all 0.2s 0s ease-out;}
.project-text p{ font-size:1.4em; }
.project-text p.labels{ font-size: 1.4em; color:#02D1F4;  display: flex; justify-content: space-between; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: -0.015em;}
.project-img{position:absolute;}
.project-img .image-1{position: absolute; top:9em; width:42em; height: auto; transition: all 0.5s 0s ease-out;}
.project-img .image-2{position: absolute; top: 20em; left:40em; width:12em; height: auto; transition: all 0.8s 0s ease-out;}
.project-img .shadow{box-shadow: -1px -1px 27px -1px rgba(0,0,0,0.51); -webkit-box-shadow: -1px -1px 27px -1px rgba(0,0,0,0.51); -moz-box-shadow: -1px -1px 27px -1px rgba(0,0,0,0.51);}
.project.apb .project-img .image-1{top:9em; left: 15em; width:20em; }
.project.apb .project-img .image-2{top: 20em; left:36em; width:15em;}
/*hover*/
.project.ueni:hover { background-color:black;}
.project.apb:hover{ background-color: #446221;}
.project.herbalife:hover { background-color:#7bc143;}
.project:hover .project-logo{ width:20em; height:15em;}
.project:hover .txt-goto{top:13em; left:5.75em;}
.project:hover .project-text .text{opacity: 0;}
.project:hover .project-img .image-1{top: -16em;}
.project:hover .project-img .image-2{top: -6em;}
.project.apb:hover .project-img .image-1{top: -15em;}
.project.apb:hover .project-img .image-2{top: -11em;}

/*CONTACT*/
.contact-base{ position: absolute; z-index:9999999; width: 100%; height: 100%; background-color:rgba(0,0,0,0.85); transition: all 3s 0s ease-out; top:0; left:0;}
.contact-base.open{display: block;}
.contact-base.close{display: none;}
.contact-base.open .contact-box{ opacity: 1;   -webkit-transition: all 5s ease-in-out; -moz-transition: all 5s ease-in-out; -ms-transition: all 5s ease-in-out; -o-transition: all 5s ease-in-out; transition: all 5s ease-in-out;}
.contact-base.close .contact-box{opacity:0;   -webkit-transition: all 5s ease-in-out; -moz-transition: all 5s ease-in-out; -ms-transition: all 5s ease-in-out; -o-transition: all 5s ease-in-out; transition: all 5s ease-in-out;}
.contact-box{opacity:0; width:680px; height:400px; position: absolute; top:0; bottom: 0; right: 0; left:0; margin: auto; padding: 0.2em; background: linear-gradient(-45deg, #02D1F4, #EC0F45, #FF4DC2, #63FFC9, #02D1F4); background-size: 2000% 400%; animation: gradient 20s ease infinite; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.gradient{ width:100%; height:100%; margin:0 auto; position: relative; background: linear-gradient(110.53deg, #63FFC9 3.59%, #02D1F4 37.23%, #FF4DC2 68.92%, #EC0F45 97.2%); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.contact-info{ width:100%; height:100%; padding-top:3.6em;  margin:0 auto; position: relative; color: white;  background-color:rgba(0,0,0,0.70); box-shadow: 0px 1px 30px 5px rgba(0,0,0,0.75) inset; -webkit-box-shadow: 0px 1px 30px 5px rgba(0,0,0,0.75) inset; -moz-box-shadow: 0px 1px 30px 5px rgba(0,0,0,0.75) inset; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.contact-info button{ width:2em; height:2em; position: absolute; top:1em; right:1em; border: 0; background: none; cursor: pointer;}
.contact-info .logo{ width:6em; height:auto; margin-bottom: 1.5em;}
.contact-info .title{ font-size:2.2em; margin-bottom:0.8em; font-family: 'Lexend Mega', sans-serif; }
.contact-info .subtitle{ font-size:1.1em; margin-bottom: 2.2em; font-weight:300;  font-family: 'Barlow', sans-serif;}
.contact-info .email{width:14.5em; height:2.4em; margin: 0 auto 2.2em;  border: 1px solid white; background-image: url("../images/icons/email.svg"); background-repeat: no-repeat; background-position:center;  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.contact-info .linkedin{ width:1.8em; height: 1.8em; margin: 0 auto; display: block;}

/*PROYECTS*/
/*UENI*/
.section-logo.ueni{ width:4.5em; height: auto; margin: 0 auto;}
.balance-img{ width:40%; margin-left:auto; margin-right:auto;}
.mb-wireframes img{ border-bottom: 1px solid #cccccc;}

/*APB*/
.section-logo.apb{ width:5.5em; height: auto; margin: 0 auto;}
.hero-apb{ width: 20%; height: auto; margin-bottom: -2px;}
.video {height: calc(100vh - 29em); width: 100%;}
.video iframe {width: 100%; height: 100%;}

/*HERBALIFE*/
.section-logo.herbalife{ width:5.5em; height: auto; margin: 0 auto;}
.hero-herbalife{margin-bottom: -3px;}
.herbalife-net{ width:70%;}
.hotjar-img{width:80%;}
/*table*/
.table.apb{text-align: left;}
.table.apb h3{ background: black; color: white; padding: 0.8em; font-weight: 500;}
.table.apb h3.snd{display:none;}
.table.apb h4{padding: 0.8em; border-top: 1px solid #2E2D2C;}
.table.apb .table-list{ padding:5%;}
.mb-mockup{ width:40%; margin-left:auto; margin-right: auto;}
.img-border{border: 1px solid #2E2D2C;}
.col2-wdt{ width: 77%; margin-left:auto; margin-right: auto;}

/*DESIGN MANAGEMENT*/
.img-awareness{ width:50%;}
.icon-hdl{font-size:4.5em; display: block; margin: 0 auto 0.4em;}
.software-logos{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; column-gap:3em; grid-row-gap:6em; align-items: center;}
.software-logos img{ height:3em; margin-bottom: 0.8em;}
.software-logos p{font-family: 'Barlow', sans-serif;}

/*ABOUT*/
.html-css-logo{ width: 9em; height: auto; margin-bottom: 3em;}

/*DARK MODE*/
body.darkmode{background-color:#121212;}
body.darkmode aside{background-color:#121212;}
body.darkmode aside nav .dark-mode{background-color:#121212;}
body.darkmode .secondary-nav-column{background-color:#292929;}
/*COLORS*/
body.darkmode .blue-gradient{ background: #00a2c0; background: -moz-linear-gradient(left,  #00a2c0 0%, #00ef91 100%); background: -webkit-linear-gradient(left,  #00a2c0 0%,#00ef91 100%); background: linear-gradient(to right,  #00a2c0 0%,#00ef91 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a2c0', endColorstr='#00ef91',GradientType=1 ); color:black;}
body.darkmode .bg-black{ background-color: black; color: #E0E0E0 !important;}
body.darkmode .bg-grey{background-color: #191919; color:#E0E0E0;}
body.darkmode .bg-light-grey{background-color: #191919; color: #E0E0E0;}
body.darkmode .bg-white{background-color:#252525; color:#E0E0E0;}
body.darkmode .blue-pr{color:#81e4fc;}
body.darkmode .black-grad{background: rgb(69,68,68); background: linear-gradient(0deg, rgba(69,68,68,1) 0%, rgba(0,0,0,1) 36%); color:#E0E0E0;}
body.darkmode .quote{color: #81e4fc;}
body.darkmode .design-viewer .switcher button{color:#E0E0E0;}
body.darkmode .design-viewer .switcher button.inactive:hover, .design-viewer .switcher a.inactive:hover .icon { color:#E0E0E0;}
body.darkmode .design-viewer .switcher .icon{ color:#E0E0E0; }
body.darkmode .design-viewer .mockup-desktop .mockup-display{ background-color:#414141;  box-shadow: 0px 0px 16px 6px rgba(0,0,0,0.75); -webkit-box-shadow: 0px 0px 16px 6px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 16px 6px rgba(0,0,0,0.75);}
body.darkmode .design-viewer .mockup-desktop .desktop-body {background: #414141; box-shadow: 0px 3px 13px 6px rgba(0,0,0,0.75); -webkit-box-shadow: 0px 3px 13px 6px rgba(0,0,0,0.75); -moz-box-shadow: 0px 3px 13px 6px rgba(0,0,0,0.75);}
body.darkmode .design-viewer .mockup-desktop .mockup-display:before{background: #1e1e1e;}
body.darkmode .design-viewer .mockup-desktop .desktop-body:before {background: #2f2f2f;}
body.darkmode .mockup-mobile {background: #414141;  box-shadow: 0px 0px 16px 6px rgba(0,0,0,0.75); -webkit-box-shadow: 0px 0px 16px 6px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 16px 6px rgba(0,0,0,0.75);}
body.darkmode .mockup-mobile:after, .mockup-mobile:before {background:#1e1e1e;}
body.darkmode .table{border: 1px solid #E0E0E0;}
body.darkmode .col{border-right:1px solid #E0E0E0;}
body.darkmode .table.apb h3 {background:#454545;}
body.darkmode .table h4{ background-color: #353535; border-bottom: 1px solid #E0E0E0;  }
body.darkmode footer{background: linear-gradient(-45deg, #00a2c0, #c70043, #ff0096, #00ef91, #00a2c0); background-size: 2000% 400%; animation: gradient 30s ease infinite;}
body.darkmode img{opacity: 0.95;}
body.index.darkmode main{background-color:#191919;}
body.index.darkmode .project{background-color:#2f2f2f; color:#e0e0e0;  box-shadow: 0px 0px 16px 6px rgba(0,0,0,0.55); -webkit-box-shadow: 0px 0px 16px 6px rgba(0,0,0,0.55); -moz-box-shadow: 0px 0px 16px 6px rgba(0,0,0,0.55);}
body.index.darkmode .project.herbalife .project-logo{background-color:#599d31;}
body.index.darkmode .project.ueni:hover { background-color:black;}
body.index.darkmode .project.apb:hover{ background-color: #446221;}
body.index.darkmode .project.herbalife:hover { background-color:#599d31;}
body.index.darkmode .txt-goto{color:white; background: linear-gradient(-45deg, #00a2c0, #c70043, #ff0096, #00ef91, #00a2c0); background-size: 2000% 400%; animation: gradient 20s ease infinite; transition: all 0.5s 0s ease-out; }
body.index.darkmode img{opacity:1;}

@media (max-width: 2015px){

/*MAIN*/
main{width:75%;}

}


@media (max-width: 1920.98px){

html, body{background-color:white;}
/*ASIDE*/
aside{ width:17em; padding-top:3em;}
aside .header{width:17em; position: fixed; }
aside .logo{ width: 4.688em; height:5.323em;}
aside nav{ width:13em; margin: 4em auto 0;}
aside nav li{ margin-bottom: 1.5em;}
aside nav a{font-size:1em;  padding: 0.8em 0 0.8em 0.8em;}
/*dark mode*/
aside nav .dark-mode{font-size:1em; padding: 0.8em;}
aside nav .dark-mode button{ width: 2.2em; padding:0.23em; margin: 0.1em 0 0 0.6em; }
aside nav .dark-mode button div{ width: 1em; height: 1em;}

/*SECONDARY NAV*/
.secondary-nav-column{ padding-top:3em; width:3.27em;}
.secondary-nav a{margin-bottom:0.4em; }
.secondary-nav a .icon-box{padding:0.7em 0.68em;}
.secondary-nav a:hover p{font-size: 1em; min-width: 11.1em; line-height: 1.85em;  padding:0.6em 0 0.6em 1.1em; }
.secondary-nav a:hover p .right-triangle { left: 0.7em; top:1em;border-top: 10px solid transparent; border-left: 10px solid #373636;border-bottom: 10px solid transparent; margin:0 0 0 -0.7em;}
.secondary-nav .icon{font-size: 1.33em; }
.secondary-nav .icon.active{font-size: 1.33em;}
/*MAIN*/
main{width:82%;}

/*CONTENT*/*
.box-section{padding:7em 0;}
.box-main{ padding:3em 0 0 !important;}
.box-main .hero-ueni{ width: 50%;}
.container-1{ width:60%; margin: 0 auto;}
.container-2{ width:70%; margin: 0 auto;}
.container-3{ width:80%; margin: 0 auto;}
.gap80{ column-gap: 4.2em;}
.gap100{ column-gap: 5.5em;}
.grid-gap80{ grid-gap:4.2em;}
.grid-gap100{ grid-gap:5.5em;}
.bg-grey{background-color: #F9f9f9; color: #2E2D2C;}


/*TYPOGRAPHY*/
h1{ font-size:1.8em;}
h2{ font-size:1.8em;}
h3{ font-size:1.5em;}
h3.headline{margin-top:1.4em;}
h4{font-size: 1.2em;}
.paragraph-1{ font-size:0.95em; line-height: 2.2em; width: 92%;}
.paragraph-2{ font-size:0.95em; line-height: 2.2em; width: 92%;}
.paragraph-3{ font-size:0.95em; line-height: 2.2em; margin: 0 auto; font-weight: 400; text-align: left; display: grid; grid-template-columns:2em auto; column-gap:1.25em;}
.paragraph-list{font-size:0.95em; line-height: 2.2em; width: 92%;}
.quote{font-size:0.95em;}
.note{ font-size: 0.8em;}
.label{font-size:1.3em;}
.circle {font-size:1em; margin-top: 0.2em; width: 1.5rem; height: 1.5rem; }

/*MARGINGS*/
.mrg-1{margin-top:6.5em;}
.mrg-2{margin-top:4.5em;}
.mrg-3{margin-top: 2.5em;}
.mrg-4{margin-top: 1.7em;}

/*COMPONENTS*/
/*Design viewer*/
.design-viewer .switcher button{ font-size:1.1em;}
.design-viewer .switcher .icon{font-size:2.8em;}
.design-viewer .switcher .icon.icon-mobile{font-size:2.15em;}
.design-viewer .mockup-desktop .desktop-body:before { width: 110px; height: 5px;}
.design-viewer .mockup-desktop .mockup-display:before { width: 6px; height: 6px; top: 8px;}
.design-viewer .mockup-desktop .mockup-display {padding: 22px 22px 22px;}
.design-viewer .mockup-desktop .desktop-body {height: 25px;}
.design-viewer .desktop-thumbnails div{width:12vw; height: 6.8vw; }
.design-viewer .mobile-thumbnails div{ width:6.2vw; height: 10.7vw;}

/*TABLE*/
.table-list{padding:15%; }
.table-list h5{font-size: 1em;}
.table-list li{font-size:0.85em; line-height: 1.8em; margin-top: 1.2em;}


/*RESULTS*/
.results .col{width:19%;}
.results .number{ font-size:2.3em;}
.results .title{font-size:1em; margin-top: 0.8em;}
.results .before-after{font-size:0.75em; margin-top: 0.8em;}

/*EXPERIENCE*/
.experience{width:60%;}
.experience .number{ font-size:1.5em; }
.experience .title{font-size:0.8em; line-height: 1.8em; margin-top: 0.8em;}



/*LIST LINKS*/
.list-item{font-size:1.2em; line-height: 1.5em; padding:0.6em;  margin-bottom: 0.6em;}
.list-item i.icon{ font-size:2.2em; display: block; margin: 0 auto 0.2em;}


/*FOOTER*/
footer .footer-nav { padding: 4.5em 0;}
footer .footer-nav a{ font-size:1.1em; padding:0.7em 0.8em; margin: 0 1em; width: 10.8em;}
footer .copyright{font-size:0.85em;}
footer .copyright img{ width:4em;}

/*INDEX*/
body.index{ background-color: #f9f9f9; }
body.index main{ width: 70%;}
.box-index{padding:5em 10% 22%;}
.project{ padding: 3em; height:20em;  width:100%; grid-template-columns:14em auto; column-gap: 3em; cursor: default;}
.project.mrg-top{ margin-top:5.5em }
.project-logo{ width:100%; height:100%;}
.project.ueni .project-logo img {width:38%;}
.project.apb .project-logo img {width:50%;}
.txt-goto{ top:20em; left:4.2em; font-size: 1.2em; cursor:pointer; border: 0.2em solid transparent; color: black;}
.txt-goto:hover{ color: white; border: 0.2em solid white !important;}
.project-text p{ font-size:1em; }
.project-text p.labels{ font-size: 1.1em;}
.project-img .image-1{top:9em; left:5em; width:28em;}
.project-img .image-2{top: 20em; left:30em; width:9em;}
.project.apb .project-img .image-1{top:9em; left: 10em; width:16em; }
.project.apb .project-img .image-2{top: 20em; left:27em; width:12em;}

/*hover*/
.project:hover .project-logo{ width:100%; height:75%;}
.project:hover .txt-goto{top:11em; left:4.2em;}
.project:hover .project-img .image-1{top: -10.2em;}
.project:hover .project-img .image-2{top: -4.8em;}
.project.apb:hover .project-img .image-1{top: -12.2em;}
.project.apb:hover .project-img .image-2{top: -9.3em;}


/*ABOUT*/
.html-css-logo{ width: 7em; height: auto; margin-bottom: 2em;}



/*PROJECTS*/
/*ueni*/
.section-logo.ueni{ width:3em;}
.balance-img{ width:45%;}
/*APB*/
.section-logo.apb{ width:5em;}
.hero-apb{ width: 22%; height: auto; margin-bottom: -2px;}
.video {height:660px; width: 100%;}
/*herbalife*/
.section-logo.herbalife{ width:5.5em;}
.hero-herbalife{margin-bottom: -2.7px;}
/*DESIGN MANAGEMENT*/
.img-awareness{ width:50%;}
.icon-hdl{font-size:3.5em; display: block; margin: 0 auto 0.4em;}
.wdt-equal{ width:92%;}


/*DARK MODE*/
html, body{background-color:#121212;}
body.index.darkmode{ background-color: #121212; }

}


@media (max-width: 1536.98px){

/*CONTENT*/*
.box-section{padding:6em 0;}
.box-main{ padding:5em 0 0;}
.design-viewer .desktop-thumbnails{ margin-top:3.2em !important; }
/*MARGINGS*/
.mrg-1{margin-top:6em;}
/*Design viewer*/
.design-viewer .switcher button{ font-size:1em;}
.design-viewer .switcher .icon{font-size:2.5em;}
.design-viewer .switcher .icon.icon-mobile{font-size:1.9em;}

/*RESULTS*/
.results .col{width:19.5%;}
.results .number{ font-size:1.8em;}
.results .title{font-size:0.7em; margin-top: 0.8em;}
.results .before-after{font-size:0.6em; margin-top: 0.8em;}
/*EXPERIENCE*/
.experience{ width:65%}
.experience .number{ font-size:1.4em; }
.experience .title{font-size:0.8em; line-height: 1.6em; padding: 0 1.2em;}

/*IMG HERO*/
.img-hero{height:12em;}


/*herbalife*/
.section-logo.herbalife{ width:5em;}


/*INDEX*/

body.index main{ width: 75%;}
.box-index{padding:5em 9% 8.5%;}
.project{ padding: 3em; height:20em;  width:100%; grid-template-columns:14em auto; column-gap: 2em;}
.project.mrg-top{ margin-top:5.2em }
.project-text p{ font-size:0.9em; }
.project-text p.labels{ font-size: 1em;}
.project-img .image-1{top:9em; left:2em; width:28em;}
.project-img .image-2{top: 20em; left:27em; width:9em;}
.project.apb .project-img .image-1{top:9em; left: 7em; width:15.5em; }
.project.apb .project-img .image-2{top: 20em; left:23.5em; width:11.5em;}
/*hover*/
.project:hover .project-logo{ width:100%; height:80%;}
.project:hover .txt-goto{top:11.5em; left:4.2em;}
.project:hover .project-img .image-1{top: -10em;}
.project:hover .project-img .image-2{top: -4.5em;}
.project.apb:hover .project-img .image-1{top: -11.5em; }
.project.apb:hover .project-img .image-2{top: -8.5em;}

/*APB*/
.video {height:480px; width: 100%;}
/*Design management*/
.list-item-box {width: 80%;}
.software-logos{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; column-gap:1.5em; grid-row-gap:5.5em;}
.software-logos img{ height:2em; margin-bottom: 0.8em;}
.software-logos p{font-family: 'Barlow', sans-serif;}


}


@media (max-width: 1440.98px){

aside nav a{font-size:0.85em;}
/*CONTENT*/*
.box-section{padding:6em 0;}
.box-main{ padding:4em 0 0;}
.secondary-nav .icon{font-size: 1.3em; }
.secondary-nav .icon.active{font-size: 1.3em;}
.content-3col-lap{grid-template-columns:1fr 1fr;}


/*TYPOGRAPHY*/
h1{ font-size:1.7em;}
h2{ font-size:1.7em;}
h3{ font-size:1.2em;}
h3.headline{margin-top:1.4em;}
h4{font-size: 0.96em;}
.paragraph-1{ font-size:0.85em; line-height: 2em; width: 92%;}
.paragraph-2{ font-size:0.98em; line-height: 2.1em; width: 92%;}
.paragraph-3{ font-size:0.85em; line-height: 2em; margin: 0 auto; font-weight: 400; text-align: left; display: grid; grid-template-columns:2em auto; column-gap:1.25em;}
.paragraph-list{font-size:0.85em; line-height: 2em; width: 92%;}
.quote{font-size:1.02em;}
.note{ font-size: 0.8em;}
.label{font-size:1.3em; line-height:}
.circle {font-size: 0.92em; margin-top: 0.2em; width: 1.45rem; height: 1.45rem; border-radius: 50%; line-height: 1.75em !important;}


/*MARGINGS*/
.mrg-1{margin-top:5.5em;}
.mrg-2{margin-top:4.5em;}
.mrg-3{margin-top: 2.5em;}
.mrg-4{margin-top: 1.4em;}

/*DESIGN VIEWER*/

.design-viewer .mockup-desktop .mockup-display:before {width: 4px;height: 4px; top: 7px;}
.design-viewer .mockup-desktop .desktop-body:before {width: 100px; height: 5px;}
.design-viewer .mockup-desktop .desktop-body {height: 20px;}

/*TABLE*/
.table-list{padding:15%; }
.table-list h5{font-size: 1em; line-height: 1.5em;}
.table-list li{font-size:0.8em; line-height: 1.9em; margin-top: 1.2em;}

/*RESULTS*/
.results .col{}
.results .number{ font-size:1.8em;}
.results .title{font-size:0.75em; margin-top: 0.8em;}
.results .before-after{font-size:0.65em; margin-top: 0.8em;}

/*LIST LINKS*/
.list-item-box{width:80%;}
.list-item{font-size:1.2em;}
.list-item i.icon{ font-size:2.5em;}

/*INDEX*/
body.index main{ width: 75%;}
.box-index{padding:4em 7% 19.05%;}
.project{ padding: 3em; height:18em;  width:100%; grid-template-columns:12em auto; column-gap: 2em;}
.project.mrg-top{ margin-top:4.3em }
.project.ueni .project-logo img {width:36%; }
.txt-goto{ top:20em; left:4.4em; font-size: 1.05em; }
.project-text p{ font-size:0.9em; line-height: 1.6em; }
.project-text p.labels{ font-size: 1em; line-height: 1.4em; text-align: center;}
.project-img .image-1{top:9em; left:2em; width:27em;}
.project-img .image-2{top: 20em; left:27em; width:8em;}
.project.apb .project-img .image-1{top:9em; left: 9em; width:14em; }
.project.apb .project-img .image-2{top: 20em; left:24em; width:10.5em;}
/*hover*/
.project:hover .project-logo{ width:100%; height:80%;}
.project:hover .txt-goto{top:11.5em; left:4.4em;}
.project:hover .project-img .image-1{top: -10.5em;}
.project:hover .project-img .image-2{top: -4em;}
.project.apb:hover .project-img .image-1{top: -10.8em; }
.project.apb:hover .project-img .image-2{top: -8.5em;}

/*PROJECTS*/
/*ueni*/
.section-logo.ueni{ width:3.4em;}
.balance-img{ width:52%;}
/*apb*/
.label-container .label{ padding: 0 1em; line-height: 1.3em;}
.video {height:480px; width: 100%;}
/*herbalife*/
.section-logo.herbalife{ width:4.8em;}
/*DESIGN MANAGEMENT*/
.img-awareness{ width:55%; }
.icon-hdl{font-size:3.5em; margin: 0 auto 0.4em;}
.software-logos{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; column-gap:1.5em; grid-row-gap:5.5em;}
.software-logos img{ height:2em; margin-bottom: 0.8em;}
.software-logos p{font-family: 'Barlow', sans-serif;}
}




@media (max-width: 1200.98px){

html, body{display: flex; flex-direction: column;  width:100%;}
/*ASIDE*/
aside{ width:100%; height:auto; padding:1.5em 1.5em; position:fixed; z-index: 99999;}
aside .header{ width:100%; position: relative;}
aside .logo{  width: 9.763em; height:2.188em; margin:0 auto 0; display: block; float: left; background-image: url("../images/Logo/alvaro-carmona-logo-hrz.svg"); background-size: contain;  background-repeat: no-repeat; }
aside .menu-button{float:right; display: block;}
aside button{ margin:0.35em 0 0 0; width:3.5em; height: auto;  background-color: transparent; border: 0;}
aside nav{position: absolute; top:-2em; width:24em; margin:0; padding: 0; background-color: #001114; text-align:left; display:block; float:none; z-index: 99999; box-shadow: -1px 2px 20px -6px rgba(0,0,0,0.71);
-webkit-box-shadow: -1px 2px 20px -6px rgba(0,0,0,0.71); -moz-box-shadow: -1px 2px 20px -6px rgba(0,0,0,0.71); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
aside nav li{ margin:0; display:block; border-bottom: 1px solid; border-bottom-color: rgba(255,255,255,0.15) }
aside nav li:last-child{border-bottom:0;}
aside nav li:first-child{ padding: 2.4em 0 1.8em;  text-align: right; display: block;}
aside nav li button{ width:2.3em; margin: 0 1.2em 0 0;}
aside nav li.design-management{border-top:1px solid rgba(255,255,255,0.15);}
aside nav a{font-size:1em; padding: 1.3em 1.2em;}
aside nav a:hover{ border-radius: 0; background-color:#02D1F4;}
aside nav.open{right:-1.5em;}
aside nav.close{right:-26em;}

/*CASE STUDY SUBMENU*/
aside nav li.case-studies{ margin-bottom:0; border-bottom: none;}
aside nav .case-study-menu { margin-left: 0.5em;}
aside nav .case-study-menu li:first-child{ display:block; padding: 0; text-align: left; }
aside nav .case-study-menu li{margin-bottom: 0em; border:0 !important; padding:0;}
aside nav .case-study-menu li a{ line-height: 1.2em; padding: 0.6em 1.2em; }
aside nav .case-study-menu li:last-child{ margin-bottom: 2em;}




/*dark mode*/
aside nav .dark-mode{font-size:1em;  padding: 1.3em 1.2em;}
aside nav .dark-mode button{ width: 2.5em; padding:0.25em; margin: 0.1em 0 0 0.6em; }
aside nav .dark-mode button div{ width: 1.2em; height: 1.2em;}
	body.darkmode aside nav .dark-mode{background-color:#001114;}

/*SECONDARY NAV*/
.secondary-nav-column{ width:100%; padding-top:0;  height:auto;  background-color:transparent; position: fixed; z-index: 9999; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.secondary-nav{position:absolute; z-index: 99999; top:8em; right:1em; background-color:#454444; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;  transition: all 0.5s 0s ease-out;}
.secondary-nav.open{right:1em;}
.secondary-nav.close{ right:-3.5em;}
.secondary-nav a{display:flex; margin-bottom:0.5em; position:relative;}
.secondary-nav a:last-child{ margin-bottom:0; }
.secondary-nav a .icon-box{padding:0.7em 0.6em;}
.secondary-nav a p{left: -11.1em; font-size: 0; min-width: 0; line-height: 1.9em; text-align: right; padding: 0; z-index: 999; visibility: visible; opacity: 0; width: 0; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
.secondary-nav a:hover p {position: absolute; left: -11.1em; font-size: 1em; min-width: 11.1em; line-height: 1.9em; text-align: right; padding: 0.7em 1.2em 0.7em 0; z-index: 999; visibility: visible; opacity: 1;}
.secondary-nav a:hover p .right-triangle {display: block; position: absolute; right: auto; left: 11.2em; top: 1.1em; width: 0; height: 0; background: transparent; border-top: 10px solid transparent; border-left: 10px solid #373636; border-bottom: 10px solid transparent; margin: 0 0 0 -0.7em; transform: rotate(180deg);}
.secondary-nav .icon{font-size: 1.5em; color:white;}
.secondary-nav .icon.active{font-size:1.5em; color:#02D1F4;}
/*ANCHOR*/
.anchor{position:relative;}
.anchor a{position:absolute; top:-95px;}

/*MAIN*/
main{width:100%; padding-top: 5.2em;}

/*CONTENT*/
.box-section{padding:4.5em 0;}
.box-main{ padding:4em 0 0 !important;}
.box-main .hero-ueni{ width: 50%;}
.container-1{ width:62%; margin: 0 auto;}
.gap80{ column-gap: 4em;}
.gap100{ column-gap: 5.3em;}

/*design viewer*/
.design-viewer .mockup-desktop .desktop-body:before { width: 85px; height: 4px;}
.design-viewer .mockup-desktop .mockup-display:before { width: 4px; height: 4px; top: 6px;}
.design-viewer .mockup-desktop .mockup-display {padding: 18px 18px 18px;}
.design-viewer .mockup-desktop .desktop-body {height: 15px;}
.design-viewer .desktop-thumbnails div {width: 17vw; height: 9.8vw; margin: 0 3.125em 0 0;}

/*RESULTS*/
.results .number{ font-size:1.9em;}
.results .title{font-size:0.85em; margin-top: 0.8em;}
.results .before-after{font-size:0.7em; margin-top: 0.8em;}

/*IMG HERO*/
.img-hero{height:10em;}

/*MARGINGS*/
.mrg-1{margin-top:6.2em;}
.mrg-2{margin-top:4.2em;}
.mrg-3{margin-top: 2.2em;}
.mrg-4{margin-top: 1.4em;}

/*FOOTER*/
footer .footer-nav{ padding:3em 0;}

/*INDEX*/
body.index main{ width: 100%;}
.box-index{padding:4em 11%;}


/*APB*/
.section-logo.apb{ width:4.5em;}
.hero-apb{ width: 22%; height: auto; margin-bottom: -2px;}
.project-text p.labels{line-height: 1.2em; text-align: center;}
.video {height:480px; width: 100%;}
/*herbalife*/
.section-logo.herbalife{ width:4.8em;}
.hero-herbalife{margin-bottom: -2.7px;}

/*DARKMODE*/
body.darkmode .secondary-nav {background-color: #292929;}

}


@media (max-width: 1024.98px){
.box-index{padding:4em 6%;}
.video {height:490px; width: 100%;}
/*RESULTS*/
.results .number{ font-size:1.5em;}
.results .title{font-size:0.75em; margin-top: 0.8em;}
.results .before-after{font-size:0.6em; margin-top: 0.8em;}

/*EXPERIENCE*/
.experience{ width:75%}

/*LIST LINKS*/
.list-item-box{width:90%;}
.list-item{font-size:1.2em;}
.list-item i.icon{ font-size:2.3em;}

/*DESIGN MANAGEMENT*/
.img-awareness{ width:55%; }
.icon-hdl{font-size:3.3em; margin: 0 auto 0.4em;}
.software-logos{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; column-gap:2.5em; grid-row-gap:4em;}
.software-logos img{ height:2em; margin-bottom: 0.8em;}
/*DARKMODE*/
body.index.darkmode{ background-color: #121212; }

}



@media (max-width: 960.98px){

/*ASIDE*/
aside{ padding:1.5em 0 1.5em 1.5em;}
aside .logo{ width: 8.925em; height:2em;}
aside .menu-button{float:right; display: block;}
aside button{ margin:0 1.5em 0 0; width:3.5em; height: auto;  background-color: transparent; border: 0;}
aside nav{position: absolute; top:-2em; width:22em; margin:0; padding: 0; background-color: #001114; text-align:left; display:block; float:none; z-index: 99999; box-shadow: -1px 2px 20px -6px rgba(0,0,0,0.71);
-webkit-box-shadow: -1px 2px 20px -6px rgba(0,0,0,0.71); -moz-box-shadow: -1px 2px 20px -6px rgba(0,0,0,0.71); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
aside nav li{ margin:0; display:block; border-bottom: 1px solid; border-bottom-color: rgba(255,255,255,0.15) }
aside nav li:last-child{border-bottom:0;}
aside nav li:first-child{ padding: 2.225em 0 1.725em;  text-align: right; display: block;}
aside nav li button{ width:2.3em; margin: 0 1.2em 0 0;}
aside nav a{font-size:1em; padding: 1.3em 1.2em;}
aside nav a:hover{ border-radius: 0; background-color:#02D1F4;}
aside nav.open{right:0;}
aside nav.close{right:-23em;}
/*dark mode*/
aside nav .dark-mode{font-size:1em;  padding: 1.3em 1.2em;}
aside nav .dark-mode button{ width: 2.5em; padding:0.25em; margin: 0.1em 0 0 0.6em; }
aside nav .dark-mode button div{ width: 1.2em; height: 1.2em;}

/*SECONDARY NAV*/
.secondary-nav-column{ width:100%; padding-top:0;  height:auto;  background-color:transparent; position:fixed; z-index: 9999;}
.secondary-nav-column.open{top:5em;}
.secondary-nav-column.close{top:0;}
.secondary-nav{position:relative; display: flex; flex-direction:row; justify-content:center;  z-index: 99999; top:auto; right:auto; background-color:#454444; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }
.secondary-nav.open{right:auto;}
.secondary-nav a{display:block;  margin-bottom:0em; position:relative;}
.secondary-nav a:last-child{ margin-bottom:0; }
.secondary-nav a .icon-box{padding:0.7em 1em;}
.secondary-nav a p{display:none;}
.secondary-nav .icon{font-size: 1.8em; color:white;}
.secondary-nav .icon.active{font-size:1.8em; color:#02D1F4;}
/*ANCHOR*/
.anchor{position:relative;}
.anchor a{position:absolute; top:-95px;}

/*MAIN*/
main{width:100%; padding-top: 8.5em;}
main.content{padding-top:5em;}
/*CONTENT*/*
.box-section{padding:4em 0;}
.box-main{ padding:4em 0 0 !important;}
.box-main .hero-ueni{ width: 75%;}
.container-1{ width:80%; margin: 0 auto;}
.container-2{ width:85%; margin: 0 auto;}
.container-3{ width:90%; margin: 0 auto;}
.gap80{ column-gap: 2.7em;}
.gap100{ column-gap: 4em;}


/*TYPOGRAPHY*/
h1{ font-size:1.7em;}
h2{ font-size:1.7em;}
h3{ font-size:1.2em;}
h3.headline{margin-top:1.4em;}
h4{font-size: 0.96em;}
.paragraph-1{ font-size:0.85em; line-height: 2em; width: 100%;}
.paragraph-2{ font-size:0.98em; line-height: 2em; width:100%;}
.paragraph-3{ font-size:0.85em; line-height: 2em; margin: 0 auto; font-weight: 400; text-align: left; display: grid; grid-template-columns:2em auto; column-gap:1.25em;}
.paragraph-list{font-size:0.85em; line-height: 2em; width:100%;}
.quote{font-size:1.02em;}
.note{ font-size: 0.8em;}
.label{font-size:1.1em;}
.circle {font-size: 0.92em; margin-top: 0.2em; width: 1.45rem; height: 1.45rem; border-radius: 50%; line-height: 1.75em !important;}

/*MARGINGS*/
.mrg-1{margin-top:4em;}
.mrg-2{margin-top:3em;}
.mrg-3{margin-top: 2em;}
.mrg-4{margin-top: 1.3em;}

.design-viewer .note{ width:90%; margin-right:auto; margin-left:auto; line-height: 1.9em; }
.design-viewer .note:after{content: "Doble click over the mockup and scroll down to see the full design"}
/*desktop*/
.design-viewer .desktop-container{display:none;}
.design-viewer .mockup-desktop .desktop-body:before { width: 85px; height: 4px;}
.design-viewer .mockup-desktop .mockup-display:before { width: 4px; height: 4px; top: 6px;}
.design-viewer .mockup-desktop .mockup-display {padding: 18px 18px 18px;}
.design-viewer .mockup-desktop .desktop-body {height: 15px;}
.design-viewer .desktop-thumbnails{ margin-top: 2em !important;}
.design-viewer .desktop-thumbnails div {width: 20vw; height: 11vw; margin: 0 2.8em 0 0;}
.design-viewer .desktop-thumbnails.hbl-dsk div{margin:0 1em 2.2em 1em;}
/*mobile*/
.design-viewer .mobile-container{display:block;}
.design-viewer .mobile-thumbnails div{ width:10vw; height: 17.8vw; margin:0 2.5em 0 0;}
.design-viewer .mobile-thumbnails div:last-child{ margin-right:0;}
.design-viewer .mobile-thumbnails.hbl-mv div{margin:0 1em 2.2em 1em;}

/*RESULTS*/
.results .col{ width: 32%; margin-bottom:3em;}
.results div.col:nth-of-type(3){ border-right:0;}
.results div.col:nth-of-type(4), .results div.col:nth-of-type(5){ margin-bottom: 0;}
.results .number{ font-size:1.7em;}
.results .title{font-size:0.8em; margin-top: 0.8em;}
.results .before-after{font-size:0.8em; margin-top: 0.8em;}

/*EXPERIENCE*/
.experience{ width:85%; column-gap:3%;}

/*ABOUT*/
.html-css-logo{ width: 6em; height: auto; margin-bottom: 1.8em;}

/*FOOTER*/
footer .footer-nav{ padding:3em 0;}

/*INDEX*/
body.index main{ width: 100%; padding-top:0; }
.box-index{padding:8.5em 6% 4.25em;}
.project.mrg-top{ margin-top:3.7em;}
.project-img .image-1{top:9em; left:1em; width:25em;}
.project-img .image-2{top: 20em; left:25em; width:7em;}
.project.apb .project-img .image-1{top:9em; left: 7em; width:14em; }
.project.apb .project-img .image-2{top: 20em; left:21.5em; width:9.5em;}
/*hover*/
.project:hover .project-img .image-1{top: -10em;}
.project:hover .project-img .image-2{top: -3.5em;}
.project.apb:hover .project-img .image-1{top: -10.8em;}
.project.apb:hover .project-img .image-2{top: -8.5em;}


/*APB*/
.section-logo.apb{ width:4em;}
.hero-apb{ width: 25%; height: auto; margin-bottom: -2px;}
.label-container .label{ padding: 0 1em; line-height: 1.3em;}
.video {height:490px; width: 100%;}
/*herbalife*/
.section-logo.herbalife{ width:4.8m;}
.hero-herbalife{margin-bottom: -2.7px;}
/*design process*/
.wdt-equal{ width:100%;}

}



@media (max-width: 768.98px){

h4{font-size: 1.1em;}
.content-1-2col{ grid-template-columns:1fr; }
.content-1-2col img{ width:60%; height: auto; margin-bottom: 3.5em;}
.content-4col{grid-template-columns:1fr 1fr;}
.content-5col {grid-template-columns:1fr 1fr 1fr;}
.gap80{ column-gap: 2.7em;}
.gap100{ column-gap: 4em;}
.grid-gap80{ grid-gap:2.7em;}
.grid-gap100{ grid-gap:4em;}
.table{ border-top:0;}
.table h4{ padding: 0.8em 0; border-bottom: 1px solid #2E2D2C; border-top: 1px solid #2E2D2C; }

/*ANCHOR*/
.anchor{position:relative;}
.anchor a{position:absolute; top:-95px;}

/*RESULTS*/
.results .col{ width: 32%; margin-bottom:3em;}
.results div.col:nth-of-type(3){ border-right:0;}
.results div.col:nth-of-type(4), .results div.col:nth-of-type(5){ margin-bottom: 0;}
.results .number{ font-size:1.7em;}
.results .title{font-size:0.8em; margin-top: 0.8em;}
.results .before-after{font-size:0.8em; margin-top: 0.8em;}

/*EXPERIENCE*/
.experience{ width:90%; column-gap:0;}

/*LIST LINKS*/
.list-item-box{width:100%; grid-gap:2em;}
.list-item{font-size:1.1em;}
.list-item i.icon{ font-size:2.3em;}

/*INDEX*/
body.index main{ width:100%; padding-top:5em; }
.box-index{padding:5em 12%; background-color: #f5f5f5;}
.project{ padding: 4.5em; height:auto;  width:100%; grid-template-columns:100%; column-gap:0; text-align: center;}
.project.mrg-top{ margin-top:5.3em;}
.project .project-logo{ width:45%; height:25vw; margin: 0 auto;}
.project.ueni .project-logo img {width:42%; transition: all 0.5s 0s ease-out; }
.project.apb .project-logo img {width:52%; transition: all 0.5s 0s ease-out;}
.txt-goto{ top:13em; left:9.3em; font-size: 1.3em; opacity: 0; }
.project-text h1{ margin-top: 1.8em;}
.project-text p{ font-size:0.9em; line-height: 1.6em; margin-top:2em; }
.project-text p.labels{ display:block; }
.project-text p.labels span{ display:inline-block; padding: 0 1.5em 1em 1.5em; }
.project-text p.labels span:first-child{ padding-left: 0; }
.project-img .image-1{top:9em; left:-2.3em; width:27em;}
.project-img .image-2{top: 20em; left:21em; width:8em;}
.project.apb .project-img .image-1{top:9em; left: -0.5em; width:16em; }
.project.apb .project-img .image-2{top: 20em; left:16.5em; width:10em;}

/*hover*/
.project:hover .project-logo{  width:45%; height:25vw; background-color: transparent;}
.project:hover .project-logo img{ margin-top: -3.5em;}
.project:hover .txt-goto{top:10.5em; left:9.3em; opacity: 1;}
.project:hover .project-img .image-1{top: -10.5em;}
.project:hover .project-img .image-2{top: -4em;}
.project.apb:hover .project-img .image-1{top: -14.5em; }
.project.apb:hover .project-img .image-2{top: -9em;}

/*APB*/
.video {height:415px; width: 100%;}

/*DARMODE*/
body.index.darkmode main {background-color: #191919;}
body.index.darkmode main .box-index {background-color: #191919;}


}


@media (max-width: 576.98px){

/*ASIDE*/
aside{ padding:1.2em 0 1.2em 1em;}
aside .logo{ width: 7.141em; height:1.6em;}
aside .menu-button{float:right; display: block;}
aside button{ margin:0 1em 0 0; width:3em;}
aside nav{position: absolute; top:-1.15em; width:17.5em;}
aside nav li:first-child{ padding:1.2em 0;}
aside nav li button{ margin:0.1em 1.2em 0 0;}
aside nav.open{right:0;}
aside nav.close{right:-18em;}

/*SECONDARY NAV*/
.secondary-nav-column{width:100%;  z-index: 9999;}
.secondary-nav-column.open{top:4em;}
.secondary-nav-column.close{top:0;}
.secondary-nav .icon{font-size: 1.3em;}
.secondary-nav .icon.active{font-size:1.3em;}

/*MAIN*/
main{padding-top:7em;}
main.content{padding-top:4em;}
/*CONTENT*/*
.box-section{padding:4em 0;}
.box-main{ padding:2.5em 0 0 !important;}
.box-main .hero-ueni{ width: 75%;}
.label-container{display:none;}
.container-1{ width:80%; margin: 0 auto;}
.container-2{ width:85%; margin: 0 auto;}
.container-3{ width:90%; margin: 0 auto;}
.content-1-2col img{ width:85%; height: auto; margin-bottom: 3.5em;}
.content-2col, .content-3col, .content-4col{grid-template-columns:1fr; grid-gap: 2em;}

/*TYPOGRAPHY*/
h1{ line-height: 1.5em; }
h2{line-height: 1.3em; }
h3{line-height: 1.4em; }
h3.headline{margin-top:1.1em;}

/*MARGINGS*/
.mrg-1{margin-top:4em;}
.mrg-2{margin-top:3em;}
.mrg-3{margin-top: 2em;}
.mrg-4{margin-top: 1.3em;}
.mrg-4-mb{margin-top: 1.3em;}
.mrg-5{margin-top: 0.8em;}


.design-viewer .switcher button span:after{ content: ""}

/*desktop*/
.design-viewer .desktop-container{display:none;}
.design-viewer .mockup-desktop { text-align: center; margin: 0 10px;}
.design-viewer .mockup-desktop .desktop-body:before { width: 55px; height: 3px;}
.design-viewer .mockup-desktop .mockup-display:before { width: 3px; height: 3px; top: 5px;}
.design-viewer .mockup-desktop .mockup-display {padding: 12px 12px 12px;}
.design-viewer .mockup-desktop .desktop-body {height: 10px;}
.design-viewer .desktop-thumbnails{ margin-top: 2em !important;}
.design-viewer .desktop-thumbnails div {width: 24vw; height: 13.8vw; margin: 0 2em 0 0;}
.design-viewer .desktop-thumbnails.hbl-dsk div{margin:0 0.5em 2.2em 0.5em;}
/*mobile*/
.mockup-mobile {max-width: 92%;}
.design-viewer .mobile-container{display:block;}
.design-viewer .mobile-thumbnails div{ width:18vw; height:31.5vw; margin:0 2em 0 0;}
.design-viewer .mobile-thumbnails.hbl-mv div{margin:0 0.8em 2.2em 0.8em;}

/*RESULTS*/
.results .col{ width: 49%; margin-bottom:3em;}
.results div.col:nth-of-type(2), .results div.col:nth-of-type(4){ border-right:0;}
.results div.col:nth-of-type(3){ border-right:1px solid #2E2D2C;}
.results div.col:nth-of-type(4){ margin-bottom: 3em;}
.results .number{ font-size:1.7em;}
.results .title{font-size:0.8em; margin-top: 0.8em;}
.results .before-after{font-size:0.7em; margin-top: 0.8em;}

/*EXPERIENCE*/
.experience{ width:80%; column-gap:0; grid-template-columns:1fr 1fr; grid-row-gap:3em;}
.experience .col3{grid-column:1/3;}
.experience .number{ font-size:1.4em; }
.experience .title{font-size:0.9em; line-height:1.7em; margin-top: 0.8em;}


/*TABLE*/
.table{border-right:1px solid #2E2D2C;}
.table-list{ padding:8%;}
.table .col{border-right:0;}

/*LIST LINKS*/
.list-item-box{width:100%; grid-template-columns:1fr 1fr; column-gap:2.5em; grid-row-gap:4em;}
.list-item{font-size:1.2em;}
.list-item i.icon{ font-size:2.3em;}
.wdt-equal{ width:100%;}


/*FOOTER*/
footer .footer-nav{ padding: 2.5em 0;}
footer .footer-nav a{ font-size:0.85em; padding:0.7em 0.8em; margin: 0 1em; width: 10.8em;}
footer .copyright{font-size:0.75em; padding: 2em 0;}
footer .copyright img{ width:4em;}


/*INDEX*/
body.index main{ width:100%; padding-top:4em;}
.box-index{padding:2.8em 5% 3em; background-color: #f5f5f5;}
.project{ padding: 2em 1em; height:auto;  width:100%; grid-template-columns:100%; column-gap:0; text-align: center;}
.project.mrg-top{ margin-top:3em;}
.project .project-logo{ width:45%; height:36vw; margin: 0 auto;}
.project.ueni .project-logo img {width:42%; transition: all 0.5s 0s ease-out; }
.project.herbalife .project-logo img {width:55%; transition: all 0.5s 0s ease-out; }
.project.apb .project-logo img {width:56%; transition: all 0.5s 0s ease-out; }
.txt-goto{ top:10em; left:5.2em; font-size: 1.1em; }
.project-text h1{ font-size:1.5em; ; margin-top: 1em;}
.project-text p{ font-size:0.9em; line-height: 1.8em; margin-top:1.4em; }
.project-text p.labels{ display:block; margin-top:0.5em; }
.project-text p.labels span{ display:inline-block; padding: 1em 0.5em 0 0.5em; }
.project-text p.labels span:first-child{ padding-left: 0; }
.project-img .image-1{top:9em; left:0; width:16em;}
.project-img .image-2{top: 20em; left:13.2em; width:5em;}
.project.apb .project-img .image-1{top:9em; left: 0.2em; width:10em; }
.project.apb .project-img .image-2{top: 20em; left:11em; width:6.5em;}
/*hover*/
.project:hover .project-logo{  width:45%; height:36vw; background-color: transparent;}
.project:hover .project-logo img{ margin-top:0;}
.project:hover .project-img .image-1{top: -7.5em;}
.project:hover .project-img .image-2{top: -4em;}
.project:hover .txt-goto{top:9.2em; left:5.2em;}
.project.apb:hover .project-img .image-1{top: -9.8em; }
.project.apb:hover .project-img .image-2{top: -7em;}

/*CONTACT*/
.contact-box{ width:360px; height:430px; padding: 0.2em;}
.contact-info{ width:100%; height:100%; padding-top:3.6em;}
.contact-info .logo{ width:5em; height:auto; margin-bottom: 1.8em;}
.contact-info .title{ font-size:1.8em; padding: 0 1em; line-height:1.2em;  margin-bottom:0.8em; }
.contact-info .subtitle{ font-size:0.9em; margin-bottom: 2.2em; font-weight:300;  font-family:}
.contact-info .email{width:14em; height:2.4em; margin: 0 auto 2.2em;}

/*ANCHOR*/
.anchor{position:relative;}
.anchor a{position:absolute; top:-60px;}

/*ueni*/
.section-logo.ueni{ width:2.4em;}
.balance-img{ width:100%;}
/*APB*/
.section-logo.apb{ width:3.5em;}
.hero-apb{ width: 60%; height: auto; margin-bottom: -2px;}
.table.apb h3.snd{display:block;}
.mb-mockup{ width:85%;}
.col2-wdt{ width: 85%;}
.content-3col.apb{width: 80%; margin-left: auto; margin-right: auto;}
.video {height:730px; width: 100%;}
/*herbalife*/
.section-logo.herbalife{ width:4.4em;}
.hero-herbalife{margin-bottom: -2.7px;}
.herbalife-net{ width:100%;}
.hotjar-img{width:100%;}
/*DESIGN MANAGEMENT*/
.img-awareness{ width:80%; }
.icon-hdl{font-size:2.8em; margin: 0 auto 0.4em;}
.software-logos{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; column-gap:2.5em; grid-row-gap:4em;}
.software-logos img{ height:2em; margin-bottom: 0.8em;}
.software-logos p{font-family: 'Barlow', sans-serif;}


/*DARKMODE*/
body.index.darkmode .box-index{background-color:#191919;}

}


@media (max-width: 415px){
/*RESULTS*/
.results .col{ width: 70%; margin-bottom:2em; padding-bottom: 2em; border-bottom: 1px solid #2E2D2C; border-right: 0 !important;}
.results .col:last-child{ border-bottom:0; margin-bottom: 0; padding-bottom: 0; }
.results .number{ font-size:1.9em;}
.results .title{font-size:1em; margin-top: 0.9em;}
.results .before-after{font-size:0.9em; margin-top: 0.9em;}
/*EXPERIENCE*/
.experience{ width:90%; column-gap:0; grid-template-columns:1fr; grid-row-gap:3em;}
.experience .col3{grid-column:1;}
/*LIST LINKS*/
.list-item-box{width:100%; grid-template-columns:1fr; column-gap:1.2em; grid-row-gap:2em;}
.list-item{font-size:1.2em;}
.list-item i.icon{ font-size:2.3em;}
/*APB*/
.video {height:460px; width: 100%;}
/*DESIGN MANAGEMENT*/
.img-awareness{ width:100%; }
.icon-hdl{font-size:3.2em; margin: 0 auto 0.4em;}
.software-logos{ display:grid; grid-template-columns:1fr 1fr; column-gap:1.8em; grid-row-gap:3em;}
.software-logos img{ height:2.5em; margin-bottom: 0.8em;}
.software-logos p{font-family: 'Barlow', sans-serif;}
}

@media (max-width: 361px){
.secondary-nav a .icon-box {padding: 0.7em 0.7em;}
.video {height:460px; width: 100%;}
.design-viewer .mobile-thumbnails.hbl-mv div{margin:0 0.5em 2.2em 0.5em;}
/*CONTACT*/
.contact-box{ width:320px; height:430px; padding: 0.2em;}
}