/* === STYLEGUIDE === */

/* -- Color -- */
:root {
    --white: white;
	--grey: rgba(247,247,249,0.9);
	--darkgrey: #CACACA;
    --black: #333333;
    --blue: #3C91E6;
    --green: #A2D729;
    --shadow: rgba(0, 0, 0, 0.1);
    --green-2: #9FCB74;
    --red: #f0506e;
}

/* -- Text Color -- */
.white {
	color: var(--white);
}

.grey {
	color: var(--grey);
}

.darkgrey {
	color: var(--darkgrey);
}

.blue {
    color: var(--blue);
}

.green {
    color: var(--green);
}

.black {
	color: var(--black);
}

/* -- Background Color -- */
.back-white {
	background-color: var(--white);
}

.back-grey {
	background-color: var(--grey);
}

.back-blue {
    background-color: var(--blue);
}

.back-green {
    background-color: var(--green);
}

.back-black {
	background-color: var(--black);
}

/* -- Tipography -- */
body {
    font-family: 'Roboto', sans-serif;
    font-display: swap;
    color: var(--black);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Ubuntu', sans-serif;   
    line-height: 1.5;
    margin: 0;
}

p {
    font-family: 'Roboto', sans-serif;   
    line-height: 1.5;
    margin: 0;
}

.span1, .span2, .span3 { 
    line-height: 1.5;
    margin: 0;
} 

h1 {
    font-size: 54px;
    font-weight: 500;
}

h2 {
    font-size: 40px;
    font-weight: 500;
}

h3 {
    font-size: 32px;
    font-weight: 500;
}

h4 {
    font-size: 24px;
    font-weight: 500;
}

h5 {
    font-size: 20px;
    font-weight: 500;
}

h6 {
    font-size: 18px;
    font-weight: 500;
}

p {
    font-size: 18px;
    font-weight: 400;
}

.span1 {
    font-size: 16px;
    font-weight: 400;
}

.span2 {
    font-size: 14px;
    font-weight: 400;
}

.span3 {
    font-size: 12px;
    font-weight: 400;
}

.span4 {
    font-size: 10px;
    font-weight: 400;
}

@media screen and (max-width: 640px) {

    h1 {
        font-size: 40px;
        line-height: 1.5;
    }

    h2 {
        font-size: 32px;
        line-height: 1.5;
    }

    h3 {
        font-size: 24px;
        line-height: 1.5;
    }

    h4 {
        font-size: 20px;
        line-height: 1.5;
    }

    h5 {
        font-size: 18px;
        line-height: 1.5;
    }

    h6 {
        font-size: 16px;
        line-height: 1.5;
    }
}

/* Text Orientation */

.center {
    text-align: center;
}

.right {
    text-align: right;
}


.btk-c-link {
    text-decoration: none;
    color: unset;
}

.btk-c-link:hover {
    text-decoration: none;
    color: unset;
}


/* === LAYOUTS ELEMENTS === */

/* -- Flex Integration -- */
@media (min-width: 640px) {

	.uk-flex-row\@s {
		flex-direction: row;
	}

	.uk-flex-column\@s {
		flex-direction: column;
	}
}

@media (min-width: 960px) {

	.uk-flex-row\@m {
		flex-direction: row;
	}

	.uk-flex-column\@m {
		flex-direction: column;
	}
}

@media (min-width: 1200px) {

	.uk-flex-row\@l {
		flex-direction: row;
	}

	.uk-flex-column\@l {
		flex-direction: column;
	}
}

@media (min-width: 1600px) {

	.uk-flex-row\@xl {
		flex-direction: row;
	}

	.uk-flex-column\@xl {
		flex-direction: column;
	}
}

/* -- General Element -- */

.btk-l-hero-100 {
	height: calc(100vh - 40px);
	background-size: cover;
}

.btk-l-menu {
	height: 80px;
}

.btk-l-sec {
	padding: 5rem 0;
}

.btk-l-sec__main {
	background-image: url(../img/slider.png), linear-gradient(rgba(34, 34, 34, 0.7), rgba(34, 34, 34, 0.7));
	background-blend-mode: multiply;
	background-size: cover;
	padding: 3rem 0;
}

