848 lines
16 KiB
CSS
848 lines
16 KiB
CSS
.background {
|
||
background: #0d1011 url("../../media/bg.jpg") no-repeat center fixed;
|
||
background-size: cover;
|
||
left: 0;
|
||
top: 0;
|
||
height: 100vh;
|
||
width: 100vw;
|
||
z-index: -1;
|
||
overflow-x:hidden;
|
||
overflow-y:auto;
|
||
}
|
||
|
||
body{
|
||
-webkit-transition: background 0.2s, color 0.2s;
|
||
transition: background 0.2s, color 0.2s;
|
||
}
|
||
|
||
.daysDiv{
|
||
background:rgba(255, 255, 255, 0.50);
|
||
min-height:330px;
|
||
color:#50514F;padding:5px;
|
||
}
|
||
|
||
body section{
|
||
color:#fff;
|
||
padding:10px 0 80px 0;
|
||
max-width: 100%;
|
||
}
|
||
.paint circle {
|
||
fill-opacity: 0;
|
||
-webkit-transform: scale3d(0,0,1);
|
||
transform: scale3d(0,0,1);
|
||
-webkit-transition: -webkit-transform 0.8s, fill-opacity 0.4s;
|
||
transition: transform 0.8s, fill-opacity 0.4s;
|
||
-webkit-transition-timing-function: ease-out;
|
||
transition-timing-function: ease-out;
|
||
}
|
||
|
||
.paint--active .paint circle {
|
||
fill-opacity: 1;
|
||
-webkit-transform: scale3d(1,1,1);
|
||
transform: scale3d(1,1,1);
|
||
}
|
||
|
||
|
||
.daysDiv:first-child{
|
||
background:rgba(255, 255, 255, 0.70);
|
||
}
|
||
|
||
#searchclear {
|
||
position: absolute;
|
||
right: 265px;
|
||
top: 0;
|
||
bottom: 0;
|
||
height: 20px;
|
||
margin: auto;
|
||
font-size: 1.5em;
|
||
cursor: pointer;
|
||
color: #50514F;
|
||
z-index:9;
|
||
}
|
||
.well{
|
||
background:#fff;
|
||
text-align:left;
|
||
margin-top:10px;
|
||
}
|
||
.well h2{
|
||
color:#50514F;
|
||
}
|
||
|
||
|
||
|
||
.container .input-group{
|
||
margin-bottom:10px;
|
||
}
|
||
|
||
|
||
/* ==== Preloader styles ==== */
|
||
#hola{
|
||
width: 100vw;
|
||
height: 100vh;
|
||
|
||
position: fixed;
|
||
z-index: 999;
|
||
}
|
||
#preloader {
|
||
position:relative;
|
||
width: 80px;
|
||
height: 80px;
|
||
top: 45%;
|
||
margin: 0 auto;
|
||
}
|
||
#preloader span {
|
||
position:absolute;
|
||
border: 8px solid #ffe066;
|
||
border-top: 8px solid transparent;
|
||
border-radius:999px;
|
||
}
|
||
|
||
#preloader span:nth-child(1) {
|
||
width: 80px;
|
||
height: 80px;
|
||
-moz-animation: spin-1 2s infinite linear;
|
||
-o-animation: spin-1 2s infinite linear;
|
||
-webkit-animation: spin-1 2s infinite linear;
|
||
animation: spin-1 2s infinite linear;
|
||
}
|
||
#preloader span:nth-child(2){
|
||
top: 20px;
|
||
left: 20px;
|
||
width:40px;
|
||
height:40px;
|
||
animation: spin-2 1s infinite linear;
|
||
}
|
||
@keyframes spin-1 {
|
||
0% {transform: rotate(360deg); opacity: 1;}
|
||
50% {transform: rotate(180deg); opacity: 0.5;}
|
||
100% {transform: rotate(0deg); opacity: 1;}
|
||
}
|
||
@keyframes spin-2 {
|
||
0% {transform: rotate(0deg); opacity: 0.5;}
|
||
50% {transform: rotate(180deg); opacity: 1;}
|
||
100% {transform: rotate(360deg); opacity: 0.5;}
|
||
}
|
||
|
||
|
||
|
||
|
||
.checkout__icon {
|
||
position: absolute;
|
||
top: .75em;
|
||
left: 1.5em;
|
||
fill: #4e4e4f;
|
||
}
|
||
|
||
.checkout__button:hover{
|
||
text-decoration:none;
|
||
}
|
||
|
||
.checkout__count {
|
||
position: absolute;
|
||
top: 1.5em;
|
||
right: 1.5em;
|
||
padding: 0.5em;
|
||
width: 6em;
|
||
height: 2em;
|
||
border: 2px solid #4e4e4f;
|
||
border-radius: 5%;
|
||
font-weight: bold;
|
||
font-family: 'Maven Pro', sans-serif;
|
||
line-height: 0.9;
|
||
}
|
||
|
||
.checkout {
|
||
position: absolute;
|
||
left: 50%;
|
||
margin: 0 auto;
|
||
margin-left: -4.5em;
|
||
width: 9em;
|
||
height: 3em;
|
||
font-weight: 400;
|
||
font-family: 'Maven Pro', sans-serif;
|
||
-webkit-transform-origin: 50% 0%;
|
||
transform-origin: 50% 0%;
|
||
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
|
||
transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
.checkout--active {
|
||
/* center on screen (padding of parent, half of summary height, half of viewport height) */
|
||
-webkit-transform: translate3d(0, 15px, 0) translate3d(0, 30vh, 0) translate3d(0, -50vh, 0);
|
||
transform: translate3d(0, 15px, 0) translate3d(0, 30vh, 0) translate3d(0, -50vh, 0);
|
||
}
|
||
|
||
a.checkout__button {
|
||
position: relative;
|
||
z-index: 10;
|
||
display: block;
|
||
margin: 0 auto;
|
||
height: 100%;
|
||
border-radius: 30px;
|
||
color: #fff;
|
||
line-height: 3.2em;
|
||
font-size:.95em;
|
||
width:100%;
|
||
-webkit-transition: background-color 0.6s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
|
||
transition: background-color 0.6s cubic-bezier(0.7, 0, 0.3, 1), transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
|
||
}
|
||
|
||
a.checkout__button:hover,
|
||
a.checkout__button:focus {
|
||
outline: none;
|
||
color: #fff;
|
||
}
|
||
|
||
.checkout--active a.checkout__button {
|
||
background-color: #3f3d3d;
|
||
-webkit-transform: perspective(1000px) translate3d(0, -2.5em, 0);
|
||
transform: perspective(1000px) translate3d(0, -2.5em, 0);
|
||
}
|
||
|
||
.checkout__text-inner {
|
||
|
||
}
|
||
|
||
.checkout__final-text,
|
||
.checkout__initial-text {
|
||
-webkit-transition: opacity 0.6s cubic-bezier(0.7, 0, 0.3, 1);
|
||
transition: opacity 0.6s cubic-bezier(0.7, 0, 0.3, 1);
|
||
}
|
||
|
||
.checkout--active .checkout__initial-text {
|
||
opacity: 0
|
||
}
|
||
|
||
.checkout__final-text {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 100%;
|
||
opacity: 0;
|
||
}
|
||
|
||
.checkout--active .checkout__final-text {
|
||
opacity: 1;
|
||
}
|
||
|
||
.checkout__order,
|
||
.checkout__order::before {
|
||
position: absolute;
|
||
bottom: 0%;
|
||
left: 50%;
|
||
-webkit-transform: translate3d(-50%, 0%, 0);
|
||
transform: translate3d(-50%, 0%, 0);
|
||
}
|
||
|
||
.checkout__order {
|
||
overflow: hidden;
|
||
min-width: 320px;
|
||
max-width: 700px;
|
||
width: 95vw;
|
||
height: 60vh;
|
||
text-align: right;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.checkout--active .checkout__order {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.checkout__order::before {
|
||
content: '';
|
||
z-index: 0;
|
||
width: 9em;
|
||
height: 3em;
|
||
border-radius: 10px;
|
||
background: #4e4e4f;
|
||
-webkit-transition: width 0.6s cubic-bezier(0.7, 0, 0.3, 1), height 0.6s cubic-bezier(0.7, 0, 0.3, 1);
|
||
transition: width 0.6s cubic-bezier(0.7, 0, 0.3, 1), height 0.6s cubic-bezier(0.7, 0, 0.3, 1);
|
||
}
|
||
|
||
.checkout--active .checkout__order::before {
|
||
width: 100%;
|
||
height: 100%;
|
||
-webkit-transition-delay: 0s;
|
||
transition-delay: 0s;
|
||
}
|
||
|
||
.checkout__order-inner {
|
||
position: relative;
|
||
|
||
}
|
||
|
||
.checkout__close {
|
||
position: absolute;
|
||
top: 1.5em;
|
||
right: 1.5em;
|
||
overflow: hidden;
|
||
width: 40px;
|
||
height: 40px;
|
||
border: none;
|
||
background: transparent;
|
||
color: transparent;
|
||
text-indent: 100%;
|
||
opacity: 0;
|
||
backface-visibility: hidden;
|
||
}
|
||
|
||
.checkout__close:focus {
|
||
outline: none;
|
||
}
|
||
|
||
.checkout--active .checkout__close {
|
||
opacity: 1;
|
||
-webkit-transition: opacity 0.8s cubic-bezier(0.7, 0, 0.3, 1) 0.015s;
|
||
transition: opacity 0.8s cubic-bezier(0.7, 0, 0.3, 1) 0.015s;
|
||
}
|
||
|
||
.checkout__close .icon {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
color: #fff;
|
||
text-indent: 0;
|
||
font-size:2em;
|
||
}
|
||
|
||
.checkout__close:hover .icon {
|
||
color: #e48895;
|
||
}
|
||
|
||
.checkout__summary {
|
||
margin: 0;
|
||
width: 100%;
|
||
color: #fff;
|
||
text-align: center;
|
||
font-size: 1.15em;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.checkout__summary div {
|
||
opacity: 0;
|
||
-webkit-transition: -webkit-transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.7, 0, 0.3, 1);
|
||
-moz-transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.7, 0, 0.3, 1);
|
||
-o-transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.7, 0, 0.3, 1);
|
||
transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.7, 0, 0.3, 1);
|
||
}
|
||
|
||
|
||
|
||
.checkout--active .checkout__summary div {
|
||
opacity: 1;
|
||
-webkit-transform: perspective(1000px) translate3d(0, 0, 0);
|
||
-moz-transform: perspective(1000px) translate3d(0, 0, 0);
|
||
-ms-transform: perspective(1000px) translate3d(0, 0, 0);
|
||
-o-transform: perspective(1000px) translate3d(0, 0, 0);
|
||
transform: perspective(1000px) translate3d(0, 0, 0);
|
||
-webkit-transition: -webkit-transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.8s cubic-bezier(0.7, 0, 0.3, 1);
|
||
-moz-transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.8s cubic-bezier(0.7, 0, 0.3, 1);
|
||
-o-transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.8s cubic-bezier(0.7, 0, 0.3, 1);
|
||
transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.8s cubic-bezier(0.7, 0, 0.3, 1);
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
.checkout__action {
|
||
padding: 0;
|
||
border: none;
|
||
background: none;
|
||
}
|
||
|
||
.checkout__action:focus {
|
||
outline: none;
|
||
}
|
||
|
||
.checkout__action .icon {
|
||
color: #e48895;
|
||
}
|
||
|
||
@media screen and (max-width:26em) {
|
||
.checkout--active {
|
||
-webkit-transform: translate3d(0, 15px, 0);
|
||
transform: translate3d(0, 15px, 0);
|
||
}
|
||
|
||
.checkout__order::before {
|
||
border-radius: 0
|
||
}
|
||
|
||
.checkout__summary {
|
||
margin-top: 2em
|
||
}
|
||
|
||
.checkout__order-inner {
|
||
padding: 1em 1.75em
|
||
}
|
||
|
||
.checkout__order {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
}
|
||
|
||
.checkout__summary th:last-child,
|
||
.checkout__summary td:last-child {
|
||
padding-left: 10px
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.dummy-browser {
|
||
position: relative;
|
||
border-top: 30px solid rgba(181, 183, 188, 0.6);
|
||
border-bottom: 10px solid rgba(181, 183, 188, 0.6);
|
||
border-radius: 10px 10px 0 0;
|
||
}
|
||
|
||
.dummy-browser--inner {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.color-1 .dummy-browser--inner {
|
||
background: rgb(236,236,236);
|
||
}
|
||
|
||
.color-2 .dummy-browser {
|
||
background: rgb(69, 66, 66);
|
||
}
|
||
|
||
|
||
|
||
.dummy-fixed {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
padding: 15px;
|
||
width: 100%;
|
||
height: calc(3em + 30px);
|
||
background: #E2E0D3;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Related demos */
|
||
.content--related {
|
||
padding-bottom: 10em;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.media-item {
|
||
display: inline-block;
|
||
padding: 1em;
|
||
vertical-align: top;
|
||
-webkit-transition: color 0.3s;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.media-item__img {
|
||
opacity: 0.8;
|
||
max-width: 100%;
|
||
-webkit-transition: opacity 0.3s;
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
.media-item:hover .media-item__img,
|
||
.media-item:focus .media-item__img {
|
||
opacity: 1;
|
||
}
|
||
|
||
.media-item__title {
|
||
margin: 0;
|
||
padding: 0.5em;
|
||
font-size: 1em;
|
||
}
|
||
|
||
@media screen and (max-width: 50em) {
|
||
.codrops-header {
|
||
padding: 3em 10% 4em;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 40em) {
|
||
.codrops-header h1 {
|
||
font-size: 2.8em;
|
||
}
|
||
|
||
.dummy-grid--sidebar {
|
||
padding: 1em;
|
||
}
|
||
|
||
.dummy-sidebar {
|
||
position: static;
|
||
z-index: 100;
|
||
width: 100%;
|
||
}
|
||
|
||
.dummy-sidebar__item {
|
||
display: none;
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
.btn:hover,
|
||
.btn:focus,
|
||
.btn:active{
|
||
outline: 0 !important;
|
||
}
|
||
/* entire container, keeps perspective */
|
||
.card-container {
|
||
-webkit-perspective: 800px;
|
||
-moz-perspective: 800px;
|
||
-o-perspective: 800px;
|
||
perspective: 800px;
|
||
margin-bottom: 30px;
|
||
}
|
||
/* flip the pane when hovered */
|
||
.card-container:not(.manual-flip):hover .card,
|
||
.card-container.hover.manual-flip .card{
|
||
-webkit-transform: rotateY( 180deg );
|
||
-moz-transform: rotateY( 180deg );
|
||
-o-transform: rotateY( 180deg );
|
||
transform: rotateY( 180deg );
|
||
}
|
||
|
||
|
||
.card-container.static:hover .card,
|
||
.card-container.static.hover .card {
|
||
-webkit-transform: none;
|
||
-moz-transform: none;
|
||
-o-transform: none;
|
||
transform: none;
|
||
}
|
||
/* flip speed goes here */
|
||
.card {
|
||
-webkit-transition: -webkit-transform .5s;
|
||
-moz-transition: -moz-transform .5s;
|
||
-o-transition: -o-transform .5s;
|
||
transition: transform .5s;
|
||
-webkit-transform-style: preserve-3d;
|
||
-moz-transform-style: preserve-3d;
|
||
-o-transform-style: preserve-3d;
|
||
transform-style: preserve-3d;
|
||
position: relative;
|
||
}
|
||
|
||
/* hide back of pane during swap */
|
||
.front, .back {
|
||
-webkit-backface-visibility: hidden;
|
||
-moz-backface-visibility: hidden;
|
||
-o-backface-visibility: hidden;
|
||
backface-visibility: hidden;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: #FFF;
|
||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
|
||
}
|
||
|
||
/* front pane, placed above back */
|
||
.front {
|
||
z-index: 2;
|
||
}
|
||
|
||
/* back, initially hidden pane */
|
||
.back {
|
||
-webkit-transform: rotateY( 180deg );
|
||
-moz-transform: rotateY( 180deg );
|
||
-o-transform: rotateY( 180deg );
|
||
transform: rotateY( 180deg );
|
||
z-index: 3;
|
||
}
|
||
|
||
.back .btn-simple{
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 4px;
|
||
}
|
||
/* Style */
|
||
|
||
|
||
.card{
|
||
background: none repeat scroll 0 0 #FFFFFF;
|
||
border-radius: 4px;
|
||
color: #444444;
|
||
}
|
||
.card-container, .front, .back {
|
||
width: 100%;
|
||
height: 440px;
|
||
border-radius: 4px;
|
||
}
|
||
.card .cover{
|
||
height: 105px;
|
||
overflow: hidden;
|
||
border-radius: 4px 4px 0 0;
|
||
}
|
||
.card .cover img{
|
||
width: 100%;
|
||
}
|
||
.card .user{
|
||
border-radius: 50%;
|
||
display: block;
|
||
height: 120px;
|
||
margin: -55px auto 0;
|
||
overflow: hidden;
|
||
width: 120px;
|
||
}
|
||
.card .user div{
|
||
background: none repeat scroll 0 0 #FFFFFF;
|
||
border: 4px solid #FFFFFF;
|
||
width: 100%;
|
||
height:100%;
|
||
}
|
||
|
||
.card .content{
|
||
background-color: rgba(0, 0, 0, 0);
|
||
box-shadow: none;
|
||
padding: 30px 20px 20px;
|
||
}
|
||
.card .content .main {
|
||
min-height: 160px;
|
||
}
|
||
.card .back .content .main {
|
||
height: 215px;
|
||
}
|
||
.card .name {
|
||
font-size: 22px;
|
||
line-height: 28px;
|
||
margin: 10px 0 0;
|
||
text-align: center;
|
||
text-transform: capitalize;
|
||
}
|
||
.card h5{
|
||
margin: 5px 0;
|
||
font-weight: 400;
|
||
line-height: 20px;
|
||
}
|
||
.card .profession{
|
||
color: #444444;
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
font-size: 14px;
|
||
}
|
||
.card .footer {
|
||
border-top: 1px solid #EEEEEE;
|
||
color: #999999;
|
||
margin: 30px 0 0;
|
||
padding: 10px 0 0;
|
||
text-align: center;
|
||
}
|
||
.card .footer .social-links{
|
||
font-size: 18px;
|
||
}
|
||
.card .footer .social-links a{
|
||
margin: 0 7px;
|
||
}
|
||
.card .footer .btn-simple{
|
||
margin-top: -6px;
|
||
}
|
||
.card .header {
|
||
padding: 15px 20px;
|
||
height: 90px;
|
||
}
|
||
.card .motto{
|
||
border-bottom: 1px solid #EEEEEE;
|
||
color: #999999;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
padding-bottom: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Just for presentation */
|
||
|
||
.title{
|
||
color: #506A85;
|
||
text-align: center;
|
||
font-weight: 300;
|
||
font-size: 44px;
|
||
margin-bottom: 90px;
|
||
line-height: 90%;
|
||
}
|
||
.title small{
|
||
font-size: 17px;
|
||
color: #999;
|
||
text-transform: uppercase;
|
||
margin: 0;
|
||
}
|
||
.space-50{
|
||
height: 50px;
|
||
display: block;
|
||
}
|
||
.space-200{
|
||
height: 200px;
|
||
display: block;
|
||
}
|
||
.white-board{
|
||
background-color: #FFFFFF;
|
||
min-height: 200px;
|
||
padding: 60px 60px 20px;
|
||
}
|
||
.ct-heart{
|
||
color: #F74933;
|
||
}
|
||
|
||
pre.prettyprint{
|
||
background-color: #ffffff;
|
||
border: 1px solid #999;
|
||
margin-top: 20px;
|
||
padding: 20px;
|
||
text-align: left;
|
||
}
|
||
.atv, .str{
|
||
color: #05AE0E;
|
||
}
|
||
.tag, .pln, .kwd{
|
||
color: #3472F7;
|
||
}
|
||
.atn{
|
||
color: #2C93FF;
|
||
}
|
||
.pln{
|
||
color: #333;
|
||
}
|
||
.com{
|
||
color: #999;
|
||
}
|
||
|
||
.btn-simple{
|
||
opacity: .8;
|
||
color: #666666;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.btn-simple:hover,
|
||
.btn-simple:focus{
|
||
background-color: transparent;
|
||
box-shadow: none;
|
||
opacity: 1;
|
||
}
|
||
.btn-simple i{
|
||
font-size: 16px;
|
||
}
|
||
/* Fix bug for IE */
|
||
|
||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||
.front, .back{
|
||
-ms-backface-visibility: visible;
|
||
backface-visibility: visible;
|
||
}
|
||
|
||
.back {
|
||
visibility: hidden;
|
||
-ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67);
|
||
}
|
||
.front{
|
||
z-index: 4;
|
||
}
|
||
.card-container:hover .back{
|
||
z-index: 5;
|
||
visibility: visible;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
/* Customizer */
|
||
.customizer {
|
||
background: #444;
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 0;
|
||
max-height: 100%;
|
||
z-index: 10000;
|
||
padding: 15px 10px;
|
||
border-radius: 0 5px 5px 0;
|
||
-webkit-transform: translate3d(0, -50%, 0);
|
||
transform: translate3d(0, -50%, 0);
|
||
}
|
||
|
||
.color-tool {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
-webkit-flex-direction: column;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.color-tool li {
|
||
width: 30px;
|
||
height: 30px;
|
||
display: block;
|
||
margin: 5px;
|
||
cursor:pointer;
|
||
}
|
||
.color-tool li a{
|
||
display:block;
|
||
width:100%;
|
||
height:100%;
|
||
}
|
||
|
||
.color-1 { background: #50514F; color: #fff;}
|
||
.color-2 { background: #F25F5C; color: #f0f0f0; }
|
||
.color-3 { background: #FFE066; color: #c0c3d5; }
|
||
.color-4 { background: #247BA0; color: #5FA1E0; }
|
||
.color-5 { background: #70C1B3; color: #c1d5c0; }
|
||
.color-6 { background: #47AE73; color: #47AE73; }
|
||
.color-7 { background: #eae7c4; color: #eae7c4; }
|
||
.color-8 { background: #FB6964; color: #FB6964; }
|
||
|
||
|
||
.reset-button {
|
||
background: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
border: none;
|
||
width: 30px;
|
||
height: 30px;
|
||
margin: 0;
|
||
color: transparent;
|
||
font-size: 0px;
|
||
background: url(../img/drop_reset.svg) no-repeat center center;
|
||
background-size: 100%;
|
||
}
|
||
|
||
@media screen and (max-width: 50em) {
|
||
|
||
.customizer {
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 100px;
|
||
padding: 30px 0;
|
||
-webkit-transform: none;
|
||
transform: none;
|
||
border-radius: 0;
|
||
top:80%;
|
||
|
||
}
|
||
.color-tool {
|
||
-webkit-flex-direction: row;
|
||
-ms-flex-direction: row;
|
||
flex-direction: row;
|
||
-webkit-justify-content: center;
|
||
justify-content: center;
|
||
}
|
||
.color-tool li {
|
||
margin: 3px;
|
||
}
|
||
body section{
|
||
|
||
padding:10px 0 160px 0;
|
||
}
|
||
.well{
|
||
|
||
margin-bottom:10px;
|
||
}
|
||
|
||
.btn-block{
|
||
margin-bottom:30px;
|
||
}
|
||
} |