html, 
body{
    box-sizing: border-box;    
    font-style: normal;
    font-weight: normal;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: 'actobook';
    src: url('../fonts/acto-book-webfont.woff2') format('woff2'),
         url('../fonts/acto-book-webfont.woff') format('woff');
}
@font-face {
    font-family: 'actobold';
    src: url('../fonts/acto-bold-webfont.woff2') format('woff2'),
         url('../fonts/acto-bold-webfont.woff') format('woff');
}
@font-face {
    font-family: 'actosemibold';
    src: url('../fonts/acto-semibold-webfont.woff2') format('woff2'),
         url('../fonts/acto-semibold-webfont.woff') format('woff');
}

@font-face {
    font-family: 'playfair_displayblack';
    src: url('../fonts/playfairdisplay-black-webfont.woff2') format('woff2'),
         url('../fonts/playfairdisplay-black-webfont.woff') format('woff');
}

@font-face {
    font-family: 'head_linerno';
    src: url('../fonts/headlinerno45.woff2') format('woff2'),
         url('../fonts/headlinerno45.woff') format('woff');
}

.img-fluid {
   width: 100%;
   height: auto
}
        .header-comercio {
            background: #b5c63c;
            padding: 12px 5px 5px 5px;
            position: relative;
            z-index: 10000000000;
        }
        .ctn-header-comercio {
            margin: 0 auto;
            max-width: 990px;
            text-align: left
            }
        .ctn-header-comercio a {
            display: inline-block;
            text-indent: -9999px;
            }
        a.logo-comercio {
            background: url(../img/logo-depor.png) no-repeat 0 0;
            background-size: 70%;
            height: 30px;
            width: 110px;
        }
        a.logo-comercio-especiales {
            text-indent: inherit;
            }
        a.logo-comercio-especiales img {
            vertical-align: top;
            }
        #social {
            float: right;
            margin-right: 0
            }
        #social ul {
            display: inline-block;
            margin: -3px auto 0;
            padding: 0;
            vertical-align: top
            }
        #social ul li {
            display: inline-block;
            margin: 0 1px;
            vertical-align: top
            }
        #social ul li a {
            height: 32px;
            width: 32px
            }
        #social ul li a.facebook {
            background: url(../img/sprite-redes.png) no-repeat -6px -4px;
            background-size: 130px; border-radius: 20px;
            }
        #social ul li a.wst {
            background: url(../img/sprite-redes.png) no-repeat -92px -4px;
            background-size: 130px; border-radius: 20px;
            display: none
            }
        #social ul li a.tw {
            background: url(../img/sprite-redes.png) no-repeat -50px -4px;
            background-size: 130px; border-radius: 20px;
            }
        #social ul li:hover {
            opacity: 0.5
        }

.clear{
    clear: both;
}                

.main{
    margin: 0 auto;
    max-width: 1170px;
    padding: 0 10px;
}

