html {
    font-family: 'Open Sans', sans-serif;
}
body {
    background-image: url("../img/bg-mobile.jpg");
    background-size: auto;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top center;
}

[-data-section="events"] {
    background-image: url('../img/bg-mobile-blurred.jpg');
    background-size: auto auto;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: bottom center;
}

@media screen and (min-width: 46em) {
    body {
        background-image: url('../img/slide-bg-complexity.jpg');
    }

    [-data-section="events"] {
        background-image: url("../img/bg-desktop-blurred.jpg")
    }
}


@media screen and (min-width: 2160px) {
    body {
        background-image: url('../img/slide-bg-4k-complexity.jpg');
    }

    [-data-section="events"] {
        background-image: url("../img/bg-4k-blurred.jpg")
    }
}



/*this works on every mobile except microsoft*/
/*background lvl1*/
/*main:before {*/
    /*content: "";*/
    /*background-size: auto;*/
    /*background-origin: border-box;*/
    /*background: url("../img/slide-bg-complexity.jpg") no-repeat center 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*position: fixed;*/
    /*top: 0;*/
    /*z-index: -300;*/
/*}*/

/*main:before*/

/*background lvl2*/


h1 {
    font-size: 1.7em;
}


/*button styles*/

[-data-btn] {
    background: #1D8EC6;
    padding: .6em 1.3em;
    color: white;
    border: 1px solid #1277AB;
    border-radius: .5em;
    position:relative;
}

[-data-btn]:hover {
    background: #1a658d;
    border: 1px solid #0f394f;
}


/*small mobile button styles*/
[-data-mobile-bt] {
    display: inline-block;
    background: radial-gradient(circle, #d6d6d6, #e6e6e6 60%);
    border: 1px solid #C7C7C7;
    padding: 0.5em 0.2em;
    border-radius: .3em;
    position: relative;
}

[-data-mobile-bt]:hover {
    background: radial-gradient(circle, #b6b6b6, #c8c8c8 60%);
}

/*clearfix*/
[-data-clear="left"]:after {
    content: "";
    display: block;
    clear: left;
}

[-data-clear="right"]:after {
    content: "";
    display: block;
    clear: right
}

[-data-clear="both"]:after {
    content: "";
    display: block;
    clear: both;
}