@font-face{
    font-family: gothambook;
    src: url('https://www.idesignawards.com/fonts/Gotham-Book.ttf'); /* IE9 */
}
@font-face{
    font-family: gothambold;
    src: url('https://www.idesignawards.com/fonts/Gotham-Bold.ttf'); /* IE9 */
}
@font-face{
    font-family: gothamlight;
    src: url('https://www.idesignawards.com/fonts/Gotham-Light.ttf'); /* IE9 */
}

body {
	font-family: 'Cairo', sans-serif;
}

a,a:hover{
/*     font-family: gothambook, trebuchet ms, tahoma; */
    font-family: 'Cairo', sans-serif;
    font-weight: bold;
    color: #231f20;
}

.navbar{
    background: #FFFFFF;
    margin-bottom: 0px;
    border: none;
}
ul.nav li a{
    font-size: 15px;
    font-weight: normal;
}
@media(min-width:768px){
    ul.nav li a{
        height: 65px;
        padding-top: 40px;
        padding-left: 15px;
        padding-right: 15px;
    }
}

ul.nav li a.login{
    margin-right: 40px;
}
ul.nav li a.twitter{
    font-size: 2em;
}
ul.nav li a.facebook{
    font-size: 1.9em;
}

@media(min-width:768px){
    ul.nav li a.twitter, ul.nav li a.facebook{
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 30px;
    }
}
.navbar a:hover, .navbar a:active, .navbar li.active>a{
    background: #231f20 !important;
    color: #FFFFFF !important;
    transition: background 0.4s, color 0.4s;
}
.navbar button{
    background: #231f20;
}
.navbar button .icon-bar{
    background: #FFFFFF;
}


ul.nav-footer{
    list-style-type: none;
    padding: 0;
    line-height: 30px;
}
ul.nav-footer a, ul.nav-footer:hover{
    font-size: 14px;
    color: #838651;
}




.banner{
    width: 100%;
    background: #DEF1E7;
    text-align: center;
    margin-bottom: 26px;
}

.banner-small{
    width: 100%;
    background: #DEF1E7;
    text-align: center;
    margin-bottom: 26px;
}

.banner .container {
    position: relative;
}

.banner-cta {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 60px;
}

.banner .btn {
    border-radius: 0px;
    background: 
#231f20;
color:
    #FFFFFF;
    padding: 6px 16px;
    font-family: gothambold;
    font-size: 18px;
    letter-spacing: 0;
    margin-bottom: 30px;
}

.banner-cta a {
    display: block;
    font-weight: 400!important;
}

.banner-cta a:hover {
    font-weight: 400!important;
}

@media screen and (max-width: 500px) {
    .banner-cta {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }
}

.banner img{
    max-width: 100%;
}
.toppadding{
    padding-top: 50px;
}

.bottompadding{
    padding-bottom: 50px;
}


.centered{
    text-align: center;
}

