﻿/* external css: flickity.css */

/** { box-sizing: border-box; }

body { font-family: sans-serif; }*/

.call-out-carousel {
background-color:#D3D3D3;
  height: 400px;
 
}

.call-out-carousel .flickity-viewport {
    width: calc(100% - 125px);
    margin: auto;
}

.call-out-carousel .flickity-slider {
    transition: transform .75s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.call-out-carousel .carousel-cell {
  /*max-width: 300px;*/
  width: auto;
  /*height: auto;*/
  margin-right: 37.5px;
  /*background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;*/
  /*border: 1px solid blue;*/
  /*transform: translateY(-50%);
  top: 50%;*/
  top: 0;
  bottom: 0;
  /*display: flex;*/
}

.call-out-carousel .carousel-cell img {
    /*width: 100%;*/
    margin: auto;
    /*height: 80%;*/
    height: auto;
    width: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%) scale(1,1);
    display: block;
    transition: transform .375s cubic-bezier(0.68, -0.55, 0.27, 1.55); 
    cursor: pointer;
    /*height: 200px;*/
}


.call-out-carousel .is-selected img {
    /*height: auto;
    width: 120%;*/
    transform: translateY(-50%) scale(1.2,1.2);
}

.call-out-carousel .is-selected, .call-out-carousel .is-selected img {
    /*transform: scale(1.2,1.2);*/
/*  transform: translateY(-50%) scale(1.3, 1.3) */
  
  /*width: 120%;*/ 
  /*max-height: 120%;
  height: 90%;*/
 /*height: 300px;*/
}

.height-2 {
  height: 250px;
}

/* cell number */
/*.call-out-carousel .carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}*/

.text-blurb-mobile {
    /*position: absolute;
    top: 92%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 12px;
    display: block;*/
    display: none;
}

.static-blurb-banner{

    color: black;
    position: absolute;
    width: 800px;
    max-width: 100%;
    bottom: 5%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    z-index: 5;

}

.call-out-carousel .carousel-cell .cell-container {
    display: block;
    height: 100%;
}

 .call-out-carousel:after {
        
        content: 'flickity';
            display: none;
    }

@media screen and (max-width: 767px) {
    .call-out-carousel:after {
        content: '';
    }

    .text-blurb-mobile {
        display: flex;
        flex-direction: column;
        align-self: center;
        position: static;
        transform: translateY(0);
        font-size: inherit;
        text-align: left;
		color:black;
    }

    .static-blurb-banner {
        display: none;
    }

    .call-out-carousel {
        height: auto;
    }

        .call-out-carousel .carousel-cell {
            margin-right: 0;
            width: auto !important;
        }

            .call-out-carousel .carousel-cell .cell-container {
                display: flex;
                padding: 15px;
                margin: auto;
			    border-bottom: white 20px solid;
            }

            .call-out-carousel .carousel-cell img {
                width: auto;
                transform: translateY(0);
                margin: 0;
                margin-right: 15px;
            }
}