.btk-l-sec__title {
	margin-bottom: 3.5rem;
}


.btk-l-sec__title h1 {
	font-size: 2rem;
}

.btk-l-sec__title h2 {
	font-size: 2rem;
}

.btk-l-sec__title h5 {
	font-size: 18px;
	font-weight: 400;
	margin-top: 2rem;
}

/* -- Header Element -- */

/* -- Header Element -- */

.btk-c-topbar {
	height: 2.5rem;
}

.btk-c-topbar a {
	margin-bottom: 0;
}

.btk-c-topbar p {
	font-size: 14px;
	margin: 0 0 0 0.5rem;
}

.btk-c-topbar i {
	color: white;
	margin-right: 2rem;
}

.btk-c-navbar__solid {
	background-color: $white !important;
}

.btk-c-logo {
	height: 3.5rem;
	margin-right: 3rem;
}

.btk-c-logo img {
	width: 100%;
}

.uk-navbar-nav>li>a {
	color: white;
	text-transform: none !important;
	font-family: 'Ubuntu', sans-serif;
}

.uk-navbar-nav>li>a.uk-active {
	color: var(--green);
	text-transform: none !important;
	font-family: 'Ubuntu', sans-serif;
}

.uk-navbar-nav>li>a:hover {
	color: var(--green);
	text-transform: none !important;
}

.uk-navbar-nav>li>a i {
	margin-left: 0.25rem;
	visibility: hidden;
}

.uk-navbar-nav>li>a:hover i {
	margin-left: 0.25rem;
	visibility: unset;
	color: white;
}

.uk-navbar-nav>li>a:focus {
	color: var(--green);
	text-transform: none !important;
}

.uk-navbar-nav>li>a:focus i {
	color: var(--green);
	visibility: unset;
}

.uk-navbar-container:not(.uk-navbar-transparent) {
	background-color: var(--black);
	box-shadow: 0px 2px 12px var(--shadow);
}

.btk-c-navbar__solid .uk-navbar-nav>li>a {
	color: var(--black);
	text-transform: none !important;
	font-family: 'Ubuntu', sans-serif;
}

.btk-c-navbar__solid .uk-navbar-nav>li>a.uk-active {
	color: var(--green);
	text-transform: none !important;
	font-family: 'Ubuntu', sans-serif;
}

.btk-c-navbar__solid .uk-navbar-nav>li>a:hover {
	color: var(--black);
	text-transform: none !important;
}

.btk-c-navbar__solid .uk-navbar-nav>li>a:hover i {
	margin-left: 0.25rem;
	visibility: unset;
	color: var(--black);
}

.btk-c-navbar__solid .uk-navbar-nav>li>a:focus i {
	color: var(--green);
	visibility: unset;
}

.btk-l-menu ul {
	list-style: none;
}

.uk-offcanvas-bar ul {
	padding-left: 0;
}

.uk-offcanvas-bar li {
	margin-bottom: 2rem;
	font-family: 'Ubuntu', sans-serif;
}

.uk-offcanvas-bar li>a.uk-active {
	color: var(--green);
}

.uk-offcanvas-bar .uk-accordion-title:hover {
	color: var(--green);
}

.uk-open>.uk-offcanvas-bar {
	padding-top: 3rem;
}

@media screen and (max-width: 640px) {
	
	.btk-c-logo {
		margin-left: 2rem;
	}
}

/* -- Modal -- */

.btk-c-modal {
	border-radius: 0.5rem;
}

.btk-c-modal .uk-modal-title {
	margin-bottom: 1.5rem;
}

.btk-c-modal .btk-share_icon {
	font-size: 1.5rem !important;
}

.btk-c-modal .btk-share_icon a {
	margin-right: 2rem;
	color: var(--blue);
}

.btk-c-modal .btk-share_icon button {
	background-color: unset;
	padding: 0;
	margin-right: 2rem;
	border: none;
	cursor: pointer;
}

.btk-c-modal .btk-share_icon button:focus {
	outline: 0;
}

