@charset "UTF-8"; /* CSS Document */ *{box-sizing:border-box; margin:0; padding:0;} ul{padding:0; margin:0;} body, html{color:#2a2a2a; font-size:16px; line-height:21px; background-color:#f7f7f7;} img{display:block;} a{cursor: pointer; text-decoration: none;} body{visibility:hidden;} /* fade this in with gsap */ /* html, body {padding: env(safe-area-inset);} */ /* FONTS */ @font-face { font-family: 'Ano'; src: url('https://www.micelistudios.com/fonts/ano-regular.woff2') format('woff2'), url('https://www.micelistudios.com/fonts/ano-regular.woff') format('woff'), url('https://www.micelistudios.com/fonts/ano-regular.ttf') format('truetype'); } @font-face { font-family: 'ANikolai-Bold'; src: url('https://www.micelistudios.com/fonts/Nikolai-Bold.woff2') format('woff2'), url('https://www.micelistudios.com/fonts/Nikolai-Bold.woff') format('woff'), url('https://www.micelistudios.com/fonts/Nikolai-Bold.ttf') format('truetype'); } @font-face { font-family: 'Vesterbro-Poster'; src: url('https://www.micelistudios.com/fonts/Vesterbro-Poster.woff2') format('woff2'), url('https://www.micelistudios.com/fonts/Vesterbro-Poster.woff') format('woff'), url('https://www.micelistudios.com/fonts/Vesterbro-Poster.ttf') format('truetype'); } /* color */ .dark{fill:#2a2a2a;} .light{fill:#f7f7f7;} /* class needed to prevent overflow on header text */ .lineParent, .lineParentSub{overflow: hidden; padding:0px;} .lineChild, .lineChildSub{padding:0px; visibility:hidden; /* will fade in init with gsap */} /* FLEX */ .flex{display:flex;} .flexCenter{align-items:center;} .flexStart{align-items: flex-start;} .flexEnd{align-items: flex-end;} .gapSmall{gap:6px;} .flexCenterItems{-moz-box-align: center; -ms-flex-align: center; -ms-flex-pack: center; -webkit-align-content: center; -webkit-justify-content: center; -webkit-align-items: center; -webkit-box-align: center; align-content: center;justify-content: center; align-items: center;} .rowWrap {flex-flow: row wrap;-webkit-flex-flow: row wrap;} .flexColumnStack{flex-direction: column;} .flexInner{} .flexVerticalCenter{display: flex;flex-direction: column;justify-content: center;} .padBottomSmall{padding-bottom:6px !important;} .padBottom-100{padding-bottom:100px !important;} .padBottom-200{padding-bottom:200px !important;} .padBottom-300{padding-bottom:300px !important;} .padBottom-400{padding-bottom:400px !important;} .padBottom-500{padding-bottom:500px !important;} /* NAV */ .navWrap{width:100%; height:auto; background-color:transparent; padding:60px 20px 140px 20px;} .nav-list{list-style-type:none; text-align:left; z-index:999;} .list-item, .sub-list-item{display:inline-block; padding:20px 10px;} .navbar{background-color:transparent; justify-content:space-between; font-size:15px; font-family:Ano; padding:0px 40px; width:100%; max-width:1280px; margin:0 auto; height:62px; position:relative; z-index:1000;} .navbar a{color:#2a2a2a; text-decoration:none;} .navbar a:hover{color:#2a2a2a;} .menu{display:none; cursor:pointer;} .menu-line{width:28px; height:3px; background-color:#2a2a2a; margin-bottom:5px; border-radius:12px;} .nav-item-a, .nav-item-a-sub{display:inline-block;} /* needs to be block to animate tag */ .nav-item-a{width:100%; height:auto; padding:10px 0px; background-color:transparent; position:relative;} .nav-underline{width:100%; height:2px; background-color:#2a2a2a; position:absolute; bottom:0; left:0; margin:0; padding:0;} .overlay{width:100%; height:100%; background-color:white; position:fixed; top:0px; left:0px; z-index:998; visibility:hidden;} /* setup active state for main menu items, the underline is extended/created in JS */ .menu-active > a {pointer-events:none;} /* seperate .sub-list-item style for desktop */ @media all and (min-width:769px){ .sub-list-item a{color:#666666; text-decoration:none;} .sub-list-item a:hover{color:#333333;} .sub-nav-list{list-style-type:none; text-align:left; display:none; box-shadow: 0px 4px 4px rgba(0, 0, 0, .2);} .sub-list-item{color:#666666; display:block; padding:6px} .list-item:hover{position:relative;} .list-item:hover > ul{display:block; position:absolute; top:50px; left:0; background-color:#dedede; padding:10px 20px 20px 10px; } .nav-item-a, .nav-item-a-sub{opacity:1 !important; transform: translate(0px, 0px) !important;} /* important make sure set back when on desktop */ } /* mobile */ @media all and (max-width:768px){ .navbar{flex-direction:column; font-family:Vesterbro-Poster; padding:0px 30px; font-size:6vw; line-height:7vw;} /* change direction of items inside of navbar */ .menu{display:block; position:absolute; top:25px; right:40px;} .list-item{display:block; padding:20px 10px;} /* change from inline-block to block so the items form a column */ .list-item-with-sub{padding:20px 10px 0px 10px;} /* list-items that contain sub nav items need no bottom padding to even spacing */ .sub-list-item{display:block; padding:20px 10px;} /* change from inline-block to block so the items form a column */ .sub-list-item:first-of-type{padding-top:40px;} /* first sub nav item needs 2x padding to match other items */ .nav-list{text-align:center; padding-top:30px; width:100%;} /* make width span full width and hide the menu on initial view */ .sub-nav-list{text-align:center; width:100%;} .brand{width:100%; padding:0px;} /* push brand logo to 100 width */ .navWrap{padding:30px 20px 140px 20px;} /* .active{display:block;} this stays in the media query to override the display:none of the nav-list class */ .nav-item-a, .nav-item-a-sub{opacity:0; transform: translate(0px, 50px);} } /* ----------------------------- */ .wrap1280{width:100%; max-width:1280px; margin:0 auto; text-align:center; padding:0px 40px;} .wrapFull{width:100%; margin:0 auto; text-align:center; padding:0px;} .indent{padding-left:100px !important;} .indent-right{padding-right:100px !important;} .headline h1{font-family:Vesterbro-Poster; font-size:66px; line-height:74px; letter-spacing:.02em; color:#2a2a2a; text-align:left; padding-bottom:30px;} .subHead h2{font-family:Ano; font-size:24px; font-weight:normal; line-height:32px; letter-spacing:.02em; color:#2a2a2a; text-align:left; padding-bottom:130px; padding-right:30%;} .headline-right h1{font-family:Vesterbro-Poster; font-size:66px; line-height:74px; letter-spacing:.02em; color:#2a2a2a; text-align:right; padding-bottom:50px;} .subHead-right h2{font-family:Ano; font-size:24px; font-weight:normal; line-height:32px; letter-spacing:.02em; color:#2a2a2a; text-align:right; padding-bottom:90px; padding-left:30%; padding-right:0%;} .imgParalaxContainer-600 {position: relative; height: 600px; max-height: 600px; overflow: hidden; background:transparent;} .imgParalaxContainer-400 {position: relative; height: 400px; max-height: 400px; overflow: hidden; background:transparent;} .imgParalaxContainer-600 img, .imgParalaxContainer-400 img {position: absolute; width: 100%; height:100%; object-fit: cover; top:0;} .imgParalaxContainer-300 {position: relative; height: 400px; max-height: 400px; overflow: hidden; background:transparent;} .imgParalaxContainer-300 img{position: absolute; width: 100%; height:300%; object-fit: cover; top:0%;} .imgParalaxContainer-full {position: relative; height: 600px; max-height: 600px; overflow: hidden; background:transparent;} .imgParalaxContainer-full img{position: absolute; width: 100%; height:130%; object-fit: cover; top:0;} .col-2{width:50%;} .col-3{width:33%;} .col-2-70{width:70%;} .col-2-30{width:30%;} .right{} .left{height: 700px; max-height: 700px;} .bottom-right{height: 700px; max-height: 700px;} .bottom-left{height: 800px; max-height: 800px;} .footer{width:100%; height:700px; background-color:#2a2a2a; margin-bottom:0px !important;} .footer-text{background-color:transparent; justify-content:space-between; align-items:flex-end; padding:0 40px; width:100%; max-width:1280px; margin:0 auto;} .footer-right{display:flex; height:100%;} .footer-right p{color:#f7f7f7; font-size:15px; font-family:Ano; display: inline-block;align-self: flex-end;} .footer-nav{background-color:transparent; justify-content:flex-end; padding:100px 40px 0px 40px; width:100%; max-width:1280px; margin:0 auto;} .footer-nav-right h5{font-family:Vesterbro-Poster; font-size:40px; line-height:44px; letter-spacing:.02em; color:#f7f7f7; text-align:right;} .right-arrow{padding-bottom:22px;} .footer-brand{padding:0px;} /* mobile */ @media all and (max-width:768px){ .headline h1{font-size:9.4vw; line-height:9.9vw;} .subHead h2{padding-right:6%;} .headline-right h1{font-size:8.8vw; line-height:9.3vw;} .subHead-right h2{padding-right:0%; padding-left:6%;} .indent{padding-left:60px !important;} .indent-right{padding-right:60px !important;} } /* mobile small*/ @media all and (max-width:420px){ .wrap1280{padding:0px 20px;} .indent{padding-left:20px !important;} .indent-right{padding-right:20px !important;} .navbar{padding:0px 0px;} .menu{right:20px;} h1, h2, h5, body{letter-spacing: -0.03em !important; -webkit-text-size-adjust: none !important;} .imgParalaxContainer-full {height: 400px; max-height: 400px;} .imgParalaxContainer-full img{height:115%;;} .padBottom-300{padding-bottom:200px !important;} #footer-brand-logo{width:50px !important; height:50px !important;} }