/* 
    Document   : app.css
    Author     : Dreamleaf (aka Nik Hurwood)
    Contact    : nik.hurwood@gmail.com
    Description:
        Styles for the Abyss theme, built on Foundation 4.
*/
html {overflow-y: scroll;}
body {
  background:#F2F2F2;
  font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}
html, body, p {color:#2C3340;}
p {
  font-size:0.9em;
  line-height: 1.5em;
}
a, p a {color:#1C6BB0;}
a:hover, p a:hover {color:gray;}
a:focus {outline:none;}

h1,h2,h3,h4,h5,h6 {
  color:#2C3340;
  font-family: 'Dosis', sans-serif;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
h4 {font-size:1.5em;}

@media (max-width:767px) {
  .row {padding:0 10px;}
}
.columns {
  margin-bottom:10px;
  padding-top:10px;
}
.header .columns {
  margin-bottom:0;
  padding-top:0;
}
ul li {list-style: none;}
textarea {min-height:125px;}
address {line-height:1.6em;}

/* Horizontal Rules */
hr {
  border: solid #2C3340;
  border-width:1px 0 0;
}
hr.rule-style1 {
  border: 0;
  height: 1px;
  background: #F2F2F2;
  background-image: -webkit-linear-gradient(left, #F2F2F2, #BABABA, #F2F2F2); 
  background-image:    -moz-linear-gradient(left, #F2F2F2, #BABABA, #F2F2F2); 
  background-image:     -ms-linear-gradient(left, #F2F2F2, #BABABA, #F2F2F2); 
  background-image:      -o-linear-gradient(left, #F2F2F2, #BABABA, #F2F2F2); 
}

/* Helper Classes */
.green {color:#309632;}
.red {color:red;}
.blue {color:#1C6BB0;}
.left {float: left !important;}
.right {float: right !important;}
.centered {text-align:center !important;}
.text-left {text-align: left !important;}
.text-right {text-align:right !important;}
.text-center {text-align: center !important;}
.text-justify {text-align: justify !important;}
.hide {display: none;}

/*Content Box Styles*/
.module {
  position:relative;
  width:100%;
  height:100%;
  cursor: pointer;
}

.module-content {
  background:#fefefe;
  border:1px solid #eaeaea;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  width:100%;
  height:100%;
  padding:5px 15px;
}
.module-content:hover {
  -moz-box-shadow: 0px 0px 5px 1px #d5e3fe;
  -webkit-box-shadow: 0px 0px 5px 1px #d5e3fe;
  box-shadow: 0px 0px 5px 1px #d5e3fe;
}
.module-content h3 {
  border-bottom:1px solid #d5e3fe;
  opacity:0.6;
  text-shadow: 0px 1px 1px #ccc;
}
.module-content h3 i {
  color: #777;
  position: absolute;
  right: 18px;
  top: 12px;
}
.module.benefits i {
  margin-right: 20px;
}

/* CTAs module specific - as seen on front page */
.ctas .module-content {
  min-height:245px;
}

/* Feature Area - the dark blue gradiented bar that holds the slideshow and page titles */
.feature-wrapper {
  /* background:#2C3340;*/
  background: rgb(44,51,64); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(44,51,64,1) 0%, rgba(21,30,38,1) 27%, rgba(30,34,56,1) 71%, rgba(44,51,64,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44,51,64,1)), color-stop(27%,rgba(21,30,38,1)), color-stop(71%,rgba(30,34,56,1)), color-stop(100%,rgba(44,51,64,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(44,51,64,1) 0%,rgba(21,30,38,1) 27%,rgba(30,34,56,1) 71%,rgba(44,51,64,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(44,51,64,1) 0%,rgba(21,30,38,1) 27%,rgba(30,34,56,1) 71%,rgba(44,51,64,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(44,51,64,1) 0%,rgba(21,30,38,1) 27%,rgba(30,34,56,1) 71%,rgba(44,51,64,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(44,51,64,1) 0%,rgba(21,30,38,1) 27%,rgba(30,34,56,1) 71%,rgba(44,51,64,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3340', endColorstr='#2c3340',GradientType=0 ); /* IE6-9 */
  box-shadow: inset 0px 0px 10px #000;
  height:130px;
  margin-bottom:20px;
  padding-top:20px;
}
.front .feature-wrapper {height:260px;}
.feature-wrapper h1 {
  color:white;
  margin:0px;
  text-transform:uppercase;
}
.feature-wrapper h1 span {
  color: #f2f2f2;
  font-size: 70%;
  text-transform: lowercase;
  margin-left:20px;
}

/*Flexslider Overrides*/
p.flex-caption {
  font-family: 'Dosis', sans-serif;
  font-size: 24px;
  text-align: center;
  padding: 10px 0;
  margin: 0;
  opacity:0.5;
  text-transform: uppercase;
}
/******************************************************************************
* NAVIGATION
******************************************************************************/
/* Main Navigation - Top Bar */
@media only screen and (min-width: 58.75em) {
  .top-bar .name h1 a {
    color:#2C3340;
    font-size:28px;
  }
  .top-bar {
    background:none;
    margin-bottom:0;
  }
  .top-bar-section ul, .top-bar-section ul li > a,
  .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
    background:none;
    color:#2C3340;
    font-size:16px;
  }
  .top-bar-section ul li:hover,.top-bar-section ul li.active {
    background:white;
  }
  .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
    border-right: solid 1px #fcfcfc;
    border-left: solid 1px #dddddd;
  }
  .top-bar-section ul li .dropdown {
    background:#F2F2F2;
    -moz-box-shadow: 1px 1px 3px #424242;
    -webkit-box-shadow: 1px 1px 3px #424242;
    box-shadow: 1px 1px 3px #424242;
  }
  .top-bar-section ul li .dropdown li:hover {background:#fcfcfc;}
  .top-bar-section ul li .dropdown label {
    background:white;
    color:#424242;
  }
  .top-bar-section ul li .dropdown a, .top-bar-section ul li .dropdown label {
    color:#424242;
  }
  .top-bar-section .has-dropdown > a:after {
    border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
  }
}
/* Footer List Links */
footer ul li {
  list-style: none;
  margin-left:0;
  padding-left:0;
}
footer ul li i {
  font-size:24px;
  position: absolute;
  left: 15px;
  top:2px;
}
footer ul li .button.round {
  min-width: 230px;
}

/* Side Navigation */
.side-nav li a {font-size: 1.1em;}
.side-nav li a:hover {color:gray;}


/* Sidebar */
.sidebar .module {margin-bottom: 20px;}
.sidebar ul li {
  list-style: none;
  padding:0;
  margin:0;
}
.sidebar ul li a {color:#1C6BB0;}
.sidebar ul li a:hover, .sidebar ul li a.active {
  color:gray;
}

/* Buttons */
a.button, a.secondaryButton, input.button, button.button, button {
  background: rgb(0,94,146); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(0,94,146,1) 0%, rgba(6,141,200,1) 2%, rgba(68,170,213,1) 5%, rgba(6,140,198,1) 7%, rgba(4,131,191,1) 28%, rgba(1,102,171,1) 74%, rgba(0,92,164,1) 98%, rgba(0,94,146,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,94,146,1)), color-stop(2%,rgba(6,141,200,1)), color-stop(5%,rgba(68,170,213,1)), color-stop(7%,rgba(6,140,198,1)), color-stop(28%,rgba(4,131,191,1)), color-stop(74%,rgba(1,102,171,1)), color-stop(98%,rgba(0,92,164,1)), color-stop(100%,rgba(0,94,146,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(0,94,146,1) 0%,rgba(6,141,200,1) 2%,rgba(68,170,213,1) 5%,rgba(6,140,198,1) 7%,rgba(4,131,191,1) 28%,rgba(1,102,171,1) 74%,rgba(0,92,164,1) 98%,rgba(0,94,146,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(0,94,146,1) 0%,rgba(6,141,200,1) 2%,rgba(68,170,213,1) 5%,rgba(6,140,198,1) 7%,rgba(4,131,191,1) 28%,rgba(1,102,171,1) 74%,rgba(0,92,164,1) 98%,rgba(0,94,146,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(0,94,146,1) 0%,rgba(6,141,200,1) 2%,rgba(68,170,213,1) 5%,rgba(6,140,198,1) 7%,rgba(4,131,191,1) 28%,rgba(1,102,171,1) 74%,rgba(0,92,164,1) 98%,rgba(0,94,146,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(0,94,146,1) 0%,rgba(6,141,200,1) 2%,rgba(68,170,213,1) 5%,rgba(6,140,198,1) 7%,rgba(4,131,191,1) 28%,rgba(1,102,171,1) 74%,rgba(0,92,164,1) 98%,rgba(0,94,146,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005e92', endColorstr='#005e92',GradientType=0 ); /* IE6-9 */
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3);
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3);
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3);
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  border: 1px solid #0756AD;
  font-size: 15px;
  text-shadow:0px 1px 1px rgba(0,0,0,0.65);
  color: #FFF;
  font-weight: normal;
  text-transform: none;
  line-height: 1;
  cursor:pointer;
  display:inline-block;
  zoom:1;
  *display:inline;
  margin:10px 0; padding:10px 20px 11px;
  min-width:100px;
  text-align:center;
  text-decoration:none;
}
a.button:hover, input.button:hover, button:hover, button.button:hover {
  background-image:-moz-linear-gradient(center top,rgb(20,77,128) 0%,rgb(27,106,181) 100%);
  background-image:-webkit-gradient(linear,color-stop(0, rgb(20,77,128)),color-stop(1, rgb(27,106,181)));
  background-image:-webkit-linear-gradient(rgb(20,77,128) 0%,rgb(27,106,181) 100%);
  background-image:-o-linear-gradient(rgb(20,77,128) 0%,rgb(27,106,181) 100%);
  background-image:-ms-linear-gradient(rgb(20,77,128) 0%,rgb(27,106,181) 100%);
  background-image:linear-gradient(rgb(20,77,128) 0%,rgb(27,106,181) 100%);
  -webkit-transition: background-color 0.15s ease-in-out;
  -moz-transition: background-color 0.15s ease-in-out;
  -o-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
}
/* Set active states for buttons */
a.button:active, a.secondaryButton:active, input.button:active, button:active, button.button:active {
  background-image: none;
  background-color: #1C6BB0;
}
a.secondaryButton {
  margin-left:20px;
  background: rgb(168,168,183); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(168,168,183,1) 0%, rgba(254,255,254,1) 2%, rgba(249,249,249,1) 23%, rgba(227,227,227,1) 79%, rgba(222,222,222,1) 98%, rgba(168,168,183,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(168,168,183,1)), color-stop(2%,rgba(254,255,254,1)), color-stop(23%,rgba(249,249,249,1)), color-stop(79%,rgba(227,227,227,1)), color-stop(98%,rgba(222,222,222,1)), color-stop(100%,rgba(168,168,183,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(168,168,183,1) 0%,rgba(254,255,254,1) 2%,rgba(249,249,249,1) 23%,rgba(227,227,227,1) 79%,rgba(222,222,222,1) 98%,rgba(168,168,183,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(168,168,183,1) 0%,rgba(254,255,254,1) 2%,rgba(249,249,249,1) 23%,rgba(227,227,227,1) 79%,rgba(222,222,222,1) 98%,rgba(168,168,183,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(168,168,183,1) 0%,rgba(254,255,254,1) 2%,rgba(249,249,249,1) 23%,rgba(227,227,227,1) 79%,rgba(222,222,222,1) 98%,rgba(168,168,183,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(168,168,183,1) 0%,rgba(254,255,254,1) 2%,rgba(249,249,249,1) 23%,rgba(227,227,227,1) 79%,rgba(222,222,222,1) 98%,rgba(168,168,183,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8b7', endColorstr='#a8a8b7',GradientType=0 ); /* IE6-9 */

  border: 1px solid #A8A8B7;
  box-shadow: 0px 2px 1px #fff;
  text-shadow:none;
  color:#757584;
}
a.secondaryButton:hover {
  background: rgb(168,168,183); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(168,168,183,1) 0%, rgba(254,255,254,1) 2%, rgba(249,249,249,1) 9%, rgba(222,222,222,1) 90%, rgba(222,222,222,1) 98%, rgba(168,168,183,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(168,168,183,1)), color-stop(2%,rgba(254,255,254,1)), color-stop(9%,rgba(249,249,249,1)), color-stop(90%,rgba(222,222,222,1)), color-stop(98%,rgba(222,222,222,1)), color-stop(100%,rgba(168,168,183,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(168,168,183,1) 0%,rgba(254,255,254,1) 2%,rgba(249,249,249,1) 9%,rgba(222,222,222,1) 90%,rgba(222,222,222,1) 98%,rgba(168,168,183,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(168,168,183,1) 0%,rgba(254,255,254,1) 2%,rgba(249,249,249,1) 9%,rgba(222,222,222,1) 90%,rgba(222,222,222,1) 98%,rgba(168,168,183,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(168,168,183,1) 0%,rgba(254,255,254,1) 2%,rgba(249,249,249,1) 9%,rgba(222,222,222,1) 90%,rgba(222,222,222,1) 98%,rgba(168,168,183,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(168,168,183,1) 0%,rgba(254,255,254,1) 2%,rgba(249,249,249,1) 9%,rgba(222,222,222,1) 90%,rgba(222,222,222,1) 98%,rgba(168,168,183,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8b7', endColorstr='#a8a8b7',GradientType=0 ); /* IE6-9 */
}
a.secondaryButton:active {
  background-image: none;
  background-color: #DDD;
}

/******************************************************************************
* Specific Pages
******************************************************************************/
/* The Team Page */
.theteam .wrap span {color:gray;}
.theteam .wrap p span {
  display: inline-block;
  font-style: italic;
  width: 70px;
}
.theteam .wrap span.title {
  color:#1C6BB0;
  display:block;
  margin-bottom:20px;
}
.theteam .wrap img {float:left;}
.theteam .wrap .bio {
  float:left;
  margin-top:35px;
}

/* Blog Listing Page */
.blog-list h2 {margin-bottom:0;}
.blog-list .submitted {
  color:gray;
  margin-bottom:10px;
}
.blog-list .submitted span {font-weight:bold;}
.blog-list .post-teaser, .blog-post {
  clear:both;
  margin-bottom:20px;
  padding:0 10px;
  position:relative;
  overflow:auto;
}
.blog-list .post-teaser:hover {
  -moz-box-shadow: 0px 0px 5px 1px #f2f2f2;
  -webkit-box-shadow: 0px 0px 5px 1px #f2f2f2;
  box-shadow: 0px 0px 5px 1px #f2f2f2;
}
.blog-list p img {
  float:left;
  margin:0 10px 5px 0;
  width:25%;
  padding: 5px;
  background: #f2f2f2;
  border: 1px solid #DDDDDD;
  -moz-border-radius:11px;
  -webkit-border-radius:11px;
  border-radius: 11px;
}
.blog-post p img {
  float:left;
  margin:0 20px 40px 0;
  width:30%;
  padding: 5px;
  background: #f2f2f2;
  border: 1px solid #DDDDDD;
  -moz-border-radius:11px;
  -webkit-border-radius:11px;
  border-radius: 11px;
}
.blog-list p img:hover {
  background: #f4f4f4;
  border: 1px solid #cccccc;
  -moz-border-radius:11px;
  -webkit-border-radius:11px;
  border-radius: 11px;
}
.blog-list a.read-more {
  background:#1C6BB0;
  color:white;
  padding:5px 7px;
  position:absolute;
  bottom:10px;
  right:10px;
  -mo-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
}
.blog-list a.read-more:hover {background:gray;}

/* Pricing Tables */
.pricing .columns {
  margin-bottom:20px;
  padding-top:0;
}
ul.pricing-table {margin-bottom: 0;}
ul.pricing-table .price {
  background: #f8f8f8;
}
ul.pricing-table i {
  display: inline-block;
  margin-right: 5px;
} 
.popular {
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
  position: relative;
  z-index: 2;
}
.pricing-table .title {
  background: rgb(167,207,223); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,207,223,1)), color-stop(100%,rgba(35,83,138,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
  color:white;
}
.popular .pricing-table .title {
  background: rgb(254,252,234); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,252,234,1)), color-stop(100%,rgba(241,218,54,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
  color:#1C6BB0;
}

@media only screen and (min-width: 768px){
  .left-side { border-right: none; }
  .right-side { border-left: none; }
}

/* Effects */
.big-middle { /* as seen on full width page */
  min-height: 120px;
  position:relative;
}
.cover { /* to hide half the spinning icon */
  background: white;
  border-top: 1px solid #eaeaea;
  height: 50px;
  z-index: 20;
  margin-top: -66px;
  position: relative;
  text-align: center;
}
.fullwidth-icon { /* making the gear icon LARGE */
  font-size: 666%; /* oooer! */
  margin-left:100px;
  position:absolute;
}
.spin { /* only drawback is the element to spin has to be absolutely positioned! */
  -webkit-animation: rotate 10s linear infinite;
  -moz-animation: rotate 10s linear infinite;
  -ms-animation: rotate 10s linear infinite;
  -o-animation: rotate 10s linear infinite;
  animation: rotate 10s linear infinite;
}