/*

Plugin Name: Post Shortcodes
Plugin URI: https://www.underlinedesigns.com/
Description: Shortcodes to help you make the most of your posts and content.
Version: 1.4.4
Author: Underline Designs
Author URI: https://www.underlinedesigns.com/
License: GPLv2 or later

*/

/* shop widget
-------------------------------------*/

.ud-shop-box .ud-shop-title {
    font-size: 10px;
    font-size: 1.3rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
}

.ud-shop-title-inner {
    background: #ffffff;
    padding: 0 20px;
    display: inline-block;
}

.ud-shop-box {
    text-align: center;
    padding: 11.5px;
    position: relative;
    margin: 50px auto 0 auto;
    background: #ffffff;
}

.ud-shop-box p {
    margin: 0 auto;
    line-height: 0;
}

.shop-box-inner {
    background: #fff;
}

.ud-shop-box .clearfix {
    border: 1px solid #231f20;
    background: #fff;
    position: relative;
}

/* outfit image
-------------------------------------*/

.ud-outfit-img {
    background-position: 50% !important;
    background-size: cover !important;
}

/* full banner
-------------------------------------*/

.full-banner {
    position: relative;
    width: 100vw;
    left: calc(-50vw + 50%);
    left: -webkit-calc(-50vw + 50%);
    left: -moz-calc(-50vw + 50%);
    height: 600px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-size: cover;
    background-attachment: initial;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

.full-banner.sticky {
    background-attachment: fixed;
}

/* columns
-------------------------------------*/

.columns-container {
    padding: 15px 10px;
    white-space: nowrap;
}

.columns-container.img {
    padding: 15px 0;
}

.column-element {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    position: relative;
    white-space: initial;
}

.columns-container.img .column-element {
    vertical-align: middle;
}

.column-element .ud-shop-box {
    margin: 0 auto;
}

.column-element:first-child {
    padding-right: 5px;
}

.column-element:last-child {
    padding-left: 5px;
}

.columns-container.right .column-element:first-child {
    padding-right: 0;
    padding-left: 5px;
}

.columns-container.right .column-element:last-child {
    padding-right: 5px;
    padding-left: 0;
}

.columns-container.right .column-element:first-child {
    right: -50%;
}

.columns-container.right .column-element:last-child {
    left: -50%;
}

.column-element img, .caption-image img {
    margin: 0 auto;
    width: 100%;
}

.column-element h2 {
    text-align: center;
    font-size: 16px;
}

.columns-container.style-two {
    position: relative;
}

.columns-container.style-two .column-element:last-child {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background: #ffffff;
    color: #fff;
    padding: 0;
}

.columns-container.style-two .column-element:first-child {
    width: 60%;
}

.columns-container.right.style-two .column-element:first-child {
    right: -20%;
}

.columns-container.style-two.right .column-element:last-child {
    right: 0;
    left: 0;
}

.columns-container.style-three .column-element {
    display: block;
    width: 100%;
    padding: 0;
}

.columns-container.style-three {
    position: relative;
    padding: 0;
}

.columns-container.style-three .column-element:last-child {
    position: absolute;
    bottom: 0;
    background: #fff;
    padding: 0;
    max-width: 30%;
}

.columns-container.style-three.right .column-element:last-child {
    left: auto;
    right: 0;
}

.columns-container.right.style-three .column-element {
    right: 0;
}

/* capital letter
-------------------------------------*/

.cap-text:first-letter, .cap-text>p:first-letter {
    float: left;
    font-size: 400%;
    line-height: 37px;
    margin: 0 8px 0 0;
    padding: 0;
}

/* indented text
-------------------------------------*/

.indented-text {
    padding: 0 65px;
}

/* card 1
-------------------------------------*/

.image-card {
    position: relative;
    margin-bottom: 15px;
}

.image-card img {
    margin: 0 auto;
}

.image-card img, .image-card .card-text {
    float: left;
    width: 60%;
}

.image-card .card-text {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background: #937e79;
    color: #fff;
    padding: 24px 25px 25px 25px;
}

.image-card .card-text a {
    color: #fff;
}

.image-card .card-text a:after {
    background: #fff;
}

.image-card.right img {
    float: right;
}

.image-card.right .card-text {
    left: 0;
    right: auto;
}

/* card 2
-------------------------------------*/

.overlay-text {
    margin-bottom: -60px;
}

.overlay-text .text-over {
    position: relative;
    top: -90px;
    z-index: 2;
    max-width: 400px;
    display: inline-block;
    padding: 10px;
}

.overlay-text.right .text-over {
    float: right;
}

.overlay-text.center {
    text-align: center;
}

/* card 3
-------------------------------------*/

.img-bg-card {
    background-position: 50%;
    background-size: cover;
    padding: 40px;
    background-attachment: initial;
}

.img-bg-card.sticky {
    background-attachment: fixed;
}

.img-bg-card .columns-container {
    background: #fff;
    padding: 30px 30px 30px 30px;
}

/* card 4
-------------------------------------*/

.img-bg-card img {
    border: 20px solid #fff;
}

/* card 5
-------------------------------------*/

.image-left, .image-right, .image-center {
    display: inline-block;
    vertical-align: middle;
    background-position: 50%;
    background-size: cover;
}

.image-left {
    width: 40%;
}

.image-center {
    border: 15px solid #fff;
    margin-left: -10%;
    width: 40%;
}

.image-right {
    margin-left: -10%;
    width: 40%;
    border: 15px solid #fff;
}

/* asymmetrical gallery
-------------------------------------*/

.asym-gal-img {
    background-position: 50% !important;
    background-size: cover !important;
    position: relative;
    margin: 0 auto;
}

.asym-gallery img {
    width: 100%;
}

.asym-gal-img.one-half {
    width: 51%;
}

.asym-gal-img.first {
    margin-top: 40px;
    margin-right: -2%;
    z-index: 1;
}

.asym-gal-img.one-fourth:nth-of-type(2) {
    margin-right: -2%;
    z-index: 1;
}

.asym-gal-img.one-third {
    width: 34.66%;
}

.asym-gal-img.one-fourth {
    width: 26%;
}

.asym-gal-img:last-child {
    margin-left: -2%;
}

.asym-gal-img.one-third:last-child, .asym-gal-img.one-fourth:nth-of-type(3) {
    margin-top: 40px;
}

.asym-gallery:after {
    display: block;
    content: "";
    clear: both;
}

.asym-gallery {
    margin: 20px auto;
    white-space: nowrap;
}

.asym-gal-img.one-third:nth-of-type(3n+2) {
    z-index: 3;
}

.asym-gal-img.gal-two.first {
    margin-top: 0;
    margin-right: -10%;
}

.asym-gal-img.gal-two:nth-of-type(2) {
    margin-top: 50%;
    z-index: 6;
    border: 15px solid #fff;
    margin-left: -10%;
}

.asym-gal-img.gal-two.one-half {
    width: 59%;
}

.asym-gal-img.gal-two.first.one-fourth, .asym-gal-img.gal-two.one-fourth:nth-of-type(3) {
    width: 47%;
}

.asym-gal-img.gal-two.one-fourth:last-child {
    border: 15px solid #fff;
}

.asym-gallery.landscape .asym-gal-img.gal-two:nth-of-type(2), .asym-gallery.landscape .asym-gal-img.gal-two:last-child {
    margin-top: 10%;
    margin-left: -10%;
}

.asym-gallery.landscape .asym-gal-img.gal-two.one-fourth:nth-of-type(3) {
    margin-top: 0;
}

.asym-gallery.landscape .asym-gal-img.gal-two.first.one-fourth, .asym-gallery.landscape .asym-gal-img.gal-two.one-fourth:nth-of-type(3) {
    width: 39%;
}

.asym-gal-img.gal-two.one-third:nth-of-type(2), .asym-gallery.landscape .asym-gal-img.gal-two.one-third:nth-of-type(2) {
    margin-top: 0;
    margin-left: 0;
}

.asym-gal-img.gal-two.first.one-third {
    margin-top: 40px;
    margin-right: -2%;
}

.asym-gallery.landscape .asym-gal-img.gal-two.one-third:last-child {
    margin-top: 40px;
    margin-left: -2%;
}

/* sticky columns
-------------------------------------*/

.columns-sticky {
    white-space: nowrap;
}

.columns-sticky .sticky-element, .columns-sticky .normal-element {
    display: inline-block;
    vertical-align: top;
    width: 49%;
}

.sticky-element {
    padding-right: 5px;
    white-space: initial;
}

.normal-element {
    padding-left: 5px;
    white-space: initial;
}

.columns-sticky.right .sticky-element {
    padding-left: 5px;
    padding-right: 0;
}

.columns-sticky.right .normal-element {
    padding-left: 0;
    padding-right: 5px;
}

.ud-ten .sticky-element, .ud-ninety .normal-element {
    width: 11%;
}

.ud-twenty .sticky-element, .ud-eighty .normal-element {
    width: 21%;
}

.ud-thirty .sticky-element, .ud-seventy .normal-element {
    width: 31%;
}

.ud-forty .sticky-element, .ud-sixty .normal-element {
    width: 41%;
}

.ud-fifty .sticky-element, .ud-fifty .sticky-element {
    width: 51%;
}

.ud-sixty .sticky-element, .ud-forty .normal-element {
    width: 61%;
}

.ud-seventy .sticky-element, .ud-thirty .normal-element {
    width: 71%;
}

.ud-twenty .normal-element, .ud-eighty .sticky-element {
    width: 81%;
}

.ud-ninety .sticky-element, .ud-ten .normal-element {
    width: 91%;
}

/* slider gallery
-------------------------------------*/

.slider-gal-img {
    height: 300px;
    background-position: 50% !important;
    background-size: cover !important;
}

.slider-gallery {
    margin: 15px auto;
}

/* Video
-------------------------------------*/

.ud-image {
    background-position: 50%;
    background-size: cover;
    height: 255px;
    position: relative;
}

.ud-image img {
    opacity: 0;
}

.ud-video {
    margin-bottom: 20px;
}

.ud-ytplay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.23);
    color: #ffffff;
}

