@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,700&display=swap');
            * {
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                    -webkit-touch-callout: none; /* iOS Safari */
                    -webkit-user-select: none; /* Safari */
                    -khtml-user-select: none; /* Konqueror HTML */
                        -moz-user-select: none; /* Firefox */
                        -ms-user-select: none; /* Internet Explorer/Edge */
                            user-select: none; /* Non-prefixed version, currently
                                                    supported by Chrome and Opera */
            }

            p {
                margin:0;
            }
            body, html {
                overflow:hidden;
                padding:0;
                margin:0;
                font-family: 'Nunito Sans', sans-serif;
            }
            div, p, span, input {
                font-family: 'Nunito Sans', sans-serif;
            }

            img {
                max-width:100%;
            }
            body {
                /* Disables pull-to-refresh but allows overscroll glow effects. */
                overscroll-behavior-y: contain;
            }

            .btn:hover {
                cursor:pointer;
                opacity:0.9;
            }
            .white {
                color:white;
            }

            .light-grey {
                color:#dedede;
            }

            .blue-bg {
                background: #2196F3;
            }

            .br {
                border-radius:5px;
            }
            .fh {
                height:100%;
            }

            .fw {
                width:100%;
            }

            .mfw {
                max-width:75%;
            }

            #mainModal .modal-title {
                text-align: left;
                margin-top: 0px;
            }

            .text-center {
                text-align:center;
            }
            .flex {
                display:flex;
                flex-direction:row;
            }
            .flex-column {
                flex-direction:column;
            }

            .justify-between {
                justify-content: space-between;
            }
            .flex-grow {
                flex-grow:1;
            }
            .justify-center {
                justify-content:center;
            }
            .items-center {
                align-items:center;
            }
            .light {
                font-weight:300;
            }
            .fs-12 {
                font-size:12px;
            }
            .fs-13 {
                font-size:13px;
            }
            .fs-16 {
                font-size:16px;
            }

            .fs-24 {
                font-size:24px;
            }

            body{ margin: 0; }


            body:not(.can-back) #backButton{
                display:none;
            }


            #mainModal {
                background: #f1f1f1;
            }

            .modal-playlist-list {
                background:white
            }
            .modal-playlist-list-item {
                padding:12px 10px;
                border-bottom:solid 1px #ececec;
                text-align:left;
            }
            .modal-playlist-list-item:hover {
                cursor:pointer;
                background:#ececec;
            }

            #backButton {
                padding-top:2px;
                padding-bottom:2px;
            }


            #navBar{
                background:#121212;
                width:100%;
                height: 50px;
                position:fixed;
                top:0px;
                left:0px;
                right:0px;
            }

            #player{
                background: black;
                width:100%;
                display: none;
            }

            #prev, #next{
                margin-top: 16px!important;
            }

            button
            {
                background: transparent;
                color: white;
                border: none;
                outline: none;
            }

            #btnMenuToggle
            {
                overflow: hidden;
                font-size: 16px;
                cursor: pointer;
                display:none;
            }

            #searchInput
            {
                float: left;
                width: 100%;
                height: 40px;
                text-indent: 8px;
                margin-bottom: 10px;
                font-size: 20px;
                font-family: monospace;
                border: 1px solid #a5a5a5
            }

            #container{
                overflow-y: auto;
            }

            #player{
                color: white;
            }

            #playPause
            {
                padding-top: 5px;padding-left: 5px;    width: 45px;text-align: center;
            }

            #controls {
                width: 150px;
            }

            #controls > div
            {
                float: left;
                font-size: 40px;
                height: 35px;
                margin: 8px;
                margin-top: 4px;
                cursor: pointer;
            }

            #controls > div:hover
            {
                color: #ff1247;
            }



            .logoItem
            {
                font-weight: bold;
                float:left;
                color: white;
            }

            .resultItem
            {
                    background: #ffffff;
                    padding: 0px;
                    margin: 10px;
                    cursor: pointer;
                    border: 1px solid #e6e6e6;
                    margin-bottom: 0;
            }

            .resultItem:hover
            {
                box-shadow: 2px 2px 4px -2px;
            }

            .infos
            {
                width: 100%;
            }
            .iIMG
            {
                width: 60px;height: 60px;background: #737373;float: left;
            }
            .artistBloc
            {
                float: left;padding: 11px;
                width: calc(100% - 140px);
            }

            .songTitle
            {
                float: left; font-size: 18px;font-weight: bold;width: 100%; overflow: hidden;height: 21px;
            }

            .artistName
            {
                float: left;width: 100%;    overflow: hidden;height: 17px;font-size: 15px;
            }

            .playBTN
            {
            font-size: 18px;
            color: #313131;
            }
            .playBTN:hover
            {
                color: #ff1247;
            }
            .closePadding
            {
                height: 75px;
                width: 100%;
                float: left;
            }

            .playlist
            {
                cursor: pointer;
                width: 98%;
                float: left;
                padding: 1%;
                background: #656565;
                font-size: 18px;
                color: white;
                text-transform: uppercase;
                font-family: monospace;
                margin-bottom: 1px;
            }

            .playlist:hover
            {
                background: black;
            }

            .playlistHeader
            {
                padding: 4px 10px;
                width: 100%;
                background: #2196F3;
                color: white;
                font-size: 16px;
            }

            .instaResult
            {
                cursor: pointer; float: left;width: 100%;background: #eaeaea;padding: 10px;font-size: 20px;margin-bottom: 5px;
            }

            #iconUser {
                font-size:22px;
            }

            #loginScreen
            {
                text-align: center;
                width: 300px;
                margin: 0 auto;
                padding:20px;
                background: black;
                position: absolute;
                right: 0;
                top: 50px;
            }

            #loginScreen:not(.active) {
                display:none;
            }

            #loginScreen:not(.logged) .logged-screen {
                display:none;
            }
            #loginScreen.logged .login-screen {
                display:none;
            }



            .login-input
            {
                height: 44px;
                font-size: 16px;
                text-indent: 8px;
                border: 1px solid #ccc;
                border-radius: 4px;
                box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                margin-bottom: 15px;
                width: 100%;
            }

            .login-btn
            {
                width: 100%;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                -webkit-appearance: button;
                padding: 0px;
                font-weight: 700;
                cursor: pointer;
                border-radius: 3px;
                border: none;
                color: white;
                padding-top: 8px;
                padding-bottom: 8px;
            }

            hr
            {
                width: 100%;
                height: 1px;
                background: white;
                margin-top: 10px;
                margin-bottom: 10px;
            }


            /*SPINNER*/
            .lds-roller {
            display: inline-block;
            position: relative;
            width: 32px;
            height: 32px;
            zoom: 0.8;
            margin-right: 32px;
            }
            .lds-roller div {
            animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
            transform-origin: 32px 32px;
            }
            .lds-roller div:after {
            content: " ";
            display: block;
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #fff;
            margin: -3px 0 0 -3px;
            }
            .lds-roller div:nth-child(1) {
            animation-delay: -0.036s;
            }
            .lds-roller div:nth-child(1):after {
            top: 50px;
            left: 50px;
            }
            .lds-roller div:nth-child(2) {
            animation-delay: -0.072s;
            }
            .lds-roller div:nth-child(2):after {
            top: 54px;
            left: 45px;
            }
            .lds-roller div:nth-child(3) {
            animation-delay: -0.108s;
            }
            .lds-roller div:nth-child(3):after {
            top: 57px;
            left: 39px;
            }
            .lds-roller div:nth-child(4) {
            animation-delay: -0.144s;
            }
            .lds-roller div:nth-child(4):after {
            top: 58px;
            left: 32px;
            }
            .lds-roller div:nth-child(5) {
            animation-delay: -0.18s;
            }
            .lds-roller div:nth-child(5):after {
            top: 57px;
            left: 25px;
            }
            .lds-roller div:nth-child(6) {
            animation-delay: -0.216s;
            }
            .lds-roller div:nth-child(6):after {
            top: 54px;
            left: 19px;
            }
            .lds-roller div:nth-child(7) {
            animation-delay: -0.252s;
            }
            .lds-roller div:nth-child(7):after {
            top: 50px;
            left: 14px;
            }
            .lds-roller div:nth-child(8) {
            animation-delay: -0.288s;
            }
            .lds-roller div:nth-child(8):after {
            top: 45px;
            left: 10px;
            }
            @keyframes lds-roller {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
            }


