/* home page sections */
section#HomeBanner{
	display: table;
	height: auto;
}

section#HomeBanner > div{
	display: table-cell;
	vertical-align: top;
}

section#HomeBanner > div.left-container{
	background: #fff;
	width: 40%;
	padding: 37px 60px 60px;
}

section#HomeBanner > div.left-container p{
	margin: 20px 0px 30px;
}

section#HomeBanner > div.left-container .button{ 
	margin-right: 20px; 
	width: 100%;
	max-width: 330px;
	text-align: center;
}
section#HomeBanner > div.left-container .button.blue{ margin-top: 20px; }

section#HomeBanner > div.right-container{
	background-size: cover!important;
	background-position: center center!important;
	width: 60%;
}

section#CompanyList{
	background: #eceadb;
	padding: 40px 0px 30px;
	text-align: center;
}

section#CompanyList .container{ max-width: 1240px; padding: 0px 25px; }
section#CompanyList .container .row{
	margin-right: -25px;
	margin-left: -25px;
	text-align: center;
}
section#CompanyList .container h3{ margin-bottom: 15px; }
section#CompanyList .container a.button{ margin: 15px 0px 10px; }

section#CompanyList [class*="col-"]{ 
	padding: 25px; 
	width: 310px;
	display: inline-block;
	float: none;
    margin-left: -2px;
    margin-right: -2px;
}

section#CompanyList [class*="col-"] a{
	width: 100%;
	display: block;
	height: 340px;
	position: relative;
	/* background-image: url(../../img/flower.png); */
	/* background-image: url(../../img/cotton-bg.png); */
	background-repeat: no-repeat!important;
	background-size: 100% auto!important;
	background-position: bottom 60px right!important;
	/* background-position: center center; */
	border-radius: 5px;
	box-shadow: 0px 2px 5px 0px rgba(0,0,0, 0.2);
	overflow: hidden;
}

/* section#CompanyList [class*="col-"] a:hover{
	transform: scale(1.115384615384615);
} */

section#CompanyList [class*="col-"] a.leading-the-way{
	background: rgb(234,77,14); 
	background-image: url(../../img/cotton-bg.png); 
    background-image: url(../../img/cotton-bg.png), -webkit-linear-gradient(rgb(21,95,15), rgb(49,139,37));
    background-image: url(../../img/cotton-bg.png), -o-linear-gradient(rgb(21,95,15), rgb(49,139,37));
    background-image: url(../../img/cotton-bg.png), -moz-linear-gradient(rgb(21,95,15), rgb(49,139,37));
    background-image: url(../../img/cotton-bg.png), linear-gradient(rgb(21,95,15), rgb(49,139,37));	
}

section#CompanyList [class*="col-"] a.well-on-the-way{
	background: rgb(235,171,0); 
	background-image: url(../../img/cotton-bg.png); 
    background-image: url(../../img/cotton-bg.png), -webkit-linear-gradient(rgb(235,171,0), rgb(248,205,1));
    background-image: url(../../img/cotton-bg.png), -o-linear-gradient(rgb(235,171,0), rgb(248,205,1));
    background-image: url(../../img/cotton-bg.png), -moz-linear-gradient(rgb(235,171,0), rgb(248,205,1));
    background-image: url(../../img/cotton-bg.png), linear-gradient(rgb(235,171,0), rgb(248,205,1));	
}

section#CompanyList [class*="col-"] a.starting-the-journey{
	/* background-color: #f27a24; */
	background: rgb(234,77,14); 
	background-image: url(../../img/cotton-bg.png); 
    background-image: url(../../img/cotton-bg.png), -webkit-linear-gradient(rgb(234,77,14), rgb(242,122,36));
    background-image: url(../../img/cotton-bg.png), -o-linear-gradient(rgb(234,77,14), rgb(242,122,36));
    background-image: url(../../img/cotton-bg.png), -moz-linear-gradient(rgb(234,77,14), rgb(242,122,36));
    background-image: url(../../img/cotton-bg.png), linear-gradient(rgb(234,77,14), rgb(242,122,36));	
}

