/* SLIDER */


/* Hide social info on IG for the meantime */

div#instagramFeedContainer .social {
    display: none !important;
}

.sliderContainer,
.sliderContainer * {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sliderContainer {
    overflow: hidden;
    position: relative;
}

.sliderContainer>.slider.animate {
    transition: left 1s;
}

.sliderContainer>.slider {
    white-space: nowrap;
    position: relative;
    font-size: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sliderContainer>.slider>.list {
    display: inline-block;
}

.sliderContainer>.slider .slideImage {
    display: inline-block;
    padding: 0 10px;
}

.sliderContainer>.slider .slideImage>.container {
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    display: block;
}

.slider .slideImage>.container {
    width: 590px;
    height: 440px;
}

.sliderContainer>.dot-container {
    text-align: center;
    margin: 20px;
}

.sliderContainer>.dot-container>.dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: #ccc;
    margin: 0 8px;
    cursor: pointer;
}

.sliderContainer.idx-0>.dot-container>.dot.idx-0,
.sliderContainer.idx-1>.dot-container>.dot.idx-1,
.sliderContainer.idx-2>.dot-container>.dot.idx-2,
.sliderContainer.idx-3>.dot-container>.dot.idx-3,
.sliderContainer.idx-4>.dot-container>.dot.idx-4,
.sliderContainer.idx-5>.dot-container>.dot.idx-5,
.sliderContainer.idx-6>.dot-container>.dot.idx-6,
.sliderContainer.idx-7>.dot-container>.dot.idx-7,
.sliderContainer.idx-8>.dot-container>.dot.idx-8,
.sliderContainer.idx-9>.dot-container>.dot.idx-9 {
    background-color: #cf0a2c;
}

.sliderContainer>.slider .slideImage>.container {
    background-size: 100% 100%;
}

.sliderContainer>.slider .slideImage>.container.wide {
    background-size: auto 100%;
}

.sliderContainer>.slider .slideImage>.container.high {
    background-size: 100% auto;
}


/* Popup */

.popupLayer {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    transition: opacity 0.5s;
    opacity: 0;
    display: none;
    text-align: center;
    cursor: pointer;
    z-index: 99;
}

.popupLayer.show {
    display: block;
}

.popupLayer.show.display {
    opacity: 1;
}

.popupLayer>img {
    vertical-align: middle;
    max-width: 96%;
    max-width: calc(100% - 20px);
}

.popupLayer::before,
.popupLayer::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 1px;
}


/* Instagram Feed */

.content_container.collectionSlide.fold>.content_inner {
    width: auto;
    max-width: 1120px;
}

.content_container.instagram.fold>.content_inner>.padding {
    padding: 0.5em 0 2em;
}

.content_container.instagram.fold>.content_inner>.padding h2 {
    text-transform: lowercase;
}

#instagramFeedContainer {
    margin: 1em 0 0;
}

.sliderContainer,
.sliderContainer * {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sliderContainer {
    overflow: hidden;
    position: relative;
}

.sliderContainer>.slider.animate {
    transition: left 1s;
}

.sliderContainer>.slider {
    white-space: nowrap;
    position: relative;
    font-size: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sliderContainer>.slider>.list {
    display: inline-block;
}

.sliderContainer>.slider .slideImage {
    display: inline-block;
    padding: 0 10px;
}

.sliderContainer>.slider .slideImage>.container {
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    display: block;
}

#instagramFeedContainer>.slider .slideImage>.container {
    width: 400px;
    height: 400px;
}

.content_container.viral.fold>.content_inner {
    width: auto;
}

.content_container.viral.fold>.content_inner>.padding {
    padding: 2em 0 3em;
}

.content_container.viral.fold>.content_inner>.padding .slider .slideImage>.container {
    width: 600px;
    height: 500px;
}

.sliderContainer>.dot-container {
    text-align: center;
}

.sliderContainer>.dot-container>.dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: #ccc;
    margin: 0 8px;
    cursor: pointer;
}

.collectionSlide .sliderContainer>.slider .slideImage>.container {
    width: 330px;
    height: 489px;
    display: block;
}

.sliderContainer>.slider .slideImage>.container {
    background-size: 100% 100%;
}

