// -----[ CONTENT ]------------------------------------------------------------

body {
	font-size: rem-calc(15);

	&.disable-scrolling {
		overflow: hidden;
		position: static;
		height: 100vh;
		width: 100vw;
	}
}

label {
	font-size: 15px;
}

@media only screen and (min-width: 640px) {
	body {
		font-size: rem-calc(16);
	}

	label {
		font-size: 16px;
	}
}

//style temporary
.content {
	@include single-transition;
	// margin: 190px auto 0;
	margin: 80px auto 0;
	padding: 130px 0 0;
}

.hero {
	// @include img-url('bg/hero-mobile.png');
	// background-repeat: no-repeat;
	// background-position: 50% -120px;
	// background-size: 100% auto;

	background-color: #eaf3ff;
	background-image: url('#{$source}bg/shapes/hero-top.svg'), url('#{$source}bg/shapes/hero-white.svg'), url('#{$source}bg/shapes/benefits-top.svg');
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: 0 0, 0 -465px, 0 100%;
	background-size: auto;
	min-height: 600px;
	margin: 0 0 25px;

	&__content {
		text-align: center;
		width: 100%;

		p {
			color: #313d51;
			font-weight: 600;
			font-size: rem-calc(19);

			&:nth-of-type(1) {
				width: 100%;
			}
		}

		.heading {
			padding: 23px 0 20px;

			span {
				display: block;
			}
		}

		figure {
			margin: 0 0 10px;
			text-align: center;
			top: calc(50% - 175px);
			width: 100%;

			img {
				max-width: 170px;
			}
		}

		.list-check {
			margin: 0 auto 35px;
			max-width: 300px
		}
	}
}

@media only screen and (min-width: 768px) {
	.hero {
		margin: 0 0 -65px;

		&__content {
			.list-check {
				margin: 0 0 35px;
			}
		}

		.grid-x {
			min-height: 650px;
			position: relative;
		}
	}

	.hero__content {
		padding: 40px 0px;
		text-align: left;
		width: 60%;

		h1 {
			text-align: left;
		}

		p {
			&:nth-of-type(1) {
				margin: 15px 0 25px;
			}
		}

		figure {
			position: absolute;
			right: 0;
			top: calc(50% - 225px);
			width: 40%;

			img {
				max-width: 240px;
			}
		}
	}
}

@media only screen and (min-width: 768px) and (max-width: 1239px) {
	.hero {
		.grid-x {
			max-width: 860px;
			margin: 0 auto;
		}
	}
}

@media only screen and (min-width: 1024px) {
	.hero__content {
		.list-check {
			margin: 50px 0;
			max-width: 100%;
			width: 100%;

			li {
				padding-right: 15px;
				width: 50%;
			}
		}
	}

}

@media only screen and (min-width: 1240px) {
	.hero__content {
		padding: 90px 0px;
		width: 50%;

		figure {
			top: calc(50% - 255px);
			width: 50%;

			img {
				max-width: 360px;
			}
		}
	}
}

@media only screen and (min-width: 1640px) {
	.hero {
		background-size: auto, auto, contain;
		background-position: 0 0,0 -330px, 0 100%;

		.grid-x {
			min-height: 815px;
		}
	}

	.hero__content {
		padding: 145px 0px;

		figure {
			top: calc(50% - 310px);

			img {
				max-width: 360px;
			}
		}
	}
}

.list-accordion {
	border-top: 1px solid #e1e1e1;
	list-style: none;
	margin: 0 0 80px;
	width: 100%;
}

.list-accordion__item {
	border-bottom: 1px solid #e1e1e1;
	position: relative;

	a {
		margin: 0;
	}

	p {
		margin: 0;
	}

	.text-more {
		text-align: right;
	}
}