#toggleMenu
{
    display: none;
}
.slidecontainer {
    background: black;
    padding: 2px;
}
.slider {
  -webkit-appearance: none;
  width: calc(100% - 4px);
  height: 15px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: #2196F3;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

#mobileMenu {
    display:none;
    position: fixed;
    top: 50px;
    left: 0px;
    right: 0px;
    z-index: 42;
    background: black;
}

#mobileMenu .btn
{
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px ridge #828282;
    font-size: 20px;
}

.screen:not(.active) {
    display:none;
}

.screen
{
    max-width: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 200px;
}

/*
** Categories
*/

.categories-list {
    padding: 15px;
}

.categories-list-title {
    font-size:24px;
    font-weight:bold;
    margin-bottom:5px;
    margin-top:5px;
    padding-left:10px;
}

.category-item {
    padding: 20px!important;
    padding-bottom:0px!important;
    font-weight:bold;
    transition: all 0.3s ease-in-out;
}

.category-item:hover {
    cursor:pointer;
    opacity:0.85;
}


.category-item-image {
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    width:100%;
    height:0px;
    padding-bottom:100%;
    background-repeat: no-repeat;
    background-size:cover;
    background-position:center center;
}

.category-item-title {
    text-align:center;
    margin-top:10px;
}


.category-back {
    padding: 4px 8px;
    border: solid 1px white;
    border-radius: 2px;
}

