@import 'bootstrap/bootstrap';
@import 'bootstrap/variables';
@import 'bootstrap/mixins';

$font-primary: 'Roboto',Arial, sans-serif;

$primary: #5eb7b7;
$secondary: #1b2a49;

body{
    font-family: $font-primary;
    font-size: 14px;
    line-height: 1.8;
    font-weight: normal;
}
a {
    transition: .3s all ease;
    color: $primary;
    &:hover, &:focus {
        text-decoration: none !important;
        outline: none !important;
        box-shadow: none;
    }
}
button {
    transition: .3s all ease;
    &:hover, &:focus {
        text-decoration: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
}
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
    line-height: 1.5;
    font-weight: 400;
    font-family: $font-primary;
}


//COVER BG
.img,
.blog-img,
.user-img{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.ftco-footer-social {
    li {
        list-style: none;
        margin: 0 10px 0 0;
        display: inline-block;
        a {
            height: 40px;
            width: 40px;
            display: block;
            background: rgba($black, .05);
            border-radius: 50%;
            position: relative;
            span {
                position: absolute;
                font-size: 20px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            &:hover {
                color: $white;
            }
        }
    }
}


//FORM CONTROL
.form-control {
    height: 52px;
    background: $white;
    color: $black;
    font-size: 14px;
    border-radius: 5px;
    box-shadow: none;
    border: 1px solid rgba(0,0,0,.1);
    &:focus, &:active {
        outline: none !important;
        box-shadow: none;
        border: 1px solid transparent;
    }
}
textarea.form-control {
    height: inherit!important;
}

//BUTTON
.btn {
    cursor: pointer;
    @include border-radius(4px);
    box-shadow: none!important;
    font-size: 15px;
    &:hover, &:active, &:focus {
        outline: none;
    }
    &.btn-primary {
        background: $primary !important;
        border: 1px solid $primary !important;
        color: $white !important;
        &:hover {
            border: 1px solid $primary;
            background: transparent;
            color :$primary;
        }
        &.btn-outline-primary {
            border: 1px solid $primary;
            background: transparent;
            color :$primary;
            &:hover {
                border: 1px solid transparent;
                background: $primary;
                color :$white;
            }
        }
    }
}


.ftco-section{
    background: $white;
    h2{
        margin-bottom: 0;
    }
}



//MODAL 01
.modal-dialog{
    max-width: 900px;
}
.modal-content{
    border: none;
    position: relative;
    padding: 0 !important;
    font-size: 14px;
    border-radius: 0;
    -webkit-box-shadow: 0px 10px 34px -15px rgba(0,0,0,0.24);
    -moz-box-shadow: 0px 10px 34px -15px rgba(0,0,0,0.24);
    box-shadow: 0px 10px 34px -15px rgba(0,0,0,0.24);
    .modal-header{
        padding: 0;
        border: none;
    }
    button.close{
        position: absolute;
        top: 0;
        right: 0;
        padding: 0;
        margin: 0;
        width: 40px;
        height: 40px;
        z-index: 1;
        text-shadow: none;
        background: rgba(0,0,0,.1);
        color: $white;
    }
    .modal-body{
        border: none;
        position: relative;
        z-index: 0;
        color: rgba(255,255,255,.8);
        &.color-1{
            background: $primary;
        }
        &.color-2{
            background: $secondary;
        }
        .icon{
            span{
                font-size: 10vw;
                line-height: 1;
                @include media-breakpoint-down(sm){
                    font-size: 100px;
                }
            }
        }
        .icon-2{
            position: absolute;
            top: 0;
            left: 20px;
            font-size: 30px;
        }
        a{
            &:hover{
                color: $primary;
            }
        }
    }
    .label{
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 1px;
    }
    .form-control{
        background: transparent;
        border: none;
        border-radius: 0;
        color: rgba(255,255,255,.7) !important;
        padding: 0;
        height: 30px;
        border-bottom: 1px solid rgba(255,255,255,.1);
        &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
            color: rgba(255,255,255,.2) !important;
        }
        &::-moz-placeholder { /* Firefox 19+ */
            color: rgba(255,255,255,.2) !important;
        }
        &:-ms-input-placeholder { /* IE 10+ */
            color: rgba(255,255,255,.2) !important;
        }
        &:-moz-placeholder { /* Firefox 18- */
            color: rgba(255,255,255,.2) !important;
        }
    }
    .btn-primary{
        background: $primary !important;
        height: 52px;
    }
}

.form-check{
    padding: 0;
}
.fill-checkbox{
    --color: #47e4bb;

    .fill-control-input{
        display: none;
        &:checked~.fill-control-indicator{
            background-color: var(--color);
            border-color: var(--color);
            background-size: 80%;
        }
        &:checked~.fill-control-description{
            color: rgba(255,255,255,.3);
        }
    }
    .fill-control-indicator{
        border-radius: 3px;
        display: inline-block;
        position: absolute;
        top: 5px;
        left: 0;
        width: 16px;
        height: 16px;
        border: 1px solid rgba(255,255,255,.4);
        transition: .1s;
        background: transperent;
        background-size: 0%;
        background-position: center;
        background-repeat: no-repeat;
        content: 'hey';
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
    }
    .fill-control-description{
        color: rgba(255,255,255,.3);
    }
}
.form-check{
    &.disabled{
        .fill-checkbox{
            --color: rgba(255,255,255,.4);
            .fill-control-description{
                color: rgba(255,255,255,.4);
            }
        }
    }
}