.btk-c-modal .btk-share_icon button>i {
	font-size: 1.5rem !important;
	color: var(--blue);
}

.btk-c-modal .btk-share_icon {
	margin: 0.5rem 0;
}

.btk-c-modal .btk-c-post__detail p.span1 {
	text-transform: capitalize;
}

#copyLink {
	display: none;
}

/* === COMPONENTS === */

/* -- Button -- */

.btk-c-button__simple {
	max-width: 255px;
	height: 2.5rem;
	color: white;
	font-size: 14px;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 500;
	background-color: var(--green);
	border-radius: 0.5rem;
	text-transform: none !important;
}

.btk-c-button__outline {
	max-width: 255px;
	height: 2.5rem;
	font-size: 14px;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 500;
	background-color: transparent;
	border-radius: 0.5rem;
	border: 2px solid var(--green);
	text-transform: none !important;
}

/* -- Field & Form Element -- */
::placeholder {
    font-family: 'Ubuntu', sans-serif;
	font-size: 12px !important;
	color: var(--black);
}

.btk-l-form__submit {
	margin-top: 2.5rem;
}

.btk-l-form__submit .btk-c-button__simple {
	width: 80%;
	height: 3.5rem;
}

.btk-c-field__input {
	color: var(--black) !important;
	height: 40px;
	background-color: white;
	border-radius: 0.5rem;
	border: none;
}

.btk-c-field__select {
	color: var(--black) !important;
	font-size: 12px !important;
	height: 40px;
	background-color: white;
	border-radius: 0.5rem;
	border: none;
}

.btk-c-field__textarea {
	color: var(--black) !important;
	font-size: 12px !important;
	background-color: white;
	border-radius: 0.5rem;
	border: none;
}

.btk-c-field__checkbox {
	border: 1px solid white;
	margin-right: 0.5rem;
}

.uk-checkbox:checked {
	background-color: var(--blue) !important;
}

.btk-c-field__group {
	margin-bottom: 0.5rem;
	width: 100%;
}

.btk-c-field__group label {
	font-size: 14px;
}

.uk-form-danger {
	font-size: 14px;
	display: none;
}

.btk-c-form__alert {
	display: none;
	border-radius: 4px;
	background-color: var(--green-2);
	color: white;
	text-align: center;
	padding: 1rem;
	margin-top: 1rem;
}

.was-validated .btk-c-field__input:invalid {
	border-color: var(--red);
}

.was-validated .btk-c-field__checkbox:invalid {
	border-color: var(--red);
}

.was-validated .btk-c-field__select:invalid {
	border-color: var(--red);
}

.was-validated .btk-c-field__textarea:invalid {
	border-color: var(--red);
}

.was-validated .btk-c-field__input:invalid~.uk-form-danger {
	display: block;
}

.was-validated .btk-c-field__checkbox:invalid~.uk-form-danger {
	display: block;
}

.was-validated .btk-c-field__select:invalid~.uk-form-danger {
	display: block;
}

.was-validated .btk-c-field__textarea:invalid~.uk-form-danger {
	display: block;
}

.was-validated .btk-c-form__alert.btk-success {
	display: block;
}