/*
** Playlists
*/
.playlist-list {
    padding:15px;
}

.playlist-list-title {
    font-size:24px;
    font-weight:bold;
    margin-bottom:5px;
    margin-top:5px;
    padding-left:10px;
}

.playlist-item {
    padding: 20px!important;
    padding-bottom:0px!important;
    font-weight:bold;
    transition: all 0.3s ease-in-out;
}

.playlist-item:hover {
    cursor:pointer;
    opacity:0.85;
}


.playlist-item-image {
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    width:100%;
    height:0px;
    padding-bottom:100%;
    background-repeat: no-repeat;
    background-size:cover;
    background-position:center center;
}

.playlist-item-title {
    text-align:center;
    margin-top:10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/*
** Playlist content
*/


#playlistContent .playlist-header {
    padding:32px;
    background: linear-gradient(#076fc1, #4db0ff);
    color:white;
}

#playlistContent .playlist-image {
    width: 220px;
    height: 220px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center center;
}

#playlistContent .playlist-infos {
    padding: 20px;
}

#playlistContent .playlist-title {
    margin: 0;
    font-size: 52px;
    font-weight: bold;
}
#playlistContent .playlist-description {
    color:#ececec;
}

#playlistContent .playlist-back {
    padding: 4px 8px;
    border: solid 1px white;
    border-radius: 2px;
}


#playlistContent .playlist-play {
    color: #2196F3;
    background: white;
    padding: 4px 8px;
    border-radius: 2px;
}


/*
** search
*/
.search-list {
    padding:15px;
}

.search-list-title {
    font-size:24px;
    font-weight:bold;
    margin-bottom:5px;
    margin-top:5px;
    padding-left:10px;
}

.search-item {
    padding: 20px!important;
    padding-bottom:0px!important;
    font-weight:bold;
    transition: all 0.3s ease-in-out;
}

.search-item:hover {
    cursor:pointer;
    opacity:0.85;
}


.search-item-image {
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    width:100%;
    height:0px;
    padding-bottom:100%;
    background-repeat: no-repeat;
    background-size:cover;
    background-position:center center;
}

.search-item-title {
    text-align:center;
    margin-top:10px;
}

/*
** Playlist content
*/


#searchContent .search-header {
    padding:32px;
    background: linear-gradient(#076fc1, #4db0ff);
    color:white;
}

#searchContent .search-image {
    width: 220px;
    height: 220px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center center;
}

#searchContent .search-infos {
    padding: 20px;
}

#searchContent .search-title {
    margin: 0;
    font-size: 52px;
    font-weight: bold;
}
#searchContent .search-description {
    color:#ececec;
}

#searchContent .search-back {
    padding: 4px 8px;
    border: solid 1px white;
    border-radius: 2px;
}


#searchContent .search-play {
    color: #2196F3;
    background: white;
    padding: 4px 8px;
    border-radius: 2px;
}



/*
** Track
*/

.track-item {
    border-bottom: solid 1px #ececec;
}

.track-item:hover {
    cursor:pointer;
}

.track-item:hover .track-item-title {
    color:#2196F3;
}

.track-item-title {
    font-weight:bold;
    font-size:18px;
}
.track-item-artist {
    font-size:13px;
    color:#666;
}

/*
** Player
*/

.player-slider {
    position:relative;
    height:6px;
    background:#333;
}

.player-slider-hover {
    position:absolute;
    top:-10px;
    left:0px;
    bottom:-10px;
    width:100%;
    background:transparent;
    z-index:3;
    cursor:pointer;
}

.player-slider-time {
    display:none;
    position: absolute;
    top: -20px;
    color: white;
    background: rgba(0,0,0,.75);
    font-size: 12px;
    padding: 2px 4px;
    transform:translateX(-50%);
}


.player-slider-progress, .player-slider-buffer-progress {
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    width:0px;
}

.player-slider-progress {
    z-index:2;
    background:#2196F3;
}
.player-slider-buffer-progress {
    z-index:1;
    background:#999;
}

