/* ==================================================================

Reversal CSS

Main Color: @colorPrincipal

================================================================== */
/* ==================================================================
CSS Reset
================================================================== */
/* HTML5 display-role reset for older browsers */
/* ==================================================================
Basic Document Styles
================================================================== */
body {
  color: #f2f2f2;
  background: #00a9e0;
}
input,
select,
textarea {
  font: 13px/24px "Open Sans", Helvetica, Arial, sans-serif;
}
hr {
  background: #e1e1e1;
}
hr.fancy-hr:before {
  background: #aaffff;
}
.clearfix {
  display: inline-block;
  *zoom: 1;
}
::selection {
  background: #00a9e0;
  color: #fff;
}
::-moz-selection {
  background: #00a9e0;
  /* Firefox */
  color: #fff;
}
::-webkit-selection {
  background: #00a9e0;
  /* Safari */
  color: #fff;
}
/* ==================================================================
Typography
================================================================== */
h1 {
  color: #f2f2f2;
}
h2 {
  
}@color Titulo;
h3 {
  
}@color Titulo;
h4 {
  
}@color Titulo;
p {
  
}@color Texto;
a,
a > * {
  color: #444444;
}
a:hover,
a > *:hover {
  color: #00437a;
}
/* ==================================================================
Basic Layout Styles
================================================================== */
.disabled,
.disabled i {
  color: #eaeaea !important;
}
.custom-icon-list li i {
  color: #333333;
}
.button {
  background: #f2f2f2;
  color: #ffffff;
}
.button:hover {
  color: #0098cf;
  background: #252525;
}
/* ==================================================================
Progress Bar
================================================================== */
.progress {
  color: #f2f2f2;
}
.progress .bar {
  color: #f2f2f2;
  background: #0098cf !important;
}
.progress:hover .bar {
  background: #0087be !important;
  color: #f2f2f2;
}
/* ==================================================================
Forms
================================================================== */
input,
textarea,
select {
  background: #f2f2f2 !important;
  color: #959595 !important;
}
input:hover,
textarea:hover,
select:hover {
  background: #e1e1e1 !important;
}
input:focus,
textarea:focus,
select:focus {
  background: #00a9e0;
  color: #ffffff;
}
input[type="submit"],
button,
a.button {
  background: #00437a !important;
  color: #f2f2f2 !important;
}
input[type="submit"]:hover,
button:hover,
a.button:hover {
  background: #0098cf !important;
}
input[type="checkbox"]:hover {
  background-color: #00437a;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #b0b0b0;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #b0b0b0;
}
input.placeholder,
textarea.placeholder {
  color: #b0b0b0;
}
/* ==================================================================
Preloader
================================================================== */
#preloader {
  background-color: #ffffff;
}
#loading-animation {
  background-image: url(images/loading-animation.gif);
}
/* ==================================================================
Main Navigation
================================================================== */
nav#main-nav {
  background: #f2f2f2;
}
nav#main-nav ul li a {
  color: #333333;
}
nav#main-nav ul li a.active {
  color: #aaffff;
  background-color: #00a9e0;
}
/* ==================================================================
Responsive Navigation
================================================================== */
#main-nav #responsive-nav {
  background: #333333;
}
#main-nav #responsive-nav:hover i {
  color: #ffffff;
}
/* ==================================================================
Sections
================================================================== */
section.seccionPrincipal {
  background: #00a9e0;
  background: url(images/degradado-arriba.png) no-repeat center center fixed;
  background-size: 100% 100%;
}
/* ==================================================================
Intro
================================================================== */
#intro {
  background: url(images/degradado.png) no-repeat center center fixed;
  background-size: 100% 100%;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/degradado.png', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/degradado.png', sizingMethod='scale')";
  background-color: #00a9e0;
}
#intro h1 {
  color: #111111;
}
#intro h1 span {
  color: #00a9e0;
}
#intro h2 {
  color: #ffffff;
}
.get-started {
  background-color: #00a9e0;
  color: #ffffff;
}
.get-started i {
  color: #111111;
}
.get-started:hover {
  color: #ffffff;
  background: #00437a;
}
.get-started:hover i {
  color: #00437a;
}
/* ==================================================================
Services
================================================================== */
.features .feature-box .box-content {
  background: white;
}
.features .feature-box .box-content .feature-icon {
  color: #00a9e0;
}
.features .feature-box .box-content h4 {
  color: #111111;
}
.features .feature-box .box-content p {
  color: #555555;
}
.features-list .feature-box .feature-icon i {
  color: #111111;
}
.features-list .feature-box .feature-text h3 {
  color: #00a9e0;
}
.accordion-toggle {
  background: #ebebeb;
}
.accordion-toggle i {
  color: #111111;
}
.accordion-body {
  background: #ffffff;
}
/* ==================================================================
Portfolio
================================================================== */
.portfolio-filter li a.selected {
  color: #333333;
}
.portfolio .portfolio-item {
  /*background: @colorPrincipal;*/
}
.portfolio .portfolio-item i,
.fancybox i {
  color: #333333;
}
.fancybox i {
  color: #ffffff;
}
.single-portfolio {
  background: #333333;
}
.single-portfolio .portfolio-close {
  color: #444444;
}
.single-portfolio .portfolio-close:hover {
  color: #00437a;
}
.single-portfolio h2 {
  color: #f2f2f2;
}
.single-portfolio p {
  color: #999999;
}
/* ==================================================================
Flexslider
================================================================== */
.flexslider a.flex-prev {
  background: url(images/flexslider-left-arrow.png) no-repeat;
}
.flexslider a.flex-next {
  background: url(images/flexslider-right-arrow.png) no-repeat;
}
/* ==================================================================
Isotope Transitions
================================================================== */
/* ==================================================================
Contacts
================================================================== */
#contacts {
  background: url(images/contacts-background.jpg) no-repeat center center;
}
.contact-info {
  background: #ffffff;
}
.social {
  background: #ffffff;
}
form.contact-form {
  background: #ffffff;
}
.form-error {
  background: #fcdcdc !important;
}
/*Responsivo*/
/* ==================================================================
Media Queries
================================================================== */
/* ==================================================================
Desktop
================================================================== */
@media only screen and (min-width: 979px) {
  /* ==================================================================
  ScrollBar
  ================================================================== */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    -webkit-border-radius: 0px;
    border-radius: 0px;
  }
  ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 0px;
    border-radius: 0px;
    background: rgba(180, 180, 180, 0.8);
    -webkit-box-shadow: none;
  }
  ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(180, 180, 180, 0.4);
  }
}
/* ==================================================================
Tablet Portrait size to Tablet Landscape (devices and browsers)
================================================================== */
@media only screen and (min-width: 768px) and (max-width: 979px) {
  /* ==================================================================
  Portfolio
  ================================================================== */
}
/* ==================================================================
All Mobile Sizes (devices and browsers)
================================================================== */
@media only screen and (max-width: 767px) {
  body {
    overflow: visible;
  }
  section.seccionPrincipal {
    background: #00a9e0;
    background: url(images/degradado-arriba.png) no-repeat center center fixed;
    background-size: 100% 100%;
  }
  /* ==================================================================
  Main Navigation
  ================================================================== */
  nav#main-nav {
    height: auto;
  }
  nav#main-nav > ul {
    background: #333333;
  }
  nav#main-nav > ul li {
    border-top: #3d3d3d;
  }
  nav#main-nav > ul li a {
    color: #ffffff;
  }
  nav#main-nav ul li a.active {
    color: #ffffff;
  }
  /* ==================================================================
  Responsive Navigation
  ================================================================== */
  /* ==================================================================
  Intro
  ================================================================== */
  /* ==================================================================
  Services
  ================================================================== */
  /* ==================================================================
  Portfolio
  ================================================================== */
  /* ==================================================================
  Contacts
  ================================================================== */
}
/* ==================================================================
Mobile Landscape Size to Tablet Portrait (devices and browsers)
================================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  /* ==================================================================
  Portfolio
  ================================================================== */
}
/* ==================================================================
Mobile Portrait Size to Mobile Landscape Size (devices and browsers)
================================================================== */
@media only screen and (max-width: 479px) {
  /* ==================================================================
  Portfolio
  ================================================================== */
}