/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  UTA Magazine
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/*
FONTS
------------x
Family:     Georgia, Cambria, "Times New Roman",Times, serif;
Weights:    all
Styles:     all

Family:     'Druk Text Web', 'Arial Black', sans-serif;
Weights:    700;
Styles:     normal, italic

Family:     'Druk Text Wide', 'Arial Black', sans-serif;
Weights:    700;
Styles:     normal, italic

Family:     'Druk XCond Web', sans-serif;
Weights:    900;
Styles:     normal, italic

Family:     'RudeSlabExtraWide-Book', serif;
Weights:    400;
Styles:     normal, italic
------------
*/
@font-face {
    font-family: 'Druk Text Web';
    src: url('../../_fonts/druk/DrukText-Bold-Web.eot');
    src: url('../../_fonts/druk/DrukText-Bold-Web.eot?#iefix') format('embedded-opentype'),
    url('../../_fonts/druk/DrukText-Bold-Web.woff2') format('woff2'),
    url('../../_fonts/druk/DrukText-Bold-Web.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'Druk Text Web';
    src: url('../../_fonts/druk/DrukText-BoldItalic-Web.eot');
    src: url('../../_fonts/druk/DrukText-BoldItalic-Web.eot?#iefix') format('embedded-opentype'),
    url('../../_fonts/druk/DrukText-BoldItalic-Web.woff2') format('woff2'),
    url('../../_fonts/druk/DrukText-BoldItalic-Web.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-stretch: normal;
}
@font-face {
    font-family: 'Druk Text Wide';
    src: url('../../_fonts/druk/DrukTextWide-Bold-Web.eot');
    src: url('../../_fonts/druk/DrukTextWide-Bold-Web.eot?#iefix') format('embedded-opentype'),
    url('../../_fonts/druk/DrukTextWide-Bold-Web.woff2') format('woff2'),
    url('../../_fonts/druk/DrukTextWide-Bold-Web.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'Druk Text Wide';
    src: url('../../_fonts/druk/DrukTextWide-BoldItalic-Web.eot');
    src: url('../../_fonts/druk/DrukTextWide-BoldItalic-Web.eot?#iefix') format('embedded-opentype'),
    url('../../_fonts/druk/DrukTextWide-BoldItalic-Web.woff2') format('woff2'),
    url('../../_fonts/druk/DrukTextWide-BoldItalic-Web.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-stretch: normal;
}
@font-face {
    font-family: 'Druk Text Wide Web';
    src: url('../../_fonts/druk/DrukTextWide-Medium-Web.eot');
    src: url('../../_fonts/druk/DrukTextWide-Medium-Web.eot?#iefix') format('embedded-opentype'),
    url('../../_fonts/druk/DrukTextWide-Medium-Web.woff2') format('woff2'),
    url('../../_fonts/druk/DrukTextWide-Medium-Web.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'Druk XCond Web';
    src: url('../../_fonts/druk/DrukXCond-Super-Web.eot');
    src: url('../../_fonts/druk/DrukXCond-Super-Web.eot?#iefix') format('embedded-opentype'),
    url('../../_fonts/druk/DrukXCond-Super-Web.woff2') format('woff2'),
    url('../../_fonts/druk/DrukXCond-Super-Web.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'Druk XCond Web';
    src: url('../../_fonts/druk/DrukXCond-SuperItalic-Web.eot');
    src: url('../../_fonts/druk/DrukXCond-SuperItalic-Web.eot?#iefix') format('embedded-opentype'),
    url('../../_fonts/druk/DrukXCond-SuperItalic-Web.woff2') format('woff2'),
    url('../../_fonts/druk/DrukXCond-SuperItalic-Web.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-stretch: normal;
}
@font-face {
    font-family: 'RudeSlabExtraWide-Book';
    src: url('../../_fonts/rude/32A596_4_0.eot');
    src: url('../../_fonts/rude/32A596_4_0.eot?#iefix') format('embedded-opentype'),
    url('../../_fonts/rude/32A596_4_0.woff2') format('woff2'),
    url('../../_fonts/rude/32A596_4_0.woff') format('woff'),
    url('../../_fonts/rude/32A596_4_0.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'RudeSlabExtraWide-Book';
    src: url('../../_fonts/rude/32A596_9_0.eot');
    src: url('../../_fonts/rude/32A596_9_0.eot?#iefix') format('embedded-opentype'),
    url('../../_fonts/rude/32A596_9_0.woff2') format('woff2'),
    url('../../_fonts/rude/32A596_9_0.woff') format('woff'),
    url('../../_fonts/rude/32A596_9_0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'RudeSlabExtraWide-ExtraBold';
	src: url('../../_fonts/rude/32A596_A_0.eot');
	src: url('../../_fonts/rude/32A596_A_0.eot?#iefix') format('embedded-opentype'),
		url('../../_fonts/rude/32A596_A_0.woff2') format('woff2'),
		url('../../_fonts/rude/32A596_A_0.woff') format('woff'),
		url('../../_fonts/rude/32A596_A_0.ttf') format('truetype');
	font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'RudeSlabExtraWide-Thin';
	src: url('../../_fonts/rude/32A596_C_0.eot');
	src: url('../../_fonts/rude/32A596_C_0.eot?#iefix') format('embedded-opentype'),
		url('../../_fonts/rude/32A596_C_0.woff2') format('woff2'),
		url('../../_fonts/rude/32A596_C_0.woff') format('woff'),
		url('../../_fonts/rude/32A596_C_0.ttf') format('truetype');
	font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'RudeSemiCondensed-Bold';
	src: url('../../_fonts/rude-sans/3ACE7E_6_0.eot');
	src: url('../../_fonts/rude-sans/3ACE7E_6_0.eot?#iefix') format('embedded-opentype'),
		url('../../_fonts/rude-sans/3ACE7E_6_0.woff2') format('woff2'),
		url('../../_fonts/rude-sans/3ACE7E_6_0.woff') format('woff'),
		url('../../_fonts/rude-sans/3ACE7E_6_0.ttf') format('truetype');
	font-weight: normal;
    font-style: normal;
}
 
  
@font-face {
	font-family: 'RudeSemiCondensed-Book';
	src: url('../../_fonts/rude-sans/3ACE7E_7_0.eot');
	src: url('../../_fonts/rude-sans/3ACE7E_7_0.eot?#iefix') format('embedded-opentype'),
		url('../../_fonts/rude-sans/3ACE7E_7_0.woff2') format('woff2'),
		url('../../_fonts/rude-sans/3ACE7E_7_0.woff') format('woff'),
		url('../../_fonts/rude-sans/3ACE7E_7_0.ttf') format('truetype');
	font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'RudeSemiCondensed-ExtraBold';
	src: url('../../_fonts/rude-sans/3ACE7E_A_0.eot');
	src: url('../../_fonts/rude-sans/3ACE7E_A_0.eot?#iefix') format('embedded-opentype'),
		url('../../_fonts/rude-sans/3ACE7E_A_0.woff2') format('woff2'),
		url('../../_fonts/rude-sans/3ACE7E_A_0.woff') format('woff'),
		url('../../_fonts/rude-sans/3ACE7E_A_0.ttf') format('truetype');
	font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'RudeSemiCondensed-Light';
	src: url('../../_fonts/rude-sans/3ACE7E_B_0.eot');
	src: url('../../_fonts/rude-sans/3ACE7E_B_0.eot?#iefix') format('embedded-opentype'),
		url('../../_fonts/rude-sans/3ACE7E_B_0.woff2') format('woff2'),
		url('../../_fonts/rude-sans/3ACE7E_B_0.woff') format('woff'),
		url('../../_fonts/rude-sans/3ACE7E_B_0.ttf') format('truetype');
	font-weight: normal;
    font-style: normal;
}
 
@font-face{
        font-family:'TundraWebPro-Extlight';
        src:url("Fonts/1468531/b70f8da5-34ea-40d2-9700-6a228403e602.eot?#iefix");
        src:url("Fonts/1468531/b70f8da5-34ea-40d2-9700-6a228403e602.eot?#iefix") format("eot"),url("Fonts/1468531/e5c2733e-bffe-4189-b5c7-5ab9522d7da0.woff2") format("woff2"),url("Fonts/1468531/c044b944-9785-4439-938c-5a2b413a0848.woff") format("woff"),url("Fonts/1468531/d049a774-37c1-4098-a9d4-e4ab3e305270.ttf") format("truetype");
    }
@font-face{
        font-family:'TundraWebPro-ExtlightIt';
        src:url("Fonts/1468535/6448cc1a-b9c7-4d29-9a45-def834f2a59b.eot?#iefix");
        src:url("Fonts/1468535/6448cc1a-b9c7-4d29-9a45-def834f2a59b.eot?#iefix") format("eot"),url("Fonts/1468535/2bfa735f-bea4-469b-8f45-aa38451c9161.woff2") format("woff2"),url("Fonts/1468535/15458478-65c7-43d6-8bc2-bcbd41bbc65d.woff") format("woff"),url("Fonts/1468535/a3029c2b-7ea3-48d8-b5bb-17b1b4754f20.ttf") format("truetype");
    }


html {
    font-size: 115%;
}
body {
    color: #333;
    background-color: #fff;
    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}
p, li, td {
    line-height: 1.7;
    font-size: 1.08rem;
}
p, ul, ol, table {
    margin-bottom: 1.5rem;
}

a, a:visited { color: #d73b50; }
a:hover, a:focus { color: #f15b69; text-decoration: underline; }

ol ol {list-style-type: lower-alpha;}

::-moz-selection{background:#d63c4f;color:#fff!important;text-shadow:none!important}
::-webkit-selection{background:#d63c4f;color:#fff!important;text-shadow:none!important}
::selection{background:#d63c4f;color:#fff!important;text-shadow:none!important}
 
.skipnav{margin:0!important;padding:0!important}
.skipnav a{position:absolute;left:-1000em;overflow:hidden;position:absolute;top:0;width:1px;height:1px; z-index:9900;background-color:#fff;color:#000;padding:5px 10px;font: bold 11px "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif; border-radius:0 0 3px 3px;text-decoration:none}
.skipnav.showonfocus a:focus{left:20%;top:0;width:auto;height:auto;}

input[type="text"]:focus {outline:none;}

@media print {
    #story-share,
    #story-more,
    .topbar-links {display: none !important;}
}


/*=== GENERIC STYLES ============================*/

.text-uppercase {
    text-transform: uppercase;
}
.intro-paragraph {
    font-size: 1.28rem;
}
.vertical-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    vertical-align: middle;
}
.drop-cap {
    font-family: 'Druk XCond Web', sans-serif;
    font-size: 120px;
    float: left;
    line-height: .9;
    margin: 0px 8px 0 -2px;
}
h3.h3-normal-case,
h3 > .h3-normal-case {
    text-transform: none;
}


/*=== IMAGE CAPTIONS ============================*/
.image-right,
.image-left {
    margin-bottom: 6px;
}

.img-caption {
    margin-top: 10px;
}

.caption-left, 
.caption-right {
    border-top: 2px dotted #aaa;
}

.caption-title {
    color: #f58026;
    text-transform: uppercase;
    font-family: 'Avenir Next LT W01 Bold', 'AvenirNext-Bold', sans-serif;
    font-size: 11px;
}

.img-caption p {
    font-size: 12px;
    color: #787878;
    margin: 0;
    line-height: 14px;
    padding-top: 4px;
}

.caption-center {
    border-top: 2px dotted #aaa;
    text-align: center;
}

@media only all and (min-width: 641px) {
    .image-right {
        float: right;
        padding-left: 16px;
        margin-right: -50px;
    }

    .image-left {
        float: left;
        padding-right: 16px;
        margin-left: -50px;
    }
    
    .caption-left {
        border-right: 2px dotted #aaa;
        border-top: none;
        text-align: right;
        padding-right: 10px;
    }
    
    .caption-right {
        border-left: 2px dotted #aaa;
        border-top: none;
        text-align: left;
        padding-left: 10px;
    }
}

@media only screen and (min-width: 780px) {
    .image-left {margin-left: -50px;}
    .image-right {margin-right: -50px;}
}

@media only screen and (min-width:900px) {
    .image-left {
        margin-left: -110px;
    }

    .image-right {
        margin-right: -110px;
    }

    .image-center {
        padding: 0 0 20px;
    }
}


/*=== PULLQUOTES ============================*/
.pullquote-left, 
.pullquote-right {
    font-size: 1.3em;
    line-height: 1.4;
    font-style: italic;
    color: #0067b1;
    text-align: center;
}

@media only screen and (min-width: 1040px) {
    .pullquote-left, 
    .pullquote-right {
        width: 190px;
    }
    .pullquote-left {
        float: left;
        margin-left: -110px;
        margin-right: 15px;
        padding-right: 15px;
        text-align: right;
        border-right: 1px dotted #CCC;
        margin-bottom: 10px;
    }
    .pullquote-right {
        float: right;
        margin-right: -110px;
        margin-left: 15px;
        padding-left: 15px;
        text-align: left;
        border-left: 1px dotted #CCC;
        margin-bottom: 10px;
    }
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Top bar
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
nav.topbar {
    background-color: #000;
    width: 100%;
    height: 85px;
    overflow: hidden;
}
.homepage nav.topbar {
    background-color: rgba(0,0,0,.6);
    position: absolute;
    overflow: visible;
    top: 0;
    left: 0;
    z-index: 2000;
}
.topbar .mobile-mag-issue {height: 30px;}
.topbar .mobile-search {height: 50px;}

.topbar-logo h1 {
    text-align: center;
    font-size: 1.5rem;
    width: 140px;
    margin: .625em 0;
}
.topbar-logo h1 a {
    display: block;
    width: 100%;
}
.topbar-links a {
    font-family: 'Druk Text Wide Web', sans-serif;
    font-size: 0.55rem;
    font-weight: 400;
    text-transform: uppercase;
    color:#fff;
    height: 85px;
    line-height: 82px;
    margin: 0 .5em;
    float: right;
}

.topbar .mag-issue {
    letter-spacing: 2px;
    font-family: 'Druk Text Wide Web', serif;
    font-size: 0.55rem; /* .68 */
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    height: 85px;
    line-height: 82px;
}

.topbar a {color:#fff;}
.topbar a:hover,
.topbar a:focus {text-decoration: underline;}

.topbar .search-box {
    background-color: #000;
    position: absolute;
    z-index: 2000;
    top: 85px;
    left: 0;
    right: 0;
}
.homepage .topbar .search-box {
    background-color: rgba(0,0,0,.6);
}
.topbar .search-box form {
    padding: .625rem;
    display: flex;
}
.topbar .search-box .row {
    margin: 0 auto !important;
}
.topbar input.q {
    padding: 4px 8px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    border: none;
    font-size: .9rem;
    width: 90%;
    display: inline-block;
    margin: 0;
}
.topbar .search-button {
    font-family: 'Druk Text Wide Web', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.65rem;
    background: #d73b50;
    border: none;
    padding: .5rem;
    width: 10%;
    color: #fff;
    height: 2.4375rem;
}

.topbar .search-button:hover {
    background: #f15b69;
}

.topbar .search-toggle {
  cursor: pointer;
  background: transparent url('../../_images/v2/search-icon-2x.png') no-repeat 5px 5px;
  background-size: 18px;
  text-indent: -200px;
  overflow: hidden;
  width: 25px;
  height: 25px;
    margin: 28px auto 0;
    display: block;
    background-position: 3px 3px;
}

.topbar .search-box {
    display:none;
}
.topbar.show-search .search-box {
    display: block;
}

@media only screen and (min-width: 64em) {
    .topbar-logo h1 {
        width: 152px;
    }
}

@media only screen and (min-width:80em) {
    .topbar .mag-issue {
        font-size: .55rem;
    }
    .topbar-links a {
        letter-spacing: 1px;
        font-size: 0.55rem;
        margin: 0 1.25em;
    }
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Homepage
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* ===== Feature slideshow ===== */
#home-features { position: relative; width: 100%; overflow: hidden; }
#home-after-features { position: relative; padding-top: 20px; z-index: 2000;}
#home-features ul { list-style: none; }
#home-features .cycle-slideshow { height: 90vh; min-height: 350px; margin: 0;}
#home-features .cycle-slideshow li { width: 100%; height: 100%; background-repeat: no-repeat; background-color: #f4f1ec; background-position: center 0; background-size: cover; visibility: hidden;}
#home-features .cycle-slideshow li:first-child {visibility: visible;}
.no-backgroundsize #home-features li { background-color: #333; }
#home-features a { display: block; }

#home-features-pager {
    z-index: 1000;
    position: absolute;
    bottom: 1.5%;
    left: 5%;
    width: 90%;
    margin:0;
}

@media only screen and (min-width: 64em) {
    #home-features-pager li {
        float:left;
        width:25%;
        cursor:pointer;
        position:relative;
        color: #fff;
        opacity: .55;
        transition: opacity 200ms ease;
    }
    #home-features-pager .show-for-large {
        font-family: 'Druk Text Wide Web', Arial, sans-serif;
        font-weight: 500;
    }
    #home-features-pager .number {
        float: left;
        font-size: .75rem;
        border: 1px solid #fff;
        border-radius: 25px;
        height:25px;
        width: 25px;
        line-height: 20px;
        text-align: center;
        margin: 1rem .5rem 0 0;
    }
    #home-features-pager h2 {
        float: left;
        font-family: 'Druk Text Wide Web', Arial, sans-serif;
        font-weight: 500;
        font-size: 0.53rem;
        text-transform: uppercase;
        letter-spacing:1px;
        padding: 1.35rem 0 0;
    }
    #home-features-pager li:before {
        position:absolute;
        content: " ";
        width: 100%;
        height: 1px;
        top:0;
        left:0;
        background-color:#fff;
    }
    #home-features-pager li:hover,
    #home-features-pager li.cycle-pager-active {
        opacity:1;
    }
    #home-features-pager li.cycle-pager-active:before {
        height: 3px;
    }
}
@media only screen and (max-width: 63.999em) {
    #home-features-pager {
        text-align:center;
    }
    #home-features-pager li {
        display: inline-block;
        color: rgba(255,255,255,0.4);
        cursor: pointer;
        font-family: arial;
        font-size: 40px;
        width: 16px;
        height: 16px;
        margin: 0 4px;
        color: #ddd;
    }
    #home-features-pager li.cycle-pager-active {
        color: rgba(255,255,255,1);
    }
}

@media only screen and (min-width: 64em) {
    #home-features .cycle-slideshow {
        min-height: 650px;
    }
}

#home-features .home-feature-text {
    position:absolute;
    z-index: 10;
    bottom: 3em;
    color:#fff;
    width: 90%;
    left: 5%;
}

.home-feature-text h2 {
    font-family: 'Druk XCond Web';
    font-size: 3.7rem;
    font-weight: 900;
    line-height: .9;
    margin: 0;
}
.home-feature-text h3 {
  font-family: 'RudeSlabExtraWide-Book', serif;
  font-weight: 400;
  font-size: .7rem;
}
.home-feature-text .btn-readmore {
  font-family: 'Druk Text Wide Web', sans-serif;
  font-weight: 500;
  border: 1px solid #d73b50;
    background: #d73b50;
  text-transform: uppercase;
  font-size: .55rem;
  padding: .8em 2em;
}

.home-feature-text .btn-readmore:hover {
    background: #f15b69;
}

@media only screen and (min-width:40em) {
    .home-feature-text h2 {
        font-size: 8rem;
    }
    .home-feature-text h3 {
        font-size: .9rem;
        margin: .8em 0;
    }
}

@media only screen and (min-width:64em) {
    #home-features .home-feature-text {
        bottom: 4em;
    }
}

@media only screen and (min-width: 1400px) {
    #home-features .home-feature-text {
        margin-left: -670px;
        width: 70%;
        max-width: 960px;
        left: 50%;
        padding-bottom: 1em;
    }
    #home-features-pager {
        margin-left: -670px;
        width: 1340px;
        left: 50%;
    }
}



.story-default .slideshow .arrow {
    background: url("../_images/story-arrows.png") no-repeat scroll center left / 200% transparent;
    width: 60px;
    height: 60px;
    opacity: .5;
}



/* ===== Inside Stories ===== */
#home-inside-container {
    max-width:75rem; 
    background: #fff; 
    margin: 0 auto;
}
.home-stories-row {
    /* apply flexbox */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    /* make elements wrap at smaller sizes, instead of continuing to shrink */
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

h2.inside-issue {
    text-align: center;
    color: #777;
    font-size: 0.8em;
    font-family: 'RudeSlabExtraWide-Book';
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 20px 0px 30px;
}
.story-block a {
    display: block;
    position: relative;
    height: 100%;
}
.story-block-content {
    text-align: center;
    margin-bottom: 2em;
}
.story-block-small .story-block-content,
.story-block-big .story-block-content {
    padding: 0 1em;
}

.story-block-text .story-block-content {
    margin: 1em 0px;
}

.story-block-text a:first-child { 
    border-top: 1px solid #eee;
}

@media only screen and (min-width:40em) {
    .story-block-text .story-block-content {
        text-align: left;
    }
}
.story-block-content h3 {
    font-family: 'Druk Text Web', 'Arial Black', sans-serif;
    color: #000;
    font-size: 1.4rem;
    text-transform: uppercase;
    margin: .5em 0;
    line-height: 1.1;
}
.story-block-content .summary {
    font-size: .8rem;
    margin: 0;
    color: #666;
}
.story-block-content .teaser {
    margin: 2em 0 0;
    font-family: 'Druk Text Wide Web', sans-serif;
    color: #d73b50;
    text-transform: uppercase;
    font-size: .55rem;
    letter-spacing: 1px;
}
.story-block-image {
    background-color: #f2f2ea;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    overflow: hidden;
}
.story-block-image img {
    max-width: none;
    width: 100%;
}
.story-block a:hover {
    text-decoration: none;
}
.story-block a:hover h3 {
    color: #d73b50;
}
.story-block-small,
.story-block-wide,
.story-block-big {
    margin-bottom: 3em;
}

.story-block-wide a {
    background-color: #f2f2ea;
    overflow: hidden;
}


.story-block-wide .story-block-image {
    float:left; 
    width:50%; 
    padding-bottom:32%;
}
.story-block-wide .story-block-content {
    width:25%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
}

@media only all and (max-width: 640px) {
    .story-block-wide .story-block-image {
        float:none; 
        width:100%; 
        padding-bottom:0px;
        height: auto;
        position: relative;
    }
    
    .story-block-wide .story-block-image:after {
        content: " ";
        display: block;
        position: absolute;
        width: 100%;
        height: 50%;
        left: 0px;
        right: 0px;
        top: auto;
        bottom: 0px;
        background: linear-gradient(to bottom, rgba(242,242,234,0), rgba(242,242,234,1));
    }
    
    .story-block-wide .story-block-content {
        position: relative;
        width: 100%;
        transform: translateY(0px);
        top: auto;
        left: auto;
    }
}
    
.story-block-text a {
    border-bottom: 1px solid #eee;
}
.story-block-text .story-block-content h3 {
    font-size: 1.2rem;
}

@media only screen and (min-width:64em) {
    .story-block-big {position:relative;}
    .story-block-big .story-block-content {position:absolute;z-index:2;bottom:0;width:60%;left:20%;}
    .story-block-big a:after {
         content: " ";
         display: block;
         width: 100%;
         height: 50%;
         position: absolute;
         bottom: 0;
         left:0;
         z-index: 1;
         background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.9) 100%);
    }
    .story-block-big .teaser,
    .story-block-big .summary,
    .story-block-big h3 {color:#fff;}
}


