/*Brandstory page*/


/* Attention, do not edit this file directly, please use the stylesheet editor in admin.
Any changes made here will be overwritten*/

h1.page_title {
text-align:center;
letter-spacing:0.2em;
text-transform:uppercase;
font-size:1.4em;
padding:10px;
background:#eee;
font-weight:bolder;
font-family:'Freight Sans Bold' !important;
margin-bottom:25px;
}
.main_content {
width:90%;
max-width:1600px;
margin:auto;
}
.main_content section h2.sectionTitle {
font-family:'Freight Sans Bold';
color:#000;
text-align:left;
display:block;
width:100%;
margin-bottom:50px;
}
.toggleShowButton {
width:300px;
text-transform:uppercase;
font-family:'Freight Sans Bold';
color:#666;
background:none;
border:2px solid #eee;
outline:none;
margin:auto;
padding:2% 10px;
font-size:15px;
letter-spacing:.1em;
}
.tag {
font-family:'freight_sans_black';
background:#f5e942;
color:#000;
text-transform:uppercase;
padding:5px 10px;
display:inline-block;
}
.main_content section {
margin:50px 0;
}
#featured {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
#featured .item {
width:48%;
margin:30px 0;
position:relative;
}
#featured img {
display:block;
width:100%;
min-height:150px;
}
#featured .tag {
position:absolute;
top:20px;
left:0;
}
#featured .overlay {
position:absolute;
top:50%;
background:rgba(255,255,255,0.8);
padding:10px;
width:80%;
margin:auto;
left:0;
right:0;
}
#featured .overlay h4 {
margin:0 0 5px 0;
padding:0;
font-family:'Freight Sans Bold';
}
#featured .overlay p {
margin:0;
}
#featured .bottom_content {
padding:10px 0;
text-align:left;
}
#featured .bottom_content .details {
font-family:'Freight Sans';
}
#featured .bottom_content .details strong {
font-family:'Freight Sans Bold';
}
#featured .bottom_content p {
font-family:'Freight Text';
line-height:1.3em;
}
#spon_content {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
#spon_content .sectionTitle {
margin-bottom:0;
}
#spon_content .sectionTitle .tag {
font-size:15px;
position:relative;
top:-7px;
}
#spon_content .item {
width:23%;
margin:30px 0;
text-align:left;
}
#spon_content .item h4 {
font-family:'Freight Sans Bold';
color:#767676;
}
#spon_content .item img {
width:100%;
min-height:150px;
margin-bottom:15px;
}
#spon_content .item .details {
font-family:'freight_sans_light';
font-weight:bold;
color:#000;
font-size:1em;
text-transform:capitalize;
}
#spon_content .item strong {
font-family:'Freight Sans Bold';
color:#000;
text-transform:capitalize;
}
#spon_content .item p {
font-family:'Freight Text';
margin-bottom:10px;
line-height:1.3em;
}
#online_content {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
#online_content > .item {
width:30%;
margin:0 0 30px 0;
text-align:left;
}
#online_content .item h4 {
font-family:'Freight Sans Bold';
}
#online_content .item .date {
font-family:'Freight Sans Bold';
}
#online_content .sectionTitle {
margin-bottom:30px;
}
#spon_content .itemrow {
width:100%;
display:flex;
justify-content:space-between;
}
#spon_content .itemrow .item {
cursor:pointer;
}
#brandstory-container {
width:95%;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin:0 auto 50px auto;
padding:15px;
border-radius:0;
list-style:none;
background:#f1f1f1;
max-height:500px;
overflow-y:scroll;
border:2px solid #aaa;
}
#brandstory-container li {
width:23%;
background:#eee;
margin-bottom:20px;
}
#brandstory-container h4 {
font-family:'Freight Sans Bold';
color:#767676;
}
#spon_content .item.active-brandstory-category {
border:2px solid #aaa;
}

@media (min-width: 1200px) {

}

@media (min-width: 980px) and (max-width: 1199px) {

}

@media (min-width: 768px) and (max-width: 979px) {
#featured .overlay {
top:30%;
}

}

@media (max-width: 767px) {
#featured .overlay {
top:10%;
}
#spon_content .item {
width:45%;
}
#online_content > .item {
width:45%;
}
#brandstory-container li {
width:45%;
}

}

@media (max-width: 480px) {
#featured .item {
width:90%;
margin:20px auto;
}
#spon_content .item {
width:90%;
}
#online_content > .item {
width:90%;
}
#brandstory-container li {
width:100%;
}

}