.noCategories .category-button {
    display: none;

}
.titlebox{
    letter-spacing: 9px;
    font: 20px gothambook;
    font-weight: bold;
    display: inline-block;
    padding: 14px 85px;
    margin-top: 30px;
    margin-bottom: 30px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
@media(max-width:767px){
    .titlebox{
        letter-spacing: 3px;
        font: 16px gothambook;
        font-weight: bold;
        display:inline-block;
        padding: 15px 34px;
        margin-top: 25px;
        margin-bottom: 25px;
        position: relative;
        left: 50%;
        -webkit-transform: -webkit-translateX (-50%);
        transform: translateX(-50%);
    }
}


.grant .category-button, .grant .category-button:hover{
    text-transform: uppercase;
    width: 310px;
}
.grant .architectural, .grant .architectural:hover{
    width: 420px;
}
.grantCategories  .circle {
    /*background-color: #b6ac9d;*/
    background-color: #fff;
}
.grantCategories .titlebox {
    color: #231f20;
    border: #fff 2px solid;
}
.grantCategories .circle .description{
    font-size: 20px;    
}

.grant .callforentries .titlebox {
    color: #231f20;
    border: #b6ac9d 2px solid;
}

.covidHomeBanner .buy, .grant .button{
    border-radius: 2px;
    background: #231f20;
    color: #FFFFFF;
    padding: 6px 16px;
    font-family: gothambold;
    font-size: 16px;
    letter-spacing: 0;
}
.covidHomeBanner .buy:hover,.grant .buy:hover{
    color: #B8C683;
    transition: color 0.4s;
}
.grant .cfe-product .titlebox {
    color: #231f20;
    border: #fff 2px solid;
}
.grant .image-preview img{
    width: 100%;
}


/* Box-sizing reset: //w3bits.com/?p=3225 */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* The Masonry Container */
.masonry {
  margin: 1.5em auto;
  max-width: 1170px;
  column-gap: 1.5em;
}

/* The Masonry Brick */
.item {
  background: #fff;
  padding: 1em;
  margin: 0 0 1.5em;
}

/* Masonry on large screens */
@media only screen and (min-width: 1024px) {
  .masonry {
    column-count: 4;
  }
}

/* Masonry on medium-sized screens */
@media only screen and (max-width: 1023px) and (min-width: 768px) {
  .masonry {
    column-count: 3;
  }
}

/* Masonry on small screens */
@media only screen and (max-width: 767px) and (min-width: 540px) {
  .masonry {
    column-count: 2;
  }
}

.category-button, .category-button:hover{
    box-sizing: border-box;
    display: inline-block;
    width: 216px;
    background: #FFFFFF;
    /* padding: 19px 20px 17px; */
    padding: 1.25em 1em 1.25em;
    letter-spacing: 4px;
    font: 14px gothambold;
    text-align: center;
    text-decoration: none;
    margin: 5px;
    transition: background 0.4s;
}
.category-button.architectural{
    border: #9fc1c7 2px solid;
}
.category-button.architectural:hover, .category-button.architectural.active{
    background: #9fc1c7;
}
.category-button.interior{
    border: #e6b496 2px solid;
}
.category-button.interior:hover, .category-button.interior.active{
    background: #e6b496;
}
.category-button.product{
    border: #f29c9f 2px solid;
}
.category-button.product:hover, .category-button.product.active{
    background: #f29c9f;
}
.category-button.fashion{
    border: #f7c266 2px solid;
}
.category-button.fashion:hover, .category-button.fashion.active{
    background: #f7c266;
}
.category-button.graphics{
    border: #bac3ab 2px solid;
}
.category-button.graphics:hover, .category-button.graphics.active{
    background: #bac3ab;
}




img.short{
    width: 100% !important;
}
img.tall{
    width: 100% !important;
}




.panels{
    margin-top: 24px;
    /*display:-ms-grid;*/
    /*display: grid;*/
    /*grid-gap: 10px;*/
    /*grid-template-columns: repeat(auto-fill, minmax(250px,1fr));*/
    /*-ms-grid-columns: repeat(auto-fill, minmax(250px,1fr));*/
    /*grid-auto-rows: 20px;/]*/
    margin-bottom: 40px;
    /* IE repeat syntax */
    /*-ms-grid-columns: repeat(10px (250px 10px)[3]);*/
    /*-ms-grid-rows: 3fr;*/
}
#grid[data-columns]:before {
    content: '4 .col-md-3';
}
#grid .col-md-3 {
    padding: 0 10px;
    width: 25%;
}
@media screen and (min-width: 768px) {
    #grid .col-md-3 {
        width: 25%;
        float: left;
    }
}
@media screen and (max-width: 767px) {
    #grid .col-md-3 {
        width: 50%;
    }
}
@media screen and (max-width: 479px) {
    #grid .col-md-3 {
        width: 100%;
    }
}

.panels:after,
.panels:before {
    display: none;
}

.panels p{
    line-height: normal;
}
.panel{
    border-bottom: #231f20 3px solid;
    border-radius: 0px;
    font: 13px gothambook, trebuchet ms, tahoma;
}
.panel.architectural{
    background: #9fc1c7;
}
.panel.interior{
    background: #e6b496;
}
.panel.product{
    background: #f29c9f;
}
.panel.fashion{
    background: #f7c266;
}
.panel.graphics{
    background: #bac3ab;
}
.panel>a{
    color: #231f20;
    display: block;
    padding: 9px;
    text-decoration: none;
}
.panel>a>p{
    font-size: 12px;
    margin-bottom: 5px;
}
.panel>a>.title{
    font-size: 18px;
    margin-top: 5px;
}
.panel>a>.more{
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    margin: 11px 0 0 0;
}





