body, html {
   
    font-family: 'ProximaNova', sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
   
    background-color: #000;
    font-weight: normal;
}

b{ font-weight: 600;}

.blockScroll{ height: 100%; overflow-y: hidden;}

.chicago-red{ color: #b91f1f;}
.chicago-blue{ color: #131f42;}
.float-col{ float: left; color: #fff; }

.chicago-blue span{ vertical-align: super; font-size: 1.5rem; }

h1, h2, h3 { font-family: "Times New Roman", Times, serif; font-style: italic; font-weight: 600; letter-spacing: 0; text-transform: uppercase;}

h1{ font-size: 7rem; line-height: 6rem; }
h4{font-weight: 600; font-size: 1rem; position: relative; display: inline-block; padding-bottom: .45rem; margin-bottom: .75rem; }
h4:before{ content: ""; display: block; width: 100%; height: .25vw; position: absolute; background-color: #b91f1f; bottom: 0; }
h3{ font-size: 3rem; text-align: center;}


#allLoader{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #000; display: flex; 
    align-content: center; z-index: 9999; /*background-image: url(../images/STSLogo-02.png);*/ background-repeat: no-repeat; background-position: center; background-size: 8rem; }

input{-webkit-appearance: none; box-shadow : none; }
input:focus {outline: none; border: specify yours;}

p,a{font-size: 1rem;}

.fullBlack{ background-color: #000;}
.fullBgr{  background-size: cover; background-repeat: no-repeat; background-position: center center;}


/******** LANDING *******/

#header-full{ width: 100%; min-height: 100vh; /*background-image: url(../images/Chicago_SplashPage.jpg);*/ z-index: 1; position: relative;}

#navBar{ width: 94vw;
    height: 5.5rem;
    margin: 0 auto;
    /*overflow: hidden;*/
    padding: .5rem 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;}

#header-clear{height: 5.5rem;}

.sides-cont { overflow: hidden;}
.left-side{ float: left; width: 36.5%; height: 6.5rem;}
.center-side{ float: left; width: 27%; height: 6.5rem; text-align: center}
.right-side{ float: left; width: 36.5%; height: 6.5rem;}

#hamburger{ width: 2vw; height: 0vw; cursor: pointer; background-image: url(../images/hamburger.png); background-position: center; background-repeat: no-repeat; background-size: cover; float: right; margin-top: 1.5vw; overflow: hidden; opacity: 0; transition: opacity 1s ease-out; }

#hamburger.showhamburger{ opacity: 1; height: 2vw; }

.center-side img{ width: 100%; max-width: 26rem; }

#main-logo{width: 21.7vw; height: 6.5rem; text-align: center; position: absolute; top: .5rem; left: 0; right: 0; z-index: 9999; margin: 0 auto; cursor: pointer;}
#main-logo img{ width: 100%; max-width: 26rem; }

ul.mini-subnav{ text-align: center; position: relative; margin-bottom: 3rem; display: none;}
/*ul.mini-subnav:after{ content: "";
    width: 8rem;
    height: 2px;
    background-color: #b91f1f;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: -2rem;
    position: absolute;}*/
ul.mini-subnav li{ margin-bottom: 3rem;}
ul.mini-subnav li a{ color: #b91f1f; font-weight: 100; font-size: 1.4rem; text-decoration: none; }

ul.mini-nav{ overflow: hidden; margin: 2vw 0;}

ul.mini-nav li{ float: left; margin-right: 2rem;}
ul.mini-nav li:last-child{ margin-right: 0rem;}

ul.mini-nav li a{ color: #fff; font-weight: 600; font-size: 1vw; text-decoration: none; cursor: pointer;
-webkit-transition: color .5s ease-out;
  -moz-transition: color .5s ease-out;
  -o-transition: color .5s ease-out;
  transition: color .5s ease-out;
}
ul.mini-nav li a:hover{ color: #b91f20; }

.headercont{ width: 81.5vw; position: absolute; top: 50%; transform: translateY(-50%); margin: auto; left: -100vw; right: 0; 
-webkit-transition: left .5s ease-out;
  -moz-transition: left .5s ease-out;
  -o-transition: left .5s ease-out;
  transition: left .5s ease-out;
}

.headercont.headlinehero{ left: 0;}
.headercont.headlinehero .header-left {width: 50vw;}

.grid .grid-cell.grid-active .headercont{ left: 0; }

.header-left{ width: 47vw; }

.header-bigtext{ margin-bottom: .8rem; color: #fff; }
.header-bigtext img{ width: 100%; }
.header-text-cont{  padding-right: 3rem;  margin-bottom: .8rem;}

.header-text-cont p{ font-weight: 300; color: #fff; font-size: 1rem; line-height: 145%;}
.header-text-cont p .dark{ font-weight: 600; }

.watchtrailer-btn{ 
    width: 17vw;
    color: #fff;
    text-align: left;
    padding: .75rem 4rem .75rem 0;
    margin-top: 1rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: solid 3px #b91f20;
    background-image: url(../images/watch-arrow.png);
    background-position: 95% .85rem;
    background-repeat: no-repeat;
    background-size: 4.25rem;
    -webkit-transition: background-position .5s ease-out;
  -moz-transition: background-position .5s ease-out;
  -o-transition: background-position .5s ease-out;
  transition: background-position .5s ease-out;
}

.watchtrailer-btn:hover{ background-position: 100% .85rem; }
    
.watchtrailer-btn span{ font-family: 'Montserrat', sans-serif; display: block; color: #b91f20; font-size: 1.25rem;}

div#social-box { /* width: 22rem; position: absolute; bottom: 2rem; right: 2rem; z-index: 50; color: #fff;*/
    width: 22rem;
    position: absolute;
    bottom: -83.5vh;
    right: 0;
    z-index: 50;
    color: #fff;
}

div#social-box ul{ overflow: hidden;}
div#social-box ul li{ width: auto; float: left; margin-right:2rem; }
div#social-box ul li:last-child{ margin-right: 0; }
div#social-box ul li a{ display: block; width: 2.75rem; height: 2.75rem;}
div#social-box ul li img{ width: 100%; }

div#social-box ul li p{ font-weight: 600; font-size: 1rem; margin-top: .75rem; }

div#social-box.social-column { width: 3rem; }
div#social-box.social-column ul li{ float: none; margin-right: 0; margin-bottom: 1rem; }
div#social-box.social-column ul li:first-child{ display: none; }

#menu-bttn{ display: none; position: absolute; top: .5rem; right: 1.5rem; z-index: 9999; float: right;}
#menu-bttn div{background-image: url(../images/ico-menu.png); }

#close-bttn{ display: none; position: absolute; top: 1.2rem; left: 1.5rem; z-index: 9999; float: left;}
#close-bttn div{background-image: url(../images/ico-close.png); }


#close-video{ position: fixed; top: 2rem; right: 2rem; z-index: 11000; display: none;}
#close-video div{background-image: url(../images/ico-close.png); }

.img-bttn{ width: 1.25rem; height: 1.25rem; display: block; cursor: pointer;  background-position: center; background-size: cover; }


/*
.vimeo-wrapper {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  pointer-events: none;   overflow: hidden;}
.vimeo-wrapper iframe {width: 100vw; height: 42.85vw; min-height: 100vh; min-width: 240.33vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
*/

#overlay-menu{ width: 100%; height: 100%; max-height: 100vh; background-color: rgb(0 0 0 / 90%); position: fixed; top: -150%;  left: 0; z-index: 9995;
-webkit-transition: top .5s ease-out;
      -moz-transition: top .5s ease-out;
      -o-transition: top .5s ease-out;
      transition: top .5s ease-out;
}
#overlay-menu.active{top: 0;}

#trailer-full-content{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color:#000; z-index: 10000; display: none;}

/*
#overlay-video{ width: 100%;
    height: 100%;
    position: fixed;
    top: 0%;
    left: 0;
    background: radial-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 70%));
    mix-blend-mode: multiply;}
*/

.video-responsive {
position: relative;
padding-bottom: 42%; /* 56.25%;  16/9 ratio */

height: 0;
overflow: hidden;
    top: 50%;
  transform: translateY(-50%);
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



/*************** GRID **********************/

.grid{ width: 100%; height: 100vh; position: relative; overflow: hidden; z-index: 10 }
.grid .grid-cell{ width: 33.333vw; position: absolute; height: 100%; top: 0; overflow: hidden; background-size: cover; background-repeat: no-repeat; cursor: pointer;
-webkit-transition: width .5s ease-out;
  -moz-transition: width .5s ease-out;
  -o-transition: width .5s ease-out;
  transition: width .5s ease-out;
}

#grid-film{left: 0vw; background-image: url(../images/header-film.jpg); background-position: 75% 0vw; }
#grid-involved{left: 33.33vw; background-image: url(../images/header-involved.jpg); background-position: 83% 0vw;}
#grid-stories{left: 66.66vw; background-image: url(../images/header-stories.jpg); background-position: 89% 0vw; }

.grid .grid-cell .sub-header{ width: 100vw; height: 100%;  }

.overlay-shadowTop{ background-image: url(../images/header-topshadow.png); background-position: top; background-size: cover; top: 0; left: 0; position: absolute;  width: 100%; height: 100%;}

.grid-cell .sectionTitle{ width: 81.5%; position: absolute; top: 50%; transform: translateY(-50%); margin: auto; left: 0; right: 0; z-index: 55; text-align: center; }
.grid-cell .sectionTitle h2{ font-size: 3rem; color:#b91f1f; }

.overlay-red{ background-color: #b91f1f; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url(../images/Chicago_overlay.png);
    background-size: cover;
    mix-blend-mode: multiply;
    -webkit-transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
}
.grid-cell:hover .overlay-red{ opacity: 1; }
.grid-cell:hover .sectionTitle h2{ color: #fff;}

.grid .grid-cell.grid-active:hover .overlay-red{ opacity: 0; }
.grid .grid-cell.grid-active{ width: 100vw; background-position: center; /*cursor: not-allowed; pointer-events: none;*/ left: 0 !important; }
.grid .grid-cell.grid-active .sectionTitle h2{ display: none;}

.grid .grid-cell.hidde-grid{display: none;}

/*************** The Film **********************/

#section-film h5{ text-transform: uppercase; font-size: 1.2rem; font-weight: 700; color: #b91f1f; text-align: center; letter-spacing: .4rem; }

.stadistics-section{ margin-bottom: 5rem;}

.film-title1{ opacity: 0;
    -webkit-transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
}
.graphic-section{ width: 100%; margin: 0 auto; opacity: 0;
    -webkit-transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
}
.graphic-section img{ width: 100%;}

.mapgra-section{ width: 84%; margin: 0 auto; opacity: 0;
-webkit-transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
}
.mapgra-section img{ width: 100%;}

.findtheater-section{ opacity: 0;
-webkit-transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
}

.whereWatch { width: 90%; margin: 1rem auto; overflow: hidden; padding: 1rem 0px; }
.chicagoArt { width: 100%; }
.chicagoArt img{ width: 100%; }
.search-section{ width: 65%; float: left; }

.search-map{ width: 100%;}
.search-map img{ width: 100%;}

.search-box{
    width: 90%;
    padding: 3rem 0rem;
    margin-left: calc(10% - 1rem);
    -webkit-box-shadow: 2px 4px 11px 3px rgb(0 0 0 / 32%);
    -moz-box-shadow: 2px 4px 11px 3px rgb(0 0 0 / 32%);
    box-shadow: 2px 4px 11px 3px rgb(0 0 0 / 32%);
    overflow: hidden;
}


#mc-embedded-subscribe {
    width: 17vw;
    text-align: left;
    padding: .75rem 4rem .75rem 0;
    font-weight: 600;
    cursor: pointer;
    border-bottom: solid 3px #b91f20;
    background-image: url(../images/watch-arrow.png);
    background-position: 95% .85rem;
    background-repeat: no-repeat;
    background-size: 4.25rem;
    -webkit-transition: background-position .5s ease-out;
    -moz-transition: background-position .5s ease-out;
    -o-transition: background-position .5s ease-out;
    transition: background-position .5s ease-out;
    border-top: none;
    border-right: none;
    border-left: none;
    background-color: #fff;
    color: #b91f20;
    font-size: 1rem;
    float: right;
    margin-top: 3rem;
    text-decoration: none;
}

.newsletter-box{ width: 73%; margin: 0 auto;}

.newsletter-box p{ 
    color: #b91f1f;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .25rem;
    margin-bottom: 3rem;
}

.newsletter-box p.suscribeMsg { font-size: .75rem; letter-spacing: .2rem; margin-bottom: .5rem;}

.newsletter-box label{
    display: none;
}

.newsletter-box input[type="text"], .newsletter-box input[type="email"]{
    padding: .75rem 1rem .5rem 1rem;
    line-height: 100%;
    border: solid 2px #a3a3a3;
    width: calc(100% - 2rem - 4px);
    margin-bottom: 2.25rem;
    color: #a3a3a3;
    font-weight: 600;
    font-size: 1rem;
}

.search-input { margin-bottom: .75rem;}
.search-input input{ width: calc(100% - 5.5rem); padding:.25rem 4rem .25rem 1.5rem; border: none; border-bottom: solid 3px #b91f20; color: #b91f20; letter-spacing: .1rem; 
background: url(../images/watch-arrow.png) right center no-repeat , url(../images/search.png) left center no-repeat ; font-size: 1.1rem;
background-size: 2.5rem, 1rem;

}

.address{ margin-top: 1rem;}
.address ul{ padding-left: 1.2rem;
    text-transform: uppercase;
    font-size: .75rem;
    background-image: url(../images/location_pin.png);
    background-repeat: no-repeat;
    background-position: 0rem 0rem;
    background-size: .6rem; }
.address ul li{ line-height: 130%;}
.address ul li:first-child{ color: #b91f20; font-weight: 600; }

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #a3a3a3; font-weight: 600; font-size: 1.1rem;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #a3a3a3; font-weight: 600; font-size: 1.1rem;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #a3a3a3; font-weight: 600; font-size: 1.1rem;
}

/*************** INVOLVED **********************/

#section-involved{ position: relative;}

#section-involved article { margin-bottom: 5rem; opacity: 0;
    -webkit-transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
}

#section-involved article section.leftSide{ margin-left: 9%;}
#section-involved article section { width: 91%; position: relative; }
#section-involved article section img{ width: 100%;}
#section-involved article .textBox{ 
    /*width: 530px;*/
    position: absolute;
    color: #131f42;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    font-size: .95em;
    z-index: 10;
    -webkit-box-shadow: 2px 4px 11px 3px rgb(0 0 0 / 32%);  
    -moz-box-shadow:    2px 4px 11px 3px rgb(0 0 0 / 32%); 
    box-shadow:         2px 4px 11px 3px rgb(0 0 0 / 32%);
}

#section-involved article .textBox h2{
    font-size: 3.4rem; line-height: 96%; margin-bottom: 1.5rem; 
    background-image: url(../images/underline.png);
    background-repeat: no-repeat;
    background-size: 12.5rem;
    background-position: -13rem 5.6rem;
    padding-bottom: 0.3rem;
    
    -webkit-transition: background .5s ease-out;
    -moz-transition: background .5s ease-out;
    -o-transition: background .5s ease-out;
    transition: background .5s ease-out;
}

#section-involved article .textBox h2.active{
    background-position: 0rem 5.6rem;
}

#section-involved article .textBox p{ line-height: 125%;}
#section-involved article .BoxRiSide {
    width: calc(51% - 9rem);
    padding: 2rem 5rem 3rem 4rem;
    right: -10%;
    -webkit-transition: right .5s ease-out;
    -moz-transition: right .5s ease-out;
    -o-transition: right .5s ease-out;
    transition: right .5s ease-out;
}
#section-involved article .BoxLeSide {
    width: calc(51% - 7rem);
    padding: 2rem 3rem 3rem 4rem;
    left: -10%;
    -webkit-transition: left .5s ease-out;
    -moz-transition: left .5s ease-out;
    -o-transition: left .5s ease-out;
    transition: left .5s ease-out;
}

#section-involved article .BoxRiSide.active{ right: -100%;}
#section-involved article .BoxLeSide.active{ left: -100%;}

.close-donate{ width: 3rem; height: 3rem; position: absolute; top: .35rem; left: .35rem; background-image: url(../images/donate-close.png); cursor: pointer; z-index: 999;
background-position: center; background-size: 1rem; background-repeat: no-repeat;}

.donate-btn{ 
    width: 7rem;
    color: #fff;
    text-align: left;
    padding: .35rem 4rem .35rem 0;
    margin-top: 1rem;
    font-weight: 800;
    cursor: pointer;
    border-bottom: solid 3px #b91f20;
    background-image: url(../images/watch-arrow.png);
    background-position: 96% 0.46rem;
    background-repeat: no-repeat;
    background-size: 2.75rem;
    -webkit-transition: background-position .5s ease-out;
    -moz-transition: background-position .5s ease-out;
    -o-transition: background-position .5s ease-out;
    transition: background-position .5s ease-out;
}

.donate-btn:hover{ background-position: 100% .46rem; }
    
.donate-btn span{ font-family: 'Montserrat', sans-serif;  display: block; color: #b91f20; font-size: 1rem;}

.donate-box {
    position: absolute;
    width: 23.5rem;
    height: 32.2rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    z-index: 50;
    -webkit-transition: left .5s ease-out, right .5s ease-out;
    -moz-transition: left .5s ease-out, right .5s ease-out;
    -o-transition: left .5s ease-out, right .5s ease-out;
    transition: left .5s ease-out, right .5s ease-out;
}

.donate-left{left: -40vw; }
.donate-left.active {left: 57vw; }
.donate-right{ right: -127vw; }
.donate-right.active { right: 57vw; }

.overlay-donate{ width: 100%; height: 100%; position: fixed; background-color: rgb(255 255 255 / 0%); top: 0; left: 0; z-index: 10000; display: none;}

/*************** STORIES **********************/

.stories-videos{ opacity: 0;
-webkit-transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
}
.stories-heroes{ opacity: 0;
-webkit-transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
}

#section-stories h3{font-size: 3.4rem; line-height: 96%; padding-bottom: 0.3rem; position: relative; display: block; width: 29rem; margin: 0 auto; overflow: hidden;}

#section-stories h3 span:first-child{ z-index: 5; position: relative;}
#section-stories h3 span.underline{ content: ""; width: 13.5rem; height: 2rem; position: absolute; top: 2.4rem; left: -15rem;
    background-image: url(../images/underline.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0rem 0rem;
    z-index: 1;
    -webkit-transition: left .5s ease-out, right .5s ease-out;
    -moz-transition: left .5s ease-out, right .5s ease-out;
    -o-transition: left .5s ease-out, right .5s ease-out;
    transition: left .5s ease-out, right .5s ease-out;
}

#section-stories h3 span.underline.active{ left: 0; }

#section-stories .headLine h6{ text-align: center; margin-top: 1rem; }

#section-stories .video-text { padding: 1rem 1rem 1.5rem 1rem; line-height: 120%; min-height: 6.5rem;}
#section-stories .video-text h6{ color: #b91f1f; font-weight: 600; margin-bottom: .35rem; }

#carousel-content { width: 112%; overflow: hidden; margin: 3rem -12% 3rem auto; padding: 1rem; display: flex;  }
#heroes-content { width: calc(90% - 2rem); overflow: hidden; margin: 3rem auto; padding: 1rem; display: block; }

.video-box{ float: left; width: 100%; margin-right: 2%;
-webkit-box-shadow: 2px 4px 11px 3px rgb(0 0 0 / 32%);  
-moz-box-shadow:    2px 4px 11px 3px rgb(0 0 0 / 32%); 
box-shadow:         2px 4px 11px 3px rgb(0 0 0 / 32%);
}
/*.video-box:last-child{ margin-right: 0;}*/

.video-box .playBttn{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;
    background-image: url(../images/play-button.png);
    background-position: center; background-repeat: no-repeat; background-size: 4rem;
}
.video-box .video-pic{ display: block; position: relative; }
.video-box .video-pic img{ width: 100%; }



.hero-box{ float: left; width: calc( 50% - 2rem ); margin-bottom: 1.85rem;
-webkit-box-shadow: 2px 4px 11px 3px rgb(0 0 0 / 32%);  
-moz-box-shadow:    2px 4px 11px 3px rgb(0 0 0 / 32%); 
box-shadow:         2px 4px 11px 3px rgb(0 0 0 / 32%);
}

.hero-box:nth-child(even){ margin-left: 1rem; }
.hero-box:nth-child(odd){ margin-right: 1rem;  }

.hero-box .playBttn{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;
    background-image: url(../images/play-button.png);
    background-position: center; background-repeat: no-repeat; background-size: 4rem;
}
.hero-box .hero-pic{ display: block; position: relative; }
.hero-box .hero-pic img{ width: 100%; }

#section-stories .hero-text { padding: 1rem 1rem 1.5rem 1rem; line-height: 120%; min-height: 6.5rem;}
#section-stories .hero-text h6{ color: #b91f1f; font-weight: 600; margin-bottom: .35rem; }

.stories-heroes{ margin-top: 8rem;}

.learn-btn{ 
    width: 10rem;
    color: #fff;
    text-align: left;
    padding: .35rem 4rem .35rem 0;
    margin-top: 1rem;
    font-weight: 800;
    cursor: pointer;
    border-bottom: solid 3px #b91f20;
    background-image: url(../images/watch-arrow.png);
    background-position: 96% 0.46rem;
    background-repeat: no-repeat;
    background-size: 2.75rem;
    -webkit-transition: background-position .5s ease-out;
    -moz-transition: background-position .5s ease-out;
    -o-transition: background-position .5s ease-out;
    transition: background-position .5s ease-out;
}

.learn-btn:hover{ background-position: 100% .46rem; }
    
.learn-btn span{ font-family: 'Montserrat', sans-serif;  display: block; color: #b91f20; font-size: 1rem;}

.single-carousel{ width: 114%; overflow: hidden; margin: 3rem -12% 0rem auto; padding: 1rem;/* display: flex; */ }

.single-carousel .slick-slide > div { width: 94%;  overflow: hidden;  padding: 3.5% 3%;} 

.more-videos{ overflow: hidden; width: 108%; }

.more-btn{ 
    width: 10rem;
    color: #fff;
    text-align: left;
    padding: .35rem 4rem .35rem 0;
    margin-top: 1rem;
    font-weight: 800;
    cursor: pointer;
    float: right;
    border-bottom: solid 3px #b91f20;
    background-image: url(../images/watch-arrow.png);
    background-position: 96% 0.46rem;
    background-repeat: no-repeat;
    background-size: 2.75rem;
    -webkit-transition: background-position .5s ease-out;
    -moz-transition: background-position .5s ease-out;
    -o-transition: background-position .5s ease-out;
    transition: background-position .5s ease-out;
}

.more-btn:hover{ background-position: 100% .46rem; }
    
.more-btn span{ font-family: 'Montserrat', sans-serif;  display: block; color: #b91f20; font-size: 1rem;}


/*
.single-carousel .playBttn{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;
    background-image: url(../images/play-button.png);
    background-position: center; background-repeat: no-repeat; background-size: 4rem;
}
.single-carousel .video-pic{ display: block; position: relative; }
.single-carousel .video-pic img{ width: 100%; }
*/
/*************** CONTENT **********************/

.section-full{ width: 100%;  background-color: #fff; height: 0; overflow: hidden;}
.section-full.active-section{ height: auto;}

.section-content { width: 81.5vw; margin: 0 auto; padding: 5rem 0 5rem 0; display: none; /*max-width: 1280px;*/  } 

#footer{ width: 100%; background-image: url(../images/footer-bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 3rem 0;}
.footer-cont{ width: 81.5vw; margin: 0 auto; overflow: hidden; }

.footer-logo{ width: 16%; margin-right: 2%; }
.footer-logo img{ width: 100%; }
.footer-menu-c1{ width: 13%; margin-left: 7.5%; }
.footer-menu-c2{ width: 13%; margin-left: 7.5%;}

.float-col a{ color: #fff }

.footer-menu-c1 ul li, .footer-menu-c2 ul li{ margin-bottom: 2rem; cursor: pointer;}
.footer-menu-c1 ul li a, .footer-menu-c2 ul li a{ font-weight: 600; text-transform: uppercase; text-decoration: none;}

.footer-social{ width: 20.5%; margin-left: 7.5%;}

.footer-social p{ color: #b91f1f; text-transform: uppercase; font-style: italic; font-weight: 600; } 

.footer-social ul{ overflow: hidden; margin-top: 1rem; }
.footer-social ul li{ width: 2.5rem; float: left; margin-right: 1.5rem; }
.footer-social ul li img{ width: 100%;  }

.footer-copy{ width: 100%; }

.footer-copy p{ color: #b91f1f;}


.hero-cover{ position: absolute; width: 100%; height: 100vh; top: 0; left: 100vw; background-color: #000; z-index: 60; 
    -webkit-transition: left .5s ease-out;
    -moz-transition: left .5s ease-out;
    -o-transition: left .5s ease-out;
    transition: left .5s ease-out;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
}
.hero-cover.heroactive{ left: 0; }

#hero01{ background-image: url(../images/cover-hero01.jpg); }
#hero02{ background-image: url(../images/cover-hero02.jpg); }
#hero03{ background-image: url(../images/cover-hero03.jpg); }
#hero04{ background-image: url(../images/cover-hero04.jpg); }

.hero-btn{ cursor: pointer;}

.pictext { width: 100%; overflow: hidden;  margin-bottom: 5rem;}
.art-pic { float: left; width: 55%;}
.art-pic img {width: 100%;}
.art-text { float: left; width: 42%;  }
.picleft .art-text{ margin-left: 2%; }
.art-text p, .art-text-full p{font-size: 1.1rem; line-height: 130%; margin-bottom: 2rem;}
.picright .art-text{ margin-right: 2%; }

.art-text-full{ width: 100%; }

.shadow-border{ 
-webkit-box-shadow: 2px 4px 11px 3px rgb(0 0 0 / 32%);
    -moz-box-shadow: 2px 4px 11px 3px rgb(0 0 0 / 32%);
    box-shadow: 2px 4px 11px 3px rgb(0 0 0 / 32%); 
}

.related{ width: calc( 100% - 4rem); margin: 2rem auto; overflow: hidden; padding: 2rem;}
.relsection{ float: left; width: calc(25% - .75rem); margin-left: 1rem; }
.relsection:first-child{ margin-left: 0;}

.relsection img{ width: 100%; }

.relsection h2{ font-size: 4.15vw; color: #131f42;  margin-top: calc(50% - 6.5vw); 
    background-image: url(../images/underline.png);
    background-repeat: no-repeat;
    background-size: 16.5vw;
    background-position: 0rem 3vw;
    padding-bottom: 0.3rem;
    line-height: 4.4vw;
}

.relsection h5{ color: #b91f1f; letter-spacing: .75rem; font-weight: 700;}
.relsection h6{ color: #b91f1f; font-weight: 600; }
    
.quote{ width: calc( 65% - 4rem); margin:2rem auto 5rem auto; overflow: hidden; padding: 4rem 2rem; text-align: center;}
.quote h2{ color: #131f42; font-size: 3.5vw; line-height: 4vw; position: relative;}
.quote span{ color: #b91f1f; }

.quote h2:before{ content: "“"; position: absolute; left: 0; top: -1vw; font-size: 7.5vw;}
.quote h2:after{ content: "“"; position: absolute; right: 0; bottom: -1vw; font-size: 7.5vw; transform: rotate(180deg);}

@media screen and (max-width: 1200px) {    
    html, body{font-size: 14px;}
}

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

@media screen and (max-width: 680px) {
    html, body{font-size: 13px;}
}

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

@media screen and (min-width: 1280px) {    
    html, body{font-size: 14px !important;}
    h1 {font-size: 6.7rem;}
    .newsletter-box{ width: 82%; margin: 0 auto;}
    
}
@media screen and (min-width: 1520px) {    
    html, body{font-size: 18px !important;}
    
}

@media screen and (min-width: 1920px) {    
    html, body{font-size: 20px !important;}
    
}

@media screen and (min-width: 2100px) {    
    html, body{font-size: 24px !important;}
    
}

@media screen and (min-width: 2304px) {    
    html, body{font-size: 26px !important;}

}

@media screen and (min-width: 2560px) {    
    html, body{font-size: 30px !important;}
    h1 {font-size: 6.3rem;}

}
@media screen and (min-width: 3072px) {    
    html, body{font-size: 36px !important;}

}

@media screen and (min-width: 4096px) {    
    html, body{font-size: 44px !important;}

}

@media screen and (min-width: 5120px) {    
    html, body{font-size: 56px !important;}
    .header-bigtext{  width: 100%;}
}


@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    html, body{font-size: 22px;}
    ul.mini-subnav{ display: block;}
    
    .grid {height: calc(var(--vh, 1vh) * 100); position: fixed; }
    
    h1 { font-size: 3.3rem; line-height: 3rem;}
    .grid .grid-cell { width: 100vw; position: absolute; height: 33.3333%;}
    #grid-film{ top: 0; left: 0; background-position: 100% -13vw; background-size: 145vw;}
    #grid-involved{ top: 33.33%; left: 0; background-position: 100% -13vw; background-size: 166vw;}
    #grid-stories{ top: 66.66%; left: 0; background-position: 93% -23vw; background-size: 238vw;}
    
    .grid .grid-cell.grid-active { height: 55vh; }
    #grid-film.grid-active {top: 0;  left: 0; background-position: 55% 0vw; background-size: 143vw;}
    #grid-involved.grid-active {top: 0;  left: 0; background-position: 77% 0vw; background-size: 166vw;}
    #grid-stories.grid-active {top: 0;  left: 0; background-position: 66% 0vw; background-size: 145vw;}
    
    .watchtrailer-btn { width: 28vw;}
    .headercont {left: -190vw;}    
    #hamburger{ display: none;}
    
    #navBar { width: 92%; top: -100%; padding-top: 4.5rem; height: 100%; position: fixed;
        -webkit-transition: top .5s ease-out;
      -moz-transition: top .5s ease-out;
      -o-transition: top .5s ease-out;
      transition: top .5s ease-out;
    }
    #navBar.active{ top: 0;}
    
    /*#navBar.active.absolute-mobile{ position: fixed !important;} */
    
    #header-full{ padding-top: 0rem;} 
   
    .left-side { width: 100%; float: none; height: auto;}
    .right-side { width: 100%; float: none; height: auto;}
    .center-side { display: none;}
     #main-logo { position: fixed; width: 40%; top: 1rem; }
    .headercont { width: 86%; margin: 0% auto 0 auto;}
    .header-left { width: 76%; }
    .header-text-cont {margin-bottom: 2rem; padding-right: 2rem; }
    .header-bigtext {margin-bottom: 1rem;}
    
    #menu-bttn{ position: fixed; display: block; top: 1.25rem;}
    #close-bttn {position: fixed;}
    ul.mini-nav li:first-child{ margin-right: 0;}
    ul.mini-nav li{ margin-bottom: 5.5rem; float: none; width: 100%; text-align: center;}
    ul.mini-nav li a{ font-size: 2rem; color: #b91f1f; font-weight: 100; }
    .sides-cont { margin-top: 6rem;}
    
    div#social-box{ float: none; width: 100%; padding-top: 0; position: relative; bottom: auto; top: 0;}
    div#social-box ul li:first-child{ width: 100%;}
    div#social-box.social-column ul li{ /*float: none; width: 100%;*/ float: left; width: 33.333%; text-align: center; margin-bottom: 2.5rem; margin-right: 0;}
    div#social-box ul li a{ margin: 0 auto; width: 5.5rem; height:5.5rem;}
    div#social-box.social-column ul li:first-child {display: block; width: 100%;}
    div#social-box.social-column { width: 100%;}
    
    div#social-box ul {width: 18rem; margin: 0 auto; text-align: center;}
    
    #header-full.grid-mobile{ min-height: 55vh; }
    #header-full.grid-mobile .grid{ height: 55vh; }
    .section-content {  width: 88vw;}
    #section-involved article .BoxRiSide { width: calc(80% - 9rem); padding: 2rem 3rem 2rem 3rem; right: -10%;}
    #section-involved article .BoxLeSide { width: calc(80% - 9rem); padding: 2rem 3rem 2rem 3rem; left: -10%;}
    #section-involved article .textBox h2 { font-size: 2rem;  margin-bottom: 0.75rem; background-size: 8rem; background-position: 0rem 3.6rem; padding-bottom: 0.75rem; max-width: 70%;}
    
    #section-involved article .textBox p { line-height: 125%; font-size: .9rem;}
    
    #heroes-content { width: calc(100% - 0rem);}
    
    #heroes-content{ display: block;}
    .hero-box {width: calc(50% - 2rem); margin-right: 2%; margin-bottom: 3rem;}
    .more-videos { overflow: hidden; width: 102%;}
    
    .hero-cover {height: 55vh; background-size: cover; background-position: center;}
    .art-pic {float: none; width: 100%; margin-bottom: 1rem;}
    .art-text { float: none; width: 90%; margin: 0 auto; }
    .picleft .art-text {margin-left: auto;}
    .picright .art-text {margin-right: auto;}
    .art-text p { font-size: 1.2rem;line-height: 130%; text-align: justify; margin-top: 2rem;}
    .quote { width: calc( 100% - 4rem); margin: 2rem auto 4rem auto; overflow: hidden; padding: 2rem 1rem; text-align: center;}
    
    .art-text-full { width: 90%;  margin: 0 auto; text-align: justify;}
    .art-text-full p{ font-size: 1.2rem; }
    
    .pictext { margin-bottom: 2rem;}
    
    .quote h2 { font-size: 1.5rem; line-height: 1.5rem;}
    
    .donate-left{left: -70vw; }
    .donate-left.active { left: 0; right: 0; margin-top: 10rem;}
    .donate-right{ right: -150vw; }
    .donate-right.active { right: 38vw; }
    
    #section-involved article .BoxRiSide.active{ right: -130%;}
    #section-involved article .BoxLeSide.active{ left: -130%;}
    
    #section-involved article .textBox h2.active { background-position: 0rem 3.6rem;}
    
    .fix-mobile{ position: fixed !important;}
    .absolute-mobile{ position: absolute !important;}
    .relative-mobile{ position: relative !important;}
    .stories-heroes { margin-top: 5.5rem;}
}


@media only screen and (max-device-width: 768px) and (orientation: portrait) {
    html, body{font-size: 16px;}
    
    #mc-embedded-subscribe { width: 14rem; background-size: 3rem;}
    
}

@media only screen and (max-device-width: 428px) and (orientation: portrait) {
    html, body{font-size: 14px;}
    h4{padding-bottom: 0.15rem;}
    ul.mini-nav li a { font-size: 1.4rem;}
    h3 {font-size: 2.5rem;}
    #header-clear{height: 3.4rem;}
    ul.mini-nav {margin: .5rem 0;}
    
    #section-film h5 { margin-bottom: 3rem; }
    .sides-cont {margin-top: 7rem;}
    
    #main-logo {width: 52%; height: 3.4rem;}
    
    .img-bttn{ width: 1.5rem; height: 1.5rem; margin-top: 0.5rem;}
    
    div#social-box ul li a {margin: 0 auto; width: 4.5rem; height: 4.5rem;}
    
    .header-left {width: 100%;}
    .header-bigtext { margin-bottom: 1rem; width: 90%;}
    
    div#social-box ul li{ margin-bottom: 2rem; margin-right: 3.75rem;} 
    
    ul.mini-nav li {margin-bottom: 4.5rem;}
    
    div#social-box { bottom: 10rem; }
    div#social-box li {margin-bottom: 1rem; }
    
    .headercont {margin-top: 0%;}
    .header-text-cont p {line-height: 125%; font-size: .8rem;}
    
    ul.mini-nav li {margin-bottom: 3.5rem;}
    div#social-box ul li a {width: 3.5rem; height: 3.5rem;}
    
    #grid-film {background-position: 94% 0vw; background-size: 165vw;}
    #grid-involved {background-position: 100% 0vw; background-size: 175vw;}
    #grid-stories {background-position: 92% -16vw; background-size: 254vw;}
    
    #grid-involved.grid-active {background-size: 204vw;}
    #grid-stories.grid-active { background-size: 195vw;}
    
    .grid .grid-cell.grid-active {height: 50vh;}
    
    
    .section-content {width: 90vw; padding: 3rem 0 3rem 0;}
        
    #header-full.grid-mobile{ min-height: 50vh; }
    #header-full.grid-mobile .grid{ height: 50vh; }
    
    #grid-film.grid-active {background-position: 55% 0vw; background-size: 192vw;}
    .watchtrailer-btn span {font-size: 1rem;}
    .watchtrailer-btn{ background-size: 3rem; border-width: 2px;}
    .header-text-cont { margin-bottom: 1rem;}
    
    
    #section-involved article .BoxRiSide { width: calc(96% - 6rem);  padding: 2rem 2rem 2rem 2rem; right: 0%; position: relative; transform: translateY(-14%); margin: 0 auto;}
    #section-involved article .BoxLeSide { width: calc(100% - 6rem); padding: 2rem 2rem 2rem 2rem; left: 0%; position: relative; transform: translateY(-14%); margin: 0 auto;}
    #section-involved article .textBox h2 { font-size: 2rem; max-width: 80%;}
    #section-involved article .textBox p { line-height: 125%; font-size: .9rem;}
    #section-involved article section {width: 100%;}
    #section-involved article section.leftSide { margin-left: 0%;}
    
    .footer-cont .float-col{ float: none; width: 100%; text-align: center;  margin-left: 0;}
    
    
    .footer-cont .float-col.float-col.footer-menu-c1, .footer-cont .float-col.float-col.footer-menu-c2 { float: left; width: 50%;}
    
    .footer-logo img { width: 50%; margin-bottom: 2rem;}
    .footer-social ul li:last-child{ margin-right: 0;}
    .footer-social ul { width: 10.5rem; margin: 2rem auto; overflow: hidden; margin-top: 2rem;}
    
    .hero-box {width: 100%; margin-right: 0%;}
    .single-carousel { width: 100%; margin: 0 auto;  }
    #section-stories h3 { font-size: 2.5rem; line-height: 96%; padding-bottom: 0.4rem; width: 23rem; margin: 0 auto;}
    #section-stories h3 span.underline { content: "";  width: 10.5rem; height: 1.5rem; position: absolute; top: 1.9rem; left: 0;}
    .hero-cover { height: 60vh; background-position: center right;}
    
    .newsletter-box p { text-align: center; line-height: 120%;}
    
    .donate-left {left: -150vw;}
    .donate-left {left: -150vw;}
    .chicagoArt { width: 90%; margin: 0 auto 0rem auto; }
    .search-section { width: 100%; float: none; }
    
    .close-donate { top: .9rem;}
    .donate-left.active { left: 0;  margin-top: -12rem; position: relative;}
    .donate-right.active { right: 0;  margin-top: -12rem;  position: relative;}
    
    .stories-heroes { margin-top: 4.5rem;}
    
    .relsection:first-child{ float: none; width: 100%; }
    .relsection h2 {font-size: 2.3rem; margin-top: 0; background-size: 9rem; background-position: 13% 1.8rem; padding-bottom: 0.5rem; line-height: 2.5rem; text-align: center;}
    .relsection h5 { text-align: center; letter-spacing: .5rem; margin-bottom: 1rem;}
    .relsection { float: none; width: 64%; margin: 0 auto 2rem auto;}
    
    .hero-box:nth-child(odd) {margin-right: 0rem;}
    .hero-box:nth-child(even) {margin-left: 0rem;}
    
    #heroes-content { width: calc(90% - 2rem);}
    
    h3.chicago-blue{font-size: 1.75rem;}
    h3.chicago-blue span{ font-size: .75rem; }
}

@media only screen and (max-device-width: 414px) and (orientation: portrait) {
    .grid .grid-cell.grid-active {height: 60vh;}
    
    #header-full.grid-mobile{ min-height: 60vh; }
    #header-full.grid-mobile .grid{ height: 60vh; }
    
    #grid-film.grid-active{background-size: 228vw;}
    #grid-involved.grid-active {background-size: 228vw;}
    #grid-stories.grid-active { background-size: 228vw;}
    
    .sides-cont {margin-top: 4rem;}
    .whereWatch { width: 100%; margin: 1rem auto;}
}

@media only screen and (max-device-width: 375px) and (orientation: portrait) {
    html, body{font-size: 13px;}
    
    /*.grid-cell .sectionTitle h2 { font-size: 2.25rem;}*/
}

@media only screen and (max-device-width: 320px) and (orientation: portrait) {
    html, body{font-size: 14px;}
    .headercont {margin-top: 0%;}
    .header-text-cont p {line-height: 115%;}
}

/* FONTS */

/************ MEDIUM ************/

@font-face {
  font-family: 'ProximaNova';
  src: url('fonts/ProximaNova-Regular.eot');
  src: url('fonts/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/ProximaNova-Regular.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'ProximaNova';
  src: url('fonts/ProximaNova-Regular.svg#ProximaNova-Regular') format('svg'),
       url('fonts/ProximaNova-Regular.ttf') format('truetype'),
       url('fonts/ProximaNova-Regular.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

/************ BOLD ************/

@font-face {
  font-family: 'ProximaNova';
  src: url('fonts/ProximaNovaBold.eot');
  src: url('fonts/ProximaNovaBold.eot?#iefix') format('embedded-opentype'),
       url('fonts/ProximaNovaBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'ProximaNova';
  src: url('fonts/ProximaNovaBold.svg#ProximaNovaBold') format('svg'),
       url('fonts/ProximaNovaBold.ttf') format('truetype'),
       url('fonts/ProximaNovaBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

/************ BLACK ************/

@font-face {
  font-family: 'ProximaNova';
  src: url('fonts/ProximaNovaBlack.eot');
  src: url('fonts/ProximaNovaBlack.eot?#iefix') format('embedded-opentype'),
       url('fonts/ProximaNovaBlack.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'ProximaNova';
  src: url('fonts/ProximaNovaBlack.svg#ProximaNovaBlack') format('svg'),
       url('fonts/ProximaNovaBlack.ttf') format('truetype'),
       url('fonts/ProximaNovaBlack.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}