section#CompanyList [class*="col-"] a.not-yet-in-the-starting-blocks{
	background: rgb(170,11,33);
	background-image: url(../../img/cotton-bg.png); 
    background-image: -webkit-linear-gradient(rgb(170,11,33), rgb(200,29,67)), url(../../img/cotton-bg.png);
    background-image: -o-linear-gradient(rgb(170,11,33), rgb(200,29,67)), url(../../img/cotton-bg.png);
    background-image: -moz-linear-gradient(rgb(170,11,33), rgb(200,29,67)), url(../../img/cotton-bg.png);
    background-image: url(../../img/cotton-bg.png), linear-gradient(rgb(170,11,33), rgb(200,29,67));	
}

section#CompanyList [class*="col-"] a .bottom{
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-weight: 700;
	letter-spacing: .1em;
	font-size: 15px;
	text-transform: uppercase;
	background: #fff;
	color: #555555;
	width: 100%;
	transition: all ease-in-out .25s;
	z-index: 2;
}

section#CompanyList [class*="col-"] a:hover .bottom{
	color: #fff;
	background: #319044;
	transition: all ease-in-out .25s;
}

section#CompanyList [class*="col-"] a:before{
	position: absolute;
	width: 100%;
	height: 100%;
	content: '';
	top: 0px;
	left: 0px;
	background: url(../../img/gradient.png) center center no-repeat;
	background-size: cover;
	opacity: .3;
	z-index: 2;
}

section#CompanyList [class*="col-"] a .company{
	position: absolute;
	top: 0;
	left: 0;
	font-family: 'DIN Alternate';
	font-size: 20px;
	font-weight: 500;
	text-transform: uppercase;
	color: #fff;
	letter-spacing: .1em;
	padding: 0px 24px;
	padding-top: 24px;
	line-height: inherit;
	width: 100%;
	z-index: 2;
	transition: padding ease .25s;
}

section#CompanyList [class*="col-"] a:hover .company{
	/* transform: scale(0.8965517241379313); */
	/* transition: all ease-in-out .25s; */
	/* font-size: 26px; */
    /* word-break: break-all; */
	/* padding: 0px 30px; */
	padding-top: 38px;
}

section#CompanyList [class*="col-"] a .score{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	font-size: 88px;
	font-weight: 700;
	color: #fff;
	line-height: inherit;
	width: 100%;
	transition: all ease-in-out .25s;
	margin-top: -11px;
	z-index: 2;
}

section#CompanyList [class*="col-"] a:after{
	position: absolute;
	width: 100%;
	height: 100%;
	content: '';
	top: 0px;
	left: 0px;
	border-radius: 5px;
	opacity: 0;
	/* border: 1px solid #fff; */
	background: url('../../img/line.png') center center no-repeat;
	background-size: cover;
	z-index: 1;
	transition: all ease-in-out .25s;
	transform: scale(1.1);
}

section#CompanyList [class*="col-"] a:hover:after{
	opacity: 1;
	transform: scale(1);
}

#Legends{
	position: fixed;
	width: 100%;
	bottom: 0px;
	left: 0px;
	z-index: 10;
	/* transform: translateY(100%); */
	transform: translate3d(0%, 1%, 0px);
	transition: all ease-in-out .5s;
}

#Legends.slide-down{
	transition: all ease-in-out .5s;	
	transform:translate3d(0%, 101%, 0px);
}

#Legends .content{
	height: 60px;
	width: 100%;
	background: #ffffff;
	box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.2);
	text-align: left;
	position: relative;
	transition: all ease-in-out .5s;	
}

#Legends.slide-right{
	transform: translate3d(101%, 1%, 0px);
}

#Legends.slide-right.slide-down{
	transform: translate3d(101%, 100%, 0px);
}