@media only screen and (min-width: 1024px) {
	.list-accordion {
		margin: 0 0 200px;

		&__link {
			font-size: rem-calc(18);
			padding: 10px 30px 10px 35px;

			i.ic-more {
				right: 30px;
			}
		}

		&__desc {
			padding: 0 40px 20px 35px;
		}
	}
}

.list-accordion__item--active {
	.list-accordion__link {
		i {
			&.ic-more {
				transform: rotate(180deg);
			}
		}
	}
}

.list-accordion__link {
	align-items: center;
	color: #313d51;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	min-height: 70px;
	padding: 10px 16px;
	width: 100%;

	&:focus {
		color: $primary-color;
		outline: none;
	}

	i {
		background-position: 50% 50%;
		position: absolute;
		height: 45px;
		left: 10px;
		width: 48px;

		&.ic-more {
			height: 18px;
			left: auto;
			right: 11px;
			top: 28px;
			width: 14px;
		}
	}
}

.list-accordion__desc {
	color: #59616e;
	display: none;
	padding: 0 40px 13px 16px;

	.text-more {
		display: none;
	}

	ul {
		margin-top: 10px;
	}

	ol {
		> li {
			&::before {
				font-size: 17px;
				left: 8px;
				top: -2px!important;
			}
		}
	}
}

.list-accordion--decimal {
	counter-reset: section;
	margin: 70px auto 145px;
	max-width: 800px;

	> li {
		&::before {
			counter-increment: section;
			content: counter(section);
			color: #7ea1d3;
			font-size: 30px;
			font-weight: 600;
			left: 25px;
			position: absolute;
			top: 10px;
		}
	}

	.list-accordion__item {
		ol {
			&.letters {
				li {
					margin: 0;

					&::before {
						color: #7ea1d3;
						top: 0;
					}
				}
			}
		}
	}

	.list-accordion__item--active {
		.list-accordion__link {
			color: #7ea1d3;
		}
	}

	.list-accordion__link {
		font-size: 18px;

		&:hover {
			color: #7ea1d3;
		}

		i.ic-more {
			right: 30px;
			top: 28px;
		}
	}
}

.list-accordion--green {
	> li {
		&::before {
			color: $primary-color;
		}
	}

	.list-accordion__item {
		ol {
			&.letters {
				li {
					&::before {
						color: $primary-color;
					}
				}
			}
		}
	}

	.list-accordion__item--active {
		.list-accordion__link {
			color: $primary-color;
		}
	}

	.list-accordion__link {
		&:hover {
			color: $primary-color;
		}
	}
}

.heading {
	padding: 25px 0;
	text-align: center;
	width: 100%;

	h1 {
		margin: 0;
	}
}

@media only screen and (min-width: 1024px) {
	.heading {
		padding: 70px 0;
	}
}


.button {
	min-width: 265px;
}

.text-center {
	text-align: center;
}

.list-none {
	list-style: none;
	margin: 0 0 25px;
}

.list-icons {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;

	&__item {
		margin-bottom: 3px;
		width: 100%;
	}

	&__head {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 0 17px;
	}
}

.list-icons__item {
	i {
		background-size: contain;
		height: 70px;
		width: 70px;
	}

	p {
		max-width: 380px;
	}

	h3 {
		@extend %short-line;
		margin: 0;
		padding: 14px 0 0;
		width: calc(100% - 85px);

		span {
			display: block;
		}
	}
}

@media only screen and (min-width: 480px) {
	.list-icons {
		flex-direction: row;

		&__item {
			margin-bottom: 40px;
			width: calc(50% - 15px);
		}
	}
}

@media only screen and (min-width: 1240px) {
	.list-icons {
		&__item {
			width: calc(25% - 35px);
		}

		&__head {
			flex-direction: column;
			align-items: flex-start;
		}
	}

	.list-icons__item {
		i {
			background-position: 0 50%;
			background-size: auto;
			height: 107px;
			margin-bottom: 15px;
			width: 107px;
		}

		h3,p {
			padding-left: 18px;
		}

		h3 {
			padding-top: 25px;
			width: 100%;
		}
	}
}

