@charset "utf-8";

/* CSS Document */


/* Google Font Roboto */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,700);

/* General */

* {
    outline: none !important;
}

html {
    overflow-x: hidden;
}

body {
    background: #999;
}


/* Typography */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 300;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #FFF;
    text-align: center;
    text-transform: uppercase;
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span,
p span {
    font-weight: 700;
}

.main-title {
    margin: 0 auto 15px;
    padding: 19px;
    max-width: 300px;
    border: 1px solid #FFF;
    display: block;
}

a {
    text-decoration: none;
    transition: all linear 0.25s;
    -ms-transition: all linear 0.25s;
    -moz-transition: all linear 0.25s;
    -webkit-transition: all linear 0.25s;
    -o-transition: all linear 0.25s;
}

a:hover,
a:focus {
    text-decoration: none;
}

p a {
    color: #FFF;
}

p a:hover {
    color: #333;
}

hr {
    margin: 0;
    padding-bottom: 49px;
    border: 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.5);
    border-bottom: none;
}

.no-margin {
    margin: 0;
}

.margin-bottom {
    margin-bottom: 40px;
}

.lead {
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 25px;
}

.hero-unit {
    padding: 35px;
    margin-bottom: 50px;
    font-weight: 300;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}


/* Buttons */

.btn,
.btn-primary {
    margin: 0;
    padding: 5px 10px;
    height: 20px;
    background: #FFF;
    border: none;
    border-bottom: 5px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    filter: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    font: 300 14px/20px Open Sans, Arial, Helvetica, sans-serif;
    color: #333;
    text-shadow: none;
    transition: all linear 0.1s;
    -ms-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
    -webkit-transition: all linear 0.1s;
    -o-transition: all linear 0.1s;
}

.btn-primary {
    background: rgba(0, 0, 0, 0.1);
}

.btn-large {
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 0;
}

.btn:hover,
.btn:focus,
.btn-primary:hover,
.btn-primary:focus {
    height: 23px;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 2px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    line-height: 23px;
    transition: all linear 0.1s;
    -ms-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
    -webkit-transition: all linear 0.1s;
    -o-transition: all linear 0.1s;
}

.btn-primary:hover,
.btn-primary:focus {
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 2px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}


/* Background */

.bg {
    position: fixed;
    bottom: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    z-index: 0;
    text-align: center;
}

.bg img {
    width: 100%;
    min-width: 500px;
    height: 100%;
}

.rostro {
    position: fixed;
    bottom: 0;
    left: 50%;
    z-index: 2;
}


/* Logo */

.logo {
    margin-top: -180px;
    width: 100%;
    height: 150px;
    background: rgba(0, 0, 0, 0.15);
    line-height: 150px;
    text-align: left;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
}

.logo p {
    margin-bottom: 0;
}

.logo img {
    vertical-align: inherit;
}


/* Sections */

.section {
    margin-top: -30px;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    z-index: 10;
    transition: all linear 0.25s;
    -ms-transition: all linear 0.25s;
    -moz-transition: all linear 0.25s;
    -webkit-transition: all linear 0.25s;
    -o-transition: all linear 0.25s;
}

.section:hover {
    cursor: pointer;
}

.section.section-expand {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    top: 0;
    right: 0 !important;
    z-index: 2;
}

.section.section-expand:hover {
    cursor: default;
    animation: none;
    -webkit-animation: none;
}


/* Sections About */

.section#about {
    right: 750px;
}


/* Sections Services */

.section#services {
    right: 600px;
}

.serv {
    width: 900px;
    margin: 0 auto 80px;
}

.serv ul li {
    width: 300px;
}


/* Sections Blog */

.section#blog {
    right: 300px;
}


/* Sections Portfolio */

.section#folio {
    right: 450px;
}


/* Sections Videogames */

.section#videojuegos {
    right: 150px;
}


/* Sections Contact */

.section#contact {
    right: 0;
}

.rrss-home,
.rrss-pages {
    position: absolute;
    right: 10px;
    z-index: 10000;
}

.rrss-home {
    top: 50%;
    margin-top: -170px;
}

.rrss-pages {
    top: 10px;
}

.rrss-home a,
.rrss-pages a {
    background: url(../img/icons/i-redes-sociales.png);
    float: left;
    display: block;
    width: 30px;
    height: 30px;
    margin-left: 10px;
    text-indent: -10000px;
}

.rrss-home .twit,
.rrss-pages .twit {
    background-position: 0 0;
}

.rrss-home .fb,
.rrss-pages .fb {
    background-position: 0 -50px;
}

.rrss-home .discord,
.rrss-pages .discord {
    background-position: 0 -100px;
}


/* Switch Section */

.switch-section {
    width: 50px;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: inset -2px 0 5px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    transition: all linear 0.25s;
    -ms-transition: all linear 0.25s;
    -moz-transition: all linear 0.25s;
    -webkit-transition: all linear 0.25s;
    -o-transition: all linear 0.25s;
}

.switch-section-cont {
    margin: -170px 0 0 0;
    width: 50px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 0;
}

.section-home,
.section-about,
.section-services,
.section-folio,
.section-blog,
.section-contact,
.section-videojuegos{
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #FFF;
    text-align: center;
    opacity: 0.5;
    display: block;
    float: left;
    transition: all linear 0.25s;
    -ms-transition: all linear 0.25s;
    -moz-transition: all linear 0.25s;
    -webkit-transition: all linear 0.25s;
    -o-transition: all linear 0.25s;
}

.section-home:hover,
.section-about:hover,
.section-services:hover,
.section-folio:hover,
.section-blog:hover,
.section-contact:hover {
    background: rgba(0, 0, 0, 0.1);
    font-size: 30px;
    opacity: 1;
}

.section-home.active {
    font-size: 30px;
    opacity: 1;
}

.section-about.active {
    font-size: 30px;
    opacity: 1;
}

.section-services.active {
    font-size: 30px;
    opacity: 1;
}

.section-folio.active {
    font-size: 30px;
    opacity: 1;
}

.section-blog.active {
    font-size: 30px;
    opacity: 1;
}

.section-videojuegos.active{
    font-size: 30px;
    opacity: 1;
}

.section-contact.active {
    font-size: 30px;
    opacity: 1;
}

