/*=========================================
WebSlides - Colors
=========================================== */

/* == Backgrounds == */

/* .bg-primary */
/* .bg-secondary */
/* .bg-light */

/* == General == */
/* .bg-white */
/* .bg-black */
/* .bg-black-blue */
/* .bg-brown */
/* .bg-blue */
/* .bg-gray */
/* .bg-purple */
/* .bg-red */

/* == Brands == */
/* .bg-apple */
/* .bg-facebook */

/* == Gradients == */
/* .bg-gradient-r (radial) */
/* .bg-gradient-h (horizontal) */
/* .bg-gradient-v (vertical) */
/* .bg-gradient-white */
/* .bg-gradient-gray */

/* == Transparent/Opacity Black == */
/* .bg-trans-dark */
/* .bg-trans-light */
/* .bg-trans-gradient */


/*=========================================
Base
=========================================== */

body {
  color: #333;
  background-color: #f7f9fb;
}
:focus {
  box-shadow: 0 0 2px rgba(150, 187, 238, 1);
}
svg {
  fill: currentColor;
}

[class*="bg-"] a,
[class*="bg-gradient-"] a {
  color: #bce;
}
.bg-brown a {color: #c23;}

a,
.bg-white a,
.bg-light a,.bg-gradient-white a {
  color: #44d;
}

a:hover {
  color: #3af;
}
.flexblock li>a,[class*="bg-"] li>a,
[class*="bg-gradient-"] li>a,
article header a {
  color: inherit;
}

hr {
  background: rgba(0, 20, 80, 0.2);
  background: radial-gradient(ellipse at center, rgba(0, 20, 80, 0.2) 0, rgba(255, 255, 255, 0) 75%);
}

hr:after {
  background-color: rgba(255, 255, 255, 0.8);
  color: #333;
}

abbr,
acronym {
  border-bottom: 1px dotted #333;
}

mark,
ins {
  background-color: rgba(221,238,255, 0.8);
  color: inherit;
}

::-moz-selection {
  background-color: rgba(221,238,255, 0.8);
}

::-webkit-selection {
  background-color: rgba(221,238,255, 0.8);
}

::selection {
  background-color: rgba(221,238,255, 0.8);
}

pre {
  border: 1px solid rgba(0, 20, 80, 0.1);
  box-shadow: 0 8px 16px rgba(0,20,80,.04),0 4px 16px rgba(0,0,0,.08);
  background: #fff;

}
pre:hover {
  box-shadow: 0 8px 16px rgba(0,40,160,.08),0 8px 24px rgba(0,0,0,.08);

}
code,[class*="bg-"] pre {
  background-color: rgba(255, 255, 255, 0.09);
}

.bg-white code{
  background: rgba(0, 20, 80, 0.03);
}
/*================================================
Slides - Backgrounds <section class="bg-primary">
================================================== */

/*3 Corp Colors*/

.bg-primary {
  background-color: #44d;
}

.bg-secondary {
  background-color: #67d;
}

.bg-light {
  background-color: #edf2f7;
}

/*General Colors*/

.bg-black {
  background-color: #111;
}
.bg-black-blue {
  background-color: #123;
}
.bg-blue {
  background-color: #346;
}
.bg-brown {
  background-color: #f8f8f9;
}
.bg-gray {
  background-color: #d5d9e2;
}
.bg-green {
  background-color: #077;
}
.bg-purple {
  background-color: #62b;
}

.bg-red {
  background-color: #c23;
}

.bg-white {
  background-color: #fff;
}
[class*="bg-"] .bg-white {
  text-shadow: none;
  color: #333;
}

/* BG Apple Keynote*/

.bg-apple {
  background: linear-gradient(to bottom, #000 0%, #1a2028 50%, #293845 100%);
}


/* BG Facebook */

.bg-facebook {
  background: #3b5998;
}


/*Font Color*/
.bg-trans-dark,.bg-trans-gradient,
.bg-primary,
.bg-secondary,
.bg-blue,
.bg-green,.bg-purple,.bg-red,.bg-facebook,.bg-apple,[class*="bg-black"],[class*="bg-gradient-"] {
  color: #fff;
  text-shadow: 0 1px 0 #013;
}

.bg-light p {
  color: #456;
}
/*.bg-white p,*/
.bg-brown p{color: #666;
}

/*Transparent/Opacity*/

.bg-trans-dark {
  background: rgba(0, 0, 0, 0.8);
}

.bg-trans-light {
  background: rgba(0, 0, 0, 0.2);
}

/*Covers/Longforms...*/
.bg-trans-gradient{
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}

/*Horizontal Gradient*/

.bg-gradient-h {
  background: linear-gradient(134deg,#32b 0,#62b 100%);
}


/*Vertical Gradient*/

.bg-gradient-v {
  background: linear-gradient(to top, #62b 0%, #32b 100%);
}


/*Radial Gradient*/

.bg-gradient-r {
  background: radial-gradient(ellipse at center, #62b 0%, #32b 100%);
}

/*White Gradient (vertical)*/
.bg-gradient-white {
  background: linear-gradient(180deg,#f2f4f6 0,#fff 100%);
  color: #333;
  text-shadow: none;
}

/*Gray Gradient (horizontal)*/
.bg-gradient-gray{
  background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%);
  color: #333;
  text-shadow: none;
}
/*Border/Frame*/
.frame {
  border: .8rem solid #fff;
}

/*Layer/Box Shadow*/
.shadow,.pre {
  position: relative;
}
.shadow:before,.shadow:after {
  box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3);
}

/*============================
TYPOGRAPHY
============================== */

/* -- Horizontal separator  -- */

.text-separator:before {
  background-color: rgba(170, 0, 0, 0.8);
}

/* -- Pull Quote (Right/Left)  -- */

[class*="text-pull-"] {
  border-top: 4px solid rgba(0, 0, 0, 0.5);
}
/* -- Context  -- */

[class*="bg-"] .text-context:before {
  background-color: #fff;
}
.text-context:before,.bg-white .text-context:before{
  background-color: rgba(0, 20, 80, 0.2);
}

/* -- Text shadow  -- */
.text-shadow {
  text-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

/* -- time, ampersands, prepositions (for, of...), symbols...  -- */

[class*="card-"] time,
h1 span {
  color: #abd;
}

/* -- <pre> comment  -- */
.code-comment {
  color: rgba(70, 170, 130, 0.9);
  text-shadow: none;
}

/*=========================================
Header/Nav
=========================================== */

header[role=banner] {
  background-color: #fff;
}

.logo a {
  color: inherit;
}

nav[role=navigation] li a {
  background-color: rgba(50, 50, 50, .9);
}

nav[role=navigation] li a:hover {
  background-color: rgba(50, 50, 50, .7);
}

nav[role=navigation] li a,
nav[role=navigation] li a:hover {
  color: #fff;
}

nav[role=navigation] li.active a {
  background-color: #555;
  color: #fff;
}


nav li.twitter a:hover {
  background-color: #1da1f3;
}
nav li.facebook a:hover {
  background-color: #3b5998;
}

nav li.linkedin a:hover {
  background-color: #1683bb;
}

nav li.dribbble a:hover {
  background-color: #ea4c89;
}

nav li.github a:hover {
  background-color: #60b044;
}

nav li.email a:hover {
  background: #dd4b39;
}

/*===================================================
.flexblock li hover/active
===================================================== */

.flexblock li.active a,
.metrics li:hover,
.specs li:hover,.reasons li:hover {
  background-color: rgba(0, 20, 80, 0.03);
}

/*=========================================
Features & Clients List
=========================================== */

.features li,.clients li  {
  background-color: rgba(255, 255, 255, 0.9);
}

[class*="bg-"] .features li,
[class*="bg-"] .clients li {
  background-color: rgba(255, 255, 255, 0.1);
}

.features li:hover,.clients li:hover  {
  box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08);
}
/*.features li span,.features li svg{color: #44d;}*/

/*============================
.flexblock with border
============================== */

.border {
  border-right: 1px solid rgba(0, 20, 80, 0.1);
  border-bottom: 1px solid rgba(0, 20, 80, 0.1);
}

.border li {
  border-top: 1px solid rgba(0, 20, 80, 0.1);
  border-left: 1px solid rgba(0, 20, 80, 0.1);
}

.flexblock.border li li {
  border: none;
}

/*===========================================
flexblock.steps
============================================= */

.steps li:nth-child(1) {
  background-color: #e8eef7;
}

.steps li:nth-child(2) {
  background-color: #dde5f3;
}

.steps li:nth-child(3) {
  background-color: #cdd8ec;
}

.steps li:nth-child(4) {
  background-color: #bbcdec;
}

.process {
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.steps li:hover,
.steps.blink li:hover>a {
  background-color: #b8cef7;
}

@media (min-width: 1024px) {
  .process.step-2 {
    border-left-color: #e8eef7;
  }
  .process.step-3 {
    border-left-color: #dde5f3;
  }
  .process.step-4 {
    border-left-color: #cdd8ec;
  }
  .steps li:hover + li [class*="step-"] {
    border-left-color: #b8cef7;
  }
}


/*=========================================================
Items: You can use for settings, drag&drop, close/delete...
=========================================================== */

.specs li:after {
  background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%);
}

.specs li:last-child:after {
  background: none;
}

/*.specs li {background: rgba(255,255,255,0.2);}*/

/*=========================================================
Why/Steps/Motivation/Reasons -  Decimal/Numbers
=========================================================== */

.reasons li:after {
  background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%);
}

.reasons li:last-child:after {
  background: none;
}

/*=========================================
Overlays
=========================================== */

.overlay {
  background-color: rgba(0, 0, 0, 0.2);
  /*background-color: rgba(255,255,255 , 0.9);*/
  /*border: 3px double #fff;*/
}

li:hover .overlay {
  background-color: rgba(0, 0, 0, 0.1);
}

.overlay,
.overlay a {
  color: #fff;
  text-shadow: 0 1px 0 #111;
}


/*=========================================
Gallery li+.overlay+image
=========================================== */

.gallery li {
  background-color: rgba(0, 20, 80, 0.06);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.03);
}

.gallery li figcaption {
  background-color: #fff;
}

.flexblock.gallery li:hover {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
}
.gallery li footer {
  border-top:1px solid rgba(0,20,80,0.1);
}

.gallery li a {
  color: #333;
  text-shadow: none;
}
.flesblock.gallery li a footer{color: #aaa;}
/*Arrow */

.gallery li figcaption:before {
  border: .8rem solid black;
  border-color: transparent transparent #fff #fff;
  /*box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);*/
}



/*=========================================
Plans / Pricing
=========================================== */

.plans>li div,
.flexblock.plans li:hover div {
  background-color: #fff;
}

.plans>li:hover,
.plans>li:nth-child(2) {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
}

.plans:hover li:nth-child(2):not(:hover) {
  box-shadow: none;
}

.plans li h2 {
  background-color: rgba(0, 20, 80, 0.5);
  color: #fff;
}

.plans ul li {
  border-bottom: 1px solid rgba(0, 20, 80, 0.1);
}

.plans ul li:last-child {
  border-bottom: none;
}

.plans>li>a {
  color: inherit;
}

.plans>li>a {
  color: #333;
  text-shadow: none;
}


/*============================
Activity/CV/Timeline/News
============================== */

.activity li {
  border-top: .1rem solid rgba(0, 20, 80, 0.1);
}

.activity li:hover {
  background-color: rgba(0, 20, 80, 0.02);
}


/*=========================================
Resume/Work/CV/Portfolio
=========================================== */

.work-label,
.work li a {
  border-bottom: 1px solid rgba(0, 20, 80, 0.1);
}

.work li:nth-child(odd)>a {
  background-color: rgba(0, 20, 80, 0.03);
}

.work li a:hover {
  background-color: rgba(0, 20, 80, 0.04);
}


/*===========================================
Clients / Services / Logos...
============================================= */


.clients.border figcaption {border-top:1px solid rgba(0,20,80,0.1);
}
/*.clients>li {
  background: rgba(255, 255, 255, 0.8);
}
*/

/*====================
LOGOS
====================== */

img.blacklogo {
  background: none;
  /* --- Images (black logo/image) --- */
  -webkit-filter: grayscale(100%) brightness(10%) contrast(100%);
  filter: grayscale(100%) brightness(10%) contrast(100%);
}


/* --- Images (gray logo/image) --- */

img.graylogo {
  -webkit-filter: grayscale(100%) brightness(10%) contrast(10%);
  filter: grayscale(100%) brightness(10%) contrast(10%);
}


/* --- Images (white Logo/Image) --- */

img.whitelogo {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}


/* --- Logo/Images Hover --- */

li:hover img.blacklogo,
li:hover img.graylogo,
img.blacklogo:hover,img.graylogo:hover {
  background: none;
  /*Images - Original Color*/
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: none;
  transition: all 0.6s ease;
}


/*=========================================================
Cards
=========================================================== */

[class*="card-"]>a {
  color: inherit;
}

/* ---  card ul specs --- */

.description>li {
  border-bottom: 1px solid rgba(0, 20, 80, 0.1);
}

.description>li:last-child {
  border-bottom: none;
}

/*== Figure Background === */

[class*="card-"][class*="bg-"] figure {
  background-color: rgba(0, 20, 80, 0.06);
}

/*== Ficaption Cards === */

[class*="card-"] figcaption,
[class*="card-"] figcaption a {
  color: #fff;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}

@media (min-width: 768px) {
  /*===CTA (Call to Action - Numbers, Price, Promo...)  ===== */
  .cta .benefit {
    border-left-width: 1px;
    border-style: solid;
    border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
    -webkit-border-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
    -moz-border-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;

  }
}


/*=========================================
Tables
=========================================== */

table td,
th,
thead {
  border: 1px solid rgba(0, 0, 0, 0.5);
}

thead {
  background-color: rgba(0, 0, 0, 0.3);
}

tr:nth-child(even)>td {
  background: rgba(0, 0, 0, 0.1);
}

tr>td {
  border-top: 1px solid rgba(0, 0, 0, 0.5);
}

td:hover,
tr:nth-child(even)>td:hover {
  background-color: rgba(255, 255, 255, 0.5);
}


/*============================
Browser (Screenshots)
============================== */

.browser {
  border: 1px solid rgba(0, 20, 80, 0.1);
}

.browser:hover {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
}


/*=== Topbar === */

.browser:before {
  background-color: rgba(0, 20, 80, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(0, 20, 80, 0.2);
}

.browser:hover:before {
  background-color: rgba(0, 20, 80, 0.12);
  color: #fff;
}


/*=========================================
Forms
=========================================== */

input,
textarea {
  background-color: #fafbfc;
}

input:focus,
textarea:focus {
  background-color: #fff;
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
input:focus::-moz-placeholder {
  color: #ddd;
}
input:focus::-webkit-input-placeholder {
  color: #ddd;
}
a.button,[class*="badge-"],
button[type="submit"],
input {
  box-shadow: 0 10px 16px -8px rgba(0, 20, 80, 0.3);
}

button,
input,
select,
textarea,
button[type="submit"],
input[type="submit"],
.button,.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover
{
  border: 1px solid #44d;
}

button[type="submit"],
input[type="submit"],
.button,.button:hover,button[type="submit"]:hover,input[type="submit"]:hover {
  color: #fff;
  background-color: #44d;
  text-shadow: 0 1px 0 #123;
}
.button:active,button[type="submit"]:active,input[type="submit"]:active {
  background-color: #17d;
}
.ghost,.ghost:hover {background: none;color: inherit;text-shadow: none;}
.bg-primary select,
.bg-primary textarea,
.bg-primary .button,
.bg-primary button,.bg-primary button:hover,
.bg-primary input,
[class*="bg-gradient-"] .button,[class*="bg-"] a.button.ghost
{
  border-color: #fff;
}

[class*="bg-"] a.button {
  color: #fff;
}

.bg-white a.button.ghost,.bg-gradient-white a.button.ghost {color: #333;border: 1px solid #44d;}

:disabled,
button:disabled:hover {
  background-color: #eee;
  border-color: #eee;
  color: #ccc;
}
fieldset {
  border: 1px solid #44d;
  background-color: rgba(0, 20, 80, 0.2)
}

legend {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
}


/* Inputs/Buttons - hover */

input:hover,
select:hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}


/* App Store Badges */

[class*="badge-"] {
  border: 1px solid #345;
  background-color: #000;
  /* Transparent Button */
  /* background: none;*/
}


form .flexblock li:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/*============================
Table of Contents
============================== */

.toc,
.toc ol>li:before,
.chapter {
  background-color: #f7f9fb;
}

.toc li .toc-page:before {
  border-bottom: 1px dotted rgba(0, 0, 0, 0.9);
}


/*============================
Slides (Counter/Arrows)
============================== */


/*#navigation:hover {
  background-color: rgba(0, 0, 0, 0.03);
}
*/
#counter,
#navigation a {
  color: #abc;
}

#webslides:hover #navigation a:hover {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.9);
}


/*============================
Footer
============================== */

footer[role=contentinfo] {
  background-color: #fff;
}

/*footer:hover {
background-color:rgba(255,255,255 , 0.3);
}
*/