body, html{ font: normal 16px/1.6 'Open Sans', helvetica, arial, sans-serif; background-color: #191919; color: #8e8e8e; border:0; padding: 0; border: 0; } h1, h2, h3{ font-family: 'Quicksand', helvetica, arial, sans-serif; font-weight: normal; } h2{ margin: 1em 0; } p{ margin: 1em 0; } a{ color: #eee; } a:hover, a:focus{ color: #fff; } .navbar{ font: normal 1em 'Quicksand', helvetica, arial, sans-serif; overflow: visible; margin-bottom: 0; } .navbar-brand{ font-size: 1.3em; line-height: 3.2em; } .navbar-brand img{ display: inline-block; width: 1.8em; height: auto; margin-top: -0.5em; } .social{ margin-left: 2em; } .social a{ margin: 0 5px; cursor: pointer; } .social img{ width: auto; height: 1em; opacity: 0.5; margin-top: -0.3em; } .social a:hover img{ opacity: 1; } /* navbar */ .navbar-default { background-color: #111; border-color: #111; height: 6em; } .navbar-static-top { min-height: 4em; position: relative; z-index: 2; } .navbar-sub{ position: relative; z-index: 1; } .navbar-nav > li > a { padding: 0 2em; line-height: 6em; } .navbar-nav.social > li > a { padding: 0 0.5em; } .navbar-nav > li > a, .navbar-nav.social > li > a { transition: padding 1s, width 1s; } /* Title */ .navbar-default .navbar-brand { color: #c3c3c3; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #fff; } /* Link */ .navbar-default .navbar-nav > li > a { color: #c3c3c3; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #fff; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #c3c3c3; background-color: #111; border-bottom: 1px solid #666; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #c3c3c3; background-color: #111; } /* Caret */ .navbar-default .navbar-nav > .dropdown > a .caret { border-top-color: #333; border-bottom-color: #333; } .navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret { border-top-color: #444; border-bottom-color: #444; } .navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret { border-top-color: #333; border-bottom-color: #333; } /* Mobile version */ .navbar-default .navbar-toggle { border-color: #222; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #222; } .navbar-default .navbar-toggle .icon-bar { background-color: #111; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #c3c3c3; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #e0e0e0; } } /* colors */ /* 5 column grid */ .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; padding-right: 1em; padding-left: 0; } .col-xs-25, .col-sm-25, .col-md-25, .col-lg-25 { position: relative; padding-right: 3em; padding-left: 0; } .off-md-15{ margin-left: 20%; } .col-xs-35, .col-sm-35, .col-md-35, .col-lg-35 { position: relative; padding-right: 0; padding-left: 0; } .col-xs-45, .col-sm-45, .col-md-45, .col-lg-45 { position: relative; padding-right: 0; padding-left: 0; } .col-xs-25 { width: 40%; float: left; } .col-xs-35 { width: 60%; float: left; } .col-xs-45 { width: 80%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } .col-sm-25 { width: 40%; float: left; } .col-sm-35 { width: 60%; float: left; } .col-sm-45 { width: 80%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } .col-md-25 { width: 40%; float: left; } .col-md-35 { width: 60%; float: left; } .col-md-45 { width: 80%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } .col-lg-25 { width: 40%; float: left; } .col-lg-35 { width: 60%; float: left; } .col-lg-45 { width: 80%; float: left; } } #main_wrapper, #image_wrapper{ padding-top: 20.5%; height: 2.6em; overflow: visible; position: relative; margin-top: 4em; margin-bottom: 3em; font: normal 1em 'Quicksand', helvetica, arial, sans-serif; } #main_wrapper .randomize{ margin-top: 4.3em; transition: margin 1s; } .row, .colors{ margin: 0; } #main_wrapper .colors, #image_wrapper .colors{ position: absolute; top: 0; z-index: 10; width: 100%; } #main_wrapper.active{ position: relative; } #main_wrapper.active .colors{ position: fixed; top: 0; width: inherit; margin-left: -15px; padding-right: 30px; z-index: 1002; } #main_wrapper.active .colors .color{ padding-top: 20%; } #main_wrapper.active .randomize{ margin-top: 1em; } #main_wrapper_bg{ opacity: 0; transition: opacity 1s, padding 1.5s; height: inherit; padding-bottom: 15em; position: absolute; top: 0; } #main_wrapper.active #main_wrapper_bg{ opacity: 1; width: 100%; height: inherit; padding-bottom: 11em; background-color: #111; position: fixed; top: 0; left: 0; z-index: 1001; } #main_wrapper .color{ cursor: pointer; } #main_wrapper .color:hover{ filter: brightness(110%); } .color_wrapper{ padding: 0; width: 20%; float: left; } .color{ width: 100%; padding-top: 75%; background-color: #000; transition: padding-top 0.5s; position: relative; overflow: hidden; } .color_tools{ padding-right: 0.5em; padding-bottom: 0.2em; float: left; width: 100%; color: #efefef; } .color_tools h3{ float: left; margin-right: 0.5em; font-size: 1.2em; } .color_tools .btn{ float: left; margin-top: 1.1em; opacity: 0.2; transition: opacity 0.5s; border-color: transparent; } .color_wrapper .btn:hover, .btn.active{ opacity: 1; } .btn-circle { display: inline-block; width: 2em; height: 2em; position: relative; margin-right: 0.5em; background-position: 50%; text-align: center; padding: 0; line-height: 2em; border-radius: 1em; background: transparent; border: 0; cursor: pointer; } .btn.lock{ background: transparent url(img/lock.svg) no-repeat; background-position: 50%; background-size: 1.2em; margin-right: 0.1em; } .btn.edit{ background: transparent url(img/edit.svg) no-repeat; background-position: 50%; background-size: 1.2em; margin-right: 0; } .btn.left{ background: transparent url(img/left.svg) no-repeat; background-position: 50%; background-size: 1.2em; margin-right: 0; } .btn.right{ background: transparent url(img/right.svg) no-repeat; background-position: 50%; background-size: 1.2em; margin-right: 0; } .btn.blog{ background: transparent url(img/align.svg) no-repeat; background-position: 50%; background-size: 1.2em; } .btn.logo{ background: transparent url(img/logo_small.svg) no-repeat; background-position: 50%; background-size: 1.6em; } .btn.active{ border-color: #4EB3F3; background-color: #4EB3F3; } .btn.lock.active{ background: #4EB3F3 url(img/locked.svg) no-repeat; background-position: 50%; background-size: 1.2em; } hr { height: 1px; background-color:#444; border: none; margin-top: 4em; margin-bottom: 4em; } /* buttons */ .btn-default{ background-color: #bbb; color: #000; border: 0; border-radius: 2em; padding: 0.7em 2em; cursor: pointer; } .disabled{ background-color: #333; color: #222; } .randomize, .upload{ margin-top: 0.2em; margin-bottom: 0.5em; } i{ margin-right: 0.5em; } .color-progress i { -webkit-animation: glyphicon-spin-r 1s infinite linear; animation: glyphicon-spin-r 1s infinite linear; } @-webkit-keyframes glyphicon-spin-r { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes glyphicon-spin-r { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } /* expander */ .colortitle{ font-size: 1.3em; background-color: #111; height: 4em; line-height: 4em; margin: 2em 0 0 0; padding: 0; } .colortitle span{ float: left; width: 50%; height: 4em; overflow: hidden; text-overflow: ellipsis; } .colortitle img{ float: left; width: 2em; height: 2em; border-radius: 2em; margin: 1em 1em 0 2em; } .colortitle .btn{ opacity: 0.5; width: 2em; height: 2em; font-size: 1em; background-color: #111; transition: opacity 1s; float: right; margin: 1em 2em 0 0; line-height: 1.8em; } .colortitle .btn:hover{ opacity: 1; color: #fff; background-color: #333; } .info{ font-size: 1em; line-height: 1.5em; background-color: #111; float: left; width: 100%; overflow: hidden; transition: padding-top 0.5s, height 0.5s, padding-bottom 0.5s; padding: 0 32% 0 8%; height: 0; } .info.active{ padding: 1em 32% 3em 8%; height: auto; } .sample{ width: 100%; height: auto; margin: 1.3em 0 1em 0; } /* picker */ #picker{ width: 410px; margin-left: -210px; height: 265px; position: fixed; z-index: 20; left: -9999px; border: 0; background-color: #111; opacity: 0; transition: opacity 0.5s; } #picker.active{ opacity: 1; z-index: 2000; } #picker .bg{ border: 0; } #picker input{ background: transparent; border: 1px solid #999; color: #fff; font-family: 'Quicksand', helvetica, arial, verdana, sans-serif; font-size: 1em; padding: 0.2em 10px; width: 95px; } #picker .currentColor{ width: 6em; border: 0; border-radius: 0; } .swipe{ position: absolute; top: 0; left: 0; width: 0; height: 0; border: 0 solid transparent; transition: border-width 1s; } .footer{ padding-bottom: 10em; } .footer a{ display: inline-block; width: 8em; margin: 0 3em 2em 0; } #mc_embed_signup{ margin: 7em 0 2em 0; } #tutorial_samples{ padding: 5em 3em 0 0; } /* blog */ .image, .image img{ width: 100%; } .image img{ height: auto; } .post{ padding-right: 0; margin: 3em 0 2em 0; } .post-image{ box-sizing: border-box; padding-right: 5em; margin: 3em 0 2em 0; } .post p{ margin: 0 0 2em 0; } .navbar-sub{ height: auto; padding: 0.6em 0; min-height: 3em; background-color: #222; } .navbar-sub .navbar-nav > li > a { padding: 0 2em; height: 2em; line-height: 2em; border-radius: 2em; margin: 0; border: 0; overflow: hidden; text-overflow: ellipsis; } .navbar-sub .navbar-nav > .active > a, .navbar-sub .navbar-nav > a:hover{ border: 0; } .row.index1{ margin-top: 3em; } .row.index1 h1{ margin-top: 0; /* for alignment */ } .intro, .intro-second{ position: relative; z-index: 10; } /* breakpoints */ /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) { body{ font-size: 14px; } .color_tools h3{ font-size: 1.1em; margin-top: 1.4em; } #main_wrapper .randomize{ margin-top: 2.8em; } } /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { .navbar-nav > li > a { padding: 0 1.5em; } .color_tools h3{ display: none; } #main_wrapper.active .colors{ width: 720px; padding: 0; } .color_tools .btn, .color_tools .btn.active{ width: 24%; height: 0; padding-top: 24%; overflow: hidden; border-radius: 3em; background-size: 1.5em; margin: 0.7em 0 0 0; } #main_wrapper .randomize{ margin-top: 1.5em; } .col-md-25{ margin-top: 1em; } .off-md-15{ margin-left: 0; } .intro{ margin-top: 5em; } #mc_embed_signup{ margin-top: 2em; } #tutorial_samples{ padding: 2em 3em 0 0; } .row.index1{ margin-top: 1em; } } /* Small Devices, Tablets */ @media only screen and (max-width : 768px) { .navbar-header { float: left; } .navbar-nav { float: right; margin: 0; } .navbar-nav > li{ float: left; margin: 0; } .navbar-nav i{ margin: 0; } .navbar-nav>li>a>span{ display: none; } .navbar-sub .navbar-nav >li>a>span{ display: inline; } .navbar-nav > li > a, .navbar-nav.social > li > a { padding: 0 1.5em; margin: 0; } .info.active{ padding: 1em 8% 3em 8%; } .container{ padding-left: 30px; padding-right: 30px; } #main_wrapper.active .colors{ width: 100%; margin-left: -30px; padding-right: 60px; } #tutorial_samples{ padding: 1em 0 0 0; } } @media only screen and (max-width : 650px) { body{ font-size: 16px; } .navbar-nav > li > a, .navbar-nav.social > li > a { padding: 0 0.8em; } .color_tools .btn, .color_tools .btn.active{ width: 3em; height: 3em; border-radius: 3em; background-size: 1.5em; margin-top: 0.5em; margin-bottom: -1em; } .container{ padding-left: 40px; padding-right: 40px; } #main_wrapper.active .colors{ width: 100%; margin-left: -40px; padding-right: 80px; } .col-md-25{ padding-right: 0; } .intro{ margin-top: 7em; } #picker.active{ left: 50% !important; top: 5em !important; } } @media only screen and (max-width : 560px) { .color_tools{ float: left; width: 100%; } .color_tools .btn, .color_tools .btn.active{ width: 49%; height: 0; padding-top: 49%; border-radius: 2.5em; background-size: 1.4em; margin: 0.5em 0 -0.5em 0; } #main_wrapper.active .color_tools{ display: none; } #main_wrapper.active .colors .color{ padding-top: 40%; } #main_wrapper.active .randomize{ margin-top: 5%; } hr{ margin: 2em 0; } .colortitle{ margin-top: 2em; font-size: 1em; } #main_wrapper{ margin-top: 2em; } #main_wrapper.active #main_wrapper_bg{ padding-bottom: 23%; } .intro{ margin-top: 6em; } .post-image{ padding-right: 0; } } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { .navbar-brand span{ display: none; } .navbar-nav > li > a, .navbar-nav.social > li > a { padding: 0 0.9em; } #main_wrapper .randomize{ width: 100%; } #main_wrapper.active .randomize{ margin-top: 5%; } #main_wrapper.active #main_wrapper_bg{ padding-bottom: 24%; } .navbar-sub .navbar-nav > li{ float: right; width: 85%; white-space: nowrap; margin: 0.5em 0; } .colortitle img{ margin-left: 1em; } } /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) { .navbar-nav > li > a, .navbar-nav.social > li > a { padding: 0 0.7em; } }