/* >–––––––––––––––––––––––––––––––––––––– TITLE –––––––––< */

section.a header {
	display: flex;
	margin-top: 4rem;
	margin-bottom: 5vh;
}
	.triple_title {
		margin-left: auto;
	}

	section.a header.ri .triple_title h1,
	section.a header.ri .triple_title h1 span,
	section.a header.ri .triple_title h2 {
		color: #424242;
	}


/* >–––––––––––––––––––––––––––––––––––––– SUCCURSALES –––––––––< */

.branches {
	margin: 0 auto;
	max-width: 100rem;
}
.branches section {
	margin-bottom: 20vh;
}
	.branches .image {
		position: relative;
		width: 100%;
		z-index: 2;
	}
	.branches .image::before {
		content: ''; display: block; padding-top: 50%;
	}
		.branches img {
			position: absolute;
			left: 0; top: 0;
			display: block;
			width: 100%;
			height: auto;
			border-radius: 0.8rem 0.8rem 0 0;
		}

	.branches .contentbox {
		margin-top: -10rem;
		padding-top: 12rem;
	}
	.branches .contentbox::before { background-color: #ccc; }

		.branches h2 {
			margin-bottom: 1.5rem;
			font-family: "Proxima Nova W01 Light", sans-serif; 
			font-size: 4.5rem;
			color: #54CFFD;
		}
			.branches h2 span {
				font-size: 3rem;
				color: #fff;
			}

		.branches .content {
			display: flex;
		}
			#iViewport .branches ul {
				flex-grow: 1;
				box-sizing: border-box;
				margin: 0;
				padding: 0 2rem 0 0;
			}
				.branches li {
					margin: 0;
					margin-bottom: 1rem;
					padding: 0;
					list-style: none;
				}
					.branches p {
						font-size: 1.6rem; line-height: 2rem;
						color: #fff;
					}
					.branches p a {
						color: #54CFFD;	
					}

				.branches ul > a { /* whatsapp */
					display: block;
					box-sizing: border-box;
					padding: 0.5rem;
					width: 100%; max-width: 30rem;
					font-family: "HelveticaNeueETW01-45Lt", sans-serif;
					font-size: 1.4rem; line-height: 1.4rem;
					text-align: center;
					color: #000;
					border-radius: 0.6rem;
					background-color: #00d95f;
					box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
					cursor: pointer;
				}
				.branches ul > a:hover { color: #000; }
					.branches ul > a > * { display: inline-block; vertical-align: middle; }
					.branches ul > a .icon {
						position: relative;
						margin-right: 1rem;
						width: 3rem;
					}
					.branches ul > a .icon::before { content: ''; display: block; padding-top: 100%; }
						.branches ul > a .icon svg {
							position: absolute; left: 0; top: 0;
							width: 100%;
							height: 100%;
						}

			.branches .map {
				flex: 0 0 40%;
				position: relative;
			}
				.branches iframe {
					position: absolute; left: 0; top: 0;
					width: 100%;
					height: 100%;
					border: 0;
					pointer-events: none;
				}
				.branches iframe.clicked { pointer-events: auto; }
	





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




@media all and (max-width: 800px) {
	section.a header { margin-top: 0; }
	.triple_title { margin-left: 0; }

	.branches h2 { padding-bottom: 1rem; font-size: 3.5rem; line-height:3.5rem; border-bottom: 1px solid #000; }
	.branches h2 span { font-size:2rem; line-height:2rem; }
	.branches .content { display:block; }	
	.branches ul > a { margin-bottom: 2rem; }
	.branches .map { width:100%; height: 18rem; }
}

@media all and (max-width: 600px) {
	.branches h2 span { display: block; }
	#iViewport .branches ul { padding-right: 0; }
	.branches ul > a { max-width: none; }
}