/* ============================
   Global Styles
============================ */
* {
    scroll-margin-top: 60px;
}

/* ============================
   Remove from Core Theme
============================ */
.hottubtips-template .fa-external-link-alt {
    display: none;
}

/* ============================
   Layout & Structure
============================ */
.hottubtips-template .ht101-hero-secton {
    position: relative;
    padding:  0;
    margin:   0;
}

.hottubtips-template .breadcrumbs {
    padding-top: 20px;
}

.hottubtips-template .breadcrumbs .breads {
    display: flex;
}

.hottubtips-template .breadcrumbs .breads li:nth-of-type(1) span.caret {
    padding: 0 6px 0 4px;
}

.hottubtips-template .titleInfo {
    padding: 0 0 20px;
}

.hottubtips-template .btn-wrapper {
    margin: 56px auto;
    text-align: center;
}

.hottubtips-template .elementor-section {
    position: relative;
}

.hottubtips-template .shortcode_social {
    padding: 0 0 70px 72px;
}

.hottubtips-template figure {
    position:   relative;
    margin:     24px auto!important;
}

.hottubtips-template figure  img {
    margin: 16px 0;
    width:  100%;
}

.hottubtips-template .htintro {
    max-width: 1233px;
    position:  relative;
    margin:    auto;
    padding:   0 16px;
}

.hottubtips-template .blogInfo {
    max-width: 780px;
    position:  relative;
    margin:    48px auto 0;
    padding:   0;
}

.hottubtips-template .byline {
    display:     flex;
    font-size:   16px;
    line-height: 20px;
    font-weight: 400;
}

.hottubtips-template .dateModified {
    margin-right: 4px;
}

.hottubtips-template .likesBox,
.hottubtips-template .elementor-section {
    max-width: 776px;
    position:  relative;
    margin:    16px auto 56px;
    padding:   0;
}

.hottubtips-template .elementor-widget-wrap {
    padding: 0!important;
}

.hottubtips-template .byline,
.hottubtips-template .elementor-section,
.hottubtips-template .likesBox {
    padding-right: 16px;
    padding-left:  16px;
}

/* ============================
   Typography
============================ */

.hottubtips-template .elementor-section p,
.hottubtips-template .elementor-section p a,
.hottubtips-template .elementor-section li,
.hottubtips-template .elementor-section li a,
.hottubtips-template .elementor-section .paragraph,
.hottubtips-template .elementor-section .list-item {
    font-size:   20px;
    line-height: 30px;
    margin:      16px 0;
}

.hottubtips-template .elementor-section p > sup,
.hottubtips-template .elementor-section p > sub,
.hottubtips-template .elementor-section .subscript,
.hottubtips-template .elementor-section .superscript {
    margin:   0 1px;
    position: relative;
}

.hottubtips-template .elementor-section h1,
.hottubtips-template .elementor-section .h-one,
.htintro h1.titleInfo {
    margin:      56px auto 56px;
    font-size:   50px;
    line-height: 60px;
    max-width:   746px;
}

.hottubtips-template .elementor-section h2,
.hottubtips-template .elementor-section .h-two {
    margin:      56px 0 8px;
    font-size:   30px;
    line-height: 38px;
    color:       #F47A55;
}

