styles.css

body, 
html {
    height : 100%;
    width  : 100%
}

.navbar-custom, 
body {
    background-color : #232323
}

.intro, 
body, 
html {
    width : 100%
}

body {
    font-family                : Raleway,"Helvetica Neue",Helvetica,Arial,sans-serif;
    color                      : #fff;
    webkit-tap-highlight-color : rgba(255,255,255,.2)
}

.btn, 
.navbar-custom, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
    text-transform : uppercase;
    font-family    : Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
    margin         : 0 0 5px;
    font-weight    : 700;
    letter-spacing : 1px
}

p {
    margin      : 0 0 0px;
    font-size   : 16px;
    line-height : 1.5
}

hr {
    border-color:#FFFFFF;
    max-width: 350px;
    border-width: 2px;
}

@media (min-width: 768px) {
    p {
        margin:0 0 0px;
        font-size: 16px;
        line-height: 1.6
    }
}

a {
    color              : #42DCA3;
    -webkit-transition : all .2s ease-in-out;
    -moz-transition    : all .2s ease-in-out;
    transition         : all .2s ease-in-out
}

a:focus, 
a:hover {
    text-decoration : none;
    color           : #1d9b6c
}

.light {
    font-weight : 400
}

.navbar-custom {
    margin-bottom : 0;
    border-bottom : 1px solid rgba(35,35,35,.3)
}

.navbar-custom .navbar-toggle {
    color            : #FFFFFF;
    background-color : rgba(35,35,35,.2);
    font-size        : 12px
}

.navbar-custom .nav li a:active,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:hover {
    background-color : transparent;
    outline          : 0
}

.navbar-custom .navbar-toggle:active,
.navbar-custom .navbar-toggle:focus {
    outline : 0
}

.navbar-custom .navbar-brand {
    font-weight : 700
}

.navbar-custom .navbar-brand:focus {
    outline: 0
}

.navbar-custom a {
    color: #FFFFFF
}

.navbar-custom .nav li a {
    -webkit-transition : background .3s ease-in-out;
    -moz-transition    : background .3s ease-in-out;
    transition         : background .3s ease-in-out
}

.navbar-custom .nav li a:hover {
    color : #FFFFFF
}

.navbar-custom .nav li.active {
    outline : 0
}

.navbar-custom .nav li.active a {
    background-color : rgba(35,35,35,.3)
}

.navbar-custom .nav li.active a:hover {
    color : #fff
}

@media (min-width: 768px) {
    .navbar-custom {
        padding            : 20px 0;
        border-bottom      : none;
        letter-spacing     : 1px;
        background         : 0 0;
        -webkit-transition : background .5s ease-in-out, padding .5s ease-in-out;
        -moz-transition    : background .5s ease-in-out, padding .5s ease-in-out;
        transition         : background .5s ease-in-out, padding .5s ease-in-out
    }

    .navbar-custom.top-nav-collapse {
        padding       : 0;
        background    : #232323;
        border-bottom : 1px solid rgba(35,35,35,.3)
    }
}

.intro {
    display                 : table;
    height                  : auto;
    padding                 : 100px 0;
    text-align              : center;
    color                   : #fff;
    background-image        : linear-gradient(rgba(35,35,35, 0.6), rgba(35,35,35, 0.6)), url('https://na.leagueoflegends.com/sites/default/files/upload/art/riven_v_shyvana_1920x1080.jpg') !important;
    position                : relative;
    width                   : 100%;
    text-align              : center
    background-repeat       : no-repeat;
    background-position     : center;
    background-attachment   : fixed;
    -webkit-background-size : cover;
    -moz-background-size    : cover;
    -o-background-size      : cover;
    background-size         : cover;
}

.intro .intro-body {
    display        : table-cell;
    vertical-align : middle
}

.intro .intro-body .brand-heading {
    font-size : 30px
}

.intro .intro-body .intro-text {
    font-size : 18px
}

@media (min-width: 768px) {
    .intro {
        height  : 100%;
        padding : 0
    }

    .intro .intro-body .brand-heading {
        font-size : 100px
    }

    .intro .intro-body .intro-text {
        font-size : 26px
    }
}

@-webkit-keyframes pulse {
    0%,100% {
        -webkit-transform : scale(1);
        transform         : scale(1)
    }

    50% {
        -webkit-transform : scale(1.2);
        transform         : scale(1.2)
    }
}

@-moz-keyframes pulse {
    0%,100% {
        -moz-transform : scale(1);
        transform      : scale(1)
    }

    50% {
        -moz-transform : scale(1.2);
        transform      : scale(1.2)
    }
}

.content-section {
    padding-top : 50px
}

.download-section {
    width                   : 100%;
    padding                 : 50px 0;
    color                   : #fff;
    background-image        : linear-gradient(rgba(35,35,35, 0.6), rgba(35,35,35, 0.6)), url('https://na.leagueoflegends.com/sites/default/files/upload/art/riven_v_shyvana_1920x1080.jpg') !important;
    position                : relative;
    width                   : 100%;
    text-align              : center
    background-repeat       : no-repeat;
    background-position     : center;
    background-attachment   : fixed;
    -webkit-background-size : cover;
    -moz-background-size    : cover;
    -o-background-size      : cover;
    background-size         : cover;
}

@media (min-width: 767px) {
    .content-section {
        padding-top :150px
    }

    .download-section {
        padding : 100px 0
    }
}

.btn {
    font-weight        : 400;
    -webkit-transition : all .3s ease-in-out;
    -moz-transition    : all .3s ease-in-out;
    transition         : all .3s ease-in-out;
    border-radius      : 0
}

.btn-default {
    border           : 1px solid #fff;
    color            : #fff;
    background-color : transparent
}

.btn-default:focus,.btn-default:hover {
    border           : 1px solid #fff;
    outline          : 0;
    color            : #fff;
    background-color : #000000
}

footer {
    padding : 30px 0
}

footer p {
    margin : 0
}