.section-close {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.1);
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    line-height: 50px;
    color: #FFF;
    text-align: center;
    display: none;
    position: absolute;
    top: 95px;
    right: 0;
    z-index: 10;
    transition: all linear 0.25s;
    -ms-transition: all linear 0.25s;
    -moz-transition: all linear 0.25s;
    -webkit-transition: all linear 0.25s;
    -o-transition: all linear 0.25s;
}

.section-close:hover {
    background: rgba(0, 0, 0, 0.25);
    color: #FFF;
}

.icon-label {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.1);
    line-height: 50px;
    color: #FFF;
    text-align: center;
    display: block;
    position: absolute;
    top: 95px;
    right: -50px;
    z-index: 10;
    transition: all linear 0.25s;
    -ms-transition: all linear 0.25s;
    -moz-transition: all linear 0.25s;
    -webkit-transition: all linear 0.25s;
    -o-transition: all linear 0.25s;
}

.icon-label:hover {
    background: rgba(0, 0, 0, 0.25);
    color: #FFF;
}


/* Switch Menu Title */

.section .section-title {
    margin: 35px 0;
    text-align: center;
    transition: all linear 0.25s;
    -ms-transition: all linear 0.25s;
    -moz-transition: all linear 0.25s;
    -webkit-transition: all linear 0.25s;
    -o-transition: all linear 0.25s;
}

.section.section-expand .section-title {
  /*   margin: 50px auto; */
    margin: 0px auto;
    padding: 50px 0;
}

.section .section-title strong {
    margin: 0;
    font: 300 20px/20px Open Sans, Arial, Helvetica, sans-serif;
    color: #FFF;
    text-transform: uppercase;
    display: block;
}

.section.section-expand .section-title strong {
    font-size: 50px;
    line-height: 50px;
}

.section .section-title p {
    margin: 0;
    font: 300 14px/20px Open Sans, Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, 0.75);
}

.section.section-expand .section-title p {
    font-size: 20px;
    line-height: 20px;
}

.section.section-expand .section-title p span {
    font-weight: 700;
}

.section .section-title i {
    margin: 0 auto 10px;
    width: 30px;
    height: 30px;
    font-size: 30px;
    line-height: 30px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    display: block;
    transition: all linear 0.25s;
    -ms-transition: all linear 0.25s;
    -moz-transition: all linear 0.25s;
    -webkit-transition: all linear 0.25s;
    -o-transition: all linear 0.25s;
}

.section:hover .section-title i {
    margin-top: -10px;
    width: 50px;
    height: 50px;
    font-size: 50px;
    line-height: 50px;
    color: #FFF;
}

.section.section-expand .section-title i {
    margin-top: 0;
    padding: 20px;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 100%;
    font-size: 100px;
    line-height: 100px;
    color: #FFF;
}

.section.section-expand .section-title:hover i {
    opacity: 0.75;
}

.section .container {
    margin: auto;
    display: none;
}

.section.section-expand .container {
    display: block;
}


/* Thumbnails */

.thumbnails li {
    margin: 0;
    background: rgba(255, 255, 255, 0);
    border-radius: 10px;
    transition: all linear 0.25s;
    -ms-transition: all linear 0.25s;
    -moz-transition: all linear 0.25s;
    -webkit-transition: all linear 0.25s;
    -o-transition: all linear 0.25s;
}

.thumbnails li:nth-child(2n+2) {
    background: rgba(255, 255, 255, 0.25);
}

.thumbnails li:hover {
    background: rgba(0, 0, 0, 0.1);
}

.thumbnails li .thumbnail {
    padding: 20px 0;
    border: none;
    box-shadow: none;
    text-align: center;
}

.thumbnails li .thumbnail i {
    margin: auto;
    width: 100px;
    height: 100px;
    font-size: 80px;
    line-height: 100px;
    color: #FFF;
    text-align: center;
    display: block;
    transition: all linear 0.15s;
    -ms-transition: all linear 0.15s;
    -moz-transition: all linear 0.15s;
    -webkit-transition: all linear 0.15s;
    -o-transition: all linear 0.15s;
}

.thumbnails li:hover .thumbnail i {
    font-size: 90px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.thumbnails li .thumbnail .social-links a {
    width: 30px;
    height: 30px;
    text-align: center;
    display: inline-block;
}

.thumbnails li .thumbnail .social-links i {
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    color: #999;
    text-shadow: none;
    transition: all linear 0.15s;
    -ms-transition: all linear 0.15s;
    -moz-transition: all linear 0.15s;
    -webkit-transition: all linear 0.15s;
    -o-transition: all linear 0.15s;
}

.thumbnails li .thumbnail .social-links a:hover i {
    color: #333;
}

.thumbnails li .thumbnail .thumb {
    margin: 20px auto;
    transition: all linear 0.15s;
    -ms-transition: all linear 0.15s;
    -moz-transition: all linear 0.15s;
    -webkit-transition: all linear 0.15s;
    -o-transition: all linear 0.15s;
}

.thumbnails li:hover .thumbnail .thumb {
    border-radius: 100%;
    box-shadow: 0 10px 0 rgba(255, 255, 255, 0.35), 0 -10px 0 rgba(0, 0, 0, 0.15), 10px 0 0 rgba(255, 255, 255, 0.35), -10px 0 0 rgba(0, 0, 0, 0.15);
    transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -moz-transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8);
    -o-transform: scale(0.8, 0.8);
}

.thumbnails li .thumbnail h5 {
    margin-bottom: 5px;
}

.thumbnails li .thumbnail p {
    margin-bottom: 20px;
    font-size: 12px;
}


/* Progress Bar */

.progress {
    margin-bottom: 50px;
    height: 40px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    filter: none;
    box-shadow: none;
    margin: 10px 45px;
}

.progress-title {
    margin-bottom: 10px;
}

.progress .bar {
    text-shadow: none;
    background: #FFF;
    filter: none;
    box-shadow: none;
}


/* Products Filter */

.filter {
    margin-bottom: 40px;
    margin-left: 0;
    padding: 14px 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.5);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
    line-height: 30px;
    text-align: center;
}

.filter p {
    margin-bottom: 0;
}

.filter p a {
    margin: 0 10px;
    font-size: 14px;
    font-family: Roboto Condensed, Arial, Helvetica, sans-serif;
    color: #FFF;
    text-transform: uppercase;
}

.filter p a:hover,
.filter p a.active {
    color: #333;
}


/* Galeria Items */

.galeria {
    margin-top: 30px !important;
    margin-bottom: 40px !important;
}

.proyect {
    float: left;
    width: 360px;
    margin: 5px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.25);
}