.sliderContainer>.slider .slideImage>.container.wide {
    background-size: auto 100%;
}

.sliderContainer>.slider .slideImage>.container.high {
    background-size: 100% auto;
}

#instagramFeedContainer>.slider .slideImage>.container>.social {
    display: block;
    font-size: 14px;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #0005;
    padding-top: calc(50% - 1.2em);
    text-align: center;
    white-space: normal;
    transition: padding 0.25s, background-color 0.25s;
    overflow: hidden;
}

#instagramFeedContainer>.slider .slideImage>.container>.social.info {
    padding-top: 1em;
    background-color: #0009;
}

#instagramFeedContainer>.slider .slideImage>.container>.social .text {
    pointer-events: none;
}

#instagramFeedContainer>.slider .slideImage>.container>.social>.likes,
#instagramFeedContainer>.slider .slideImage>.container>.social>.comments {
    display: inline-block;
    vertical-align: middle;
    margin: 0 15px;
}

.sliderContainer>.slider .slideImage>.container>.social>.caption {
    text-align: left;
    padding: 1em;
    left: -100%;
    transition: left 0.5s;
    box-sizing: border-box;
    width: 100%;
    position: absolute;
    top: 2em;
}

#instagramFeedContainer>.slider .slideImage>.container>.social.info>.caption {
    left: 0;
}

#instagramFeedContainer>.slider .slideImage>.container>.social>.links {
    text-align: left;
    padding: 0;
    transition: bottom 0.25s;
    box-sizing: border-box;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -100px;
    background-color: #3897f0;
    display: block;
}

#instagramFeedContainer>.slider .slideImage>.container>.social.info>.links {
    bottom: 0;
    text-align: center;
}

#instagramFeedContainer>.slider .slideImage>.container>.social>.links>.www {
    display: block;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    padding: 1em 0;
    vertical-align: middle;
}

#instagramFeedContainer>.slider .slideImage>.container>.social>.links>.icons {
    float: right;
    padding-top: 0.5em;
}

#instagramFeedContainer>.slider .slideImage>.container>.social>.links>.icons>.icon {
    display: inline-block;
    text-decoration: none;
    width: 2em;
    height: 2em;
    background-image: url("img/apple.svg");
    background-repeat: no-repeat;
    background-size: auto 100%;
    margin-right: 1em;
}

#instagramFeedContainer>.slider .slideImage>.container>.social>.links>.icons>.icon.apple {
    background-image: url("img/apple.svg");
}

#instagramFeedContainer>.slider .slideImage>.container>.social>.links>.icons>.icon.android {
    background-image: url("img/android.svg");
}

#instagramFeedContainer>.slider .slideImage>.container>.social svg {
    display: inline-block;
    vertical-align: middle;
    fill: #fff;
}

#instagramFeedContainer>.slider .slideImage>.container>.social:hover svg.heart {
    fill: #EE0000;
    -webkit-animation: pulse 1.5s linear infinite;
    animation: pulse 1.5s linear infinite;
}

#instagramFeedContainer>.slider .slideImage>.container>.social svg.heart {
    width: 17px;
    height: 15.6px;
}

#instagramFeedContainer>.slider .slideImage>.container>.social svg.chat {
    width: 18.125804px;
    height: 16.453331px;
}

.content_container.instagram.fold>.content_inner {
    width: auto;
}


/* Skinception header */

.gray-bar {
    background-color: #9c867a;
}

.gray-bar p {
    color: #fff;
    font-weight: 600;
    font-size: 2.2rem;
    line-height: 120%;
    text-transform:uppercase;
}

#viral .title img{
    display:block;
    max-width: 80%;
    margin:0px auto;
}

#viral .viral-text {
    max-width: 1100px;
    margin: 1rem auto 1rem;
	color: #333132;
	font-size: 1rem;
    line-height: 1.5rem;
}

#viral sup {
    font-size: 16px;
    top: 0;
    position: relative;
}

@media screen and (max-width: 992px) {
    #viral .gray-bar p {
        font-size: 1.5rem;
    }
    #viral sup {
        font-size: 12px;
    }
    #viral .viral-text {
        font-size: 1.1rem;
    }
}

@media screen and (max-width: 769px) {
    #viral .gray-bar p {
        font-size: 1.2rem;
    }
}