
.headline h1 { font-size: 1.75rem; line-height: 1.1em; color: #13377c; font-family: FFDINWebProLight, Tahoma, Verdana, Segoe, sans-serif; }

.desktop { display: none; }

.slideshow span.break { display: block; }

.slideshow { background: url(../imgs/slideshow/mobile-slideshow-portrait.jpg) no-repeat center top; background-size: cover; min-height: 350px; position: relative; overflow: hidden; }

.slideshow img { display: none; }

.slideshow .tri-neutral { display: none; }

.headline p { font-size: .85rem; line-height: 1.3em; padding-right: 15%; margin: 0; width: 65%; }

.headline a { color: #0088dd; display: inline-block; margin-top: 15px; }

.headline img { width: 100%; height: auto; }

.headline div { padding-top: 0.9375rem; padding-left: 0.9375rem; }
.headline h1 { width: 45%; }
.wHeader { position: relative; z-index: 102; }
.slider { display: none; }

/* iPhone landscape - show specific static image */
@media only screen and (min-width: 320px) and (orientation: landscape) {
    .slideshow { background: url(../imgs/slideshow/mobile-slideshow-landscape.jpg) no-repeat center top; background-size: cover; min-height: 350px; position: relative; overflow: hidden; }
    .headline p { width: 70%; }
    .slider { display: none; }
}

/***** up to 769px breakpoint *****/
@media only screen and (min-width: 48.0625em) {

    .slideshow { background: none; min-height: 500px; max-height: 630px; height: 60vh; }
    .headline h1, .headline p { width: auto; }
    .headline h1 { font-size: 2.5rem; line-height: 2.75rem; }

    .headline p { font-size: 1rem; line-height: 1.2rem; padding-right: 30%; }
    .headline div { width: auto; padding-top: 0; }

    .slick-slider { position: absolute !important; }

    .slider { width: 100%; margin: 0 auto; text-align: center; position: absolute; min-height: 400px; max-height: 630px; height: 60vh; background-color: #f2f2f2; z-index: 1; display: block; }

    .slider div { min-height: 400px; max-height: 630px; height: 60vh; }
    .slider div.slide { min-height: 350px; position: relative; }
    .slider div.slide1 { background: url(../imgs/slides/slide1.jpg) no-repeat center top; background-size: cover; }
    .slider div.slide2 { background: url(../imgs/slides/slide2.jpg) no-repeat center top; background-size: cover; }
    .slider div.slide3 { background: url(../imgs/slides/slide3.jpg) no-repeat center top; background-size: cover; }
}

/***** up to 1024px breakpoint *****/
@media only screen and (min-width: 48.0625em) {

    .headline h1 { font-size: 2.5rem; line-height: .8em; }
    .headline p { font-size: 1rem; }

    .mobile { display: none; }

    .desktop { display: block; }

    .slideshow span.break { display: inline-block; }

    .slideshow { min-height: 400px; max-height: 630px; height: 60vh; position: relative; }

    .slideshow img.tri-color { display: block; position: absolute; height: 30vh; min-height: 250px; max-height: 375px; left: 35%; top: 0; z-index: 50; }

    .slideshow img.tri-color-small { display: block; position: absolute; height: 30vh; min-height: 150px; max-height: 219px; right: 15%; top: 24vh; z-index: 45; }

    .slideshow .tri-neutral { background: url(../imgs/slideshow/triangles-neutral.png) no-repeat center center; background-size: cover; min-height: 400px; max-height: 630px; height: 60vh; display: block; position: relative; z-index: 99; }

    .headline { background: url(../imgs/slideshow/slideshow-headline-bkg02.png) no-repeat right center; background-size: 100%; bottom: 0; padding: 3em 0; position: absolute; width: 75%; margin-left: -2.5%; }
    .headline div { padding-left: 5%; }

    .headline a { display: inline; margin-top: 0; }

    .headline p { margin: 0; }
}

/***** after 1024px breakpoint *****/
@media only screen and (min-width: 64em) {
    .headline h1 { font-size: 2.75rem; line-height: .8em; }
    .headline p { padding-right: 40%; line-height: 1.3em; }
    .headline { background: url(../imgs/slideshow/slideshow-headline-bkg.png) no-repeat right center; }
}
/***** 1200px + *****/
@media only screen and (min-width: 75rem) {
    .headline h1 { font-size: 3.25rem; }
    .headline { width: 70%; padding: 4em 0; max-width: 1000px; }
    .headline p { font-size: 1.3rem; }
}
