Файл: usr/tpl/smartphone/styles/framework.css
Строк: 2393
/*------------------------------------------------------------------
[Framework
Stylesheet]
Project: Boxed | Epsilon Framework
Version: 2.0
Last
change: 10/23/2014
Assigned to: Enabled & CosminCotor
Primary
use: ThemeForest Stock Item
License: You may not reuse or
redistribute this framework
outside the mentioned licenses
found on
ThemeForest
-------------------------------------------------------------------*/
@charset
"utf-8";
@font-face
{
font-family: Cuprum;
src:
url(../fonts/Cuprum-regular.ttf);
}
/* CSS Document */
/*
1.
Reset
2. Typography
3. Preloader
4. Highlights
5. Buttons
6.
Code Highlight
7. Lists
8. Table
9. Speach Bubbles
10. Quote
Styles
11. Radio and Checkboxes
12. Charts
13. Notifications
14.
Tabs
15. Toggles
16. Submenu
17. Contact Form
18. Detector
19.
Sharebox
20. Profile
21. Portfolio
22. Timeline
23.
Coverpage
24. Countdown
25. Notification Page
26. Login Box
27.
Portfolio Wide
38. Sidebar Menu Structures
39. Blog
*/
/* 1. Reset */
* {
appearance:normal;
-webkit-appearance:
none;
-moz-appearance: none;
margin: 0;
padding: 0;
border:
0;
font-size: 100%;
vertical-align: baseline;
outline:
none;
font-size-adjust: none;
-webkit-text-size-adjust:
none;
-moz-text-size-adjust: none;
-ms-text-size-adjust:
none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-font-smoothing: antialiased;
}
*:focus {
outline:
none;
}
*,*:after,*:before { -webkit-box-sizing:
border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:
0; margin: 0;}
body {
margin: 0;
padding:
0;
overflow-x:hidden;
}
a:hover{
text-decoration:none!important;
}
::selection
{
background-color:#CCC;
color: #000;
}
div, a, p, img, blockquote,
form, fieldset, textarea, input, label, iframe, code, pre {
display:
block;
/*position:relative;*/
/*overflow:hidden;*/
}
/* 2.
Typography */
p {
line-height: 30px;
margin-bottom:
30px;
font-size:13px;
letter-spacing:0px;
}
p > a {
display:
inline;
text-decoration: none;
}
p > a:hover {
text-decoration:
underline;
}
p > span {
display: inline;
}
span > a
{
display: inline;
}
a > span {
display: inline;
}
a
{
text-decoration: none;
}
a:hover {
text-decoration:
none;
}
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 >
a {
display: inline;
}
table {
border-collapse:
separate;
border-spacing: 0;
background-color: #f6f6f6;
border-left:
1px solid #e9e9e9;
border-top: 1px solid #e9e9e9;
width: 100%;
clear:
both;
margin-bottom: 27px;
}
thead {}
th {
vertical-align:
middle;
border-bottom: 1px solid #e9e9e9;
border-right: 1px solid
#e9e9e9;
font-weight: bold;
color: #555;
background-color:
#f6f6f6;
}
tr {
line-height: 18px;
}
td {
border-right: 1px
solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
text-align:
center;
color: #666;
padding-top: 9px;
padding-bottom:
9px;
line-height: 18px;
vertical-align: middle;
background-color:
#fdfdfd;
}
tr:hover > td {
background: #fff;
}
ul
{
margin-bottom: 20px;
}
ol {
margin-bottom: 30px;
}
li
{
line-height: 18px;
margin-bottom:5px;
list-style:inside;
}
ol
> li:last-child, ul > li:last-child {
margin-bottom:0px;
}
.background-turquoise{background-color:#1abc9c;}
.background-turquoise-dark{background-color:#16a085;}
.background-green{background-color:#2ecc71;}
.background-green-dark{background-color:#27ae60;}
.background-blue{background-color:#3498db;}
.background-blue-dark{background-color:#2980b9;}
.background-magenta{background-color:#9b59b6;}
.background-magenta-dark{background-color:#8e44ad;}
.background-yellow{background-color:#f1c40f;}
.background-yellow-dark{background-color:#f39c12;}
.background-orange{background-color:#e67e22;}
.background-orange-dark{background-color:#d35400;}
.background-red{background-color:#e74c3c;}
.background-red-dark{background-color:#c0392b;}
.background-gray{background-color:#95a5a6;}
.background-gray-dark{background-color:#7f8c8d;}
/*//////////////////////////////////////*/
/*Font
Selection and General Font
Colors*/
/*//////////////////////////////////////*/
body{
font-family:'Cuprum',
sans-serif;
-webkit-font-smoothing:
antialiased;
color:#666;
font-size:12px;
line-height:20px;
}
.checkbox{
color:#666;
}
h1{
font-size:21px;
margin-bottom:10px;
font-weight:800;
color:#212935;
}
h2{
font-size:19px;
margin-bottom:10px;
font-weight:800;
color:#212935;
}
h3{
font-size:17px;
margin-bottom:10px;
font-weight:500;
color:#212935
}
h4{
font-size:15px;
margin-bottom:10px;
font-weight:500;
color:#212935;
}
h5{
color:#212935;
font-size:13px;
margin-bottom:5px;
font-weight:500;
}
h1,
h2, h3, h4, h5, h6{
font-family:'Cuprum',
sans-serif;
-webkit-font-smoothing:
antialiased;
color:#1f1f1f;
}
a:hover{
color:#2980b9;
transition:all
200ms ease;
}
a{
color:#2980b9;
tramsition:all 200ms
ease;
}
/*////////////////////////*/
/*Other Classes and
Resets*/
/*////////////////////////*/
.overlay{
pointer-events:none;
position:absolute;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
z-index:9999;
}
.content{
clear:both;
margin-left:30px;
margin-right:30px;
}
@media
(min-width:768px){
.content{
margin-left:50px;
margin-right:50px;
}
}
.container{
margin-bottom:30px;
}
.no-bottom{
margin-bottom:0px!important;
padding-bottom:0px;
}
.half-bottom{
margin-bottom:15px;
}
.full-bottom{
margin-bottom:30px;
}
.clear
{
clear: both;
height: 0px;
line-height: 0px;
}
.float-left{
float:left;
margin-right:10px;
}
.float-right{
float:right;
margin-left:5px;
}
.right-text{
display:block;
text-align:right;
}
.left-text{
display:block;
text-align:left;
}
.center-text{
display:block;
text-align:center;
}
.uppercase{
text-transform:uppercase;
}
.capitalize{
text-transform:capitalize;
}
.regular-anchor{
color:inherit!important;
}
.responsive-image{
width:100%;
margin-bottom:20px;
}
.round-image{
border-radius:500px;
}
.responsive-video{
display:block;
width:100%;
margin-bottom:30px;
}
@media
(min-width:768px){
.responsive-video{
min-height:400px;
}
}
.decoration{
height:1px;
background-color:rgba(0,0,0,0.1);
margin-bottom:30px;
display:block;
clear:both;
position:relative;
overflow:hidden;
}
.full-decoration{
height:1px;
background-color:rgba(0,0,0,0.1);
margin-bottom:30px;
display:block;
clear:both;
margin-left:-50px;
margin-right:-50px;
}
.center-if-mobile{display:block;}
@media
(max-width:767px){
.center-if-mobile{
text-align:center;
}
.left-if-mobile{
text-align:left;
}
.right-if-mobile{
text-align:right;
}
}
@media
(min-width:768px){
.center-if-tablet{
text-align:center;
}
.left-if-tablet{
text-align:left;
}
.right-if-tablet{
text-align:right;
}
}
/* 3.
Preloader */
#preloader
{
position:fixed;
z-index:2500;
top:0;
left:0;
right:0;
bottom:0;
background-color:#FFF;
z-index:99999999;
}
#status
{
position:fixed;
z-index:99999999;
width:250px;
height:250px;
position:absolute;
left:50%;
top:50%;
background-image:url(../images/status.gif);
background-size:64px
64px;
background-repeat:no-repeat;
background-position:center;
margin:-125px
0 0 -125px;
}
#status p{
top:60%;
}
#status
em{
font-size:10px!important;
display:block;
font-style:normal;
}
/*Typograhpy
Features*/
.center-icon{
width:70px;
margin-left:auto;
margin-right:auto;
margin-bottom:30px;
}
.last-column{
margin-right:0%!important;
}
.one-third{
width:28%;
float:left;
margin-right:8%;
}
.one-half{
width:45%;
float:left;
margin-right:10%;
}
@media
(max-width:760px){
.hide-if-mobile{
display:none;
}
}
@media
(min-width:760px) {
.one-third-responsive{
width:30%;
float:left;
margin-right:5%;
}
.one-half-responsive{
width:48%;
float:left;
margin-right:4%;
}
.sidebar-left-big{
width:70%;
float:left;
margin-right:5%
}
.sidebar-right-small{
width:25%;
float:right;
}
.sidebar-right-big{
width:70%;
float:right;
}
.sidebar-left-small{
width:25%;
float:left;
margin-right:5%;
}
.hide-if-responsive{
display:none!important;
}
}
/* 4.
Highlights */
.text-highlight{
color:#FFFFFF;
padding:8px;
margin-right:3px;
}
.highlight-turqoise{
background-color:#16a085; }
.highlight-green{
background-color:#27ae60; }
.highlight-blue{
background-color:#2980b9; }
.highlight-magenta{
background-color:#8e44ad; }
.highlight-dark{
background-color:#2c3e50; }
.highlight-yellow{
background-color:#f1c40f; }
.highlight-red{
background-color:#c0392b; }
.highlight-orange{
background-color:#e67e22; }
/* 5. Buttons */
.center-button{
width:120px;
margin-left:auto;
margin-right:auto;
display:block!important;
margin-top:10px;
text-align:center;
}
.button{
font-weight:500;
display:inline-block;
padding:10px 20px;
transition:all 200ms ease;
transform:scale(1,1);
-webkit-transform:scale(1,1);
}
.button:hover{
-webkit-transform:scale(0.95, 0.95);
transform:scale(0.95, 0.95);
transition:all 200ms ease;
}
.button-3d{
font-weight:500;
display:inline-block;
padding:8px 20px;
transform:scale(1,1);
-webkit-transform:scale(1,1);
transition:all 200ms ease;
}
.button-3d:hover{
transform:scale(0.95, 0.95);
-webkit-transform:scale(0.95, 0.95);
transition:all 200ms ease;
}
.button
i{
margin-right:10px;
font-size:12px;
width:12px;
text-align:center;
margin-left:-5px;
}
.button:hover{
color:#FFFFFF!important;
}
.button-3d:hover{
color:#FFFFFF!important;
}
.tea-3d{ border-bottom:solid
4px #117562;}
.button-tea{ background-color:#16a085;
color:#FFFFFF;}
.button-tea:hover{ background-color:#1abc9c;}
.green-3d{ border-bottom:solid
4px #1e8248;}
.button-green{ background-color:#27ae60;
color:#FFFFFF;}
.button-green:hover{ background-color:#2ecc71;}
.blue-3d{ border-bottom:solid
4px #194e70;}
.button-blue{ background-color:#2980b9;
color:#FFFFFF;}
.button-blue:hover{ background-color:#3498db;}
.magenta-3d{ border-bottom:solid
4px #602e75;}
.button-magenta{ background-color:#8e44ad;
color:#FFFFFF;}
.button-magenta:hover{ background-color:#9b59b6;}
.dark-3d{ border-bottom:solid
4px #19232d;}
.button-dark{ background-color:#2c3e50;
color:#FFFFFF;}
.button-dark:hover{ background-color:#34495e;}
.yellow-3d{ border-bottom:solid
4px #ba970b;}
.button-yellow{ background-color:#f1c40f;
color:#1f1f1f;}
.button-yellow:hover{ background-color:#f39c12;}
.orange-3d{ border-bottom:solid
4px #9d3e00;}
.button-orange{ background-color:#d35400;
color:#FFFFFF;}
.button-orange:hover{ background-color:#e67e22;}
.red-3d{ border-bottom:solid
4px #8a281e;}
.button-red{ background-color:#c0392b;
color:#FFFFFF;}
.button-red:hover{ background-color:#e74c3c;}
.light-3d{ border-bottom:solid
4px #868a8c;}
.button-light{ background-color:#bdc3c7;
color:#1f1f1f;}
.button-light:hover{ background-color:#ecf0f1;
color:#1f1f1f!important;}
.grey-3d{ border-bottom:solid 4px
#474d4e;}
.button-grey{ background-color:#7f8c8d;
color:#FFFFFF;}
.button-grey:hover{ background-color:#95a5a6;
color:#1f1f1f!important;}
.button-full{
width:100%;
display:block;
text-align:center;
padding-left:0px;
padding-right:0px;
}
.small-button{
font-size:11px;
}
/* 6.
Code Highlight */
.code{
border:solid 1px
#cacaca;
font-size:12px;
}
.wline{
font-size:11px;
font-family:"Cuprum",
Courier,
monospace!important;
display:block;
background-color:#FFFFFF;
padding-left:10px;
padding-right:10px;
padding-top:8px;
padding-bottom:8px;
}
.code
>
span:last-child{
border-bottom:none;
}
.gline{
font-size:11px;
font-family:"Cuprum",
Courier, monospace!important;
border-top:solid 1px
rgba(0,0,0,0.1);
border-bottom:solid 1px
rgba(0,0,0,0.1);
display:block;
background-color:#f1f1f1;
padding-left:10px;
padding-right:10px;
padding-top:8px;
padding-bottom:8px;
}
/* 7.
Lists */
.number-list {}
.number-list
li{
line-height:26px;
list-style:decimal;
overflow:visible!important;
margin-left:0px;
list-style:decimal;
margin-left:20px;
padding-left:0px;
}
.normal-list
li{
line-height:26px;
padding-left:5px;
}
.icon-list
li{
list-style:none;
padding-left:30px;
background-repeat:no-repeat;
background-size:18px
18px;
background-position:0px
5px;
margin-bottom:10px;
line-height:26px;
}
.font-icon-list
li{
list-style:none;
padding-left:0px;
color:#666666;
line-height:26px;
}
.font-icon-list
li a{
color:#666666;
}
.icon-list li
a{
color:#666666;
}
.font-icon-list
i{
margin-right:10px;
width:12px;
}
.address-list{
background-image:url(../images/lists/address_48.png);
}
.block-list{
background-image:url(../images/lists/block_48.png);
}
.bookmark-list{
background-image:url(../images/lists/bookmark_48.png);
}
.briefcase-list{
background-image:url(../images/lists/briefcase_48.png);
}
.bubble-list{
background-image:url(../images/lists/bubble_48.png);
}
.buy-list{
background-image:url(../images/lists/buy_48.png);
}
.calendar-list{
background-image:url(../images/lists/calendar_48.png);
}
.clipboard-list{
background-image:url(../images/lists/clipboard_48.png);
}
.clock-list{
background-image:url(../images/lists/clock_48.png);
}
.delete-list{
background-image:url(../images/lists/delete_48.png);
}
.diagram-list{
background-image:url(../images/lists/diagram_48.png);
}
.document-list{
background-image:url(../images/lists/document_48.png);
}
.down-list{
background-image:url(../images/lists/down_48.png);
}
.flag-list{
background-image:url(../images/lists/flag_48.png);
}
.folder-list{
background-image:url(../images/lists/folder_48.png);
}
.gear-list{
background-image:url(../images/lists/gear_48.png);
}
.globe-list{
background-image:url(../images/lists/globe_48.png);
}
.heart-list{
background-image:url(../images/lists/heart_48.png);
}
.help-list{
background-image:url(../images/lists/help_48.png);
}
.home-list{
background-image:url(../images/lists/home_48.png);
}
.info-list{
background-image:url(../images/lists/info_48.png);
}
.key-list{
background-image:url(../images/lists/key_48.png);
}
.label-list{
background-image:url(../images/lists/label_48.png);
}
.left-list{
background-image:url(../images/lists/left_48.png);
}
.letter-list{
background-image:url(../images/lists/letter_48.png);
}
.monitor-list{
background-image:url(../images/lists/monitor_48.png);
}
.pencil-list{
background-image:url(../images/lists/pencil_48.png);
}
.plus-list{
background-image:url(../images/lists/plus_48.png);
}
.present-list{
background-image:url(../images/lists/present_48.png);
}
.print-list{
background-image:url(../images/lists/print_48.png);
}
.right-list{
background-image:url(../images/lists/right_48.png);
}
.save-list{
background-image:url(../images/lists/save_48.png);
}
.search-list{
background-image:url(../images/lists/search_48.png);
}
.shield-list{
background-image:url(../images/lists/shield_48.png);
}
.statistics-list{
background-image:url(../images/lists/statistics_48.png);
}
.stop-list{
background-image:url(../images/lists/stop_48.png);
}
.tick-list{
background-image:url(../images/lists/tick_48.png);
}
.trash-list{
background-image:url(../images/lists/trash_48.png);
}
.up-list{
background-image:url(../images/lists/up_48.png);
}
.user-list{
background-image:url(../images/lists/user_48.png);
}
.wallet-list{
background-image:url(../images/lists/wallet_48.png);
}
.warning-list{
background-image:url(../images/lists/warning_48.png);
}
/* 8.
Table */
.table{
width:100%;
border-radius:2px;
}
.table-title{
font-family:'Cuprum',
sans-serif;
font-size:12px;
}
.table-sub-title{
font-family:'Cuprum',
sans-serif;
font-weight:bold;
font-size:12px;
}
.price{
font-size:12px;
}
.small-price{
position:absolute;
margin-left:0px;
font-size:10px;
margin-top:-3px!important;
}
table
{
font-size:12px;
text-shadow: 1px 1px 0px
#fff;
background:#eaebec;
border:#ccc 1px
solid;
margin-bottom:25px;
}
table th {
padding:21px 25px 22px
25px;
border-bottom:1px solid #e0e0e0;
}
table
th:first-child{
text-align: center;
padding-left:20px;
}
table
tr{
text-align: center;
padding-left:20px;
}
table tr
td:first-child{
text-align: left;
padding-left:20px;
border-left:
0;
}
table tr td {
padding:14px;
border-top: 1px solid
#ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 0px solid
#e0e0e0;
}
table tr.even td{
background: #efefef;
}
table
tr:last-child td{
border-bottom:0;
}
table tr:hover td{
background:
#f8f8f8;
}
.table-heading{
padding-top:10px;
padding-bottom:15px;
}
.table-text{
color:#6f6f6f;
}
/* 9.
Speach Bubbles */
.green-bubble{
background-color:#33c922!important;
color:#FFFFFF!important;
border:none!important;
}
.blue-bubble{
background-color:#0b84fe!important;
color:#FFFFFF!important;
border:none!important;
}
.speach-left{
float:left;
display:inline;
text-align:left;
max-width:75%;
font-size:12px;
padding-left:10px;
padding-right:10px;
padding-top:5px;
padding-bottom:5px;
border-radius:10px;
background-color:#FFFFFF;
border:solid
1px
#cacaca;
}
.speach-left-title{
display:block;
width:100%;
font-size:10px;
font-style:normal;
padding-left:5px;
color:#000000;
text-shadow:0px
1px 0px
#FFFFFF;
}
.speach-right{
float:right;
text-align:right;
text-align:left;
max-width:75%;
font-size:12px;
padding-left:10px;
padding-right:10px;
padding-top:5px;
padding-bottom:5px;
border-radius:10px;
background-color:#FFFFFF;
border:solid
1px
#cacaca;
}
.speach-right-title{
text-align:right;
display:block;
font-size:10px;
font-style:normal;
padding-right:5px;
color:#000000;
text-shadow:0px
1px 0px #FFFFFF;
}
/* 10. Quote Styles */
.quote-style-one{
margin-bottom:30px;
}
.quote-style-one
img{
float:left;
width:25%;
}
.quote-style-one
em{
font-style:normal;
float:left;
width:70%;
padding-left:4%;
}
.quote-style-one
strong{
font-style:italic;
float:left;
width:70%;
padding-left:4%;
padding-top:2%;
}
.quote-style-two{
margin-bottom:30px;
}
.quote-style-two
em{
text-align:left;
font-style:normal;
display:block;
}
.quote-style-two
strong{
text-align:left;
font-style:italic;
display:block;
}
.quote-style-three{
margin-bottom:30px;
}
.quote-style-three
em{
text-align:right;
font-style:normal;
display:block;
}
.quote-style-three
strong{
text-align:right;
font-style:italic;
display:block;
}
.quote-style-four
em{
text-align:center;
font-style:normal;
display:block;
}
.quote-style-four
strong{
text-align:center;
font-style:italic;
display:block;
}
.quote-style-four
img{
width:70px;
margin-left:auto;
margin-right:auto;
padding-bottom:20px;
}
/* 11.
Radio and Checkboxe */
.checkbox-one{
background-image:url(../images/ui/checkbox1.png);
background-size:16px
18px;
background-repeat:no-repeat;
padding-left:30px;
background-position:0px
1px;
margin-bottom:10px;
}
.checkbox-one-checked{
background-image:url(../images/ui/checkbox1c.png);
}
.checkbox-two{
background-image:url(../images/ui/checkbox2.png);
background-size:16px
18px;
background-repeat:no-repeat;
padding-left:30px;
background-position:0px
1px;
margin-bottom:10px;
}
.checkbox-two-checked{
background-image:url(../images/ui/checkbox2c.png);
}
.checkbox-three{
background-image:url(../images/ui/checkbox3.png);
background-size:16px
16px;
background-repeat:no-repeat;
padding-left:30px;
background-position:0px
2px;
margin-bottom:10px;
}
.checkbox-three-checked{
background-image:url(../images/ui/checkbox3c.png);
}
.radio-one{
background-image:url(../images/ui/radio1.png);
background-size:16px
18px;
background-repeat:no-repeat;
padding-left:30px;
background-position:0px
1px;
margin-bottom:10px;
}
.radio-one-checked{
background-image:url(../images/ui/radio1c.png);
}
.radio-two{
background-image:url(../images/ui/radio2.png);
background-size:16px
18px;
background-repeat:no-repeat;
padding-left:30px;
background-position:0px
1px;
margin-bottom:10px;
}
.radio-two-checked{
background-image:url(../images/ui/radio2c.png);
}
/*Switches*/
.switch-box
h4{
font-size:14px;
line-height:29px;
float:left;
font-weight:500;
padding-top:2px;
margin-bottom:5px;
}
.switch-box .switch{
float:right!important;
}
.switch-box .switch-icon{
float:right!important;
}
.switch-box-content{
clear:both;
display:none;
}
.switch-box-subtitle{
display:block;
clear:both;
opacity:0.8;
}
.switch-1{
width:50px;
height:30px;
background-color:#c0392b;
border-radius:30px;
transition:all 200ms ease;
float:left;
}
.switch-1
em:first-child{
position:absolute;
color:#FFFFFF;
height:30px;
line-height:30px;
margin-left:11px;
font-style:normal;
font-size:10px;
}
.switch-1 em:last-child{
position:absolute;
color:#FFFFFF;
height:30px;
line-height:30px;
margin-left:33px;
font-style:normal;
font-size:10px;
}
.switch-1 span{
width:26px;
height:26px;
position:absolute;
background-color:#FFFFFF;
border-radius:28px;
margin-top:2px;
transform:translateX(2px);
-webkit-transform:translateX(2px);
transition:all 200ms
ease;
}
.switch-1-on{
background-color:#27ae60;
transition:all 200ms ease;
}
.switch-1-on span{
transform:translateX(22px);
-webkit-transform:translateX(22px);
transition:all 200ms ease;
}
.switch-icon em:first-child{
font-size:10px;
margin-top:2px;
margin-left:9px;
line-height:27px;
}
.switch-icon em:last-child{
font-size:10px;
margin-top:2px;
margin-left:32px;
line-height:27px;
}
.switch-2{
width:85px;
background-color:#464646;
height:30px;
}
.switch-2 span{
margin-top:2px;
transform:translateX(2px);
-webkit-transform:translateX(2px);
width:40px;
background-color:#676767;
height:26px;
position:absolute;
text-align:center;
transition:all 200ms ease;
}
.switch-2 span
em{
display:block;
color:#FFFFFF;
font-style:normal;
line-height:26px;
font-size:10px!important;
margin-top:-26px;
transition:all 200ms ease;
}
.switch-2-on span{
transform:translateX(43px);
-webkit-transform:translateX(43px);
/*background-color:#0e88b1;*/
background-color:#27ae60;
transition:all 200ms ease;
}
.switch-2-on span em{
margin-top:0px;
transition:all 200ms ease;
}
.switch-3{
border:solid 3px #cacaca;
width:60px;
height:28px;
background-color:#27ae60;
transition:all 200ms ease;
}
.switch-3
span{
z-index:10;;
position:absolute;
background-color:#cacaca;
width:25px;
border-right:solid 3px
#FFFFFF;
border-left:solid 3px #FFFFFF;
height:28px;
margin-top:-3px;
transform:translateX(33px);
-webkit-transform:translateX(33px);
transition:all 200ms
ease;
}
.switch-3-on{
background-color:#c0392b;
transition:all 200ms ease;
}
.switch-3-on span{
transform:translateX(-3px);
-webkit-transform:translateX(-3px);
transition:all 200ms ease;
}
.switch-3 strong{
position:absolute;
width:54px;
height:22px;
border:solid 3px
#FFFFFF;
}
.switch-3 em{
position:absolute;
color:#FFFFFF;
margin-left:0px;
font-style:normal;
font-size:10px;
margin-top:2px;
width:35px;
text-align:center;
}
.switch-3
em:last-child{
position:absolute;
color:#FFFFFF;
margin-left:19px!important;
font-style:normal;
font-size:10px;
margin-top:2px;
}
/* 12. Charts */
.chart
div{
overflow:hidden!important;
}
.chart
strong{
font-size:13px;
text-align:left;
font-weight:600;
font-family:'Cuprum',
sans-serif;
padding-left:5px;
}
.chart
em{
font-size:13px;
text-align:right;
font-style:normal;
display:block;
margin-bottom:10px;
margin-top:-20px;
font-weight:300;
font-family:'Cuprum',
sans-serif;
padding-right:5px;
}
.chart-background{
background-color:#CCC;
width:100%;
display:block;
height:22px;
margin-bottom:20px;
margin-top:-5px;
}
.red-chart{
background-color:#c0392b;
margin:3px;
height:16px;
opacity:0.9;
}
.green-chart{
background-color:#27ae60;
margin:3px;
height:16px;
opacity:0.9;
}
.yellow-chart{
background-color:#f39c12;
margin:3px;
height:16px;
opacity:0.9;
}
.magenta-chart{
background-color:#8e44ad;
margin:3px;
height:16px;
opacity:0.9;
}
.blue-chart{
background-color:#2980b9;
margin:3px;
height:16px;
opacity:0.9;
}
.chart-round
div{
border-radius:20px;
}
.p100{width:100%;}
.p90{width:90%;}
.p80{width:80%;}
.p70{width:70%;}
.p60{width:60%;}
.p50{width:50%;}
.p40{width:40%;}
.p30{width:30%;}
.p20{width:20%;}
.p10{width:10%;}
.p0{width:0%;}
/* 13.
Notifications */
.red-notification{
background-color:#c0392b!important;
color:#FFFFFF;
}
.green-notification{
background-color:#27ae60!important;
color:#FFFFFF!;
}
.yellow-notification{
background-color:#f39c12!important;
color:#FFFFFF;
}
.blue-notification{
background-color:#2980b9!important;
color:#FFFFFF;
}
.big-notification{
margin-bottom:30px;
padding:8px;
}
.big-notification
h3{
font-family:'Cuprum',
sans-serif;
font-weight:400;
color:#FFFFFF;
margin-bottom:5px;
margin:10px;
padding-bottom:10px;
padding-top:5px;
border-bottom:solid
1px rgba(255,255,255,0.2);
}
.big-notification
h4{
font-family:'Cuprum',
sans-serif;
font-weight:500;
color:#FFFFFF;
margin-bottom:5px;
margin:10px;
padding-bottom:10px;
padding-top:0px;
border-bottom:solid
1px
rgba(255,255,255,0.2);
}
.close-big-notification{
font-size:14px;
color:#FFFFFF;
float:right;
margin-top:-41px;
margin-right:10px;
width:20px;
height:20px;
text-align:center;
}
.close-big-notification:hover{color:#FFFFFF;}
.big-notification
p{
padding:10px;
padding-top:0px;
margin-bottom:0px;
color:#FFFFFF;
}
.static-notification-red{
overflow:hidden;
background-color:#c0392b;
margin-bottom:30px;
}
.static-notification-red
p{
font-size:11px;
margin-top:10px;
margin-bottom:10px;
font-weight:500;
color:#FFFFFF!important;
}
.static-notification-green{
overflow:hidden;
background-color:#27ae60;
margin-bottom:30px;
}
.static-notification-green
p{
font-size:11px;
margin-top:10px;
margin-bottom:10px;
font-weight:500;
color:#FFFFFF!important;
}
.static-notification-yellow{
overflow:hidden;
background-color:#f39c12;
color:#FFFFFF;
margin-bottom:30px;
}
.static-notification-yellow
p{
font-size:11px;
margin-top:10px;
margin-bottom:10px;
font-weight:500;
color:#FFFFFF!important;
}
.static-notification-blue{
overflow:hidden;
background-color:#2980b9;
color:#FFFFFF;
margin-bottom:30px;
}
.static-notification-blue
p{
font-size:11px;
margin-top:10px;
margin-bottom:10px;
font-weight:500;
color:#FFFFFF!important;
}
/*Top
Notifications*/
.notification-top{
height:0px;
width:100%;
transition:all
400ms
ease;
}
.show-notification-top{
height:100px!important;
transition:all
400ms ease;
transition-delay:1s;
}
.notification-top
a{
color:#FFFFFF;
border-bottom:solid 1px
rgba(255,255,255,0.3);
padding-bottom:2px;
}
.hide-top-notification{
font-size:10px;
width:30px;
height:30px;
position:absolute;
right:34px;
top:17px;
color:#FFFFFF;
text-align:center;
background-color:rgba(0,0,0,0.1);
border-radius:30px;
line-height:31px;
border:none!important;
transition:all
200ms
ease;
}
.hide-top-notification:hover{
background-color:rgba(0,0,0,0.3);
transition:all
200ms
ease;
}
.goto-top-notification{
font-size:10px;
width:30px;
height:30px;
position:absolute;
right:80px;
top:17px;
color:#FFFFFF;
text-align:center;
background-color:rgba(0,0,0,0.1);
border-radius:30px;
line-height:30px;
border:none!important;
transition:all
200ms
ease;
}
.goto-top-notification:hover{
background-color:rgba(0,0,0,0.3);
transition:all
200ms ease;
}
.notification-top
h3{
margin-left:30px;
margin-top:23px;
margin-bottom:12px;
color:#FFFFFF;1
}
.notification-top
p{
font-size:12px;
margin-left:30px;
padding-right:30px;
line-height:24px;
opacity:0.8;
}
/* 14.
Tabs */
.tabs div{
overflow:hidden!important;
}
.tabs
a{
color:#343434;
text-transform:uppercase;
}
.tab-content{
overflow:hidden;
display:none;
}
.tab-content
img{
margin-top:8px;
}
.tab-content
p{
margin-bottom:0px;
}
.tab-content-1{
display:block;
}
.tab-active{
background-color:#bee7cf!important;
}
.actve-green{
background-color:#67c68f!important;
}
.tab-but{
font-size:13px;
float:left;
background-color:#f9f9f9;
margin-right:2px;
margin-bottom:2px;
padding-left:10px;
padding-right:10px;
padding-top:5px;
padding-bottom:5px;
}
.tab-content{
background-color:#eeeeee;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
}
/* 15.
Toggles */
.toggle-content{
display:none;
padding-top:0px;
}
.toggle-content
p{
border-top:solid 1px
rgba(0,0,0,0.05);
margin-bottom:0px;
padding-top:10px;
padding:15px;
}
.toggle-1,
.toggle-2, .toggle-3{
background-color:#eeeeee;
}
.toggle-3{
}
.deploy-toggle-1{
padding:15px;
padding-left:50px;
font-size:13px;
color:#343434;
text-transform:uppercase;
background-image:url(../images/ui/plus.png);
background-repeat:no-repeat;
background-size:12px
12px;
background-position:15px
19px;
}
.toggle-1-active{
background-image:url(../images/ui/minus.png);
}
.deploy-toggle-2{
padding:15px;
padding-left:50px;
font-size:13px;
color:#343434;
text-transform:uppercase;
background-image:url(../images/lists/plus_48.png);
background-repeat:no-repeat;
background-size:14px
14px;
background-position:15px
18px;
}
.toggle-2-active{
background-image:url(../images/lists/delete_48.png);
}
.deploy-toggle-3{
padding:15px;
font-size:13px;
color:#343434;
text-transform:uppercase;
}
.deploy-toggle-3
em{
background-color:#c0392b;
position:absolute;
transition: 0.1s
ease-out;
right:15px;
width:50px;
height:20px;
border-radius:30px;
}
.deploy-toggle-3
em
strong{
top:2px;
left:2px;
height:16px;
width:16px;
border-radius:19px;
background-color:#f6f6f6;
position:absolute;
z-index:999;
}
.toggle-3-active-background{
background-color:#27ae60!important;
}
.toggle-3-active-ball{
transition:
0.01s ease-out;
left:32px!important;
}
/* 16. Submenu */
.submenu-navigation
a{
color:#343434;
}
.submenu-navigation{
background-color:#eeeeee;
}
.submenu-nav-deploy{
font-size:13px;
padding:15px;
padding-left:40px;
text-transform:uppercase;
background-image:url(../images/ui/arrow-down.png);
background-repeat:no-repeat;
background-size:8px
5px;
background-position:15px
23px;
}
.submenu-nav-deploy-active{
background-image:url(../images/ui/arrow-up.png);
}
.submenu-nav-items{
display:none;
}
.submenu-nav-items
a:first-child{
border-top:solid 1px
rgba(0,0,0,0.1);
}
.submenu-nav-items
a{
padding-left:20px;
padding-top:10px;
padding-bottom:10px;
border-bottom:solid
1px rgba(0,0,0,0.1);
}
.submenu-nav-items
a:last-child{
padding-bottom:10px;
}
.sliding-door{
overflow:hidden;
background-color:#FFFFFF;
border:solid
1px
#cacaca;
height:40px;
line-height:39px;
}
.sliding-door-bottom{
border:solid
1px
rgba(0,0,0,0.05);
}
.sliding-door-clear{
height:20px;
display:block;
width:100%;
}
.sliding-door-top{
position:absolute;
background-color:#FFFFFF;
display:block;
width:101%;
height:inherit;
line-height:inherit;
padding-top:3px;
z-index:10;
font-size:12px;
padding-top:0px;
padding-left:0px;
padding-right:15px;
padding-bottom:0px;
border-left:solid
1px #cacaca;
margin-left:-1px;
}
.sliding-door-top
a{
color:#333;
text-transform:uppercase;
background-position:0
13px;
}
.sliding-door-bottom{
position:absolute;
background-color:#fefefe;
display:block;
width:100%;
height:inherit;
line-height:inherit;
padding-top:3px;
font-size:12px;
padding-left:0px;
padding-right:20px;
padding-top:0px;
padding-bottom:0px;
}
.sliding-door-bottom
a{
color:#333;
width:98%;
}
.sliding-door-bottom a
strong{
padding-right:10px;
font-weight:normal;
text-transform:uppercase;
}
.sliding-door-bottom
a
em{
background-image:url(../images/ui/minus.png);
background-size:12px
12px;
background-repeat:no-repeat;
background-position:13px
13px;
margin-right:20px;
display:inline-block;
float:left;
width:40px;
height:40px;
}
.sliding-door-top
a em{
background-image:url(../images/ui/plus.png);
background-size:12px
12px;
background-repeat:no-repeat;
background-position:13px
13px;
margin-right:20px;
display:inline-block;
float:left;
width:40px;
height:40px;
}
/* 17.
Contact Form */
@media (min-width:760px){
.contact-information{
padding-left:30px!important;
}
}
.contactField{
background-color:rgba(255,255,255,0.4);
font-size:12px;
color:#666;
border:solid
1px #cacaca;
}
.contactField:focus{
border:solid 1px
#27ae60;
}
.contactTextarea{
background-color:rgba(255,255,255,0.4);
font-size:12px;
border:solid
1px #cacaca;
color: #666;
}
.contactTextarea:focus{
border:solid
1px
#27ae60;
}
.contactSubmitButton{
line-height:19px!important;
display:block!important;
height:36px!important;
margin-right:4px;
width:100%;
}
.contact-form{
margin-bottom:20px;
}
.contactNameField{
padding-bottom:5px;
font-size:12px;
}
.contactNameField
span{
float:right;
opacity:0.2;
}
.contactEmailField{
padding-bottom:5px;
font-size:12px;
}
.contactEmailField
span{
float:right;
opacity:0.2;
}
.contactMessageTextarea{
padding-bottom:5px;
font-size:12px;
}
.contactMessageTextarea
span{
float:right;
opacity:0.2;
}
/*Field
Styles*/
.formFieldWrap{
margin-top:-5px;
}
#contactNameField{
text-transform:capitalize;
}
.contactField{
min-width:100%;
display:block;
box-sizing:border-box;
}
.contactTextarea{
min-width:100%;
display:block;
box-sizing:border-box;
}
.buttonWrap{
line-height:20px;
padding-bottom:24px;
min-width:43%;
display:inline-block;
}
.formSubmitButtonErrorsWrap
a{
width:25%;
text-align:center;
padding:8px
10px!important;
}
.formValidationError .red-notification
p{
background-image:none!important;
display:block!important;
padding-left:0px!important;
text-align:center!important;
}
.contactField{
height:40px;
padding-left:10px;
padding-right:10px;
margin-bottom:10px;
}
.contactTextarea{
margin-bottom:
20px;
padding-left: 12px;
padding-right: 12px;
padding-top:
9px;
padding-bottom: 9px;
line-height: 18px;
height:
80px;
}
/*Contact Bottom Icons*/
/*Contact Icons*/
@media
(min-width:768px){
.contact-information{
padding-left:20px;
}
}
.contact-call{
color:#666;
height:25px;
display:block;
}
.contact-call
i{
width:12px;
diplay:block;
margin-right:20px;
}
.contact-text{
color:#666;
height:25px;
display:block;
}
.contact-text
i{
width:12px;
diplay:block;
margin-right:20px;
}
.contact-mail{
color:#666;
height:25px;
display:block;
}
.contact-mail
i{
width:12px;
diplay:block;
margin-right:20px;
}
.contact-facebook{
color:#666;
height:25px;
display:block;
}
.contact-facebook
i{
width:12px;
diplay:block;
margin-right:20px;
}
.contact-twitter{
color:#666;
height:25px;
display:block;
}
.contact-twitter
i{
width:12px;
diplay:block;
margin-right:20px;
}
/*Maps*/
.maps-container{
display:block!important;
padding-bottom:0px;
box-sizing:border-box;
max-height:200px;
overflow:hidden;
margin-bottom:30px;
}
.maps{
display:block!important;
width:100%;
height:200px;
overflow:hidden;
}
/* 18. Detector */
.detected-wrapper
img{
width:70px;
height:70px;
margin-left:auto;
margin-right:auto;
-webkit-transform:scale(1,1);
transform:scale(1,1);
transition:all 200ms ease;
}
.detected-image:hover{
-webkit-transform:scale(1.2, 1.2);
transform:scale(1.2, 1.2);
transition:all 200ms ease;
}
.detected-button:hover{
-webkit-transform:scale(1.07, 1.07);
transform:scale(1.07, 1.07);
transition:all 200ms ease;
}
.detected-wrapper
h4{
text-align:center;
margin-top:10px;
margin-bottom:0px;
}
.detected-wrapper
em{
font-size:11px;
color:#e34e47;
display:block;
text-align:center;
font-style:normal;
margin-bottom:10px;
}
.detected-wrapper
p{
width:90%;
text-align:center;
margin-left:auto;
margin-right:auto;
}
/* 19.
Sharebox */
.sharebox-wrapper{
position:fixed;
background-color:rgba(0,0,0,0.8);
width:100%;
height:100%;
z-index:99999;
display:none;
}
.sharebox{
position:fixed;
display:block;
width:280px;
height:300px;
top:50%;
margin-top:-140px;
left:50%;
margin-left:-140px;
background-color:rgba(255,255,255,0.9);
z-index:999999;
border-radius:5px;
}
.sharebox
h3{
padding-top:30px;
padding-bottom:0px;
padding-left:30px;
padding-right:30px;
}
.sharebox
p{
padding-left:30px;
padding-right:30px;
}
.sharebox
a{
float:left;
width:40px;
height:40px;
color:#FFFFFF;
text-align:center;
line-height:40px;
border-radius:5px;
font-size:14px;
}
.share-icons{
width:250px;
margin-left:auto;
margin-right:auto;
}
.sharebox
.facebook{
margin-left:5px;
margin-right:5px;
background-color:#3B5998;
}
.sharebox
.twitter{
margin-left:5px;
margin-right:5px;
background-color:#4099FF;
}
.sharebox
.google{
margin-left:5px;
margin-right:5px;
background-color:#d34836;
}
.sharebox
.message{
margin-left:5px;
margin-right:5px;
background-color:#2ecc71;
}
.sharebox
.mail{
margin-left:5px;
margin-right:5px;
background-color:#3498db;
}
.sharebox
.close-sharebox{
width:100%;
height:50px;
color:#1f1f1f;
font-size:12px;
line-height:48px;
margin-top:-30px;
}
/* 20.
Profile */
.profile-header{
overflow:hidden;
display:block;
position:relative;
}
.profile-header-contents{
position:relative;
z-index:10;
}
.profile-header
{
background-image:url(../images/pictures/5.jpg);
background-repeat:repeat;
}
.profile-header-logo{
width:120px;
height:120px;
border-radius:100px;
margin-top:30px;
margin-bottom:30px;
margin-left:auto;
margin-right:auto;
border:solid
2px
#ffffff;
}
.profile-header-background{
background-image:url(../images/pictures/5w.jpg);
background-repeat:repeat;
position:absolute;
left:0px;
right:0px;
top:0px;
}
.profile-header-overlay{
background-color:rgba(0,0,0,0.7);
position:absolute;
z-index:5;
top:0px;
left:0px;
right:0px;
bottom:0px;
height:100%;
}
.profile-header-icon-one{
position:absolute;
height:45px;
width:45px;
border-radius:45px;
top:70px;
left:30px;
background-color:rgba(255,255,255,0.1);
line-height:45px;
font-size:14px;
text-align:center;
color:rgba(255,255,255,0.7);
}
.profile-header-icon-two{
position:absolute;
height:45px;
width:45px;
border-radius:45px;
top:70px;
right:30px;
background-color:rgba(255,255,255,0.1);
line-height:45px;
font-size:14px;
text-align:center;
color:rgba(255,255,255,0.7);
}
.profile-header-heading{
text-align:center;
font-weight:400;
color:#FFFFFF;
font-size:22px;
}
.profile-header-subheading{
text-align:center;
display:block;
color:rgba(255,255,255,0.6);
margin-top:-5px;
font-style:normal;
margin-bottom:40px;
font-size:12px;
}
.profile-header-socials
a{
width:33%;
float:left;
text-align:center;
color:rgba(255,255,255,0.8);
font-size:12px;
margin-bottom:30px;
}
.profile-header-socials
a .fa-facebook{background-color:rgba(59, 89, 152,
0.5)!important;}
.profile-header-socials a
.fa-twitter{background-color:rgba(64, 153, 255,
0.5)!important;}
.profile-header-socials a
.fa-google-plus{background-color:rgba(211, 72, 54,
0.5)!important;}
.profile-header-socials a
i{
width:45px;
height:45px;
margin-left:auto;
margin-right:auto;
background-color:rgba(255,255,255,0.1);
border-radius:45px;
line-height:47px;
display:block;
text-align:center;
color:rgba(255,255,255,0.7);
font-size:16px;
margin-bottom:10px;
}
.profile-header-contents
a{
transition:all 200ms ease;
}
.profile-header-contents
a:hover{
color:rgba(255,255,255,1);
transition:all 200ms
ease;
}
.profile-header-contents a i{
transition:all 200ms
ease;
}
.profile-header-contents a
i:hover{
color:rgba(255,255,255,1);
transition:all 200ms
ease;
}
/* 21. Portfolio */
.portfolio-adaptive *{
position:relative;
display:block;
overflow:hidden;
}
.adaptive-style h4{
width:200px;
float:left;
margin-bottom:25px;
}
.adaptive-style
a{
float:right;
font-size:14px;
color:#1f1f1f;
margin-left:8px;
margin-right:8px;
transition:all
200ms
ease;
}
.active-adaptive-style{
color:#e74c3c!important;
transition:all
200ms ease;
}
.adaptive-one
.adaptive-item{
width:100%;
transition:all 200ms
ease;
float:none;
}
.adaptive-two
.adaptive-item{
height:auto;
width:44%;
margin-left:3%;
margin-right:3%;
transition:all
200ms
ease;
float:left;
}
.adaptive-two{
margin-left:-2%;
width:105%;
}
.adaptive-three
.adaptive-item{
width:27%;
margin-left:3%;
margin-right:3%;
transition:all
200ms
ease;
float:left;
}
.adaptive-three{
width:105%;
margin-left:-2%;
}
/*Portfolios*/
.portfolio-one
*{
position:relative;
display:block;
overflow:hidden;
}
.portfolio-one-title{
margin-bottom:10px;
}
.portfolio-one-text
.title{
font-weight:500;
margin-top:20px;
margin-bottom:0px;
}
.portfolio-one-text
.subtitle{
font-style:normal;
font-size:11px;
opacity:0.8;
}
.portfolio-one-detail{
opacity:0.6;
color:#666666;
display:inline-block;
padding-right:10px;
padding-left:10px;
margin-bottom:5px;
margin-top:0px;
font-size:11px;
}
.portfolio-one-links
a{
color:#666666;
opacity:0.6;
}
.portfolio-one-links
a:first-child{
float:left;
font-size:12px;
}
.portfolio-one-links
a:first-child i{
padding-right:10px;
}
.portfolio-one-links
a:last-child{
float:right;
font-size:12px;
}
.portfolio-one-details
a{
opacity:0.5;
color:#666666;
display:inline-block;
padding-right:10px;
padding-left:10px;
margin-bottom:5px;
margin-top:10px;
font-size:11px;
}
.portfolio-one-details
a:first-child{
padding-left:0px!important;
}
.portfolio-one-details
a:nth-child(2){
border-left:solid 1px #cacaca;
border-right:solid 1px
#cacaca;
}
.portfolio-one-links a:last-child
i{
padding-left:10px;
}
.portfolio-one-image
a{
position:absolute;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.6);
z-index:999;
color:#FFFFFF;
font-size:30px;
opacity:0;
transition:all
200ms ease;
}
.portfolio-one-image
a:hover{
opacity:1;
transition:all 200ms
ease;
color:#FFFFFF;
}
.portfolio-one-image a
i{
width:30px;
height:30px;
position:absolute;
left:50%;
margin-left:-15px;
top:50%;
margin-top:-13px;
}
.portfolio-one-image
img{
margin-bottom:0px;
padding-botom:0px;
}
@media
(min-width:768px){
.portfolio-one-text
.title{
font-size:18px;
margin-top:10px;
}
.portfolio-one-image{
float:left;
width:46%;
margin-right:4%;
}
.portfolio-one-text{
float:right;
width:50%;
}
}
/*Portfolio
Two*/
.portfolio-two *{
position:relative;
display:block;
overflow:hidden;
}
.portfolio-two{
width:119%;
margin-left:-12%;
}
.portfolio-two-item{
width:47%;
padding-left:10%;
float:left;
}
.portfolio-two-title{
margin-bottom:10px;
}
.portfolio-two-text
.title{
font-weight:500;
margin-top:20px;
margin-bottom:0px;
font-size:14px;
}
.portfolio-two-text
.subtitle{
display:block;
font-style:normal;
font-size:11px;
opacity:0.8;
margin-bottom:10px;
}
.portfolio-two-detail{
opacity:0.6;
color:#666666;
display:inline-block;
padding-right:10px;
padding-left:10px;
margin-bottom:5px;
margin-top:0px;
font-size:11px;
}
.portfolio-two-links
a{
color:#666666;
opacity:0.6;
}
.portfolio-two-links
a:first-child{
float:left;
font-size:12px;
}
.portfolio-two-links
a:first-child i{
padding-right:10px;
}
.portfolio-two-links
a:last-child{
float:right;
font-size:12px;
}
.portfolio-two-details
a{
opacity:0.5;
color:#666666;
display:inline-block;
padding-right:10px;
padding-left:10px;
margin-bottom:5px;
margin-top:10px;
font-size:11px;
}
.portfolio-two-details
a:first-child{
padding-left:0px!important;
}
.portfolio-two-details
a:nth-child(2){
border-left:solid 1px #cacaca;
border-right:solid 1px
#cacaca;
}
.portfolio-two-links a:last-child
i{
padding-left:10px;
}
.portfolio-two-image{
max-height:100%;
transition:all
200ms ease;
}
.portfolio-two-image
a{
position:absolute;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.6);
z-index:999;
color:#FFFFFF;
font-size:30px;
opacity:0;
transition:all
200ms ease;
}
.portfolio-two-image
a:hover{
opacity:1;
transition:all 200ms
ease;
color:#FFFFFF;
}
.portfolio-two-image a
i{
width:30px;
height:30px;
position:absolute;
left:50%;
margin-left:-15px;
top:50%;
margin-top:-13px;
}
.portfolio-two-image
img{
margin-bottom:0px;
padding-botom:0px;
}
@media
(min-width:768px){
.portfolio-two-image{
max-height:200px;
transition:all
200ms ease;
}
}
/* 22. Timeline */
.timeline{
position:relative;
display:block;
margin-top:30px;
margin-bottom:50px;
}
.timeline-icon{
width:70px;
height:100%;
float:left;
display:inline;
}
.timeline-text{
display:inline-block;
padding-left:70px;
margin-top:-42px;
min-height:100px;
width:100%;
}
.timeline-text
.subtitle{
font-size:11px;
font-style:normal;
display:block;
margin-top:-10px;
color:#e34e47;
margin-bottom:20px;
}
.timeline-text
p{
margin-top:-10px;
}
.timeline-icon
i{
position:relative;
z-index:99999;
margin-left:auto;
margin-right:auto;
width:45px;
height:45px;
background-color:#1f1f1f;
color:#FFFFFF;
border:solid
1px
#cacaca;
border-radius:30px;
font-size:17px;
line-height:44px;
text-align:center;
}
.timeline-quote
.title{
font-size:14px;
line-height:30px;
font-weight:300;
margin-bottom:20px;
margin-top:-10px;
}
.timeline-quote
.subtitle{
display:block;
text-align:right;
}
.timeline-ending{
margin-bottom:-55px;
}
@media
(min-width:768px){
.timeline{
padding-left:30px;
padding-right:30px;
}
.timeline-decoration{
position:absolute;
width:1px;
height:100%;
z-index:99999;
background-color:rgba(0,0,0,0.1);
margin-left:32px;
}
.timeline-icon{
width:150px;
height:100%;
float:left;
display:inline;
}
.timeline-text{
display:inline-block;
padding-left:100px;
margin-top:-52px;
}
.timeline-icon
i{
position:relative;
z-index:99999;
margin-left:auto;
margin-right:auto;
width:65px;
height:65px;
background-color:#1f1f1f;
color:#FFFFFF;
border:solid
1px
#cacaca;
border-radius:65px;
font-size:20px;
line-height:64px;
text-align:center;
}
.timeline-quote
.title{
font-size:14px;
line-height:30px;
font-weight:300;
margin-bottom:20px;
margin-top:-3px;
}
}
/* 23.
Coverpage */
.coverpage
.overlay{
background-color:rgba(0,0,0,0.7);
}
.coverpage-bg1{
background-image:url(../images/pictures/5.jpg);
background-size:cover;
}
.coverpage-bg2{
background-image:url(../images/pictures/6.jpg);
background-size:cover;
}
.coverpage-bg3{
background-image:url(../images/pictures/3.jpg);
background-size:cover;
}
.coverpage-bg4{
background-image:url(../images/pictures/4.jpg);
background-size:cover;
}
.coverpage{
position:relative;
height:100%;
width:100%;
display:block;
}
.coverpage-content{
width:100%;
}
@media
(min-width:768px){
.coverpage-content
p{
width:40%!important;
margin-left:auto;
margin-right:auto;
}
}
/*Style
1*/
.coverpage-style1
.coverpage-content{
position:absolute;
top:50%;
z-index:99999;
margin-top:-120px!important;
width:100%;
text-align:center;
}
.coverpage-style1
h1{
font-size:40px;
line-height:40px;
font-weight:300;
color:#FFFFFF;
}
.coverpage-style1
h4{
font-size:14px;
font-weight:300;
color:#FFFFFF;
opacity:0.5;
margin-bottom:20px;
}
.coverpage-style1
p{
color:#FFFFFF;
opacity:0.7;
width:75%;
margin-left:auto;
margin-right:auto;
font-weight:300;
}
.coverpage-content
.coverpage-button{
background-color:rgba(255,255,255,0.01);
border:solid
2px
#ffffff;
width:120px;
height:40px;
line-height:36px;
color:#FFFFFF;
margin:0
auto;
text-align:center;
opacity:0.8;
font-size:12px;
font-weight:400;
border-radius:5px;
}
.coverpage-button:hover{
background-color:rgba(255,255,255,0.1);
}
/*Style
2*/
.coverpage-style2
.coverpage-content{
position:absolute;
z-index:99999;
bottom:0px;
}
.coverpage-style2
h1{
color:#FFFFFF;
font-weight:300;
padding-left:30px;
padding-right:30px;
margin-bottom:5px;
font-size:24px;
}
.coverpage-style2
h4{
color:#FFFFFF;
font-weight:300;
opacity:0.5;
font-size:14px;
padding-left:30px;
padding-right:30px;
margin-bottom:10px;
}
.coverpage-style2
p{
padding-left:30px;
padding-right:30px;
color:#FFFFFF;
opacity:0.7;
font-weight:300;
margin-bottom:50px;
}
/*Coverpage
Error*/
.coverpage-error
.coverpage-content{
position:absolute;
top:50%;
z-index:99999;
margin-top:-140px;
width:100%;
text-align:center;
}
.coverpage-error
h1{
font-size:40px;
line-height:40px;
font-weight:300;
color:#FFFFFF;
}
.coverpage-error
h4{
font-size:14px;
font-weight:300;
color:#FFFFFF;
opacity:0.5;
margin-bottom:20px;
}
.coverpage-error
p{
color:#FFFFFF;
opacity:0.7;
width:75%;
margin-left:auto;
margin-right:auto;
font-weight:300;
}
/* 24.
Countdown */
.coverpage-construction
.coverpage-content{
position:absolute;
top:50%;
z-index:99999;
margin-top:-200px;
width:100%;
text-align:center;
}
.coverpage-construction
h1{
font-size:40px;
line-height:40px;
font-weight:300;
color:#FFFFFF;
}
.coverpage-construction
h4{
font-size:14px;
font-weight:300;
color:#FFFFFF;
opacity:0.5;
margin-bottom:20px;
}
.coverpage-construction
p{
color:#FFFFFF;
opacity:0.7;
width:75%;
margin-left:auto;
margin-right:auto;
font-weight:300;
}
/*Coverpage
Controls*/
.coverpage-controls
{
position:fixed;
top:90px;
left:20px;
width:100%;
z-index:999999;
}
.coverpage-controls
a{
font-size:10px;
float:left;
width:30px;
height:30px;
line-height:27px;
border-radius:30px;
border:solid
2px
rgba(255,255,255,0.2);
color:rgba(255,255,255,0.4);
text-align:center;
margin-left:10px;
transition:all
200ms ease;
}
.coverpage-controls
a:hover{
color:rgba(255,255,255,1);
transition:all 200ms
ease;
}
.active-coverpage{
color:#FFFFFF!important;
transition:all
200ms
ease;
}
/*Countdown*/
.countdown{
display:block;
width:225px;
margin-left:auto;
margin-right:auto;
padding-bottom:80px;
}
.countdown-box{
float:left;
}
.countdown-box
span{
display:block;
text-align:center;
font-size:10px;
padding-top:5px;
text-transform:uppercase;
color:#FFFFFF;
opacity:0.5;
font-weight:600!important;
}
.countdown-years{
font-size:24px;
font-weight:800;
margin-left:15px;
margin-right:15px;
padding-top:3px;
padding-bottom:3px;
color:#FFFFFF;
display:none;
}
.box-years
span{
display:none!important;
}
.countdown-days{
font-size:28px;
font-weight:500;
margin-left:10px;
margin-right:10px;
padding-top:3px;
padding-bottom:3px;
color:#FFFFFF;
}
.countdown-hours{
font-size:28px;
font-weight:500;
margin-left:10px;
margin-right:10px;
padding-top:3px;
padding-bottom:3px;
color:#FFFFFF;
}
.countdown-minutes{
font-size:28px;
font-weight:500;
margin-left:10px;
margin-right:10px;
padding-top:3px;
padding-bottom:3px;
color:#FFFFFF;
}
.countdown-seconds{
font-size:28px;
font-weight:500;
margin-left:10px;
margin-right:10px;
padding-top:3px;
padding-bottom:3px;
color:#FFFFFF;
}
/* 25.
Notification Page */
.notification-page *{
position:relative;
display:block;
overflow:hidden;
}
.notification-page{
margin-top:30px;
}
.notification-page-item
i:first-child{
font-size:16px;
background-color:#1f1f1f;
text-align:center;
height:50px;
width:50px;
line-height:52px;
border-radius:50px;
color:#FFFFFF;
margin-right:20px;
margin-top:6px;
margin-bottom:0px;
float:left;
display:inline;
}
.notification-page-item
img{
width:50px;
height:50px;
border-radius:50px;
float:left;
display:inline;
margin-right:20px;
margin-top:6px;
margin-bottom:0px;
}
.notification-page-item
em{
font-size:13px;
font-weight:400;
display:block;
font-style:normal;
text-align:justify!important;
}
.notification-page-item
a:last-child{
border:none;
}
.notification-page-item
a{
display:inline-block;
float:right;
text-align:right;
padding-left:15px;
margin-left:15px;
border-left:solid
1px
#cacaca;
line-height:12px;
margin-top:20px;
font-size:11px;
}
@media
(min-width:768px){
.notification-page-item{
width:45%!important;
float:left!important;
margin-right:2.5%;
margin-left:2.5%;
}
}
/* 26.
Registration Box */
.reg-wrapper{
position:fixed;
background-color:rgba(0,0,0,0.8);
width:100%;
height:100%;
z-index:99999;
}
.reg{
position:fixed;
display:block;
width:280px;
height:550px;
top:50%;
margin-top:-195px;
left:50%;
margin-left:-140px;
background-color:rgba(255,255,255,0.9);
z-index:999999;
border-radius:5px;
}
.reg
h2{
padding-top:20px;
padding-bottom:0px;
padding-left:30px;
padding-right:30px;
font-weight:600;
}
.reg
h4{
font-weight:400;
font-size:12px;
margin-bottom:25px;
}
.reg-username{
margin-bottom:20px;
height:40px;
width:85%;
border:solid
2px
rgba(0,0,0,0.1);
color:rgba(0,0,0,0.5);
padding-left:20px;
transition:all
400ms
ease;
margin-left:auto;
margin-right:auto;
}
.reg-captcha{
margin-bottom:20px;
height:40px;
width:45%;
border:solid
2px
rgba(0,0,0,0.1);
color:rgba(0,0,0,0.5);
padding-left:20px;
transition:all
400ms
ease;
margin-left:auto;
margin-right:auto;
}
.reg-username:focus{
border:solid
2px #27ae60;/*Green*/
transition:all 400ms
ease;
}
.reg-password{
margin-bottom:20px;
height:40px;
width:85%;
border:solid
2px
rgba(0,0,0,0.1);
color:rgba(0,0,0,0.5);
padding-left:20px;
transition:all
400ms
ease;
margin-left:auto;
margin-right:auto;
}
.reg-password:focus{
border:solid
2px #27ae60;/*Green*/
transition:all 400ms ease;
}
.reg
.button{
width:84%;
text-align:center;
margin-left:auto;
margin-right:auto;
display:block;
}
.reg
em{
margin-top:20px;
display:block;
text-align:center;
font-style:normal;
font-size:10px;
}
.reg
.close-reg{
width:100%;
margin-top:15px;
height:50px;
border-top:solid
1px
rgba(0,0,0,0.1);
color:#1f1f1f;
font-size:12px;
line-height:45px;
text-align:center;
}
/* 26.
Login Box */
.loginbox-wrapper{
position:fixed;
background-color:rgba(0,0,0,0.8);
width:100%;
height:100%;
z-index:99999;
}
.loginbox{
position:fixed;
display:block;
width:280px;
height:390px;
top:50%;
margin-top:-195px;
left:50%;
margin-left:-140px;
background-color:rgba(255,255,255,0.9);
z-index:999999;
border-radius:5px;
}
.loginbox
h2{
padding-top:20px;
padding-bottom:0px;
padding-left:30px;
padding-right:30px;
font-weight:600;
}
.loginbox
h4{
font-weight:400;
font-size:12px;
margin-bottom:25px;
}
.loginbox-username{
margin-bottom:20px;
height:40px;
width:85%;
border:solid
2px
rgba(0,0,0,0.1);
color:rgba(0,0,0,0.5);
padding-left:20px;
transition:all
400ms
ease;
margin-left:auto;
margin-right:auto;
}
.loginbox-username:focus{
border:solid
2px #27ae60;/*Green*/
transition:all 400ms
ease;
}
.loginbox-password{
margin-bottom:30px;
height:40px;
width:85%;
border:solid
2px
rgba(0,0,0,0.1);
color:rgba(0,0,0,0.5);
padding-left:20px;
transition:all
400ms
ease;
margin-left:auto;
margin-right:auto;
}
.loginbox-password:focus{
border:solid
2px #27ae60;/*Green*/
transition:all 400ms ease;
}
.loginbox
.button{
width:40%;
text-align:center;
margin-left:auto;
margin-right:auto;
display:block;
}
.loginbox
em{
margin-top:20px;
display:block;
text-align:center;
font-style:normal;
font-size:10px;
}
.loginbox
.close-loginbox{
width:100%;
margin-top:15px;
height:50px;
border-top:solid
1px
rgba(0,0,0,0.1);
color:#1f1f1f;
font-size:12px;
line-height:45px;
text-align:center;
}
/*Sign
In Page*/
.signinbox{
height:390px!important;
margin-top:-195px!important;
}
.signinbox .close-loginbox{
padding:0px;
margin:0px;
}
.signinbox a{
margin-bottom:15px;
display:block;
margin-left:20px;
margin-right:20px;
font-size:12px;
height:45px;
line-height:45px;
padding-left:65px;
color:#FFFFFF;
}
.signinbox i{
width:45px;
height:45px;
line-height:45px;
text-align:center;
position:absolute;
left:20px;
border-right:1px solid rgba(255,255,255,0.5);
}
.signinbox
a:hover{
color:#FFFFFF;
}
.signin-facebook{
background-color:#3b5998;
}
.signin-twitter{
background-color:#4099FF;
}
.signin-google{
background-color:#dd4b39;
}
.signin-login{
background-color:#27ae60;
}
.signinbox .close-loginbox{
padding-top:5px;
}
.signinbox .close-loginbox:hover{
color:#1f1f1f;
}
/* 27. Portfolio */
.portfolio-wide{
margin-top:0px;
}
.portfolio-wide a{
position:relative;
display:block;
}
.portfolio-wide-item
img{
margin:0px;
padding:0px;
}
.portfolio-wide-item{
margin-bottom:5px;
}
.portfolio-wide-item
.overlay{
background-color:rgba(0,0,0,0.7);
}
.portfolio-wide-item
h3{
position:absolute;
width:100%;
top:50%;
margin-top:-20px;
z-index:99999;
color:#FFFFFF;
text-align:center;
font-weight:500;
}
.portfolio-wide-item
p{
color:rgba(255,255,255,0.5);
position:absolute;
width:100%;
top:50%;
margin-top:0px;
z-index:99999;
text-align:center;
}
@media
(min-width:768px){
.portfolio-wide-item{
max-height:200px;
}
.portfolio-wide-item
h3{
font-size:28px;
}
.portfolio-wide-item
p{
font-size:14px;
margin-top:20px;
}
}
/* Sidebar Menu
Structures */
/* DO NOT CHANGE!*/
/* The code is calibrated perfectly for
all mobiles*/
/*Custom Code*/
.snap-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height:
auto;
z-index: 2;
overflow: auto;
-webkit-overflow-scrolling:
touch;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform:
translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0,
0);
}
.snap-drawers {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
overflow-x:hidden;
}
.snap-drawer {
position: absolute;
top: 0;
right: auto;
bottom: 0;
left: auto;
width: 265px;
height:
auto;
overflow: auto;
-webkit-overflow-scrolling: touch;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s
ease;
-ms-transition: width 0.35s ease;
-o-transition: width
0.35s ease;
transition: width 0.35s ease;
overflow-x:hidden;
}
.snap-drawer-left {
width:270px;
left: 0;
z-index: 1;
transition:all 350ms ease-in-out;
}
.snap-drawer-right
{
width:270px;
right: 0;
z-index: 1;
transition:all 350ms
ease-in-out;
}
.snapjs-left .snap-drawer-right{
right:-280px;
transition:all 350ms ease-in-out;
}
.snapjs-right .snap-drawer-left {
left:-280px;
transition:all 350ms
ease-in-out;
}
.snapjs-expand-left
.snap-drawer-left,
.snapjs-expand-right .snap-drawer-right {
width:
100%;
}
/*Snap.CSS*/
/* Show the "Drag" background in the
demo */
#content
{
background-color:#FFFFFF;
overflow-x:hidden;
}
/* Styles for
fading out the drawer content in the "Expanding" demo
*/
.drawer-inner {
-webkit-transition: opacity 0.35s ease;
-moz-transition: opacity 0.35s ease;
-ms-transition: opacity 0.35s
ease;
-o-transition: opacity 0.35s ease;
transition:
opacity 0.35s ease;
}
.snapjs-expand-left
.drawer-inner,
.snapjs-expand-right .drawer-inner {
opacity: 0;
}
/*
Default demo styles */
#content{
z-index:999999;
box-shadow:
0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
.snap-drawers {
background-image:url(../images/bg.png)!important;
}
.snap-drawer
{
}
.no-user-select{
-webkit-user-select: none; /* Chrome all /
Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
-o-user-select: none;
user-select: none;
}
/* 39. Blog
Post*/
@media(min-width:768px){
.blog-posts{
width:65%;
float:left;
}
.blog-sidebar{
margin-left:5%;
width:30%;
float:left;
}
}
.blog-post-image img{
display:block;
width:100%;
}
.blog-post-image{margin-bottom:30px;}
.blog-post-date{
width:50%;
float:left;
}
.blog-post-text{
margin-bottom:20px;
}
.blog-post-date i{
margin-right:10px;
}
.blog-post-more{
text-align:right;
}
.blog-post-more a i{
margin-left:10px;
}
.blog-search{
float: left;
height:35px;
display:block;
width:80%;
padding-left:20px;
padding-right:20px;
border:solid 1px rgba(0,0,0,0.1);
transition:all 200ms ease;
background-color:#FFFFFF;
}
.blog-search-btn{
float: right;
height:45px;
width:20%;
}
.blog-search:focus{
border:solid
1px #27ae60;
transition:all 200ms ease;
}
.blog-gallery li{
width:50%!important;
transform:scale(1,1);
-webkit-transform:scale(1,1);
transition:all 200ms
ease;
}
.blog-gallery li:hover{
transform:scale(0.9,0.9);
-webkit-transform:scale(0.9,0.9);
transition:all 200ms
ease;
}
.blog-gallery{
margin-bottom:0px!important;
}
.blog-category{
margin-bottom:0px;
}
.blog-category li a{
color:rgba(0,0,0,0.6);
}
.blog-category li{
list-style:none;
line-height:24px;
transition:all 200ms ease;
}
.blog-category li
i{
margin-right:20px;
}
.blog-category li:hover{
padding-left:10px;
transition:all 200ms
ease;
}