styles.css

html{height:100%;width:100%}body{padding:0;margin:0;line-height:1.5em;font-family:'Open Sans',sans-serif;width:100%;overflow-x:hidden}a,a:hover,a:visited{text-decoration:none;color:#fff;text-transform:uppercase}.flex{display:flex;align-items:center;justify-content:space-between;position:absolute;width:100%;padding-left:1.25rem;padding-right: 1.25rem;}ol{padding-left:0}ul{padding-left:2rem}h1{text-transform:uppercase;font-size:6.75rem}h2{font-size:4.5rem;margin-top:0;text-transform:uppercase;color:#0e0b58;font-weight:bolder}h3{margin-top:0;text-transform:uppercase;color:#0e0b58;font-weight:bolder}strong{color:#0e0b58;font-weight:bolder}p{font-size:1.5rem}footer{padding:2rem;background-color:#0e0b58;color:#fff;text-decoration:none;}.heading_underline{color:#fff;display:inline-block;position:relative}.heading_underline::after{content:'';left:0;height:3rem;background:#0e0b58;position:absolute;width:70%;bottom:-1rem;z-index:-1}.chapter_underline,.short_underline,.underline{color:#0e0b58;display:inline-block;position:relative}.underline::after{content:'';left:20%;height:1.5rem;background:#45b0ff;position:absolute;width:70%;bottom:-1rem;z-index:-1}.chapter_underline::after{content:'';left:20%;height:3rem;background:#45b0ff;position:absolute;width:80%;bottom:-1rem;z-index:-1}.short_underline::after{content:'';left:0;height:1.5rem;background:#45b0ff;position:absolute;width:80%;bottom:-1rem;z-index:-1}.header__logo{background-color:#fff;padding:2.18125rem .625rem .625rem .625rem;margin-top:0;position:relative;z-index:0}img.header__logo{width:9.625rem;height:1.18125rem}#button_burger{z-index:2}#button_burger span{display:block;width:3rem;height:.1875rem;background-color:#0868ff;margin-bottom:.4rem;transform-origin:7px 2px;transition:all .3s ease-in-out}.header.open span:first-child{transform:rotate(45deg)}.header.open span:nth-child(2){opacity:0}.header.open span:last-child{transform:rotate(-45deg)}.header.open .overlay{background-color:#0e0b58;position:fixed;top:0;left:0;bottom:0;right:0;opacity:0;width:100%;z-index:1}.header__menu{color:#fff;font-size:1.875rem;font-weight:700;padding:1.5rem 1.5rem 1.5rem 1.5rem;counter-reset:li;margin-top:0;position:absolute;top:1%;z-index:1}.header__menu a{display:block;text-align:left;font-size:7rem;line-height:7rem}.content-heading{color:#fff;font-size:3rem;margin-bottom:5.3125rem;margin-top:0}ol li{font-weight:700;margin-bottom:1.75rem;display:flex;align-items:center}ol li:before{counter-increment:li;content:counter(li,decimal-leading-zero);color:#fff;margin-right:1.25rem;font-size:2rem}.text-container{position:relative;padding-right:1rem;font-size:7rem;line-height:7rem}.has-fade{visibility:hidden}@keyframes fade-in{from{visibility:hidden;opacity:0}1%{visibility:visible;opacity:0}to{visibility:visible;opacity:1}}.fade-in{animation-name:fade-in;animation-duration:.2s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}@keyframes fade-out{from{visibility:visible;opacity:1}99%{visibility:visible;opacity:0}to{visibility:hidden;opacity:0}}.fade-out{animation-name:fade-out;animation-duration:.2s;animation-timing-function:ease-in-out}.hero_image{background-image:url(images/womain-working-on-bed-with-dog.jpg);background-size:cover;background-repeat:no-repeat;background-position:center center;display:flex;justify-content:flex-end;overflow:hidden}.hero_image::before{position:relative;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center center}.hero_text{color:#fff;text-align:left;top:30%;left:3%;transform:translate(-3%,-20%);position:absolute}.hero_text p{font-size:2rem}.overlay_container{position:absolute}.blue_overlay{width:60rem;height:70rem;background:#45b0ff;transform:rotate(45deg);opacity:.6;margin-right:-20rem}.open_menu_section{background-color:#0e0b58;padding:10rem 3rem 10rem 3rem}.open_menu_text{color:#fff}.open_menu_text h2{margin-right:4.875rem;color:#fff}.open_menu{color:#fff;font-size:4.5rem;font-weight:700;counter-reset:li;position:relative;left:0;line-height:5rem;padding-left:3rem}.text-open-menu-overlay:hover:after{content:attr(data-hover);opacity:1;color:#45b0ff;font-size:1.5rem;font-weight:lighter;position:absolute;height:auto;width:100%;justify-content:flex-start}.container{padding-top:3rem;padding-bottom:3rem;width:100%}.grid_container{display:grid;grid-template-columns:1fr 2fr;text-align:left;padding:1.25rem}.grid_container div{padding-right:2rem}.grid_container a,.small_grid_container a{color:#0072c6;text-transform:capitalize;text-decoration:underline}.text_divider{display:flex;align-items:center;--text-divider-gap:1rem;padding-bottom:.5rem;color:#45b0ff;font-size:1.5rem;text-transform:uppercase}.text_divider::before{content:'';height:.06rem;background-color:#45b0ff;width:3rem}.text_divider::before{margin-right:1rem}article a{color:#0e0b58}.square_blue_overlay{width:12rem;height:12rem;background:#45b0ff;margin-right:-7.5rem;mix-blend-mode:hard-light}.overlay_1{-webkit-transform:rotate(-19deg) translate(100%,-145%) scale(2);-moz-transform:rotate(-19deg) translate(100%,-145%) scale(2);-ms-transform:rotate(-19deg) translate(100%,-145%) scale(2);-o-transform:rotate(-19deg) translate(100%,-145%) scale(2);transform:rotate(19deg) translate(100%,-145%) scale(2)}.overlay_2{-webkit-transform:rotate(19deg) translate(-80%,-130%) scale(2);-moz-transform:rotate(19deg) translate(-80%,-130%) scale(2);-ms-transform:rotate(19deg) translate(-80%,-130%) scale(2);-o-transform:rotate(19deg) translate(-80%,-130%) scale(2);transform:rotate(19deg) translate(-80%,-130%) scale(2);opacity:.9}.overlay_3{-webkit-transform:rotate(19deg) translate(0,-160%) scale(2);-moz-transform:rotate(19deg) translate(0,-160%) scale(2);-ms-transform:rotate(19deg) translate(0,-160%) scale(2);-o-transform:rotate(19deg) translate(0,-160%) scale(2);transform:rotate(19deg) translate(0,-160%) scale(2);opacity:.9}.item2_image,.stage_3_image{width:100%;height:auto;padding-right:5rem}.flex_box_container{flex-direction:row;display:flex;margin-top:3rem}.flex_item{margin:1rem;padding:1rem;background-color:rgba(0,114,198,.1);width:33%;position:relative}.icon{position:absolute;left:1rem;top:-3rem}.chapter_2{background-color:#fdfaf7;z-index:-2;position:relative}.stage,.stages a{color:#45b0ff;font-weight:700;text-decoration:none}.flex_box_container_chap_2{flex-direction:row;margin-top:3rem}.flex_item_chap_2{margin-bottom:1rem;padding:1rem;background-color:rgba(0,114,198,.1);position:relative}.interview_image_box img{max-height:100%;max-width:100%;padding-top:2.5rem;padding-bottom:2.5rem}.sticky_notes p{text-align:left;text-transform:uppercase;color:#0072c6;font-size:3rem;line-height:3rem;font-weight:700}.virtual_interview_grid{display:grid;grid-template-columns:repeat(3,33%);grid-template-rows:repeat(2,15rem)}.virtual_interview_grid_item{margin:1rem;padding:1rem;background-color:rgba(0,114,198,.1)}.stage_1,.stage_2,.stage_3{grid-column:2/4;grid-row:1/3}.note li{list-style-type:square;font-style:italic}.note li::marker{color:#45b0ff}.slider-container{overflow:hidden;position:relative;padding:1rem 1rem}.my-slider,.slider-item{position:relative}.card{overflow:hidden;position:relative;height:38rem}.card-title{text-transform:capitalize;padding-top:2rem}.card p{text-align:right;width:150px;display:inline-block;position:absolute;right:-5rem;bottom:0;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.card img{width:100%;height:auto;display:inline-block;vertical-align:top}.controls{list-style-type:none;right:0;position:absolute;top:40%;z-index:2}.controls li:hover{cursor:pointer}.next{background-color:#45b0ff;background-image:url(../../images/arrow-right-thin.svg);background-repeat:no-repeat;background-position:center;border-radius:100%;height:48px;padding-left:44px}#access_top{text-transform:none}@media only screen and (min-width:600px){.open_menu_text{display:flex}.interview_image_box{display:none}}@media only screen and (max-width:600px){h1{font-size:5.5rem}footer{flex-direction: column-reverse}.header__menu a{font-size:3.5rem;line-height:3rem}.text-container{line-height:1rem}.blue_overlay{transform:rotate(45deg) translate(50px,-100px)}.hero_text{top:30%}.open_menu_section{padding:5rem 3rem 5rem 3rem}.open_menu{font-size:2.5rem;line-height:1rem;padding-left:1rem}.open_menu a{font-size:2.5rem;line-height:2.5rem}.flex_box_container,.grid_container,.grid_container_stage_2,.virtual_interview_grid{display:block}.grid_container div{padding-right:0}.flex_item,.virtual_interview_grid{width:auto;margin-top:5rem;margin-bottom:0}.overlay_1{-webkit-transform:rotate(19deg) translate(50%,-135%) scale(2);-moz-transform:rotate(19deg) translate(50%,-135%) scale(2);-ms-transform:rotate(19deg) translate(50%,-135%) scale(2);-o-transform:rotate(19deg) translate(50%,-135%) scale(2);transform:rotate(19deg) translate(50%,-135%) scale(2)}.overlay_2{margin-bottom:-5rem}.overlay_3{-webkit-transform:rotate(19deg) translate(-20%,-110%) scale(2);-moz-transform:rotate(19deg) translate(-20%,-110%) scale(2);-ms-transform:rotate(19deg) translate(-20%,-110%) scale(2);-o-transform:rotate(19deg) translate(-20%,-110%) scale(2);transform:rotate(19deg) translate(-20%,-110%) scale(2)}.item2_image,.stage_3_image,.sticky_notes{padding-top:10rem;padding-bottom:1rem;padding-right:0}.virtual_interview_grid_item{margin:2rem 0 2rem 0}.next{display:none}}@media only screen and (max-width:992px){.hero_text{top:25%}}@media(hover:hover) and (pointer:fine){li:hover a{opacity:.2;top:15px}.text-overlay:hover:after{content:attr(data-hover);opacity:1;color:#45b0ff;font-size:1.5rem;font-weight:lighter;transform:translate(5%,-100%);position:absolute}}