/* General Styles
-------------------------------------------------------------- */
body{
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    font-size: 16px;
    #bridge{
        font-family: 'Montserrat', sans-serif;
        *{
            font-family: 'Montserrat', sans-serif;
        }
        section#header .logo-text,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6{
            font-family: 'Montserrat', sans-serif; 
            font-weight: 600;           
        }
    }
    select{
        width: 100%;
        padding: 10px 15px;
    }
    img{
        max-width: 100%;
        height: auto;
    }
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .op-single-blog{
        label{
            display: block;
        }
        input[type=password]{
            width: 100%;
            border: 1px solid $secondary-color;
            padding: 5px;
            margin-top: 10px;
        }
        input[type=submit]{
            border-radius: 100px;
            @include generateGradient($secondary-color-light, $secondary-color);
            border: none;
            padding: 8px 35px;
            color: $white;
            margin-top: 10px;
        }
    }
    .page-content-container.page-builder-inactive{
        content: "";
        clear: both;
        display: table;
        width: 100%;
    }
    .op-single-blog,
    .comments-area{
        ul{
            margin-bottom: 1rem;
            ul{
                margin-bottom: 0;
            }
            li{
                position: relative;
                padding-left: 22px;
                &::before{
                    content: "\f101";
                    position: absolute;
                    left: 0;
                    top: 15px;
                    font-family: 'Font Awesome 5 Free';
                    font-weight: 900;
                    -moz-osx-font-smoothing: grayscale;
                    -webkit-font-smoothing: antialiased;
                    display: inline-block;
                    font-style: normal;
                    font-variant: normal;
                    text-rendering: auto;
                    line-height: 1;
                    color: $primary-color;
                }
            }    
        }
        li{
            padding-top: 10px;
            padding-bottom: 10px;
            &:not(:last-child){
                border-bottom: 1px solid #ccc;    
            }
            ul{
                li:last-child{
                    padding-bottom: 0;
                }
            }
        }
        ol{
            padding-left: 20px;
            ul{
                margin-bottom: 0;
            }
            li{
                padding-left: 0;
                &::before{
                    display: none;
                }
            }
        }
    }
    .page-content-container{
        ul:not([class]){
            margin-bottom: 1rem;
            ul{
                margin-bottom: 0;
            }
            li{
                position: relative;
                padding-left: 22px;
                &::before{
                    content: "\f101";
                    position: absolute;
                    left: 0;
                    top: 15px;
                    font-family: 'Font Awesome 5 Free';
                    font-weight: 900;
                    -moz-osx-font-smoothing: grayscale;
                    -webkit-font-smoothing: antialiased;
                    display: inline-block;
                    font-style: normal;
                    font-variant: normal;
                    text-rendering: auto;
                    line-height: 1;
                    color: $primary-color;
                }
            }    
        }
        ol{
            padding-left: 20px;
            li{
                padding-left: 0;
                &::before{
                    display: none;
                }
            }
        }
    }
    a{
        color: $primary-color;
        &:hover{
            text-decoration: none;
            color: $primary-color;
        }
    }
    blockquote {
        padding-left: 25px;
        border-left: 5px solid #ccc;
    }
    .secondary-button{
        @include generateGradient($secondary-color-light, $secondary-color);
        padding: 10px 28px;
        border-radius: 100px;
        color: #fff;
        font-size: 16px;
        display: inline-block;
        min-width:120px;
        text-align: center;
        border: none;
        cursor: pointer;
          &:hover{
              @include invertGradient($secondary-color-light, $secondary-color);
              color: #fff;
          }
    }
    .primary-button{
        @include generateGradient($primary-color-light, $primary-color);
        color: $white;
        padding: 10px 28px;
        border-radius: 100px;
        display: inline-block;
        position: relative;
        min-width: 120px;
        text-align: center;
        border: none;
        cursor: pointer;
        &:hover{
            color: #fff;
            @include invertGradient($primary-color-light, $primary-color);
        }
    }
    .transparant-button{
        border: 2px solid $primary-color;
        color: $white;
        background-clip: padding-box;
        padding: 8px 26px;
        border-radius: 100px;
        display: inline-block;
        position: relative;
        min-width: 150px;
        text-align: center;
        &:hover{
            padding: 10px 28px;
            @include invertGradient($primary-color-light, $primary-color);
            border: none;
            color: $white;
        }
    } 
    &.page{
        .page-title{
            padding-top: 50px;
            h1{
                margin-bottom: 0;
            }
        }       
    }
    .page-content-container.page-builder-inactive{
        padding-top: 50px;
        padding-bottom: 50px;
    }

    &.page-template-template-whmcs{
        .page-content-container,
        .page-content-container.page-builder-inactive{
            padding-top: 0;
            padding-bottom: 0;
        }    
    }

    &.page{
        .comments-area{
            .comment-respond {
                padding: 0 0 60px 0;
            }
        }
        .comment-list{
            margin-bottom: 40px;
        }
    }
    .menu-item i._mi{
        margin-top: 0;
    }
    .sub-menu{
        .menu-item i._mi{
            min-width: 35px;
            color: #039ff5;
        }
    } 
}  
.white-color{
    color: $white;
}
.primary-color{
    color: $primary-color;
}
.secondary-color{
    color: $secondary-color;
}   
.primary-background-color{
    background: $primary-color;
}
.secondary-background-color{
    background: $secondary-color;
}    
.primary-background-gradient{
    @include generateGradient($primary-color-light, $primary-color);
    position: relative;
    &::before{
        height: calc(100% + 1px);
        width: 100%;
        content: "";
        position: absolute;
        @include generateGradient($primary-color-light, $primary-color);
        top: 0;
        left: 0;
        z-index: -1;
    }
    .heading-style-1{
        &::before{
            background: $secondary-color;
        }
    }
}
.primary-background-gradient-2{
    @include twoColorGradient($primary-color, $primary-color-light);
    position: relative;
    &::before{
        height: calc(100% + 1px);
        width: 100%;
        content: "";
        position: absolute;
        @include twoColorGradient($primary-color, $primary-color-light);
        top: 0;
        left: 0;
        z-index: -1;
    }
    .heading-style-1{
        &::before{
            background: $secondary-color;
        }
    }
}
.primary-background-gradient-with-opacity{
    position: relative;
    &::before{
        height: calc(100% + 1px);
        width: 100%;
        content: "";
        position: absolute;
        @include generateGradientWithOpacity($primary-color, $primary-color-light, 0.5);
        top: 0;
        left: 0;
    }
    .heading-style-1{
        &::before{
            background: $secondary-color;
        }
    }
}
.secondary-background-gradient{
    @include generateGradient($secondary-color, $secondary-color-light);
    position: relative;
    &::before{
        height: calc(100% + 1px);
        width: 100%;
        content: "";
        position: absolute;
        @include generateGradient($secondary-color, $secondary-color-light);
        top: 0;
        left: 0;
        z-index: -1;
    }
}
.secondary-background-gradient-2{
    @include twoColorGradient($secondary-color, $secondary-color-light);
    position: relative;
    &::before{
        height: calc(100% + 1px);
        width: 100%;
        content: "";
        position: absolute;
        @include twoColorGradient($secondary-color, $secondary-color-light);
        top: 0;
        left: 0;
        z-index: -1;
    }
}
.secondary-background-gradient-with-opacity{
    @include generateGradientWithOpacity($secondary-color, $secondary-color-light, 0.5);
    position: relative;
    &::before{
        height: calc(100% + 1px);
        width: 100%;
        content: "";
        position: absolute;
        @include generateGradientWithOpacity($secondary-color, $secondary-color-light, 0.5);
        top: 0;
        left: 0;
    }
}
.heading-style{
    &-1{
        padding-bottom: 15px;
        margin-bottom: 15px;
        position: relative;
        text-align: center;
        &::before{
            left: 50%;
            margin-left: -21px;
            content: "";
            position: absolute;
            bottom: 0;
            width: 42px;
            height: 2px;
            border-bottom:2px solid;
            @include mxTransition(300ms);
        } 
        &:hover{
            &:before{
                width: 62px;                
                margin-left: -31px;
            }
        }
    }
    &-2{
        padding-bottom: 15px;
        margin-bottom: 15px;
        position: relative;
        text-align: left;
        &::before{
            left: 0;
            content: "";
            position: absolute;
            bottom: 0;
            width: 65px;
            height: 2px;
            border-bottom:2px solid;
            @include mxTransition(300ms);
        } 
        &:hover{
            &:before{
                width: 85px;                
            }
        }
    }
}
.pos-absolute{
    position: absolute;
}
h1, h2, h3, h4, h5, h6{
    font-weight: 600;
}
.op-s-tilt{
    @include skewX(-12deg);
    > div{
        @include skewX(12deg);
    }
}
.op-m-tilt{
    @include skewX(-16deg);
    > div{
        @include skewX(16deg);
    }
}
.op-l-tilt{
    @include skewX(-20deg);
    > div{
        @include skewX(20deg);
    }
}
.img-rounded{
    border-radius: 5px;
    overflow: hidden;
    &::before,
    &::after{
        border-radius: 5px;
    }
}
.img-circle{
    border-radius: 50%;
    overflow: hidden;
    &::before,
    &::after{
        border-radius: 5px;
    }
}
.sow-image-container{
    line-height: 0;
}
.op-image-container{
    display: inline-block;
    position: relative;
    overflow: hidden;
    &.img-styled{
        &::before{
            content: "";
            position: absolute;
            top: -40%;
            left: -40%;
            width: 70%;
            height: 70%;
            background: $primary-color;
            opacity: 0.7;;
            @include mxTransition(500ms);
            transform: rotate(-45deg);
        }
        &:hover{
            &::before{
                left: -100%;
                transform: rotate(0);
            }
        }
        &::after{
            content: "";
            position: absolute;
            bottom: -40%;
            right: -100%;
            width: 70%;
            height: 70%;
            background: $primary-color;
            opacity: 0.7;
            @include mxTransition(500ms);
            transform: rotate(0);
        }
        &:hover{
            &::after{
                right: -40%;
                transform: rotate(-45deg);
            }
        }    
    }
}
.custom-list{
    li{
        display: block;
        padding-top: 10px;
        padding-bottom: 10px;
        span{
            display: inline-block;
            vertical-align: top;
            width: calc(100% - 40px);
            &[class^=sow-]{
                margin-top: 4px;
                padding-right: 15px;
                width: auto;
            }
        }
    }
}
.enable-shadow{
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25); 
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25); 
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
}
h1{
    margin-bottom: 15px;
}
h2{
    margin-bottom: 15px;
}
h3, .h3{
    margin-bottom: 15px;
}
h4, .h4{
    margin-bottom: 15px;
}
.section-404{
    padding-top: 100px;
    padding-bottom: 100px;
    text-align: center;
    i{
        font-size: 50px;
        border: 5px solid $secondary-color;
        color: $primary-color;
        padding: 15px 31px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}
.d-flex{
    display: flex;
}
.flex-wrap{
    flex-wrap: wrap;
}
.align-items-center{
    align-items: center;
}
.no-gutters{
    > *{
        padding: 0;
    }
}
/* General Styles
-------------------------------------------------------------- */

.op-preloader{
    position: fixed;
    top: 0;
    left: 0;
    background: $primary-color;
    z-index: 200;
    width: 100%;
    height: 100%;
}
.op-ellipsis {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
  }
  .op-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: $white;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .op-ellipsis div:nth-child(1) {
    left: 8px;
    animation: op-ellipsis1 0.6s infinite;
  }
  .op-ellipsis div:nth-child(2) {
    left: 8px;
    animation: op-ellipsis2 0.6s infinite;
  }
  .op-ellipsis div:nth-child(3) {
    left: 32px;
    animation: op-ellipsis2 0.6s infinite;
  }
  .op-ellipsis div:nth-child(4) {
    left: 56px;
    animation: op-ellipsis3 0.6s infinite;
  }
  @keyframes op-ellipsis1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes op-ellipsis3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes op-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(24px, 0);
    }
  }