.for-whom {
	@include img-url('bg/for-whom.svg');
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
	// padding: 140px 0 90px;
	padding: 75px 0 90px;

	figure {
		text-align: center;
	}

	img {
		margin: 0 auto;
		max-width: 362px;
		width: 100%;
	}

	&__content {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		padding: 0;
		width: 100%;

		figure {
			padding: 0 20px 0 0;
		}

		figure, h2 {
			width: 50%;
		}
	}

	&__desc {
		padding: 20px 0 0;

		p {
			color: $grenade;
			font-size: rem-calc(17);
			font-weight: 600;
		}

		h2 {
			display: none;
		}
	}
}

@media only screen and (min-width: 480px) {
	.for-whom__content {
		> h2 {
			display: none;
		}
	}

	.for-whom__desc {

		h2 {
			display: block;
			width: 100%;
		}
	}
}

@media only screen and (min-width: 1024px) {
	.for-whom__desc {
		padding: 40px;
		width: 50%;

		p {
			font-size: rem-calc(20);
			max-width: 520px;
		}
	}
}

@media only screen and (min-width: 1640px) {
	.for-whom {
		padding: 240px 0 190px;
	}

	.for-whom__desc {
		p {
			font-size: rem-calc(24);
		}
	}
}

//FAQ

.faq {
	.heading {
		margin: 0 0 15px;
		padding: 20px 0 10px;
	}
}

.faq__content {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	width: 100%;

	figure {
		text-align: center;

		img {
			max-width: 180px;
		}
	}
}

.faq__desc {
	order: 1;
}

@media only screen and (min-width: 960px) {
	.faq {
		h2 {
			text-align: left;
		}
	}

	.faq__content {
		align-items: flex-start;
		flex-direction: row;
		justify-content: space-between;

		figure {
			width: 40%;

			img {
				max-width: 100%;
			}
		}
	}

	.faq__desc {
		order: 0;
		width: 55%;
	}
}

@media only screen and (min-width: 1024px) {
	.faq {
		.heading {
			margin: 0 0 50px;
		}
	}
}



.list-col {
	p {
		margin: 0;
	}

	li {
		margin-bottom: 30px;
	}
}

@media only screen and (min-width: 480px) {
	.list-col {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		li {
			width: calc(50% - 20px);

			p {
				margin: 0 0 10px;
			}
		}
	}
}

.standard {
	.heading {
		p {
			text-align: left;
		}
	}

	@media only screen and (max-width: 959px) {
		.link-lloyds {
			display: inline-block;
			margin: 15px 0 35px;
			max-width: 200px;
		}
	}
}

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

	.standard {
		margin: 0 auto;
		max-width: 1200px;

		.heading {
			display: flex;
			flex-wrap: wrap;

			h2,
			p {
				text-align: left;
				width: 50%;
			}

			h2 {
				order: 0;
			}

			a {
				margin: 0 0 -50px;
				order: 1;
				text-align: right;
				width: 100%;
			}

			p {
				order: 2;
				text-align: left;
			}
		}
	}

	.list-col {
		li {
			width: calc(33.33% - 20px);
		}
	}
}

@media only screen and (min-width: 1024px) {
	.standard {
		.heading {
			position: relative;

			&::before {
				@include img-url('bg/shapes/colorful-shapes.svg');
				background-repeat: no-repeat;
				background-position: 0 0;
				content: '';
				height: 283px;
				left: 50%;
				position: absolute;
				top: -100px;
				width: 175px;
			}
		}
	}
}

@media only screen and (min-width: 1240px) {
	.faq {
		margin: 150px auto;
	}
	.standard {
		margin: 60px auto;
	}
}


