@media only screen and (min-width: 900px){
    *, *:before, *:after{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
    #dia ul{list-style-type:none;}
    input[type="radio"]{position:absolute;left:0;display:block;width:40px;height:75px;border:0;outline:none;cursor:pointer;opacity:0;z-index:9;}
    input[value="one"]{top:0;}
    input[value="two"]{top:75px;}
    input[value="three"]{top:150px;}
    input[value="four"]{top:225px;}
    input[type="radio"] + label{position:absolute;left:0;width:40px;height:75px;background:#444;z-index:7;-webkit-transition:left .1s, width .1s;-moz-transition:left .1s, width .1s;-ms-transition:left .1s, width .1s;-o-transition:left .1s, width .1s;transition:left .1s, width .1s;box-shadow:0 2px 5px rgba(0, 0, 0, .26);}
    input[value="one"] + label{top:0;}
    input[value="two"] + label{top:75px;}
    input[value="three"] + label{top:150px;}
    input[value="four"] + label{top:225px;}
    [class*="label"]:before{position:absolute;}
    label[class*="label"]:before{top:25px;left:15px;font-size:1.5rem;color:white;}
    a[class*="label"]:before{top:3px;left:3px;font-size:1.5rem;color:#444;}
    a:hover[class*="label"]:before{color:#4CAF50;}
    figure, figure img, figcaption{position:absolute;top:0;right: 0; }
    figure{bottom:0;left:0;width:100%;height:300px;display:block;overflow:hidden;}
    figure img{bottom:0;left:0;display:block;width:100%;height:450px;object-fit:none;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s;}
    h4{display:inline-block;padding:3px 15px;background:#4CAF50;color:white;font-weight:300;font-size:35px;box-shadow:0 2px 5px rgba(0, 0, 0, .1);}
    figcaption nav ul{display:inline-block;padding:3px 15px;background:white;}
    figcaption nav ul li{display:inline-block;margin-left:5px;}
    figcaption nav ul li a{position:relative;display:block;width:30px;height:30px;text-decoration:none;color:white;}
    figcaption p{display:inline-block;padding:5px 15px;background:white;font-weight:300;color:#444;}
    input[type="radio"]:checked + label{left:-17px;width:75px;background:#4CAF50;}
    input[type="radio"]:checked + label:before{font-size:2.5rem;top:15px;left:28px;}
    input[type="radio"]:checked ~ figure img{-webkit-transform:translatex(0px);-moz-transform:translatex(0px);-ms-transform:translatex(0px);-o-transform:translatex(0px);transform:translatex(0px);}
    input[type="radio"]:checked ~ figure figcaption{-webkit-transform:translateX(0px);-moz-transform:translateX(0px);-ms-transform:translateX(0px);-o-transform:translateX(0px);transform:translateX(0px);z-index:8;}
    .label{position:relative;color:#fff;font-size:20px;text-align:center;padding-top:27px;}
}

@media only screen and (max-width: 899px){
    *, *:before, *:after{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
    #dia ul{list-style-type:none;}
    input[type="radio"]{position:absolute;left:0;display:block;width:40px;height:75px;border:0;outline:none;cursor:pointer;opacity:0;z-index:9;}
    input[value="one"]{top:0;}
    input[value="two"]{top:75px;}
    input[value="three"]{top:150px;}
    input[value="four"]{top:225px;}
    input[type="radio"] + label{position:absolute;left:0;width:40px;height:75px;background:#444;z-index:7;-webkit-transition:left .1s, width .1s;-moz-transition:left .1s, width .1s;-ms-transition:left .1s, width .1s;-o-transition:left .1s, width .1s;transition:left .1s, width .1s;box-shadow:0 2px 5px rgba(0, 0, 0, .26);}
    input[value="one"] + label{top:0;}
    input[value="two"] + label{top:75px;}
    input[value="three"] + label{top:150px;}
    input[value="four"] + label{top:225px;}
    [class*="label"]:before{position:absolute;}
    label[class*="label"]:before{top:25px;left:15px;font-size:1.5rem;color:white;}
    a[class*="label"]:before{top:3px;left:3px;font-size:1.5rem;color:#444;}
    a:hover[class*="label"]:before{color:#4CAF50;}
    figure, figure img, figcaption{position:absolute;top:0;right: 0; }
    figure{bottom:0;left:0;width:100%;height:300px;display:block;overflow:hidden;}
    figure img{bottom:0;left:0;display:block;width:100%;height:450px;object-fit:none;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s;}
    h4{display:inline-block;padding:3px 15px;background:#4CAF50;color:white;font-weight:300;font-size:20px;box-shadow:0 2px 5px rgba(0, 0, 0, .1);}
    figcaption nav ul{display:inline-block;padding:3px 15px;background:white;}
    figcaption nav ul li{display:inline-block;margin-left:5px;}
    figcaption nav ul li a{position:relative;display:block;width:30px;height:30px;text-decoration:none;color:white;}
    figcaption p{display:inline-block;padding:5px 15px;background:white;font-weight:300;color:#444;}
    input[type="radio"]:checked + label{left:-17px;width:75px;background:#4CAF50;}
    input[type="radio"]:checked + label:before{font-size:2.5rem;top:15px;left:28px;}
    input[type="radio"]:checked ~ figure img{-webkit-transform:translatex(0px);-moz-transform:translatex(0px);-ms-transform:translatex(0px);-o-transform:translatex(0px);transform:translatex(0px);}
    input[type="radio"]:checked ~ figure figcaption{-webkit-transform:translateX(0px);-moz-transform:translateX(0px);-ms-transform:translateX(0px);-o-transform:translateX(0px);transform:translateX(0px);z-index:8;}
    .label{position:relative;color:#fff;font-size:20px;text-align:center;padding-top:27px;}
}