@font-face {
  font-family: 'variableblack';
  src: url('./fonts/variable-black.eot');
  src: url('./fonts/variable-black.eot?#iefix') format('embedded-opentype'),
  url('./fonts/variable-black.woff2') format('woff2'),
  url('./fonts/variable-black.woff') format('woff'),
  url('./fonts/variable-black.ttf') format('truetype'),
  url('./fonts/variable-black.svg#variableblack') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
	background-color: #fdfdfd;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.42857;
	color: #333;
	margin: 0;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.l-error {
    height: 100vh;
    width: 100vw;
    max-width: 100%;
}

.l-error>.l-app__body {
    text-align: center;
    padding: 2em;
}

.l-app__body {
    overflow: hidden;
}

.l-app__body {
    max-height: 88vh;
    float: left;
    width: 100%;
}

.dd__clear:after, .dd__clear:before {
    content: " ";
    display: table;
}

.dd__clear:after {
    clear: both;
}

.l-app__header {
    background-color: #057777;
    background-size: cover;
    position: relative;
    width: 100%;
    -webkit-transition: all .8s ease;
    transition: all .8s ease;
}

.l-app__header:after {
    background-size: 100% 100%;
    border-top: 5px solid #ef4136;
    bottom: 0;
    content: '';
    display: block;
    position: absolute;
    width: 100%;
}

.l-app--H30B70F0 .l-app__header {
    height: 30vh;
    text-align: center;
}

.l-app--H30B70F0 .l-app__body {
	height: 70vh;
}

.header__mask--off {
    height: 100%;
    position: relative;
    background-color: transparent;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.header__container {
    margin: 0 3rem;
    position: relative;
    height: 80px;
}

.brand__logo {
    background: transparent url(./images/logo-diddit.svg) no-repeat 50% 50%;
    display: inline-block;
    -webkit-filter: drop-shadow(0 0 .75rem rgba(0, 0, 0, .5));
    filter: drop-shadow(0 0 .75rem rgba(0, 0, 0, .5));
    height: 60px;
    text-indent: -9999em;
    width: 120px;
    margin-bottom: 0;
}

.brand__logo a {
    display: block;
    -webkit-filter: drop-shadow(0 0 .75rem rgba(0, 0, 0, .5));
    filter: drop-shadow(0 0 .75rem rgba(0, 0, 0, .5));
    float: left;
    height: 60px;
    text-indent: -9999em;
    width: 240px;
}

.header__mask--off .brand__logo {
    float: none;
}

.l-error .brand__logo a {
    background: 0 0;
}

.l-app--H30B70F0 .l-app__header .header__content {
    opacity: 1;
    -webkit-transition: opacity .9s ease;
    transition: opacity .9s ease;
    height: 60%;
}

.slider {
    display: block;
    font-family: variableblack,sans-serif;
    height: 100%;
    margin: 0 2.5em;
    opacity: 1;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.dd-carousel {
    height: 100%;
    padding: 0 2rem;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}

.slider__items {
    bottom: 0;
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    padding: 0 1rem;
    position: absolute;
    text-align: center;
    top: 0;
}

.slider__items.dd-carousel {
    height: 100%;
}

.carousel__viewport {
    display: inline-block;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

@media (max-width: 480px) {
    .carousel__viewport {
        width:70%
    }
}

@media (min-width: 480px) and (max-width:767px) {
    .carousel__viewport {
        width:70%
    }
}

@media (min-width: 768px) and (max-width:991px) {
    .carousel__viewport {
        width:80%
    }
}

@media (min-width: 992px) and (max-width:1199px) {
    .carousel__viewport {
        width:90%
    }
}

@media (min-width: 1200px) {
    .carousel__viewport {
        width:90%
    }
}

.carousel__viewport ul {
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    -webkit-transition: left .5s ease-in-out;
    transition: left .5s ease-in-out;
}

.carousel__item {
    display: inline-block;
    height: 100%;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.slider__item {
    display: inline-block;
    height: 100%;
    position: relative;
    vertical-align: top;
}

.widget--circle {
    max-height: 180px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.widget--circle__inner {
    background: rgba(255,255,255,.3);
    border: 3px solid #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 2rem rgba(0,0,0,.5);
    box-shadow: 0 0 2rem rgba(0,0,0,.5);
    cursor: pointer;
    height: 13vh;
    max-height: 180px;
    max-width: 180px;
    overflow: hidden;
    width: 13vh;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.widget--circle__inner:hover {
    border: 6px solid #ef4136;
}

.widget__image {
    height: 100%;
    width: 100%;
    vertical-align: middle;
    border: 0;
}

h1 {
	font-family: variableblack,sans-serif;
	font-size: 2em;
    margin: .67em 0;
}