/*@import url(https://fonts.googleapis.com/css?family=Quattrocento:400,700);*/

html {/*background-color: #000;*/}
body a {
    text-decoration: none;
}
body {
    color: #222222;
    /*background-color: #333;*/
    /*background: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/classy_fabric.png");*/
    font-family: verdana;
}

@media screen and (max-width: 48em) {
.pure-g{
    letter-sacing: 0.1rem !important;

}
}

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

body .pure-g {
    letter-spacing: normal; 
}
h1 {font-weight: bold;}
h1 {color:#20B9C0; text-shadow: 1px 1px 0 #000; padding: 20px 0; margin:0; border-bottom: solid 1px #3B3A3A;background-color: #0B2538; text-align: center; }
h2 {color:#2A73A8;}
a {color: #2A73AF;}
a:hover {color: #0CB9C0;}
a.btn {border: solid 1px; border-radius: 5px; padding: 8px 15px; margin: 5px 0 20px; text-decoration: none;}

/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
.menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}


.content { max-width: 51200px; align: center;}

/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
    position: relative;
    padding-left: 0;
}

/* -- Responsive Styles (Media Queries) ------------------------------------- */

/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {

    .header,
    .content {
        padding-left: 2em;
        padding-right: 2em;
    }

    #layout {
        padding-left: 150px; /* left col width "#menu" */
        left: 0;
    }
    #menu {
        left: 150px;
    }

    .menu-link {
        position: fixed;
        left: 150px;
        display: none;
    }

    #layout.active .menu-link {
        left: 150px;
    }
}

@media (max-width: 48em) {
    /* Only apply this when the window is small. Otherwise, the following
    case results in extra padding on the left:
        * Make the window small.
        * Tap the menu to trigger the active state.
        * Make the window large again.
    */
    #layout.active {
        position: relative;
        left: 150px;
    }
    .header,
    .content {
        padding-left: 1em;
        padding-right: 1em;
    }
    body form, .pure-form-aligned .pure-control-group label  {text-align: left;}
    form input, form textarea {
        width: 100%;
    }
    form { margin: 0 !important; }
}
/*.topnav {z-index: 10; position: relative; margin-bottom: -45px;}*/
.topnav {background-color: #2a8bd1}
.topnav a {background-color: rgba(0,0,0,0.1); }
.topnav a {
    display: block;
    text-align: center;
    line-height: 44px;
    font-size: 1.2em;
    color: #FFF;
    text-decoration: none;
}

.topnav a:hover {background-color: rgba(0,0,0,0.5);}

@media screen and (max-width:767px) {
.topnav {padding-left: 52px;}
}


#owl-carousel .item img{
    display: block;
    width: 100%;
    height: auto;
}

