@charset "UTF-8";
/* CSS Document */

	/* styles */
	
		.Xtpl-collaborate:before {
			content:"";
			position: absolute;
			left:0; top: 0;
			width:  100vw;
			height: 250px;
			z-index: 999;
			background-image: url("../../images/creative/pool-1.jpg");
			background-position: center;
			background-size: cover;
			opacity: 0.5;
			mix-blend-mode: multiply;
			pointer-events: none;
		}
		main {
			padding-top: 50px;
			padding-bottom: 50px;
		}
		main h1 {
			font-family: Prata;
			font-size: 4rem;
			line-height: 1.1;
			color: var(--steel);
			text-align: left;
			margin-bottom: 50px;	
		}

		main h2 {
			margin-bottom: 10px;
			color: var(--steel);
		}

		main .lead {
			font-size: 1.3rem;
			line-height: 1.4;
		}
			.tpl-about-us main .lead {
				padding-block:55px;
				background-color: var(--steel_extralight);
			}
			.tpl-about-us main .lead .inset {
				padding-left:10%;
				padding-right: 15%;
			}
			main .lead h3 {
				max-width: 33%;
				text-wrap:balance;
			}
			main figure.about-us {
				background-image: url("../../images/picto/29.webp");
				float: right;
				width: auto;
				height: 300px;
				aspect-ratio: 4 / 2;
				position: relative;
				top: -60px;
				margin-bottom: -60px;
			}

			main figure.collaborate {
				position: relative;
				background-image: url("../../images/picto/39.webp");
				width: 300px;
				height:400px;
				margin-bottom: -400px;
				left: -80px;
			}
			main form {
				width: calc(100% - 300px);
				margin-left: 300px;
			}





	/* benefits */

		main .benefits {
			padding: 15px 0;
		}
		main .benefits ul {
			display: grid;
			grid-template-rows:auto;
			column-gap: 10px;
			row-gap: 35px;
			align-items: start;
		}
		main .benefits ul li {
			position: relative;
			z-index: 1;
		}
		main .benefits ul li:before {
			content:"";
			display: block;
			position: absolute;
			background-color: var(--steel_extralight);
			width:  100px;
			height:  80px;
			opacity: 0.3;
			z-index: -1;
		}
		main .benefits ul li:nth-child(1):before { border-radius: 50px 100px 30px 100px; transform:rotate(-15deg); }
		main .benefits ul li:nth-child(2):before { border-radius: 70px  50px 90px  50px; transform:rotate(-10deg); }
		main .benefits ul li:nth-child(3):before { border-radius: 50px  30px 60px  80px; transform:rotate(  5deg); }
		main .benefits ul li:nth-child(4):before { border-radius: 90px 100px 30px  50px; transform:rotate( -5deg); }
		main .benefits ul li:nth-child(5):before { border-radius: 50px 100px 30px 100px; transform:rotate(-15deg); }
		main .benefits ul li:nth-child(6):before { border-radius: 70px  50px 90px  50px; transform:rotate(-10deg); }
		main .benefits ul li:nth-child(7):before { border-radius: 50px  30px 60px  80px; transform:rotate(  5deg); }
		main .benefits ul li:nth-child(8):before { border-radius: 90px 100px 30px  50px; transform:rotate( -5deg); }

		main .benefits ul li figure {
			display: block;
			position: relative;
			width:60px;
			aspect-ratio:1 / 1;
			background-size: contain;
		}
		main .benefits ul li figcaption {
			display: block;
			position: relative;
			left: 80px;
			right: 0;
			top: -30px;
			transform:translateY(-50%);
			text-align: left;
			text-wrap:balance;
			font-size: 1.4rem;
			line-height: 1.4;
			text-wrap:balance;
		}
		main .benefits ul li .description {
			width: calc(100% - 40px);
			margin-left: 40px;
		}
		
		main .benefits ul li[data-label="commission"         ] figure { background-image: url("../../images/icon/collaborate/commission.png"); }
		main .benefits ul li[data-label="agent-portal"       ] figure { background-image: url("../../images/icon/collaborate/agent-portal.png"); }
		main .benefits ul li[data-label="xml-feeds"          ] figure { background-image: url("../../images/icon/collaborate/xml-feeds.png"); }
		main .benefits ul li[data-label="expose-generator"   ] figure { background-image: url("../../images/icon/collaborate/expose-generator.png"); }
		main .benefits ul li[data-label="marketing-material" ] figure { background-image: url("../../images/icon/collaborate/marketing-material.png"); }
		main .benefits ul li[data-label="properties"         ] figure { background-image: url("../../images/icon/collaborate/properties.png"); }

			/* desktop */	@media screen and (min-width:960px){
				main .benefits[data-count="3"] ul { grid-column: 3; grid-template-columns:1fr 1fr 1fr; }
				main .benefits[data-count="4"] ul { grid-column: 4; grid-template-columns:1fr 1fr; }
				main .benefits[data-count="5"] ul { grid-column: 4; grid-template-columns:1fr 1fr; }
				main .benefits[data-count="6"] ul { grid-column: 4; grid-template-columns:1fr 1fr 1fr; }
			}
			/* tablet */	@media screen and (min-width:700px) and (max-width:959px){
				main .benefits[data-count="3"] ul { grid-column: 2; grid-template-columns:1fr 1fr; }
				main .benefits[data-count="4"] ul { grid-column: 2; grid-template-columns:1fr 1fr; }
				main .benefits[data-count="5"] ul { grid-column: 2; grid-template-columns:1fr 1fr; }
				main .benefits[data-count="6"] ul { grid-column: 2; grid-template-columns:1fr 1fr; }
			}
			/* mobile */	@media screen and (max-width:699px){
				main .benefits[data-count="3"] ul,
				main .benefits[data-count="4"] ul,
				main .benefits[data-count="5"] ul,
				main .benefits[data-count="6"] ul { grid-column: 1; grid-template-columns:1fr; }
			}





	/* multiple templates */
	
		.multiple-templates { position: relative; }
		.multiple-templates[data-template="form"]       {}
		.multiple-templates[data-template="processing"] {}
		.multiple-templates[data-template="succeeded"]  {}
		.multiple-templates[data-template="failed"]     {}

		.multiple-templates .template-item {
			visibility: hidden;
			pointer-events: none;
			opacity: 0;
			margin-top: 15px;
			transition:opacity .6s ease, margin-top 0.6s ease, visibility 0s ease .6s;
		}

		.multiple-templates .template-item[data-label="form"]       { position:relative; }
		.multiple-templates .template-item[data-label="processing"],
		.multiple-templates .template-item[data-label="succeeded"],
		.multiple-templates .template-item[data-label="failed"] {
			position:absolute;
			left: 0; top: 0; right: 0; bottom: 0;
		}

		.multiple-templates[data-template="form"]       .template-item[data-label="form"]       { visibility: visible; opacity:1; margin-top:0; pointer-events:all; transition:opacity .6s ease, margin-top 0.6s ease, visibility 0s ease 0s;}
		.multiple-templates[data-template="processing"] .template-item[data-label="processing"] { visibility: visible; opacity:1; margin-top:0; pointer-events:all; transition:opacity .6s ease, margin-top 0.6s ease, visibility 0s ease 0s;}
		.multiple-templates[data-template="succeeded"]  .template-item[data-label="succeeded"]  { visibility: visible; opacity:1; margin-top:0; pointer-events:all; transition:opacity .6s ease, margin-top 0.6s ease, visibility 0s ease 0s;}
		.multiple-templates[data-template="failed"]     .template-item[data-label="failed"]     { visibility: visible; opacity:1; margin-top:0; pointer-events:all; transition:opacity .6s ease, margin-top 0.6s ease, visibility 0s ease 0s;}

		@media screen and (min-width: 580px) and (max-width: 699px) { .multiple-templates[data-template="form"] .template-item { margin-bottom:80px; } }
		@media screen and (min-width: 310px) and (max-width: 579px) { .multiple-templates[data-template="form"] .template-item { margin-bottom:80px; } }

		.multiple-templates[data-template="processing"] h3,
		.multiple-templates[data-template="succeeded"] h3,
		.multiple-templates[data-template="failed"] h3 { 
			text-wrap:none;
			margin-bottom: 10px;
		}

		.multiple-templates[data-template="form"]       .template-item[data-label="form"]       h3 i:before { content:""; }
		.multiple-templates[data-template="processing"] .template-item[data-label="processing"] h3 i:before { content:"\e963"; }
		.multiple-templates[data-template="succeeded"]  .template-item[data-label="succeeded"]  h3 i:before { content:"\e92e"; }
		.multiple-templates[data-template="failed"]     .template-item[data-label="failed"]     h3 i:before { content:"\e937"; }

		.multiple-templates .template-item h3 i {
			display: block;
			position: relative;
			width:       30px;
			height:      30px;
			font-size:   30px;
			line-height: 30px;
			margin-bottom: -30px;
		}
		.multiple-templates .template-item h3 em {
			display: block;
			position: relative;
			margin: 0 0 0 35px;
		}
		
		.multiple-templates[data-template="processing"] .template-item[data-label="processing"] h3 i:before {
			display: block;
			width:       inherit;
			height:      inherit;
			font-size:   inherit;
			line-height: inherit;
			animation: processing 1s infinite;
			animation-timing-function:linear;
		}
		@keyframes processing {
			from { transform:rotate(0deg); }
			to   { transform:rotate(360deg); }
		}
		.multiple-templates .template-item .cta-button-container {
			text-align: right;
		}
		.multiple-templates .template-item .signin-button {
			float: left;
		}
		.multiple-templates .template-item .cta-button {
			margin-top: 0;
			left: 0;
			transform:none;
		}
		.multiple-templates .template-item .signin-button i,
		.multiple-templates .template-item .cta-button i {
			display: block;
			position: relative;
			width:          25px;
			height:         25px;
			font-size:      25px;
			line-height:    25px;
			margin-bottom: -25px;
			top: -3px;
		}
		.multiple-templates .template-item .cta-button i {
			float: right;
		}
		.multiple-templates .template-item .signin-button i:before { content:"\e91a"; }
		.multiple-templates .template-item .cta-button i:before    { content:"\e955"; }
		.multiple-templates .template-item .signin-button em,
		.multiple-templates .template-item .cta-button em {
			display: block;
			position: relative;
			margin: 0 0 0 25px;
		}
		.multiple-templates .template-item .cta-button em {
			margin: 0 25px 0 0;
		}

		/* ERROR MESSAGES */
		.multiple-templates[data-template="form"] .template-item[data-label="form"] .error-message { color:#D40000; }
		.multiple-templates[data-template="form"] .template-item[data-label="form"]                                .error-message { display: none; }
		.multiple-templates[data-template="form"] .template-item[data-label="form"] #registrarion-form[data-errors="1"] .error-message { display: block; }
		.multiple-templates[data-template="form"] .template-item[data-label="form"] .error-message i { display: inline-block; position: relative; width: 30px; height: 30px; margin-bottom: -30px; font-size: 30px; line-height: 30px; }
		.multiple-templates[data-template="form"] .template-item[data-label="form"] .error-message em { display: inline-block; margin-left: 10px; font-size: 1.6rem; line-height: 30px; font-style: italic; }
		.multiple-templates[data-template="form"] .template-item[data-label="form"] .error-message i:before { content:"\e910";}




		/* desktop */	@media screen and (min-width:960px){
		}
		/* tablet */	@media screen and (min-width:700px) and (max-width:959px){
		}
		/* mobile */	@media screen and (max-width:699px){
			main .mirror { width: calc(100% - 80px); }
			main figure.collaborate { margin:-45px 0 0 0; left: 0; }	
			main form { margin-left: 0; width:100%; }
			.form .form-elements .form-element { width: 100%!important; }
			.form .form-elements .form-spacer { width: 100%!important; height: 5px; min-height: 0; }
			.form .form-group .form-element .form-label:empty { display: none; }
		}




	/* Exceptions for sign up */
	
	html[data-url="Collaborate/Sign-up.html"] header nav { display: none; }
	html[data-url="Collaborate/Sign-up.html"] [data-visibility="hidden-on-signup"] { display: none; }
	html[data-url="Collaborate.html"]         [data-visibility="visible-only-on-signup"] { display: none; }
	
	figure.esign-email-sample {
		background-image: url(../../images/page/collaborate/esign-email.webp);
		background-repeat: no-repeat;
		background-position: left top;
		width: 250px;
		height: 250px;
		margin: 25px 0;
		box-shadow: 0 5px 15px 0 #00000038;
		display: inline-block;
	}