/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

#awards-pg.container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.3;
}

body #awards-pg {
	font-family: Arial,Helvetica,sans-serif;
	color: #000;
	margin: 0;
}



#awards-pg h1 {
	color: #0070c5;
	font-size: 23px;
	font-weight: normal;
}

#awards-pg h1 span {
	font-size: 34px;
	font-weight: bold;
}

#awards-pg .intro h2{
	color:#0000EE;
}

#awards-pg h2 {
	text-transform: uppercase;
    font-size: 20px;
    margin: 0;
    font-weight: bold;
}


.header-lines {
 overflow: hidden;
 text-align: center;
}
.header-lines:before,
.header-lines:after {
 background-color: #333;
 content: "";
 display: inline-block;
 height: 3px;
 position: relative;
 vertical-align: middle;
 width: 50%;
}
.header-lines:before {
 right: 0.5em;
 margin-left: -50%;
}
.header-lines:after {
 left: 0.5em;
 margin-right: -50%;
}

#awards-pg h3 {
	margin-top: 0;
	color: #0000EE;
	font-weight: normal;
	font-size: 25px;
	margin-bottom: 10px;
}

#awards-pg h4 {
	font-size: 20px;
	margin: 0;
	color: #fff;
	font-weight: bold;
	display: none;
}

.intro {
	padding: 2em 1em;
}

.intro p {
	font-size: 17px;
}

/* ==========================================================================
   Award Block - Intro
   ========================================================================== */

.award-block {
	padding: 1em;
	margin: 0.5em 0;
	text-align: center;
	overflow: hidden;
}

.award-block.gray-bg {
	background-color: #f2f2f2;
}

.award-intro {
	max-width: 410px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	padding-bottom: 2em;
}

.award-intro p {
	margin-top: 0;
	line-height: 1.5;
	font-size: 16px;
}

.award-img {
	width: 75%;
}

/*.award-intro::after {
	content: "";
	position: absolute;
	width: 91px;
	height: 144px;
	top: 0;
	right: -6em;
	background: url('images/awards-logos/olvie-branch-right.png');
}

.award-intro::before {
	content: "";
	position: absolute;
	width: 91px;
	height: 144px;
	top: 0;
	left: -6em;
	background: url('images/awards-logos/olvie-branch-left.png');
}*/


@media screen and (max-width: 767px) {
	.award-intro::before, .award-intro::after {
		display: none;
	}
}

@media screen and (min-width: 950px) {
	.award-block {
		padding: 2em 3em;

	}

		.award-block-flex {
		padding: 2em 3em;
		     display: flex;
    flex-wrap: wrap;
	}


.award-winner-container {
	flex: 1 0 25%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border: 1px solid #000;
    border-radius: 5px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 15px;
      text-align: center;
    padding: 5px 15px 10px 15px;

}

.award-winner-container-empty {
	flex: 1 0 25%;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 15px;
      text-align: center;
    padding: 5px 15px 10px 15px;

}

	.intro {
		padding: 2em 3em;
	}
}



@media screen and (max-width: 949px) {


		.award-block-flex {
		padding: 2em 3em;
		     display: flex;
    flex-wrap: wrap;
	}


.award-winner-container {
	flex: 1 0 45%;
    border: 1px solid #000;
    border-radius: 5px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 15px;
      text-align: center;
    padding: 5px 15px 10px 15px;

}



}


@media screen and (max-width: 650px) {


		.award-block-flex {
		     display: flex;
    flex-wrap: wrap;
	}


.award-winner-container {
	flex: 1 0 100%;
    border: 1px solid #000;
    border-radius: 5px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 15px;
      text-align: center;
    padding: 5px 15px 10px 15px;

}


.award-winner-container-empty {
display: none !important;

}

}








/* ==========================================================================
   Award Block - Winners - headers
   ========================================================================== */

.winners-block .tabs img, .tab_drawer_heading img {
	max-width: 160px!important;
	max-height: 80px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: -25px;
	left: 0;
	margin: auto!important;
}

.winners-block .tabs .header, .tab_drawer_heading .header {
	background-color: #0000EE;
	color: #fff;
	padding: 0.5em;
}