.img-proy {
    width: 100%;
    height: 300px;
    display: block;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
}

.title-proy {
    background: #00CCCC;
    padding: 0;
}

.title-proy p {
    font-size: 14px;
    font-family: Roboto Condensed, Arial, Helvetica, sans-serif;
    color: #333;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    padding: 10px 5px 0;
    background: rgba(0, 0, 0, 0.25);
}


/* Clientes Items */

.grid-clientes {
    margin-top: 30px !important;
    margin-bottom: 40px !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.cliente {
    float: left;
    width: 136px;
    margin: 5px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.15);
}

.logo-cliente {
    width: 100%;
    display: block;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
}

.logo-cliente img {
    width: 100%;
    display: block;
}


/* PREMIOS */

.nuestros__premios h2{
    margin-top: 49px;
    margin-bottom: 25px;
}

.nuestros__premios .hero-unit{
    padding: 16px;
}
.nuestros__premios .lead{
    margin: 0;
    font-weight: 700;
}

.section.section-expand .container .grid__premios{
    margin: 50px 0;
    row-gap: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px,1fr));
    justify-content: center;
    justify-items: center;
    box-sizing: border-box;
}

/* .container .grid__premios::before, .container .grid__premios::after{
    display: none;
} */

.premio{
    min-width: 250px;
    max-width: 320px;
    display: flex;
    gap: 10px;
    padding: 10px;
    border: 10px solid #DEB93F;
    background: #FFF;
}

.premio__detalle img{
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}


/* Folio Items */

.item .view {
    margin: -25px 0 0 -25px;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 100%;
    line-height: 50px;
    color: #FFF;
    text-align: center;
    opacity: 0;
    cursor: pointer;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: all linear 0.15s;
    -ms-transition: all linear 0.15s;
    -moz-transition: all linear 0.15s;
    -webkit-transition: all linear 0.15s;
    -o-transition: all linear 0.15s;
}

.item:hover .view {
    opacity: 1;
    top: 50%;
}

.item:hover .view:hover {
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 0, 0.5);
    line-height: 100px;
}

.item .item-detail {
    padding: 0;
    border: 10px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 1);
    text-align: center;
    opacity: 0;
    position: absolute;
    top: -9999px;
    left: 0;
}

.item.open .item-detail {
    padding: 20px;
    opacity: 1;
    top: 0;
    transition: padding linear 0.25s, opacity linear 0.25s;
    -ms-transition: padding linear 0.25s, opacity linear 0.25s;
    -moz-transition: padding linear 0.25s, opacity linear 0.25s;
    -webkit-transition: padding linear 0.25s, opacity linear 0.25s;
    -o-transition: padding linear 0.25s, opacity linear 0.25s;
}

.item .item-detail em.date {
    margin: 10px 0 20px;
    display: block;
}

.item .item-detail p.lead {
    margin-bottom: 20px;
}

.item .item-detail p {
    margin-bottom: 0;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
}

.item .item-detail a img {
    margin-bottom: 20px;
    transition: all linear 0.25s;
    -ms-transition: all linear 0.25s;
    -moz-transition: all linear 0.25s;
    -webkit-transition: all linear 0.25s;
    -o-transition: all linear 0.25s;
}

.item .item-detail a img:hover {
    border-radius: 5px;
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1);
}

.item .item-close {
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.1);
    line-height: 30px;
    color: #FFF;
    text-align: center;
    cursor: pointer;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transition: all linear 0.25s;
    -ms-transition: all linear 0.25s;
    -moz-transition: all linear 0.25s;
    -webkit-transition: all linear 0.25s;
    -o-transition: all linear 0.25s;
}

.item .item-close:hover {
    background: rgba(0, 0, 0, 0.25);
}

.sectionMaps{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 55px;
}
.sectionMaps h2{
    margin: 25px;
}

.sectionMaps iframe{
    width: 80%;
    height: 350px;
    border: 0;
}

/* Address */

address {
    margin: 20px auto 50px;
    padding: 19px;
    width: 260px;
    border: 1px dashed rgba(255, 255, 255, 0.5);
    font: normal 16px/20px Open Sans, Arial, Helvetica, sans-serif;
    text-align: center;
    color: #222;
}

address a {
    color: #FFF;
}

address a:hover {
    color: #333;
}


/* Contact Form */

.contact-form {
    margin: 20px 0 50px;
}

.contact-form input[type=text],
.contact-form textarea {
    margin: 0 10px 0 0;
    padding: 15px;
    min-width: 280px;
    width: 280px;
    max-width: 280px;
    min-height: 20px;
    height: 20px;
    max-height: 20px;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 0;
    box-shadow: none;
    font: normal 14px/20px Open Sans, Arial, Helvetica, sans-serif;
    color: #FFF;
    float: left;
}

.contact-form input[type=text]::-ms-input-placeholder,
.contact-form textarea::-ms-input-placeholder {
    color: #FFF;
}

.contact-form input[type=text]::-moz-input-placeholder,
.contact-form textarea::-moz-input-placeholder {
    color: #FFF;
}

.contact-form input[type=text]::-webkit-input-placeholder,
.contact-form textarea::-webkit-input-placeholder {
    color: #FFF;
}

.contact-form input[type=text]::-o-input-placeholder,
.contact-form textarea::-o-input-placeholder {
    color: #FFF;
}

.contact-form button,
.contact-form button:hover,
.contact-form button:focus {
    margin: 0;
    width: 210px;
    height: 50px;
}


/* Google Map */

#map-canvas {
    margin: 20px 0 50px;
    width: 100%;
    height: 350px;
    z-index: 100;
}

#map-canvas div.gmnoprint,
#map-canvas div div+div a img {
    display: none
}


/* ScrollBar */

.nicescroll-rails {
    width: 5px !important;
    height: 100% !important;
    background: none !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: inherit !important;
    z-index: 10 !important;
}

.nicescroll-rails div {
    width: 5px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: none !important;
    border-radius: 0 !important;
}

@media (min-width: 1200px) {
    .bg .front img {
        height: 375px;
    }
}

@media (width: 1280px) and (width: 800px) {
    .portfolio img {
        height: 100%;
        width: 100%;
    }
}


@media screen and (max-width: 460px) {
    .section.section-expand .container .grid__premios{
      grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  }
  .premio {
    width: 288px;
  }

}


/* Desktop small layout */

