/* -------------------------------- Style SheetsAuthor:Christopher Chin-------------------------------- */*, *::after, *::before{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}html{font-size: 72.5%;}html *{-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}body{font-size: 1.6rem; color: #dcdcdc; background-color: #ffffff;}body, html{/* prevent horizontal scrolling */ overflow-x: hidden;}a{color: #198E09; text-decoration: none;}a:hover{color: #FFF;}/* -------------------------------- Main Components -------------------------------- */.LOGO{position: fixed; z-index: 3; right: 5%; top: 20px; height: 200px; width: 200px;}main{position: relative; z-index: 2; /* fix bug on iOS */ height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background-color:#DCDCDC; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.7s; -moz-transition: -moz-transform 0.7s; transition: transform 0.7s; -webkit-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); -moz-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);}main h1{font-family: "Montserrat", sans-serif; font-weight:bold; color: #030303; line-height: 90px; text-align:left;}main h2{font-family: "Montserrat", sans-serif; font-weight:400; margin-top: -105px; color: #030303; line-height: 60px; text-align:left;}main h3{font-family: "Montserrat", sans-serif;margin-top: 10px;margin-left: 10px;color: #030303;}main p{font-family: "Montserrat", sans-serif; font-size: 2.1rem; color:#3A3939; max-width: 1000px; margin: 0 auto; line-height: 1.6; text-align:left;}.navigation-is-open main{-webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%);}.cd-nav-trigger{position: fixed; z-index: 3; left: 5%; top: 20px; height: 54px; width: 54px; background-color: #020202; /*old bckg color---------------#020202;---------------*/ border-radius: 50%; /* image replacement */ overflow: hidden; text-indent: 100%; white-space: nowrap; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s;}.cd-nav-trigger .cd-nav-icon{/* icon created in CSS */ position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 22px; height: 2px; background-color: #FFFFFF;}.cd-nav-trigger .cd-nav-icon::before, .cd-nav-trigger .cd-nav-icon:after{/* upper and lower lines of the menu icon */ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: inherit; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.5s, width 0.5s, top 0.3s; -moz-transition: -moz-transform 0.5s, width 0.5s, top 0.3s; transition: transform 0.5s, width 0.5s, top 0.3s;}.cd-nav-trigger .cd-nav-icon::before{-webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); -o-transform: translateY(-6px); transform: translateY(-6px);}.cd-nav-trigger .cd-nav-icon::after{-webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateY(6px); -moz-transform: translateY(6px); -ms-transform: translateY(6px); -o-transform: translateY(6px); transform: translateY(6px);}.no-touch .cd-nav-trigger:hover .cd-nav-icon::after{top: 2px;}.no-touch .cd-nav-trigger:hover .cd-nav-icon::before{top: -2px;}/**************************Stroke Animation for Menu Button******************************/.cd-nav-trigger svg{position: absolute; stroke: #aeaeae; top: 0; left: 0;}.cd-nav-trigger circle{/* circle border animation */ -webkit-transition: stroke-dashoffset 0.4s 0s; -moz-transition: stroke-dashoffset 0.4s 0s; transition: stroke-dashoffset 0.4s 0s;}.navigation-is-open .cd-nav-trigger{/* rotate trigger when navigation becomes visible */ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);}.navigation-is-open .cd-nav-trigger .cd-nav-icon::after,.navigation-is-open .cd-nav-trigger .cd-nav-icon::before{/* animate arrow --> from hamburger to arrow */ width: 50%; -webkit-transition: -webkit-transform 0.5s, width 0.5s; -moz-transition: -moz-transform 0.5s, width 0.5s; transition: transform 0.5s, width 0.5s;}.navigation-is-open .cd-nav-trigger .cd-nav-icon::before{-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}.navigation-is-open .cd-nav-trigger .cd-nav-icon::after{-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}.no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::after, .no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::before{top: 0;}.navigation-is-open .cd-nav-trigger circle{stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 0.4s 0.3s; -moz-transition: stroke-dashoffset 0.4s 0.3s; transition: stroke-dashoffset 0.4s 0.3s;}.cd-nav{position: fixed; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; background-color: #020202; visibility: hidden; -webkit-transition: visibility 0s 0.7s; -moz-transition: visibility 0s 0.7s; transition: visibility 0s 0.7s;}.cd-nav .cd-navigation-wrapper{/* all navigation content */ height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 40px 5% 40px calc(5% + 80px); padding-left: 50px; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.7s; -moz-transition: -moz-transform 0.7s; transition: transform 0.7s; -webkit-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78); -moz-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78); transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);}.navigation-is-open .cd-nav{visibility: visible; -webkit-transition: visibility 0s 0s; -moz-transition: visibility 0s 0s; transition: visibility 0s 0s;}.navigation-is-open .cd-nav .cd-navigation-wrapper{-webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; -webkit-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78); -moz-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78); transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);}.cd-nav h2{position: relative; margin-bottom: 1.7em; font-size: 1.3rem; font-weight: 800; color: #080b0f; text-transform: uppercase;}.cd-nav h2::after{/* bottom separation line */ content: ''; position: absolute; left: 0; bottom: -20px; height: 1px; width: 60px; background-color: currentColor;}.cd-nav .cd-primary-nav{margin-top: 60px;}.cd-nav .cd-primary-nav li{margin: 1.6em 0;}/*******************************************Font for NavBar *********************************************/.cd-nav .cd-primary-nav a{font-family: "Montserrat", sans-serif; font-size: 2.4rem; font-weight:bold; color: #ffffff; display: inline-block;}.cd-nav .cd-primary-nav a.selected{color: #404040;}.no-touch .cd-nav .cd-primary-nav a:hover{color: #cbcaca;}.cd-nav .cd-contact-info{margin-top: 80px;}.cd-nav .cd-contact-info li{font-family: "Montserrat", sans-serif; font-weight: normal; margin-bottom: 1.5em; line-height: 1.2; color: #999;}.cd-nav .cd-contact-info a{color: #ffffff;}.cd-nav .cd-contact-info span{display: block;}.cd-nav .cd-contact-info li, .cd-nav .cd-contact-info a, .cd-nav .cd-contact-info span{font-size: 1.7rem;}.no-js main{height: auto; overflow: visible;}.no-js .cd-nav{position: static; visibility: visible;}.no-js .cd-nav .cd-navigation-wrapper{height: auto; overflow: visible; padding: 100px 5%; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0);}/*******************************************SlideShow CSS *********************************************/.cb-slideshow,.cb-slideshow:after{position: center; top: 0px; left: 0px; z-index: 0;}.cb-slideshow:after{content: ''; /* background: transparent url(../images/pattern.png) repeat top left; */}.cb-slideshow li span{width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0;-webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s;}.cb-slideshow li div{z-index: 1000; position: absolute; bottom: 30px; left: 0px; width: 100%; text-align: center; opacity: 0; color: #fff; -webkit-animation: titleAnimation 36s linear infinite 0s; -moz-animation: titleAnimation 36s linear infinite 0s; -o-animation: titleAnimation 36s linear infinite 0s; -ms-animation: titleAnimation 36s linear infinite 0s; animation: titleAnimation 36s linear infinite 0s;}.cb-slideshow li:nth-child(1) span{background-image: url(../images/1.jpg);}.cb-slideshow li:nth-child(2) span{background-image: url(../images/2.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s;}.cb-slideshow li:nth-child(3) span{background-image: url(../images/3.jpg); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s;}.cb-slideshow li:nth-child(4) span{background-image: url(../images/4.png); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s;}.cb-slideshow li:nth-child(5) span{background-image: url(../images/5.png); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s;}/* Animation for the slideshow images */@-webkit-keyframes imageAnimation{0%{opacity: 0; -webkit-animation-timing-function: ease-in;}8%{opacity: 1; -webkit-animation-timing-function: ease-out;}17%{opacity: 1}25%{opacity: 0}100%{opacity: 0}}/* Show at least something when animations not supported */.no-cssanimations .cb-slideshow li span{opacity: 1;}@media screen and (max-width: 1140px){.cb-slideshow li div h3{font-size: 90px}}@media screen and (max-width: 600px){.cb-slideshow li div h3{font-size: 80px}}/* General CSS*/body{background: #DCDCDC;}.wrapper{width: 92.72727272727273%; margin: 0 auto;}header ul.social li a,.main .work a .caption,header nav ul li a{transition:all .1s linear; -webkit-transition:all .1s linear; -moz-transition:all .1s linear; -o-transition:all .1s linear;}.clearfix:before, .clearfix:after{content: " "; display: table;}.clearfix:after{clear: both;}.clearfix{*zoom: 1;}/* Main */.main{padding: 0 auto; width: 100%; height: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; z-index: 55; background: #DCDCDC; clear: both;}/* Home/portfolio */.main .work{display: block; width: 33.33333333333333%; height: auto;margin-bottom:-10px; float: left; position: relative; overflow: hidden;}/*------------------------------------------------------------------------------------------------------*//*2019 CSS*/.BabyDRAWINGS{margin-top: -150px;}.IMG_Under{width: 50%;height: auto;position: center;margin-top: 10px;}.PRINT{margin-top: -150px;}.DIGITAL{margin-top: -150px;}.WEB{margin-top: -150px;}/*-------------------------------------------------------------------------------------------------------*/.main .work .media{width: 100%; vertical-align: middle;}.main .work .caption{position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; background: #ffffff; opacity: 0;}.main .work:hover .caption{opacity: 0.8;}.work .caption .work_title{display: block; width: 100%; position: absolute; text-align: center; top: 50%; margin-top: -40px;}.main .work .caption h1{position: relative; display: inline-block; max-width: 90%; padding: 20px 0; z-index: 77; color: #454545; font-family: "Merriweather", serif; font-size: 16px; letter-spacing: .5px; border-bottom: 1px solid #bfbbbb; border-top: 1px solid #bfbbbb;}/* Tooltip */.tooltip{display: block; padding: 7px 10px; background: #454545; color: #0907B4; font-family: "raleway-regular", arial; font-size: 12px; position: absolute; white-space: nowrap; z-index: 999; opacity: 0; text-align: center; letter-spacing: .5px;}.tooltip:after{content: ''; width: 0px; height: 0px; border-style: solid; border-width: 3px 3px 0 3px; border-color: #454545 transparent transparent transparent; display: block; text-align: center; position: absolute; bottom: -3px; left: 50%; margin-left: -3px;}/* Responsive code *//* min-width: 1170px */@media only screen and (min-width: 1170px){.cd-nav .cd-navigation-wrapper{padding: 62px 20%;}.cd-nav-trigger{top: 40px;}.cd-nav .cd-navigation-wrapper::after{clear: both; content: ""; display: table;}.cd-nav .cd-half-block{width: 50%; float: left;}.cd-nav .cd-primary-nav{margin-top: 0;}.cd-nav h2{font-size: 1.5rem; margin-bottom: 5.6em;}.cd-nav .cd-primary-nav li{margin: 2em 0;}.cd-nav .cd-primary-nav a{font-size: 4.4rem;}.cd-nav .cd-contact-info{margin-top: 120px; text-align: right;}.cd-nav .cd-contact-info li{margin-bottom: 2.4em;}.cd-nav .cd-contact-info li, .cd-nav .cd-contact-info a, .cd-nav .cd-contact-info span{font-size: 2rem;}}/* Header */@media (min-width:1099px){header{display: block; position: fixed; top: 0; left: 0; width: 250px; min-height: 100%; padding: 0 0 0 50px; background: #ffffff; float: left; overflow: hidden; z-index: 9999;}header .logo{margin-top: 100px;}header nav ul{display: block; overflow: hidden; margin-top: 100px; list-style: none;}header nav ul li{display: block; margin-bottom: 30px;}header nav ul li a{color: #454545; font-family: "raleway-regular", arial; font-size: 14px; text-decoration: none; letter-spacing: 1px;}header nav ul li a:hover, header nav ul li a.selected{color: #969595;}header .footer{position: absolute; bottom: 50px;}header ul.social{list-style: none; margin-bottom: 5px;}header ul.social li{display: block; float: left; position: relative; margin: 0 15px 15px 0;}header ul.social li a{display: block; width: 30px; height: 30px; background: url('../img/sm.png') no-repeat; background-position: 0 0;}header ul.social li a:hover{background: url('../img/sm_hover.png') no-repeat;}header ul.social li a.fb, header ul.social li a.fb:hover{background-position: 0 0;}header ul.social li a.google, header ul.social li a.google:hover{background-position: -31px 0;}header ul.social li a.behance, header ul.social li a.behance:hover{background-position: -62px 0;}header ul.social li a.twitter, header ul.social li a.twitter:hover{background-position: -93px 0;}header ul.social li a.dribble, header ul.social li a.dribble:hover{background-position: -124px 0;}header ul.social li a.rss, header ul.social li a.rss:hover{background-position: -155px 0;}header .rights p{color: #454545; font-family: "raleway-regular", arial; font-size: 11px; letter-spacing: 1px; line-height: 18px;}header .rights a{font-family: "raleway-bold", arial; font-weight: bold; text-decoration: none;}#menu_icon, .close_menu{display: none;}}/* max-width:1099px */@media (max-width:1099px){#menu_icon, .close_menu, .show_menu{display: block;}.show_menu{display: block;}.main .work{width: 50%;}.main{width: 100%; position: relative; padding-left: 0;}main h1{font-size: 4.6rem; margin-bottom: 1em; text-align: left;}#map{margin: 0!important;}}/* max-width:1099px *//* min-width: 768px */@media only screen and (min-width: 768px){main{padding: 250px 10%;}main h1{font-size: 68px;}main p{font-size: 2rem;}}/* min-width: 768px *//* min-width: 768px */@media only screen and (min-width: 551px){main{padding: 250px 10%;}.main .work{width: 100%;}/*---------------------- Moving Christopher to the LEFT--------------- */ main h1{font-size: 5.9rem; margin-bottom: 1.5em; margin-top: 10.6rem; line-height: 70px; text-align: left;}h2{font-size: 4.9rem; margin-top: -500px;}h3{font-size: 1.4rem;}}/* min-width: 768px */.LOGO{position: fixed; z-index: 3; right: 5%; top: 20px; height: 150px; width: 150px;}/* max-width:550px */@media (max-width:550px){.main .work{width: 100%;}/*------------------------------------------------------------------------------------------------------*//*2019 MOBILE CSS*/.BabyDRAWINGS{margin-top: 50px;}.LOGO{position: fixed; z-index: 3; right: 5%; top: 20px; height: 100px; width: 100px;}.PRINT{margin-top: 130px;}.DIGITAL{margin-top: 130px;}.IMG_Under{width: 90%;height: auto;}main h1{font-family: "Montserrat", sans-serif; font-weight:bold; font-size: 3.6rem; color: #000000; line-height:38px; text-align:left;margin-top: 110px;margin-left: 20px;}main h2{font-family: "Montserrat", sans-serif; font-weight:400;font-size: 29px; color: #030303; line-height:normal; text-align:left;margin-top: -41px; margin-left: 22px;}main h3{font-family: "Montserrat", sans-serif; font-weight:400;font-size: 13px; color: #030303; line-height:normal; text-align:left;margin-top: 5px; margin-left: 24px;}main p{font-size: 1.7rem; max-width: 90%;line-height: 27px;}}/* max-width:550px */