/* ------------------------------
		 Helpers
------------------------------ */
.page404{
    width:600px;
    margin:auto;
    .content{
        text-align: center;
        h1{
            font-size: 200px;
            color:$base-color;
                line-height: 1;
                margin-bottom:30px;
        }
        h3{
            margin-bottom:10px;
        }
        p{
            margin-bottom:30px;
        }
    }
}

.pagination{
    padding:0px 0px 50px 0px;
    ul{
        text-align: center;
        margin: auto;
        li a {
            display: block;
            min-width:35px;
            height: 35px;
            padding: 0 4px;
            border-radius: $rd-circle;
            background-color: transparent;
            border:1px solid $base-color;
            text-align: center;
            margin-right:8px;
            line-height: 35px;
            @include easeInOut(0.7);

            color:$base-color;
            font-weight: 700;
            i{
                line-height: 35px;
            }
            &.active ,
            &:hover{
                background-color: $base-color;
                @include shadow();
                color:$white-color;
            }
        }
        li:last-child a{
            margin-right:0px;
        }
    }
}

.search{
	position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: $light-color;
    z-index: 999999;
    padding:0px;
    display: flex;
    align-items: center;
    @include easeInOut(0.7);
    transform: translate(0px, 0px) scale(1, 1);
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    &-width{
        max-width:600px;
        margin:auto;
        position: relative;

    }
	.close{
	    position: fixed;
    	top: 30px;
        right: 30px;
    	color: $white-color;
    	background-color: $base-color;
    	border: none;
    	opacity: 1;
    	visibility: visible;
    	height: 35px;
    	width: 35px;
    	border-radius: $rd-circle;
        cursor: pointer;
        &:hover{
            opacity: 1 !important;
            background-color: $base-color;
        }
	}

	&-form{
		text-align: center;
    	position: absolute;
        top: 50%;
        left:50%;
		border-radius: 40px;
		width:100%;
		transform:translate(-50%,-50%);
		display: flex;
        justify-content: center;
        @include shadow();
		input{
			font-size: 16px;
    		width: 100%;
    		height: 100%;
    		position: relative;
    		background-color: $white-color;
    		color: inherit;
			font-weight: 600;
			border-radius: 40px 0px 0px 40px;
			padding:15px 10px 15px 30px;
            z-index: 1;
            border:1px solid $eee;
             @include easeInOut(0.7);
		}
		.search-btn{
    		background-color:$base-color;
    		box-shadow: none;
    		border:0px ;
			cursor: pointer;
			border-radius: 0px 40px 40px 0px;
            width:130px;
            font-weight: 700;
            color:$white-color;
            text-transform: capitalize;
            @include easeInOut(0.5);
            &:hover{
                background-color:$base-color;
                color:$white-color;
            }
		}
	}
}

.btn-custom{
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    position: relative;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    font-size: $f-s-p;
    font-weight:600;
    padding: 8px 22px;
    text-transform: capitalize;
    border-radius: $rd-round;
    background-color: $base-color;
    color:$white-color;
    border:0px;
    @include easeInOut(0.5);

    &:hover,
    &:focus{
        color:$white-color;
        background-color: $base-color;
        outline: none;
        opacity: 0.8;
    }
}

.link{
    background-color:$base-color;
	color:$white-color !important;
	padding: 1px 10px;
	display: inline-flex;
	text-align: center;
	font-size:13px;
    border-radius: $rd-round;
    font-weight: 700 !important;
    text-transform: capitalize;
    @include easeInOut(0.5);
    &:hover{
        color:$white-color;
        background-color: $dark-color;
    }
}

.mb-20{
    margin-bottom:20px;
}
.mt--10{
   margin-top:-10px;
}
.pt-55{
    padding-top:55px !important;
}

/*slider switch */
.theme-switch {
    display: inline-block;
    height: 20px;
    position: relative;
    width: 40px;
    &-wrapper{
        display: flex;
        align-items: center;
        margin-right: 15px;
        label{
            margin-bottom: 0px !important;
        }
    }
    input {
        display:none;
    }
}


.slider {
    background-color: transparent;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    border:1px solid $text-color;
    @include easeInOut(0.4);
    &:before {
        @include after(4px,auto,12px,12px);
        background-color: $text-color;
        bottom: 3px;
        @include easeInOut(0.4);
        border:1px solid $text-color;
    }
    &.round {
        border-radius: 34px;
        &:before {
            border-radius: $rd-circle;
        }
    }
}

input:checked + .slider {
    background-color: transparent;
    border:1px solid $font-color;
    &:before {
        transform: translateX(18px);
        background-color: $font-color;
    }
}