/* 

    NAME        NAMESPACE

    Cyril       cg
    Mia         mz
    Elizabeth   er
    Taylor      th
    Natasha     ny
    Bea         bd
    Max         mj
    Catalina    co
    Sejal       sa
    Rachel      rl
    Dahee       dc
    Celine      ck2
    Leah        ls
    Delaney     dp
    Tony        tm
    Tiff        tiff

    --------------------

    I
     M
      P
       O
        R   
         T              |
          A             |
           N            |
            T          \|/
             !          `

    READ
    THESE
    INSTRUCTIONS
    BEFORE
    EDITING

    1.  find your name
    2.  add your CSS directly below your name

    2a. -----> DO NOT include any body or div styles. i.e., no:

        body { ... }
        div { ... }

    3.  IMPORTANT: prepend all of your classes with a classname using your initials
        for example, if my initials are th:

        .th.square { ... }
        .th.circle { ... }
        .th.everything-else { ... }

    3a. -----> IF YOU ARE USING IMAGES

        IMPORTANT: all images should be hosted on my server.

        1.  create a folder on your desktop with your initials
        2.  put all of your images into that folder
        3.  upload your folder to the `images` folder on my server 
        4.  IMPORTANT: update the url for all of your background images!

            background-image: url(images/xx/image.png);

    3b. -----> IF YOU ARE USING ANIMATIONS

        IMPORTANT: make sure your animations have unique names
        if your animation is called something generic like "mymove" or "rotate", 
        be sure to prepend the animation name with your initials 
        -- and update your references to that animation:

            webkit-animation: maMove 5s infinite; 
            animation: maMove 5s infinite;

        that way, we know it's YOUR rotation animation and not someone else's

    4.  SAVE this file
    5.  REPLACE this file on the server so someone else can edit it


-------------------------------------------------- */



/* --------------------------------------------------
  Reset browser defaults
-------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
    border: 0;
    margin: 0;
    outline: 0;
    padding: 0;
}



/* --------------------------------------------------
  Establish which box model we want to use
  https://css-tricks.com/the-css-box-model/
-------------------------------------------------- */
*,:before,:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



/* --------------------------------------------------
  Default Square Styles
-------------------------------------------------- */
/* hide the scrollbars so we get the appearance of an infinite canvas */
body {
    overflow: hidden;
}

.square, div {
    position: relative;
    /* so all the squares form a grid */
    float: left;
    /* assuming we are doing a 4x4 grid of squares */
    width: 25%;
    max-width: 25%;
    /* vh stands for Viewport Height */
    height: 25vh;
    max-height: 25vh;
    /* so no content overflows the container */
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.grid-64 .square, .grid-64 div {
    width: 12.5%;
    max-width: 12.5%;
    /* vh stands for Viewport Height */
    height: 12.5vh;
    max-height: 12.5vh;
}


/* --------------------------------------------------
  Class Square Styles (THE FUN PART!!)
-------------------------------------------------- */


/* --------------------
    Tiff (example)
-------------------- */
.tiff {
    background-color: pink;
    border: none;
}

    .tiff:after, .tiff.circle:after {
        content: " ";
        animation: tiff-spin 0.5s infinite linear;
        background: black;
        width: 4px;
        height: 80%;
        position: absolute;
        margin: auto;
        top: 0; left: 0; bottom: 0; right: 0;
    }

.tiff.circle {
    background-color: #00ff64;
    border-radius: 50%;
}

    .tiff.circle:after {
        animation: tiff-spin 0.5s infinite linear;
        animation-direction: reverse;
    }

.tiff.yellow {
    border-top-style: solid;
    border-right-style: double;
    border-bottom-style: groove;
    border-left-style: ridge;
    border-color: gold;
    background-color: orangered;
    border-width: 15px;
}

.tiff.lozenge {
    background: rgb(30,30,30);
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    box-shadow: pink 20px 20px 20px;
}

@keyframes tiff-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}



/* ---------------------------------------- 
    Cyril Gordon
---------------------------------------- */


.cg.window {
    border: ridge 30px #603814;
    border-bottom: ridge 20px #603814;
    cursor: pointer;
    background-image: url(images/cg/opacity.png);   
}

