.color-tool-header-wrapper{position:relative;height:100vh;overflow:hidden;}.color-tool-header{position:absolute;top:0;left:0;right:0;bottom:0;text-align:center;}.color-tool-header-start{position:absolute;width:100%;height:175px;left:0;right:0;bottom:0;font-size:26px;padding-top:55px;}.color-tool-header-start i{display:block;font-size:42px;opacity:0.6;transition:all ease 0.3s;}.color-tool-header-start:hover,.color-tool-header-start:focus{color:#fff;text-decoration:none;}.color-tool-header-start:hover i,.color-tool-header-start:focus i{padding-top:10px;opacity:1;}.color-tool-section-header{text-align:center;font-size:42px;padding:75px 0 90px;}.color-tool-section-header-number{font-size:32px;font-weight:700;margin-bottom:20px;}.color-tool-section-header-image{padding-top:60px;}.color-tool-section-header-image img{max-width:100%;height:auto;}#color-tool-type-section{background-color:#e8e8e8;}.color-tool-type-wrapper{max-width:1499px;margin:0 auto;text-align:center;}.color-tool-type{display:inline-block;margin:15px;height:425px;width:450px;box-shadow:0 0 25px rgba(0,0,0,0.25);position:relative;opacity:0.5;background-color:#fff;}.color-tool-type:focus,.color-tool-type:hover,.color-tool-type.selected {opacity:1;}.color-tool-type-image-wrapper{height:280px;}.color-tool-type-image{max-height:100%;max-width:100%;width:100%;height:auto;}.color-tool-type-title{font-size:32px;font-weight:700;}.color-tool-type-year{font-size:20px;font-weight:700;color:#7e7e7e;}.color-tool-select{position:absolute;left:0;right:0;bottom:0;height:60px;line-height:60px;background-color:#57885E;color:#fff;font-weight:700;display:none;}.color-tool-select:hover,.color-tool-select:focus{color:#fff;}.color-tool-type.selected .color-tool-select,.color-tool-palette.selected .color-tool-select{display:block;}.color-tool-navigation{padding:60px 0;}.color-tool-navigation-button{display:block;margin:0 auto;width:400px;height:90px;border-radius:45px;padding:30px 45px;font-size:28px;line-height:30px;}.color-tool-navigation-button:hover,.color-tool-navigation-button:focus{color:#fff;box-shadow:0 0 15px rgba(0,0,0,0.25);}.color-tool-navigation-button.disabled{cursor:not-allowed;background-color:#95989A;color:#eee;}.color-tool-navigation-button:after{display:table;content:" ";clear:both;float:none;}.color-tool-navigation-button > i{float:right;}#color-tool-palette-section{background-color:#F0EFEF;display:none;}.color-tool-palette{margin-bottom:30px;box-shadow:0 0 20px rgba(0,0,0,0.25);background-color:#fff;text-align:center;height:350px;overflow:hidden;position:relative;opacity:0.5;}.color-tool-palette:hover,.color-tool-palette.selected{opacity:1;}.color-tool-palette-title{font-size:28px;font-weight:700;padding:30px 15px 25px;}.color-tool-palette-colors{padding:35px 30px 25px;background-color:#EDEDED;}.color-tool-palette-color{display:inline-block;margin:10px;}.color-tool-palette-color > div{width:50px;height:50px;margin-bottom:10px;}.color-tool-palette-desc{padding:30px 15px;font-size:22px;}#color-tool-result-section{background-color:#F9F9F9;display:none;}.color-tool-result-wrapper{padding:60px 0;}.color-tool-result-header{position:relative;}.color-tool-result-menu{position:absolute;top:90px;right:90px;}.color-tool-result-menu > a{display:block;background-color:#Fff;border:1px solid #95989A;width:130px;height:50px;color:#6F6F6F;margin-bottom:6px;line-height:50px;text-align:right;padding:0 10px;}.color-tool-result-menu > a:hover,.color-tool-result-menu > a:focus{text-decoration:none;color:#000;background-color:#eee;}.color-tool-result-menu > a > i{color:#444;font-size:21px;float:left;height:50px;line-height:50px;}.color-tool-result-color-item{margin-bottom:30px;box-shadow:0 0 10px rgba(0,0,0,0.25);font-size:22px;font-weight:700;}.color-tool-result-color-title{padding:15px 25px;}.color-tool-result-color{height:1px;width:100%;border-bottom-width:115px;border-bottom-style:solid;}.color-tool-result-color-code{font-size:18px;font-weight:normal;padding:25px;}.color-tool-result-color-help a{color:#6f6f6f;border-bottom:1px solid #6f6f6f;}.color-tool-result-color-help a:hover,.color-tool-result-color-help a:focus{color:#6f6f6f;border-bottom:3px solid #6f6f6f;text-decoration:none;}@media only screen and (max-width:991px){.color-tool-result-menu{top:-45px;right:15px;}}