﻿   #carousel
        {
            position:absolute;
            left:0;
            top:0;
  overflow:hidden;
       width: 100%;
    height: 100%;     
        }
#dotted {
    position: absolute;
    z-index: 20;
    top:0;
    left: 0;
    bottom:5.8%;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55) url("/images/gridtile.png") ;
}


        #carousel img {
    max-width: none;
    position:absolute;
  width:120%;
    height:120%;

    margin-left:-180px;
    margin-top:-120px;
    opacity:0;
    transition-property: opacity, transform;
    transition-duration: 3s, 12s;

}
        #carousel img  {
    transform-origin: bottom left;
}
#carousel  :nth-child(2n+1) {
    transform-origin: top right;
}
#carousel  :nth-child(3n+1) {
    transform-origin: top left;
}
#carousel  :nth-child(4n+1) {
    transform-origin: bottom right;
}
    #carousel .fx:first-child + img ~ img  {
    z-index:-1;
}
    #carousel .fx {
    opacity:1;
    transform: scale(1.5) translate(30px);
}
    #quotes
    {
        position:absolute;
        left:1%;
        bottom:10vh;
        height:20vh;
        width:50vw;
        font-size:5vw;
        font-weight:900;
        z-index:2000;
        font-family:'Arizonia', Helvetica, sans-serif;
        color:#000000;
        text-shadow:0.5vw 0.5vw 3vw #000000;

        /*background-color:rgba(7, 86, 247, 0.70);
        border-radius:50% 50% 50% 50%;
        border-bottom-color:#ffffff;
        border-width:2px;
        border:dotted;*/

    }
    #quotes p{
        position:relative;
        
    }
    #blur_box
    {
        position:absolute;
        bottom:6vh;
        left:0vw;
        width:50vw;
        height:14%;
  background:rgba(255, 255, 255, 0.85);
          -webkit-filter: blur(1vw);
  filter: url('/media/blur.svg#blur');
  filter: blur(1vw);


        z-index:50;
       

    }