.download {
	color: #313d51;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 40px 0;
	position: relative;
	width: 100%;

	&::before {
		background: #e1e1e1;
		content: '';
		height: 1px;
		left: 0;
		margin: 0 auto;
		max-width: 370px;
		position: absolute;
		right: 0;
		top: 0;
		width: calc(100% - 120px);
	}
}

.download__label {
	font-weight: 600;

	span {
		display: block;
	}
}

.list-download {
	&__item {
		margin-bottom: 25px;

		a {
			display: block;
			padding: 6px 0 0 60px;
			position: relative;

			i {
				left: 0;
				position: absolute;
				top: 0;
				@media only screen and (max-width: 959px) {
					transform: scale(0.8);
				}
			}

			span {
				display: block;
			}
		}
	}

	&__title {
		color: $body-font-color;
	}
}

@media only screen and (min-width: 800px) {

	.download {
		flex-direction: row;
		margin: 0 auto;
		max-width: 900px;
	}

	.download__label {
		width: 33.33%;
	}

	.list-download {
		display: flex;
		flex-wrap: wrap;
		width: 66.66%;

		&__item {
			width: 50%;
		}
	}
}

.list-check {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 15px;

	li {
		color: #59616e;
    font-weight: 600;
    line-height: 140%;
    margin: 0 0 10px;
    padding: 0 0 0 35px;
		position: relative;
		text-align: left;
		width: 100%;

		i {
			background-position: 50% 50%;
			background-size: 14px 14px;
			border: 2px solid #239782;
			border-radius: 100%;
			line-height: 25px;
			height: 25px;
			left: 0;
			position: absolute;
			text-align: center;
			transform: scale(0.8);
			top: -2px;
			width: 25px;
		}
	}
}

.required {
	position: relative;
	&::before {
		content: '*';
		color: #fe816e;
		font-size: rem-calc(35);
		left: 0;
		line-height: 10px;
		margin-right: 5px;
		position: relative;
		top: 12px;
	}
}

.list-terms {
	margin: 0 0 55px -10px;

	* {
		font-size: 15px;
	}

	@media only screen and (min-width: 640px) {
		* {
			font-size: 16px;
		}
	}

	> li {
		margin: 0;
		padding: 10px 10px 5px;
		position: relative;

		&:nth-child(2),
		&:nth-child(3) {
			margin-bottom: 10px;
		}

		&.unique {
			background: #effbf9;

			input {
				left: -3px;
				top: -2px;
			}
		}

		p {
			margin: 0 0 5px;
		}

		a {
			font-weight: 600;
		}

		input {
			left: 0;
			margin: 0;
			position: absolute;
			top: 5px;
		}
	}

	ol {
		margin: 3px 0 0 13px;

		li {
			margin-bottom: 5px;
		}
	}
}

.insurance {
	box-shadow: 0 0 15px rgba(0,0,0,.1);
	margin: 0 0 50px;
	padding: 50px 15px;

	&__heading {
		h2,.h2 {
			font-size: rem-calc(36);
			text-align: center;

			span {
				display: block;
			}
		}

		h2 {
			margin-bottom: 50px;
		}

		.h2 {
			display: none;
		}
	}
}

@media only screen and (min-width: 800px) {
	.insurance {
		box-shadow: none;
		display: flex;
		flex-wrap: wrap;
		padding: 0;

		&__heading {
			background-color: #afcaf1;
			background-image: url('#{$source}bg/shapes/insurance-top.svg'), url('#{$source}bg/shapes/insurance-bottom.svg');
			background-repeat: no-repeat, no-repeat;
			background-position: 0 0, 0 100%;
			background-size: cover, auto;
			width: calc(50% - 108px);

			h2 {
				text-align: left;
			}

			.h2 {
				display: block;
				text-align: right;
			}
		}

		&__form {
			box-shadow: 0 0 15px rgba(0,0,0,.1);
			padding: 50px;
			width: calc(50% + 108px);
		}

		&__form-desc {
			max-width: 680px;
			width: 100%;
		}
	}

	.insurance__heading-desc {
		display: flex;
    flex-direction: column;
		float: right;
    height: 100%;
    justify-content: space-between;
		max-width: 555px;
		padding: 108px 35px 35px 10px;
		width: 100%;

	}
}