.player-track-infos {
    flex-shrink: 1;
    min-width: 0px;
}

.player-image {
    background-size: cover;
    height: 42px;
    width: 42px;
    background-position: center center;
}

.player-title {
    padding:0;
    margin:0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.player-artist {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.player-controls-volume-progress-container {
    position:relative;
    height:6px;
    background:#333;
    width:82px;
}

.player-controls-volume-hover {
    position:absolute;
    top:-10px;
    left:0px;
    bottom:-10px;
    width:100%;
    background:transparent;
    z-index:3;
    cursor:pointer;
}

.player-controls-volume i {
    width:16px;
}


.player-controls-volume-progress, .player-controls-volume-preview {
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    width:0px;
}

.player-controls-volume-progress {
    z-index:2;
    background:#2196F3;
}
.player-controls-volume-preview  {
    z-index:1;
    background:#999;
}

/*
** SEARCH
*/


#search .searchbar-container {
    padding: 22px;
    background: linear-gradient(#076fc1, #4db0ff);
}

#search .searchbar {
    max-width: 90%;
    width: 380px;
    margin: 0 auto;
    background:white;
    border-radius:32px;
    padding:16px;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    cursor:pointer;
}

#search .searchbar.focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}
#search .searchbar.empty .fa-times{
    display:none;
}

#search .searchbar input {
    border:none;
    outline:none;
}

/*
** Media queries
*/


@media only screen and (min-width:769px) {
    .visible-xs {
        display:none;
    }
}

@media only screen and (max-width: 768px) {
    .hidden-xs {
        display:none;
    }


    #player .player-controls {
        padding-left:0px;
        padding-right:0px;
    }
    #player .player-controls-volume-container {
        padding-left:0px;
    }

    .player-controls-volume
    {
        display: none;
    }

    #player .player-track-infos {
        flex-grow:1;
        padding-left:8px;
    }
    .track-item-title {
        font-size:15px;
    }

    #playlistContent .playlist-title {
        font-size:32px;
    }
    #playlistContent .playlist-header.flex {
        display:block;
        text-align:center;
        padding:0px;
        padding-top:20px;
    }
    #playlistContent .playlist-infos {
        padding: 8px;
        padding-left:0px;
        padding-right:0px;
    }
    #playlistContent .playlist-image {
        width:82px;
        height:82px;
        margin:0 auto;
    }
    .playlist-buttons {
        justify-content:center;
    }

    body.menu-opened #mobileMenu {
        display:block;
    }
    #controls
    {
        float: right;
        width: 110px;
    }

    .lds-roller {
        zoom: 0.6;
    }

    #controls > div {
        margin: 3px;
    }

    #curTitle
    {
        font-size: 13px!important;
    }

    #curArtist
    {
        font-size: 12px!important;
        height: 16px;
        overflow: hidden;
    }

    .playerText
    {
        padding: 7px;
    }

    #infos
    {
        width: calc(100% - 110px)!important;
    }

    .menuBtn{
        display:none;
    }

    #toggleMenu
    {
        display: block;
    }

    #btnMenuToggle
    {
        display:flex!important;
    }

    body.can-back #btnMenuToggle{
        display:none!important;
    }

    #loginScreen
    {
        width: 100%;
        padding: 0px;
    }


    .LoginSignInLbl {
        padding-top: 20px;
    }
}



/*
** SPACING
*/

.p-0 {
    padding: 0px;
}

.p-3 {
    padding: 3px;
}

.p-5 {
    padding: 5px;
}

.p-10 {
    padding: 10px;
}

.p-15 {
    padding: 15px;
}

.p-20 {
    padding: 20px;
}

.p-25 {
    padding: 25px;
}

.p-30 {
    padding: 30px;
}

.p-35 {
    padding: 35px;
}

.p-40 {
    padding: 40px;
}

.p-45 {
    padding: 45px;
}

.p-50 {
    padding: 50px;
}

.pt-0 {
    padding-top: 0px;
}

.pt-3 {
    padding-top: 3px;
}