.modular-row .tile { text-align: center; }
.modular-row .tile img { padding: 5px; border:solid 10px #CCC; box-sizing: border-box; }
.modular-row .tile img {max-width: 98%;}


.callout {text-align: center;}

.pure-menu-link i { margin-right:10px; }

.content .tiles {
    text-align: center;
}
.content .tiles > div {margin: 0 auto;}
.content .tile {
    padding:30px;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}
.content .tile:hover {background-color: /*rgba(42, 115, 168, 0.5);*/ #E5E5E5; }
.content .tile { text-align: center; margin: 0 5px 10px; line-height: 1rem; letter-spacing: normal; }
.content .tile img { padding: 10px; border:solid 2px rgba(255, 255, 255, 0.15); box-sizing: border-box; }
.content .tile img { max-width: 98%; }
.content .tile .tile_links a { margin: 6px !important; }


#main {  /*background-image: url('http://uniformesdefutbol.us/templates/rt_ionosphere/images/overlays/backgrounds/textile.png'*/; /*background-color: #111;*/);
}

.modular #main {/*background-color: #000; */ background-image: none;}

.liga, .anuncios {
    text-align: center; 
    /*background-image: url('http://uniformesdefutbol.us/templates/rt_ionosphere/images/overlays/backgrounds/textile.png');*/
    /*background-color: rgba(0,0,0,0.6);*/
}
.liga img, .list img {margin-top:20px; width:90%; max-width: 500px; padding:20px; border-radius: 8px; box-shadow: 2px 10px 100px #BBB; }
.liga .text {text-align: left; padding: 25px;}
.liga h2 {text-align: center;}

.anuncios { background-color: rgba(11, 37, 56, 0.5); padding-top: 15px;}
.anuncios img { padding: 0px; width:90%; box-shadow: none; max-width: 188px; margin: 10px;}


.list_item {margin: 30px 0 0;}
.list .title {text-align: center;}
.list_item h2 { color:#2A73A8; }


.list_item {
    padding-bottom: 40px;
    border-bottom: dotted 1px #444;
}


.counter {
    counter-reset: my-counter;
}
.counter ul {list-style-type: none;}
.counter li {
    position: relative;
    font: bold 20px Georgia;
    padding: 4px 0 10px 0;
    line-height: 30px;
}
.counter li:before {
    content: counter(my-counter);
    counter-increment: my-counter;
    position: absolute;
    left: 0;
    top: 0;
    font: bold 40px/1 Sans-Serif;
    color:#2A73A8;
}
.counter li {
    margin: 0 0 20px 0;
}   
.counter li {
    padding-left: 50px;
}
    
.menu-spacer {width:40px; display: inline-block;}






.floatleft {float: left; margin-right: 30px;}
.clearfix {clear: both; float: none; display: block; width:100%;}

/* pure-hidden-xs */
@media screen and (max-width:567px) {
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-xs{display:none}

}
/* pure-hidden-sm */
@media screen and (min-width:568px) and (max-width:767px) {
    .pure-visible-xs{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-sm{display:none}
}
/* pure-hidden-md */
@media screen and (min-width:768px) and (max-width:1023px) {
    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-md{display:none}
}
/* pure-hidden-lg */
@media screen and (min-width:1024px) and (max-width:1279px) {
    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-lg{display:none}
}
/* pure-hidden-xl */
@media screen and (min-width:1280px) {
    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-hidden-xl{display:none}
}


.button-success,
.button-error,
.button-warning,
.button-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.button-success {
    background: rgb(28, 184, 65); /* this is a green */
}

.button-error {
    background: rgb(202, 60, 60); /* this is a maroon */
}

.button-warning {
    background: rgb(223, 117, 20); /* this is an orange */
}

.button-secondary {
    background: rgb(66, 184, 221); /* this is a light blue */
}

.button-xsmall {
    font-size: 70%;
}

.button-small {
    font-size: 85%;
}

.button-large {
    font-size: 110%;
}

.button-xlarge {
    font-size: 125%;
}


#layout.active #main {

  filter: gray; /* IE6-9 */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */

}

#layout.active #main {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

#layout.active #main #overlay {position:absolute; width:100%; height: 100%; display: block; background-color: rgba(0, 0, 0, 0.5); z-index: 1;}

#overlay { display:none;}

a.pure-button:hover {color:#CCF;} 

.modular-row .owl-controls {margin-top: -25px;}
#main .features, #main .content {
padding: 25px 30px 40px; /*background-color: #000*/ background-color: #E5E5E5;


}

/*.content {margin-top: -25px;}*/
form {margin: 10px 40px;}
form input, form textarea {
    color: #006892;
    font-weight: bold;
}
.alert {
    background-color: #FFE8E8;
    padding: 20px;
    border: solid 1px;
    color: #000;
}
body .owl-theme .owl-controls .owl-page span { background-color:#000; opacity:0.9;}
body .owl-theme .owl-controls .owl-page.active span { background-color:#FFF; opacity:0.9;}

div.link-comprar {margin-bottom:30px; text-align: center;}
.link-comprar .pure-button {margin:4px;}

.modular #main .content {/*background-color: #000;*/ background-image: none; /*border: solid 1px #222; border-radius: 10px;*/ /*margin:0 30px;*/ padding: 20px 40px;}
.copyright { background-color: #000; color: gray; font-size: 0.8rem; padding: 20px; text-align: center; }

form label { display: inline-block; max-width: 10rem; width: 10vw; min-width: 8rem; margin-top: 0.5rem;}
form .pure-control-group { margin: 0.5rem; }
form input { padding: 0.5rem; }
form button { margin: 0.5rem; }
/*form input {width: 350px;}
form textarea {width: 364px;}*/
/*form .g-recaptcha { margin-left: 11rem; }*/
@media screen and (max-width:567px) {
    form .g-recaptcha { margin-left: 1rem; }
}

body .landing { margin: 0; }
body .landing-content { position: relative;}
body .landing-content p { margin: 0; }
body .landing-content img { width: 100%; }

@media screen and (max-width:567px) {
    .res-mobil { display: block; }
    .res-pantalla { display: none; }
}

@media screen and (min-width:568px) {
    .res-mobil { display: none; }
    .res-pantalla { display: block; }
}

body .landing-content { 
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #001e42;
    
}

body.bodylanding .topnav { display: none; }

body .landing h2 {
    text-align: center;
    margin: 0 auto;
    padding: 0.5rem;
    color:#DDD;
}

body p.linktofe {
    text-align: center;
    /*position: absolute;
    z-index: 100;*/
    width: 100%;
    padding: 1rem 0;
    /*margin-top: 2rem;*/
    background-color: rgba(150,200,200,0.5);
}
body p.linktofe a {
    width: 250px;
    background-color: #b7091c;
    margin: 0 auto;
    display: block;
    padding: 1rem;
    border-radius: 10px;
    color: #FFF;
    text-decoration: none;

}
@media screen and (min-width: 48em){
    .landing .banner {
        padding-bottom: 8rem; 
    }
}


.landing .llamar {
    padding: 5rem 1rem;
    background-color: rgb(20, 170, 179);
    text-align: center;
}

.landing .llamar .contenido {
    max-width: 40rem;
    text-align: left;
}

.landing .llamar h2 {
    margin-bottom: 1.1rem;
}

.landing .llamar i {
    float: left;
    margin: 1rem 1.5rem;
    color: #014c74;
}
.landing .llamar .desc, .landing .contacto .desc {
    min-height: 5rem;
}
.landing .llamar a {
    /*margin: 1.5rem;*/
    /*display: block;*/
    max-width: 20rem;
}


.landing .contacto {
    padding: 3rem 1rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.landing .contacto h2 {
    color: #555;
}
.landing .contacto .desc {
    text-align: center;
}
.landing .contacto label {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #888;
    text-align: left;
    margin-top: 1rem;
}
.landing .contacto input, .landing .contacto textarea {
    max-width: 67%;
    padding: 0.5rem 1rem;
    margin-left: 10%;

}
.landing .contacto textarea {
    height: 5rem;
}
.landing .contacto label {
    color: #999;
    padding-left: 10%;
    display: block;
}

.landing .contacto .buttons {text-align: center;}


@media screen and (min-width: 48em){
    .landing .llamar p {
    }

}

@media screen and (min-width: 48em){
    .landing .logo{
        height: 220px;
    }
    .landing .title {
        margin-top: 4rem
    }    
    .landing .paquete {
        height: 300px;
        margin-top: 4rem;
        margin-bottom: 1rem;
    }
    .landing p.linktofe {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .landing h2 {
        font-size: 2.5rem;
        color: #DDD;
    }
}

@media screen and (min-width: 80em) {
    .landing .logo{
        display:none;
    }
}




.pure-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pure-menu-heading, .pure-menu-link {
    display: block;
    text-decoration: none;
    white-space: nowrap;
}

.pure-button {
    padding: .5em 1em;
}