.winners-block .tabs .header p, .tab_drawer_heading .header p {
	margin: 0;
	text-transform: uppercase;
	font-size: 13px;
}

.winners-block .tabs .latam .header, .tab_drawer_heading.latam .header {
	background-color: #0071c5;
}


/* ==========================================================================
   Tabbed Styles
   ========================================================================== */

.winners-block ul.tabs {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.winners-block ul.tabs li {
	margin: 0;
	cursor: pointer;
	position: relative;
	flex: 1;
	flex-grow: 1;
	-webkit-box-flex: 1;
	transition: flex-basis .3s linear;
	transition: flex-basis .3s linear,-ms-flex-preferred-size .3s linear;
	background-color: #f2f2f2;
	position: relative;
	height: 175px;
	margin-right: 2px;
}

.winners-block .gray-bg ul.tabs li {
	background-color: #fff;
}

.winners-block ul.tabs li.active {
	color: #fff;
	display: block;
	flex-basis: 13%;
}

.tab_container {
	clear: both;
	float: left;
	width: 100%;
}

.tab_drawer_heading { display: none; }

@media screen and (max-width: 767px) {
	.winners-block .tabs {
		display: none;
	}
	.tab_drawer_heading {
		color: #fff;
		background-color: #f2f2f2;
		margin: 0;
		display: block;
		cursor: pointer;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		position: relative;
		height: 200px;
	}
	.gray-bg .tab_drawer_heading {
		background-color: #fff;
	}
	.d_active {
		color: #fff;
	}
	.winners-block ul.tabs {
		display: none;
	}
}

/* ==========================================================================
   Award Block - arrows
   ========================================================================== */

.tab_drawer_heading::after,
.winners-block ul.tabs li::after {
	content: "SEE MORE +";
	/*background: url('sites/businesscomputeforum/files/partner-spotlight/images/arrow-1.png') no-repeat;*/
	position: absolute;
	width: 85px;
	height: 16px;
	right: 0;
    bottom: 0.8em;
    left: 0;
    margin: auto;
    color: #003c71;
    font-size: 13px; 
    /*transition: bottom 200ms linear;*/
}

.tab_drawer_heading.latam::after,
.winners-block ul.tabs li.latam::after  {
	content: "SEE MORE +";
	color: #0071c5;
	/*background: url('sites/businesscomputeforum/files/partner-spotlight/images/arrow-2.png') no-repeat;*/
}

/* ==========================================================================
   Award Block - arrows on hover
   ========================================================================== */

.tab_drawer_heading:hover::after,
.winners-block ul.tabs li:hover::after {
	/*bottom: 0.3em;*/
	color: #000;
}


.tab_drawer_heading.d_active::after,
.winners-block ul.tabs li.active::after {
	background: none;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 20px 0 20px;
	border-color: #f2f2f2 transparent transparent transparent;
	position: absolute;
	bottom: -20px;
	content: "";
}

.gray-bg .tab_drawer_heading.d_active::after,
.gray-bg .winners-block ul.tabs li.active::after {
	border-color: #ffffff transparent transparent transparent;
}

/* ==========================================================================
   Award Block - dropdown
   ========================================================================== */


.tab_content {
	padding: 30px 0 20px 0;
	display: none;
}

.tab_content img {
	max-width: 250px;
}

.tab_content p {
	font-size: 14.5px;
	line-height: 1.5;
}

.tab_content p.btn {
	margin-top: 2em;
}

.btn a {
	background-color: #003c71;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 5px;
	padding: 0.6em 4em;
	font-weight: normal;
	border: 2px solid #003c71;
}

.btn a:hover {
	background-color: #f2f2f2;
	color: #000;
}

.latam .btn a {
	background-color: #0071c5;
	border: 2px solid #0071c5;
}

.latam .btn a:hover {
	background-color: #f2f2f2;
}

@media screen and (min-width: 767px) {
	.tab_content img {
		float: left;
		margin: 0 1em 1em 0;
	}
	.tab_content p {
		text-align: left;
		margin-top: 0;
	}
}