span.autor {
    display: block;
    font: 1em/1.2 "actobold";
    text-align: center;
}
    h1 {
        font: 5.1em/1.2 'head_linerno';
        margin: 0px auto;
        text-align: center;
        /* max-width: 760px; */
        color: #253c5b;
    }
    h2{
        font: 1.8em/1.1 'actobold';
        margin: 0px auto;
        text-align: center;
    }
    h3{
        font: 1em/1.2 'actobold';
        margin: 5px auto;
        text-align: left;
    }
    .ctn-foto{
        margin: 0 auto;
        max-width: 955px;
        position: relative;
    }
    .ctn-down{
        margin: 0 auto;
        max-width: 550px;
        position: relative;
    }

    .ctn-movil{
        margin: 0 auto;
        max-width: 955px;
        position: relative;
    }
        ul.btn-fiscales{
            padding: 0;
            position: relative;
            position: absolute;
            text-align: center;
            margin: 0;
            width: 100%;
            height: 100%;
        }
            ul.btn-fiscales li{
                /*border: 1px #4c6b76; 
                border-style: dotted;*/
                /*border-radius: 50px;*/
                cursor: pointer;
                display: inline-table;
                font: 1.9em/1 'actobold';
                /* margin: 2px; */
                padding: 20px;
                text-transform: uppercase;
                vertical-align: top;
                /* background-color: #C7A45B; */
                color: black;
                /* text-shadow: 1px 1px 1px black; */
            }
                ul.btn-fiscales li:hover{
                    /*background: #000;*/
                    /*color: #fff;*/
                }
                .active{
                    /*background: #000;
                    color: #fff;*/
                }

            ul.btn-fiscales li.ball1{
                background-image: url("../img/balon-liga.png"); !important;
                background-size: cover;
            }

            ul.btn-fiscales li.ball2{
                background-image: url("../img/balon-lib.png") !important;
                background-size: cover;
            }

            ul.btn-fiscales li.arquero{
                background-image: url("../img/gallese.gif") !important;
                background-size: cover;
                padding: 170px 122px;
            }

                .arquero2{
                    max-width: 30%;
                    position: relative;
                    top: 35%;
                    z-index: 0;
                }   
        
            ul.btn-fiscales li#gallese{
                position: absolute;
                top: 36%;
                left: 37%;                    
                z-index: 0;
            }

            ul.btn-fiscales li#fiscal-1{
                position: absolute;
                top: 30%;
                left: 15%;
                z-index: 1;
            }
             ul.btn-fiscales li#fiscal-2{
                position: absolute;
                top: 65%;
                left: 22%; 
                 z-index: 1;

            }
            ul.btn-fiscales li#fiscal-3{
                position: absolute;
                top: 35%;
                left: 29%;
                z-index: 1;
            }
            ul.btn-fiscales li#fiscal-4{
                position: absolute;
                top: 56%;
                left: 34%;  
                z-index: 1;
            }
            ul.btn-fiscales li#fiscal-5{
                position: absolute;
                top: 29%;
                left: 46%; 
                z-index: 1;  
            }
            ul.btn-fiscales li#fiscal-6{
                position: absolute;
                top: 31%;
                left: 60%; 
                z-index: 1;
            }

            ul.btn-fiscales li#fiscal-7{
                position: absolute;
                top: 75%;
                left: 62%;
                z-index: 1;             
            }

            ul.btn-fiscales li#fiscal-8{
                position: absolute;
                top: 53%;
                left: 70%; 
                z-index: 1;
            }

            ul.btn-fiscales li#fiscal-9{
                position: absolute;
                top: 70%;
                left: 72%;                
                z-index: 1;
            }

            ul.btn-fiscales li#fiscal-10{
                position: absolute;
                top: 56%;
                left: 78%; 
                z-index: 1;
            }

            ul.btn-fiscales li#fiscal-11{
                position: absolute;
                top: 75%;
                left: 79%;                    
                z-index: 1; 
            }

        .box-info{
            /*background: rgba(255, 255, 255, 0.90); */
            box-shadow: 7px 7px 20px #565f6166;
            background: #fff;
            /* border-radius: 5px; */
            height: 578px;
            max-width: 640px;
            overflow-y: scroll;
            padding: 0px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 7;
        }    
            .box-info h3{
                font: 1.1em/1.2 'actobold';
                margin: 5px auto;
            }
            .box-info p{
                font: 1em/1.2 'actobook';
                margin: 5px auto;
            }
                .box-info p span{
                    font-family: 'actosemibold';
                }

            .box{
                display: inline-block;
                vertical-align: top;
                width: 48.9%;
            }

            .color-red{
                color: red;
            }

            p {
                font: 1.1em/1.2 'actobook';
                margin: 50px auto;
                padding: 7px;
            }

        .box-fiscal{
            position: absolute;
        }
        .box-fiscal-1{
            margin-top: 350px;
            width: 100%;
        }
        .box-fiscal-2{
            margin-top: 350px;
            width: 100%;
        }
        .box-fiscal-3{
            margin-top: 350px;
            width: 100%;
        }
        .box-fiscal-4{
            margin-top: 350px;
            width: 100%;
        }
        .box-fiscal-4{
            margin-top: 350px;
            width: 100%;
        }
        .box-fiscal-5{
            margin-top: 350px;
            width: 100%;
        }
        .box-fiscal-6{
            margin-top: 350px;
            width: 100%;
        }
        .box-fiscal-7{
            margin-top: 350px;
            width: 100%;
        }
        .box-fiscal-8{
            margin-top: 350px;
            width: 100%;
        }
        .box-fiscal-9{
            margin-top: 350px;
            width: 100%;
        }
        .box-fiscal-10{
            margin-top: 350px;
            width: 100%;
        }
        .box-fiscal-11{
            margin-top: 350px;
            width: 100%;
        }

        .cerrar{
            background: #000;
            border-radius: 30px;
            color: #fff;
            cursor: pointer;
            font: 1.5em/1.1 'actobold';
            height: 30px;
            position: absolute;
            right: 10px;
            top: 15px;
            text-align: center;
            width: 30px;
        }
        .info-fiscal-3{
            height: 215px;
        }


@media only screen and (max-width: 640px){

    #social ul li a.wst{
        display: block;
    }
    h1 {
        font: 3.7em/0.9 'head_linerno';
    }
        .box-info{
            height: auto;
            padding: 5px 10px;
            position: relative;
        }
        h3{
            /*background: #fff;*/
            font-size: 1.3em;
            text-align: center;
        }
        .box-info p{ line-height: 1.3; }
        p {    margin: 15px auto;  padding: 5px 20px; }
    .btn-desliza{
        display: block;
        margin: 15px auto;
        max-width: 216px;
    }
    .box-fiscal-1, .box-fiscal-2, .box-fiscal-3, .box-fiscal-4, .box-fiscal-5, .box-fiscal-6
    , .box-fiscal-7, .box-fiscal-8, .box-fiscal-9, .box-fiscal-10, .box-fiscal-11{
        margin-top: 119px;
        width: 100%;
    }
    .arquero2{ z-index: 2; }  
    h2 {   padding: 0px 22px; font: 1.1em/1.1 'actobold'; }
    ul.btn-fiscales li#fiscal-4 {  z-index: 3;   }
    ul.btn-fiscales li#fiscal-5 {  top: 26%;   }
    ul.btn-fiscales li {  padding: 17px;   }
}

@media only screen and (max-width: 1500px){
}

@media only screen and (max-width: 1200px){
}

@media only screen and (max-width: 1150px){
}

@media only screen and (max-width: 1000px){
}

@media only screen and (max-width: 850px){
}

@media only screen and (max-width: 700px) {
    #social ul li a.wst {
        display: block;
    }
}