:root{--text-color: #fff; --bg-color: #18232b; --text-second-color: #89bdbb; --bg-second-color: #1c2c37; --link : #007bff; --link-hover : #3093fc;}html{font-size: 18px;}body{font-family: 'Libre Franklin', sans-serif; color: var(--text-color); line-height: 1.4rem; background: var(--bg-color); font-weight: 300;}h1{color: var(--text-second-color); font-size: 1.8rem ; font-weight: 800; text-align: center; padding: 2rem 0 1rem 0; margin: 0;}h2 a{/*opacity: 0; */ text-decoration: underline; position: relative;}h2 a:hover{color: var(--link-hover);}h2{color: var(--text-second-color); font-weight: 200; text-align: center; font-size: 1.2rem; line-height: 1.7rem; margin-bottom: 3rem;}.work-container{opacity: 1;}h3{text-align: center; color: var( --text-second-color); font-size: 1.4rem; margin: 0 0 1.5rem 0;}@keyframes porto_fade{0%{opacity: 0;}100%{opacity: 1;}}.row.porto{background: var(--bg-second-color);}.porto div{border: dotted 0px #00f; padding-bottom: 0; padding: 0;}.img-caption{text-align: center; color: var(--text-second-color); font-weight: 600; font-size: 0.9rem; position: absolute; opacity: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 1.1rem;}.porto .porto-case{border-top: solid 21px var(--bg-second-color); position: relative; z-index: 100; position: relative;}.porto-case .porto-details{padding: 1.3rem; font-size: 1rem; text-transform: none; text-align: left;}.porto-details h3{text-align: left; text-transform: uppercase; font-size: 1.1rem; color: var( --text-second-color); font-weight: 500; margin: 1.4rem 0 0.4rem 0;}.porto-details h3:first-child{margin-top: 0;}.porto div a[aria-expanded=true]{display: block;}.porto > div.col-6:hover{background: var(-dark-color); display: block;}.porto > div:hover span, .porto div a[aria-expanded=true] span{opacity: 1;}.porto div a img/*, .porto > div*/{transition: all 0.3s;}.porto div a[aria-expanded=true] img{opacity: 0.05;}.porto div a img:hover{opacity: 0.05;}footer{text-align: center; opacity: 0.5; margin: 15rem 0 6rem 0; color: var(--text-second-color); border-bottom: solid 1px var(--text-second-color); padding: 0 !important;}.copy{position: relative; top: 0.85rem; background: var(--bg-color); max-width: 280px; margin: auto; color: var(--text-second-color); border: solid 1px var(--bg-color);}[data-aos="ani_footer_line"]{width: 0.1px; transition-property: width;}[data-aos="ani_footer_line"].aos-animate{width: 100%;}@media (min-width: 576px){}@media (min-width: 768px){header{height: 19rem; border: dotted 0px #0f0;}h1{position: relative; z-index: 100; color: var(--bg-color); font-size: 3rem ; font-weight: 800; text-align: center; padding: 4rem 0 2rem 0; margin: 0; animation-name: h1; animation-duration: 0.01s; animation-delay: 1.2s; animation-fill-mode: forwards ;}@keyframes h1{0%{color: var(--bg-color);}100%{color: var(--text-second-color);}}.block{display: block; position: relative; top: 1rem; background: var(--bg-color); opacity: 0; height: 7rem; border-top: solid 1px var(--text-second-color); animation-name: h1_block; animation-duration: 0.6s; animation-delay: 0.4s; animation-iteration-count: 2; animation-direction: alternate; animation-fill-mode: forwards; animation-timing-function: ease-in-out;}@keyframes h1_block{0%{top: 1rem; opacity: 0;}30%{top: 1rem; opacity: 1;}100%{top: -6rem; opacity: 1;}}h2{position: relative; z-index: 20; color: var(--bg-color); top: -14rem; font-weight: 200; text-align: center; font-size: 1.4rem; line-height: 2.2rem; animation-name: h2, h2_position; animation-duration: 0.01s, 0.1s; animation-delay: 2.2s, 3s; animation-fill-mode: forwards ; margin-bottom: 0;}@keyframes h2{0%{color: var(--bg-color);}100%{color: var(--text-second-color);}}@keyframes h2_position{0%{z-index: 20;}100%{z-index: 120;}}h2 a{position: relative; text-decoration: none; color: var(--bg-color); animation-name: h2, h2_link; animation-duration: 0.01s, 1s; animation-delay: 2.2s, 3s; animation-fill-mode: forwards,forwards; border-bottom: solid 0px var(--link);}header h2 a:hover{text-decoration: none; color: var(--link-hover); border-bottom: solid 1px var(--link-hover) ;}@keyframes h2_link{0%{color: var(--text-second-color);}100%{color: var(--link); border-bottom: solid 1px var(--link);}}.block_2{display: block; z-index: 35; position: relative; background: var(--bg-color); height: 7rem; top: -1rem; opacity: 0; border-bottom: solid 1px var(--text-second-color); animation-name: h2_block; animation-duration: 1.6s; animation-delay: 1.5s; animation-timing-function: ease-in-out; ; animation-fill-mode: forwards ;}@keyframes h2_block{0%{top: -1rem; opacity: 0;}5%{top: -1rem; opacity: 1;}40%{top: 6rem; opacity: 1;}70%{top: -1rem; opacity: 1; transform:scaleX(1);}95%{top: -1rem; opacity: 1; transform:scaleX(0.0001);}100%{top: -1rem; opacity: 1; transform:scaleX(0.0001);}}.work-container{opacity: 0; animation-name: work; animation-duration: 0.7s; animation-delay: 3s; animation-timing-function: ease-in-out; ; animation-fill-mode: forwards ;}@keyframes work{0%{opacity: 0;}100%{opacity: 1;}}h3{text-align: center; color: var( --text-second-color); font-size: 2.4rem; margin: 0 0 1.5rem 0;}.img-caption{font-size: 1.3rem; line-height: 1.5rem;}@media (min-width: 992px){.porto-case .porto-details{padding: 0 1.3rem 1.3rem 1.3rem;}}