@media screen and (max-width: 640px) {

	.btk-c-field__group {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

}

/* -- Card -- */
@import "card";


/* === SECTION ELEMENT === */

/* -- Claim -- */

.btk-c-claim {
	width: 100%;
	margin: 2rem auto 0 auto;
}

.btk-c-claim h1 {
	font-size: 32px;
}

.btk-c-claim p {
	width: 80%;
	padding: 2.5rem 0 1rem 0;
}

.btk-c-claim__short {
	width: 100%;
	margin: 2rem auto 0 auto;
}

.btk-c-claim__short h1 {
	font-size: 32px;
}

.btk-c-claim__short p {
	width: 80%;
	padding: 1rem 0 1rem 0;
}

.btk-c-claim__short .btk-c-button__simple {
	width: 100%;
	height: 56px;
	margin-top: 2.5rem;
}

.btk-c-image img {
	width: 70%;
	height: 70%;
	margin: 0 auto;
}

.btk-l-hero-auto .btk-c-claim {
	padding-top: 5rem;
}

.btk-c-claim__form {
    padding: 2.5rem 2rem;
    background-color: rgba(60, 145, 230, 0.4);
}

.btk-c-claim__form h4 {
    margin-bottom: 2rem ;
}


@media screen and (max-width: 960px) {

	.btk-l-hero-auto .btk-c-claim p {
		width: 100%
	}

	.btk-c-claim .btk-c-image {
		display: none;
	}
}

/* -- Text +  Image -- */

.btk-l-text__content h2 {
	font-size: 2rem;
}

.btk-l-text__content h5 {
	font-weight: 400;
	margin-top: 2rem;
}

.btk-l-text__content p {
	margin-top: 2rem;
}

.btk-l-text__image img {
	width: 80%;
	object-fit: contain;
}

@media screen and (max-width: 640px) {

	.btk-l-text__image img {
		width: 100%;
		margin-top: 3rem;
	}
}

@media (min-width: 640px) and (max-width: 960px) {

	.btk-l-text__image img {
		width: 80%;
		margin-top: 3rem;
	}
}


/* -- Intro Section -- */

.btk-l-text__info {
	background-color: var(--grey);
	padding: 3.5rem 2rem;
}

.btk-l-text__info h3 {
	margin-bottom: 1rem;
}

.btk-l-text__dot {
	padding: 1rem 0;
	border-bottom: 1px solid var(--darkgrey);
}

.btk-l-text__dot h6 {
	font-weight: 500;
}

.btk-l-text__dot p {
	margin-left: 0.25rem;
}

.btk-l-text__dot i {
	margin-left: 0.25rem;
}

.btk-l-text__dot:last-of-type {
	border-bottom: unset !important;
}

@media screen and (max-width: 960px) {

	.btk-l-text__info {
		margin-top: 2rem;
	}
}

/* -- user Section -- */

.btk-c-card__user {
	background-color: white;
	border-radius: 0.5rem;
	padding: 2rem;
	margin: 1rem;
}

.btk-c-card__user img {
	width: 5rem;
	height: 5rem;
	margin-bottom: 1.5rem;
}

/* -- Sezione Unitus -- */

@media screen and (max-width: 960px) {
	
	#unitus img {
		margin-bottom: 2rem;
	}
}

/* -- Banner Section -- */

#cta2 .btk-c-button__simple {
	margin-top: 2rem;
}

@media screen and (max-width: 960px) {

	#cta1 .btk-c-button_simple {
		margin-top: 2rem;
	}

	#cta1 h3 {
		text-align: center;
	}
}

/* --  Module Section -- */

.btk-c-accordion__card {
	background-color: white;
	padding: 1rem 1.5rem;
	border-left: 8px solid var(--black);
	margin: 1rem;
	min-height: 56px;
}

.btk-c-accordion__card p {
	font-weight: 500;
	padding-right: 1rem;
}

.uk-open>.uk-accordion-title .btk-c-accordion__card i::before{
	content: '\f107';
}


.uk-accordion-content {
	border-top: 1px solid var(--black);
	padding: 1rem 0 0 0;
}

.btk-c-accordion__dot {
	background-color: white;
	padding: 0.5rem 0;
}

.btk-c-accordion__dot i {
	color: var(--green);
	margin-right: 0.5rem;
}

.btk-c-accordion__dot p.span2 {
	font-weight: 400;
}

#module .btk-c-button__simple {
	margin-top: 2rem !important;
}

/* -- Step Section -- */

.btk-c-card__step {
	min-height: 180px;
	background-color: white;
	padding: 2rem;
	margin: 1rem;
	box-shadow: 0px 2px 12px var(--shadow);
	border-radius: 0.5rem;
}

.btk-c-step__num {
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 1.5rem;
	border-radius: 10rem;
}

.btk-c-card__step h6 {
	font-weight: 500;
	margin-bottom: 0.5rem;
}

.btk-c-card__step a {
	color: var(--green);
}
