My personal blog
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.

2670 lines
69 KiB

@import url("http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic");
@font-face {
font-family: "Flat-UI-Icons-16";
src: url("../fonts/Flat-UI-Icons-16.eot");
src: url("../fonts/Flat-UI-Icons-16.eot?#iefix") format("embedded-opentype"), url("../fonts/Flat-UI-Icons-16.woff") format("woff"), url("../fonts/Flat-UI-Icons-16.ttf") format("truetype"), url("../fonts/Flat-UI-Icons-16.svg#Flat-UI-Icons-16") format("svg");
font-weight: normal;
font-style: normal; }
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: "Flat-UI-Icons-16";
content: attr(data-icon);
speak: none;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased; }
/* Use the following CSS code if you want to have a class per icon */
/*Instead of a list of all class selectors,
*you can use the generic selector below, but it's slower:
*[class*="fui-"]:before { */
.fui-volume-16:before, .fui-video-16:before, .fui-time-16:before, .fui-settings-16:before, .fui-plus-16:before, .fui-new-16:before, .fui-menu-16:before, .fui-man-16:before, .fui-mail-16:before, .fui-lock-16:before, .fui-location-16:before, .fui-heart-16:before, .fui-eye-16:before, .fui-cross-16:before, .fui-cmd-16:before, .fui-checkround-16:before, .fui-checkmark-16:before, .fui-camera-16:before, .fui-calendar-16:before, .fui-bubble-16:before {
font-family: "Flat-UI-Icons-16";
speak: none;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased; }
.fui-volume-16:before {
content: "\e000"; }
.fui-video-16:before {
content: "\e001"; }
.fui-time-16:before {
content: "\e002"; }
.fui-settings-16:before {
content: "\e003"; }
.fui-plus-16:before {
content: "\e004"; }
.fui-new-16:before {
content: "\e005"; }
.fui-menu-16:before {
content: "\e006"; }
.fui-man-16:before {
content: "\e007"; }
.fui-mail-16:before {
content: "\e008"; }
.fui-lock-16:before {
content: "\e009"; }
.fui-location-16:before {
content: "\e00a"; }
.fui-heart-16:before {
content: "\e00b"; }
.fui-eye-16:before {
content: "\e00c"; }
.fui-cross-16:before {
content: "\e00d"; }
.fui-cmd-16:before {
content: "\e00e"; }
.fui-checkround-16:before {
content: "\e00f"; }
.fui-checkmark-16:before {
content: "\e010"; }
.fui-camera-16:before {
content: "\e011"; }
.fui-calendar-16:before {
content: "\e012"; }
.fui-bubble-16:before {
content: "\e013";
color: $secondary-color;}
@font-face {
font-family: "Flat-UI-Icons-24";
src: url("../fonts/Flat-UI-Icons-24.eot");
src: url("../fonts/Flat-UI-Icons-24.eot?#iefix") format("embedded-opentype"), url("../fonts/Flat-UI-Icons-24.woff") format("woff"), url("../fonts/Flat-UI-Icons-24.ttf") format("truetype"), url("../fonts/Flat-UI-Icons-24.svg#Flat-UI-Icons-24") format("svg");
font-weight: normal;
font-style: normal; }
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: "Flat-UI-Icons-24";
content: attr(data-icon);
speak: none;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased; }
/* Use the following CSS code if you want to have a class per icon */
/*Instead of a list of all class selectors,
*you can use the generic selector below, but it's slower:
*[class*="fui-"]:before { */
.fui-video-24:before, .fui-time-24:before, .fui-settings-24:before, .fui-plus-24:before, .fui-new-24:before, .fui-menu-24:before, .fui-man-24:before, .fui-mail-24:before, .fui-lock-24:before, .fui-location-24:before, .fui-heart-24:before, .fui-eye-24:before, .fui-cross-24:before, .fui-cmd-24:before, .fui-checkround-24:before, .fui-checkmark-24:before, .fui-calendar-24:before, .fui-bubble-24:before, .fui-volume-24:before, .fui-camera-24:before {
font-family: "Flat-UI-Icons-24";
speak: none;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased; }
.fui-video-24:before {
content: "\e000"; }
.fui-time-24:before {
content: "\e001"; }
.fui-settings-24:before {
content: "\e002"; }
.fui-plus-24:before {
content: "\e003"; }
.fui-new-24:before {
content: "\e005"; }
.fui-menu-24:before {
content: "\e006"; }
.fui-man-24:before {
content: "\e007"; }
.fui-mail-24:before {
content: "\e008"; }
.fui-lock-24:before {
content: "\e009"; }
.fui-location-24:before {
content: "\e00a"; }
.fui-heart-24:before {
content: "\e00b"; }
.fui-eye-24:before {
content: "\e00c"; }
.fui-cross-24:before {
content: "\e00d"; }
.fui-cmd-24:before {
content: "\e00e"; }
.fui-checkround-24:before {
content: "\e00f"; }
.fui-checkmark-24:before {
content: "\e010"; }
.fui-calendar-24:before {
content: "\e011"; }
.fui-bubble-24:before {
content: "\e012"; }
.fui-volume-24:before {
content: "\e013"; }
.fui-camera-24:before {
content: "\e004"; }
body {
color: $text-color;
background: $bg-color;
font: 18px/1.831 "Open Sans", sans-serif; }
p {
font-weight: 300; }
a {
color: $secondary-color;
text-decoration: none;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
-webkit-backface-visibility: hidden; }
a:hover {
color: $tertiary-color;
text-decoration: none; }
h1 {
color: $primary-color;
font-size: 32px;
font-weight: 900;
font-family: "Quicksand"; }
.date-time{
font-size: 15px;
color: $accent-color2;
font-weight: 500;
}
.link {
font-weight: 500;
font-size: 40px;
}
h2 {
color: $primary-color;
font-size: 26px;
font-weight: 500;
font-family: "Quicksand";
margin-bottom: 2px; }
h3 {
color: $accent-color2;
font-size: 24px;
font-weight: 500;
font-family: "Quicksand";
margin-bottom: 4px;
margin-top: 2px; }
.tagline
{
font-weight: 400;
}
h4 {
color: $accent-color2;
font-size: 18px;
font-weight: 500;
font-family: "Quicksand";
line-height: 18px;
margin-top: 4px; }
h5 {
color: $accent-color2;
font-size: 16px;
font-weight: 500;
font-family: "Quicksand";
text-transform: none; }
.date{
margin-top: 26px;
}
h6 {
color: $accent-color2;
font-size: 13px;
font-weight: 500;
font-family: "Quicksand";
text-transform: none; }
.btn {
border: none;
background: $bg-color;
color: white;
font-size: 16.5px;
text-decoration: none;
text-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
-webkit-backface-visibility: hidden; }
.btn:hover, .btn:focus {
background-color: #4e6d8d;
color: white;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
-webkit-backface-visibility: hidden; }
.btn:active, .btn.active {
background-color: #2c3e50;
color: rgba(255, 255, 255, 0.75);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
.btn.disabled, .btn[disabled] {
background-color: #95a5a6;
color: white; }
.btn.btn-large {
padding-bottom: 12px;
padding-top: 13px; }
.btn.btn-primary {
background-color: $tertiary-color; }
.btn.btn-primary:hover, .btn.btn-primary:focus {
background-color: #2fe2bf; }
.btn.btn-primary:active, .btn.btn-primary.active {
background-color: #16a085; }
.btn.btn-info {
background-color: $secondary-color; }
.btn.btn-info:hover, .btn.btn-info:focus {
background-color: #5dade2; }
.btn.btn-info:active, .btn.btn-info.active {
background-color: #2383c4; }
.btn.btn-danger {
background-color: #e74c3c; }
.btn.btn-danger:hover, .btn.btn-danger:focus {
background-color: #ec7063; }
.btn.btn-danger:active, .btn.btn-danger.active {
background-color: #dc2d1b; }
.btn.btn-success {
background-color: #2ecc71; }
.btn.btn-success:hover, .btn.btn-success:focus {
background-color: #55d98d; }
.btn.btn-success:active, .btn.btn-success.active {
background-color: #27ad60; }
.btn.btn-warning {
background-color: #f1c40f; }
.btn.btn-warning:hover, .btn.btn-warning:focus {
background-color: #f4d03f; }
.btn.btn-warning:active, .btn.btn-warning.active {
background-color: #cea70c; }
.btn-toolbar .btn {
font-size: 18px;
padding: 10px 14px 9px; }
.btn-toolbar .btn:first-child {
-webkit-border-radius: 6px 0 0 6px;
-moz-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px; }
.btn-toolbar .btn:last-child {
-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0; }
.btn-toolbar .btn.active {
color: white; }
.demo-headline {
padding: 73px 0 110px;
text-align: center; }
.demo-logo {
font-size: 90px;
font-weight: 900;
letter-spacing: -2px;
line-height: 100px; }
.demo-logo .logo {
background: url("../images/demo/logo-mask.png") center 0 no-repeat;
background-size: 256px 186px;
height: 186px;
margin: 0 auto 26px;
overflow: hidden;
text-indent: -9999em;
width: 256px; }
.demo-logo small {
color: rgba(52, 73, 94, 0.3);
display: block;
font-size: 22px;
font-weight: 700;
letter-spacing: -1px;
padding-top: 5px; }
.demo-row {
margin-bottom: 20px; }
.demo-panel-title {
margin-bottom: 20px;
padding-top: 20px; }
.demo-panel-title small {
color: #bfc1c3;
font-size: inherit;
font-weight: 400; }
.demo-navigation {
margin-bottom: -4px;
margin-top: -10px; }
.demo-pager {
margin-top: -10px; }
.demo-tooltips {
height: 126px; }
.demo-tooltips .tooltip {
left: -8px !important;
position: relative !important;
top: -8px !important; }
.demo-headings {
margin-bottom: 12px; }
.demo-tiles {
margin-bottom: 46px; }
.demo-icons {
margin-bottom: 115px; }
.demo-icons-24 {
font-size: 24px;
margin-bottom: 38px;
position: relative; }
.demo-icons-24 span {
margin: 0 0 0 18px; }
.demo-icons-24 span:first-child {
margin-left: 0; }
.demo-icons-16 {
font-size: 16px;
margin: 0 0 38px 5px;
position: relative; }
.demo-icons-16 span {
margin: 0 0 0 28px; }
.demo-icons-16 span:first-child {
margin-left: 0; }
.demo-icons-tooltip {
bottom: 0;
color: #b9c8d8;
font-size: 12px;
left: 100%;
margin-left: 0 !important;
position: absolute;
width: 80px; }
.demo-illustrations {
margin-bottom: 45px; }
.demo-illustrations img {
height: 100px;
margin-left: 35px;
width: 100px;
vertical-align: bottom; }
.demo-illustrations img:first-child {
margin-left: 0; }
.demo-illustrations img.big-illustration {
height: 111px;
width: 112px; }
.demo-illustrations img.big-retina-illustration {
height: 104px;
margin-right: -24px;
width: 117px; }
.demo-illustrations img.big-illustration-pusher {
margin-right: 12px; }
.demo-samples {
margin-bottom: 46px; }
.demo-video {
border-radius: 6px;
padding-top: 95px; }
.demo-download-section {
float: none;
margin: 0 auto;
padding: 60px 0 90px 20px;
text-align: center; }
.demo-download-section [class*='fui-'] {
margin: 3px 0 -3px; }
.demo-download {
background-color: #e8edf2;
border-radius: 50%;
height: 120px;
margin: 0 auto 32px;
padding: 40px 28px 30px 32px;
text-align: center;
width: 130px; }
.demo-download img {
height: 104px;
width: 82px; }
.demo-download-text {
font-size: 15px;
padding: 20px 0;
text-align: center; }
.demo-text-box a:hover {
color: $tertiary-color; }
.demo-browser {
background: #2c3e50 url("../images/demo/browser.png") 0 0 no-repeat;
background-size: 659px 42px;
border-radius: 0 0 6px 6px;
color: white;
margin: 0 41px 140px 0;
padding-top: 42px; }
.demo-browser-side {
float: left;
padding: 22px 20px;
width: 111px; }
.demo-browser-side > h5 {
margin-bottom: 3px;
text-transform: none; }
.demo-browser-side > h6 {
font-size: 11px;
font-weight: 300;
line-height: 18px;
margin-top: 3px;
text-transform: none; }
.demo-browser-author {
background: url("../images/demo/browser-author.jpg") center center no-repeat;
border: 3px solid white;
display: block;
height: 84px;
margin: 0 auto;
width: 84px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%; }
.demo-browser-action {
padding: 30px 0 12px; }
.demo-browser-action > .btn {
padding: 9px 0 10px 11px;
text-align: left;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; }
.demo-browser-action > .btn:before {
color: white;
content: "\e004";
font-size: 16px;
font-family: "Flat-UI-Icons-16";
font-weight: 300;
margin-right: 12px;
position: relative;
top: 1px;
-webkit-font-smoothing: antialiased; }
.demo-browser-content {
background-color: $bg-color;
border-radius: 0 0 6px;
overflow: hidden;
padding: 21px 0 0 20px; }
.demo-browser-content > img {
border: 6px solid white;
float: left;
margin: 0 15px 20px 0;
width: 134px; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
.logo {
background-image: url("../images/demo/logo-mask-2x.png"); }
.demo-browser {
background-image: url("../images/demo/browser-2x.png"); } }
.navbar {
font-size: 18px; }
.navbar .brand {
color: $tertiary-color;
font-size: inherit;
font-weight: 700;
padding-bottom: 16px;
padding-top: 15px; }
.navbar .nav > li:hover > ul {
top: 100%; }
.navbar .nav > li > ul {
padding-top: 13px;
top: 80%;
background-color: white\9; }
.navbar .nav > li > ul:before {
content: "";
border-style: solid;
border-width: 0 9px 9px 9px;
border-color: transparent transparent $bg-color transparent;
height: 0px;
position: absolute;
left: 15px;
top: 5px;
width: 0px;
-webkit-transform: rotate(360deg); }
.navbar .nav > li > ul li:hover ul {
opacity: 1;
-webkit-transform: scale(1, 1);
visibility: visible;
display: block\9; }
.navbar .nav > li > ul li ul {
left: 100%; }
.navbar .nav > li > a {
padding: 15px 15px 17px;
margin-top: 4px;
border-radius: 5px;
-moz-border-radius: 5px; }
.navbar .nav > li > a:hover {
color: $tertiary-color; }
.navbar .nav li {
position: relative; }
.navbar .nav li:hover > ul {
opacity: 1;
z-index: 100;
-webkit-transform: scale(1, 1);
visibility: visible;
display: block\9; }
.navbar .nav ul {
border-radius: 4px;
left: 15px;
list-style-type: none;
margin-left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 234px;
z-index: -100;
-webkit-transform: scale(1, 0.99);
-webkit-transform-origin: 0 0;
visibility: hidden;
display: none\9;
-webkit-transition: 0.3s ease-out;
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
transition: 0.3s ease-out;
-webkit-backface-visibility: hidden; }
.navbar .nav ul ul {
left: 95%;
padding-left: 5px; }
.navbar .nav ul li {
background-color: $bg-color;
padding: 0 3px 3px; }
.navbar .nav ul li:first-child {
border-radius: 4px 4px 0 0;
padding-top: 3px; }
.navbar .nav ul li:last-child {
border-radius: 0 0 4px 4px; }
.navbar .nav ul li.active > a, .navbar .nav ul li.active > a:hover {
background-color: $tertiary-color;
color: white; }
.navbar .nav ul a {
border-radius: 2px;
color: white;
display: block;
font-size: 14px;
padding: 6px 9px;
text-decoration: none; }
.navbar .nav ul a:hover {
background-color: $tertiary-color; }
.navbar-inner {
border: none;
padding-left: 4px;
padding-right: 4px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); }
.navbar-inverse .navbar-inner {
background: $navbar-color;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); }
.navbar-inverse .nav > li > a {
color: $accent-color3;
font-weight: 300; }
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
background-color: transparent;
color: $tertiary-color;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
.navbar-inverse .nav .active > a:hover {
background-color: $accent-color1; }
.navbar-unread {
background-color: #e74c3c;
border-radius: 30px;
color: white;
display: none;
font-size: 12px;
font-weight: 500;
line-height: 18px;
min-width: 8px;
padding: 0 5px;
position: absolute;
right: -7px;
text-align: center;
text-shadow: none;
top: 8px;
z-index: 10; }
.active .navbar-unread {
display: block; }
.dk_container {
cursor: pointer;
font-size: 14px;
margin-bottom: 10px;
outline: none; }
.dk_toggle {
background-color: $tertiary-color;
color: white;
border-radius: 6px;
overflow: hidden;
padding: 11px 45px 11px 13px;
text-decoration: none;
white-space: nowrap;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
-webkit-backface-visibility: hidden; }
.dk_toggle:hover, .dk_toggle:focus, .dk_focus .dk_toggle {
background-color: #2fe2bf;
color: white;
outline: none; }
.dk_toggle:active {
background-color: #16a085;
outline: none; }
.dk_toggle:active .select-icon {
border-left-color: transparent; }
.select-icon {
background: $tertiary-color url("../images/select/toggle.png") no-repeat right center;
border-left: 2px solid rgba(52, 73, 94, 0.15);
border-radius: 0 6px 6px 0;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 42px;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
-webkit-backface-visibility: hidden; }
.dk_open {
z-index: 10; }
.dk_open .dk_toggle {
background-color: $tertiary-color; }
.dk_open .dk_toggle .select-icon {
background-color: #16a085;
border-left-color: transparent; }
.dk_options {
padding-top: 14px; }
.dk_options:before {
content: "";
border-style: solid;
border-width: 0 9px 9px 9px;
border-color: transparent transparent $bg-color transparent;
height: 0px;
position: absolute;
left: 15px;
top: 5px;
width: 0px;
-webkit-transform: rotate(360deg); }
.dk_options:before {
left: auto;
right: 12px; }
.dk_options li {
padding-bottom: 3px; }
.dk_options a {
border-radius: 3px;
color: white;
display: block;
padding: 5px 9px;
text-decoration: none; }
.dk_options a:hover {
background-color: $tertiary-color; }
.dk_option_current a {
background-color: $tertiary-color; }
.dk_options_inner {
background-color: $bg-color;
border-radius: 5px;
margin: 0;
max-height: 244px;
padding: 3px 3px 0; }
.dk_touch .dk_options {
max-height: 250px; }
.dk_container {
display: none;
position: relative;
vertical-align: middle; }
.dk_container.dk_shown {
display: inline-block;
zoom: 1;
*display: inline; }
.dk_container[class*="span"] {
float: none;
margin-left: 0; }
.dk_toggle {
display: block;
position: relative; }
.dk_open {
position: relative; }
.dk_open .dk_options {
margin-top: -1px;
opacity: 1;
z-index: 10;
display: block\9; }
.dk_open .dk_label {
color: inherit; }
.dk_options {
margin-top: -21px;
position: absolute;
left: 0;
opacity: 0;
width: 220px;
z-index: -100;
display: none\9;
-webkit-transition: 0.3s ease-out;
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
transition: 0.3s ease-out;
-webkit-backface-visibility: hidden; }
.select-right .dk_options {
left: auto;
right: 0; }
.dk_options a {
display: block; }
.dk_options_inner {
overflow: auto;
outline: none;
position: relative; }
.dk_touch .dk_options {
overflow: hidden; }
.dk_touch .dk_options_inner {
max-height: none;
overflow: visible; }
.dk_fouc select {
position: relative;
top: -99999em;
visibility: hidden; }
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
border: 2px solid #dce4ec;
color: $bg-color;
font-family: "Lato", sans-serif;
font-size: 14px;
padding: 8px 0 9px 10px;
text-indent: 1px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
textarea:-moz-placeholder,
input[type="text"]:-moz-placeholder,
input[type="password"]:-moz-placeholder,
input[type="datetime"]:-moz-placeholder,
input[type="datetime-local"]:-moz-placeholder,
input[type="date"]:-moz-placeholder,
input[type="month"]:-moz-placeholder,
input[type="time"]:-moz-placeholder,
input[type="week"]:-moz-placeholder,
input[type="number"]:-moz-placeholder,
input[type="email"]:-moz-placeholder,
input[type="url"]:-moz-placeholder,
input[type="search"]:-moz-placeholder,
input[type="tel"]:-moz-placeholder,
input[type="color"]:-moz-placeholder,
.uneditable-input:-moz-placeholder {
color: #acb6c0; }
textarea::-webkit-input-placeholder,
input[type="text"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
input[type="datetime"]::-webkit-input-placeholder,
input[type="datetime-local"]::-webkit-input-placeholder,
input[type="date"]::-webkit-input-placeholder,
input[type="month"]::-webkit-input-placeholder,
input[type="time"]::-webkit-input-placeholder,
input[type="week"]::-webkit-input-placeholder,
input[type="number"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="url"]::-webkit-input-placeholder,
input[type="search"]::-webkit-input-placeholder,
input[type="tel"]::-webkit-input-placeholder,
input[type="color"]::-webkit-input-placeholder,
.uneditable-input::-webkit-input-placeholder {
color: #acb6c0; }
textarea.placeholder,
input[type="text"].placeholder,
input[type="password"].placeholder,
input[type="datetime"].placeholder,
input[type="datetime-local"].placeholder,
input[type="date"].placeholder,
input[type="month"].placeholder,
input[type="time"].placeholder,
input[type="week"].placeholder,
input[type="number"].placeholder,
input[type="email"].placeholder,
input[type="url"].placeholder,
input[type="search"].placeholder,
input[type="tel"].placeholder,
input[type="color"].placeholder,
.uneditable-input.placeholder {
color: #acb6c0; }
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: $tertiary-color;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
.control-group.error textarea, .control-group.error
input[type="text"], .control-group.error
input[type="password"], .control-group.error
input[type="datetime"], .control-group.error
input[type="datetime-local"], .control-group.error
input[type="date"], .control-group.error
input[type="month"], .control-group.error
input[type="time"], .control-group.error
input[type="week"], .control-group.error
input[type="number"], .control-group.error
input[type="email"], .control-group.error
input[type="url"], .control-group.error
input[type="search"], .control-group.error
input[type="tel"], .control-group.error
input[type="color"], .control-group.error
.uneditable-input {
border-color: #e74c3c;
color: #e74c3c;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
.control-group.error textarea:focus, .control-group.error
input[type="text"]:focus, .control-group.error
input[type="password"]:focus, .control-group.error
input[type="datetime"]:focus, .control-group.error
input[type="datetime-local"]:focus, .control-group.error
input[type="date"]:focus, .control-group.error
input[type="month"]:focus, .control-group.error
input[type="time"]:focus, .control-group.error
input[type="week"]:focus, .control-group.error
input[type="number"]:focus, .control-group.error
input[type="email"]:focus, .control-group.error
input[type="url"]:focus, .control-group.error
input[type="search"]:focus, .control-group.error
input[type="tel"]:focus, .control-group.error
input[type="color"]:focus, .control-group.error
.uneditable-input:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
.control-group.success textarea, .control-group.success
input[type="text"], .control-group.success
input[type="password"], .control-group.success
input[type="datetime"], .control-group.success
input[type="datetime-local"], .control-group.success
input[type="date"], .control-group.success
input[type="month"], .control-group.success
input[type="time"], .control-group.success
input[type="week"], .control-group.success
input[type="number"], .control-group.success
input[type="email"], .control-group.success
input[type="url"], .control-group.success
input[type="search"], .control-group.success
input[type="tel"], .control-group.success
input[type="color"], .control-group.success
.uneditable-input {
border-color: #2ecc71;
color: #2ecc71;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
.control-group.success textarea:focus, .control-group.success
input[type="text"]:focus, .control-group.success
input[type="password"]:focus, .control-group.success
input[type="datetime"]:focus, .control-group.success
input[type="datetime-local"]:focus, .control-group.success
input[type="date"]:focus, .control-group.success
input[type="month"]:focus, .control-group.success
input[type="time"]:focus, .control-group.success
input[type="week"]:focus, .control-group.success
input[type="number"]:focus, .control-group.success
input[type="email"]:focus, .control-group.success
input[type="url"]:focus, .control-group.success
input[type="search"]:focus, .control-group.success
input[type="tel"]:focus, .control-group.success
input[type="color"]:focus, .control-group.success
.uneditable-input:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
.control-group.warning textarea, .control-group.warning
input[type="text"], .control-group.warning
input[type="password"], .control-group.warning
input[type="datetime"], .control-group.warning
input[type="datetime-local"], .control-group.warning
input[type="date"], .control-group.warning
input[type="month"], .control-group.warning
input[type="time"], .control-group.warning
input[type="week"], .control-group.warning
input[type="number"], .control-group.warning
input[type="email"], .control-group.warning
input[type="url"], .control-group.warning
input[type="search"], .control-group.warning
input[type="tel"], .control-group.warning
input[type="color"], .control-group.warning
.uneditable-input {
border-color: #f1c40f;
color: #f1c40f;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
.control-group.warning textarea:focus, .control-group.warning
input[type="text"]:focus, .control-group.warning
input[type="password"]:focus, .control-group.warning
input[type="datetime"]:focus, .control-group.warning
input[type="datetime-local"]:focus, .control-group.warning
input[type="date"]:focus, .control-group.warning
input[type="month"]:focus, .control-group.warning
input[type="time"]:focus, .control-group.warning
input[type="week"]:focus, .control-group.warning
input[type="number"]:focus, .control-group.warning
input[type="email"]:focus, .control-group.warning
input[type="url"]:focus, .control-group.warning
input[type="search"]:focus, .control-group.warning
input[type="tel"]:focus, .control-group.warning
input[type="color"]:focus, .control-group.warning
.uneditable-input:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
.control-group.info textarea, .control-group.info
input[type="text"], .control-group.info
input[type="password"], .control-group.info
input[type="datetime"], .control-group.info
input[type="datetime-local"], .control-group.info
input[type="date"], .control-group.info
input[type="month"], .control-group.info
input[type="time"], .control-group.info
input[type="week"], .control-group.info
input[type="number"], .control-group.info
input[type="email"], .control-group.info
input[type="url"], .control-group.info
input[type="search"], .control-group.info
input[type="tel"], .control-group.info
input[type="color"], .control-group.info
.uneditable-input {
border-color: $secondary-color;
color: $secondary-color;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
.control-group.info textarea:focus, .control-group.info
input[type="text"]:focus, .control-group.info
input[type="password"]:focus, .control-group.info
input[type="datetime"]:focus, .control-group.info
input[type="datetime-local"]:focus, .control-group.info
input[type="date"]:focus, .control-group.info
input[type="month"]:focus, .control-group.info
input[type="time"]:focus, .control-group.info
input[type="week"]:focus, .control-group.info
input[type="number"]:focus, .control-group.info
input[type="email"]:focus, .control-group.info
input[type="url"]:focus, .control-group.info
input[type="search"]:focus, .control-group.info
input[type="tel"]:focus, .control-group.info
input[type="color"]:focus, .control-group.info
.uneditable-input:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
input[disabled],
input[readonly],
textarea[disabled],
textarea[readonly] {
background-color: #eaeded;
border-color: transparent;
color: #cad2d3;
cursor: default; }
input,
textarea,
.uneditable-input {
width: 192px; }
.checkbox,
.radio {
margin-bottom: 12px;
padding-left: 32px;
position: relative;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
-webkit-backface-visibility: hidden; }
.checkbox:hover,
.radio:hover {
color: $tertiary-color; }
.checkbox input,
.radio input {
outline: none !important;
opacity: 0;
filter: alpha(opacity=0);
zoom: 1; }
.checkbox.checked .icon,
.radio.checked .icon {
background-position: -60px -30px;
opacity: 1;
display: block\9; }
.checkbox.checked .icon-to-fade,
.radio.checked .icon-to-fade {
opacity: 0;
display: none\9; }
.checkbox.disabled,
.radio.disabled {
color: #d7dddd;
cursor: default; }
.checkbox.disabled .icon,
.radio.disabled .icon {
opacity: 0;
display: none\9; }
.checkbox.disabled .icon-to-fade,
.radio.disabled .icon-to-fade {
background-position: -30px -60px;
opacity: 1;
display: block\9; }
.checkbox.disabled.checked .icon,
.radio.disabled.checked .icon {
background-position: 0 -90px;
opacity: 1;
display: block\9; }
.checkbox.disabled.checked .icon-to-fade,
.radio.disabled.checked .icon-to-fade {
opacity: 0;
display: none\9; }
.checkbox .icon,
.checkbox .icon-to-fade,
.radio .icon,
.radio .icon-to-fade {
background: url("../images/checkbox.png") -90px 0 no-repeat;
display: block;
height: 20px;
left: 0;
opacity: 1;
position: absolute;
top: -1px;
width: 20px;
-webkit-transition: opacity 0.1s linear;
-moz-transition: opacity 0.1s linear;
-o-transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
-webkit-backface-visibility: hidden; }
.checkbox .icon,
.radio .icon {
opacity: 0;
top: 0;
z-index: 2;
display: none\9; }
.radio .icon,
.radio .icon-to-fade {
background-image: url("../images/radio.png"); }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
.checkbox .icon {
background-image: url("../images/checkbox-2x.png");
background-size: 110px 110px; }
.radio .icon {
background-image: url("../images/radio-2x.png");
background-size: 110px 110px; } }
.toggle {
background-color: $bg-color;
border-radius: 60px;
color: white;
height: 29px;
margin: 0 12px 12px 0;
overflow: hidden;
*zoom: 1;
display: inline-block;
zoom: 1;
*display: inline;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
-webkit-backface-visibility: hidden; }
.toggle:before, .toggle:after {
display: table;
content: ""; }
.toggle:after {
clear: both; }
.toggle.toggle-off {
background-color: #cbd2d8; }
.toggle.toggle-off .toggle-radio {
background-image: url("../images/toggle/icon-off.png");
background-position: 0 0;
color: white;
left: 0;
margin-left: 0.5px;
margin-right: -13px;
z-index: 1; }
.toggle.toggle-off .toggle-radio:first-child {
left: -120%; }
.toggle .toggle-radio {
background: url("../images/toggle/icon-on.png") right top no-repeat;
color: $tertiary-color;
display: block;
font-weight: 700;
height: 21px;
left: 120%;
margin-left: -13px;
padding: 5px 32px 3px;
position: relative;
text-align: center;
z-index: 2;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
-webkit-backface-visibility: hidden; }
.toggle .toggle-radio:first-child {
margin-bottom: -29px;
left: 0; }
.toggle input {
display: none;
position: absolute;
outline: none !important;
display: block\9;
opacity: 0.01;
filter: alpha(opacity=1);
zoom: 1; }
.toggle.toggle-icon {
border-radius: 6px 7px 7px 6px; }
.toggle.toggle-icon.toggle-off {
border-radius: 7px 6px 6px 7px; }
.toggle.toggle-icon.toggle-off .toggle-radio {
background-image: url("../images/toggle/block-off.png");
background-position: 0 0; }
.toggle.toggle-icon .toggle-radio {
background-image: url("../images/toggle/block-on.png");
background-position: 62px 0;
border-radius: 6px;
min-width: 27px;
text-align: right; }
.toggle.toggle-icon .toggle-radio:first-child {
text-align: left; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
.toggle.toggle-off .toggle-radio {
background-image: url("../images/toggle/icon-off-2x.png");
background-size: 30px 29px; }
.toggle .toggle-radio {
background-image: url("../images/toggle/icon-on-2x.png");
background-size: 30px 29px; } }
.tagsinput {
height: 100px;
padding: 6px 1px 1px 6px;
overflow-y: auto;
text-align: left; }
.tagsinput .tag {
border-radius: 5px;
background: $tertiary-color;
color: white;
cursor: pointer;
margin-right: 5px;
margin-bottom: 5px;
overflow: hidden;
padding: 6px 13px 6px 19px;
position: relative;
vertical-align: middle;
display: inline-block;
zoom: 1;
*display: inline;
-webkit-transition: 0.14s linear;
-moz-transition: 0.14s linear;
-o-transition: 0.14s linear;
transition: 0.14s linear;
-webkit-backface-visibility: hidden; }
.tagsinput .tag:hover {
background-color: #16a085;
padding-left: 12px;
padding-right: 20px; }
.tagsinput .tag:hover .tagsinput-remove-link {
color: white;
opacity: 1;
display: block\9; }
.tagsinput input {
background: transparent;
border: none;
color: $bg-color;
font-family: "Lato", sans-serif;
font-size: 14px;
margin: 0px;
padding: 0 0 0 5px;
outline: 0;
margin-right: 5px;
margin-bottom: 5px;
width: 12px; }
.tagsinput-remove-link {
bottom: 0;
color: white;
cursor: pointer;
font-size: 12px;
opacity: 0;
padding: 9px 7px 3px 0;
position: absolute;
right: 0;
text-align: right;
text-decoration: none;
top: 0;
width: 100%;
z-index: 2;
display: none\9; }
.tagsinput-remove-link:before {
color: white; }
.tagsinput-add-container {
vertical-align: middle;
display: inline-block;
zoom: 1;
*display: inline; }
.tagsinput-add {
background-color: #bbc3cb;
border-radius: 3px;
color: white;
cursor: pointer;
margin-bottom: 5px;
padding: 6px 9px;
display: inline-block;
zoom: 1;
*display: inline;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
-webkit-backface-visibility: hidden; }
.tagsinput-add:hover {
background-color: $tertiary-color; }
.tags_clear {
clear: both;
width: 100%;
height: 0px; }
.not_valid {
background: #fbd8db !important;
color: #90111a !important; }
.progress, .ui-slider {
background: #e8edf2;
border-radius: 32px;
height: 12px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); }
.progress .bar, .ui-slider .bar {
background: $tertiary-color;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); }
.progress .bar-success, .ui-slider .bar-success {
background-color: #2ecc71;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); }
.progress .bar-warning, .ui-slider .bar-warning {
background-color: #f1c40f;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); }
.progress .bar-danger, .ui-slider .bar-danger {
background-color: #e74c3c;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); }
.progress .bar-info, .ui-slider .bar-info {
background-color: $secondary-color;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); }
.ui-slider {
margin-bottom: 20px;
position: relative; }
.ui-slider-handle {
background-color: #16a085;
border-radius: 50%;
cursor: pointer;
height: 18px;
margin-left: -9px;
position: absolute;
top: -3px;
width: 18px;
z-index: 2;
-webkit-transition: background 0.25s;
-moz-transition: background 0.25s;
-o-transition: background 0.25s;
transition: background 0.25s;
-webkit-backface-visibility: hidden; }
.ui-slider-handle[style*='100'] {
margin-left: -15px; }
.ui-slider-handle:hover, .ui-slider-handle:focus {
background-color: #2fe2bf;
outline: none; }
.ui-slider-handle:active {
background-color: #16a085; }
.ui-slider-range {
background-color: $tertiary-color;
border-radius: 30px 0 0 30px;
display: block;
height: 100%;
position: absolute;
z-index: 1; }
.ui-slider-segment {
background-color: #d6dbe0;
border-radius: 50%;
float: left;
height: 6px;
margin: 3px -6px 0 25%;
width: 6px; }
.pager {
background-color: $bg-color;
border-radius: 6px;
color: white;
font-size: 16px;
font-weight: 700;
display: inline-block;
zoom: 1;
*display: inline; }
.pager li:first-child > a, .pager li:first-child > span {
border-left: none;
padding-left: 20px;
-webkit-border-radius: 6px 0 0 6px;
-moz-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px; }
.pager li:first-child > a img, .pager li:first-child > span img {
margin-left: 0;
margin-right: 13px;
margin-left: 0 \9;
margin-right: 9px \9; }
.pager li.pager-center {
padding: 9px 18px 10px;
padding-left: 0;
padding-right: 0;
display: inline-block;
zoom: 1;
*display: inline; }
.pager li.previous img, .pager li.next img {
height: 14px;
margin: -1px 0 0 13px;
margin-left: 9px \9;
vertical-align: middle; }
.pager li > a, .pager li > span {
background: none;
border: none;
border-left: 2px solid #2c3e50;
color: white;
padding: 9px 18px 10px;
padding-left: 7px;
text-decoration: none;
white-space: nowrap;
-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0; }
.pager li > a:hover, .pager li > a:focus, .pager li > span:hover, .pager li > span:focus {
background-color: #4e6d8d; }
.pager li > a:active, .pager li > span:active {
background-color: #2c3e50; }
.pagination ul {
background: #d7dce0;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
.pagination ul > li:first-child {
-webkit-border-radius: 6px 0 0 6px;
-moz-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px; }
.pagination ul > li:last-child {
-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0; }
.pagination ul > li.previous > a, .pagination ul > li.previous > span, .pagination ul > li.next > a, .pagination ul > li.next > span {
background: transparent;
border: none;
border-right: 2px solid white !important;
margin: 0 9px 0 0;
padding: 11px 17px 12px 17px;
-webkit-border-radius: 6px 0 0 6px;
-moz-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important; }
.pagination ul > li.next > a, .pagination ul > li.next > span {
border-left: 2px solid white !important;
margin-left: 9px;
margin-right: 0;
-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0; }
.pagination ul > li.active > a, .pagination ul > li.active > span {
background-color: white;
border-color: white;
border-width: 2px;
color: #d7dce0;
margin: 10px 5px 9px; }
.pagination ul > li.active > a:hover, .pagination ul > li.active > a:focus, .pagination ul > li.active > span:hover, .pagination ul > li.active > span:focus {
background-color: white;
border-color: white;
color: #d7dce0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
.pagination ul > li > a, .pagination ul > li > span {
background: white;
border: 5px solid #d7dce0;
border-radius: 50px;
color: white;
line-height: 16px;
margin: 7px 2px 6px;
padding: 0 4px;
-webkit-transition: background 0.2s ease-out, border-color 0s ease-out, color 0.2s ease-out;
-moz-transition: background 0.2s ease-out, border-color 0s ease-out, color 0.2s ease-out;
-o-transition: background 0.2s ease-out, border-color 0s ease-out, color 0.2s ease-out;
transition: background 0.2s ease-out, border-color 0s ease-out, color 0.2s ease-out;
-webkit-backface-visibility: hidden; }
.pagination ul > li > a:hover, .pagination ul > li > a :focus, .pagination ul > li > span:hover, .pagination ul > li > span :focus {
background-color: $tertiary-color;
border-color: $tertiary-color;
color: white;
-webkit-transition: background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
-moz-transition: background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
-o-transition: background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
transition: background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
-webkit-backface-visibility: hidden; }
.pagination ul > li > a:active, .pagination ul > li > span:active {
background-color: #16a085;
border-color: #16a085; }
.pagination ul img {
height: 14px;
margin-top: -1px;
vertical-align: middle;
width: 13px; }
.share {
background-color: #ecf0f5;
border-radius: 6px;
position: relative; }
.share:before {
content: "";
border-style: solid;
border-width: 0 9px 9px 9px;
border-color: transparent transparent #ecf0f5 transparent;
height: 0px;
position: absolute;
left: 23px;
top: -9px;
width: 0px;
-webkit-transform: rotate(360deg); }
.share ul {
list-style-type: none;
margin: 0;
padding: 15px; }
.share li {
padding-top: 11px;
*zoom: 1; }
.share li:before, .share li:after {
display: table;
content: ""; }
.share li:after {
clear: both; }
.share li:first-child {
padding-top: 0; }
.share .toggle {
float: right;
margin: 0; }
.share .btn {
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px; }
.share-label {
float: left;
font-size: 15px;
padding-top: 5px;
width: 50%; }
.tooltip {
font-size: 13px; }
.tooltip.in {
opacity: 1;
filter: alpha(opacity=100);
zoom: 1; }
.tooltip.top {
padding-bottom: 9px; }
.tooltip.top .tooltip-arrow {
border-top-color: $bg-color;
border-width: 9px 9px 0;
bottom: 0;
margin-left: -9px; }
.tooltip.right .tooltip-arrow {
border-right-color: $bg-color;
border-width: 9px 9px 9px 0;
margin-top: -9px;
left: -3px; }
.tooltip.bottom {
padding-top: 8px; }
.tooltip.bottom .tooltip-arrow {
border-bottom-color: $bg-color;
border-width: 0 9px 9px;
margin-left: -9px;
top: -1px; }
.tooltip.left .tooltip-arrow {
border-right-color: $bg-color;
border-width: 9px 9px 9px 0;
margin-top: -3px;
top: -3px; }
.tooltip-inner {
background-color: $bg-color;
line-height: 18px;
padding: 12px 12px;
text-align: center;
width: 183px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px; }
.palette {
color: white;
margin: 0;
padding: 15px;
text-transform: uppercase; }
.palette dt {
display: block;
font-weight: 500;
opacity: 0.8; }
.palette dd {
font-weight: 200;
margin-left: 0;
opacity: 0.8; }
.palette-firm {
background-color: $tertiary-color; }
.palette-firm-dark {
background-color: #16a085; }
.palette-success {
background-color: #2ecc71; }
.palette-success-dark {
background-color: #27ad60; }
.palette-info {
background-color: $secondary-color; }
.palette-info-dark {
background-color: #2383c4; }
.palette-warning {
background-color: #f1c40f; }
.palette-warning-dark {
background-color: #cea70c; }
.palette-danger {
background-color: #e74c3c; }
.palette-danger-dark {
background-color: #dc2d1b; }
.palette-night {
background-color: $bg-color; }
.palette-night-dark {
background-color: #2c3e50; }
.palette-bright {
background-color: #f1c40f; }
.palette-bright-dark {
background-color: #cea70c; }
.palette-success-dark {
background-color: #27ae60; }
.palette-info-dark {
background-color: #2980b9; }
.palette-bright-dark {
background-color: #f39c12; }
.palette-amethyst {
background-color: #9b59b6; }
.palette-wisteria {
background-color: #8e44ad; }
.palette-carrot {
background-color: #e67e22; }
.palette-pumpkin {
background-color: #d35400; }
.palette-alizarin {
background-color: #e74c3c; }
.palette-pomegranate {
background-color: #c0392b; }
.palette-clouds {
background-color: $accent-color2;
color: $text-color; }
.palette-silver {
background-color: $text-color; }
.palette-concrete {
background-color: #95a5a6; }
.palette-asbestos {
background-color: #7f8c8d; }
.palette-paragraph {
color: #7f8c8d;
font-size: 12px;
line-height: 17px; }
.palette-paragraph span {
color: $text-color; }
.palette-headline {
color: #7f8c8d;
font-weight: 700;
margin-top: -5px; }
.tile {
background-color: #ecf0f5;
border-radius: 6px;
padding: 14px;
position: relative;
text-align: center; }
.tile.tile-hot:before {
background: url("../images/tile/ribbon.png") 0 0 no-repeat;
background-size: 82px 82px;
content: "";
height: 82px;
position: absolute;
right: -4px;
top: -4px;
width: 82px; }
.tile p {
font-size: 15px;
margin-bottom: 33px; }
.tile-image {
height: 100px;
margin: 31px 0 27px;
vertical-align: bottom; }
.tile-image.big-illustration {
height: 111px;
margin-top: 20px;
width: 112px; }
.tile-title {
font-size: 20px;
margin: 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
.tile.tile-hot:before {
background-image: url("../images/tile/ribbon-2x.png"); } }
.todo {
background-color: #2c3e50;
border-radius: 8px 8px 6px 6px;
color: #6285a8;
margin-bottom: 20px; }
.todo ul {
margin: 0;
list-style-type: none; }
.todo li {
background: $bg-color url("../images/todo/todo.png") 92% center no-repeat;
background-size: 20px 20px;
cursor: pointer;
margin-top: 2px;
padding: 18px 42px 17px 25px;
position: relative;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
-webkit-backface-visibility: hidden; }
.todo li:first-child {
margin-top: 0; }
.todo li:last-child {
border-radius: 0 0 6px 6px;
padding-bottom: 18px; }
.todo li.todo-done {
background: transparent url("../images/todo/done.png") 92% center no-repeat;
background-size: 20px 20px;
color: $tertiary-color; }
.todo li.todo-done .todo-name {
color: $tertiary-color; }
.todo-search {
background: $tertiary-color url("../images/todo/search.png") 92% center no-repeat;
background-size: 16px 16px;
border-radius: 6px 6px 0 0;
color: $bg-color;
padding: 19px 25px 20px; }
input.todo-search-field {
background: none;
border: none;
color: $bg-color;
font-size: 19px;
font-weight: 700;
margin: 0;
line-height: 23px;
padding: 5px 0;
text-indent: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
input.todo-search-field:-moz-placeholder {
color: $bg-color; }
input.todo-search-field::-webkit-input-placeholder {
color: $bg-color; }
input.todo-search-field.placeholder {
color: $bg-color; }
.todo-icon {
float: left;
font-size: 24px;
padding: 11px 22px 0 0; }
.todo-content {
padding-top: 1px;
overflow: hidden; }
.todo-name {
color: white;
font-size: 17px;
margin: 1px 0 3px; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
.todo li {
background-image: "../images/todo/todo-2x.png"; }
.todo li.todo-done {
background-image: "../images/todo/done-2x.png"; }
.todo-search {
background-image: "../images/todo/search-2x.png"; } }
footer {
color: $footer-color;
font-size: 15px;
}
footer a {
color: $secondary-color;
font-weight: 700; }
footer p {
font-size: 15px;
}
.archive {
margin-top: 0;
}
.footer-page {
margin-top: 40px;
}
.footer-title {
margin: 0 0 22px;
padding-top: 21px; }
.footer-brand {
display: block;
margin-bottom: 26px;
width: 220px; }
.footer-brand img {
width: 216px; }
.footer-banner {
background-color: $tertiary-color;
color: #cff3ec;
margin-left: 42px;
min-height: 286px;
padding: 0 30px 30px; }
.footer-banner .footer-title {
color: white; }
.footer-banner a {
color: #cff3ec;
text-decoration: underline; }
.footer-banner a:hover {
text-decoration: none; }
.footer-banner ul {
list-style-type: none;
margin: 0 0 26px; }
.footer-banner ul li {
border-top: 1px solid #1bc6a5;
line-height: 19px;
padding: 6px 0; }
.footer-banner ul li:first-child {
border-top: none;
padding-top: 1px; }
.video-js {
background-color: $bg-color;
border-radius: 6px 6px 0 0;
margin-top: -95px;
position: relative;
padding: 0;
font-size: 10px;
vertical-align: middle; }
.video-js .vjs-tech {
border-radius: 6px 6px 0 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.video-js:-moz-full-screen {
position: absolute; }
body.vjs-full-window {
padding: 0;
margin: 0;
height: 100%;
overflow-y: auto; }
.video-js.vjs-fullscreen {
position: fixed;
overflow: hidden;
z-index: 1000;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100% !important;
height: 100% !important;
_position: absolute; }
.video-js:-webkit-full-screen {
width: 100% !important;
height: 100% !important; }
.vjs-poster {
margin: 0 auto;
padding: 0;
cursor: pointer;
position: relative;
width: 100%;
max-height: 100%; }
.video-js .vjs-text-track-display {
text-align: center;
position: absolute;
bottom: 4em;
left: 1em;
right: 1em;
font-family: "Lato", sans-serif; }
.video-js .vjs-text-track {
display: none;
color: white;
font-size: 1.4em;
text-align: center;
margin-bottom: 0.1em;
background: black;
background: rgba(0, 0, 0, 0.5); }
.video-js .vjs-subtitles {
color: white; }
.video-js .vjs-captions {
color: #ffcc66; }
.vjs-tt-cue {
display: block; }
.vjs-fade-in {
visibility: visible !important;
opacity: 1 !important;
-webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
-moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
-o-transition: visibility 0s linear 0s, opacity 0.3s linear;
transition: visibility 0s linear 0s, opacity 0.3s linear;
-webkit-backface-visibility: hidden; }
.vjs-fade-out {
visibility: hidden !important;
opacity: 0 !important;
-webkit-transition: visibility 0s linear 1.5s, opacity 1.5s linear;
-moz-transition: visibility 0s linear 1.5s, opacity 1.5s linear;
-o-transition: visibility 0s linear 1.5s, opacity 1.5s linear;
transition: visibility 0s linear 1.5s, opacity 1.5s linear;
-webkit-backface-visibility: hidden; }
.vjs-controls {
border-radius: 0 0 6px 6px;
position: absolute;
bottom: -47px;
left: 0;
right: 0;
margin: 0;
padding: 0;
height: 47px;
color: white;
background: #2c3e50; }
.vjs-controls.vjs-fade-out {
visibility: visible !important;
opacity: 1 !important; }
.vjs-control {
background-position: center center;
background-repeat: no-repeat;
position: relative;
float: left;
text-align: center;
margin: 0;
padding: 0;
height: 18px;
width: 18px; }
.vjs-control:focus {
outline: 0; }
.vjs-control div {
background-position: center center;
background-repeat: no-repeat; }
.vjs-control-text {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.vjs-play-control {
cursor: pointer !important;
height: 47px;
left: 0;
position: absolute;
top: 0;
width: 58px; }
.vjs-paused .vjs-play-control {
background: url("../images/video/play.png") center -31px no-repeat;
background-size: 16px 64px; }
.vjs-paused .vjs-play-control:hover div {
opacity: 0; }
.vjs-paused .vjs-play-control div {
background: url("../images/video/play.png") center 15px no-repeat;
background-size: 16px 64px;
height: 47px;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
-webkit-backface-visibility: hidden; }
.vjs-playing .vjs-play-control {
background: url("../images/video/pause.png") center -31px no-repeat;
background-size: 15px 64px; }
.vjs-playing .vjs-play-control:hover div {
opacity: 0; }
.vjs-playing .vjs-play-control div {
background: url("../images/video/pause.png") center 15px no-repeat;
background-size: 15px 64px;
height: 47px;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
-webkit-backface-visibility: hidden; }
.vjs-rewind-control {
width: 5em;
cursor: pointer !important; }
.vjs-rewind-control div {
width: 19px;
height: 16px;
background: url("video-js.png");
margin: 0.5em auto 0; }
.vjs-mute-control {
background: url("../images/video/volume-full.png") center -48px no-repeat;
background-size: 16px 64px;
cursor: pointer !important;
position: absolute;
right: 51px;
top: 14px; }
.vjs-mute-control:hover div, .vjs-mute-control:focus div {
opacity: 0; }
.vjs-mute-control.vjs-vol-0,
.vjs-mute-control.vjs-vol-0 div {
background-image: url("../images/video/volume-off.png"); }
.vjs-mute-control div {
background: #2c3e50 url("../images/video/volume-full.png") no-repeat center 2px;
background-size: 16px 64px;
height: 18px;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
-webkit-backface-visibility: hidden; }
.vjs-volume-control,
.vjs-volume-level,
.vjs-volume-handle,
.vjs-volume-bar {
display: none; }
.vjs-progress-control {
border-radius: 32px;
position: absolute;
left: 60px;
right: 180px;
height: 12px;
width: auto;
top: 18px;
background: #eff2f6; }
.vjs-progress-holder {
position: relative;
cursor: pointer !important;
padding: 0;
margin: 0;
height: 12px; }
.vjs-play-progress, .vjs-load-progress {
border-radius: 32px;
position: absolute;
display: block;
height: 12px;
margin: 0;
padding: 0;
left: 0;
top: 0; }
.vjs-play-progress {
background: $tertiary-color;
left: -1px; }
.vjs-load-progress {
background: #d6dbe0;
border-radius: 32px 0 0 32px; }
.vjs-load-progress[style*='100%'], .vjs-load-progress[style*='99%'] {
border-radius: 32px; }
.vjs-seek-handle {
background-color: #16a085;
border-radius: 50%;
position: absolute;
width: 18px;
height: 18px;
margin: -3px 0 0 1px;
left: 0;
top: 0;
-webkit-transition: background-color 0.25s;
-moz-transition: background-color 0.25s;
-o-transition: background-color 0.25s;
transition: background-color 0.25s;
-webkit-backface-visibility: hidden; }
.vjs-seek-handle[style*='95.'] {
margin-left: 3px; }
.vjs-seek-handle[style='left: 0%;'] {
margin-left: -2px; }
.vjs-seek-handle:hover, .vjs-seek-handle:focus {
background-color: #138d75; }
.vjs-seek-handle:active {
background-color: #117e69; }
.vjs-time-controls {
position: absolute;
height: 20px;
width: 50px;
top: 16px;
font: 300 13px "Lato", sans-serif; }
.vjs-current-time {
right: 128px;
text-align: right; }
.vjs-duration {
color: #667687;
right: 69px;
text-align: left; }
.vjs-remaining-time {
display: none; }
.vjs-time-divider {
color: #667687;
font-size: 14px;
position: absolute;
right: 121px;
top: 15px; }
.vjs-secondary-controls {
float: right; }
.vjs-fullscreen-control {
background-image: url("../images/video/fullscreen.png");
background-position: center -47px;
background-size: 15px 64px;
cursor: pointer !important;
position: absolute;
right: 17px;
top: 13px; }
.vjs-fullscreen-control:hover div, .vjs-fullscreen-control:focus div {
opacity: 0; }
.vjs-fullscreen-control div {
height: 18px;
background: url("../images/video/fullscreen.png") no-repeat center 2px;
background-size: 15px 64px;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
-webkit-backface-visibility: hidden; }
.vjs-menu-button {
display: none !important; }
@-webkit-keyframes sharp {
0% {
background: #e74c3c;
border-radius: 10px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg); }
50% {
background: #ebedee;
border-radius: 0;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg); }
100% {
background: #e74c3c;
border-radius: 10px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg); } }
@-moz-keyframes sharp {
0% {
background: #e74c3c;
border-radius: 10px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg); }
50% {
background: #ebedee;
border-radius: 0;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg); }
100% {
background: #e74c3c;
border-radius: 10px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg); } }
@-o-keyframes sharp {
0% {
background: #e74c3c;
border-radius: 10px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg); }
50% {
background: #ebedee;
border-radius: 0;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg); }
100% {
background: #e74c3c;
border-radius: 10px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes sharp {
0% {
background: #e74c3c;
border-radius: 10px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg); }
50% {
background: #ebedee;
border-radius: 0;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg); }
100% {
background: #e74c3c;
border-radius: 10px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg); } }
.vjs-loading-spinner {
background: #ebedee;
border-radius: 10px;
display: none;
height: 16px;
left: 50%;
margin: -8px 0 0 -8px;
position: absolute;
top: 50%;
width: 16px;
-webkit-animation: sharp 2s ease infinite;
-moz-animation: sharp 2s ease infinite;
-o-animation: sharp 2s ease infinite;
animation: sharp 2s ease infinite; }
.login {
background: url("../images/login/imac.png") 0 0 no-repeat;
background-size: 940px 778px;
color: white;
margin-bottom: 77px;
padding: 38px 38px 267px;
position: relative; }
.login-screen {
background-color: $tertiary-color;
min-height: 317px;
padding: 123px 199px 33px 306px; }
.login-icon {
left: 200px;
position: absolute;
top: 160px;
width: 96px; }
.login-icon > img {
display: block;
margin-bottom: 6px;
width: 100%; }
.login-icon > h4 {
font-size: 17px;
font-weight: 200;
line-height: 34px;
opacity: 0.95; }
.login-icon > h4 small {
color: inherit;
display: block;
font-size: inherit;
font-weight: 700; }
.login-form {
background-color: #eceff1;
border-radius: 6px;
padding: 24px 23px 20px;
position: relative; }
.login-form:before {
content: "";
border-style: solid;
border-width: 12px 12px 12px 0;
border-color: transparent #eceff1 transparent transparent;
height: 0px;
position: absolute;
left: -12px;
top: 35px;
width: 0;
-webkit-transform: rotate(360deg); }
.login-form .control-group {
margin-bottom: 6px;
position: relative; }
.login-form .login-field {
border-color: transparent;
font-size: 17px;
padding-bottom: 11px;
padding-top: 11px;
text-indent: 3px;
width: 299px; }
.login-form .login-field:focus + .login-field-icon {
color: $tertiary-color; }
.login-form .login-field-icon {
color: #bfc9ca;
font-size: 16px;
position: absolute;
right: 13px;
top: 14px;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
-webkit-backface-visibility: hidden; }
.login-link {
color: #bfc9ca;
display: block;
font-size: 13px;
margin-top: 15px;
text-align: center; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
.login {
background-image: url("../images/login/imac-2x.png"); } }
.ptn, .pvn, .pan {
padding-top: 0; }
.ptx, .pvx, .pax {
padding-top: 3px; }
.pts, .pvs, .pas {
padding-top: 5px; }
.ptm, .pvm, .pam {
padding-top: 10px; }
.ptl, .pvl, .pal {
padding-top: 20px; }
.prn, .phn, .pan {
padding-right: 0; }
.prx, .phx, .pax {
padding-right: 3px; }
.prs, .phs, .pas {
padding-right: 5px; }
.prm, .phm, .pam {
padding-right: 10px; }
.prl, .phl, .pal {
padding-right: 20px; }
.pbn, .pvn, .pan {
padding-bottom: 0; }
.pbx, .pvx, .pax {
padding-bottom: 3px; }
.pbs, .pvs, .pas {
padding-bottom: 5px; }
.pbm, .pvm, .pam {
padding-bottom: 10px; }
.pbl, .pvl, .pal {
padding-bottom: 20px; }
.pln, .phn, .pan {
padding-left: 0; }
.plx, .phx, .pax {
padding-left: 3px; }
.pls, .phs, .pas {
padding-left: 5px; }
.plm, .phm, .pam {
padding-left: 10px; }
.pll, .phl, .pal {
padding-left: 20px; }
.mtn, .mvn, .man {
margin-top: 0px; }
.mtx, .mvx, .max {
margin-top: 3px; }
.mts, .mvs, .mas {
margin-top: 5px; }
.mtm, .mvm, .mam {
margin-top: 10px; }
.mtl, .mvl, .mal {
margin-top: 20px; }
.mrn, .mhn, .man {
margin-right: 0px; }
.mrx, .mhx, .max {
margin-right: 3px; }
.mrs, .mhs, .mas {
margin-right: 5px; }
.mrm, .mhm, .mam {
margin-right: 10px; }
.mrl, .mhl, .mal {
margin-right: 20px; }
.mbn, .mvn, .man {
margin-bottom: 0px; }
.mbx, .mvx, .max {
margin-bottom: 3px; }
.mbs, .mvs, .mas {
margin-bottom: 5px; }
.mbm, .mvm, .mam {
margin-bottom: 10px; }
.mbl, .mvl, .mal {
margin-bottom: 20px; }
.mln, .mhn, .man {
margin-left: 0px; }
.mlx, .mhx, .max {
margin-left: 3px; }
.mls, .mhs, .mas {
margin-left: 5px; }
.mlm, .mhm, .mam {
margin-left: 10px; }
.mll, .mhl, .mal {
margin-left: 20px; }
.jumbotron {
font-size: 60px;
line-height: 70px;
font-family: "Quicksand";
position: relative;
padding: 70px 0;
color: $primary-color; }
.jumbotron:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: .4;
}
.badge {
display: inline-block;
padding: 4px 4px;
font-size: 16px;
line-height: 20px;
font-weight: 300;
color: $accent-color3;
white-space: nowrap;
vertical-align: center;
background-color: $secondary-color;
}
li {
font-weight: 300; }
hr { display: block; height: 1px;
border: 0; border-top: 1px solid $primary-color;
margin: 1em 0; padding: 0; }
.border-top {
border-top: 1px solid $primary-color
}
.float-right{
float:right;
}
.navbar-inverse .nav > li > a:hover,
.navbar-inverse .nav > li > a:focus,
.navbar-inverse .dropdown-menu a:hover,
.navbar-inverse .dropdown-menu a:focus {
background-color: $accent-color1;
}
a > .badge {
color: $accent-color3;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
}
a:hover > .badge {
color: $tertiary-color;
background-color: $accent-color1;
}
.social-sharing {
float: right !important;
text-align: right !important; }
.sharing {
float: inherit;
text-align: inherit; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome CSS here */
.navbar-inverse .nav > li > a {
color: $accent-color3;
font-weight: 400;
}
/* Here is where any customizations for mobile devices should go */
@media screen and (max-width: 767px)
{
.social-sharing {
float: left !important;
text-align: left !important; }
}
}