#Legends .content a.hide-btn{
	position: absolute;
	top: 0px;
	right: 0px;
	background: #ececec;
	line-height: 60px;
	padding: 0px 20px;
	color: #252525;
	font-weight: 700;
	font-size: 14px;
}

#Legends .content a.show-btn{
	font-size: 14px;
	position: absolute;
	bottom: 10px;
	left: 0px;
	transform: translateX(-109%);
	background: #fff;
	line-height: 50px;
	padding: 0px 20px;
	color: #252525;
	font-weight: 700;
	box-shadow: 0px 2px 5px 0px rgba(0,0,0, 0.2);
}

#Legends .content a.hide-btn:hover, #Legends .content a.show-btn:hover{
	background: #319044!important;
	color: #fff;
}

#Legends .popup{ display: none; }

@media only screen and (max-width : 1440px) {}

@media only screen and (max-width : 1240px) {
	/* section#CompanyList [class*="col-"]{ padding: 20px; } */
	section#CompanyList .container .row{
		margin: 0px -20px;
	}

	#HomeBanner h1{
		font-size: 30px;
		line-height: 40px;
	}

	#HomeBanner p{
		font-size: 14px;
		line-height: 24px;
	}

	section#HomeBanner > div.left-container{ padding: 30px 40px 40px; }
}

@media only screen and (max-width : 1000px) {
	#Legends .content{
		height: 120px;
	}

	.legends-list li{ width: 35%; }
}

@media only screen and (max-width : 768px) {
	section#HomeBanner > div{
		width: 100%!important;
		display: block;
	}

	section#HomeBanner > div.right-container{
		padding-bottom: 59.14634146341463%;
	}	

	section#HomeBanner > div.left-container{
		    padding: 36px 40px 60px;
	}

	section#CompanyList .container{ padding: 0px 20px; }

	#Legends .content{
		display: none;
	}

	#Legends .popup{
		display: block;
		background: #fff;
		line-height: 50px;
		padding: 0px 20px;
		color: #252525;
		font-weight: 700;
		box-shadow: 0px 2px 5px 0px rgba(0,0,0, 0.2);
	}

	#LegendModal .modal-dialog{
		max-width: 280px;
		margin: 40px auto;
	}

	#LegendModal .modal-dialog .modal-body{
		border-radius: 2px;
		padding: 20px;
		padding-bottom: 5px;
		padding-top: 12px;
	}

	#LegendModal .modal-dialog hr{
		margin: 0px;
		margin-top: 10px;
	}

	#LegendModal .modal-dialog li{ display: block; width: 100%!important; }

	#HomeBanner p{
		font-size: 14px;
		line-height: 24px;
	}

}

@media only screen and (max-width : 650px) {
	section#CompanyList [class*="col-"]{
		width: 50%;
		padding: 10px;
	}

	section#CompanyList [class*="col-"] a{
		padding-bottom: 130.7692307692308%;
		height: auto;
		/* background-position: top 52% right; */
	}

	section#CompanyList .container .row {
	    margin: 0px -10px;
	}

	section#CompanyList [class*="col-"] a .score{ font-size: 15vw; }

	section#CompanyList [class*="col-"] a .company{ 
		font-size: 3.1vw;
		padding-top: 15px; 
		line-height: 4.1vw;
	    /* max-height: 69px; */
	    /* overflow: hidden; */
	}

	section#CompanyList [class*="col-"] a:hover .company{ padding-top: 20px }
}

@media only screen and (max-width : 480px) {
	section#HomeBanner > div.left-container{
		    padding: 36px 20px 60px;
	}

	section#CompanyList [class*="col-"] a .company{ max-height: 30%; }
}

@media only screen and (max-width : 400px) {
	section#CompanyList [class*="col-"] a .bottom{
		height: 40px;
		line-height: 40px;
		font-size: 13px;
	}

	section#CompanyList [class*="col-"] a{
		background-position: bottom 40px right!important;
	}
}

@media only screen and (max-height : 480px) {}

/* end of home page sections */