@media screen{
    .hero {
        position:relative;
        z-index: 2;
        /*margin-bottom:50px;*/
    }

    .hero-image {
        background-size:cover;
        background-position:center center;
        background-repeat:no-repeat;
        background-color: #ccc;
    }

    .hero-text {
        position:absolute;
        top:50%;
        left:7%;
        height:100%;
        width:30%;
        padding:3vw;
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
        color:#fff;
    }

    .node-civc-landing-page .hero-text {
        height:auto;
    }
    .hero-topic {
        font-size:1.7vw;
        /*font-family:"Flama Medium", sans-serif;*/
        text-transform:uppercase;
        font-weight:bold;
        padding-left:3px;
        padding-bottom:14px;
    }
    .hero-title {
        font-size:4vw;
        line-height:100%;
        font-family:"Flama Condensed Light", sans-serif;
    }

    .hero-summary {
        margin-top:2.5vw;
        font-size:1.5vw;
    }

    .box-blue {
        background-color:rgba(1,158,188,.9);
        border-color:rgba(1,158,188,.9);
    }

    /* arrow down :default */
    .hero-text:before {
        display: block;
        position: absolute;
        content:'';
        bottom:-4vw;
        top:100%;
        left:50%;
        -webkit-transform:translateX(-50%);
        transform:translateX(-50%);
        border-width:4vw 4vw 0;
        border-style:solid;
        border-top-color:inherit;
        border-bottom-color:inherit;
        border-left-color:transparent;
        border-right-color:transparent;
    }
    /*
    .arrow-down .hero-text:after {
        left:50%;
        transform:translateX(-50%);
        right:initial;
        top:initial;
        border-top-color:inherit;
        border-bottom-color:inherit;
        border-left-color:transparent;
        border-right-color:transparent;
        bottom:-40px;
        border-width:40px 40px 0;
    }
    */

    .hero-text-right {
        text-align:left;
    }

    .hero-text-right .hero-text {
        text-align:left;
        left:auto;
        left:initial;
        right:0;
    }
    .hero-text-right .hero-text:before {
        right:auto;
        right:initial;
        left:-4vw;
        border-width:4vw 4vw 4vw 0;
    }

    .civc_landing{
        overflow: hidden;
    }

    .hero,
    .hero-image {
        /*height:42.8571vw; /* 21:9 ratio */
        height:35vw;
    }

    .civc_landing .hero-text {
        left:0;
        width:33.3333%;
        max-height: 100%;
    }
    .hero-text-right .civc_landing .hero-text {
        left:auto;
        left:initial;
    }
    .hero-text-left .civc_general .hero-text {
        left:auto;
        left:initial;
    }

    /* arrow right */
    .civc_landing .hero-text:before {
        left:100%;
        right:-4vw;
        top:50%;
        bottom:auto;
        bottom:initial;
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
        border-width:4vw 0 4vw 4vw;
        border-top-color:transparent;
        border-bottom-color:transparent;
        border-left-color:inherit;
        border-right-color:inherit;
    }
    /* arrow left */
    .hero-text-right .civc_landing .hero-text:before {
        right:100%;
        left:-4vw;
        border-width:4vw 4vw 4vw 0;
    }

    .page-header {
        display:none;
    }

    .fa-minus-circle {
        color:#008000;
        margin-right:.5em;
    }

    .fa-plus-circle {
        margin-right:.5em;
    }
}

@media screen and (max-width: 480px) {
    .hero {
        height: auto;
    }
    .box-blue {
        background-color:rgba(1,158,188,1);
        border-color:rgba(1,158,188,1);
    }
    .hero-text, .civc_landing .hero-text {
        position: relative;
        -webkit-transform: none;
        transform: none;
        width: auto;
        left:auto;
        top:auto;
    }
    .hero-topic {
        font-size:16px;
        padding-bottom:5px;
    }
    .hero-title {
        font-size:36px;
    }
    .hero-summary {
        font-size: 14px;
    }
    /* arrow up */
    .hero-text:before, .hero-text-right .civc_landing .hero-text:before {
        left: 10%;
        right: auto;
        top: -30px;
        bottom:100%;
        border-width: 0 30px 30px;
        -webkit-transform: none;
        transform: none;

        border-top-color: inherit;
        border-bottom-color: inherit;
        border-left-color: transparent;
        border-right-color: transparent;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    .hero-text, .civc_landing .hero-text {
        width: 50%;
    }
    .hero-topic {
        font-size:2vw;
        padding-bottom: 6px;
    }
    .hero-title {
        font-size:5.5vw;
    }
    .hero-summary {
        margin-top: 1.5vw;
        font-size: 1.9vw;
    }
}

@media screen and (min-width: 1200px) {
    .hero-topic {
        font-size:20px;
    }
    .hero-title {
        font-size:50px;
    }
    .hero-summary {
        font-size:18px;
    }
}


@media print {
    /* Hero Slider print styles */

.hero{
    display:none;
    }
.node-type-sgs-widget-panel .hero,
.node-type-civc-general-page .hero,
.node-type-civc-initiative-type .hero,
.page-about-team .hero,
.node-type-webform .hero {display:block;}

.node-type-civc-general-page .page-header,
.node-type-civc-initiative-type .page-header{display:none !important;}
    
.hero-topic a{font-size:10px; color:#666;}
.hero-image{display:none; height:150px; background-position:center center;  -webkit-print-color-adjust: exact;}

* .hero-text{
    color:#000; 
    display:table; 
    width:100vw; 
    padding:0px 0px 5px 0px; 
    text-align:left; 
    margin:10px 0px;
 
    left:0px;
    top:0px;
    border-bottom:solid 1px #ccc;
    }
    .hero-title{font-size:2.25em; font-weight:500; line-height:1;}
.hero-text::before{display:none;}
#main-container .hero h1{margin:10px 0 !important; padding:0px; line-height:1;}
    
}