.hottubtips-template .elementor-section h3,
.hottubtips-template .elementor-section .h-three {
    margin:         40px 0 8px;
    font-size:      20px;
    line-height:    26px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hottubtips-template .elementor-section h4,
.hottubtips-template .elementor-section .h-four {
    font-size:   20px;
    line-height: 30px;
    margin: 8px 0;
}

.hottubtips-template .elementor-section h5,
.hottubtips-template .elementor-section .h-five {
    font-size:   16px;
    line-height: 20px;
    margin: 8px 0;
}

.hottubtips-template .elementor-section h6,
.hottubtips-template .elementor-section .h-six,
.hottubtips-template .elementor-section figure figcaption p,
.hottubtips-template .elementor-section figure figcaption p a {
    font-size:   15px;
    line-height: 20px;
    font-style:  italic;
    margin: 8px 0;
}

/* ============================
   Typography Font Weights
============================ */
.hottubtips-template .elementor-section h1,
.hottubtips-template .elementor-section .h-one,
.hottubtips-template h1.titleInfo,
.hottubtips-template .elementor-section h3,
.hottubtips-template .elementor-section .h-three {
    font-weight: 600;
}

.hottubtips-template .elementor-section h2,
.hottubtips-template .elementor-section .h-two,
.hottubtips-template .elementor-section h4,
.hottubtips-template .elementor-section .h-four {
    font-weight: 700;
}

.hottubtips-template .elementor-section h5,
.hottubtips-template .elementor-section .h-five,
.hottubtips-template .elementor-section h6,
.hottubtips-template .elementor-section .h-six,
.hottubtips-template .elementor-section p,
.hottubtips-template .elementor-section li,
.hottubtips-template .elementor-section .paragraph,
.hottubtips-template .elementor-section .list-item {
    font-weight: 400;
}

.hottubtips-template .elementor-section figure figcaption p a {
    font-weight: 700;
}

/* ============================
   Block Quotes
============================ */
.hottubtips-template .elementor-section .block-quote {
    position: relative;
    padding: 32px;
}

.hottubtips-template .elementor-section .block-quote p:first-of-type::after,
.hottubtips-template .elementor-section .block-quote p:first-of-type::before {
    content: '"';
    position: relative;
}

.hottubtips-template .elementor-section .block-quote p:first-of-type::after {
    left: -4px;
    top:  -2px;
}

.hottubtips-template .elementor-section .block-quote p:first-of-type::before {
    right: -4px;
    top:   -2px;
}

/* ============================
   List Styles
============================ */
.hottubtips-template .elementor-section li {
    margin: 16px 0;
}

.hottubtips-template .elementor-section ul {
    list-style-type: disc;
    margin-left:     24px;
}

.hottubtips-template .elementor-section ul ul,
.hottubtips-template .elementor-section ul ol,
.hottubtips-template .elementor-section ol,
.hottubtips-template .elementor-section ol ol,
.hottubtips-template .elementor-section ol ul {
    margin-left: 20px;
}

.hottubtips-template .elementor-section ol {
    list-style-type: decimal;
}

/* ============================
   Buttons
============================ */
.hottubtips-template .btn {
    text-transform: capitalize;
}

.hottubtips-template .btn.btn-primary {
    padding:       4px 20px;
    border:        2px solid #f57b56;
    background:    #f57b56;
    color:         #fff;
    border-radius: 50px;
    font-weight:   700;
}

.hottubtips-template .btn.btn-primary:hover,
.hottubtips-template .btn.btn-primary:active {
    background:   #bc4b2a;
    border-color: #bc4b2a;
}

.hottubtips-template .elementor-section .btn.btn-secondary {
    padding:        4px 20px;
    border:         2px solid #f57b56;
    background:     #fff;
    border-radius:  50px;
    text-transform: capitalize;
    font-weight:    700;
}

.hottubtips-template .elementor-section .btn.btn-secondary:hover,
.hottubtips-template .elementor-section .btn.btn-secondary:active {
    border-color: #bc4b2a;
}

.hottubtips-template .elementor-section .btn.btn-terteriary {
    padding:       4px 20px;
    border-radius: 50px;
    border:        2px solid transparent;
}

.hottubtips-template .elementor-section .btn.btn-terteriary:hover,
.hottubtips-template .elementor-section .btn.btn-terteriary:active {
    background:   #ddd;
    border-color: #ddd;
}

/* ============================
   Social Sharing Styles
============================ */
.hottubtips-template .heateor_sss_sharing_ul a {
    max-height: 30px;
    margin:     0 8px 0 0 !important;
    color:      #f57b56;
}

.hottubtips-template .heateor_sss_sharing_ul a.heateor_sss_button_pinterest {
    padding-right: 3px !important;
}

.heateor_sss_square_count {
    font-weight: 700;
    font-size:   14px;
    margin-left: 0 !important;
}

/* ============================
   Video Player
============================ */

.hottubtips-template .elementor-section .elementor-widget-video  i,
.hottubtips-template .elementor-section .elementor-widget-video  .elementor-custom-embed-image-overlay {
    transition: 333ms;
}

.hottubtips-template .elementor-widget-video {
     box-shadow: 0 0 38px -24px rgba(0,0,0,0.6);
     
}

.hottubtips-template .elementor-widget-video i {
    color: #fff;
}

.hottubtips-template .elementor-section .elementor-widget-video .elementor-widget-container {
     background-color: black;
}

.hottubtips-template .elementor-section .elementor-widget-video  .elementor-custom-embed-image-overlay {
    opacity: 1;
}
 
.hottubtips-template .elementor-widget-video  .elementor-custom-embed-image-overlay:hover,
.hottubtips-template .elementor-widget-video  .elementor-custom-embed-image-overlay:active {
    opacity: 1;
}

.hottubtips-template .elementor-widget-video:hover i,
.hottubtips-template .elementor-widget-video:active i {
    color: #F47A55;
}

/* ============================
   External Link Styles
============================ */
.hottubtips-template a[target]:not(.btn)::after {
    content:        "\2000";
    background:     url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="grey" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>') center no-repeat;
    margin-left:    1px;
    vertical-align: super;
}

.hottubtips-template a.btn[target="_blank"]::after,
.hottubtips-template .heateor_sss_sharing_ul > a::after {
    content: ""!important;
    color:   transparent !important;
}

.hottubtips-template .heateor_sss_square_count {
    display:    none !important;
    visibility: hidden !important;
}

/* ============================
   Table Styles
============================ */
.hottubtips-template .elementor-section table {
    width:           100%;
    border:          1px solid #ccc;
    margin:          40px auto;
    text-align:      center;
    border-collapse: collapse;
    margin-top:      24px;
    margin-bottom:   24px;
}

.hottubtips-template .elementor-section table th {
    border-bottom: 2px solid #ddd;
}

.hottubtips-template .elementor-section table td {
    border-left:   1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/* ============================
   Media Queries
============================ */
@media (max-width: 1024px) and (min-width: 768px) {
    .hottubtips-template .htintro {
        padding: 0 24px;
}

    .hottubtips-template .elementor-section h1,
    .hottubtips-template .elementor-section .h-one,
    .htintro h1.titleInfo {
        font-size:     45px;
        line-height:   54px;
        margin-top:    40px;
        margin-bottom: 40px;
    }

    .hottubtips-template .elementor-section h2,
    .hottubtips-template .elementor-section .h-two {
        font-size:     27px;
        line-height:   34px;
        margin-top:    48px;
        margin-bottom: 0;
    }

    .hottubtips-template .elementor-section h4,
    .hottubtips-template .elementor-section .h-four {
        font-size:   20px;
        line-height: 30px;
    }
    
    .hottubtips-template .blogInfo,
    .hottubtips-template .elementor-section,
    .hottubtips-template .likesBox.inline.shortcode_social {
        padding-right: 24px;
        padding-left:  24px;
    }
    .hottubtips-template  {
       position: relative;
    }
    
    .hottubtips-template .byline,
    .hottubtips-template .likesBox {
        padding-left: 0;
    }
    
    .hottubtips-template  #main > div.likesBox.inline.shortcode_social {
        padding-left: 24px;
    }
}

@media (max-width: 767px) {
    .hottubtips-template h1.titleInfo {
        padding-bottom: 0 !important;
    }

    .hottubtips-template .elementor-section h1,
    .hottubtips-template .elementor-section .h-one,
    .htintro h1.titleInfo {
        font-size:     40px;
        line-height:   48px;
        padding-left:  0;
        margin:    32px 0;
    }

    .hottubtips-template .elementor-section h2,
    .hottubtips-template .elementor-section .h-two {
        font-size:   24px;
        line-height: 30px;
        margin-top:  40px;
        margin-bottom: 0;
    }

    .hottubtips-template .elementor-section h3,
    .hottubtips-template .elementor-section .h-three {
        font-size:      18px;
        line-height:    23px;
        letter-spacing: 2px;
        margin-top:     32px;
        margin-bottom:  8px;
    }

    .hottubtips-template .elementor-section h4,
    .hottubtips-template .elementor-section .h-four {
        font-size:   18px;
        line-height: 27px;
    }

    .hottubtips-template .elementor-section h5,
    .hottubtips-template .elementor-section .h-five,
    .hottubtips-template .byline {
        font-size:   15px;
        line-height: 19px;
    }

    .hottubtips-template .byline {
        flex-direction: column;
    }

    .hottubtips-template .elementor-section p,
    .hottubtips-template .elementor-section li,
    .hottubtips-template .elementor-section p a,
    .hottubtips-template .elementor-section li a,
    .hottubtips-template .elementor-section .paragraph,
    .hottubtips-template .elementor-section .list-item {
        font-size:   18px;
        line-height: 27px;
        font-weight: 400;
    }

    .hottubtips-template .elementor-section p a,
    .hottubtips-template .elementor-section li a {
        font-weight: 700;
    }

    .hottubtips-template .elementor-section h6,
    .hottubtips-template .elementor-section .h-six,
    .hottubtips-template .elementor-section figure figcaption p,
    .hottubtips-template .elementor-section figure figcaption p a {
        font-size:   14px;
        line-height: 19px;
    }

    .hottubtips-template .byline,
    .hottubtips-template .likesBox {
        padding-left: 0;
    }

    .hottubtips-template .blogInfo,
    .hottubtips-template .elementor-section,
    .hottubtips-template .likesBox.inline.shortcode_social {
        padding-right: 16px;
        padding-left: 16px;
    }

    .hottubtips-template .blogInfo {
        margin-top: 32px;
    }

    .hottubtips-template .likesBox,
    .hottubtips-template .byline {
        max-width: 366px;
        margin:    16px auto;
        padding:   0;
    }

    .hottubtips-template .likesBox,
    .hottubtips-template .byline + .likesBox.inline {
        max-width: 366px;
        position:  relative;
        margin:    0 auto 32px;
        padding:   0;
    }
    
    .hottubtips-template .likesBox.inline.shortcode_social {
        margin-left: 0;
    }

    .hottubtips-template .elementor-section .block-quote {
        position: relative;
        padding: 24px;
    }
}