* {
    box-sizing: border-box;
}

html,
body {
    background-color: rgba(27, 23, 19, 1) !important;
    margin: auto;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    /*responsive*/
    height: auto;
    /*to keep it in proportion*/
}

#header {
    background: url(../images/header.jpg);
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 140px;
}

.navbar {
    background: url(../images/nav/nav-bckgrnd.png) no-repeat;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}


.navbar.navbar-default .navbar-nav {
    width: 100%;
    text-align: center;
}

.navbar.navbar-default .navbar-nav > li {
    padding-top: 10px;
    display: inline-block;
    float: none;
}

.nav > li > a {
    padding: 5px;
}

.navbar-toggle.navbar-left {
    float: center !important;
    margin-left: 10px;
}

.background-home {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    width: 100%;
    height: 120%;
    padding: 0;
    margin: auto;
}

.background {
    position: relative;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
    margin: auto;
}

.background-full {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    width: 100%;
    height: 130%;
    padding: 0;
    margin: auto;
}

#titlestory {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 8rem;
}

#titlestories {
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: bottom;
}

#readthestory {
    background-repeat: no-repeat;
    background-position: center;

 
}
.carousel-inner {
    padding-top:0;
    width:400px;
    margin:auto;
  
}

/* fade */
.carousel-inner {
    animation: fadeIn 5s;
    -webkit-animation: fadeIn 5s;
    -moz-animation: fadeIn 5s;
    -o-animation: fadeIn 5s;
    -ms-animation: fadeIn 5s;
}

.zoom-icon,
.magazine-viewport {
    animation: fadeIn 5s;
    -webkit-animation: fadeIn 5s;
    -moz-animation: fadeIn 5s;
    -o-animation: fadeIn 5s;
    -ms-animation: fadeIn 5s;
}

#titlestories {
    animation: fadeIn 6s;
    -webkit-animation: fadeIn 6s;
    -moz-animation: fadeIn 6s;
    -o-animation: fadeIn 6s;
    -ms-animation: fadeIn 6s;
}

#readthestory {
    animation: fadeIn 6s;
    -webkit-animation: fadeIn 6s;
    -moz-animation: fadeIn 6s;
    -o-animation: fadeIn 6s;
    -ms-animation: fadeIn 6s;
}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

    ol.carousel-inner {
        margin-bottom: -50px !important;
    }
}
       


@media screen and (min-width: 1300px) {
    
    
    /* titles */
    #titlestory {
        background-position-y: 450px;
    }

    #feature {
        height:500px;
        
    }

    /* carousel */
    .carousel-inner {
        top: 550px !important;
    }

    .carousel-indicators {
        top: 750px;
    }
    
    .carousel-control {
        height: 200px;
        top: 550px;
    }
    
    /* duotang */ 
    .magazine-viewport {
        top: -70px;
    }

}