.not-allowed {
	cursor: not-allowed;
	display: inline-block;
}

.msg-error {
	color: #eb1a00;
	margin: 0 0 50px;
}

.form-group {
	.error {
		color: red;
	}
	.form-control.error {
		border: 1px solid red;
	}
}

.form-insurance {
	margin: 0 0 40px;

	label {
		font-weight: 600;
		padding: 0 0 10px;

		&.error {
			display: block;
			color: #eb1a00;
			font-size: rem-calc(14);
			font-weight: 500;
			margin: .5rem 1rem;
			padding: 0;
		}
	}

	input[type="text"] {
		height: 48px;

		&.error {
			border-color: #eb1a00;
		}
	}

	input[readonly] {
		background: none;
		pointer-events: none;
	}

	button[type="submit"] {
		&.button--loading {
			opacity: .5;
			pointer-events: none;
		}
	}

	dl {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		margin: 0 0 -7px;
		max-width: 340px;
	}

	dt,dd {
		margin: 0 0 22px;
		width: 50%;
	}

	dt {
		label {
			color: $primary-color;
			font-weight: 500;
			font-style: italic;
			padding: 0;
		}
	}

	dd {
		font-style: italic;

		input {
			color: #59616e;
			display: inline-block;
			font-weight: 600;
			font-size: rem-calc(18);
			margin: 0 2px 0 0;
			text-align: center;
			width: calc(100% - 30px);
		}
	}
}

@media only screen and (min-width: 1240px) {

	.insurance {
		&__heading {
			h2,.h2 {
				font-size: rem-calc(60);
			}
		}

		&__form {
			padding: 70px 100px;
		}
	}

	.form-insurance {
		margin: 0 0 60px;

		ol.list-none {
			> li {
				margin-bottom: 45px;
			}
		}

		label {
			padding: 0 0 18px;
		}

		input[type="text"] {
			height: 50px;
		}
	}

}

.protip-wrap {
	padding: 0 20px 0 0;
	position: relative;

	label {
		display: inline-block;
	}

	.button--protip {
		position: relative;
		margin: 0 0 0 5px;
		// right: 0;
		top: -1px;
	}
}

.button--protip {
	cursor: pointer;
}

