/**
* CSS
* @version 1
* @author Ozhan Binici
*/

::selection {
	background: #009347;
	color:#FFFFFF;
}

*:focus {
	outline:none;
}

sup {
	line-height:0.6em;
}
html {
	width:100%;
	height:100%;
	padding:0px;
	margin:0px;
	background-color:#FFFFFF;
	overflow-x:hidden;
	-webkit-overflow-scrolling:touch;
}

body {
	width:100%;
	height:auto;
	padding:0px;
	margin:0px;
	background-color:#FFFFFF;
	-webkit-overflow-scrolling:touch;
	font-family:ff-scala-sans-pro, sans-serif;
	font-size:16px;
	line-height:24px;
	font-variant-numeric:lining-nums;
	color:#333333;
}

/* COMMON ITEMS */

.container {
	width:100%;
	max-width:1200px;
	margin:0 auto;
	display:flex;
	padding:0 20px;
}

div {
	position:relative;
	display:block;
}
header .container {
	padding:30px 20px;
	align-items:center;
}
header .logo {
	width:160px;
	height:auto;
	display:block;
}

header .logo:last-child {
	/*margin-right:35px;
	width:220px;*/
	width:160px;
}

header .logo.with-shadow {
	color:#009347;
	font-size:18px;
	line-height:24px;
	font-weight:bold;
	text-align:center;
}
header .logo.with-shadow img{
	box-shadow: 0 3px 10px 0 rgb(0 0 0 / 20%);
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	transition: all 0.25s ease;
	display:block;
	margin-bottom:10px;
}

