* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: 'Gudea', sans-serif;
    font-weight: normal
}


h1 {
    text-align: center;
    margin-top: 40px;
    font-size: 40px;
    color: #333
}

    h1 a {
        font-size: 14px;
        color: #aaa;
        background: #fff;
        border-radius: 5px;
        padding: 2px 5px;
        border: 1px solid #dcdcdc;
        text-decoration: none
    }

        h1 a:hover {
            color: #0fe0ba;
            text-decoration: underline
        }

.slider {
    width: 100%;
    /*max-width: 1350px;*/
    padding: 0 50px;
    /*margin: 25px auto 0;*/
    height: 350px;
    position: relative;
    background-color: #000a18;
}

    .slider ul, .slider ul li {
        width: 100%;
        height: 100%
    }

    .slider ul {
        position: relative;
        overflow: hidden;
        border-radius: 15px
    }

        .slider ul li {
            position: absolute;
            top: 0;
            left: -100%;
            background-size: cover; /* semon #f98686 */
            background-position: center;
            color: #fff;
            font-family: serif;
        }

            .slider ul li:first-of-type {
                background-image: url("http://www.misr5.news/wp-content/uploads/2015/10/6957804-girl-children-blonde-blue-eyes-autumn-mood.jpg")
            }

            .slider ul li:nth-of-type(2) {
                background-image: url("http://favim.com/orig/201107/19/cute-flowers-girl-pink-pretty-Favim.com-110225.jpg")
            }

            .slider ul li:nth-of-type(3) {
                background-image: url("http://www.tsitut.net/wp-content/uploads/2016/04/born-to-stand-out.jpg")
            }

            .slider ul li:nth-of-type(4) {
                background-image: url("https://37.media.tumblr.com/tumblr_lxkb5dtDuF1r5o9ano1_500.jpg")
            }

            .slider ul li:last-of-type {
                background-image: url("https://s-media-cache-ak0.pinimg.com/originals/03/08/5f/03085f3adecf31a0ded89aec58e5bbed.jpg")
            }

    .slider .controll {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 44%;
        border-bottom: 3px solid #333;
        border-left: 3px solid #333;
        cursor: pointer;
        color: #333
    }

        .slider .controll:first-of-type {
            transform: rotate(45deg);
            left: 20px
        }

        .slider .controll:last-of-type {
            transform: rotate(225deg);
            right: 20px
        }

        .slider .controll:hover, .slider .controll.active {
            border-color: #f98686 /* rose */
        }

    .slider ol {
        text-align: center;
        padding-top: 10px
    }

        .slider ol li {
            display: inline-block;
            margin-right: 5px;
        }

        .slider ol .fa {
            font-size: 20px;
            color: #333;
            cursor: pointer;
            font-weight: normall
        }

        .slider ol li:hover .fa:before, .slider ol li.active .fa:before {
            content: "\f111"
        }
/* .slider ul li.active {
  z-index: 999;
  left: 0
} */
@media(max-width: 490px) {
    h1 {
        font-size: 45px
    }
}

@media(max-width: 350px) {
    h1 {
        font-size: 25px
    }
}