.cg.window:active {
    background-image: url(images/cg/hmm.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cg.windowbottom {
    border: ridge 30px #603814;
    border-top: ridge 20px #603814;
    cursor: pointer;
    background-image: url(images/cg/opacity.png);
    animation:cg-windowmove 5s infinite;
}

.cg.windowbottom:active {
    background-image: url(images/cg/hmm.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

@keyframes cg-windowmove {
    0% {bottom: 0px;}
    50% {bottom: 100px;}
    100% {bottom:0px;}
}



/* --------------------
    Mia Zhang
-------------------- */

.mz.pool { 
    animation-name: mzredchange;
    background-color:red;
    animation-iteration-count: infinite;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;

}

.mz.pool:hover{
    background-image: url(images/mz/water.gif);
    background-size:cover;
    background-position: center;
    cursor:cell;

}
.mz.pool:active{
    animation: mzrotate 4s;
}
@keyframes mzredchange{
    0%{ background-color :#ace1e3; }
    25%{background-color:#a3c6cc;}
    50%{background-color:#77b7bf;}
    75%{background-color:#a3c6cc;}
    100%{ background-color :#ace1e3; }
    }

.mz.swimring {
   
    background: none;
    animation-name:mzrotatee;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    cursor:crosshair;
    animation-timing-function: ease;
    background-image: url(images/mz/swim.png) ;
    background-size: 70px;
    background-repeat: no-repeat;
    background-position: center;

}

@keyframes mzrotatee{
   0%{transform:rotate(0deg);}
   50%{transform:rotate(180deg);}
   100%{transform:rotate(360deg);}
}

@keyframes mzrotate{
   0%{transform:rotate(0deg);}
   50%{transform:rotate(180deg);}
   100%{transform:rotate(360deg);}
}



/* --------------------
    Elizabeth Richards
-------------------- */

.er.olive-circle { 
    background: white;
    border-radius: 400%;
    border-style: solid black;
}

.er.olive-circle:hover {
    background-color: olive;
    cursor: crosshair;
    transform: rotate(150deg);
    transition: ease-out;
    transition-duration: .5s;
    border-radius: 50%;
    opacity: 100%;

}

.er.olive-square {
    background: lightblue;
    border: inset 40px khaki;
}

.er.olive-lozenge {
    background: repeating-radial-gradient(
  circle,
  olive,
  olive 10px,
  #6B8E23 10px, 
  #6B8E23 20px
);
    border-top-left-radius: 40%;
    border-bottom-right-radius: 88%;
    box-shadow: black 44px 44px;
}
.er.olive-lozenge:hover { 
    background-image: url(images/er/olives2.jpg);
    background-size: contain;
    transform: rotate(90deg);
    transition: ease-out;
    transition-duration: 1s;

 }




/* --------------------
   Taylor Herbert
-------------------- */

.th.circle { 
    background: url(images/th/tileone.jpg);
    background-attachment: fixed;
    background-size: cover;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 60%;
    box-shadow: steelblue 15px 15px;
    opacity: 0.75;
    transform: rotate(320deg);
}

.th.circle:hover {
    background: url(images/th/tileone.jpg);
    background-attachment: fixed;
    background-size: cover;
    opacity: 0.2;
    transition: 1s;
    transform: rotate(180deg);
}

.th.circle:active {
    background: url(images/th/tileone.jpg);
    background-attachment: fixed;
    background-size: cover;
    opacity: 1;
    transition: 0.5s;
}

.th.square {
    background: url(images/th/tilesun.jpg);
    background-attachment: fixed;
    background-size: cover;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 60%;
    box-shadow: orange 75px 75px;
    opacity: 0.79;
    transform: rotate(310deg);
}

.th.square:hover {
    background: url(images/th/tilesun.jpg);
    background-attachment: fixed;
    background-size: cover;
    opacity: 0.2;
    transition: 1.5s;
}

.th.square:active {
    background: url(images/th/tilesun.jpg);
    background-attachment: fixed;
    background-size: cover;
    opacity: 1;
    transition: 0.5s;
}
.th.triangle {
    background: url(images/th/tilelast.jpg);
    background-attachment: fixed;
    background-size: cover;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    box-shadow: black 70px 70px;
    opacity: 0.6;
    transform: rotate(310deg);
    transition: all .2s ease-in-out;
}

.th.triangle:hover {
    background: url(images/th/tilelast.jpg);
    background-attachment: fixed;
    background-size: cover;
    opacity: 0.2;
    transition: 2s;
    transform: scale(1.2);
}

.th.triangle:active {
    background: url(images/th/tilelast.jpg);
    background-attachment: fixed;
    background-size: cover;
    opacity: 1;
    transition: 0.5s;
}



/* ---------------------------------------- 
    Natasha Yunen 
---------------------------------------- */

.ny.lozenge {
    background-color: white;
    width: 200px;
    height: 200px;
    border-bottom-left-radius: 0%;
    border-top-right-radius: 0%
}

.ny.lozenge2  {
    background-color: transparent;
    width: 200px;
    height: 200px;
    border-radius: 80%
}

.ny.example div {   
    background-color: red;
    border-radius: 50%;
    width: 50%
    height: 50%;
}



/* ---------------------------------------- 
    Bea D'Amico
---------------------------------------- */


.bd {
    background: black;
}


.bd.second {
    background-color: purple;
    transition: background-color 3s;
}

.bd.second:hover { 
    background-color: #ffff3e;
    cursor: pointer;
    transition: color-red;
}

.bd.second:active {
    background: url(http://www.i2symbol.com/images/symbols/geometry/black_small_square_u25AA_icon_256x256.png);
}

.bd.second div { 
    background: url(http://www.i2symbol.com/images/symbols/geometry/black_small_square_u25AA_icon_256x256.png);
    border-color: black
    width: 110%;
    height: 120%;
    transform: rotate(180deg);
    margin-left: 40%;
    margin-top: 20%;
}

.bd.fifth {
    background-color: cyan;
    transition: background-color 60s;
}

.bd.fifth:hover { 
    background-color: black;
    cursor: pointer;
    transition: color-red;
}

.bd.fifth:active {
    background: url(http://www.armstrong.com/pdbupimages-flr/197037.jpg);
}

.bd.fifth div { 
    background: url(http://www.armstrong.com/pdbupimages-flr/197037.jpg);
    border-color: black
    width: 75%;
    height: 20%;
    transform: rotate(180deg);
    margin-top: 20%;
}

.bd.sixth {
    background-color: white;
    transition: background-color 1s;
}

.bd.sixth:hover { 
    background-color: #ffff3e;
    cursor: pointer;
    transition: color-red;
}

.bd.sixth:active {
    background: url(http://www.i2symbol.com/images/symbols/geometry/black_small_square_u25AA_icon_256x256.png);
}


.bd.sixth div { 
    background: url(http://www.i2symbol.com/images/symbols/geometry/black_small_square_u25AA_icon_256x256.png);
    border-color: black
    width: 110%;
    height: 120%;
    transform: rotate(180deg);
    margin-left: 40%;
    margin-top: 20%;
    
}



/* ---------------------------------------- 
    max 
---------------------------------------- */

.mj {
    background: hsl(168,19%,47%);
}

.mj.soup {
    border-style: ridge;
    border-width: 50px;
    border-top-color: rgb(247,202,201);
    border-right-color: rgb(247,202,201);
    border-bottom-color: rgb(247,202,201);
    border-left-color: rgb(247,202,201);
    background-color: rgb(146,168,209);
    transition-property: background;
    transition-duration: 2s;
    transition-timing-function: linear;
}

.mj.soup:hover {
    background-color: rgb(247,202,201);
    cursor: pointer;
}

.mj.wow {
    background-color: rgb(247,202,201);
    border-style: ridge;
    border-width: 50px;
    border-top-color: rgb(146,168,209);
    border-right-color: rgb(146,168,209);
    border-bottom-color: rgb(146,168,209);
    border-left-color: rgb(146,168,209);
    transition-property: background;
    transition-duration: 2s;
    transition-timing-function: linear;
}

.mj.wow:hover { 
    background-color: rgb(146,168,209);
    cursor: pointer;
}

.mj.wrapper { 
    height: 100%;
    width: 100%;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    background-size: 1800% 1800%;
    -webkit-animation: mj-rainbow 18s ease infinite;
    -z-animation: mj-rainbow 18s ease infinite;
    -o-animation: mj-rainbow 18s ease infinite;
    animation: mj-rainbow 18s ease infinite;}

@-webkit-keyframes mj-rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes mj-rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes mj-rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes mj-rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}




/* ---------------------------------------- 
    Catalina O'Connor
---------------------------------------- */



.co.corners:hover {
    background-color:darkmagenta;
    -webkit-transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
}

.co.corners:hover {
    background-color:darkmagenta;
    -webkit-transform: rotateZ(30deg);
    -ms-transform: rotateZ(30deg);
    transform: rotateZ(30deg);
}

.co.corners:hover {  
    background-color:darkmagenta;
    cursor: help;
}

.co.corners {
    border-style:ridge;
    border-width :50px;
    border-top-color:lightcyan;
    border-right-color :lightcyan;
    border-bottom-color:green;
    border-left-color:green;
}

.co.corners:active {
    -webkit-transform: rotate(360deg);
    transform: rotate(345deg);
    transition:transform 1s ease;
}

.co.im {
    background-color: lemonchiffon;
    transition:background-color 1s;
}

.co.im:hover { 
    background: url(images/co/discover.png);
    cursor: crosshair;
    background-size:contain;
    background-position:center;
}

.co.im:active {
    background: url(images/co/discover3.gif);
    background-size:contain;
    background-position:center;    
}



/* ---------------------------------------- 
    Sejal Aggarwal
---------------------------------------- */
.sa {
    background-color: plum
}

.sa.picture2{
    background-color: palevioletred;
    background: url(images/sa/gif2.gif);
}

.sa.picture4{
    background: url(images/sa/gif4.gif);
}

@keyframes sa-pinkchange {
    from {background-color: mediumvioletred;}
    to{background-color: mediumorchid}
} 

.change div{
    width: 200px;
    height: 200px;
    background-color: pink;
    animation-name: sa-pinkchange;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}



/* ---------------------------------------- 
    Rachel J. Lee
---------------------------------------- */
.rl.blue {
    background-color: lightcyan;
}

.rl.blue:hover {
    background-color: lemonchiffon;
    cursor: pointer;
    
}

.rl.blue:active {
    background: url(images/rl/yellow-stripes.png);
    background-size:100%;
}

.rl.blue div {
    width: 75%;
    height: 100%;
    background-color: lightcyan;
    animation-name: rl-bluechange;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    left:0px;
    top:0px;
    transform:rotate(0deg);
    border-style: none;
}

@keyframes rl-bluechange {
    0% {background-color: lightcyan;}
    50% {background-color: lemonchiffon;}
    100% {background-color: lightcyan;}
}

.rl.yellow {
    background-color: lemonchiffon;
    width: 100%;
    height: 100%;
}

.rl.yellow div {
    width: 100%;
    height: 75%;
    background-color: lemonchiffon;
    animation-name: rl-yellowchange;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    border-style: none;
    animation-delay: 1s;
}

@keyframes rl-yellowchange {
        0% {background-color: peachpuff;}
        50% {background-color: lemonchiffon;}
        100% {background-color: peachpuff;}
}

.rl.yellow:hover {
    background-color: peachpuff;
    cursor: pointer;
}

.rl.yellow:active {
    background: url(images/rl/pink-stripes.png);
}

.rl.pink {
    background-color: orange;
}

.rl.pink div{
    width: 75%;
    height: 10%;
    background-color: peachpuff;
    animation-name: rl-pinkchange;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    position: absolute;
    border-style: none;
    left: 0px;
    top: 0px;
    animation-delay: 2s;
}

@keyframes rl-pinkchange {
    0% {background-color: peachpuff;}
    50% {background-color: seashell;}
    100% {background-color: peachpuff;}
}

.rl.pink:hover {
    background-color: purple;
    cursor: crosshair;
}

.rl.pink:active {
    background: url(images/rl/blue-stripes.png);
    background-size:100%;
}



/* ---------------------------------------- 
    Dahee Choi 
---------------------------------------- */

.dc.example {
    background-color: black;
}

.dc.magenta {
    background-color: black;
}

.dc.yellow {
    background-color: black;
}

.dc.example:hover {
    background-image: url(images/dc/abstract_1.jpg);
    transition-duration: .7s;
    background-repeat: no-repeat;
    background-size: 100%;
}

.dc.magenta:hover {
    background-color: black;
    background-image: url(images/dc/abstract_2.jpg);
    transition-duration: .7s;
    background-repeat: no-repeat;
    background-size: 100%;
}

.dc.yellow:hover {
    background-color: black;
    background-image: url(images/dc/abstract_3.jpg);
    transition-duration: .7s;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: left top;
}

.dc.example:active {
    background-image: url(images/dc/abstract_1_inverse.jpg);
    cursor: pointer;
    transform: rotate(0deg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: left bottom;
}

.dc.magenta:active {
    background-image: url(images/dc/abstract_2_inverse.jpg);
    background-color: #1409c5;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: left bottom;
}

.dc.yellow:active {
    background-image: url(images/dc/abstract_3_inverse.jpg);
    background-color: #6305e2;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: left bottom;
}



/* ---------------------------------------- 
    Celine Kim 
---------------------------------------- */

.ck2 { 
    background: rgb(255,255,255);
    opacity: 1;
 }

.ck2.example div {
    width: 50%;
    height: 100%;
    background-color: white;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    position: center;
    left: 0px;
    top: 0px;
    transform: rotate(0deg);
    border-style: none;
    animation-name: ck2-corner-color-change;
}

@keyframes ck2-corner-color-change {
    0% { background-color: white; }
    25% {  background-color: grey; }
    50% { background-color: black; }
    75% { background-color: grey; }
    100% { background-color: white; }
}
.ck2.example { 
    background-color: white;
}
.ck2.example:hover div { 
    cursor: crosshair;
    width: 50%;
    height: 100%;
    background-color: rgb(254, 18, 1);
    animation-duration: 3s;
    animation-iteration-count: infinite;
    top: 0px;
    transform: rotate(0deg);
    border-style: none;
    animation-name: ck2-red-yellow;
}

@keyframes ck2-red-yellow {
    0% { background-color: rgb(254, 18, 1); }
    25% {  background-color: rgb(254, 102, 1); }
    50% { background-color: rgb(254, 229, 1); }
    75% { background-color: rgb(254, 102, 1) }
    100% { background-color: rgb(254, 18, 1); }
}

.ck2.second {
    background-color: black;
}

.ck2.second:hover{
    box-shadow: 0px 15px 25px -5px;
    transform: translate(0px, -20px);
    cursor: pointer;
}

.ck2.second:active{
    cursor: pointer;
    background: url(images/ck2/diagonal.jpg);
}

.ck2.second div{
    width: 50%;
    height: 100%;
    background-color: black;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    position: center;
    left: 0px;
    top: 0px;
    transform: rotate(0deg);
    border-style: none;
    animation-name: ck2-opposite-middle;
}

@keyframes ck2-opposite-middle {
    0% { background-color: black; }
    25% { background-color: grey ; }
    50% { background-color: white ; }
    75% { background-color: grey; }
    100% { background-color: black; }
}



/* ---------------------------------------- 
    Leah Slava
---------------------------------------- */

.ls.uno {
    background-image: url(images/ls/uno.jpg);
    background-size: 70%;
    background-repeat: no-repeat;
}

.ls.uno { 
    background-position: left bottom; 
    -webkit-animation: ls-animacion 1.5s linear infinite; 
}

@keyframes ls-animacion {
    from { background-position: left 0; }
    to { background-position: left 70%; }
}

.ls.dos {
    background-image: url(images/ls/dos.jpg);
    background-size: 70%;
    background-repeat: no-repeat;
}

.ls.dos {
    position: relative;
    animation-name: ls-dos;
    animation-duration: 3s;
    animation-iteration-count:infinite;
    animation-direction: reverse;    
}

@keyframes ls-dos{
    0%   { left:0px; top:0px;}
    25%  { left:70px; top:0px;}
    50%  { left:70px; top:70px;}
    75%  { left:0px; top:70px;}
    100% { left:0px; top:0px;}
}

.ls.tres {
    background-image: url(images/ls/tres.jpg);
    background-size: 70%;
    background-repeat: no-repeat;
}

.ls.tres{ 
    background-position: left bottom; 
    -webkit-animation: ls-animacion2 1.5s linear infinite; 
}

@keyframes ls-animacion2 {
    from { background-position: left 0; }
    to { background-position: left 70%; }
}

.ls.cuatro {
    background-image: url(images/ls/cuatro.jpg);
    background-size: 70%;
    background-repeat: no-repeat;
}

.ls.cuatro {
    position: relative;
    animation-name: ls-cuatro;
    animation-duration: 2s;
    animation-iteration-count:infinite;
    animation-direction: reverse;    
}

@keyframes ls-cuatro{
    0%   { left:0px; top:0px; }
    25%  { left:70px; top:0px; }
    50%  { left:70px; top:70px; }
    75%  { left:0px; top:70px; }
    100% { left:0px; top:0px; }
}

.ls.seis {
    background-image: url(images/ls/seis.jpg);
    background-size: 70%;
    background-repeat: no-repeat;
}

.ls.seis { 
    background-position: left bottom; 
    -webkit-animation: ls-animacion3 1.5s linear infinite; 
}

@keyframes ls-animacion3 {
    from { background-position: left 0; }
    to { background-position: left 70%; }

}

.ls.ocho {
    background-image: url(images/ls/ocho.jpg);
    background-size: 70%;
    background-repeat: no-repeat;
}

.ls.ocho {
    position: relative;
    animation-name: ls-ocho;
    animation-duration: 2s;
    animation-iteration-count:infinite;
    animation-direction: reverse;    
}

@keyframes ls-ocho{
    0%   { left:0px; top:0px; }
    25%  { left:70px; top:0px; }
    50%  { left:70px; top:70px; }
    75%  { left:0px; top:70px; }
    100% { left:0px; top:0px; }
}

.ls.nueve {
    background-image: url(images/ls/nueve.jpg);
    background-size: 70%;
    background-repeat: no-repeat;
}

.ls.nueve { 
    background-position: left bottom; 
    -webkit-animation: ls-animacion4 2s linear infinite; 
}

@keyframes ls-animacion4 {
    from { background-position: left 0; }
    to { background-position: left 70%; }
}

.ls.dieciseis {
    background-image: url(images/ls/dieciseis.jpg);
    background-size: 70%;
    background-repeat: no-repeat;
}

.ls.dieciseis { 
    background-position: left bottom; 
    -webkit-animation: ls-animacion5 2s linear infinite; 
}

@keyframes ls-animacion5 {
    from { background-position: left 0; }
    to { background-position: left 100%; }
}

.ls.doce {
    background-image: url(images/ls/doce.jpg);
    background-size: 70%;
    background-repeat: no-repeat;
}

.ls.doce {
    position: relative;
    animation-name: ls-doce;
    animation-duration: 2s;
    animation-iteration-count:infinite;
    animation-direction: reverse;    
}

@keyframes ls-doce{
    0%   { left:0px; top:0px;}
    25%  { left:70px; top:0px;}
    50%  { left:70px; top:70px;}
    75%  { left:0px; top:70px;}
    100% { left:0px; top:0px;}
}



/* ---------------------------------------- 
    Delaney Poitras
---------------------------------------- */
.dp.color {
    box-shadow: 15px 15px 30px black;
    position: center;
    background-color: #1a0008;
    width: 95%;
    height: 75%;
    /* ( 100 - width ) / 2 */
    top: 10%;
    left: 10%;
    transform: rotate(60deg);
}
/*_____________________________________*/
.dp.corner {
    box-shadow: 15px 15px 30px black;
    height: 250px;
    width: 250px;
    margin: 0 auto;
    background-color: #330000;
    animation-name: dpstretch;
    animation-duration: .5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes dpstretch {
    0% {
        transform: scale(.1);
        background-color: #330000;
        border-radius: 0%;
    }
    50% {
        background-color: #ffffff;
    }
    100% {
        transform: scale(1);
        background-color: #330000;
    }
} 

/*________________________________________*/
.dp.blank {
    background-color: #ff8080;
    box-shadow: 15px 15px 30px black;
}

.dp.blank {
    background-color: #4d1919;
    transform: rotate(90deg);
    transition: transform 2s;
}

.dp.blank:hover { 
    cursor: crosshair;
    background-color: #130606;
    transform: rotate(360deg);
}

.dp.blank div { 
    box-shadow: 15px 15px 30px black;
    background-color: #732626;
    border-radius: 0%;
    width: 75%;
    height: 100%;
    transform: rotate(90deg);
    margin-top: 0%;
    background-repeat: no-repeat;
    background-position: center;    
}



/* ---------------------------------------- 
    Tony Muchai
---------------------------------------- */

.tm.teal { 
    background: teal;
    border-radius: 30%;
}

.tm.gold {
    background: yellow;
    border: inset 30px yellow;
}