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;
	}
}