@media (min-width: 980px) and (max-width: 1199px) {
    .logo {
        margin-top: -180px;
    }
    .section {
        margin-top: -30px;
    }
    .contact-form input[type=text],
    .contact-form textarea {
        min-width: 220px;
        width: 220px;
        max-width: 220px;
    }
    .contact-form button,
    .contact-form button:hover,
    .contact-form button:focus {
        width: 160px;
    }
    /* Servicios */
    .serv {
        width: 900px;
        margin: 0 auto 80px;
    }
    .serv ul li {
        width: 300px;
    }
    /* Galeria Items */
    .proyect {
        width: 440px;
    }
    /* Clientes */
    .cliente {
        width: 158px;
    }
}


/* Tablet layout */

@media (min-width: 768px) and (max-width: 979px) {
    .logo {
        margin-top: -180px;
    }
    .section {
        margin-top: -30px;
    }
    .contact-form input[type=text],
    .contact-form textarea {
        min-width: 145px;
        width: 145px;
        max-width: 145px;
    }
    .contact-form button,
    .contact-form button:hover,
    .contact-form button:focus {
        width: 169px;
    }
    /* Servicios */
    .serv {
        width: 600px;
        margin: 0 auto 80px;
    }
    .serv ul li {
        width: 300px;
    }
    .thumbnails li:nth-child(2n+2) {
        background: none;
    }
    .thumbnails li:nth-child(2),
    .thumbnails li:nth-child(3),
    .thumbnails li:nth-child(6),
    .thumbnails li:nth-child(7) {
        background: none repeat scroll 0 0 rgba(255, 255, 255, 0.25);
    }
    /* Galeria Items */
    .proyect {
        width: 330px;
    }
    .img-proy {
        height: 280px;
    }
    .title-proy h3 {
        font-size: 22px;
    }
    /* Clientes */
    .cliente {
        width: 151px;
    }
}


/* iPhone5 landscape layout */

@media (min-width: 568px) and (max-width: 767px) {
    body {
        padding-right: 0;
        padding-left: 0;
    }
    .logo {
        margin-top: -120px;
    }
    #slides .slides-container .slides-detail {
        margin-top: -120px !important;
    }
    .section {
        margin-top: 30px;
        width: 96px;
        height: 96px;
    }
    .section .section-title {
        margin: 33px 0;
    }
    .section .section-title strong,
    .section .section-title p {
        display: none;
    }
    .section#about {
        right: 480px;
    }
    .section#services {
        right: 384px;
    }
    .section#blog {
        right: 288px;
    }
    .section#folio {
        right: 192px;
    }
    .section#videojuegos {
        right: 96px;
    }
    .section#contact {
        right: 0;
    }
    .rrss-home {
        margin-top: -110px;
    }
    .contact-form input[type=text],
    .contact-form textarea {
        margin: 0 auto 10px;
        min-width: 300px;
        width: 300px;
        max-width: 300px;
        min-height: 50px;
        height: 50px;
        max-height: 50px;
        float: none;
    }
    .contact-form textarea {
        min-width: 270px;
        width: 270px;
        max-width: 270px;
        display: block;
    }
    .contact-form button,
    .contact-form button:hover,
    .contact-form button:focus {
        margin: 0 auto;
        width: 290px;
        display: block;
    }
    /* Servicios */
    .serv {
        width: 70%;
        margin: 0 auto 80px;
    }
    .serv ul li {
        width: 100%;
    }
    /* Galeria Items */
    .proyect {
        width: 95%;
    }
    .img-proy {
        height: 320px;
    }
    /* Clientes */
    .cliente {
        width: 158px;
    }
}


/* Mobile landscape layout */

@media (min-width: 480px) and (max-width: 567px) {
    body {
        padding-right: 0;
        padding-left: 0;
    }
    .logo {
        margin-top: -120px;
    }
    #slides .slides-container .slides-detail {
        margin-top: -120px !important;
    }
    .section {
        margin-top: 30px;
        width: 96px;
        height: 96px;
    }
    .section .section-title {
        margin: 33px 0;
    }
    .section .section-title strong,
    .section .section-title p {
        display: none;
    }
    .section#about {
        right: 480px;
    }
    .section#services {
        right: 384px;
    }
    .section#blog {
        right: 288px;
    }
    .section#folio {
        right: 192px;
    }
    .section#videojuegos {
        right: 96px;
    }
    .section#contact {
        right: 0;
    }
    .rrss-home {
        margin-top: -110px;
    }
    .contact-form input[type=text],
    .contact-form textarea {
        margin: 0 auto 10px;
        min-width: 300px;
        width: 300px;
        max-width: 300px;
        min-height: 50px;
        height: 50px;
        max-height: 50px;
        float: none;
    }
    .contact-form textarea {
        min-width: 270px;
        width: 270px;
        max-width: 270px;
        display: block;
    }
    .contact-form button,
    .contact-form button:hover,
    .contact-form button:focus {
        margin: 0 auto;
        width: 290px;
        display: block;
    }
    /* Servicios */
    .serv {
        width: 70%;
        margin: 0 auto 80px;
    }
    .serv ul li {
        width: 100%;
    }
    /* Galeria Items */
    .proyect {
        width: 95%;
    }
    .img-proy {
        height: 320px;
    }
    /* Clientes */
    .cliente {
        width: 125px;
    }
}


/* Mobile portrait layout */

@media (max-width: 479px) {
    body {
        padding-right: 0;
        padding-left: 0;
    }
    .section {
        margin-top: -30px;
        width: 64px;
        height: 64px;
    }
    .section .section-title {
        margin: 17px 5px;
    }
    .section .section-title strong,
    .section .section-title p {
        display: none;
    }
    .section#about {
        right: 320px;
    }
    .section#services {
        right: 256px;
    }
    .section#blog {
        right: 192px;
    }
    .section#folio {
        right: 128px;
    }
    .section#videojuegos {
        right: 64px;
    }
    .section#contact {
        right: 0;
    }
    .contact-form input[type=text],
    .contact-form textarea {
        margin: 0 auto 10px;
        min-width: 300px;
        width: 300px;
        max-width: 300px;
        min-height: 50px;
        height: 50px;
        max-height: 50px;
        float: none;
    }
    .contact-form textarea {
        min-width: 270px;
        width: 270px;
        max-width: 270px;
        display: block;
    }
    .contact-form button,
    .contact-form button:hover,
    .contact-form button:focus {
        margin: 0 auto;
        width: 290px;
        display: block;
    }
    /* Servicios */
    .serv {
        width: 85%;
        margin: 0 auto 80px;
    }
    .serv ul li {
        width: 100%;
    }
    /* Galeria Items */
    .proyect {
        width: 90%;
    }
    .img-proy {
        height: 200px;
    }
    /* Clientes */
    .cliente {
        width: 130px;
    }
}