header .logo.with-shadow:hover img {
    box-shadow: 0 3px 10px 0 rgb(0 0 0 / 40%);
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

header .logo.with-shadow:hover {
	text-decoration:underline;
	text-decoration-thickness:2px;
}

header .logo img {
	width:100%;
	height:auto;
	display:block;
}

header p {
	width:calc(100% - 435px);
	width:calc(100% - 340px);
	padding:20px 50px;
	font-size:18px;
	line-height:26px;
}

header p strong {
	color:#009347;
}

main .segment {
	padding-top:30px;
	padding-bottom:30px;
}

.segment.colored-1 {
	background-color:#E5F4EC;
}

main .container {
	flex-wrap:wrap;
}

.container .column {
	width:calc(100% - 490px);
	flex-grow:0;
}

.container .column.left {
	width:450px;
	margin-right:40px;
}

.container .column.sticky {
	position: -webkit-sticky;
	position: sticky;
	align-self: flex-start;
	top: 20px;
}

.container .column p {
	font-size:18px;
	line-height:24px;
	margin-bottom:20px;
}

.container .column ul,
.container .column ol {
	margin:0px;
	padding:0px;
}
.container .column ul li,
.container .column ol li {
	font-size:18px;
	line-height:24px;
	margin-bottom:20px;
	list-style-type:none;
	display:block;
	position:relative;
}

.container .column ul li {
	text-indent:12px;
}

.container .column ol.highlight li {
	color:#009345;
	font-weight:bold;
}

.container .column ul li:before {
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 7px solid #009345;
	border-right: 0;
	content:" ";
	position:absolute;
	display:block;
	top:5px;
	left:0px;
}

.container .column ol li:before {
	display:inline-block;
	margin-right:5px;
	color:#009345;
	font-weight:bold;
}

.container .column ol li.number-1:before {
	content:"1.";
}

.container .column ol li.number-2:before {
	content:"2.";
}

.container .column ol li.number-3:before {
	content:"3.";
}

.container .column ol li.number-4:before {
	content:"4.";
}

.container .column p.highlight {
	font-weight:bold;
	font-style:italic;
	background-color:#FFFFFF;
	color:#009345;
	padding:10px;
	margin-left:-10px;
	width:calc(100% + 20px);
}

.container .column strong {
	color:#009345;
}
.container .column h1 {
	font-size:42px;
	line-height:50px;
	font-weight:900;
	color:#009345;
	margin-bottom:10px;
}

.container .column h3 {
	font-size:32px;
	line-height:40px;
	font-weight:bold;
	color:#009345;
	margin-bottom:10px;
}

.container .column h5 {
	font-size:18px;
	line-height:24px;
	font-weight:bold;
}

.container .column .image-holder {
	width:100%;
	height:auto;
	margin-bottom:20px;
}

.container .column .image-holder.with-offset {
	width:111%;
	margin:-5.5%;
	margin-top:calc(-5.5% - 3px);
}

.container .column .image-holder img{
	width:100%;
	height:auto;
	display:block;
	margin:0px;
}

.container .column.left .logo {
	max-width:240px;
	margin-top:40px;
}

.segment .title {
	background-color:#89cdaa;
	padding:20px;
	display:flex;
	width:100%;
}

.segment .title h3 {
	font-size:22px;
	line-height:26px;
	font-weight:900;
	width:612px;
}

.segment .title h4 {
	font-size:22px;
	line-height:26px;
	font-weight:bold;
	width:300px;
}

.segment .title h4:last-child {
	width:260px;
	margin-left:auto;
}
.segment .content {
	background-color:#e5f4ec;
	padding:17px 20px 20px 20px;
	display:flex;
	width:100%;
}

.segment .content .text {
	width:220px;
	margin-right:30px;
}

.segment .content .graph {
	width:320px;
	margin-right:30px;
	margin-bottom:20px;
}

.segment .content .graph .header-row {
	border-bottom:2px solid #009347;
	display:flex;
	justify-content:flex-end;
	padding-bottom:6px;
	padding-top:4px;
}

.segment .content .graph .header-row .edition {
	width:40px;
	font-weight:bold;
	line-height:16px;
	margin-left:10px;
}

.segment .content .graph .header-row .edition span {
	text-align:center;
	display:block;
	width:100%;
}

.segment .content .graph .header-row .edition span.sgs {
	letter-spacing:0.075em;
}

.segment .content .graph .row {
	border-bottom:2px solid #a0d7ba;
	display:flex;
	justify-content:flex-start;
	padding-bottom:0px;
}

.segment .content .graph .row.shifted {
	margin-top:5px;
}

.segment .content .graph .row .label {
	padding-top:10px;
	width:calc(100% - 140px);
	line-height:20px;
	padding-bottom:10px;
	font-family:ff-scala-sans-pro-condensed, sans-serif;
	font-weight:bold;
}

.segment .content .graph .row.sub .label {
	padding-left:15px;
}

.segment .content .graph .row .value {
	width:40px;
	margin-left:10px;
	height:60px;
	position:relative;
}

.segment .content .graph .row .value:nth-child(2){
	margin-left:0px;
}

.segment .content .graph .row.sub .value {
	height:40px;
	line-height:40px;
}

.segment .content .graph .row .value.value-does-not-exist {
	line-height:60px;
}
.segment .content .graph .row .value.value-does-not-exist .num {
	padding-right:10px;
}

.segment .content .graph .row .value .num {
	position:absolute;
	display:block;
	width:100%;
	text-align:center;
	left:0px;
	font-weight:bold;
}

.segment .content .graph .row.sub .value .num {
	position:relative;
	left:auto;
}

.segment .content .graph .row .value .num:after {
	content:"%";
	position:relative;
	display:inline-block;
	font-size:12px;
	line-height:18px;
	vertical-align:3px;
}

.segment .content .graph .row .value.value-does-not-exist .num:after {
	display:none;
}

.segment .content .graph .row .value:before {
	content:" ";
	display:block;
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	background-color:#a0d7b8;
}

.segment .content .graph .row.sub .value:before,
.segment .content .graph .row .value.value-does-not-exist:before {
	display:none;
}

.segment .content .graph .row .value.value-8:before {
	height:8%;
}
.segment .content .graph .row .value.value-8 .num {
	bottom:calc(8% - 2px);
}

.segment .content .graph .row .value.value-29:before {
	height:29%;
}
.segment .content .graph .row .value.value-29 .num {
	bottom:calc(29% - 23px);
}

.segment .content .graph .row .value.value-32:before {
	height:32%;
}
.segment .content .graph .row .value.value-32 .num {
	bottom:calc(32% - 23px);
}

.segment .content .graph .row .value.value-34:before {
	height:34%;
}
.segment .content .graph .row .value.value-34 .num {
	bottom:calc(34% - 23px);
}

.segment .content .graph .row .value.value-36:before {
	height:36%;
}
.segment .content .graph .row .value.value-36 .num {
	bottom:calc(36% - 23px);
}

.segment .content .graph .row .value.value-40:before {
	height:40%;
}
.segment .content .graph .row .value.value-40 .num {
	bottom:calc(40% - 23px);
}

.segment .content .graph .row .value.value-43:before {
	height:43%;
}
.segment .content .graph .row .value.value-43 .num {
	bottom:calc(43% - 23px);
}

.segment .content .graph .row .value.value-47:before {
	height:47%;
}
.segment .content .graph .row .value.value-47 .num {
	bottom:calc(47% - 23px);
}

.segment .content .graph .row .value.value-48:before {
	height:48%;
}
.segment .content .graph .row .value.value-48 .num {
	bottom:calc(48% - 23px);
}

.segment .content .graph .row .value.value-49:before {
	height:49%;
}
.segment .content .graph .row .value.value-49 .num {
	bottom:calc(49% - 23px);
}

.segment .content .graph .row .value.value-52:before {
	height:52%;
}
.segment .content .graph .row .value.value-52 .num {
	bottom:calc(52% - 23px);
}

.segment .content .graph .row .value.value-53:before {
	height:53%;
}
.segment .content .graph .row .value.value-53 .num {
	bottom:calc(53% - 23px);
}

.segment .content .graph .row .value.value-54:before {
	height:54%;
}
.segment .content .graph .row .value.value-54 .num {
	bottom:calc(54% - 23px);
}

.segment .content .graph .row .value.value-58:before {
	height:58%;
}
.segment .content .graph .row .value.value-58 .num {
	bottom:calc(58% - 23px);
}

.segment .content .graph .row .value.value-60:before {
	height:60%;
}
.segment .content .graph .row .value.value-60 .num {
	bottom:calc(60% - 23px);
}

.segment .content .graph .row .value.value-61:before {
	height:61%;
}
.segment .content .graph .row .value.value-61 .num {
	bottom:calc(61% - 23px);
}

.segment .content .graph .row .value.value-66:before {
	height:66%;
}
.segment .content .graph .row .value.value-66 .num {
	bottom:calc(66% - 23px);
}

.segment .content .graph .row .value.value-71:before {
	height:71%;
}
.segment .content .graph .row .value.value-71 .num {
	bottom:calc(71% - 23px);
}

.segment .content .graph .row .value.value-72:before {
	height:72%;
}
.segment .content .graph .row .value.value-72 .num {
	bottom:calc(72% - 23px);
}

.segment .content .graph .row .value.value-73:before {
	height:73%;
}
.segment .content .graph .row .value.value-73 .num {
	bottom:calc(73% - 23px);
}

.segment .content .graph .row .value.value-74:before {
	height:74%;
}
.segment .content .graph .row .value.value-74 .num {
	bottom:calc(74% - 23px);
}

.segment .content .graph .row .value.value-75:before {
	height:75%;
}
.segment .content .graph .row .value.value-75 .num {
	bottom:calc(75% - 23px);
}

.segment .content .graph .row .value.value-76:before {
	height:76%;
}
.segment .content .graph .row .value.value-76 .num {
	bottom:calc(76% - 23px);
}

.segment .content .graph .row .value.value-78:before {
	height:78%;
}
.segment .content .graph .row .value.value-78 .num {
	bottom:calc(78% - 23px);
}

.segment .content .graph .row .value.value-80:before {
	height:80%;
}
.segment .content .graph .row .value.value-80 .num {
	bottom:calc(80% - 23px);
}

.segment .content .graph .row .value.value-81:before {
	height:81%;
}
.segment .content .graph .row .value.value-81 .num {
	bottom:calc(81% - 23px);
}

.segment .content .graph .row .value.value-82:before {
	height:82%;
}
.segment .content .graph .row .value.value-82 .num {
	bottom:calc(82% - 23px);
}

.segment .content .graph .row .value.value-85:before {
	height:85%;
}
.segment .content .graph .row .value.value-85 .num {
	bottom:calc(85% - 23px);
}

.segment .content .graph .row .value.value-86:before {
	height:86%;
}
.segment .content .graph .row .value.value-86 .num {
	bottom:calc(86% - 23px);
}

.segment .content .graph .row .value.value-87:before {
	height:87%;
}
.segment .content .graph .row .value.value-87 .num {
	bottom:calc(87% - 23px);
}

.segment .content .graph .row .value.value-88:before {
	height:88%;
}
.segment .content .graph .row .value.value-88 .num {
	bottom:calc(88% - 23px);
}

.segment .content .graph .row .value.value-90:before {
	height:90%;
}
.segment .content .graph .row .value.value-90 .num {
	bottom:calc(90% - 23px);
}

.segment .content .graph .row .value.value-92:before {
	height:92%;
}
.segment .content .graph .row .value.value-92 .num {
	bottom:calc(92% - 23px);
}

.segment .content .graph .row .value.value-95:before {
	height:95%;
}
.segment .content .graph .row .value.value-95 .num {
	bottom:calc(95% - 23px);
}

.segment .content .graph .row .value.value-96:before {
	height:96%;
}
.segment .content .graph .row .value.value-96 .num {
	bottom:calc(96% - 23px);
}

.segment .content .graph .row .value.value-99:before {
	height:99%;
}
.segment .content .graph .row .value.value-99 .num {
	bottom:calc(99% - 23px);
}

.segment .content .recommendations {
	position:relative;
	display:block;
	background-color:#FFFFFF;
	padding:17px 20px 10px 5px;
	width:350px;
	margin-right:30px;
	margin-bottom:auto;
	counter-reset: num;
	margin-top:-17px;
}

.segment .content .recommendations li {
	counter-increment: num;
	padding-left:25px;
	position:relative;
	margin:0px;
}

.segment .content .recommendations li::before {
	content: counter(num) ". ";
	position:absolute;
	top:0px;
	left:0px;
	width:25px;
	text-align:right;
	padding-right:5px;
	box-sizing:border-box;
}

.segment .content .companies {
	position:relative;
	display:block;
	width:260px;
	margin-left:auto;
}

footer .container {
	padding:17px 20px;
	justify-content:space-between;
	border-top:2px solid #009345;
}

footer p.notice {
	width:570px;
	order:1;
}

footer p a {
	color:#501f7e;
	font-weight:bold;
}

footer p a:hover {
	text-decoration:underline;
}

footer ul.previous-editions {
	order:3;
	margin-left:auto;
	display:flex;
}

footer ul.previous-editions li {
	margin-left:20px;
}

footer ul.previous-editions a {
	font-weight:bold;
	color:#009347;
}

footer div.copyright {
	order:2;
	margin-left:0px;
}

@media (max-width:1260px){
	.segment .title h4:last-child{
		display:none;
	}
	
	.segment .content .companies:before {
		content:"Top Performers in SGS 2022";
		display:block;
		font-size: 22px;
		line-height: 26px;
		font-weight: bold;
		width: 300px;
		position:absolute;
		top:-40px;
		left:0px;
	}
	
	.segment .content {
		flex-wrap:wrap;
	}
	
	.segment .content .companies {
		margin-left:0px;
		width:100%;
		margin-top:70px;
		margin-right:0px;
		display:flex;
		flex-wrap:wrap;
	}
	
	.segment .content .companies li {
		margin-right:20px;
	}
	
	.segment .content .companies li:last-child {
		margin-right:0px;
	}
	
	header .container {
		flex-wrap:wrap;
		padding:20px;
	}
	
	header .logo:nth-child(1){
		order:1;
	}
	header .logo:nth-child(3){
		order:2;
		margin-right:0px;
		margin-left:auto;
	}
	header p {
		order:3;
		width:100%;
		padding:0px;
		margin-top:20px;
	}
	
	footer .container {
		flex-wrap:wrap;
	}
	footer ul.previous-editions {
		width:100%;
		margin-left:0px;
		margin-top:20px;
		display:flex;
	}
	
	/*footer ul.previous-editions:before {
		content:"See also";
		display:block;
		margin-right:20px;
	}
	*/
	footer ul.previous-editions li {
		margin-right:20px;
	}
	footer div.copyright {
		margin-right:auto;
	}
}

@media (max-width:1130px){
	footer ul.previous-editions {
		width:auto;
		margin-left:auto;
		margin-right:0px;
		order:2;
		margin-top:0px;
	}
	
	footer div.copyright {
		width:100%;
		margin-left:0px;
		order:3;
		margin-top:20px;
	}
}

@media (max-width:1040px){
	.segment .title {
		position: -webkit-sticky;
		position: sticky;
		top:0px;
		z-index:2;
	}
	
	.segment .title h4 {
		display:none;
	}
	
	.segment .content .recommendations {
		margin-top:70px;
		margin-right:0px;
		width:100%;
	}
	
	.segment .content .recommendations:before {
		content:"Recommendations";
		display:block;
		font-size: 22px;
		line-height: 26px;
		font-weight: bold;
		width: 300px;
		position:absolute;
		top:-40px;
		left:0px;
	}
	
	.segment .content .text {
		width:50%;
	}
	
	.segment .content .graph {
		margin-right:0px;
		width:calc(50% - 30px);
	}
	
	footer ul.previous-editions {
		width:100%;
		margin-left:0px;
		order:2;
		margin-top:20px;
		display:flex;
	}
	
	/*footer ul.previous-editions:before {
		content:"See also";
		display:block;
		margin-right:20px;
	}
	*/
	footer ul.previous-editions li {
		margin-right:20px;
	}
	
	
	
	footer div.copyright {
		width:100%;
		margin-left:0px;
		order:3;
		margin-top:20px;
	}
	
	footer ul.previous-editions li {
		margin-left:0px;
	}
}

@media (max-width:660px){
	.segment .content .text {
		width:100%;
		margin-right:0px;
		margin-bottom:20px;
	}
	
	.segment .content .graph {
		margin-bottom:0px;
		width:100%;
	}
}


@media (max-width:520px){
	header .logo:nth-child(1){
		margin-right:5%;
	}
	
	header .logo:nth-child(3){
		margin-left:5%;
		width:45%;
	}
	
	header .logo {
		width:45%;
	}
	
	.segment .content .companies {
		display:block;
	}
	.segment .content .companies li {
		margin-right:0px;
	}
	
	footer p.notice {
		width:100%;
	}
	
	
}


@media (max-width:800px){
	.container .column.left {
		width:100%;
		margin-bottom:30px;
	}
	.container .column {
		width:100%;
	}
	
	.container .column.sticky {
		position:relative;
		top:auto;
	}
}