﻿

@import url(http://fonts.googleapis.com/css?family=Lato:300|PT+Serif:400);

body {
    margin: 0px;
    /*padding: 10px;*/
    padding:0px;
    display:block;
}

.slider {
    display:block;
    position:relative;
    z-index:2;
    border: 1px solid #ccc;
    font-size: 16px;
    height:530px;
    /*max-width: 1200px;*/
    /*height:80%;*/
    /*line-height: 1.45;*/
    margin: 0px auto 0px auto;
    max-width: 1500px;
    overflow:hidden;
}

    .slider .slider_data {
        display: none;
    }

    .slider .slider_stage_large {
        height: inherit;
        overflow: hidden;
        position: relative;
    }

    .slider .slider_container_1,
    .slider .slider_container_2 {
        height: inherit;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
    }

    .slider .slider_container_1 {
        z-index: 101;
    }

    .slider .slider_container_2 {
        z-index: 102;
    }

    .slider .slider_panel {
        height: inherit;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        text-align: center;
        background-repeat: no-repeat;
        background-position: center 0px;
        background-size: cover;
    }

        .slider .slider_panel .panel_caption {
            width: 68%;
            position: absolute;
            bottom: 35px;
            left: 0px;
            margin-left: 16%;
            font-family: 'Lato', sans-serif;
            padding-bottom: 15px;
            /*border: 1px solid #fff;*/ /*Marco blanco para delimitar texto sobre el slider*/
        }

            .slider .slider_panel .panel_caption h3 {
                font-family: 'PT Serif', serif;
                margin: 0px 0px 0px 0px;
                font-weight: 400;
                font-size: 2.7em;
                color: #fff;
            }

            .slider .slider_panel .panel_caption p {
                margin: 0px 50px 15px 50px;
                color: #fff;
                font-size: 1.3em;
                color: rgba(255,255,255,.75);
            }

            .slider .slider_panel .panel_caption a.cta {
                display: inline-block;
                background-color: rgba(255,255,255,0);
                text-transform: uppercase;
                color: #fff;
                font-size: .9em;
                padding: 6px 20px;
                transition: background-color .7s, border .7s;
                border: 1px solid rgba(255,255,255,.5);
                border-radius: 5px;
                text-decoration: none;
            }

            .slider .slider_panel .panel_caption a:hover {                
                background-color: rgba(255,255,255,.6);                
                color: #000;                                                
                border-color: rgba(255,255,255,0);
            }

    .slider .overlay {
        position:absolute; left:0px; top:0px;
        width:100%; height:100%;
        background-image: linear-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,.7) 70%);
        background-size:100%;
    }

    .slider .slider_nav {
        position: absolute; bottom: 10px; left: 0px;
        text-align: center; width: 100%;
        z-index:103;
    }

        .slider .slider_nav div {
            display: inline-block;
            width: 10px; height: 10px;
            border: 2px solid rgba(255,255,255,.5);
            border-radius: 50px;
            margin: 0px 8px 0px 8px;
            cursor: pointer;
            transition: background-color .4s, border .4s;
        }

            .slider .slider_nav div:hover {
                border-color:#fff; background-color: rgba(255,255,255,.2);
            }

            .slider .slider_nav div.selected {
                background-color: #fff;
            }

    .slider .btn {
        width:39px; height: 39px;
        background: rgba(255,255,255,.2) no-repeat;
        background-size: 50px 30px;
        position: absolute; top: 192px;
        cursor: pointer;
        border-radius: 50%; border: 2px solid rgba(255,255,255,.5);
        transition: background-color .4s, border .4s;
    }

        .slider .btn:hover {
            border-color: #fff; background-color: rgba(0,0,0,.6);
        }
        .slider .btn.prev {
            left: 20px; z-index: 104;
            background-image:url(../Img/Arrow_left_slider-2.svg); background-position: -8px 4px;
        }
        .slider .btn.next {
            right: 20px; z-index: 105;
            background-image:url(../Img/Arrow_right_slider-2.svg); background-position: -3px 4px;
        }

    .slider .slider_stage_small {
        height: inherit; position: relative; overflow: hidden;
    }

        .slider .slider_stage_small .slider_panel {
            width: 100%; height:inherit; position:absolute; top:0; left:0px;
        }

@media screen and (max-width:800px) {
    .slider {
        font-size:14px; height:325px; background-color:#444;
    }
        .slider .btn {
            width: 29px; height:29px;
            background-size: 33px 20px; top: 140px;
        }
            .slider .btn.prev {
                background-position: -4px 4px;
            }
            .slider .btn.next {
                background-position:-1px 4px;
            }
        .slider .slider_panel .panel_caption {
            width: 80%; margin-left: 10%;
        }
            .slider .slider_panel .panel_caption p {
                display:none;
            }
            .slider .slider_panel .panel_caption a.cta {
                margin-top:10px; padding: 4px 20px;
            }
        .slider .slider_nav div {
            width:13px; height:13px;
            margin: 0px 12px 0px 12px;
        }
}

@media screen and (max-width: 600px) {
    .slider {
        height:250px;        
    }
        .slider .overlay {
            display:none;
        }
        .slider .slider_panel .panel_caption {
            margin:0px; padding: 10px 10px 20px 10px;
            width:100%; bottom:0px; background-color: rgba(0,0,0,.65);
        }
            .slider .slider_panel .panel_caption a.cta {
                padding: 8px 30px;
            }
}