@media (max-height: 321px) {
    .rostro {
        display: none;
    }
}


/*****************************************************
 ****             18. Hover Effects              *****
 *****************************************************/


/* 15. Single Portfolio */

.singlePortfolio .desc {
    color: #333333;
    background: transparent url(../img/sep.png) repeat-x center bottom;
    padding-bottom: 5px;
    font-size: 16px;
    font-family: "nexa_500", Tahoma, Geneva, sans-serif;
    margin-bottom: 16px;
}

.singlePortfolio [class*="span"] img {
    max-width: 100%;
}

.singlePortfolio h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

.singlePortfolio p {
    margin-bottom: 25px;
}

.singlePortfolio .socialIcons {
    color: #000;
    font-family: "nexa_500", Tahoma, Geneva, sans-serif;
    font-size: 14px;
    margin-bottom: 0;
}

.google-maps {
    border: 5px solid #ffffff;
    height: 290px;
    margin-bottom: 40px;
}

.google-maps iframe {
    width: 100%;
}

.featuredWorks {
    margin-left: 0px;
}

.featuredWork {
    position: relative;
    cursor: default;
    text-align: center;
    font-family: open sans, Arial, Helvetica, sans-serif;
}

.featuredWork p {
    color: #ffffff;
    margin-bottom: 10px;
}

.featuredWork .content>div {
    height: 100% !important;
    width: 100% !important;
}

.featuredWork .content .backCon {
    width: 100%;
}

.featuredWork .bg {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    top: 0;
}

.featuredWork .title {
    color: #ffffff;
    margin-top: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 0px;
    padding-bottom: 1%;
    text-transform: uppercase;
}

.featuredWork .header {
    margin: 0px auto;
    width: 85%;
    padding-top: 11%;
}

.featuredWork .description {
    margin: 10px auto 0px;
    width: 85%;
}

.featuredWork .category {
    color: white;
    font-size: 16px;
    margin-bottom: 8px;
    line-height: 1.2;
    margin-top: 10px;
    padding: 0px 25px;
}

.featuredWork .sep {
    background-position: left top;
    min-height: 2px;
    margin-top: 8px;
}

.featuredWork small {
    color: #1a1a1a;
    font-style: italic;
    display: block;
    font-size: 12px;
}

.featuredWork a {
    color: #1a1a1a;
}

.featuredWork a:hover {
    color: #ffffff;
}

.featuredWork .content .front {
    opacity: 1;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.featuredWork .content .front img {
    width: 100%;
}

.featuredWork .back {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4) !important;
}

.featuredWork .socialIcons a {
    margin-left: 0;
}

.featuredWork .socialIcons a:hover,
.featuredWork .socialIcons a:active {
    background-color: #333333;
}


/* 18.1. Hover Effects1 */

.featuredWorks.hover-effect1 .content>div {
    display: block;
    position: absolute;
    background-position: center center;
    -webkit-backface-visibility: hidden;
    /*Just for webkit to have a smooth font*/
}

.featuredWorks.hover-effect1 .backCon {
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    opacity: 0;
    -webkit-backface-visibility: hidden;
}

