.u {
    &__bg {
        @include position(absolute, 0px 0px 0px 0px);
        z-index: 0;
        width: 100%;
        display: block;
        height: 100%;
        background-size: cover;
        background-position: 50% 50%;
    }
    &__mobile-space {
        display: block;
        @include tablet {
            display: none;
        }
    }
    &__angle-box {
        $offset-width: 30px;
        $radius-length: 18px;
        $line-width: 2px;
        $color: white;
        position: relative;
        opacity: 0.8;
        &-1 {
            background-color: $color;
            width: 100%;
            position: absolute;
            display: block;
            height: $line-width;
            span {
                width: $offset-width;
                height: $line-width;
                background-color: $color;
                display: block;
                content: '';
                right: -$offset-width;
                position: absolute;
            }
            //margin-left: -4%;
            &:before {
                width: $radius-length;
                height: $radius-length;
                display: block;
                content: '';
                position: absolute;
                left: -$radius-length;
                top: -$radius-length;
                border-color: red;
                border-radius: 100px 0 0 0;
                z-index: 2;
                border: 1px solid $color;
                border-bottom: 0px;
                border-right: 0px;
            }
            &:after {
                width: $offset-width;
                height: $line-width;
                background-color: $color;
                display: block;
                content: '';
                left: -$offset-width;
                position: absolute;
            }
        }
        &-2 {
            background-color: $color;
            width: $line-width;
            position: absolute;
            display: block;
            height: 100%;
            //margin-top: -4%;
            right: 0px;
            &:before {
                width: $radius-length;
                height: $radius-length;
                display: block;
                content: '';
                position: absolute;
                left: 0px;
                top: -$radius-length;
                border-radius: 0 100px 0 0;
                z-index: 2;
                border: 1px solid $color;
                border-bottom: 0px;
                border-left: 0px;
            }
            &:after {
                width: $line-width;
                height: $offset-width;
                background-color: $color;
                display: block;
                content: '';
                top: -$offset-width;
                position: absolute;
            }
            span {
                height: $offset-width;
                width: $line-width;
                background-color: $color;
                display: block;
                content: '';
                bottom: -$offset-width;
                position: absolute;
            }
        }
        &-3 {
            background-color: $color;
            width: 100%;
            position: absolute;
            display: block;
            height: $line-width;
            //margin-left: -4%;
            bottom: 0px;
            transform: rotate(180deg);
            &:before {
                width: $radius-length;
                height: $radius-length;
                display: block;
                content: '';
                position: absolute;
                left: -$radius-length;
                top: -$radius-length;
                border-color: red;
                border-radius: 100px 0 0 0;
                z-index: 2;
                border: 1px solid $color;
                border-bottom: 0px;
                border-right: 0px;
            }
            &:after {
                width: $offset-width;
                height: $line-width;
                background-color: $color;
                display: block;
                content: '';
                left: -$offset-width;
                position: absolute;
            }
            span {
                width: $offset-width;
                height: $line-width;
                background-color: $color;
                display: block;
                content: '';
                right: -$offset-width;
                position: absolute;
            }
        }
        &-4 {
            background-color: $color;
            width: $line-width;
            position: absolute;
            display: block;
            height: 100%;
            //margin-top: -4%;
            left: 0px;
            transform: rotate(180deg);
            &:before {
                width: $radius-length;
                height: $radius-length;
                display: block;
                content: '';
                position: absolute;
                left: 0px;
                top: -$radius-length;
                border-radius: 0 100px 0 0;
                z-index: 2;
                border: 1px solid $color;
                border-bottom: 0px;
                border-left: 0px;
            }
            &:after {
                width: $line-width;
                height: $offset-width;
                background-color: $color;
                display: block;
                content: '';
                top: -$offset-width;
                position: absolute;
            }
            span {
                height: $offset-width;
                width: $line-width;
                background-color: $color;
                display: block;
                content: '';
                bottom: -$offset-width;
                position: absolute;
            }
        }
    }
}

.u {
   

   

    
    &__half {
        width: 100%;
        float: left;
        @include tablet {
            width: 50%;
        }
    }
    &__mobile-only {
        display: block;
        @include tablet {
            display: none;
        }
    }
     &__tablet-only {
         display: block;
        @include desktop {
           display: none;
        }
    }
     &__desktop-only {
        display: none;
        @include desktop {
            display: block;
        }
    }
    &__tablet-desktop-only {
        display: none;
        @include tablet {
            display: block;
        }
    }
    &__third {
        width: 100%;
        float: left;
        @include tablet {
            width: 33.333%
        }
    }
}

.u {
    &__description {
        font-size: 24px * .5;
        line-height: 42px * .5;
        font-family: lora;
        @include tablet {
            font-size: 23px * .7;
            line-height: 36px * .7;
        }
        @include desktop {
            font-size: 23px * .85;
            line-height: 36px * .85;
        }

         @include max {
            font-size: 23px;
            line-height: 36px;
        }
    }
    &__title--bold {
        transition: margin 0.5s ease;
        font-size: 92px * .5;
        line-height: 1em;
        text-transform: uppercase;
        font-weight: bold;
        color: white;
        @include tablet {
            font-size: 92px;
        }
    }
}


body .bullets-selection {
    @include desktop {
        opacity: 0.35;
        transition: opacity 0.5s ease-out;
    }
    &.in-view {
        opacity:1;
    }

}


.pu {
    &__bullets {
        max-width: 400px;
        position: relative;
        margin-top: 20px;
        @include tablet {
            margin-top: 80px;
        }
    }
    &__bullets-item {
        position: relative;
        padding-bottom: 20px;
    }
    &__bullet-item-icon {
        display: none;
        @include tablet {
            display: block;
            position: absolute;
            left: -90px;
            top: -20px;
        }
    }
    &__bullet-item-title {
        font-size: 12px;
        font-weight: bold;
        color: #73c0d1;
        text-transform: uppercase;
        @include tablet {
            font-size: 22px;
            line-height: 1em;
            color: #927d4b;
        }
        @include desktop {
            font-size: 24px;
            color: #927d4b;
        }
    }
    &__bullet-item-description {
        p {
            font-size: 12px;
            line-height: 1.5em;
            font-family: Lora;
            margin-top: 5px;
            margin-bottom: 15px;
            @include tablet {
                font-size: 17px;
            }
            @include desktop {
                font-size: 25px;
            }
        }
    }
    &__sup-title {
        font-size: 14px;
        padding-bottom: 1px;
        color: #bfbfbf;
        font-weight: bold;
        text-transform: uppercase;
        @include tablet {
            font-size: 22px;
            padding-bottom: 10px;
            color: #bfbfbf;
            font-weight: bold;
            text-transform: uppercase;
        }
    }
}