/*

Description: Useful Classes
Version: 1.0
Author: BeeSoft - Web & Mobile Solutions
Author URI: http://www.beesoft.it

/* 	==============================================================================================
	USEFUL CLASSES
============================================================================================== 	*/

.bg-cover {

	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;

	&.center-top {

		background-position: center top !important;

	}

	&.center-bottom {

		background-position: center bottom !important;

	}

}

.bg-attachment {

	background-attachment: initial !important;

	// Desktop Wide from 1280px
	@media only screen and (min-width: 1280px) {

		background-attachment: fixed !important;

	}

}

.container-fluid {

	max-width: 95vw;

	&.full-width {

		max-width: 95vw;

	}

	// Wide Screen
	@media only screen and (min-width: 1280px) {

		max-width: 1400px;

		&.full-width {

			max-width: 90vw;

		}

	}

	// Laptop 15"/13"
	@media only screen and (min-width: 1280px) and (max-width: 1440px) {

		max-width: 90vw;

	}

	// Tablet & Smartphone Common rules
	@media only screen and (max-width: 991px),
	only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) {

	}

	// Tablet Portrait
	@media only screen and (min-width: 768px) and (max-width: 991px),
	only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) {

	}

	// Smartphone Portrait
	@media only screen and (max-width: 767px) {

		max-width: 100vw;
		padding: 0 1.5rem;

		&.full-width {

			max-width: 100vw;

		}

	}

	// Smartphone Landscape
	@media only screen and (min-width: 480px) and (max-width: 767px) {

	}


}

.hook-link {

	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 987;
	font-size: 0;

}

/* 	==============================================================================================
	RESET
============================================================================================== 	*/

* {

	outline: none !important;
	-webkit-overflow-scrolling: touch;

}

html,
body {

	font-family: $font1;
	font-size: $font-size;
	font-weight: 300;

}

h1,
h2,
h3,
h4,
h5 {

	font-family: $font2;
	margin: 0 0 0.5rem 0;
	line-height: 120%;

}

img {

	width: 100%;
	height: auto;
	max-width: 100%;
	display: inline-block;
	flex-shrink: 0;

}

p {

	line-height: 160%;
	margin: 0 0 0.5rem 0;
	color: $color-dark-text;

	a {

		color: inherit;
		text-decoration: underline;

		&:hover{

			text-decoration: none;

		}

	}

}

a {

	color: $color-link;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	text-decoration: none;
	@include transition(0.6s);

	&:hover {

		text-decoration: none;

	}

}

em,
strong {

	font-family: inherit;
	font-size: inherit;
	color: inherit;

}

.figure-4-3{
    aspect-ratio: 4/3;
    overflow: hidden;
    img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.pagination{
    .page-item{
        line-height: 1;
        a,span{
            display: inline-flex;
            width: 36px;
            height: 36px;
            border: solid 1px #ccc;
            align-items: center;
            justify-content: center;
        }
        &.active{
            background-color: #ccc;
            font-weight: 600;
        }
        & + .page-item{
            margin-left: .5rem;
        }
    }
}