.triangle-left{
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-right: 70px solid white;
    border-bottom: 70px solid transparent;
    position: absolute;
    float: right;
    top: 50%; transform: translateY(-50%);
    right: 0px;
}
.triangle-right{
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-left: 70px solid white;
    border-bottom: 70px solid transparent;
    position: absolute;
    float: right;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
}
.triangle-up{
    width: 0;
    height: 0;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-bottom: 70px solid white;
    position: absolute;
    bottom: 0px;
    transform: translateX(-50%);
    left: 50%;
}

.circle{
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background-color:#FFFFFF;
    color: #231f20;
    text-align: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 15px;
    padding: 25px;
}
.circle .month{
    font: 17px gothambold;
    position: relative;
    top: 35px;
}
.circle .date{
    position: relative;
    top: 25px;
    font: 90px gothambold;
}
.circle .description{
    font: 15px gothambook, trebuchet ms, tahoma;
    position: relative;
    top: 10px;
}

h2{
    text-transform: uppercase;
    font: 34px gothambook, trebuchet ms, tahoma;
    color: #231f20;
    margin-top: 0px;
    line-height: 45px;
    margin-bottom: 5px;
}

h3 {
    text-transform: uppercase;
    font: 24px gothambook, trebuchet ms, tahoma;
    color: #231f20;
    margin-top: 0px;
    line-height: 45px;
    margin-bottom: 5px;
}

@media(max-width:767px){
    h2,h3{
        font: 22px gothambook, trebuchet ms, tahoma;
    }
}

h2.overscore{
    border-top: #231f20 6px solid;
    padding-top: 8px;
}
h2.underscore{
    border-bottom: #231f20 8px solid;
}

h3.underscore{
    border-bottom: #231f20 8px solid;
}


strong{
    font-weight: normal;
    font-family: gothambold;
}

p,
li {
    font: 16px gothambook, trebuchet ms, tahoma;
    color: #231f20;
    line-height: 30px;
}

button{
    font-family: gothambold;
    margin-right: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
}

button.bold{
    font-weight: bold;
}
button.light{
    font-family: gothamlight;
    font-weight: normal;
}
button.black{
    border-radius: 0px;
    background: #231f20;
    color: #FFFFFF;
    padding: 6px 16px;
    font-size: 18px;
    letter-spacing: 0;
}
button.white{
    border-radius: 0px;
    color: #231f20;
    background: #FFFFFF;
}
button.orange{
    border-radius: 0px;
    background: #A1C1C7;
    color: #231f20;
}
@media(max-width:767px){
    button{
        font-size: 14px !important;
    }
    .panels > .row {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-wrap: wrap;
    }
    .panels [class^="col-"], [class*=" col-"] {
        width: 50%;
    }
    .grantCategories [class*=" col-"]{
        width: inherit;
    }
}
@media(max-width:479px){
    .panels {
        max-width: 80%;
    }
    .panels [class^="col-"], [class*=" col-"] {
        width: 100%;
    }
}

.topborder{
    width: 100%;
    height: 8px;
    background: #231f20;
}

.flexslider{
    background: none;
    border: none;
    box-shadow: none;
    margin: 0px;
}

.form-control{
    max-width: 100%;
    margin-left: 0px;
}

.slides {
    list-style-type: none;
}

.event-container {
    margin-bottom: 80px;
}
.event-container .fotorama__wrap {
    margin: 0 auto;
}
.event-container p {
    margin-bottom: 20px;
}

.video-holder {
    max-width: 100%;
    padding-top: 30px;
    margin-bottom: 10px;
}

.video-holder video {
    max-width: 100%;
    position: relative;
    object-fit: cover;
}

.video-holder video:before {
    position: absolute;
    content: '';
    height: 60px;
    width: 60px;
    background: red;
    top: 50%;
    left: 50%;
}

