$green : #009E3D;
$blue : #00A1D5;
$orange : #FABC0B;
$bg-gray : #F0F0F0;
$bd : 	#C4C4C4;

#annualReport2019 {

	h1 {
		font-family: "museo-sans";
		font-size: 2.75em;
		font-weight: 100;
		line-height: 1;
		margin-bottom: 1rem;

		@media only screen and (min-width: 58.75em) {
			font-size: 3.75em;
		}

		b {
			font-weight: 700;
			font-size: 120%;
		}

	}

	h2 {
		font-family: "museo-sans";
		font-size: 2.25em;
		line-height: 1.1;
		font-weight: 100;
		line-height: 1;
		margin-top: 0;
		margin-bottom: 2rem;

		@media only screen and (min-width: 58.75em) {
			font-size: 3em;
		}

		b {
			font-weight: 700;
			display: block;
		}
	}

	h3 {
		font-family: "museo-sans";
		font-size: 2em;
		line-height: 1.2;
		font-weight: 100;
		line-height: 1;
		margin-top: 0;
		margin-bottom: 1.5rem;

		@media only screen and (min-width: 58.75em) {
			font-size: 2.5em;
		}

		b {
			font-weight: 700;
		}
	}

	h4 {
		font-family: "museo-sans";
		font-weight: 700;
		text-transform: uppercase;
		font-size: 1.1em;
		margin-bottom: 1em;

		@media only screen and (min-width: 58.75em) {
			font-size: 1.5em;
		}
	}

	p,
	blockquote {
		color: #383838;
		font-family: "museo-sans";
		font-weight: 300;
		@media only screen and (min-width: 58.75em) {
			font-size: 1.125em;
			line-height: 1.4;
		}
	}

	.embed-container {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
		max-width: 100%;
		iframe,
		object,
		embed {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}

	.row {
		border: 0;
	}

	.btn--ar {
		border: 1px solid $orange;
		padding: .75em 1em;
		color: $orange;
		font-weight: 700;
		display: inline-flex;
		align-items: center;

		svg {
			margin-right: .75em;
			path {
				fill: $orange;
			}
		}
	}

	.ar__head {
		padding: 2em 1em;
			@media only screen and (min-width: 48em) {
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
			}

		.head__content {
			@media only screen and (min-width: 48em) {
				width: 50%;
				padding-right: 4em;
			}

			@media only screen and (min-width: 58.75em) {
				padding: 2em 4em;
			}

			span {
				text-transform: uppercase;
				font-weight: 700;
				color: $green;
				font-size: .85em;

				@media only screen and (min-width: 58.75em) {
					font-size: 1.125em;
				}

			}

		}
		.head__pic {
			@media only screen and (min-width: 48em) {
				width: 50%;
			}
		}
	}

	.ar__key {
		background-color: $bg-gray;
		padding: 2em 1em;

		@media only screen and (min-width: 58.75em) {
			padding: 4em 2em;
		}

		h2 {
			@media only screen and (min-width: 48em) {
				width: 60%;
			}
		}

		p {
			margin-bottom: 0;
			width: 100%;
		}

		.number {
			font-size: 1.8em;
			font-weight: 700;
			display: block;
			margin-bottom: .25rem;
			@media only screen and (min-width: 58.75em) {
				font-size: 2.5em;
			}
		}

		.big {
			font-size: 1.1em;
		}

		@media only screen and (max-width: 47.9em) {
			.keycol > div {
				& + div {
					margin-top: 2em;
					padding-top: 2em;
					border-top: 1px solid $bd;	
				}
			}
		}

		.keycol {
			& + .keycol {
				margin-top: 2em;
				padding-top: 2em;
				border-top: 1px solid $bd;	
			}
		}

		.key__col {
			& + .key__col {
				margin-top: 1em;
				padding-top: 1em;
				border-top: 1px dashed $bd;				
			}
		}

		.key__telecom {
			h3, h4, b, .number, .big {
				color: $blue;
			}
		}
		.key__logistic {
			h3, h4, b, .number, .big {
				color: $orange;
			}
		}
		.key__finance {
			h3, h4, b, .number, .big {
				color: $green;
			}
		}

		.key__figure {
			display: flex;
			flex-flow: row nowrap;
			align-items: flex-start;

			&:not(.key__figure--vertical) {
				.key__content {
					flex-grow: 1;
					flex-basis: 0;
				}
				figure {
					margin-right: 1em;
					width: 60px;
					display: flex;
					align-items: center;
					justify-content: center;

					img {
						max-width: 60px;
						max-height: 50px;
					}
				}
			}

			& + * {
				margin-top: 1em;
				padding-top: 1em;
				border-top: 1px dashed $bd;
			}
		}

		.key__figure--vertical {
			flex-flow: column wrap;
			img {
				margin-bottom: 1em;
			}
		}

		@media only screen and (min-width: 48em) {
			.keycol--left {
				display: flex;
				flex-flow: row nowrap;

				> div {
					width: 50%;
					padding-right: 2em;

					& + div {
						border-left: 1px solid $bd;
						padding-left: 2em;
						padding-right: 0;
					}
				}
			}
		}

		@media only screen and (min-width: 75em) {
			margin-top: -10em;
			padding: 5em 4em;

			.key__grid {
				display: flex;
				flex-flow: row wrap;
			}

			.keycol + .keycol {
				margin-top: 0;
				padding-top: 0;
				border-top: 0;
				border-left: 1px solid $bd;
			}

			.keycol--left {
				flex-flow: column wrap;
				width: 60%;

				> div {
					width: 100%;
					display: flex;
					flex-flow: row wrap;
					padding: 0;

					h3 {
						width: 100%;
					}

					& + div {
						border-left: 0;
						border-top: 1px solid $bd;
						margin-top: 2em;
						padding-top: 2em;
						padding-left: 0;
						padding-right: 0;
					}
				}

				.key__col{
					width: 50%;
					padding-right: 2em;

					& + .key__col {
						padding-top: 0;
						margin-top: 0;
						border-top: 0;
						padding-left: 2em;
						border-left: 1px dashed $bd;
					}
				}

			}

			.keycol--right {
				width: 40%;
				padding-left: 2em;
			}

			.key__figure {
				& + .key__figure {
					padding-top: 1.5em;
					margin-top: 1.5em;
				}
				&:not(.key__figure--vertical) {
					figure {
						width: 100px;
						img {
							max-width: 100px;
							max-height: 70px;
						}
					}
				}
			}

		}

	}

	.ar__meeting {
		padding: 2em 1em;

		h2 b {
			display: inline;
		}

		@media only screen and (min-width: 58.75em) {
			padding: 4em 2em;
			max-width: 850px;
			margin: 0 auto;
		}
	}

	.ar__respect {
		background-color: $bg-gray;
		padding: 2em 1em;

		h2 {
			max-width: 650px;

			b {
				display: inline;
			}
		}

		.respect__col {
			&.col--green {
				background-color: $green;
			}
			&.col--orange {
				background-color: $orange;
			}
			&.col--blue {
				background-color: $blue;
			}
			&.col--bg {
				display: flex;
				flex-flow: column wrap;
				color: white;
				padding: 1em;
				.col__title {
					color: white;
					font-size: 2em;
					margin-bottom: 2rem;
				}
				.number {
					display: block;
					font-size: 1.2em;
					color: white;
					margin-bottom: .5rem;
				}
				p {
					color: white;
					margin-bottom: 0;
				}
			}
		}

		@media only screen and (min-width: 48em) {
			.respect__grid {
				display: flex;
				flex-flow: row wrap;

				.respect__col {
					width: calc(50% - .5em);
					margin-right: 1em;
					margin-bottom: 1em;

					&:nth-child(2n) {
						margin-right: 0;
					}

					&:not(.col--bg) {
						padding-bottom: 1em;
					}
				}
			}
		}

		@media only screen and (min-width: 58.75em) {
			padding: 4em 2em;

			.respect__grid {

				.respect__col {

					&:not(.col--bg) {
						padding-bottom: 1em;
					}

					&.col--bg {
						padding: 2em;
					}

					.col__title {
						flex-grow: 1;
					}

					.number {
						font-size: 1.75em;
					}
				}
			}
		}

		@media only screen and (min-width: 75em) {
			margin-top: -10em;
			padding: 10em 4em 5em;

			.respect__grid {

				.respect__col {
					min-height: 340px;
					width: calc(25% - 1em);
					margin-right: 1.3333333333em;
					margin-bottom: 1em;

					&:nth-child(2n) {
						margin-right: 1.3333333333em;
					}

					&:nth-child(4n) {
						margin-right: 0;
					}

				}
			}
		}
	}

	.ar__financial {
		padding: 2em 1em;

		blockquote {
			padding: 0;
			border: 0;

			& + p {
				b {
					text-transform: uppercase;
					color: $blue;
					display: block;
				}
			}
		}


		.financial__graph {
			margin-top: 2em;

			@media only screen and (min-width: 48em) {
				display: flex;
				flex-flow: row wrap;
				.graph {
					width: 50%;
				}
				.graph--dark {
					width: 100%;
					figure {
						width: 60%;
						margin: 0 auto;
					}
				}
			}
		}

		.graph {
			padding: 2em;
			background-color: #F9DAA0;

			p {
				font-size: .85em;
				font-weight: 700;
			}
		}

		.graph--dark {
			background-color: $orange;
		}

		.graph--light {
			background-color: #FCE9CB;
		}

		@media only screen and (min-width: 58.75em) {
			padding: 4em 2em;
			display: flex;
			flex-flow: row nowrap;

			.financial__content {
				width: 40%;
				padding-right: 2em;
			}

			.financial__graph {
				width: 60%;
				margin-top: 0;
			}
		}
		
		@media only screen and (min-width: 75em) {
			padding: 5em 4em;
		}

	}

	.ar__timeline {
		padding: 2em 1em;
		background-color: $blue;
		color: #fff;

		.col {
			position: relative;
			padding-left: 1em;

			& + .col {
				margin-top: 2.5em;
			}

			&:before {
				content: '';
				width: 1em;
				height: 1px; background-color: #fff;
				display: block;
				position: absolute;
				left: -1em;
				top: .6em;
			}
		}

		h2 {
			color: #fff;
			max-width: 850px;
		}

		p {
			color: #fff;
		}

		span {
			font-weight: 700;
			text-transform: uppercase;
			font-size: .75em;
		}		

		@media only screen and (min-width: 58.75em) {
			padding: 4em 2em;

			.timeline__row {
				display: flex;
				flex-flow: row nowrap;
				align-items: flex-start;

				.col {
					display: flex;
					flex-flow : row wrap;
					width: 25%;
					padding-left: 0;
					padding-right: 3em;

					.col__content{
						flex-grow: 1;
						min-height: 250px;
					}

					span {
						align-self: flex-end;
						padding-left: 1em;
						padding-bottom: 1em;
					}

					& + .col {
						margin-top: 0;
					}

					&:before {
						width: 2px;
						height: 1.5em;
						bottom: 0;
						top: inherit;
						left: 0;
					}

				}

			}

		}

		
		@media only screen and (min-width: 75em) {
			padding: 5em 4em 0;

			.timeline__row {
				.col {
					.col__content {
						padding-bottom: 2em;
					}
					&:before {
						width: 2px;
						height: 2.25em;
						bottom: 0;
						top: inherit;
						left: 0;
					}
					span {
						padding-bottom: 2em;
					}
				}
			}

		}

	}

	.ar__footer {
		text-align: center;
		padding: 2em 1em 4em;

		@media only screen and (min-width: 48em) {
			padding: 2em 10em 4em;
		}

		@media only screen and (min-width: 75em) {
			padding: 5em 10em;
		}

		p {
			color: #383838;
			font-weight: 100;
			line-height: 1.1;
			font-size: 2em;
			margin-bottom: 1em;

			@media only screen and (min-width: 58.75em) {
				font-size: 3.75em;
			}
		}

	}

}