.pt-5 {
    padding-top: 5px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-15 {
    padding-top: 15px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-25 {
    padding-top: 25px;
}

.pt-30 {
    padding-top: 30px;
}

.pt-35 {
    padding-top: 35px;
}

.pt-40 {
    padding-top: 40px;
}

.pt-45 {
    padding-top: 45px;
}

.pt-50 {
    padding-top: 50px;
}

.pr-0 {
    padding-right: 0px;
}

.pr-3 {
    padding-right: 3px;
}

.pr-5 {
    padding-right: 5px;
}

.pr-10 {
    padding-right: 10px;
}

.pr-15 {
    padding-right: 15px;
}

.pr-20 {
    padding-right: 20px;
}

.pr-25 {
    padding-right: 25px;
}

.pr-30 {
    padding-right: 30px;
}

.pr-35 {
    padding-right: 35px;
}

.pr-40 {
    padding-right: 40px;
}

.pr-45 {
    padding-right: 45px;
}

.pr-50 {
    padding-right: 50px;
}

.pb-0 {
    padding-bottom: 0px;
}

.pb-3 {
    padding-bottom: 3px;
}

.pb-5 {
    padding-bottom: 5px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-15 {
    padding-bottom: 15px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-25 {
    padding-bottom: 25px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-35 {
    padding-bottom: 35px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-45 {
    padding-bottom: 45px;
}

.pb-50 {
    padding-bottom: 50px;
}

.pl-0 {
    padding-left: 0px;
}

.pl-3 {
    padding-left: 3px;
}

.pl-5 {
    padding-left: 5px;
}

.pl-10 {
    padding-left: 10px;
}

.pl-15 {
    padding-left: 15px;
}

.pl-20 {
    padding-left: 20px;
}

.pl-25 {
    padding-left: 25px;
}

.pl-30 {
    padding-left: 30px;
}

.pl-35 {
    padding-left: 35px;
}

.pl-40 {
    padding-left: 40px;
}

.pl-45 {
    padding-left: 45px;
}

.pl-50 {
    padding-left: 50px;
}

.m-0 {
    margin: 0px;
}

.m-3 {
    margin: 3px;
}

.m-5 {
    margin: 5px;
}

.m-10 {
    margin: 10px;
}

.m-15 {
    margin: 15px;
}

.m-20 {
    margin: 20px;
}

.m-25 {
    margin: 25px;
}

.m-30 {
    margin: 30px;
}

.m-35 {
    margin: 35px;
}

.m-40 {
    margin: 40px;
}

.m-45 {
    margin: 45px;
}

.m-50 {
    margin: 50px;
}

.mt-0 {
    margin-top: 0px;
}

.mt-3 {
    margin-top: 3px;
}

.mt-5 {
    margin-top: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-25 {
    margin-top: 25px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-35 {
    margin-top: 35px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-45 {
    margin-top: 45px;
}

.mt-50 {
    margin-top: 50px;
}

.mr-0 {
    margin-right: 0px;
}

.mr-3 {
    margin-right: 3px;
}

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-15 {
    margin-right: 15px;
}

.mr-20 {
    margin-right: 20px;
}

.mr-25 {
    margin-right: 25px;
}

.mr-30 {
    margin-right: 30px;
}

.mr-35 {
    margin-right: 35px;
}

.mr-40 {
    margin-right: 40px;
}

.mr-45 {
    margin-right: 45px;
}

.mr-50 {
    margin-right: 50px;
}

.mb-0 {
    margin-bottom: 0px;
}

.mb-3 {
    margin-bottom: 3px;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-45 {
    margin-bottom: 45px;
}

.mb-50 {
    margin-bottom: 50px;
}

.ml-0 {
    margin-left: 0px;
}

.ml-3 {
    margin-left: 3px;
}

.ml-5 {
    margin-left: 5px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-15 {
    margin-left: 15px;
}

.ml-20 {
    margin-left: 20px;
}

.ml-25 {
    margin-left: 25px;
}

.ml-30 {
    margin-left: 30px;
}

.ml-35 {
    margin-left: 35px;
}

.ml-40 {
    margin-left: 40px;
}

.ml-45 {
    margin-left: 45px;
}

.ml-50 {
    margin-left: 50px;
}


/* ==== GRID SYSTEM ==== https://github.com/kristoferjoseph/flexboxgrid */

.container,.container-fluid{margin-right:auto;margin-left:auto}.container-fluid{padding-right:2rem;padding-left:2rem}.row{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-xs{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-xs-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xs-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-xs-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xs-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-11{margin-left:91.66666667%}.start-xs{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-xs{-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}@media only screen and (min-width:48em){.container{width:49rem}.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-sm{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-sm-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-sm-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-sm-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-sm-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-11{margin-left:91.66666667%}.start-sm{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-sm{-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}@media only screen and (min-width:64em){.container{width:65rem}.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-offset-0,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-md{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-md-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-md-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-md-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-md-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-11{margin-left:91.66666667%}.start-md{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-md{-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}@media only screen and (min-width:75em){.container{width:76rem}.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-lg{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-lg-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-lg-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-lg-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-lg-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-11{margin-left:91.66666667%}.start-lg{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-lg{-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}