.video {
    position: relative;
}

.video a {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 33;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            font-size: 70px;
            color: #D8D3CB;
}

.video-holder h3 {
    margin-bottom: 20px;
}

.video-holder h3,
.video-holder h4 {
    text-align: center;
}

/*OLD WEBSITE*/

.textGrey11 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #666666;
    font-style: normal;
    font-weight: normal;
    line-height: 18px;

}
.textGrey11B {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #666666;
    font-style: normal;
    font-weight: bold;
    line-height: 18px;
}
.textGrey14 {
    font-family: NeutraDisplay-Titling;
    font-size: 14px;
    color: #666666;
    font-weight: normal;
    line-height: 18px;
}

.textGrey11C {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #333333;
    text-decoration: none;
    line-height: 16px;
    font-weight: normal;
    text-transform: uppercase;
}
a..textGrey11C:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #F27C09;
    text-decoration: none;
}

.textOrange11C {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #999999;
    text-decoration: none;
}
a..textOrange11C:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #333333;
    text-decoration: underline;
}
.textOrange12C {

    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #666666;
    text-decoration: none;
}
.textOrange11B {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #333333;
    text-decoration: none;
    font-weight: bold;
    outline-color: #CCCCCC;
}
a..textOrange11B:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #F27C09;
    text-decoration: underline;
}
.textGrey11CBold {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #333333;
    text-decoration: none;
    line-height: 16px;
    font-weight: bold;
    text-transform: uppercase;
}
.textGrey14berg {
    font-family: NeutraDisplay-Titling;
    font-size: medium;
    color: #666666;
    font-weight: normal;
    line-height: 18px;
    text-transform: uppercase;
    text-decoration: none;

}
.textGrey9 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #666666;
    font-style: normal;
    font-weight: normal;
    line-height: 14px;
}
.news_title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #474220;
    font-weight: bold;
    line-height: 18px;
    text-transform: uppercase;
}
input{
    max-width: 100%;
}

/* interview page - beta*/
.interviews-section.interviews-section .titlebox {
    /*border-color: #231f20;*/
}
.interviews-group {
    max-width: 700px;
    margin: 0 auto;
    margin-bottom: 50px;
}
.interview {
    padding-left: 100px;
    margin-bottom: 40px
}
.interview p {
    text-transform: uppercase;
    font-size: 20px;
}

.interviews-group__header {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}
.interview-body {
    position: relative;
}
.interview-body .btn:hover {
    color: #fff;
    transition: color 0.4s;
}
.interview-body:before {
    position: absolute;
    content: "";
    width: 15px;
    height: 15px;
    left: 0;
    top: 0;
    -webkit-transform: translateX(calc(-100% - 5px));
       -moz-transform: translateX(calc(-100% - 5px));
        -ms-transform: translateX(calc(-100% - 5px));
         -o-transform: translateX(calc(-100% - 5px));
            transform: translateX(calc(-100% - 5px));
}


.interviews-group__header img {
    max-width: 80px;
    margin-right: 20px;
}

.cat-architectural .interview-body:before {
    background: #9fc1c7
}
.cat-interior .interview-body:before {
    background: #e6b496
}
.cat-product .interview-body:before {
    background: #f29c9f
}
.cat-fashion .interview-body:before {
    background: #f7c266
}
.cat-graphics .interview-body:before {
    background: #bac3ab
}

.grid-sizer,
.item { width: 31%; }
.item img{width: 100%;}

.video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 891px) {
    .grid-sizer,
    .item { width: 48%; }
}

@media screen and (max-width: 500px) {
    .interview {
        padding-left: 15px;
        padding-right: 15px;
    }
    .interview p {
        font-size: 16px;
    }
    .interviews-group__header.interviews-group__header h2 {
        font-size: 20px;
    }
}

/*.gugg-img__holder a {
    border-top: 8px solid #231f20;
    padding-top: 30px;
    display: inline-block;
}*/
.vertical-center {
    border-top: 8px solid #231f20;

}

@media screen and (min-width: 768px) {
    .vertical-center {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        align-items: center;

    }
}