.featuredWorks.hover-effect1 .backCon:hover {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.featuredWorks.hover-effect1 .backCon:hover .content {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.featuredWorks.hover-effect1 .content {
    width: 100%;
}

.featuredWorks.hover-effect1 .content .back {
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.featuredWorks.hover-effect1 .featuredWork:hover .front {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.featuredWorks.hover-effect1 .featuredWork:hover .back {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}


/* 18.2. Hover Effects2 */

.hover-effect2 .featuredWork {
    -webkit-perspective: 900px;
    -moz-perspective: 900px;
    -o-perspective: 900px;
    -ms-perspective: 900px;
    perspective: 900px;
}

.hover-effect2 .bg {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.hover-effect2 .content .back {
    display: block;
    position: absolute;
    background-position: center center;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

.hover-effect2 .content .front {
    position: absolute;
    background-position: center center;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

.hover-effect2 .bg .back {
    -webkit-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
    -moz-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
    -o-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
    -ms-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
    transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
}

.hover-effect2 .featuredWork:hover .front {
    -webkit-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
    -moz-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
    -o-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
    -ms-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
    transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
    opacity: 0;
}

.hover-effect2 .featuredWork:hover .back {
    -webkit-transform: rotate3d(1, 0, 0, 0deg);
    -moz-transform: rotate3d(1, 0, 0, 0deg);
    -o-transform: rotate3d(1, 0, 0, 0deg);
    -ms-transform: rotate3d(1, 0, 0, 0deg);
    transform: rotate3d(1, 0, 0, 0deg);
    opacity: 1;
}


/* 18.3. Hover Effects3 */

.hover-effect3 .content>div {
    display: block;
    position: absolute;
    background-position: center center;
    -webkit-backface-visibility: hidden;
    /*Just for webkit to have a smooth font*/
}

.hover-effect3 .content .front {
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.hover-effect3 .content .back {
    opacity: 0;
    pointer-events: none;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: all 0.4s ease-in-out 0.2s;
    -moz-transition: all 0.4s ease-in-out 0.2s;
    -o-transition: all 0.4s ease-in-out 0.2s;
    transition: all 0.4s ease-in-out 0.2s;
}

.hover-effect3 .featuredWork:hover .front {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}

.hover-effect3 .featuredWork:hover .back {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

.span3.featuredWork {
    max-width: 251px;
    max-height: 182px;
}

.span4.featuredWork {
    max-width: 345px;
    max-height: 250px;
}

.row-fluid [class*="span"] .span4.featuredWork .title {
    font-size: 1.2em;
    margin-bottom: 1%;
}

[class*="span"] .row-fluid .span4.featuredWork .header {
    padding-top: 9%;
}

[class*="span"] .row-fluid .span3.featuredWork .title {
    font-size: 1em;
    margin-bottom: 0;
}

[class*="span"] .row-fluid .span3.featuredWork .category {
    margin-top: 3px;
}

[class*="span"] .row-fluid .span3.featuredWork .header {
    padding-top: 6%;
}

.col2 .featuredWork .header {
    padding-top: 7%;
}

.col4 .featuredWork .header {
    padding-top: 7%;
}

.col4 .featuredWork .category {
    font-size: 14px;
}

.col4 .featuredWork .title {
    font-size: 14px;
    line-height: 1.5;
}


/* 19. Members in About Pages (Our team). */

.member .featuredWork .header {
    margin: 0px auto;
    padding-top: 6%;
}

.displayHidden {
    visibility: hidden;
}


/* 20. portfolio filter */


/* Custom Classes
------------------------------------------------------------ */

.group:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}


/* Filter */

.group {
    margin-bottom: 20px;
    color: #333333;
    margin: 0;
}

.filter {
    margin: 0px 0px 30px 0px;
}

.filter li {
    font-family: open sans, Arial, Helvetica, sans-serif;
    /*float: left;*/
    display: inline;
    list-style: none;
    font-size: 15px;
}

.filter li:after {
    content: "/";
}

.filter li:last-child:after {
    content: "";
}

.filter a {
    padding: 0 10px;
    color: #333333;
    text-decoration: none;
}

.current a {
    cursor: default;
}


/* Portfolio Items */

.portfolio .item,
.featuredWork {
    list-style: none;
    float: left;
    margin-bottom: 2em;
}

.portfolio li.span3:nth-child(4n+1) {
    margin-left: 0;
}

.portfolio li.span4:nth-child(3n+1) {
    margin-left: 0;
}

.portfolio li.span6:nth-child(2n+1) {
    /*margin-left: 0;*/
}

.portfolio img {
    max-width: 100%;
    max-height: 100%;
}

.preloading {
    top: 35% !important;
}

.detail-icon,
.detail-icon:hover {
    margin-top: 5px;
    margin-left: 5px;
    width: 28px;
    height: 30px;
    line-height: 30px;
    background: #fff;
    -moz-border-radius: 500px;
    -webkit-border-radius: 500px;
    -o-border-radius: 500px;
    border-radius: 500px;
    padding-left: 2px;
    text-align: center;
    display: inline-block !important;
    font-size: 18px;
    color: #000;
}

.detail-icon:hover * {
    color: #000;
}


/* Noise Version Rules */

.noise #mainNav li.active {
    height: 140px;
}

.noise .slider-nav a.prevSlide {
    left: 1%;
}

.noise .slider-nav a.nextSlide {
    right: 1%;
}

.noise h1.borderLine .bg,
.noise h2.borderLine .bg,
.noise h3.borderLine .bg,
.noise h4.borderLine .bg,
.noise h5.borderLine .bg,
.noise h6.borderLine .bg {
    background: url(../img/body-bg.png) repeat left top;
}


/** IE 9 **/

.ie9 #mainContent .progress-con .progress,
.ie9 #mainContent .progress-con .progress .bar,
.ie9 #mainContent .btn,
.ie9 #mainContent .btn:hover {
    filter: none;
}

.lt-ie9 #mainContent .progress-con .progress,
.lt-ie9 #mainContent .progress-con .progress .bar {
    filter: none;
}

.ie9 .featuredWorks.hover-effect1 .featuredWork:hover .backCon {
    background: rgba(237, 95, 48, 0.8);
    opacity: 1;
}

#maincontent .filter a,
#maincontent .filter a:active,
#maincontent .filter .current a,
#maincontent .filter .current a:active,
.slider-nav a,
.slider-nav a:hover,
.slider-nav a:active {
    outline: none;
}

@media (max-width: 940px) {
    #mainContent .span3.featuredWork {
        max-width: 251px;
        max-height: 182px;
        float: none;
    }
    #mainContent .span4.featuredWork {
        max-width: 345px;
        max-height: 250px;
        float: none;
    }
    #mainContent .span4.featuredWork .header {
        padding-top: 16%;
    }
    #mainContent .span3.featuredWork .header {
        padding-top: 10%;
    }
}


/*** Some Responsive Overrides for Hover Effects ***/

@media (min-width: 768px) and (max-width: 940px) {
    /* Hover Effect 1 */
    #back-top {
        visibility: hidden;
    }
}

@media (max-width: 480px) {
    /* Hover Effect 1 */
    #back-top {
        visibility: hidden;
    }
}

.themes_settings {
    position: fixed;
    right: 0px;
    width: 267px;
    top: 40px;
    z-index: 9999;
    font-weight: normal;
}

.themes_settings a:link,
.themes_settings a:hover,
.themes_settings a:active {
    outline: none;
}

.themes_settings p {
    margin: 0;
    padding: 0;
}

.themes_settings .wrap {
    position: relative;
}

.trigger {
    position: absolute;
    top: -3px;
    left: 0px;
    background-image: url(../img/theme_settings/trigger.png);
    height: 46px;
    width: 44px;
    padding: 7px 0 7px 8px;
    outline: none;
}

.trigger a {
    display: block;
    height: 46px;
    border-radius: 5px 0px 0px 5px;
    outline: none;
}

.settings_body {
    background: #fff;
    border: 1px solid #dcdcdc;
    width: 212px;
    position: absolute;
    left: 52px;
    border-radius: 3px;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.05);
    min-height: 300px;
}

.sec_color,
.top_heading {
    color: #0382be;
}

.themes_settings .top_heading {
    text-shadow: 0px 2px #ddd;
    font-size: 23px;
    text-transform: uppercase;
    text-align: center;
    height: 48px;
    line-height: 53px;
    letter-spacing: 2px;
}

.themes_settings .sec_heading {
    color: #666;
    font-size: 21px;
    text-transform: uppercase;
    text-align: center;
    height: 48px;
    border-bottom: 1px solid #dcdcdc;
    border-top: 1px solid #dcdcdc;
    line-height: 53px;
    letter-spacing: 2px;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
    background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
}

.themes_settings p.selCssName {
    padding: 10px 20px;
    text-align: center;
    border-bottom: 1px solid #DDD;
}

.themes_settings p.subTitle {
    padding: 10px 20px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 0px;
}

.tot-colors {
    padding: 18px 16px 0px;
}

.tot-colors a,
.tot-colors a:visited,
.groupBg a,
.groupBg a:visited {
    width: 28px;
    height: 28px;
    border: 2px solid #dcdcdc;
    display: inline-block !important;
    margin: 0px 5px 5px;
    outline: none;
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -o-transition: all ease 1s;
    -ms-transition: all ease 1s;
    transition: all ease 1s;
}