.home-stories-sports {
    background: #000;
    margin-bottom: 3em;
}
h3.sports-header {
    color: #fff;
    font-family: 'Druk XCond Web', sans-serif;
    font-size: 3em;
    letter-spacing: 1px;
    margin-top:.5em;
    text-align: center;
    padding-left: 0.9375rem;
}
.home-stories-sports .story-block-wide a,
.home-stories-sports .story-block-image {
    background: transparent;
}
.home-stories-sports .teaser,
.home-stories-sports h3,
.home-stories-sports .summary {
    color:#fff;
}
@media only all and (max-width: 640px) {
    .home-stories-sports .story-block-wide .story-block-image:after {
        background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
    }
}

@media only screen and (min-width: 64em) {
    h3.sports-header {
        font-size: 5em;
        margin-top:1em;
    }
}



@media only screen and (min-width: 64em) {
    .modern-browser .breakout-container {
        /* break out of container */
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
        width: 97vw; /* don't make full 100%, because would trigger horizontal scrollbars */
    }
    .modern-browser .breakout-container-small {
        /* go just a little wider than container */
        position: relative;
        width: 110%;
        left: -5%;
        max-width: 100vw;
    }
}




.story-grid-block {
    width: 210px; 
    height: 250px; 
    position: relative;
    margin: 20px 40px;
    float: left; 
    overflow: hidden;
}

