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