@import url(http://fonts.googleapis.com/css?family=Lato:300|PT+Serif:400);
.marquee
{
    font-size: 16px;
    height: 600px;
    /* max-width: 1200px; */
}

.school_name
{
    position: absolute;
    color: #021949;
    background-color: white;
    padding: 15px;
    opacity: .7;
    /* z-index: 300; */
    text-align: center;
    animation: jello 3s infinite 1s;
    animation-fill-mode: both;
    transform-origin: center;
    margin: 0 auto;
    right: 320px;
    left: 320px;
    top: 250px;
}
@keyframes jello
{
    0%, 11.1%, 100% {
        transform: none;
    }
    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }
    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg);
    }
    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }
    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }
    66.6% {
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }
    77.7% {
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }
    88.8% {
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}
.marquee .marquee_data
{
    display: none;
}

.marquee .marquee_stage_large
{
    height: inherit;
    position: relative;
    overflow: hidden;
}

.marquee .marquee_container_1, .marquee .marquee_container_2
{
    height: inherit;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}

.marquee .marquee_container_2
{
    z-index: -1;
}
.marquee .marquee_container_1{z-index: -2;}

.marquee .marquee_panel
{
    height: inherit; width: 100%;
    position: absolute; top: 0px; left: 0px;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center 0px;
    background-size: cover;
}

.marquee .marquee_panel .panel_caption
{
    width: 68%;
    position: absolute; bottom: 110px; left: 0px;
    margin-left: 16%;
    font-family: 'lato' , sans-serif;
    padding-bottom: 15px;
}

.marquee .marquee_panel .panel_caption h3
{
    font-family: 'PT Serif',serif;
    margin: 0px 0px 0px 0px;
    font-weight: 400;
    font-size: 1.7em;
    color: #fff;
}

.marquee .overlay
{
    position: absolute; left: 0px; top: 0px;
    width: 100%; height: 100%;
    background-image: linear-gradient(rgba(0,0,0,0) 45% ,rgba(0,0,0,0.7) 70%);
    background-size: 100%;
}

.marquee .marquee_nav
{
    position: absolute; bottom: 95px; left: 0px;
    text-align: center; width: 100%;
    z-index: 103;
}

.marquee .marquee_nav div
{
    display: inline-block;
    width: 10px; height: 10px;
    border: 2px solid rgba(255,255,255,.5);
    border-radius: 50%;
    margin: 0px 8px 0px 8px;
    cursor: pointer;
    transition: background-color .4s, border .4;
}

.marquee .marquee_nav  div:hover
{
    border: #fff;
    background-color: rgba(255,255,255,.2)
}

.marquee .marquee_nav div.selected
{
    background-color: #fff;
}


.marquee .btn
{
    width: 39px; height: 39px;
    background-color: rgba(255,255,255,.2);
    background-size: 50px 30px;
    position: absolute; top: 250px;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.2);
    transition: background-color .4s, border .4s;
}

.marquee .btn:hover
{
    border-color: #fff;
    background-color: rgba(0,0,0,.6);
}

.marquee .btn.prev
{
    left: 20px; z-index: 104;
    background-image: url(../images/arrow_left.svg); background-position: -8px 4px;
    fill: white;
}
.marquee .btn.next
{
    right: 20px; z-index: 105;
    background-image: url(../images/arrow_right.svg); background-position: -3px 4px;
    fill: white;
}

@media only screen and (min-width: 700px) and (max-width: 950px)
{
    .marquee
    {
        height: 450px;
    }
    .marquee .marquee_nav
    {
        bottom: 10px;
    }
    .marquee .marquee_panel .panel_caption
    {
        bottom: 30px;
    }
    .marquee .btn
    {
        top: 200px;
    }
    .school_name
    {
        display: none;
    }
}

@media only screen and (min-width: 500px) and (max-width: 699px)
{
    .marquee
    {
        height: 300px;
    }
    .marquee .marquee_nav
    {
        bottom: 10px;
    }
    .marquee .marquee_panel .panel_caption
    {
        bottom: 30px;
    }
    .marquee .marquee_panel .panel_caption h3
    {
        font-size: 1.3em;
    }
    .marquee .btn
    {
        top: 130px;
    }
    .school_name
    {
        display: none;
    }
}
@media only screen  and (max-width: 499px)
{
    .marquee
    {
        height: 250px;
    }
    .marquee .marquee_nav
    {
        bottom: 10px;
    }
    .marquee .marquee_panel .panel_caption
    {
        display: none;
        bottom: 30px;
    }
    .marquee .marquee_panel .panel_caption h3
    {
        display: none;
        font-size: 1.3em;
    }
    .marquee .btn
    {
        display: none;
        top: 130px;
    }
    .school_name
    {
        display: none;
    }
}