You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3220 lines
65 KiB
3220 lines
65 KiB
5 years ago
|
/***
|
||
|
====================================================================
|
||
|
Table of contents
|
||
|
====================================================================
|
||
|
|
||
|
- [0. Reset and Set Defaults]
|
||
|
- [1. Body]
|
||
|
- [2. Wrapper]
|
||
|
- [3. Navigation]
|
||
|
- [4. Inline Wrapper]
|
||
|
- [5. Header]
|
||
|
- [6. main]
|
||
|
- [7. Container]
|
||
|
- [8. Form Elements]
|
||
|
- [9. Accordion]
|
||
|
- [10. Wizards]
|
||
|
- [11. Tab Control]
|
||
|
- [12. Popup]
|
||
|
- [13. Lists]
|
||
|
- [14. Search]
|
||
|
- [15. Divider]
|
||
|
- [16. Posts]
|
||
|
- [17. Profile Page]
|
||
|
- [18. Post Author Page]
|
||
|
- [19. Gallery and Album]
|
||
|
- [20. Contact]
|
||
|
- [21. Product Pages]
|
||
|
- [22. Panel]
|
||
|
- [23. Bouble Menu]
|
||
|
- [24. Page Loader]
|
||
|
- [25. Responsive Media Queries]
|
||
|
- [26. Background Color Helpers]
|
||
|
- [27. Text Helpers]
|
||
|
- [28. Text Animations]
|
||
|
- [29. CUSTOMIZE THE CAROUSEL]
|
||
|
- [30. Home Tabs]
|
||
|
- [31. Content Styles]
|
||
|
- [32. Home Tabs]
|
||
|
|
||
|
***/
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[0. Reset and Set Defaults]
|
||
|
*------------------------------------------------------------------*/
|
||
|
::-webkit-scrollbar-thumb
|
||
|
{
|
||
|
border-radius: 10px;
|
||
|
background-color: #ccc;
|
||
|
}
|
||
|
::-webkit-scrollbar
|
||
|
{
|
||
|
width: 12px;
|
||
|
background-color: #F5F5F5;
|
||
|
}
|
||
|
a{
|
||
|
color: #4c4c4c;
|
||
|
text-decoration: none;
|
||
|
font-weight: 700;
|
||
|
outline: none;
|
||
|
}
|
||
|
a:hover{
|
||
|
text-decoration: none !important;
|
||
|
}
|
||
|
body *{
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
|
p {
|
||
|
margin-top: 0;
|
||
|
margin-bottom: 0
|
||
|
}
|
||
|
ul{
|
||
|
margin-bottom: 0
|
||
|
}
|
||
|
input,button, select, textarea, label{
|
||
|
font-family: Nunito;
|
||
|
font-size: 14px;
|
||
|
color: #929292;
|
||
|
line-height: 1.4;
|
||
|
font-weight: 600;
|
||
|
}
|
||
|
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||
|
color: #929292;
|
||
|
}
|
||
|
::-moz-placeholder { /* Firefox 19+ */
|
||
|
color: #929292;
|
||
|
}
|
||
|
:-ms-input-placeholder { /* IE 10+ */
|
||
|
color: #929292;
|
||
|
}
|
||
|
:-moz-placeholder { /* Firefox 18- */
|
||
|
color: #929292;
|
||
|
}
|
||
|
/*end of part 0----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[1. Body]
|
||
|
*------------------------------------------------------------------*/
|
||
|
body{
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
background-color: #FFF;
|
||
|
font-family: Nunito;
|
||
|
font-size: 14px;
|
||
|
color: #777;
|
||
|
line-height: 1.4;
|
||
|
font-weight: 400;
|
||
|
box-sizing: border-box;
|
||
|
-webkit-font-smoothing: antialiased;
|
||
|
}
|
||
|
/*end of part 1----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[2. Wrapper]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.wrapper{
|
||
|
position: fixed;
|
||
|
left: 0;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
right: 0;
|
||
|
background-position: center center;
|
||
|
background-size: cover;
|
||
|
background-repeat: no-repeat;
|
||
|
|
||
|
}
|
||
|
|
||
|
/*end of part 2----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[3. Navigation]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.nav-menu{
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
z-index: 999;
|
||
|
background-color: rgba(0,0,0,0.3);
|
||
|
display: none;
|
||
|
}
|
||
|
nav.menu.opened{
|
||
|
left: 0;
|
||
|
}
|
||
|
nav.menu{
|
||
|
position: absolute;
|
||
|
left: -70%;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
width: 70%;
|
||
|
background-color: #fff;
|
||
|
-webkit-transition: left 200ms cubic-bezier(0.000, 0.655, 0.000, 1); /* older webkit */
|
||
|
-webkit-transition: left 200ms cubic-bezier(0.025, 0.685, 0.000, 0.990);
|
||
|
-moz-transition: left 200ms cubic-bezier(0.025, 0.685, 0.000, 0.990);
|
||
|
-o-transition: left 200ms cubic-bezier(0.025, 0.685, 0.000, 0.990);
|
||
|
transition: left 200ms cubic-bezier(0.025, 0.685, 0.000, 0.990); /* custom */
|
||
|
}
|
||
|
.image-round{
|
||
|
border-radius: 60px;
|
||
|
width: 100px;
|
||
|
height: 100px;
|
||
|
border: 3px solid #fff;
|
||
|
}
|
||
|
nav.menu .nav-header span{
|
||
|
display: block;
|
||
|
color: #fff;
|
||
|
font-weight: normal;
|
||
|
}
|
||
|
|
||
|
nav.menu .nav-header a{
|
||
|
color: #2eb18d;
|
||
|
}
|
||
|
|
||
|
nav.menu .nav-header{
|
||
|
height: 160px;
|
||
|
text-align: center;
|
||
|
padding-top: 10px;
|
||
|
background:url("../img/avatar-bg.jpg") no-repeat;
|
||
|
background-size: cover
|
||
|
}
|
||
|
|
||
|
nav .nav-container{
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
top: 0px;
|
||
|
overflow: auto;
|
||
|
}
|
||
|
|
||
|
nav.menu ul{
|
||
|
list-style: none;
|
||
|
padding: 0;
|
||
|
margin: 0;
|
||
|
}
|
||
|
nav.menu ul li{
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
}
|
||
|
nav.menu ul li img{
|
||
|
max-width: 23px
|
||
|
}
|
||
|
nav.menu ul li strong{
|
||
|
position: relative;
|
||
|
top: -5px;
|
||
|
margin-left: 10px;
|
||
|
font-weight: 500;
|
||
|
}
|
||
|
nav.menu ul li strong.special{
|
||
|
top: 2px
|
||
|
}
|
||
|
nav.menu ul.main-menu > li.active{
|
||
|
background-color: #f5f5f5;
|
||
|
}
|
||
|
|
||
|
nav.menu ul.main-menu > li.active > ul{
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
nav.menu ul.main-menu > li ul li.active{
|
||
|
background-color: rgba(0,0,0,0.2);
|
||
|
}
|
||
|
|
||
|
nav.menu ul.main-menu>li>a{
|
||
|
display: block;
|
||
|
color: #4c4b4b;
|
||
|
padding: 12px 12px;
|
||
|
font-weight: normal;
|
||
|
}
|
||
|
|
||
|
nav.menu ul.main-menu > li.active i{
|
||
|
color: #2eb18d !important;
|
||
|
}
|
||
|
|
||
|
nav.menu ul.main-menu>li>a>i{
|
||
|
display: inline-block;
|
||
|
width: 30px;
|
||
|
font-size: 18px;
|
||
|
color: #777777;
|
||
|
}
|
||
|
nav.menu ul.main-menu>li>a>span{
|
||
|
display: inline-block;
|
||
|
float: right;
|
||
|
opacity: 0.5;
|
||
|
}
|
||
|
nav.menu ul.main-menu>li ul{
|
||
|
display: none;
|
||
|
}
|
||
|
nav.menu ul.main-menu>li li a{
|
||
|
display: block;
|
||
|
color: #4c4b4b;
|
||
|
padding: 8px 20px 8px 48px;
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
.mt-0{
|
||
|
margin-top: 0 !important
|
||
|
}
|
||
|
.mt-10{
|
||
|
margin-top: 10px !important
|
||
|
}
|
||
|
.mt-15{
|
||
|
margin-top: 15px !important
|
||
|
}
|
||
|
.mt-20{
|
||
|
margin-top: 20px !important
|
||
|
}
|
||
|
.mt-30{
|
||
|
margin-top: 30px !important
|
||
|
}
|
||
|
.mb-0{
|
||
|
margin-bottom: 0 !important
|
||
|
}
|
||
|
.mb-5{
|
||
|
margin-bottom: 5px !important
|
||
|
}
|
||
|
.mb-10{
|
||
|
margin-bottom: 10px !important
|
||
|
}
|
||
|
.mb-15{
|
||
|
margin-bottom: 15px !important
|
||
|
}
|
||
|
.mb-30{
|
||
|
margin-bottom: 30px !important
|
||
|
}
|
||
|
.ml-10{
|
||
|
margin-left: 7px
|
||
|
}
|
||
|
.mr-10{
|
||
|
margin-right: 8px
|
||
|
}
|
||
|
.pl-0{
|
||
|
padding-left: 0 !important
|
||
|
}
|
||
|
.pr-0{
|
||
|
padding-right: 0 !important
|
||
|
}
|
||
|
.w-text{
|
||
|
color: #fff !important
|
||
|
}
|
||
|
.g-text{
|
||
|
color: #ede6e6 !important;
|
||
|
}
|
||
|
.p-text{
|
||
|
color: #999 !important
|
||
|
}
|
||
|
.text-center{
|
||
|
text-align: center !important;
|
||
|
}
|
||
|
.relative{
|
||
|
position: relative !important
|
||
|
}
|
||
|
/*end of part 3----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[4. Inline Wrapper]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.wrapper-inline{
|
||
|
position: absolute;
|
||
|
width: 100%;
|
||
|
bottom: 0;
|
||
|
top: 0;
|
||
|
background-color: #f9fafb;
|
||
|
overflow: auto;
|
||
|
}
|
||
|
.wrapper.with-bg-image .wrapper-inline{
|
||
|
background-color: rgba(255,255,255,0.9);
|
||
|
}
|
||
|
/*end of part 4----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[5. Header]
|
||
|
*------------------------------------------------------------------*/
|
||
|
header{
|
||
|
position: fixed;
|
||
|
z-index: 998;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
background-color: #FFF;
|
||
|
height: 50px;
|
||
|
border-bottom:solid 1px #EEE;
|
||
|
padding: 10px;
|
||
|
|
||
|
}
|
||
|
|
||
|
header.no-background{
|
||
|
background-color: transparent;
|
||
|
border-bottom: none;
|
||
|
color: #FFF;
|
||
|
-webkit-transition: background-color .3s ease-in-out;
|
||
|
-moz-transition: background-color .3s ease-in-out;
|
||
|
-o-transition: background-color .3s ease-in-out;
|
||
|
transition: background-color .3s ease-in-out;
|
||
|
}
|
||
|
header.no-background a{
|
||
|
color: #FFF;
|
||
|
}
|
||
|
header.no-background .navi-menu-button em{
|
||
|
background: #FFF;
|
||
|
}
|
||
|
|
||
|
header.set-bg{
|
||
|
background-color: #FFF;
|
||
|
border-bottom:solid 1px #EEE;
|
||
|
color: #464646;
|
||
|
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1);
|
||
|
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1);
|
||
|
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1);
|
||
|
}
|
||
|
header.set-bg a{
|
||
|
color: #464646;
|
||
|
}
|
||
|
header.set-bg .navi-menu-button em{
|
||
|
background: #464646;
|
||
|
}
|
||
|
|
||
|
header .go-back-link{
|
||
|
width: 30px;
|
||
|
height: 30px;
|
||
|
display: inline-block;
|
||
|
line-height: 30px;
|
||
|
text-align: center;
|
||
|
float: left;
|
||
|
margin-left: -10px;
|
||
|
}
|
||
|
header .page-title{
|
||
|
font-size: 16px;
|
||
|
position: absolute;
|
||
|
left: 50px;
|
||
|
right: 50px;
|
||
|
top: 10px;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
height: 30px;
|
||
|
line-height: 30px;
|
||
|
text-align: center;
|
||
|
letter-spacing: 2px;
|
||
|
overflow: hidden;
|
||
|
text-overflow:ellipsis;
|
||
|
-o-text-overflow: ellipsis;
|
||
|
-ms-text-overflow: ellipsis;
|
||
|
white-space: nowrap;
|
||
|
}
|
||
|
header.with-search-icon .page-title{
|
||
|
left: 80px;
|
||
|
right: 50px;
|
||
|
}
|
||
|
.navi-menu-button{
|
||
|
width: 30px;
|
||
|
height: 30px;
|
||
|
float: right;
|
||
|
position: relative;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.navi-menu-button em{
|
||
|
width: 24px;
|
||
|
height: 2px;
|
||
|
background-color: #4c4c4c;
|
||
|
display: block;
|
||
|
position: absolute;
|
||
|
border-radius: 30px;
|
||
|
right: 0;
|
||
|
|
||
|
-webkit-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
|
||
|
-moz-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
|
||
|
-o-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
|
||
|
transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
|
||
|
}
|
||
|
.navi-menu-button em:nth-child(1){
|
||
|
top: 7px;
|
||
|
width: 20px;
|
||
|
}
|
||
|
.navi-menu-button em:nth-child(2){
|
||
|
top: 14px;
|
||
|
}
|
||
|
.navi-menu-button em:nth-child(3){
|
||
|
top: 21px;
|
||
|
width: 20px;
|
||
|
}
|
||
|
|
||
|
.navi-menu-button.focused em:nth-child(1){
|
||
|
-ms-transform: rotate(-45deg);
|
||
|
-webkit-transform: rotate(-45deg);
|
||
|
transform: rotate(-45deg);
|
||
|
top: 14px;
|
||
|
}
|
||
|
.navi-menu-button.focused em:nth-child(2){
|
||
|
width: 0;
|
||
|
}
|
||
|
.navi-menu-button.focused em:nth-child(3){
|
||
|
-ms-transform: rotate(45deg);
|
||
|
-webkit-transform: rotate(45deg);
|
||
|
transform: rotate(45deg);
|
||
|
top: 14px;
|
||
|
}
|
||
|
/*end of part 5----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[6. Main]
|
||
|
*------------------------------------------------------------------*/
|
||
|
main{
|
||
|
margin-top: 60px;
|
||
|
}
|
||
|
main.no-margin{
|
||
|
margin-top: 0;
|
||
|
}
|
||
|
main.fix-top-menu{
|
||
|
margin-top: 50px;
|
||
|
}
|
||
|
main.no-margin .container{
|
||
|
padding: 0;
|
||
|
}
|
||
|
main.no-header .TurboWrapper{
|
||
|
top: 0;
|
||
|
}
|
||
|
/*end of part 6----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[7. Container]
|
||
|
*------------------------------------------------------------------*/
|
||
|
section.container{
|
||
|
padding: 0 10px;
|
||
|
}
|
||
|
div.container{
|
||
|
padding: 0 10px;
|
||
|
}
|
||
|
/*end of part 7----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[8. Form Elements]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.form-row{
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
padding: 0;
|
||
|
position: relative;
|
||
|
}
|
||
|
.form-row.no-padding{
|
||
|
padding: 0;
|
||
|
}
|
||
|
.form-row-group{
|
||
|
border-radius: 3px;
|
||
|
background-color: #FFF;
|
||
|
border:solid 1px #f2f2f2;
|
||
|
-webkit-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.2);
|
||
|
-moz-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.2);
|
||
|
box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.2);
|
||
|
}
|
||
|
.form-row-group .form-row{
|
||
|
padding: 0 10px;
|
||
|
}
|
||
|
.form-row-group.with-icons .form-row i{
|
||
|
position: absolute;
|
||
|
line-height: 40px;
|
||
|
width: 24px;
|
||
|
}
|
||
|
.form-row-group.with-icons .form-row .form-element{
|
||
|
padding-left: 24px;
|
||
|
}
|
||
|
.form-element{
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
border:none;
|
||
|
border-bottom: solid 1px #EEE;
|
||
|
height: 40px;
|
||
|
outline: none;
|
||
|
line-height: 40px;
|
||
|
background-color: #FFF;
|
||
|
|
||
|
}
|
||
|
select.form-element{
|
||
|
-webkit-appearance: none;
|
||
|
background-color: white;
|
||
|
background-image: url(../img/up-down.svg);
|
||
|
background-position : right center;
|
||
|
background-repeat: no-repeat;
|
||
|
padding-right: 1.5em;
|
||
|
border-color:transparent;
|
||
|
border-bottom: solid 1px #EEE;
|
||
|
}
|
||
|
|
||
|
.error{
|
||
|
color: #cc0c35;
|
||
|
}
|
||
|
.error .form-element{
|
||
|
border-color: #cc0c35 !important;
|
||
|
color: #cc0c35;
|
||
|
}
|
||
|
textarea.form-element{
|
||
|
resize: none;
|
||
|
line-height: 1.4;
|
||
|
padding: 10px 0;
|
||
|
min-height: 80px;
|
||
|
}
|
||
|
select.form-element{
|
||
|
padding: 0;
|
||
|
margin-left: -4px;
|
||
|
}
|
||
|
.form-element:focus{
|
||
|
border-color: #2eb18d;
|
||
|
}
|
||
|
|
||
|
.button{
|
||
|
padding: 10px 20px;
|
||
|
background-color: #FFF;
|
||
|
border:none;
|
||
|
border-radius: 3px;
|
||
|
text-align: center;
|
||
|
font-weight: 600;
|
||
|
outline: none;
|
||
|
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
|
||
|
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
|
||
|
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.button.circle{
|
||
|
border-radius: 5px;
|
||
|
}
|
||
|
.button.block{
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
}
|
||
|
.button:hover, .button:active, .button:focus{
|
||
|
background-color: #f9f9f9;
|
||
|
}
|
||
|
.button.darkblue{
|
||
|
background-color: #2C6EBC;
|
||
|
color: #FFF;
|
||
|
border-color:transparent;
|
||
|
-webkit-box-shadow: none;
|
||
|
-moz-box-shadow: none;
|
||
|
box-shadow: none;
|
||
|
}
|
||
|
.button.orange{
|
||
|
background-color: #2eb18d;
|
||
|
color: #FFF;
|
||
|
border-color:transparent;
|
||
|
-webkit-box-shadow: none;
|
||
|
-moz-box-shadow: none;
|
||
|
box-shadow: none;
|
||
|
}
|
||
|
.button.blue{
|
||
|
background-color: #3e7ab7;
|
||
|
color: #FFF;
|
||
|
border-color:transparent;
|
||
|
-webkit-box-shadow: none;
|
||
|
-moz-box-shadow: none;
|
||
|
box-shadow: none;
|
||
|
}
|
||
|
.button.yellow{
|
||
|
background-color: #ebad4d;
|
||
|
color: #FFF;
|
||
|
border-color:transparent;
|
||
|
-webkit-box-shadow: none;
|
||
|
-moz-box-shadow: none;
|
||
|
box-shadow: none;
|
||
|
}
|
||
|
.button.red{
|
||
|
background-color: #d3514b;
|
||
|
color: #FFF;
|
||
|
border-color:transparent;
|
||
|
-webkit-box-shadow: none;
|
||
|
-moz-box-shadow: none;
|
||
|
box-shadow: none;
|
||
|
}
|
||
|
|
||
|
.button.green{
|
||
|
background-color: #65b95f;
|
||
|
color: #FFF;
|
||
|
border-color:transparent;
|
||
|
-webkit-box-shadow: none;
|
||
|
-moz-box-shadow: none;
|
||
|
box-shadow: none;
|
||
|
}
|
||
|
.more-btn{
|
||
|
background: #7965ff;
|
||
|
color: #fff;
|
||
|
padding: 10px 40px;
|
||
|
border: 1px solid #7965ff;
|
||
|
border-radius: 25px;
|
||
|
margin-top: 10px;
|
||
|
display: inline-block;
|
||
|
transition: all .3s ease-in-out;
|
||
|
}
|
||
|
.more-btn:hover,
|
||
|
.more-btn.transparent{
|
||
|
background: transparent;
|
||
|
color: #7965ff
|
||
|
}
|
||
|
.sweet-check{
|
||
|
height: 30px;
|
||
|
width: 60px;
|
||
|
cursor: pointer;
|
||
|
border-radius: 30px;
|
||
|
border:solid 1px #eee;
|
||
|
display: inline-block;
|
||
|
position: relative;
|
||
|
background-color: #FFF;
|
||
|
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
-webkit-transition: background-color 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
|
||
|
-moz-transition: background-color 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
|
||
|
-o-transition: background-color 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
|
||
|
transition: background-color 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
|
||
|
}
|
||
|
.sweet-check input{
|
||
|
opacity: 0;
|
||
|
position: absolute;
|
||
|
}
|
||
|
|
||
|
.sweet-check .outline{
|
||
|
width: 27px;
|
||
|
height: 27px;
|
||
|
border-radius: 50%;
|
||
|
display: block;
|
||
|
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.2);
|
||
|
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.2);
|
||
|
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.2);
|
||
|
background-color: #FFF;
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
-webkit-transition: left 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
|
||
|
-moz-transition: left 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
|
||
|
-o-transition: left 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
|
||
|
transition: left 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
|
||
|
}
|
||
|
.sweet-check.checked{
|
||
|
background-color: #60B2FE;
|
||
|
border-color: #60B2FE;
|
||
|
}
|
||
|
.sweet-check.checked .outline{
|
||
|
left: 30px;
|
||
|
}
|
||
|
/*end of part 8----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[9. Accordion]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.expandable-item{
|
||
|
background-color: #fff;
|
||
|
border-radius: 3px;
|
||
|
margin-bottom: 15px;
|
||
|
}
|
||
|
.expandable-header{
|
||
|
background-color: #FFF;
|
||
|
padding: 15px;
|
||
|
position: relative;
|
||
|
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
border-radius: 3px;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.expandable-header .list-icon{
|
||
|
font-size: 18px;
|
||
|
display: inline-block;
|
||
|
width: 24px;
|
||
|
}
|
||
|
.expandable-header .list-title{
|
||
|
font-size: 16px;
|
||
|
line-height: 18px;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
.expandable-header .list-item-extra{
|
||
|
position: absolute;
|
||
|
right: 40px;
|
||
|
top: 17px;
|
||
|
font-size: 12px;
|
||
|
}
|
||
|
.expandable-header .list-arrow{
|
||
|
position: absolute;
|
||
|
right: 15px;
|
||
|
top: 15px;
|
||
|
font-size: 20px;
|
||
|
}
|
||
|
.expandable-content{
|
||
|
border:solid 1px transparent;
|
||
|
border-top: none;
|
||
|
border-bottom-right-radius: 3px;
|
||
|
border-bottom-left-radius: 3px;
|
||
|
overflow: hidden;
|
||
|
max-height: 0;
|
||
|
-webkit-transition: max-height .2s linear;
|
||
|
-moz-transition: max-height .2s linear;
|
||
|
-o-transition: max-height .2s linear;
|
||
|
transition: max-height .2s linear;
|
||
|
}
|
||
|
.expandable-content .padding-content{
|
||
|
padding: 0 15px 30px;
|
||
|
}
|
||
|
.expandable-item.active .expandable-content{
|
||
|
border-color:#EEE;
|
||
|
min-height: 200px
|
||
|
}
|
||
|
.expandable-item.active .list-arrow:before{
|
||
|
content: "\f106";
|
||
|
}
|
||
|
/*end of part 9----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[10. Wizard]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.wizard{
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
}
|
||
|
.wizard .wizard-item{
|
||
|
position: relative;
|
||
|
}
|
||
|
.wizard .wizard-content{
|
||
|
position: absolute;
|
||
|
left: 20px;
|
||
|
top: 20px;
|
||
|
height: 100%;
|
||
|
right: 20px;
|
||
|
bottom: 60px;
|
||
|
overflow: hidden;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.wizard-page .TurboWrapper{
|
||
|
position: absolute;
|
||
|
top: 50px;
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
left: 0;
|
||
|
}
|
||
|
|
||
|
.wizard-page .slider-navigation{
|
||
|
position: absolute;
|
||
|
z-index: 99;
|
||
|
bottom: 10px;
|
||
|
left: 20px;
|
||
|
right: 20px;
|
||
|
}
|
||
|
.wizard-skip-link{
|
||
|
position: absolute;
|
||
|
z-index: 99;
|
||
|
bottom: 10px;
|
||
|
right: 20px;
|
||
|
height: 33px;
|
||
|
line-height: 33px;
|
||
|
font-weight: 400;
|
||
|
cursor: pointer;
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
.wizard-skip-link:hover{
|
||
|
color: #069;
|
||
|
}
|
||
|
.dotClass{
|
||
|
background-color: #DDD;
|
||
|
margin: 5px 3px;
|
||
|
width: 15px;
|
||
|
border-radius: 9px;
|
||
|
height: 6px;
|
||
|
}
|
||
|
.dotClass.active {
|
||
|
background: rgb(121, 101, 255,.8);
|
||
|
}
|
||
|
/*end of part 10----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[11. Tab Control]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.tab-item .fix-width .menu-item{
|
||
|
display: block;
|
||
|
float: left;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.tab-item .tab-content .content-item{
|
||
|
display: none;
|
||
|
}
|
||
|
.tab-item .tab-content .active{
|
||
|
display: block;
|
||
|
}
|
||
|
.tab-item .tab-menu{
|
||
|
background-color: #FFF;
|
||
|
overflow: hidden;
|
||
|
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
z-index: 99;
|
||
|
}
|
||
|
.tab-item .menu-item{
|
||
|
line-height: 40px;
|
||
|
}
|
||
|
.tab-item .menu-item.active{
|
||
|
border-bottom: solid 2px #96a5f6;
|
||
|
color: #96a5f6;
|
||
|
}
|
||
|
.tab-item .tab-content{
|
||
|
padding: 10px 10px 30px
|
||
|
}
|
||
|
.tab-item.fixed-bottom .tab-menu{
|
||
|
position: fixed;
|
||
|
bottom: 0;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
-webkit-box-shadow: 0px -1px 3px 0px rgba(0,0,0,0.2);
|
||
|
-moz-box-shadow: 0px -1px 3px 0px rgba(0,0,0,0.2);
|
||
|
box-shadow: 0px -1px 3px 0px rgba(0,0,0,0.2);
|
||
|
}
|
||
|
.tab-item.fixed-bottom .menu-item.active{
|
||
|
border-bottom:none;
|
||
|
border-top: solid 2px #2eb18d;
|
||
|
background-color: rgba(0,0,0,0.05);
|
||
|
}
|
||
|
.tab-item.fixed-bottom .tab-menu.only-icons .menu-item{
|
||
|
font-size: 18px;
|
||
|
}
|
||
|
/*end of part 11----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[12. Popup]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.popup-overlay{
|
||
|
position: fixed;
|
||
|
z-index: 900;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
background-color: rgba(0,0,0,0.4);
|
||
|
overflow: auto;
|
||
|
padding: 20px;
|
||
|
display: none;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.popup-overlay.no-overlay{
|
||
|
background-color: transparent;
|
||
|
}
|
||
|
.popup-overlay .popup-container{
|
||
|
overflow: hidden;
|
||
|
background-color: #FFF;
|
||
|
border-radius: 5px;
|
||
|
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
|
||
|
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
|
||
|
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
|
||
|
}
|
||
|
.popup-overlay .popup-container.add{
|
||
|
position: relative;
|
||
|
top: 50%;
|
||
|
transform: translateY(-50%);
|
||
|
}
|
||
|
.popup-overlay .popup-header{
|
||
|
border-bottom: solid 1px #EEE;
|
||
|
background-color: #f4f4f4;
|
||
|
padding: 10px;
|
||
|
position: relative;
|
||
|
}
|
||
|
.popup-overlay .popup-title{
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
padding-right: 40px;
|
||
|
}
|
||
|
.popup-overlay .popup-close{
|
||
|
display: block;
|
||
|
width: 24px;
|
||
|
height: 24px;
|
||
|
position: absolute;
|
||
|
right: 10px;
|
||
|
top: 10px;
|
||
|
text-align: center;
|
||
|
line-height: 24px;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.popup-overlay .popup-content{
|
||
|
padding: 10px;
|
||
|
min-height: 50px;
|
||
|
}
|
||
|
.img-buy{
|
||
|
max-width: 100px;
|
||
|
margin-top: 10px
|
||
|
}
|
||
|
.popup-overlay .popup-footer{
|
||
|
border-top:solid 1px #EEE;
|
||
|
padding: 10px;
|
||
|
text-align: right;
|
||
|
}
|
||
|
/*end of part 12----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[13. Lists]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.list-box{
|
||
|
width: 100%;
|
||
|
}
|
||
|
.list-box .list-item{
|
||
|
padding: 15px;
|
||
|
background-color: #FFF;
|
||
|
display: block;
|
||
|
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
|
||
|
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
|
||
|
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
.list-box .list-item .sweet-check{
|
||
|
float: right;
|
||
|
}
|
||
|
.list-box a.list-item:hover, .list-box a.list-item:focus{
|
||
|
background-color: #f5f6f8 !important;
|
||
|
}
|
||
|
.list-box a.list-item:hover i, .list-box a.list-item:focus i{
|
||
|
color: #585858 !important;
|
||
|
}
|
||
|
.list-box .list-item i{
|
||
|
font-size: 20px;
|
||
|
display: inline-block;
|
||
|
line-height: 28px;
|
||
|
color: #797979;
|
||
|
float:left;
|
||
|
width: 36px;
|
||
|
}
|
||
|
.list-box .list-item img {
|
||
|
display: inline-block;
|
||
|
padding-right: 10px;
|
||
|
line-height: 28px;
|
||
|
float: left;
|
||
|
width: 36px;
|
||
|
}
|
||
|
.list-box .list-item .list-item-title{
|
||
|
font-weight: 700;
|
||
|
display: inline-block;
|
||
|
line-height: 28px;
|
||
|
float: left;
|
||
|
font-size: 16px;
|
||
|
}
|
||
|
.list-box .list-item .seperate{
|
||
|
display: inline-block;
|
||
|
float: left;
|
||
|
width: 1px;
|
||
|
height: 30px;
|
||
|
background-color: #EEE;
|
||
|
margin-right: 10px;
|
||
|
}
|
||
|
.list-box.half-box{
|
||
|
width: 50%;
|
||
|
float: left;
|
||
|
}
|
||
|
.list-box.half-box .list-item{
|
||
|
padding: 20px;
|
||
|
text-align: center;
|
||
|
margin-bottom: 10px;
|
||
|
}
|
||
|
|
||
|
.list-box.half-box:nth-child(odd) .list-item{
|
||
|
margin-right: 5px;
|
||
|
}
|
||
|
.list-box.half-box:nth-child(even) .list-item{
|
||
|
margin-left: 5px;
|
||
|
}
|
||
|
.list-box.half-box .list-item i{
|
||
|
font-size: 36px;
|
||
|
float: none;
|
||
|
}
|
||
|
|
||
|
.list-box.half-box .list-item .list-item-title{
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
font-weight: 700;
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
/*end of part 13----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
14. Search]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.search-button{
|
||
|
width: 30px;
|
||
|
height: 30px;
|
||
|
position: relative;
|
||
|
text-align: center;
|
||
|
line-height: 30px;
|
||
|
cursor: pointer;
|
||
|
font-size: 16px;
|
||
|
display: inline-block;
|
||
|
float: left;
|
||
|
}
|
||
|
.search-button img{
|
||
|
max-width: 22px
|
||
|
}
|
||
|
header.no-background .search-button .not-icon1{
|
||
|
position: absolute;
|
||
|
top: 5px;
|
||
|
visibility: hidden;
|
||
|
}
|
||
|
header.no-background.set-bg .search-button .not-icon1{
|
||
|
visibility: visible;
|
||
|
}
|
||
|
.search-form{
|
||
|
position: fixed;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
z-index: 1000;
|
||
|
background-color: rgba(0,0,0,0.4);
|
||
|
overflow: auto;
|
||
|
display: none;
|
||
|
}
|
||
|
.search-form .search-input{
|
||
|
margin: 70px 20px 40px 20px;
|
||
|
position: relative;
|
||
|
}
|
||
|
.search-form .form-element{
|
||
|
border:solid 1px #EEE;
|
||
|
padding: 0 10px;
|
||
|
border-radius: 3px;
|
||
|
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
border-bottom-width: 2px;
|
||
|
}
|
||
|
.search-form .form-element:focus{
|
||
|
border-bottom-color: #2eb18d;
|
||
|
|
||
|
}
|
||
|
.search-form .search-input-btn{
|
||
|
position: absolute;
|
||
|
width: 37px;
|
||
|
height: 37px;
|
||
|
right: 1px;
|
||
|
top: 1px;
|
||
|
background-color: #FFF;
|
||
|
border:none;
|
||
|
line-height: 37px;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.search-form .search-input-btn:hover, .search-form .search-input-btn:focus{
|
||
|
color: #2eb18d;
|
||
|
}
|
||
|
.search-form .recent-search, .search-form .popular-search {
|
||
|
padding: 0 20px;
|
||
|
margin-bottom: 20px;
|
||
|
}
|
||
|
.search-form .search-tag{
|
||
|
display: inline-block;
|
||
|
padding: 4px 12px;
|
||
|
background-color: #FFF;
|
||
|
border:solid 1px #DDD;
|
||
|
font-weight: 400;
|
||
|
border-radius: 15px;
|
||
|
margin:0 5px 5px 0;
|
||
|
}
|
||
|
.search-form .search-tag:hover, .search-form .search-tag:focus{
|
||
|
border-color: #2eb18d;
|
||
|
color: #2eb18d;
|
||
|
}
|
||
|
.search-form .search-group-title{
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
margin-bottom: 6px;
|
||
|
}
|
||
|
.search-form .close-search-form{
|
||
|
position: absolute;
|
||
|
right: 20px;
|
||
|
top: 20px;
|
||
|
display: block;
|
||
|
width: 30px;
|
||
|
height: 30px;
|
||
|
text-align: center;
|
||
|
line-height: 30px;
|
||
|
color: #FFF;
|
||
|
background: #6de3c2;
|
||
|
border:solid 1px #ccc;
|
||
|
border-radius: 3px;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.search-form .close-search-form:focus, .search-form .close-search-form:hover{
|
||
|
background-color: transparent;
|
||
|
color: #FFF;
|
||
|
}
|
||
|
.search-result-header{
|
||
|
background-color: #FFF;
|
||
|
margin: -10px -10px 10px -10px;
|
||
|
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
position: relative;
|
||
|
}
|
||
|
.search-result-header.fix-searchbar{
|
||
|
position: fixed;
|
||
|
top: 60px;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
padding: 0 10px;
|
||
|
z-index: 100;
|
||
|
}
|
||
|
.search-result-header.fix-searchbar + .search-result-container{
|
||
|
padding-top: 30px;
|
||
|
}
|
||
|
.search-result-header .form-element{
|
||
|
padding: 0 10px;
|
||
|
}
|
||
|
.search-result-header.fix-searchbar .search-result-btn{
|
||
|
right: 10px;
|
||
|
}
|
||
|
.search-result-header .search-result-btn{
|
||
|
position: absolute;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
height: 38px;
|
||
|
width: 38px;
|
||
|
border:none;
|
||
|
background-color: #FFF;
|
||
|
overflow: hidden;
|
||
|
outline: none;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.search-result-header .search-result-btn:focus, .search-result-header .search-result-btn:hover{
|
||
|
color: #2eb18d;
|
||
|
}
|
||
|
/*end of part 14----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[15. Divider]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.form-divider{
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
clear: both;
|
||
|
height: 10px;
|
||
|
margin: 10px 0;
|
||
|
}
|
||
|
.form-mini-divider{
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
clear: both;
|
||
|
height: 1px;
|
||
|
margin: 5px 0;
|
||
|
}
|
||
|
.form-label-divider{
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
clear: both;
|
||
|
height: 1px;
|
||
|
background-color: #DDD;
|
||
|
text-align: center;
|
||
|
opacity: 0.5;
|
||
|
}
|
||
|
.form-label-divider span{
|
||
|
position: relative;
|
||
|
top: -8px;
|
||
|
font-weight: 700;
|
||
|
display: inline-block;
|
||
|
background-color: #F5F6F8;
|
||
|
padding: 0 10px;
|
||
|
}
|
||
|
/*end of part 15----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[16. Posts]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.post-item{
|
||
|
width: 100%;
|
||
|
border-radius: 3px;
|
||
|
background-color: #FFF;
|
||
|
min-height: 100px;
|
||
|
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
}
|
||
|
.post-item .post-asset{
|
||
|
border-top-left-radius: 3px;
|
||
|
border-top-right-radius: 3px;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
.post-item .post-asset.image img{
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
}
|
||
|
.post-item .post-asset.video{
|
||
|
position: relative;
|
||
|
padding-bottom: 56.25%; /* 16:9 */
|
||
|
padding-top: 25px;
|
||
|
height: 0;
|
||
|
}
|
||
|
.post-item .post-asset.video iframe{
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
}
|
||
|
.post-item .post-header{
|
||
|
padding: 15px;
|
||
|
border-bottom: solid 1px #EEE;
|
||
|
}
|
||
|
.post-item .post-title{
|
||
|
font-size: 18px;
|
||
|
padding: 0;
|
||
|
margin: 0;
|
||
|
margin-bottom: 4px;
|
||
|
color: #333;
|
||
|
}
|
||
|
.post-item .post-title a{
|
||
|
font-size: 18px;
|
||
|
color: #4c4c4c;
|
||
|
line-height: 18px;
|
||
|
}
|
||
|
.post-item .post-header span{
|
||
|
font-size: 12px;
|
||
|
margin-right: 10px;
|
||
|
opacity: 0.6;
|
||
|
}
|
||
|
.post-item .post-footer{
|
||
|
padding: 10px 15px;
|
||
|
}
|
||
|
.post-item .post-author{
|
||
|
display: inline-block;
|
||
|
}
|
||
|
.post-item .author-img{
|
||
|
width: 44px;
|
||
|
height: 44px;
|
||
|
display: block;
|
||
|
float: left;
|
||
|
overflow: hidden;
|
||
|
border-radius: 50%;
|
||
|
padding: 3px;
|
||
|
background: #FFF;
|
||
|
border:solid 1px #2eb18d;
|
||
|
margin-right: 10px;
|
||
|
}
|
||
|
.post-item .author-img img{
|
||
|
width: 36px;
|
||
|
height: 36px;
|
||
|
border-radius: 50%;
|
||
|
}
|
||
|
.post-item .author-name{
|
||
|
font-size: 12px;
|
||
|
font-weight: 400;
|
||
|
white-space: nowrap;
|
||
|
}
|
||
|
.post-item .author-name b{
|
||
|
white-space: nowrap;
|
||
|
display: block;
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
.post-item .post-extra{
|
||
|
display: inline-block;
|
||
|
float: right;
|
||
|
}
|
||
|
.post-item .post-extra div{
|
||
|
display: inline-block;
|
||
|
height: 40px;
|
||
|
width: 40px;
|
||
|
text-align: center;
|
||
|
font-size: 24px;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.post-item .post-share{
|
||
|
position: relative;
|
||
|
line-height: 40px;
|
||
|
}
|
||
|
.post-item .post-share > i{
|
||
|
cursor: pointer;
|
||
|
display: block;
|
||
|
width: 40px;
|
||
|
height: 40px;
|
||
|
line-height: 40px;
|
||
|
}
|
||
|
.post-item .post-share .social-links{
|
||
|
position: absolute;
|
||
|
z-index: 10;
|
||
|
top: 0;
|
||
|
width: auto;
|
||
|
display: inline-block;
|
||
|
white-space: nowrap;
|
||
|
left: -130px;
|
||
|
width: 130px;
|
||
|
border:solid 1px #EEE;
|
||
|
border-radius: 5px;
|
||
|
background: #FFF;
|
||
|
display: none;
|
||
|
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
}
|
||
|
.post-item .post-share .social-links a{
|
||
|
font-size: 18px;
|
||
|
display: block;
|
||
|
width: 40px;
|
||
|
height: 40px;
|
||
|
text-align: center;
|
||
|
line-height: 40px;
|
||
|
position: relative;
|
||
|
float: left;
|
||
|
}
|
||
|
.post-item .post-share .social-links a.share-facebook{
|
||
|
color: #2C6EBC;
|
||
|
}
|
||
|
.post-item .post-share .social-links a.share-twitter{
|
||
|
color: #1DA1F2;
|
||
|
}
|
||
|
.post-item .post-share .social-links a.share-google-plus{
|
||
|
color: #D24C41;
|
||
|
}
|
||
|
.post-detail{
|
||
|
background: #FFF;
|
||
|
padding: 10px;
|
||
|
border-top:solid 1px #EEE;
|
||
|
}
|
||
|
.post-detail p{
|
||
|
margin: 0;
|
||
|
margin-bottom: 10px;
|
||
|
}
|
||
|
.post-detail h1, .post-detail h2, .post-detail h3, .post-detail h4, .post-detail h5 .post-detail h6{
|
||
|
font-weight: 900;
|
||
|
}
|
||
|
.post-comments{
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
.post-comments ul{
|
||
|
padding: 0;
|
||
|
list-style: none;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
}
|
||
|
.post-comments ul li{
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
}
|
||
|
.post-comments > ul > li li{
|
||
|
padding-left: 20px;
|
||
|
}
|
||
|
.post-comments ul li .comment-container{
|
||
|
background-color: #FFF;
|
||
|
padding: 10px;
|
||
|
margin: 10px;
|
||
|
}
|
||
|
.post-comments.no-padding{
|
||
|
margin-top:0;
|
||
|
}
|
||
|
.post-comments.no-padding ul li .comment-container{
|
||
|
margin: 0;
|
||
|
margin-bottom: 10px;
|
||
|
}
|
||
|
.post-comments .comment-header{
|
||
|
position: relative;
|
||
|
border-bottom: solid 1px #EEE;
|
||
|
overflow: hidden;
|
||
|
padding-bottom: 10px;
|
||
|
}
|
||
|
.post-comments .user-image{
|
||
|
display: block;
|
||
|
width: 38px;
|
||
|
height: 38px;
|
||
|
border:solid 1px #2eb18d;
|
||
|
border-radius: 50%;
|
||
|
float: left;
|
||
|
padding: 2px;
|
||
|
margin-right: 10px;
|
||
|
}
|
||
|
.post-comments .user-image img{
|
||
|
width: 32px;
|
||
|
height: 32px;
|
||
|
border-radius: 50%;
|
||
|
}
|
||
|
.post-comments .user-name{
|
||
|
display: inline-block;
|
||
|
float: left;
|
||
|
line-height: 38px;
|
||
|
font-weight: 700;
|
||
|
}
|
||
|
.post-comments .comment-date{
|
||
|
display: inline-block;
|
||
|
position: absolute;
|
||
|
right: 10px;
|
||
|
top: 10px;
|
||
|
font-size: 12px;
|
||
|
opacity: 0.6;
|
||
|
}
|
||
|
.post-comments .comment-content{
|
||
|
padding-top: 10px;
|
||
|
opacity: 0.7;
|
||
|
}
|
||
|
.post-comments .comment-post-link{
|
||
|
border-bottom:solid 1px #EEE;
|
||
|
margin-bottom: 10px;
|
||
|
padding-bottom: 10px;
|
||
|
}
|
||
|
.post-comments .comment-post-link a{
|
||
|
color: #2eb18d;
|
||
|
font-weight: 700;
|
||
|
}
|
||
|
|
||
|
.news-list-item{
|
||
|
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
background-color: #FFF;
|
||
|
min-height: 30px;
|
||
|
border-radius: 3px;
|
||
|
position: relative;
|
||
|
}
|
||
|
.news-list-item.no-image .list-content{
|
||
|
padding-left: 10px;
|
||
|
height: auto;
|
||
|
}
|
||
|
.news-list-item.no-image .list-title{
|
||
|
height: auto;
|
||
|
}
|
||
|
.news-list-item .list-image{
|
||
|
width: 100px;
|
||
|
height: 100px;
|
||
|
position: absolute;
|
||
|
border-top-left-radius: 3px;
|
||
|
border-bottom-left-radius: 3px;
|
||
|
overflow: hidden;
|
||
|
float: left;
|
||
|
}
|
||
|
.news-list-item .list-content{
|
||
|
height: 100px;
|
||
|
position: relative;
|
||
|
padding: 10px 10px 10px 110px;
|
||
|
}
|
||
|
.news-list-item .list-category{
|
||
|
font-size: 12px;
|
||
|
display: inline-block;
|
||
|
padding: 3px 10px;
|
||
|
color: #FFF;
|
||
|
border-radius: 10px;
|
||
|
margin-bottom: 6px;
|
||
|
}
|
||
|
.news-list-item .list-title{
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
font-size: 14px;
|
||
|
line-height: 16px;
|
||
|
height: 32px;
|
||
|
|
||
|
}
|
||
|
.news-list-item .list-author, .news-list-item .list-time{
|
||
|
font-size: 12px;
|
||
|
opacity: 0.6;
|
||
|
}
|
||
|
.news-list-item .list-author{
|
||
|
font-weight: 700;
|
||
|
}
|
||
|
/*end of part 16----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[17. Profile Page]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.profile-image{
|
||
|
width: 110px;
|
||
|
height: 110px;
|
||
|
padding: 5px;
|
||
|
border-radius: 50%;
|
||
|
background-color: #FFF;
|
||
|
display: inline-block;
|
||
|
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
|
||
|
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
|
||
|
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
|
||
|
position: relative;
|
||
|
}
|
||
|
.profile-image .avatar-img{
|
||
|
border-radius: 50%;
|
||
|
}
|
||
|
.profile-image .update-btn{
|
||
|
position: absolute;
|
||
|
display: block;
|
||
|
width: 32px;
|
||
|
height: 32px;
|
||
|
border-radius: 50%;
|
||
|
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
|
||
|
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
|
||
|
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
|
||
|
background-color: #fff;
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
text-align: center;
|
||
|
line-height: 32px;
|
||
|
}
|
||
|
/*end of part 17----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[18. Post Author Page]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.author-item .author-bg{
|
||
|
width: 100%;
|
||
|
height: auto;
|
||
|
position: relative;
|
||
|
background-size: cover;
|
||
|
}
|
||
|
.author-item .author-bg-inline{
|
||
|
width: 100%;
|
||
|
background-color: rgba(14, 14, 14, 0.1);
|
||
|
padding: 60px 0 20px 0;
|
||
|
}
|
||
|
.author-item .author-avatar{
|
||
|
border-radius: 50%;
|
||
|
width: 120px;
|
||
|
height: 120px;
|
||
|
background-color: rgba(255,255,255,0.2);
|
||
|
padding: 10px;
|
||
|
display: block;
|
||
|
margin: 0 auto;
|
||
|
|
||
|
}
|
||
|
.author-item .author-avatar img{
|
||
|
border-radius: 50%;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
}
|
||
|
.author-item .author-name{
|
||
|
display: block;
|
||
|
text-align: center;
|
||
|
color: #FFF;
|
||
|
font-size: 18px;
|
||
|
font-weight: 900;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
.author-item .author-desc{
|
||
|
display: block;
|
||
|
text-align: center;
|
||
|
color: rgba(255,255,255,0.5);
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
.author-item .author-number{
|
||
|
overflow: hidden;
|
||
|
color: rgba(255,255,255,0.6);
|
||
|
text-align: center;
|
||
|
margin-top: 40px;
|
||
|
}
|
||
|
.author-item .author-number > div{
|
||
|
width: 33%;
|
||
|
float: left;
|
||
|
}
|
||
|
.author-item .author-number > div > span{
|
||
|
display: block;
|
||
|
font-size: 18px;
|
||
|
font-weight: 400;
|
||
|
color: #FFF;
|
||
|
}
|
||
|
/*end of part 18----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
19. Gallery and Album]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.album-item{
|
||
|
background-color: #FFF;
|
||
|
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
border-radius: 3px;
|
||
|
margin-bottom: 10px;
|
||
|
display: block;
|
||
|
}
|
||
|
.album-item:focus, .album-item:hover{
|
||
|
color: #35d9ac;
|
||
|
}
|
||
|
.album-item:focus .album-image:before, .album-item:hover .album-image:before{
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
background-color: rgba(0,0,0,0.4);
|
||
|
z-index: 9;
|
||
|
}
|
||
|
.album-item .album-image{
|
||
|
height: 140px;
|
||
|
width: 100%;
|
||
|
overflow: hidden;
|
||
|
border-top-right-radius: 3px;
|
||
|
border-top-left-radius: 3px;
|
||
|
position: relative;
|
||
|
}
|
||
|
.album-item .album-image img{
|
||
|
position: absolute;
|
||
|
top: -9999px;
|
||
|
right: -9999px;
|
||
|
bottom: -9999px;
|
||
|
left: -9999px;
|
||
|
margin: auto;
|
||
|
min-width: 100%;
|
||
|
min-height: 100%;
|
||
|
}
|
||
|
|
||
|
.album-item .album-info{
|
||
|
padding: 10px;
|
||
|
position: relative;
|
||
|
}
|
||
|
.album-item .album-title{
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
}
|
||
|
.album-item .image-count{
|
||
|
font-size: 12px;
|
||
|
opacity: 0.6;
|
||
|
float: right;
|
||
|
position: absolute;
|
||
|
right: 10px;
|
||
|
top: 10px;
|
||
|
}
|
||
|
.album-item.half-box .album-image{
|
||
|
height: 100px;
|
||
|
}
|
||
|
.album-item.half-box{
|
||
|
width: 49%;
|
||
|
}
|
||
|
.album-item.half-box:nth-child(odd){
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
.album-item.half-box:nth-child(even){
|
||
|
float: right;
|
||
|
}
|
||
|
.album-item.half-box .image-count{
|
||
|
position: relative;
|
||
|
display: block;
|
||
|
float: none;
|
||
|
top: inherit;
|
||
|
right: inherit;
|
||
|
}
|
||
|
.gallery-item{
|
||
|
display: block;
|
||
|
position: relative;
|
||
|
overflow: hidden;
|
||
|
height: 140px;
|
||
|
border-radius: 3px;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.gallery-item.half-box{
|
||
|
width: 50%;
|
||
|
float: left;
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
.gallery-item img{
|
||
|
position: absolute;
|
||
|
top: -9999px;
|
||
|
right: -9999px;
|
||
|
bottom: -9999px;
|
||
|
left: -9999px;
|
||
|
margin: auto;
|
||
|
min-width: 100%;
|
||
|
min-height: 100%;
|
||
|
}
|
||
|
.gallery-item .image-name{
|
||
|
position: absolute;
|
||
|
width: 100%;
|
||
|
bottom: 0;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
padding: 10px;
|
||
|
z-index: 9;
|
||
|
color: #FFF;
|
||
|
background: rgba(135,135,135,0);
|
||
|
background: -moz-linear-gradient(top, rgba(135,135,135,0) 0%, rgba(51,51,51,1) 100%);
|
||
|
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(135,135,135,0)), color-stop(100%, rgba(51,51,51,1)));
|
||
|
background: -webkit-linear-gradient(top, rgba(135,135,135,0) 0%, rgba(51,51,51,1) 100%);
|
||
|
background: -o-linear-gradient(top, rgba(135,135,135,0) 0%, rgba(51,51,51,1) 100%);
|
||
|
background: -ms-linear-gradient(top, rgba(135,135,135,0) 0%, rgba(51,51,51,1) 100%);
|
||
|
background: linear-gradient(to bottom, rgba(135,135,135,0) 0%, rgba(51,51,51,1) 100%);
|
||
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#878787', endColorstr='#333333', GradientType=0 );
|
||
|
}
|
||
|
.gallery-item .image-name b{
|
||
|
position: absolute;
|
||
|
display: block;
|
||
|
bottom: 10px;
|
||
|
left: 10px;
|
||
|
}
|
||
|
.gallery-item .image-name i{
|
||
|
position: absolute;
|
||
|
font-size: 18px;
|
||
|
right: 10px;
|
||
|
bottom: 10px;
|
||
|
}
|
||
|
.gallery-item:hover .image-name, .gallery-item:focus .image-name{
|
||
|
top: 0;
|
||
|
background: rgba(0,0,0,0.4);
|
||
|
}
|
||
|
/*end of part 19----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[20. Contact]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.map_container{
|
||
|
position: relative;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
top: -10px;
|
||
|
width: 100%;
|
||
|
height: 300px;
|
||
|
}
|
||
|
.contact-info{
|
||
|
background-color: #FFF;
|
||
|
margin: 0 10px 10px;
|
||
|
padding: 10px;
|
||
|
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
}
|
||
|
.contact-info .address-name{
|
||
|
margin: 6px 0;
|
||
|
padding: 0;
|
||
|
}
|
||
|
.contact-info .contact-stars{
|
||
|
opacity: 0.6;
|
||
|
}
|
||
|
.contact-info .address{
|
||
|
padding: 0;
|
||
|
margin: 0;
|
||
|
}
|
||
|
.contact-short-info{
|
||
|
background-color: #FFF;
|
||
|
padding: 10px;
|
||
|
margin: 10px;
|
||
|
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
}
|
||
|
.contact-short-info .title{
|
||
|
margin: 0;
|
||
|
}
|
||
|
.contact-address{
|
||
|
background-color: #FFF;
|
||
|
margin: 10px;
|
||
|
padding: 10px;
|
||
|
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
}
|
||
|
.contact-address .contact-item{
|
||
|
margin-bottom: 6px;
|
||
|
}
|
||
|
.contact-address .contact-item i{
|
||
|
display: inline-block;
|
||
|
width: 20px;
|
||
|
}
|
||
|
/*end of part 20----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[21. Product Pages]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.product-two-column .product-item{
|
||
|
display: block;
|
||
|
width: 50%;
|
||
|
float: left;
|
||
|
}
|
||
|
.product-item{
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
position: relative;
|
||
|
}
|
||
|
.product-item > a{
|
||
|
display: block;
|
||
|
background-color: #FFF;
|
||
|
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
margin-bottom: 10px;
|
||
|
border-radius: 3px;
|
||
|
}
|
||
|
.product-two-column .product-item:nth-child(odd){
|
||
|
padding-right: 5px;
|
||
|
}
|
||
|
.product-two-column .product-item:nth-child(even){
|
||
|
padding-left: 5px;
|
||
|
}
|
||
|
.product-item .product-title{
|
||
|
display: block;
|
||
|
margin:0;
|
||
|
padding: 0;
|
||
|
font-size: 14px;
|
||
|
padding: 5px 10px;
|
||
|
overflow: hidden;
|
||
|
height:25px;
|
||
|
text-overflow:ellipsis;
|
||
|
-o-text-overflow: ellipsis;
|
||
|
-ms-text-overflow: ellipsis;
|
||
|
white-space: nowrap;
|
||
|
color: #525252;
|
||
|
font-weight: normal;
|
||
|
}
|
||
|
.title-main{
|
||
|
margin:30px 0px 15px;
|
||
|
font-size: 16px;
|
||
|
}
|
||
|
.product-item .product-image{
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
border-top-left-radius: 3px;
|
||
|
border-top-right-radius: 3px;
|
||
|
}
|
||
|
.product-item .product-info{
|
||
|
display: block;
|
||
|
padding: 0px 10px 0px 10px;
|
||
|
font-weight: 800;
|
||
|
height: 35px;
|
||
|
}
|
||
|
.product-item .product-price{
|
||
|
font-size: 12px;
|
||
|
line-height: 30px;
|
||
|
}
|
||
|
.product-item .add-to-chart{
|
||
|
border:none;
|
||
|
border-radius: 3px;
|
||
|
color: #FFF;
|
||
|
font-size: 12px;
|
||
|
line-height: 18px;
|
||
|
float: right;
|
||
|
}
|
||
|
.product-item .old-price{
|
||
|
opacity: 0.7;
|
||
|
margin-left: 10px;
|
||
|
text-decoration: line-through;
|
||
|
}
|
||
|
.product-item .add-to-favorite{
|
||
|
position: absolute;
|
||
|
right: 15px;
|
||
|
top: 10px;
|
||
|
color: #FFF;
|
||
|
font-size: 20px;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.product-viewer .view-item{
|
||
|
padding: 10px;
|
||
|
}
|
||
|
|
||
|
.product-viewer .view-item img{
|
||
|
display: block;
|
||
|
margin:0 auto;
|
||
|
max-width: 100%;
|
||
|
padding: 10px;
|
||
|
background-color: #FFF;
|
||
|
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
}
|
||
|
.product-view-title{
|
||
|
text-align: center;
|
||
|
margin: 0;
|
||
|
}
|
||
|
.product-view-price{
|
||
|
margin: 0;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.product-view-price .old-price{
|
||
|
opacity: 0.5;
|
||
|
font-weight: 400;
|
||
|
text-decoration: line-through;
|
||
|
}
|
||
|
.cart-btn{
|
||
|
display: block;
|
||
|
width: 30px;
|
||
|
height: 30px;
|
||
|
background-color: #ececec;
|
||
|
float: right;
|
||
|
border: 0px;
|
||
|
border-radius: 25px;
|
||
|
font-size: 14px;
|
||
|
margin-top: 2px;
|
||
|
color: #2eb18d;
|
||
|
}
|
||
|
.product-size{
|
||
|
margin: 10px auto;
|
||
|
width: 300px;
|
||
|
}
|
||
|
.product-size li{
|
||
|
list-style-type: none;
|
||
|
float: left;
|
||
|
margin: 0px 10px;
|
||
|
|
||
|
}
|
||
|
.product-size li a{
|
||
|
text-align: center;
|
||
|
border-radius: 50%;
|
||
|
border: 1px solid #2eb18d;
|
||
|
float: left;
|
||
|
width: 50px;
|
||
|
height: 50px;
|
||
|
line-height: 50px;
|
||
|
color: #2eb18d;
|
||
|
}
|
||
|
.product-size li a:hover{
|
||
|
border: 1px solid #ccc;
|
||
|
}
|
||
|
.product-size li.active a{
|
||
|
background:#2eb18d;
|
||
|
text-align: center;
|
||
|
border-radius: 50%;
|
||
|
border: 1px solid #2eb18d;
|
||
|
float: left;
|
||
|
width: 50px;
|
||
|
height: 50px;
|
||
|
line-height: 50px;
|
||
|
color: #fff !important;
|
||
|
}
|
||
|
/*end of part 21----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[22. Panel]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.panel{
|
||
|
padding: 10px;
|
||
|
background-color: #FFF;
|
||
|
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
|
||
|
}
|
||
|
.panel .title{
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
}
|
||
|
/*end of part 22----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[23. Bouble Menu]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.bouble-link{
|
||
|
position: fixed;
|
||
|
z-index: 777;
|
||
|
display: block;
|
||
|
width: 46px;
|
||
|
height: 46px;
|
||
|
border-radius: 50%;
|
||
|
bottom: 30px;
|
||
|
right: 30px;
|
||
|
line-height: 46px;
|
||
|
text-align: center;
|
||
|
-webkit-box-shadow: 2px 2px 15px 0px rgba(0,0,0,0.2);
|
||
|
-moz-box-shadow: 2px 2px 15px 0px rgba(0,0,0,0.2);
|
||
|
box-shadow: 2px 2px 15px 0px rgba(0,0,0,0.2);
|
||
|
font-size: 18px;
|
||
|
}
|
||
|
/*end of part 23----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[24. Page Loader]
|
||
|
*------------------------------------------------------------------*/
|
||
|
|
||
|
|
||
|
.sweet-loader{
|
||
|
position: fixed;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
z-index: 1000000;
|
||
|
background-color: rgba(255,255,255,0.9);
|
||
|
display: none;
|
||
|
opacity: 0;
|
||
|
-webkit-transition: opacity .3s ease-in-out;
|
||
|
-moz-transition: opacity .3s ease-in-out;
|
||
|
-o-transition: opacity .3s ease-in-out;
|
||
|
transition: opacity .3s ease-in-out;
|
||
|
|
||
|
}
|
||
|
.sweet-loader.show{
|
||
|
display: block;
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
.sweet-loader.show .box {
|
||
|
width: 70px;
|
||
|
height: 24px;
|
||
|
text-align: center;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
margin-top:-12px;
|
||
|
left: 50%;
|
||
|
margin-left: -35px;
|
||
|
}
|
||
|
|
||
|
.sweet-loader.show .box > div {
|
||
|
width: 18px;
|
||
|
height: 18px;
|
||
|
background-color: #2eb18d;
|
||
|
|
||
|
border-radius: 100%;
|
||
|
display: inline-block;
|
||
|
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||
|
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||
|
}
|
||
|
|
||
|
.sweet-loader.show .box .circle1 {
|
||
|
-webkit-animation-delay: -0.32s;
|
||
|
animation-delay: -0.32s;
|
||
|
}
|
||
|
|
||
|
.sweet-loader.show .box .circle2 {
|
||
|
-webkit-animation-delay: -0.16s;
|
||
|
animation-delay: -0.16s;
|
||
|
}
|
||
|
|
||
|
@-webkit-keyframes sk-bouncedelay {
|
||
|
0%, 80%, 100% { -webkit-transform: scale(0) }
|
||
|
40% { -webkit-transform: scale(1.0) }
|
||
|
}
|
||
|
|
||
|
@keyframes sk-bouncedelay {
|
||
|
0%, 80%, 100% {
|
||
|
-webkit-transform: scale(0);
|
||
|
transform: scale(0);
|
||
|
} 40% {
|
||
|
-webkit-transform: scale(1.0);
|
||
|
transform: scale(1.0);
|
||
|
}
|
||
|
}
|
||
|
/*end of part 24----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[25. Responsive Media Queries]
|
||
|
*------------------------------------------------------------------*/
|
||
|
@media screen and (min-width: 480px) {
|
||
|
body {
|
||
|
font-size: 16px;
|
||
|
}
|
||
|
header{
|
||
|
padding: 10px 20px;
|
||
|
}
|
||
|
section.container,
|
||
|
div.container{
|
||
|
padding: 0 20px;
|
||
|
}
|
||
|
nav.menu{
|
||
|
width: 300px;
|
||
|
}
|
||
|
.form-label-divider span{
|
||
|
top: -10px;
|
||
|
}
|
||
|
.post-detail{
|
||
|
padding: 20px;
|
||
|
}
|
||
|
.search-result-header{
|
||
|
margin: -10px -20px 20px -20px;
|
||
|
}
|
||
|
.search-result-header .form-element{
|
||
|
padding: 0 20px;
|
||
|
}
|
||
|
.search-result-header .search-result-btn{
|
||
|
right: 10px;
|
||
|
}
|
||
|
h1 .button{
|
||
|
font-size: 16px;
|
||
|
}
|
||
|
}
|
||
|
/*end of part 25----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*------------------------------------------------------------------
|
||
|
[26. Background Color Helpers]
|
||
|
|
||
|
Orange / .orange #2eb18d
|
||
|
Red / .red #F34954
|
||
|
Purple / .purple #7A5AAD
|
||
|
Turquoise/ .turquoise #30BFBB
|
||
|
Green / .green #27AE61
|
||
|
Blue / .blue #2A80BB
|
||
|
Yellow / .yellow #CCA000
|
||
|
White / .white #FFFFFF
|
||
|
-------------------------------------------------------------------*/
|
||
|
.orange{
|
||
|
background-color: #2eb18d;
|
||
|
}
|
||
|
.red{
|
||
|
background-color: #F34954;
|
||
|
}
|
||
|
.purple{
|
||
|
background-color: #7A5AAD;
|
||
|
}
|
||
|
.turquoise{
|
||
|
background-color: #30BFBB;
|
||
|
}
|
||
|
.green{
|
||
|
background-color: #27AE61;
|
||
|
}
|
||
|
.blue{
|
||
|
background-color: #2A80BB;
|
||
|
}
|
||
|
.yellow{
|
||
|
background-color: #CCA000;
|
||
|
}
|
||
|
.white{
|
||
|
background-color: #FFFFFF;
|
||
|
color: #464646;
|
||
|
}
|
||
|
/*end of part 26----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[27. Text Helpers]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.txt-center{
|
||
|
text-align: center;
|
||
|
}
|
||
|
.txt-left{
|
||
|
text-align: left;
|
||
|
}
|
||
|
.txt-right{
|
||
|
text-align: right;
|
||
|
}
|
||
|
.txt-orange{
|
||
|
color: #2eb18d;
|
||
|
}
|
||
|
.txt-red{
|
||
|
color: #F34954;
|
||
|
}
|
||
|
.txt-purple{
|
||
|
color: #7A5AAD;
|
||
|
}
|
||
|
.txt-turquoise{
|
||
|
color: #30BFBB;
|
||
|
}
|
||
|
.txt-green{
|
||
|
color: #33cb4d ;
|
||
|
}
|
||
|
.txt-blue{
|
||
|
color: #2A80BB;
|
||
|
}
|
||
|
.txt-yellow{
|
||
|
color: #CCA000;
|
||
|
}
|
||
|
.txt-default{
|
||
|
color: #464646;
|
||
|
}
|
||
|
.txt-white{
|
||
|
color: #FFFFFF;
|
||
|
}
|
||
|
.txt-bold{
|
||
|
font-weight: bold;
|
||
|
font-weight: 700;
|
||
|
}
|
||
|
.txt-extra-bold{
|
||
|
font-weight: bold;
|
||
|
font-weight: 900;
|
||
|
}
|
||
|
.txt-normal{
|
||
|
font-weight: normal;
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
.txt-light{
|
||
|
font-weight: lighter;
|
||
|
font-weight: 300;
|
||
|
}
|
||
|
.o-hidden{
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
/*end of part 27----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[28. Text Animations]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.animated-text{
|
||
|
text-align: center;
|
||
|
position: relative;
|
||
|
}
|
||
|
.animated-text h1{
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
position: relative;
|
||
|
}
|
||
|
.animated-text .text1{
|
||
|
font-size: 24px;
|
||
|
display: block;
|
||
|
}
|
||
|
.animated-text .text2{
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
.animated-text .text3{
|
||
|
display: block;
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
.animated-text .text4{
|
||
|
display: block;
|
||
|
font-size: 36px;
|
||
|
}
|
||
|
.animated-text .text5{
|
||
|
display: block;
|
||
|
font-size: 36px;
|
||
|
}
|
||
|
.animated-text .text6{
|
||
|
display: block;
|
||
|
font-size: 36px;
|
||
|
}
|
||
|
.animated-text .text7{
|
||
|
font-size: 14px;
|
||
|
display: block;
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
/*end of part 28----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
/*Other Styles and helpers------------------------------------------*/
|
||
|
.block{
|
||
|
display: block;
|
||
|
}
|
||
|
.hide{
|
||
|
display: none !important;
|
||
|
}
|
||
|
.animated{
|
||
|
display: block !important;
|
||
|
opacity: 1;
|
||
|
}
|
||
|
.zero-opacity{
|
||
|
opacity: 0;
|
||
|
}
|
||
|
|
||
|
h1 .button{
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[29. CUSTOMIZE THE CAROUSEL]
|
||
|
*------------------------------------------------------------------*/
|
||
|
|
||
|
|
||
|
|
||
|
/* Carousel base class */
|
||
|
|
||
|
/* Since positioning the image, we need to help out the caption */
|
||
|
.carousel-caption {
|
||
|
z-index: 1;
|
||
|
}
|
||
|
|
||
|
/* Declare heights because of positioning of img element */
|
||
|
.carousel .item {
|
||
|
height: 400px;
|
||
|
background-color:#555;
|
||
|
}
|
||
|
.carousel img {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
min-height: 218px;
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
/* MARKETING CONTENT
|
||
|
-------------------------------------------------- */
|
||
|
|
||
|
/* Pad the edges of the mobile views a bit */
|
||
|
.marketing {
|
||
|
padding-left: 15px;
|
||
|
padding-right: 15px;
|
||
|
}
|
||
|
|
||
|
/* Center align the text within the three columns below the carousel */
|
||
|
.marketing .col-lg-4 {
|
||
|
text-align: center;
|
||
|
margin-bottom: 20px;
|
||
|
}
|
||
|
.marketing h2 {
|
||
|
font-weight: normal;
|
||
|
}
|
||
|
.marketing .col-lg-4 p {
|
||
|
margin-left: 10px;
|
||
|
margin-right: 10px;
|
||
|
}
|
||
|
|
||
|
|
||
|
/* Featurettes
|
||
|
------------------------- */
|
||
|
|
||
|
.featurette-divider {
|
||
|
margin: 80px 0; /* Space out the Bootstrap <hr> more */
|
||
|
}
|
||
|
.featurette {
|
||
|
padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
|
||
|
overflow: hidden; /* Vertically center images part 2: clear their floats. */
|
||
|
}
|
||
|
.featurette-image {
|
||
|
margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
|
||
|
}
|
||
|
|
||
|
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
|
||
|
.featurette-image.pull-left {
|
||
|
margin-right: 40px;
|
||
|
}
|
||
|
.featurette-image.pull-right {
|
||
|
margin-left: 40px;
|
||
|
}
|
||
|
|
||
|
/* Thin out the marketing headings */
|
||
|
.featurette-heading {
|
||
|
font-size: 50px;
|
||
|
font-weight: 300;
|
||
|
line-height: 1;
|
||
|
letter-spacing: -1px;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
/* RESPONSIVE CSS
|
||
|
-------------------------------------------------- */
|
||
|
|
||
|
@media (min-width: 768px) {
|
||
|
|
||
|
/* Remve the edge padding needed for mobile */
|
||
|
.marketing {
|
||
|
padding-left: 0;
|
||
|
padding-right: 0;
|
||
|
}
|
||
|
|
||
|
/* Navbar positioning foo */
|
||
|
.navbar-wrapper {
|
||
|
margin-top: 20px;
|
||
|
margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
|
||
|
}
|
||
|
/* The navbar becomes detached from the top, so we round the corners */
|
||
|
.navbar-wrapper .navbar {
|
||
|
border-radius: 4px;
|
||
|
}
|
||
|
|
||
|
/* Bump up size of carousel content */
|
||
|
.carousel-caption p {
|
||
|
margin-bottom: 20px;
|
||
|
font-size: 21px;
|
||
|
line-height: 1.4;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
.margin{
|
||
|
margin-top: 49px;
|
||
|
}
|
||
|
/*end of part 28----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[30. Home Tabs]
|
||
|
*------------------------------------------------------------------*/
|
||
|
|
||
|
#content-body {
|
||
|
flex:1;
|
||
|
min-height:170px;
|
||
|
flex-direction: column;
|
||
|
background: #fff;
|
||
|
border: 1px solid #e6e6e6;
|
||
|
}
|
||
|
.round{
|
||
|
border-radius: 19px;
|
||
|
background: #f7c558; /* Old browsers */
|
||
|
background: -moz-linear-gradient(top, #f7c558 0%, #e26f25 100%); /* FF3.6-15 */
|
||
|
background: -webkit-linear-gradient(top, #f7c558 0%,#e26f25 100%); /* Chrome10-25,Safari5.1-6 */
|
||
|
background: linear-gradient(to bottom, #f7c558 0%,#e26f25 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7c558', endColorstr='#e26f25',GradientType=0 ); /* IE6-9 */
|
||
|
padding: 15px;
|
||
|
}
|
||
|
.app{
|
||
|
background: #f76b71; /* Old browsers */
|
||
|
background: -moz-linear-gradient(top, #f76b71 1%, #de2125 100%); /* FF3.6-15 */
|
||
|
background: -webkit-linear-gradient(top, #f76b71 1%,#de2125 100%); /* Chrome10-25,Safari5.1-6 */
|
||
|
background: linear-gradient(to bottom, #f76b71 1%,#de2125 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f76b71', endColorstr='#de2125',GradientType=0 ); /* IE6-9 */
|
||
|
border-radius: 19px;
|
||
|
padding: 15px;
|
||
|
}
|
||
|
.hot{
|
||
|
background: #70b2fe; /* Old browsers */
|
||
|
background: -moz-linear-gradient(top, #70b2fe 0%, #3378f7 100%); /* FF3.6-15 */
|
||
|
background: -webkit-linear-gradient(top, #70b2fe 0%,#3378f7 100%); /* Chrome10-25,Safari5.1-6 */
|
||
|
background: linear-gradient(to bottom, #70b2fe 0%,#3378f7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70b2fe', endColorstr='#3378f7',GradientType=0 ); /* IE6-9 */
|
||
|
border-radius: 19px;
|
||
|
padding: 15px;
|
||
|
}
|
||
|
.vip{
|
||
|
background: #9f6dfe; /* Old browsers */
|
||
|
background: -moz-linear-gradient(top, #9f6dfe 0%, #6a1ff4 100%); /* FF3.6-15 */
|
||
|
background: -webkit-linear-gradient(top, #9f6dfe 0%,#6a1ff4 100%); /* Chrome10-25,Safari5.1-6 */
|
||
|
background: linear-gradient(to bottom, #9f6dfe 0%,#6a1ff4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9f6dfe', endColorstr='#6a1ff4',GradientType=0 ); /* IE6-9 */
|
||
|
border-radius: 19px;
|
||
|
padding: 15px;
|
||
|
}
|
||
|
.brands{
|
||
|
background: #7ff0f1; /* Old browsers */
|
||
|
background: -moz-linear-gradient(top, #7ff0f1 0%, #39b4fe 100%); /* FF3.6-15 */
|
||
|
background: -webkit-linear-gradient(top, #7ff0f1 0%,#39b4fe 100%); /* Chrome10-25,Safari5.1-6 */
|
||
|
background: linear-gradient(to bottom, #7ff0f1 0%,#39b4fe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ff0f1', endColorstr='#39b4fe',GradientType=0 ); /* IE6-9 */
|
||
|
border-radius: 19px;
|
||
|
padding: 15px;
|
||
|
}
|
||
|
.flash{
|
||
|
background: #c5f493; /* Old browsers */
|
||
|
background: -moz-linear-gradient(top, #1ddc3e 0%, #28a745 100%); /* FF3.6-15 */
|
||
|
background: -webkit-linear-gradient(top, #1ddc3e 0%,#28a745 100%); /* Chrome10-25,Safari5.1-6 */
|
||
|
background: linear-gradient(to bottom, #1ddc3e 0%,#28a745 100%) /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ddc3e', endColorstr='#28a745',GradientType=0 ); /* IE6-9 */
|
||
|
border-radius: 19px;
|
||
|
padding: 15px;
|
||
|
}
|
||
|
|
||
|
.content-row {
|
||
|
display:flex;
|
||
|
flex:1;
|
||
|
}
|
||
|
.content-col {
|
||
|
padding:23px 0px;
|
||
|
width:33.33%;
|
||
|
text-align:center;
|
||
|
font-size:14px;
|
||
|
float: left;
|
||
|
clear: both;
|
||
|
}
|
||
|
.content-col:last-child {
|
||
|
border-right: none;
|
||
|
}
|
||
|
.content-row:last-child {
|
||
|
border-bottom:none;
|
||
|
}
|
||
|
.content-col>i {
|
||
|
width:55px;
|
||
|
|
||
|
font-size:25px;
|
||
|
color: #fff;
|
||
|
margin-bottom:10px;
|
||
|
}
|
||
|
.content-col span{
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
/*end of part 30----------------------------------------------------*/
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[31. Content Styles]
|
||
|
*------------------------------------------------------------------*/
|
||
|
.dash-balance{
|
||
|
background: url(../img/content/dash-bg.jpg) no-repeat center center;
|
||
|
background-size: cover;
|
||
|
position: relative;
|
||
|
overflow: hidden;
|
||
|
padding: 40px 20px 70px;
|
||
|
}
|
||
|
.dash-balance:before{
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
width: 103%;
|
||
|
height: 100%;
|
||
|
left: -3px;
|
||
|
right: 0px;
|
||
|
bottom: -1px;
|
||
|
background: url(../img/content/curve.svg) no-repeat bottom;
|
||
|
z-index: 0;
|
||
|
}
|
||
|
.dash-content h3{
|
||
|
display: inline-block;
|
||
|
}
|
||
|
.bal-section{
|
||
|
position: relative;
|
||
|
margin-top: -70px
|
||
|
}
|
||
|
.flex-grow {
|
||
|
-webkit-box-flex: 1;
|
||
|
-ms-flex-positive: 1;
|
||
|
flex-grow: 1;
|
||
|
}
|
||
|
.balance-card{
|
||
|
background: url(../img/content/b1-bg.png) no-repeat;
|
||
|
background-size: cover;
|
||
|
padding: 30px 20px;
|
||
|
border-radius: 10px
|
||
|
}
|
||
|
@media(min-width: 992px){
|
||
|
.balance-card{
|
||
|
background-position: center;
|
||
|
}
|
||
|
.dash-balance:before{
|
||
|
background: none
|
||
|
}
|
||
|
}
|
||
|
.b-val{
|
||
|
margin: 0;
|
||
|
color: #fff;
|
||
|
line-height: 1;
|
||
|
margin-bottom: 5px;
|
||
|
font-size: 32px;
|
||
|
font-weight: 700;
|
||
|
}
|
||
|
.balance-card .badge{
|
||
|
background-color: rgba(255, 255, 255, 0.2);
|
||
|
padding: 10px 15px;
|
||
|
}
|
||
|
.balance-card .badge i{
|
||
|
color: #1ce93f
|
||
|
}
|
||
|
.resources-card-wrapper {
|
||
|
display: -webkit-box;
|
||
|
display: -ms-flexbox;
|
||
|
display: flex;
|
||
|
-ms-flex-pack: distribute;
|
||
|
justify-content: space-around;
|
||
|
}
|
||
|
.resources-card {
|
||
|
width: 49%;
|
||
|
padding: 25px 15px;
|
||
|
border-radius: 3px;
|
||
|
background: #ffffff;
|
||
|
-webkit-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
|
||
|
box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
|
||
|
z-index: 10;
|
||
|
}
|
||
|
.resources-card i{
|
||
|
font-size: 20px;
|
||
|
margin-bottom: 5px
|
||
|
}
|
||
|
|
||
|
.transaction-list img{
|
||
|
max-width: 40px;
|
||
|
max-height: 40px
|
||
|
}
|
||
|
.transaction-list{
|
||
|
margin-bottom: 30px
|
||
|
}
|
||
|
.transaction-list li{
|
||
|
background: #fff;
|
||
|
padding: 10px;
|
||
|
border-radius: 10px;
|
||
|
margin: 0 0 10px;
|
||
|
box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.02);
|
||
|
}
|
||
|
.coin-name{
|
||
|
margin: 0;
|
||
|
font-weight: 600;
|
||
|
|
||
|
}
|
||
|
|
||
|
.buy-card{
|
||
|
background-image: linear-gradient(-12deg,#a1c4fc 0,#8473ee 100%);
|
||
|
width: 49%;
|
||
|
padding: 30px 15px;
|
||
|
border-radius: 3px;
|
||
|
-webkit-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
|
||
|
box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
|
||
|
}
|
||
|
.buy-card h4{
|
||
|
margin: 10px 0 5px;
|
||
|
color: #fff;
|
||
|
font-weight: 600
|
||
|
}
|
||
|
.buy-card p{
|
||
|
margin: 5px 0;
|
||
|
font-weight: 400
|
||
|
}
|
||
|
|
||
|
.crypto-b{
|
||
|
display: -ms-flexbox;
|
||
|
display: flex;
|
||
|
-ms-flex-align: center;
|
||
|
align-items: center;
|
||
|
text-align: left;
|
||
|
width: 100%;
|
||
|
margin-right: 10px;
|
||
|
padding: 15px 13px
|
||
|
}
|
||
|
@media(max-width: 400px){
|
||
|
|
||
|
.crypto-b{
|
||
|
margin-right: 10px;
|
||
|
flex: 1;
|
||
|
}
|
||
|
}
|
||
|
.live-trade{
|
||
|
padding: 0 15px
|
||
|
}
|
||
|
.crypto-b .coin-name{
|
||
|
color: #fff
|
||
|
}
|
||
|
.crypto-b i{
|
||
|
font-size: 20px;
|
||
|
width: 35px;
|
||
|
height: 35px;
|
||
|
font-weight: 500;
|
||
|
text-align: center;
|
||
|
padding: 3px;
|
||
|
border: 1px solid #fff;
|
||
|
border-radius: 50%;
|
||
|
color: #fff;
|
||
|
}
|
||
|
.coin-box{
|
||
|
background: #fff;
|
||
|
padding: 17px 15px;
|
||
|
border: 1px solid #eee;
|
||
|
}
|
||
|
.img-xs{
|
||
|
max-width: 60px
|
||
|
}
|
||
|
.ref-card{
|
||
|
padding: 20px 15px;
|
||
|
border-radius: 10px;
|
||
|
margin-bottom: 15px;
|
||
|
background-size: cover !important
|
||
|
}
|
||
|
.ref-card .badge {
|
||
|
background-color: rgba(255, 255, 255, 0.2);
|
||
|
padding: 10px 15px;
|
||
|
}
|
||
|
.ref-card.c1{
|
||
|
background: url(../img/content/ref1.png) no-repeat center center;
|
||
|
}
|
||
|
.ref-card.c2{
|
||
|
background: url(../img/content/ref2.png) no-repeat center center;
|
||
|
}
|
||
|
.ref-card.c3{
|
||
|
background: url(../img/content/ref3.png) no-repeat center center;
|
||
|
}
|
||
|
|
||
|
.refer #content-body{
|
||
|
padding-top: 0;
|
||
|
padding-bottom: 30px
|
||
|
}
|
||
|
.refer .content-head{
|
||
|
position: relative;
|
||
|
padding: 20px 15px;
|
||
|
margin-bottom: 30px
|
||
|
}
|
||
|
.ref-bouns{
|
||
|
background: orange;
|
||
|
position: absolute;
|
||
|
text-align: center;
|
||
|
right: 15px;
|
||
|
color: #fff;
|
||
|
top: 0;
|
||
|
padding: 10px;
|
||
|
}
|
||
|
.ref-content{
|
||
|
padding: 0 15px
|
||
|
}
|
||
|
.ref-content .button{
|
||
|
margin-top: 10px
|
||
|
}
|
||
|
.ref-copy{
|
||
|
position: absolute;
|
||
|
right: -6px;
|
||
|
background: #00adf2;
|
||
|
width: 40px;
|
||
|
height: 40px;
|
||
|
color: #fff;
|
||
|
text-align: center;
|
||
|
line-height: 40px;
|
||
|
}
|
||
|
.ref-statistics{
|
||
|
width: 49%;
|
||
|
padding: 25px 15px;
|
||
|
border-radius: 3px;
|
||
|
background: #ffffff;
|
||
|
-webkit-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
|
||
|
box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
|
||
|
text-align: center;
|
||
|
margin-top: 15px;
|
||
|
}
|
||
|
.ref-statistics p{
|
||
|
margin-bottom: 0
|
||
|
}
|
||
|
|
||
|
|
||
|
/*Live crypto widgets*/
|
||
|
.widget_logo{display: none;}
|
||
|
|
||
|
|
||
|
.amcharts-graph-column-front.amcharts-graph-column-element,
|
||
|
.amcharts-legend-marker{
|
||
|
fill:#8688ff;
|
||
|
stroke: #8688ff
|
||
|
}
|
||
|
.amcharts-graph-stroke{
|
||
|
stroke: #8688ff;
|
||
|
}
|
||
|
.amcharts-graph-fill{
|
||
|
fill:#8688ff
|
||
|
}
|
||
|
.ccc-widget.ccc-chart-v3{
|
||
|
margin-bottom: 15px
|
||
|
}
|
||
|
.chartTypeTabLinks{
|
||
|
display: none;
|
||
|
}
|
||
|
.tabsPeriodsContainer{
|
||
|
margin-top: 20px
|
||
|
}
|
||
|
#marketsContainerUSD{
|
||
|
display: none !important;
|
||
|
}
|
||
|
.cryptocompare-logo{
|
||
|
display: none;
|
||
|
}
|
||
|
.img-affa-wrapper{
|
||
|
padding: 20px;
|
||
|
border: 2px dashed #8688ff;
|
||
|
margin-bottom: 30px;
|
||
|
}
|
||
|
.content-head{
|
||
|
padding: 10px 15px;
|
||
|
border-bottom: 1px solid #eee;
|
||
|
}
|
||
|
|
||
|
.wallet-card{
|
||
|
width: 49%;
|
||
|
padding: 15px 10px;
|
||
|
text-align: center;
|
||
|
border-radius: 3px;
|
||
|
-webkit-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
|
||
|
box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
|
||
|
}
|
||
|
.purp{
|
||
|
background-image: linear-gradient(-12deg,#a1c4fc 0,#8473ee 100%) !important;
|
||
|
}
|
||
|
.wallet-card .c-icon{
|
||
|
font-size: 26px;
|
||
|
color: #fff
|
||
|
}
|
||
|
.wallet-card h3{
|
||
|
margin: 10px 0;
|
||
|
font-size: 16px
|
||
|
}
|
||
|
|
||
|
.wallets-list{
|
||
|
position: relative;
|
||
|
}
|
||
|
.wallets-list h3{
|
||
|
color: #fff
|
||
|
}
|
||
|
.wallets-list i{
|
||
|
color: #fff;
|
||
|
margin-right: 10px;
|
||
|
border: 1px solid #fff;
|
||
|
width: 30px;
|
||
|
display: inline-block;
|
||
|
height: 30px;
|
||
|
line-height: 27px;
|
||
|
border-radius: 50%;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.wallets-list .form-row-group.with-icons .form-row i{
|
||
|
top: -2px;
|
||
|
border: none;
|
||
|
}
|
||
|
.wallets-list .expandable-item.active .expandable-content{
|
||
|
min-height: 800px
|
||
|
}
|
||
|
.recent-trans{
|
||
|
position: relative;
|
||
|
padding: 30px 15px;
|
||
|
background: url(../img/content/trans-bg1.png) no-repeat bottom center;
|
||
|
border-radius: 15px;
|
||
|
background-size: cover;
|
||
|
}
|
||
|
.recent-trans .dropdown-menu-list:before{
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
left: 31px;
|
||
|
width: 0px;
|
||
|
transform: translateY(-50%);
|
||
|
height: 77%;
|
||
|
border: 1px dashed rgba(255,255,255,.4);
|
||
|
|
||
|
}
|
||
|
.recent-trans .dropdown-menu-list li {
|
||
|
width: 100%;
|
||
|
display: block;
|
||
|
position: relative;
|
||
|
padding: 15px 0 15px 0;
|
||
|
border-bottom: 1px solid transparent;
|
||
|
}
|
||
|
.recent-trans .dropdown-menu-list li strong{
|
||
|
color: #fff
|
||
|
}
|
||
|
.recent-trans .dropdown-menu-list li:after{
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
bottom: 0;
|
||
|
right: 0;
|
||
|
width: 87%;
|
||
|
height: 1px;
|
||
|
background: rgba(255,255,255,.4)
|
||
|
}
|
||
|
.recent-trans .time{
|
||
|
display: block;
|
||
|
margin-top: 5px;
|
||
|
color: #ede6e6
|
||
|
}
|
||
|
.recent-trans .notice-icon i {
|
||
|
border-radius: 50%;
|
||
|
-o-border-radius: 50%;
|
||
|
-ms-border-radius: 50%;
|
||
|
-moz-border-radius: 50%;
|
||
|
-webkit-border-radius: 50%;
|
||
|
height: 35px;
|
||
|
width: 35px;
|
||
|
background: #5776d5;
|
||
|
line-height: 35px;
|
||
|
float: left;
|
||
|
display: inline-block;
|
||
|
text-align: center;
|
||
|
margin-right: 15px;
|
||
|
color: #ffffff;
|
||
|
margin-top: 5px;
|
||
|
}
|
||
|
.wallet-address{
|
||
|
position: relative;
|
||
|
padding: 30px 15px;
|
||
|
background: url(../img/content/trans-bg2.png) no-repeat center;
|
||
|
border-radius: 0 0 15px 15px;
|
||
|
text-align: center;
|
||
|
overflow: hidden;
|
||
|
background-size: cover;
|
||
|
}
|
||
|
.wallet-address:before{
|
||
|
position: absolute;
|
||
|
content: '';
|
||
|
width: 98%;
|
||
|
left: 50%;
|
||
|
top: 0;
|
||
|
transform: translateX(-50%);
|
||
|
height: 1px;
|
||
|
border-top: 1px dashed #fff;
|
||
|
}
|
||
|
.wallet-address h4{
|
||
|
color: #fff;
|
||
|
margin-bottom: 10px
|
||
|
}
|
||
|
.wallet-address .icon{
|
||
|
position: absolute;
|
||
|
max-width: 15px;
|
||
|
top: 12px;
|
||
|
}
|
||
|
.member-img {
|
||
|
width: 44px;
|
||
|
height: 44px;
|
||
|
display: block;
|
||
|
float: left;
|
||
|
overflow: hidden;
|
||
|
border-radius: 50%;
|
||
|
padding: 3px;
|
||
|
background: #FFF;
|
||
|
border: solid 1px #2eb18d;
|
||
|
}
|
||
|
.member-img img {
|
||
|
width: 36px;
|
||
|
height: 36px;
|
||
|
border-radius: 50%;
|
||
|
}
|
||
|
.add-receiever{
|
||
|
position: relative;
|
||
|
border: 1px solid #eee;
|
||
|
background-image: linear-gradient(-12deg,#a1c4fc 0,#8473ee 100%);
|
||
|
border-radius: 10px;
|
||
|
padding: 20px 5px;
|
||
|
width: 94%;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.add-receiever i{
|
||
|
width: 40px;
|
||
|
height: 40px;
|
||
|
line-height: 40px;
|
||
|
color: #9ffcae;
|
||
|
border-radius: 50%;
|
||
|
background: rgba(255, 255, 255, .3);
|
||
|
}
|
||
|
.add-receiever h4{
|
||
|
font-size: 15px;
|
||
|
margin: 15px 0 0;
|
||
|
color: #fff
|
||
|
}
|
||
|
.money-receiver{
|
||
|
position: relative;
|
||
|
border: 1px solid #eee;
|
||
|
background: #fff;
|
||
|
border-radius: 10px;
|
||
|
margin-bottom: 0px;
|
||
|
padding: 15px 5px;
|
||
|
width: 94%;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.money-receiver img{
|
||
|
border-radius: 50%;
|
||
|
padding: 5px;
|
||
|
max-width: 50px;
|
||
|
border: 1px solid #00b1f2;
|
||
|
}
|
||
|
.money-receiver h4{
|
||
|
font-size: 15px;
|
||
|
margin: 15px 0 0;
|
||
|
}
|
||
|
.calc-crr{
|
||
|
width: 40%;
|
||
|
float: left;
|
||
|
}
|
||
|
.calc-crr-mid{
|
||
|
width: 10%;
|
||
|
margin: 5%;
|
||
|
float: left;
|
||
|
}
|
||
|
.transaction-details li {
|
||
|
background: #fff;
|
||
|
padding: 7px 10px;
|
||
|
border-radius: 10px;
|
||
|
border: 1px solid #ddd;
|
||
|
margin: 6px 0;
|
||
|
box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.02);
|
||
|
}
|
||
|
|
||
|
.notification-list{
|
||
|
margin:0 20px;
|
||
|
margin-top: -20px;
|
||
|
background: #fff;
|
||
|
border: 1px solid #eee;
|
||
|
box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.02);
|
||
|
}
|
||
|
.notification-list li{
|
||
|
padding: 7px 10px 10px;
|
||
|
border-bottom: 1px solid #eee;
|
||
|
margin: 6px 0;
|
||
|
}
|
||
|
.notification-list li:last-child{
|
||
|
padding: 10px;
|
||
|
background: #eee;
|
||
|
margin: -6px 0 0;
|
||
|
}
|
||
|
.notification-list li a{
|
||
|
font-weight: 600
|
||
|
}
|
||
|
.notification-list .notice-icon{
|
||
|
border-radius: 50%;
|
||
|
height: 30px;
|
||
|
width: 30px;
|
||
|
font-size: 14px;
|
||
|
line-height: 31px;
|
||
|
display: inline-block;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.available{
|
||
|
background-color: #4CAF50;
|
||
|
}
|
||
|
.away{
|
||
|
background-color: rgba(255,193,7,1);
|
||
|
}
|
||
|
.busy{
|
||
|
background-color: rgba(240,80,80,1);
|
||
|
}
|
||
|
.notification-list .notice-icon i{
|
||
|
color: #ffffff;
|
||
|
}
|
||
|
.notification{
|
||
|
position: absolute;
|
||
|
right: 0;
|
||
|
transform: translateY(-50%);
|
||
|
top: 50%;
|
||
|
}
|
||
|
.notification i{
|
||
|
font-size: 18px;
|
||
|
color: #fff
|
||
|
}
|
||
|
.c-panel{
|
||
|
background: #fff;
|
||
|
position: relative;
|
||
|
border: 1px solid #e6e6e6;
|
||
|
padding: 30px 15px;
|
||
|
}
|
||
|
.has-shadow{
|
||
|
-webkit-box-shadow: 0 2px 28px rgba(0,0,0,.1);
|
||
|
box-shadow: 0 2px 28px rgba(0,0,0,.1);
|
||
|
}
|
||
|
|
||
|
ul.adv-stats li {
|
||
|
display: inline-block;
|
||
|
color: gray;
|
||
|
padding: 4px 6px;
|
||
|
margin: 3px;
|
||
|
}
|
||
|
ul.adv-stats {
|
||
|
margin: 0px 0 0;
|
||
|
padding: 0
|
||
|
}
|
||
|
ul.adv-stats li span {
|
||
|
margin-left: 3px;
|
||
|
}
|
||
|
ul.adv-stats li:nth-child(1), ul.adv-stats li:nth-child(1) .fa {
|
||
|
color: #FF9800;
|
||
|
}
|
||
|
ul.adv-stats li:nth-child(2), ul.adv-stats li:nth-child(2) .fa {
|
||
|
color: #6e91cb;
|
||
|
}
|
||
|
ul.adv-stats li:nth-child(3), ul.adv-stats li:nth-child(3) .fa {
|
||
|
color: #F782AA;
|
||
|
}
|
||
|
ul.adv-stats li:nth-child(4), ul.adv-stats li:nth-child(4) .fa {
|
||
|
color: #3bcfb4;
|
||
|
}
|
||
|
ul.adv-stats li:nth-child(5), ul.adv-stats li:nth-child(5) .fa {
|
||
|
color: #968f8f;
|
||
|
}
|
||
|
|
||
|
.chart-height-sm {
|
||
|
position: relative;
|
||
|
height: 156px;
|
||
|
}
|
||
|
.advertising-wrapper {
|
||
|
position: relative;
|
||
|
}
|
||
|
.advertising-wrapper h3.info-label span {
|
||
|
font-weight: 100;
|
||
|
display: block;
|
||
|
font-size: 16px;
|
||
|
margin-bottom: 5px;
|
||
|
}
|
||
|
.advertising-wrapper h3.info-label {
|
||
|
position: absolute;
|
||
|
left: 50%;
|
||
|
right: 50%;
|
||
|
width: 100px;
|
||
|
margin-left: -50px;
|
||
|
top: 50%;
|
||
|
text-align: center;
|
||
|
color: #0094f0;
|
||
|
height: 48px;
|
||
|
margin-top: -24px;
|
||
|
}
|
||
|
@media (max-width:480px) {
|
||
|
.split-list{
|
||
|
text-align: center;
|
||
|
margin-top: 15px
|
||
|
}
|
||
|
.b-val{
|
||
|
font-size: 22px
|
||
|
}
|
||
|
.balance-card {
|
||
|
padding: 30px 15px;
|
||
|
}
|
||
|
}
|
||
|
ul.income-list li {
|
||
|
float: left;
|
||
|
margin: 0;
|
||
|
padding: 10px;
|
||
|
box-sizing: border-box;
|
||
|
text-align: center;
|
||
|
width: 33.3333%;
|
||
|
}
|
||
|
|
||
|
.trader-info{
|
||
|
text-align: center;
|
||
|
}
|
||
|
.trader-info h3{
|
||
|
font-size: 18px;
|
||
|
margin-bottom: 10px;
|
||
|
line-height: 1;
|
||
|
}
|
||
|
.trader-info p{
|
||
|
margin: 0
|
||
|
}
|
||
|
.trader-info-list{
|
||
|
margin-top: 15px;
|
||
|
background: #fff;
|
||
|
border: 1px solid #eee;
|
||
|
padding: 30px 0px;
|
||
|
}
|
||
|
.trader-info-list li{
|
||
|
width: 32%;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
.trader-info-list li h2{
|
||
|
margin-bottom: 0;
|
||
|
color: #72a1ec;
|
||
|
font-size: 16px;
|
||
|
font-weight: 700;
|
||
|
}
|
||
|
/*end of part 31----------------------------------------------------*/
|
||
|
|
||
|
|
||
|
/*-------------------------------------------------------------------
|
||
|
[32. Home Tabs]
|
||
|
*------------------------------------------------------------------*/
|
||
|
|
||
|
footer {
|
||
|
padding: 20px 0;
|
||
|
text-align: center;
|
||
|
background-color: #fff;
|
||
|
}
|
||
|
|
||
|
footer ul {
|
||
|
padding: 0;
|
||
|
margin: 0;
|
||
|
border-bottom: 1px solid #eee;
|
||
|
padding-bottom: 20px;
|
||
|
margin-bottom: 18px;
|
||
|
}
|
||
|
footer ul li {
|
||
|
display: inline-block;
|
||
|
margin: 2px 4px;
|
||
|
}
|
||
|
footer ul li a i {
|
||
|
background: #f7f7f7;
|
||
|
width: 35px;
|
||
|
height: 35px;
|
||
|
line-height: 35px !important;
|
||
|
border-radius: 50%;
|
||
|
}
|
||
|
|
||
|
/*end of part 31----------------------------------------------------*/
|