/*AFILIADO*/

.affiliate-header {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: auto;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	margin-top: 20px;
}

.col1-affiliate-header {
	grid-area: 1 / 1 / 2 / 2;
	margin-top: auto;
}

.col2-affiliate-header {
	grid-area: 2 / 1 / 3 / 2;
}

.col3-affiliate-header {
	grid-area: 1 / 2 / 3 / 3;
	text-align: right;
}

.col1-affiliate-header h1 {
	font-size: 40px;
	color: var(--color-main);
	font-weight: 500;
	text-align: left;
	line-height: 40px;
}

.affiliate-header-bt {
	width: 240px;
	padding: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #26DDA1;
	border-radius: 4px;
	color: #FFF;
	font-size: 18px;
	font-weight: 500;
	cursor: pointer;
	margin-top: 30px;
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)!important;
}

.affiliate-header-bt:hover {
	opacity: 0.8;
}

.col3-affiliate-header img {
	width: 400px;
}

.affiliate-about {
	width: 100%;
	display: inline-block;
	font-size: 16px;
	font-weight: 300;
	padding: 20px;
	border-radius: 6px;
	box-shadow: 0 .1rem 0.5rem rgba(0, 0, 0, .10)!important;
}

.affiliate-about p {
	width: 100%;
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.affiliate-about p img {
	width: 20px;
	margin-right: 5px;
}

.affiliate-about-avatar img {
	width: 380px;
	border-radius: 6px;
}

.off-premium {
	width: 100%;
	text-align: center;
	font-size: 15px;
	font-weight: 300;
	color: #000;
	margin-top: 10px;
}

.off-premium::after {
	content: '';
	display: inline-block;
	height: 14px;
	width: 14px;
	background-image: url('../svg/ico_increase.svg');
	background-size: contain;
	background-repeat: no-repeat;
	margin-left: 5px;
}

.off-premium.margin-left {
	text-align: left;
	margin-left: 50px;
}

.discover {
	width: 100%;
}

.discover-content {
	width: 100%;
	max-width: var(--max-area);
	display: grid;
	margin: 0 auto;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 30px;
	align-items: center;
	height: 300px;
}

.box-discover {
	width: 100%;
	display: inline-block;
}

.ico-discover {
	display: block;
	text-align: center;
}

.ico-discover img {
	width: 72px;
	margin-bottom: 5px;
}

.discover-text {
	width: 100%;
	font-size: 16px;
	color: #1F242C;
	text-align: center;
	font-weight: 300;
	display: inline-block;
}

.discover-text samp {
	color: var(--color-main);
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
}

.infos-affiliate {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 30px;
	margin-top: 30px;
}

.infos-affiliate-col {
	width: 100%;
	font-size: 17px;
	font-weight: 300;
	text-align: left;
	margin: auto;
	border-left: 8px solid;
	border-image: linear-gradient( to top, #FFE363, #ffffff) 1 100%;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.calcule-affiliate {
	width: 100%;
	display: grid;
	grid-template-columns: 55% auto;
	grid-gap: 30px;
	align-items: center;
}

.calcule-affiliate-text {
	width: 100%;
	font-size: 30px;
	font-weight: 600;
	text-align: left;
	color: var(--color-main);
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 20px;
	border-bottom: 10px solid;
	border-image-slice: 1;
	border-bottom-width: 8px;
	-webkit-appearance: none;
	border-image-source: linear-gradient(to right, #FFE363, #ffffff);
}

.calcule-affiliate-text p {
	width: 100%;
	font-size: 14px;
	font-weight: 300;
	text-align: left;
	margin-top: 5px;
	color: #000;
}

.calcule-affiliate-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--color-main);
	border-radius: 6px;
	padding: 20px;
}

.calcule-affiliate-title {
	Width: 100%;
	font-weight: 500;
	color: #FFF;
	font-size: 28px;
	line-height: 26px;
}

.calcule-affiliate-title p {
	color: #0CD88D;
	display: inline-block;
}

.calcule-affiliate-range-text {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #FFF;
	font-size: 16px;
	font-weight: 300;
	margin-top: 10px;
}

.calcule-affiliate-total {
	Width: 100%;
	font-size: 18px;
	color: #FFF;
	font-weight: 300;
	display: flex;
	align-items: center;
	margin-top: 10px;
}

.calcule-affiliate-total p {
	color: #0CD88D;
	display: inline-block;
	font-weight: 500;
	font-size: 28px;
	margin-right: 5px;
}

.calcule-affiliate-range {
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}

input[type="range"] {
	-webkit-appearance: none;
	margin-right: 15px;
	width: 100%;
	height: 4px;
	background: #FFF;
	border-radius: 5px;
	background-image: linear-gradient(#0CD88D, #0CD88D);
	background-size: 30% 100%;
	background-repeat: no-repeat;
	box-shadow: none;
	border: none;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #0CD88D;
	cursor: ew-resize;
	transition: background .3s ease-in-out;
	box-shadow: none;
	border: none;
}

input[type="range"]::-moz-range-thumb {
	-webkit-appearance: none;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: #0CD88D;
	cursor: ew-resize;
	transition: background .3s ease-in-out;
	box-shadow: none;
	border: none;
}

input[type="range"]::-ms-thumb {
	-webkit-appearance: none;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: #0CD88D;
	cursor: ew-resize;
	transition: background .3s ease-in-out;
	box-shadow: none;
	border: none;
}

input[type="range"]::-webkit-slider-thumb:hover {
	background: #0CD88D;
}

input[type="range"]::-moz-range-thumb:hover {
	background: #0CD88D;
}

input[type="range"]::-ms-thumb:hover {
	background: #0CD88D;
}

input[type=range]::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	box-shadow: none;
	border: none;
	background: transparent;
}

input[type=range]::-moz-range-track {
	-webkit-appearance: none;
	box-shadow: none;
	border: none;
	background: transparent;
}

input[type="range"]::-ms-track {
	-webkit-appearance: none;
	box-shadow: none;
	border: none;
	background: transparent;
}

.title-accordion {
	font-size: 24px;
	font-weight: 500;
	color: var(--color-main);
	margin-top: 60px;
}

.contact-affiliate {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 60px;
	margin-bottom: 100px;
}

.contact-affiliate-title {
	font-size: 34px;
	font-weight: 500;
	color: var(--color-main);
	text-align: center;
}

.contact-affiliate-line {
	width: 10px;
	height: 150px;
	margin-top: 20px;
	background-image: linear-gradient(to top, #FFE363, #ffffff);
}

.contact-affiliate-line {
	width: 10px;
	height: 150px;
	margin-top: 20px;
	background-image: linear-gradient(to top, #FFE363, #ffffff);
}

.contact-affiliate-bt {
	width: 240px;
	padding: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #26DDA1;
	border-radius: 4px;
	color: #FFF;
	font-size: 18px;
	font-weight: 500;
	cursor: pointer;
	margin-top: 30px;
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)!important;
}

.contact-affiliate-bt:hover {
	opacity: 0.8;
}

/*MOBILE AFILIADO*/

@media screen and (max-width:960px) {
	.affiliate-header {
		grid-template-columns: 100%;
	}
	.col1-affiliate-header {
		grid-area: 1;
	}
	.col2-affiliate-header {
		grid-area: 3;
		padding-left: 40px;
		padding-right: 40px;
	}
	.col3-affiliate-header {
		grid-area: 2;
		text-align: center;
		margin-top: 20px;
	}
	.col1-affiliate-header h1 {
		text-align: center;
		font-size: 30px;
		line-height: 34px;
		padding-left: 10px;
		padding-right: 10px;
	}
	.col3-affiliate-header img {
		width: 240px;
	}
	.affiliate-header-bt {
		width: 100%;
		margin-top: 0px;
	}
	.affiliate-about {
		margin-top: 30px;
	}
	.discover {
		background-color: #F6F8FF;
		margin-top: 30px;
	}
	.discover-content {
		grid-template-columns: repeat(1, 100%);
		height: auto;
		grid-gap: 40px;
		padding: 30px;
	}
	.infos-affiliate {
		grid-template-columns: repeat(1, 1fr);
		margin-top: 30px;
	}
	.calcule-affiliate {
		grid-template-columns: repeat(1, 1fr);
		margin-top: 30px;
	}
	.calcule-affiliate-text {
		font-size: 26px;
	}
	.title-accordion {
		font-size: 24px;
		font-weight: 500;
		color: var(--color-main);
		margin-top: 30px;
	}
	.contact-affiliate-title {
		font-size: 30px;
	}
	.contact-affiliate-line {
		height: 100px;
	}
	.off-premium.margin-left {
		text-align: center;
		margin-left: 0px;
	}
}