.tot-colors a:hover,
.tot-colors a:active,
.groupBg a:hover,
.groupBg a:active {
    border: 2px solid #bbb;
    outline: none;
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -o-transition: all ease 1s;
    -ms-transition: all ease 1s;
    transition: all ease 1s;
}

.tot-colors a.active,
.tot-colors a.active:hover,
.tot-colors.active a:active,
.groupBg a.active,
.groupBg a.active:hover,
.groupBg a.active a:active {
    border: 2px solid #888;
    outline: none;
    -webkit-transition: all ease 2s;
    -moz-transition: all ease 2s;
    -o-transition: all ease 2s;
    -ms-transition: all ease 2s;
    transition: all ease 2s;
}

.tot-colors a.default {
    background: #ed5f30;
    background-color: #e66338;
    background-image: -moz-linear-gradient(top, #f07851, #d74413);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f07851), to(#d74413));
    background-image: -webkit-linear-gradient(top, #f07851, #d74413);
    background-image: -o-linear-gradient(top, #f07851, #d74413);
    background-image: linear-gradient(to bottom, #f07851, #d74413);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#fff07851', endColorstr='#ffd74413', GradientType=0);
}

.tot-colors a.blue-bell {
    background: #8d95c3;
    background-color: #8e96c3;
    background-image: -moz-linear-gradient(top, #a4abcf, #6c76b1);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#a4abcf), to(#6c76b1));
    background-image: -webkit-linear-gradient(top, #a4abcf, #6c76b1);
    background-image: -o-linear-gradient(top, #a4abcf, #6c76b1);
    background-image: linear-gradient(to bottom, #a4abcf, #6c76b1);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ffa4abcf', endColorstr='#ff6c76b1', GradientType=0);
}

.tot-colors a.blumine-blue {
    background: #1c4a72;
    background-color: #1c4b73;
    background-image: -moz-linear-gradient(top, #235d8f, #122f49);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#235d8f), to(#122f49));
    background-image: -webkit-linear-gradient(top, #235d8f, #122f49);
    background-image: -o-linear-gradient(top, #235d8f, #122f49);
    background-image: linear-gradient(to bottom, #235d8f, #122f49);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ff235d8f', endColorstr='#ff122f49', GradientType=0);
}

.tot-colors a.boston-blue {
    background: #3d82b1;
    background-color: #4382ac;
    background-image: -moz-linear-gradient(top, #4f94c2, #30668b);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4f94c2), to(#30668b));
    background-image: -webkit-linear-gradient(top, #4f94c2, #30668b);
    background-image: -o-linear-gradient(top, #4f94c2, #30668b);
    background-image: linear-gradient(to bottom, #4f94c2, #30668b);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ff4f94c2', endColorstr='#ff30668b', GradientType=0);
}

.tot-colors a.carmine-choco {
    background: #b14137;
    background-color: #ae453b;
    background-image: -moz-linear-gradient(top, #c65146, #8a332b);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#c65146), to(#8a332b));
    background-image: -webkit-linear-gradient(top, #c65146, #8a332b);
    background-image: -o-linear-gradient(top, #c65146, #8a332b);
    background-image: linear-gradient(to bottom, #c65146, #8a332b);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ffc65146', endColorstr='#ff8a332b', GradientType=0);
}

.tot-colors a.comet-blue {
    background: #555682;
    background-color: #555683;
    background-image: -moz-linear-gradient(top, #636498, #414263);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#636498), to(#414263));
    background-image: -webkit-linear-gradient(top, #636498, #414263);
    background-image: -o-linear-gradient(top, #636498, #414263);
    background-image: linear-gradient(to bottom, #636498, #414263);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ff636498', endColorstr='#ff414263', GradientType=0);
}

.tot-colors a.copper-brown {
    background: #b07838;
    background-color: #ad783c;
    background-image: -moz-linear-gradient(top, #c58a47, #895e2c);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#c58a47), to(#895e2c));
    background-image: -webkit-linear-gradient(top, #c58a47, #895e2c);
    background-image: -o-linear-gradient(top, #c58a47, #895e2c);
    background-image: linear-gradient(to bottom, #c58a47, #895e2c);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ffc58a47', endColorstr='#ff895e2c', GradientType=0);
}

.tot-colors a.crimson-red {
    background: #d61646;
    background-color: #cf1e4a;
    background-image: -moz-linear-gradient(top, #e92757, #a81137);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e92757), to(#a81137));
    background-image: -webkit-linear-gradient(top, #e92757, #a81137);
    background-image: -o-linear-gradient(top, #e92757, #a81137);
    background-image: linear-gradient(to bottom, #e92757, #a81137);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ffe92757', endColorstr='#ffa81137', GradientType=0);
}

.tot-colors a.deluge-voilet {
    background: #8062b1;
    background-color: #8267ad;
    background-image: -moz-linear-gradient(top, #937abd, #674a96);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#937abd), to(#674a96));
    background-image: -webkit-linear-gradient(top, #937abd, #674a96);
    background-image: -o-linear-gradient(top, #937abd, #674a96);
    background-image: linear-gradient(to bottom, #937abd, #674a96);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ff937abd', endColorstr='#ff674a96', GradientType=0);
}

.tot-colors a.flame-pea-orange {
    background: #e06338;
    background-color: #d96740;
    background-image: -moz-linear-gradient(top, #e57b57, #c64a1f);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e57b57), to(#c64a1f));
    background-image: -webkit-linear-gradient(top, #e57b57, #c64a1f);
    background-image: -o-linear-gradient(top, #e57b57, #c64a1f);
    background-image: linear-gradient(to bottom, #e57b57, #c64a1f);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ffe57b57', endColorstr='#ffc64a1f', GradientType=0);
}

.tot-colors a.forest-green {
    background: #397028;
    background-color: #397128;
    background-image: -moz-linear-gradient(top, #468a31, #264a1b);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#468a31), to(#264a1b));
    background-image: -webkit-linear-gradient(top, #468a31, #264a1b);
    background-image: -o-linear-gradient(top, #468a31, #264a1b);
    background-image: linear-gradient(to bottom, #468a31, #264a1b);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ff468a31', endColorstr='#ff264a1b', GradientType=0);
}

.tot-colors a.highland-green {
    background: #679367;
    background-color: #6b906b;
    background-image: -moz-linear-gradient(top, #7ba37b, #527552);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7ba37b), to(#527552));
    background-image: -webkit-linear-gradient(top, #7ba37b, #527552);
    background-image: -o-linear-gradient(top, #7ba37b, #527552);
    background-image: linear-gradient(to bottom, #7ba37b, #527552);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ff7ba37b', endColorstr='#ff527552', GradientType=0);
}

.tot-colors a.jelly-bean-magenta {
    background: #28778e;
    background-color: #28788f;
    background-image: -moz-linear-gradient(top, #308eaa, #1d5666);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#308eaa), to(#1d5666));
    background-image: -webkit-linear-gradient(top, #308eaa, #1d5666);
    background-image: -o-linear-gradient(top, #308eaa, #1d5666);
    background-image: linear-gradient(to bottom, #308eaa, #1d5666);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ff308eaa', endColorstr='#ff1d5666', GradientType=0);
}

.tot-colors a.marino-blue {
    background: #426195;
    background-color: #426196;
    background-image: -moz-linear-gradient(top, #4d71ae, #324a72);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d71ae), to(#324a72));
    background-image: -webkit-linear-gradient(top, #4d71ae, #324a72);
    background-image: -o-linear-gradient(top, #4d71ae, #324a72);
    background-image: linear-gradient(to bottom, #4d71ae, #324a72);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ff4d71ae', endColorstr='#ff324a72', GradientType=0);
}

.tot-colors a.persian-red {
    background: #cc3333;
    background-color: #c04040;
    background-image: -moz-linear-gradient(top, #d35050, #a32929);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d35050), to(#a32929));
    background-image: -webkit-linear-gradient(top, #d35050, #a32929);
    background-image: -o-linear-gradient(top, #d35050, #a32929);
    background-image: linear-gradient(to bottom, #d35050, #a32929);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ffd35050', endColorstr='#ffa32929', GradientType=0);
}

.tot-colors a.surfie-green {
    background: #118d78;
    background-color: #118e79;
    background-image: -moz-linear-gradient(top, #15ad93, #0c5f51);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#15ad93), to(#0c5f51));
    background-image: -webkit-linear-gradient(top, #15ad93, #0c5f51);
    background-image: -o-linear-gradient(top, #15ad93, #0c5f51);
    background-image: linear-gradient(to bottom, #15ad93, #0c5f51);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ff15ad93', endColorstr='#ff0c5f51', GradientType=0);
}

.tot-colors a.tapestry-pink {
    background: #b15596;
    background-color: #ab5c94;
    background-image: -moz-linear-gradient(top, #bc6da5, #91427a);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bc6da5), to(#91427a));
    background-image: -webkit-linear-gradient(top, #bc6da5, #91427a);
    background-image: -o-linear-gradient(top, #bc6da5, #91427a);
    background-image: linear-gradient(to bottom, #bc6da5, #91427a);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ffbc6da5', endColorstr='#ff91427a', GradientType=0);
}

.tot-colors a.viola {
    background: #cf87c1;
    background-color: #cf88c1;
    background-image: -moz-linear-gradient(top, #d9a1ce, #c063ae);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d9a1ce), to(#c063ae));
    background-image: -webkit-linear-gradient(top, #d9a1ce, #c063ae);
    background-image: -o-linear-gradient(top, #d9a1ce, #c063ae);
    background-image: linear-gradient(to bottom, #d9a1ce, #c063ae);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ffd9a1ce', endColorstr='#ffc063ae', GradientType=0);
}

.tot-colors a.viridian-green {
    background: #3b8f64;
    background-color: #3b9065;
    background-image: -moz-linear-gradient(top, #45a876, #2c6b4b);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#45a876), to(#2c6b4b));
    background-image: -webkit-linear-gradient(top, #45a876, #2c6b4b);
    background-image: -o-linear-gradient(top, #45a876, #2c6b4b);
    background-image: linear-gradient(to bottom, #45a876, #2c6b4b);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ff45a876', endColorstr='#ff2c6b4b', GradientType=0);
}

.tot-colors a.well-read-choco {
    background: #b1353c;
    background-color: #ae393f;
    background-image: -moz-linear-gradient(top, #c7434a, #8a292f);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#c7434a), to(#8a292f));
    background-image: -webkit-linear-gradient(top, #c7434a, #8a292f);
    background-image: -o-linear-gradient(top, #c7434a, #8a292f);
    background-image: linear-gradient(to bottom, #c7434a, #8a292f);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ffc7434a', endColorstr='#ff8a292f', GradientType=0);
}

.tot-colors a.lavender-purple {
    background: #9d8cba;
    background-color: #9e8dba;
    background-image: -moz-linear-gradient(top, #b0a2c7, #826ca7);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0a2c7), to(#826ca7));
    background-image: -webkit-linear-gradient(top, #b0a2c7, #826ca7);
    background-image: -o-linear-gradient(top, #b0a2c7, #826ca7);
    background-image: linear-gradient(to bottom, #b0a2c7, #826ca7);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ffb0a2c7', endColorstr='#ff826ca7', GradientType=0);
}

.tot-colors a.havelock-blue {
    background: #468ace;
    background-color: #4e8bc7;
    background-image: -moz-linear-gradient(top, #629cd5, #2f70b2);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#629cd5), to(#2f70b2));
    background-image: -webkit-linear-gradient(top, #629cd5, #2f70b2);
    background-image: -o-linear-gradient(top, #629cd5, #2f70b2);
    background-image: linear-gradient(to bottom, #629cd5, #2f70b2);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#ff629cd5', endColorstr='#ff2f70b2', GradientType=0);
}

.bgTheme .groupBg a.white {
    background: #fff;
    width: 40% !important;
    margin-left: 10px;
    margin-right: 0px;
}

.bgTheme .groupBg a.noise {
    background: url(../img/body-bg.png) repeat left top;
    width: 40% !important;
    margin-left: 8px;
    margin-right: 8px;
}

.clearfix {
    *zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}

.clearfix:after {
    clear: both;
}


/* Selection Colors */

::-moz-selection {
    text-shadow: 0px 1px 1px #ffffff;
    color: #222222;
}

::selection {
    text-shadow: 0px 1px 1px #ffffff;
    color: #222222;
}

#pageFooterCon ::-moz-selection {
    text-shadow: none;
    color: #ffffff;
}

#pageFooterCon ::selection {
    text-shadow: none;
    color: #ffffff;
}