.protip {
	display: none;
	background: $white;
	box-shadow: 0 0 16px rgba(#536c8e, .17);
	max-width: 507px;
	padding: 10px 20px 5px;

	p {
		margin: 0 0 12px;
	}

	figure {
		left: -50px;
		position: relative;
	}
}

@media only screen and (min-width: 1240px) {
	.protip {
		display: block!important;
		padding: 10px 50px 75px;
		position: absolute;
		left: -640px;
		top: 0;

		&::before {
			@include img-url('arrows/pink.svg');
			background-repeat: no-repeat;
			background-position: 0 0;
			content: '';
			height: 58px;
			position: absolute;
			right: -80px;
			top: 12px;
			width: 114px;
		}
	}

	.protip-wrap {
		.button--protip {
			left: -38px;
			position: absolute;
			top: 2px;
		}
	}

	.button--protip {
		pointer-events: none;
	}
}

// :focus {
// 	border: 3px dotted orange!important;
// }

//slider
.range-slider {
	margin: 40px 35px 75px;
	max-width: 485px;
	position: relative;

	.btn--decrease,
	.btn--increase {
		background: #e1e1e1;
		border-radius: 100%;
		cursor: pointer;
		height: 19px;
		line-height: 19px;
		position: absolute;
		text-align: center;
		top: -3px;
		width: 19px;

		&:hover {
			opacity: .6;
		}
	}

	.btn--disabled {
		cursor: not-allowed;
		opacity: .25;

		&:hover {
			opacity: .25;
		}
	}

	.btn--decrease {
		left: -40px;
	}

	.btn--increase {
		right: -40px;
	}

  .grid {
		// background: #fff;
    border-radius: 5px;
    display: flex;
		flex-wrap: wrap;
		list-style: none;
		height: 10px;
		margin: 0;
    left: 0;
    overflow: hidden;
		position: absolute;
		top: 1px;
    width: calc(100% - 1px);
    z-index: 2;

    li {
      border-left: 1px solid #e3e3e3;
      height: 100%;
      width: 25%;
    }
  }

  input:read-only {
		font-weight: 600;
    margin: 0 0 20px;
    max-width: 50px;
    padding: 10px;
    text-align: center;
  }

  .ui-slider-handle {
    background: $primary-color;
    border: 0;
    border-radius: 100%;
    text-align: center;
    padding: 0;
		width: 30px;
		outline: none;

		&:focus {
			box-shadow: 0 0 5px 4px rgba(#97bef5, .95);
		}
	}

	.ui-widget-header {
		background: $primary-color;
	}

  .ui-slider {

    &::before,
    &::after {
			color: #313d51;
			font-family: $body-font-family;
			font-size: rem-calc(14);
      position: absolute;
      top: 22px;
    }

    &::before {
      content: '500 000 zł';
      left: 0;
    }

    &::after {
      content: '5 000 000 zł';
      right: 0;
    }

    .ui-slider-handle {
			border-radius: 100%;
			border: 2px solid $white;
      height: 30px;
      margin-left: -16px;
      padding: 6px 1px 0;
      top: -9px;
      width: 30px;
    }

    .ui-state-hover {
      cursor: move;
      cursor: grab;
    }

    .ui-state-active {
      cursor: grabbing;
    }

    &.ui-widget.ui-widget-content {
      background: $white;
      padding: 5px;
    }
  }
}

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

	.range-slider {
		margin: 40px 40px 75px;


		&::before,
		&::after {
			display: block;
		}

		.grid {
			height: 11px;
		}
	}
}

@media only screen and (min-width: 800px) and (max-width: 1239px) {
	.benefits {
		.list-icons {
			margin: 0 auto;
			max-width: 860px;
		}
	}
}

@media only screen and (min-width: 1240px) {

	.range-slider {
		margin: 40px 10px 75px;
	}
}

.terms-list {
	counter-reset: section;
	list-style: none;
	margin: 25px auto 50px;
	max-width: 800px;

	p {
		margin: 0 0 7px;
	}
}

.terms-list__item {
	padding: 0 0 10px 25px;
	position: relative;

	&::before {
		counter-increment: section;
	  content: counter(section) ".";
    font-size: 20px;
    font-weight: 500;
	  left: 0;
	  position: absolute;
	  top: -5px;
	}

	> ol {
		counter-reset: subsection;
		font-size: 15px;
		list-style-type: none;
		margin: 5px 0 10px 10px;

		> li {
			margin-top: 7px;
			padding-left: 30px;
			position: relative;

			&::before {
				counter-increment: subsection;
			  content: counter(section) "." counter(subsection);
			  left: 0;
			  position: absolute;
	      top: 1px;
			}
		}

		ol {
			counter-reset: abc;
			font-size: 14px;
			margin: 5px 0 0 30px;

			> li {
				list-style-type: none;
				position: relative;
				counter-increment: abc;

				&::before {
					// display: none;
					content: counter(abc, lower-alpha) ")";
					left: -20px;
					position: absolute;
					top: 1px;
				}

			}
		}
	}

	ol {
		ul {
			font-size: 16px;
			list-style-type: upper-alpha;
			margin: 10px 20px 15px 30px;

			li {
				padding-left: 5px;

				& + li {
					margin-top: 1px;
				}
			}
		}
	}
}