.ud-ytplay .fa {
    font-size: 60px;
}

.ud-video a:hover .ud-ytplay {
    background: rgba(0, 0, 0, 0.23);
}

/* Full width Container
-------------------------------------*/

.full-width-container {
    width: 99vw;
    left: calc(-50vw + 50%);
    left: -webkit-calc(-49.5vw + 50%);
    left: -moz-calc(-50vw + 50%);
    position: relative;
    padding: 0 0;
}

.full-width-container.padding {
    padding: 0 7px;
}

.full-width-container .overlay-text img, .full-width-container .columns-sticky img, .full-width-container .img-bg-card img {
    width: 100%;
}

/* Media
-------------------------------------*/

@media only screen and (max-width: 860px) {
    .full-banner.sticky {
        background-attachment: initial;
    }
    .image-card .card-text {
        position: relative;
        right: 0;
        top: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
    .image-card img, .image-card .card-text {
        float: none;
        width: 100%;
    }
    .image-card.right img {
        float: none;
    }
    .overlap-text {
        width: 100%;
        padding: 0 25px;
    }
    .column-element {
        display: block;
        width: 100%;
    }
    .columns-container.right .column-element:first-child {
        right: 0;
        padding-right: 0;
        padding-left: 0;
    }
    .columns-container.right .column-element:last-child {
        left: 0;
        padding-right: 0;
        padding-left: 0;
    }
    .columns-sticky .sticky-element, .columns-sticky .normal-element {
        display: block;
        width: 100% !important;
        position: initial !important;
        padding: 0 5px !important;
    }
    .indented-text {
        padding: 0 40px !important;
    }
    .column-element:last-child, .column-element:first-child {
        padding: 5px;
    }
    .sticky-element, .normal-element {
        padding: 0 5px;
    }
    .img-bg-card.sticky {
        background-attachment: initial;
    }
    .columns-container.style-two .column-element:first-child {
        width: 80%;
    }
    .columns-container.style-two .column-element:last-child {
        width: 60%;
    }
}

@media only screen and (max-width: 600px) {
    .img-bg-card {
        padding: 20px;
    }
    .columns-container.style-two .column-element:last-child {
        width: 100%;
        position: initial;
        top: 0;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        padding: 5px;
    }
    .columns-container.style-two .column-element:first-child {
        width: 100%;
    }
    .columns-container.right.style-two .column-element:first-child {
        right: 0;
    }
}