/* cand-section.css required */

/* >–––––––––––––––––––––––––––––––––––––– SUB STRUCTURE –––––––––< */

section.s .top 
{
	box-sizing: border-box;
	margin-bottom: 3rem;
	padding: 0 2rem 0 2rem;
	max-width: 70%;
}

section.s .bottom 
{
	display: flex;
}
	section.s .list 
	{
		flex: 1 0 60%;
		box-sizing: border-box;
		padding: 0 2rem 4rem 2rem;
	}

	section.s .pop 
	{
		flex: 0 1 40%;
		display: flex;
	}


/* >–––––––––––––––––––––––––––––––––––––– TOP –––––––––< */

section.s .top 
{}
	section.s .top .fltrs 
	{}
		section.s .top .fltrs label {
			display: block;
			margin-bottom: 1rem;
			font-family: "HelveticaNeueETW01-65Md", sans-serif;
			font-size: 1.4rem; line-height: 1.4rem;
			color: #B4D4FF;
		}
		section.s .top .fltrs label.marg { margin-top: 2rem; }

			section.s .top .fltrs li {
				display: inline-block; vertical-align: top;
				box-sizing: border-box;
				margin-right: 1rem;
				margin-bottom: 1rem;
				padding: 1.1rem 1.5rem;
				font-family: "HelveticaNeueETW01-45Lt", sans-serif;
				font-size: 1.3rem; line-height: 1.3rem;
				color: #fff;
				list-style: none;
				border-radius: 0.6rem;
				cursor: pointer;
				transition: background-color .4s ease;
			}
			/*section.s .top .fltrs li:hover,*/
			section.s .top .fltrs li.over,
			section.s .top .fltrs li.current { color: #000; background-color: #C9C9C9; }


/* >–––––––––––––––––––––––––––––––––––––– LIST –––––––––< */

section.s .list 
{}
	section.s .rslt {}
		section.s .rslt section {
			display: flex;
			box-sizing: border-box;
			position: relative;
			margin-bottom: 1rem;
			padding: 2rem;
			text-align: left;
			border-radius: 0.6rem;
			box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
			transition: background-color .4s ease;
		}
		section.s .rslt section:hover { border-color: #acacac; }
		section.s .rslt section.current { border-color: #acacac; box-shadow: none; }

		.grey0 {
		    background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgODAwIDM1NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+IDxnPiA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjMxMjUsMCwwLDAuMjY4NjQyLDAsNi45Mzc4NGUtMTIpIj4gPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI1NjAiIGhlaWdodD0iMTMxNy43NCIgc3R5bGU9ImZpbGw6dXJsKCNfTGluZWFyMik7Ii8+IDwvZz4gPC9nPiA8ZGVmcz4gPGxpbmVhckdyYWRpZW50IGlkPSJfTGluZWFyMiIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9Ii0wLjE0NjcxMiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMjU2MCwxMzE3Ljc0LC00NDYuOTM0LDc1NDcuOTEsLTcuMjc1OTZlLTEyLC0zLjI3NDE4ZS0xMSkiPjxzdG9wIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDk5LDk5LDk5KTtzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDEzNywxMzcsMTM3KTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+IDwvZGVmcz4gPC9zdmc+") 
		        no-repeat center center;
		    background-size: 100% 100%; 
		}

		.grey1 {
		    background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgODAwIDM1NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+IDxnPiA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjMxMjUsMCwwLDAuMjY4NjQyLDYuOTM0OWUtMTIsNi45NTIwNWUtMTIpIj4gPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI1NjAiIGhlaWdodD0iMTMxNy43NCIgc3R5bGU9ImZpbGw6dXJsKCNfTGluZWFyMik7Ii8+IDwvZz4gPC9nPiA8ZGVmcz4gPGxpbmVhckdyYWRpZW50IGlkPSJfTGluZWFyMiIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9Ii0wLjE0NjcxMiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMjU2MCwxMzE3Ljc0LC00NDYuOTM0LDc1NDcuOTEsLTMuNjM3OThlLTEyLC0zLjI3NDE4ZS0xMSkiPjxzdG9wIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDcxLDcxLDcxKTtzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDkxLDkxLDkxKTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+IDwvZGVmcz4gPC9zdmc+") 
		        no-repeat center center;
		    background-size: 100% 100%; 
		}

		.grey2 {
		    background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgODAwIDM1NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+IDxnPiA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjMxMjUsMCwwLDAuMjY4NjQyLDAsMS4zODkwM2UtMTEpIj4gPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI1NjAiIGhlaWdodD0iMTMxNy43NCIgc3R5bGU9ImZpbGw6dXJsKCNfTGluZWFyMik7Ii8+IDwvZz4gPC9nPiA8ZGVmcz4gPGxpbmVhckdyYWRpZW50IGlkPSJfTGluZWFyMiIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9Ii0wLjE0NjcxMiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMjU2MCwxMzE3Ljc0LC00NDYuOTM0LDc1NDcuOTEsLTMuNjM3OThlLTEyLC0zLjI3NDE4ZS0xMSkiPjxzdG9wIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDE0MSwxNDEsMTQxKTtzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDc3LDc3LDc3KTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+IDwvZGVmcz4gPC9zdmc+") 
		        no-repeat center center;
		    background-size: 100% 100%; 
		}

			section.s .rslt header 
			{
				flex-grow: 1;
				display: flex;
				flex-direction: column;
			}
				section.s .rslt .metier {
					display: inline-block;
					margin-bottom: 1rem;
					font-family: "HelveticaNeueETW01-45Lt", sans-serif;
					font-size: 1.2rem; line-height: 1.2rem;
					color: #FFE100;
				}

				section.s .rslt h2 {
					margin-bottom: 2rem;
					font-family: "HelveticaNeueETW01-45Lt", sans-serif;
					font-size: 2rem; line-height: 2.2rem;
					text-align: left;
					color: #fff;
				}

				section.s .rslt .apply {
					margin-top: auto;
					box-sizing: border-box;
					padding-left: 1rem;
					min-width: 18rem;
					z-index: 2;
				}
					section.s .rslt .apply div {
						display: inline-block; vertical-align: top;
						position: relative;
						margin-right: 2rem;
						width: 3rem;
						height: 3rem;
						cursor: pointer;
					}
						section.s .rslt .apply div a { display: inline; }
						section.s .rslt .apply svg {
							position: absolute; left: 0; top: 0;
							width: 100%;
							height: 100%;
							fill: #F5FBFF;
						}
						section.s .rslt .apply a.whatsapp svg { fill: #00d95f; }

			section.s .rslt footer 
			{
				flex: 0 0 15%;
				margin-left: auto;
			}
			section.s .rslt footer > div:first-child 
			{
				margin-bottom: 1.5rem;
			}
				section.s .rslt footer li {
					margin-bottom: 1.5rem;
					font-size: 1.3rem; line-height: 1.3rem;
					color: #fff;
					list-style: none;
				}
				section.s .rslt footer li:last-child { margin-bottom:0; }

	section.s #more {
		display: none;
		margin: 3rem 0 4rem 0;
		text-align: center;
		
	}
	section.s #more > div {
		display: inline-block;
		margin: 0 auto;
		padding: 1rem;
		font-family: "Proxima Nova W01 Thin", sans-serif;
		font-size: 2.4rem; line-height: 2.4rem;
		color: #fff;
		text-align: center;
		cursor: pointer;
	}
		section.s #more .arrow {
			margin: 1rem auto 0 auto;
		}
		section.s #more .arrow svg { fill:#272727; }
	section.s #more > div:hover { color: #000; }
	section.s #more > div:hover .arrow svg { fill: #fff; }



/* >–––––––––––––––––––––––––––––––––––––– DETAIL POPUP –––––––––< */

section.s .pop 
{}
	section.s .pop .closebtn { 
		display: none;
		margin: 1rem 1rem 2rem 0;
		text-align: right; 
	}
		section.s .pop #close { 
	        display: inline-block;
	        position: relative;
			width: 3rem;
	        height: 3rem;
			cursor: pointer;
		}
	        section.s .pop #close > div {
	            position: absolute;
	            left: 0%; top: 50%;
	            margin: 0 auto;
	            width: 100%;
	            height: 0.2rem;
	            background-color: #333;
	            transform-origin: 50% 50%;
	        }
	        section.s .pop #close > div:first-child { transform: rotate(45deg); }
	        section.s .pop #close > div:last-child { transform: rotate(-45deg); }

	section.s .pop .popbox {
		width: 100%;
	}
	section.s .pop .popbox {
		position: sticky; top: 10rem; bottom: 0;
		width: 100%; 
	}

	section.s .pop .viewport {
		box-sizing: border-box;
		padding: 1rem 2rem 2rem 2rem;
		width: 100%;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch; -ms-overflow-style:none;
		overscroll-behavior-y: contain;
	}

		section.s .pop .metier {
			margin-bottom: 1rem;
			font-family: "HelveticaNeueETW01-45Lt", sans-serif;
			font-size: 1.2rem; line-height: 1.2rem;
		}

		section.s .pop h1 {
			margin-bottom: 4rem;
			font-family: "Proxima Nova W01 Thin", sans-serif;
			font-size: 4rem; line-height: 4.2rem;
		}

		section.s .pop li {
			list-style: none;
			margin-bottom: 1rem;
		}
			section.s .pop li .icon,
			section.s .pop li div {
				display: inline-block; vertical-align: top;
				font-size: 1.4rem; line-height: 1.4rem;
			}

			section.s div.maxwidth .icon {
				display: inline-block; vertical-align: top;
				position: relative;
				margin-right: 1.5rem;
				width: 2rem;
			}
			section.s div.maxwidth .icon::before { content: ''; display: block; padding-top: 100%; }

				section.s div.maxwidth .icon svg {
					position: absolute; left: 0; top: 0;
					width: 100%;
					height: 100%;
				}

		section.s .pop p {
			font-size: 1.6rem; line-height: 2.2rem;
		}
		section.s .pop p:last-of-type { margin-bottom: 4rem; }

		section.s .pop .btns {
			margin-top: 4rem;
		}
			section.s .pop .btns a {
				display: block;
				box-sizing: border-box;
				margin-bottom: 1rem;
				padding: 2.2rem 1rem;
				width: 100%;
				font-family: "HelveticaNeueETW01-45Lt", sans-serif;
				font-size: 1.4rem; line-height: 1.4rem;
				text-align: center;
				color: #fff;
				border-radius: 0.6rem;
				background-color: #424242;
				box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
				cursor: pointer;
			}
			section.s .pop .btns a:last-of-type { margin-bottom: 0rem; }

			section.s .pop .btns a.whatsapp { padding: 1rem; color: #000; background-color: #00d95f; }
			section.s .pop .btns a.whatsapp:hover { color: #000; }

				section.s .pop .btns a.btn > * { display: inline-block; vertical-align: middle; }
				section.s .pop .btns a.btn .icon { margin-right: 1rem; width: 4rem; }

			/*
			section.s .pop .btns a.square {
				display: inline-block; vertical-align: top;
				margin-top: 0;
				width: 48%;
			}
			section.s .pop .btns a.square.left { margin-right: 4%; }
			*/
				
/* always as popup */
section.s .pop { 
		display: block;
		position: fixed; 
		right: -100%; left: auto; top: 0;
		width: 50%;
		height: 100vh; 
		background-color: #F7F7FF; 
		z-index: 898; 
	}
	section.s .pop .popbox {
		display: block;
		height: 100%;
		overflow: auto;

		max-height: none;
	}
	section.s .pop .viewport { height: 100%; }
	section.s .pop .closebtn { display: block; }


/* >–––––––––––––––––––––––––––––––––––––– ANIMATION –––––––––< */

section.s .rslt section:hover {
	opacity: 0.9;
}






/* >–––––––––––––––––––––––––––––––––––––– REACTIF ––––––––––––––––––––––– REACTIF ––––––––––––––––––––––– REACTIF ––––––––––––––––––––––– REACTIF –––––––––< */



@media all and (max-width: 1200px) {
	/* STRUCTURE –––––––––< */
	section.s .top { max-width: none; }
}

@media all and (max-width: 1000px) {
	/* STRUCTURE –––––––––< */
	section.s .top,
	section.s .list { padding-left: 0rem; padding-right: 0; }

	/* LIST –––––––––< */
	/*section.s .list #fBtn { display: block; }
	section.s .list h6 { padding-left: 1.5rem; }*/
	section.s .list > p { padding: 0 1.5rem; }

	section.s .rslt section { display: block; }
	section.s .rslt section header { margin-bottom: 2rem; }
	section.s .rslt footer { display: flex; flex-wrap: wrap; justify-content: space-between; margin-left: 0; }
	section.s .rslt footer > div { flex: 0 0 50%; }
	section.s .rslt footer > div:first-child { margin-bottom: 0; }
	

	/* DETAIL POPUP –––––––––< */
	section.s .pop { width: 70%; }
}

@media all and (max-width: 600px) {
	/* DETAIL POPUP –––––––––< */
	section.s .pop { width: 80%; }
	section.s .pop h1 { font-size: 2.8rem; line-height: 2.8rem; }
	section.s .pop a { font-size: 2.2rem; line-height: 2.2rem; }
}

@media all and (max-width: 450px) {
	/* DETAIL POPUP –––––––––< */
	section.s .pop { width: 100%; }
}