.story-grid-block a,
.other-story a {display:block;}
.story-grid-block a:hover,
.story-grid-block a:focus {text-decoration:none;}

.story-grid-block-image {position:relative;height:140px; width:100%;background:#ddd;overflow:hidden;}
.story-grid-block-image img {position:absolute;}
.story-grid-block-category {position:absolute; right:0; bottom:0; z-index: 3; background: #000; background: rgba(0,0,0,.7); color:#fff; font: bold 14px 'Roboto Slab', serif;padding:3px 15px;}
.story-grid-block h3,
.story-grid-block h4 {margin:.4em 0 .2em; font: bold 16px/1.2 'Roboto Slab', serif; color:#000;}
.story-grid-block p {font-size: 14px; color:#666; line-height: 1.4;}

.story-grid-block a:hover h3,
.story-grid-block a:hover h4,
.story-grid-block a:focus h3,
.story-grid-block a:focus h4 {color: #f58026;}

.story-grid-block.big .story-grid-block-image img { max-width: none; height: 140px; width: auto; }

.home-wide-image {border-top:8px solid #000;}
.story-grid-block.wide h3 {font-weight:400; font-family: 'AvenirNextLTW01-Regular', 'AvenirNext-Regular', sans-serif; color:#777;}
.story-grid-block.wide h3 b {font-weight: 700; font-family: 'Roboto Slab', serif; color:#000; margin-right:5px;}




.story-grid-block.wide {
    width: 100%;
    height: 350px;
    margin: 10px 0 20px;
    border-bottom: 8px solid #000;
}


.story-grid-block.wide a {position:relative;}
.story-grid-block.wide h3 {
    font-size:24px; 
    background:#fff;
    position:absolute;
    top:-10px;
    left:20px;
    padding:5px 10px;
    border:8px solid #000; 
    border-top: none; 
    border-radius: 0 0 15px 15px;
    text-align: center;
}
.story-grid-block.wide h3 b {font-weight: 700;margin-right:5px;}
.home-wide-text {
    position: absolute;
    bottom: 0;
    left: 20px;
    background: #000;
    background: rgba(0,0,0,.5);
    width: 350px;
    padding: 15px;
    margin: 0;
    border-radius: 10px 10px 0 0;
    padding: 20px 20px 34px;
}
.story-grid-block p.home-wide-text {color: #fff;}

.story-grid-block.wide img {
    max-width: none;
}

@media only all and (max-width: 780px) {
    .story-grid-block.wide h3, 
    .home-wide-text {
        left: 0%;
        width: 100%;
    }
    .story-grid-block.wide img {
        margin-left: -70%;
    }
}

@media only all and (max-width: 550px) {
    .story-grid-block.wide h3 {
        font-size: 20px;
    }
    .story-grid-block.wide {
        height: 320px;
    }
    .story-grid-block.wide img {
        width: 430%;
        margin-left: -150%;
    }
}
@media only screen and (min-width: 550px) {

    .story-grid-block { margin: 20px 30px; }
    .story-grid-block.big { width: 440px; }
    .story-grid-block.big .story-grid-block-image { height:250px; position:absolute; }
    .story-grid-block.big .story-grid-block-image img { max-width: 100%; height: auto; width: 100%; }
    .story-grid-block.big .story-grid-block-text {position:absolute; width:100%;bottom:10px;left:0; padding:0 15px;}
    .story-grid-block.big h3,
    .story-grid-block.big p { color:#fff; text-shadow: 1px 1px 2px rgba(0,0,0,.5); }
    .story-grid-block.big h3 {
        font-size: 18px;
    }
}
@media only screen and (min-width: 780px) {
    
    .home-inside-menu ul.filters li {font-size:16px; padding:0;}
    .home-inside-menu a,
    .home-inside-menu a:visited {padding:5px 10px;}
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Story Page
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#story-container {*zoom:1; padding-bottom: 50px;}
#story-container:before, #story-container:after {content: " ";display: table;}
#story-container:after {clear: both;}

#story-container.story-default { max-width: 710px; margin: 0 auto; padding: 0 20px; }

.story-header { text-align: center; margin: 2em 0 0;}
.story-content { margin: 40px auto 60px; }
.story-feature .story-content { position: relative; z-index: 100; }

.story-photo { margin: 0 auto 30px; }
.story-photo img {width:100%;height:auto;}
.photo-caption { font: 13px 'AvenirNextLTW01-Regular', 'AvenirNext-Regular', sans-serif; margin:.3em 0 0;  }

.story-content h3 {
    font-family: 'Druk Text Web', sans-serif;  /* CHANGE */
    font-weight: 600;
    font-size: 1.7rem;
    line-height: 1.1;
}

.story-content h4 {
    font-family: 'Roboto Slab', serif; /** todo: roboto slab?? **/
    font-weight: 400;
    font-size: 24px;
}

.story-feature .story-header {position:relative; overflow:hidden; width:100%; margin:0;}
.story-feature .row {
    max-width: none;
}

.story-header .video-wallpaper-container {
    position:absolute;top:0;left:0;z-index:50;overflow:hidden;width:100%;background:#000;
}

.story-header .video-wallpaper-container video { display: none; }
.bgvideo .story-header .video-wallpaper-container video {width:100%; display: block; }
.bgvideo .story-header .video-wallpaper-container img.video-image { display: none; }

.story-header .video-wallpaper-overlay {
    position:absolute;top:0;left:0;z-index:100;
}

.story-default .story-header h1 {
    font-family: 'Druk Text Web', sans-serif;
    font-size: 2.7em;
    font-weight: 700;
    line-height: 1;
    margin: .25rem 0px;
    color: #000;
    text-transform: uppercase;
}
.story-default .story-header h2 {
    font-family: 'RudeSlabExtraWide-Book', serif;
    font-size: .85rem;
    color: #666;
    margin: 0;
}
.story-header .teaser {
    margin: 0;
    font-family: 'Druk Text Wide Web', sans-serif;
    color: #d73b50;
    text-transform: uppercase;
    font-size: .65rem;
    letter-spacing: 1px;
}
.social-buttons {
    text-align: center;
    margin: 1em 0 2em;
}

/* Submit a Class Note button */
a.note-button {
    font-family: 'RudeSlabExtraWide-Book', serif;
    background: #0064b0;
    color: #FFF;
    padding: 12px 12px 10px;
    margin: 7px 0 0px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    border-radius: 2px;
    box-shadow: 0px 4px 0px #00518f;
    transition:all ease-in-out .2s;
    -moz-transition:all ease-in-out .2s;
    -webkit-transition:all ease-in-out .2s;
    -o-transition:all ease-in-out .2s;
}

a.note-button:hover {
    background: #298dda;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 0 #1073bf;
}

a.note-button:active {
  box-shadow: 0 2px 0 #1073bf;
  transform: translateY(3px);
}

@media only screen and (min-width: 500px) {
    .story-header.has-button h1 {float:left;}
    a.note-button { float:right; }
}

.story-default .story-content {
    margin-top: 30px;
}

.story-feature .story-content {
    max-width: 700px;
    padding: 0;
    position: relative;
    z-index: 100;
}

/**
.story-column,
.story-column-text {
    padding-left: 0.9375em;
    padding-right: 0.9375em;
}

.story-column-text {
    background-color: #772428;
    color: #fff;
    padding: 20px;
}

.story-column-text a,
.story-column-text a:visited { color: #fff; text-decoration: underline; }

.story-column-text p { font: 14px/1.6 Arial, sans-serif; margin: 0; }
.story-column-text h3 {
    margin:0 0 0.3em; 
    font-family: 'Avenir Next LT W01 Bold', 'AvenirNext-Bold', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0;
}

.story-column-image { border: 8px solid #000; }
**/

/*
#story-share {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin: 0 auto;
    max-width: 940px;
    padding: 12px 20px;
    clear: both;
}
#story-share h3 {
    font:bold 16px/1 'Roboto Slab', serif; 
    margin: 0 0 .5em;
}
**/


#story-more .row {
    max-width: 50rem;
}
#story-more > h3 {
    font-family: 'RudeSlabExtraWide-Book', serif;
    font-size: 0.7rem;
    color: #d73b50;
    text-align: center;
    margin: 3em 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}
#story-more .story-block-content h3 {
    line-height: 1.2;
}
#story-more .teaser {
    display: none; /* not all stories have this, so hide it for consistency */
}

/**
.story-comments, 
.story-other {float:right;}

.story-other .story-grid-block-image {width: 160px;height:107px;}
.story-other .story-grid-block {margin-left: 0 !important;}

@media only all and (max-width: 640px) and (min-width: 100px) {
    .story-column-text {
        -webkit-column-count: 1 !important;
        -moz-column-count: 1 !important;
        column-count: 1 !important;
    }
}



@media only screen and (min-width: 1100px) {
    .story-column {
        width: 940px;
        height: 1072px;
        position:relative;
        margin: 0 auto;
        padding: 0;
    }
    .story-column-text.column-left {
        position:absolute;
        z-index:50;
        width:240px;
        left:-80px;
        top: 40px;
    }
    .story-column-text.column-right {
        position:absolute;
        z-index:50;
        width:240px;
        top: 40px;
        right: -80px;
    }
    .text-three-columns {
        -webkit-column-count: 3; 
        -moz-column-count: 3; 
        column-count: 3;
    }
    .story-column-text.column-left p,
    .story-column-text.column-right p {font-size: 13px;}
}
**/


.story-slideshow {
    position: relative;
    overflow: hidden;
    width: 900px;
    margin: 0 auto 50px -115px; /* 900 - 670(container width) / 2 = 115 */
}
.story-slideshow ul { margin: 0; padding: 0; }
.story-slideshow li { list-style: none; max-width:100%; padding: 0 20px; }
.story-slide-caption { margin:0 auto; max-width:670px; padding-top: 1em;}
.story-slide-caption h3 {font-size: .9rem; margin:0 0 0.25em; text-transform:uppercase;color:#06b; font-weight:bold;}
.story-slide-caption p {margin:0; font-size: 15px; line-height: 1.3;}

.story-slideshow .arrow {
    position: absolute;
    z-index: 500;
    top: 50px;
    width: 60px;
    height: 114px;
    background: url("../../_images/slider-arrows.png") center left;
    text-indent: -300px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.8;
    margin: 0 14px;
    transition: all ease-in-out .2s;
    -moz-transition: all ease-in-out .2s;
    -webkit-transition: all ease-in-out .2s;
    -o-transition: all ease-in-out .2s;
}

.story-slideshow .arrow.prev { left:20px; }
.story-slideshow .arrow.next { right:20px; background-position: center right; }

.story-slideshow .arrow:hover {
    opacity: .95;
    margin: 0 10px;
}

.cycle-pager {
    text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 0; overflow: hidden;
}
.cycle-pager span {
    font-family: arial; font-size: 40px; width: 16px; height: 16px; margin: 0 4px;
    display: inline-block; color: #ddd; cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #777;}

@media only screen and (min-width: 500px) {
    .story-slideshow .arrow { top: 100px; }
}

@media only screen and (min-width: 700px) {
    .story-slideshow .arrow { top: 230px; }
}


.story-talk {max-width: 100%; margin: 0 auto;}
.story-talk b, 
.story-talk strong {color: #e70;}
.story-talk p { line-height: 1.5; }

.story-talk .row {
    max-width: 940px;
}

.issue-pdf img {
    -moz-box-shadow: 1px 1px 4px #555;
    -webkit-box-shadow: 1px 1px 4px #555;
    box-shadow: 1px 1px 4px #555;
    display: block;
    margin-bottom: 8px;
}

.issue-pdf p {
    font-size: 16px;
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Archives
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
ul.archive {list-style:none;margin:0;}
ul.archive li {clear:both;}
ul.archive a {display:block;}
.archive-image {float:right; margin:0 0 5px 5px;}
.archive-text h3 {font-size:20px; margin:.75em 0 .25em;line-height:1.2;}
.archive-text p {font-size:16px;}

@media only screen and (min-width: 550px) {
    ul.archive {overflow:hidden;}
    ul.archive li {padding: 30px 0;}
    .archive-image {float:left; width:15%; margin: 0 5% 0 0;}
    .archive-text {float:left; width:80%;}
    .archive-text h3,
    .archive-text p {margin: 0;}
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Footer
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
footer {
    background: #000;
    color: #999;
    padding: 10px 0 30px;
    text-align: left;
}

footer br {display: none;}

footer .footer-content {
    max-width: 1000px;
}

footer p {
    font-size: 14px;
    margin-bottom: 1rem;
}

footer a,
footer a:visited {
    color: #ccc;
    text-transform: uppercase;

}
footer a:hover {
    color: #fff;
}

footer .footer-menu {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #222;
}

footer .footer-menu p {
    text-align: center;
}

footer .logo {
    margin-top: 6px;
}

footer .logo a {display: block;}

@media only screen and (min-width: 650px) {
    footer .logo a {
        float: right;
    }
    footer br {display: block;}
}

footer .contact {
    text-align: left;
}

footer p.links {
    font-size: .55rem;
    font-family: 'Druk Text Wide Web', serif;
    margin: 1rem 0;
}

footer p.links a {
    margin: 0 0.4rem;
}

footer .social-media {
    position: relative;
}

footer .social-media p {
    font: bold 1.4rem 'Druk Text Web', 'Arial Black', sans-serif;
    float: left;
    padding-right: 6px;
}

footer .social-media .social-icon {
    float: left;
    background: url("../../_images/social-media-icons.png") no-repeat scroll left -1px transparent;
    display: block;
    text-indent: -900px;
    overflow: hidden;
    width: 24px;
    height: 24px;
    margin: 4px 6px 0;
}

footer .social-media .social-icon:hover {
    background-position: left bottom;
}

footer .social-media .twitter-icon {
    background-position: -35px -1px;
}

footer .social-media .twitter-icon:hover {
    background-position: -35px bottom;
}

footer .social-media .linkedin-icon {
    background-position: -70px -1px;
}

footer .social-media .linkedin-icon:hover {
    background-position: -70px bottom;
}

footer .social-media .youtube-icon {
    background-position: -105px -1px;
}

footer .social-media .youtube-icon:hover {
    background-position: -105px bottom;
}

footer .social-media .flickr-icon {
    background-position: -140px -1px;
}

footer .social-media .flickr-icon:hover {
    background-position: -140px bottom;
}

.back-to-top {
  float: right;
  margin: -20px 20px 20px 0;
  text-indent: -200px;
  overflow: hidden;
  background: url("../_images/back-to-top.png") no-repeat center center #999;
  background-size: 55% auto;
  width: 50px;
  height: 50px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

.back-to-top:active { background-color: #222; }

@media only screen and (min-width: 1025px) {
    .back-to-top {display: none;}
}


/*LANDSCAPE PHONE*/
@media only all and (max-width: 640px) and (min-width: 100px) {
    footer .contact {
        text-align: center;
        margin-bottom: 12px;
    }
    footer .social-media p {
        float: none;
        padding: 0;
    }
    footer .social-media .social-icon {
        float: none;
        display: inline-block;
    }
    footer .logo img {
        margin: 0 auto;
        display: block;
    }
}


/*=== Share Buttons ==========================*/

a.social-button {
    display: inline-block;
    margin: 0 6px;
    width: 32px;
    height: 32px;
    font-size: 16px;
    border-radius: 32px;
    color: #fff;
    text-decoration: none;
    line-height: 32px;
    text-align: center;
    transition: background-color .2s;
    -moz-transition: background-color .2s;
    -webkit-transition: background-color .2s;
    -o-transition: background-color .2s;
}
a.social-button.fa-facebook {
    background-color: #3B5998;
}
a.social-button.fa-facebook:hover {background-color: #2b4988;}
a.social-button.fa-twitter {
    background-color: #00ACED;
}
a.social-button.fa-twitter:hover {background-color: #009cdd;}
a.social-button.fa-google-plus {
    background-color: #D14836;
}
a.social-button.fa-google-plus:hover {background-color: #c13826;}
a.social-button.fa-linkedin {
    background-color: #007FB1;
}
a.social-button.fa-linkedin:hover {background-color: #006fa1;}
a.social-button.fa-envelope-o {
    background-color: #999;
}
a.social-button.fa-envelope-o:hover {background-color: #888;}



/*=== Search Page ==========================*/
#gcse-wrap .gsc-control-cse .gsc-table-result {
    font-family: Georgia, Cambria, "Times New Roman",Times, serif;
}

#gcse-wrap { margin: 4em 0;}
#gcse-wrap table {border-collapse: separate; margin:0;}
#gcse-wrap td, #gcse-wrap th {padding:0; border: none;}

#gcse-wrap .gsc-control-cse .gs-spelling, 
#gcse-wrap .gsc-control-cse .gs-result .gs-title, 
#gcse-wrap .gsc-control-cse .gs-result .gs-title * {
    font-size: 1rem;
}

#gcse-wrap td {font-size: .85rem;}

/* Foundation adds border to tbody elements - remove it */
#gcse-wrap tbody {border: none;}

#gcse-wrap .gsc-control-cse {background: transparent; border: none; padding:0;}

#gcse-wrap .gsc-input-box {height: 35px;}
#gcse-wrap .gsc-input-box td {height: 33px;}

#gcse-wrap .gsc-url-top {
    padding-bottom: 5px;
    padding-top: 5px;
}
#gcse-wrap .gsc-result .gs-title {
    height: auto !important;
}

#gcse-wrap input.gsc-input,
#gcse-wrap input.gsc-input:focus {
    box-shadow: none;
}

#gcse-wrap input.gsc-search-button, 
#gcse-wrap input.gsc-search-button:hover, 
#gcse-wrap input.gsc-search-button:focus {
    padding: 11px 27px;
    border: none;
    background-color: #275dad;
    box-sizing: content-box;
    float: left;
    margin-top: 0;
}

.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2

#gcse-wrap span.gs-fileFormat {font-size: 11px;}
#gcse-wrap span.gs-fileFormatType {color: #900; font-size: 11px; font-weight: bold;}

/* Paging controls */
#gcse-wrap .gsc-results .gsc-cursor-box { margin: 20px 10px; line-height: 2; }
#gcse-wrap .gsc-results .gsc-cursor-box .gsc-cursor-page {margin-right: 8px; padding: 8px; color: #333; float: left;  display: block;}
#gcse-wrap .gsc-results .gsc-cursor-box .gsc-cursor-current-page {color: #D05117; text-decoration: underline;}

#gcse-wrap .gsc-refinementsArea,
#gcse-wrap .gsc-above-wrapper-area {border: none;}

#gcse-wrap .gs-result a.gs-visibleUrl, 
#gcse-wrap .gs-result .gs-visibleUrl {font-size: 12px; padding:0; }

#gcse-wrap .gsc-result .gs-title {
    height: auto !important;
}




/* Strategic Plan  */
.story-category {
    float: left;
    width: 32px;
    margin-right: 10px;
}

.story-category.disable span {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: .7;
}

.story-category.disable span.health-human-condition {
    opacity: .45;
}

.story-category.disable span.data-discovery {
    opacity: 1;
}

.category-wrapper {
    width: fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
}

.category-wrapper span {
    width: 32px;
    height: 32px;
    display: inline-block;
    border-radius: 4px;
}

.urban-communities {
    background: url('../../_images/v2/icon-urban.png') no-repeat center;
}

.global-impact {
    background: url('../../_images/v2/icon-environmental.png') no-repeat center;
}

.data-discovery {
    background: url('../../_images/v2/icon-data.png') no-repeat center;
}

.health-human-condition {
    background: url('../../_images/v2/icon-health.png') no-repeat center;
}
 

.tooltiptext {
    visibility: hidden;
    color: white;
    background: #808284;
    margin-left: -45%;
    margin-left: calc(-50% + 16px);
    width: max-content;
    width: -moz-max-content;
    width: -webkit-max-content;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 14px;
}

.category-wrapper:hover .tooltiptext {
    visibility: visible;
    position: relative;
}

.category-wrapper:hover .tooltiptext::after {
    content: "";
    width: 5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #808284 transparent;
    float: left;
    position: absolute;
    margin: auto;
    margin-top: -12px;
    left: 0;
    right: 0;
}

@-moz-document url-prefix() {
    .tooltiptext {
       margin-left: calc(-50% + 32px);
    }
}

@media all and (max-width: 960px) {
    .categories {
        margin: 0px auto;
        display: block;
        position: relative;
        width: fit-content;
        width: -moz-fit-content;
        width: -webkit-fit-content;
    }
}