/******************LOGO ANIMATION STUFF*****************/

div#samplespeaker {
 margin:0px 0% 0px 0%;
width:100%;
height: 250px;
position: relative;
text-align:center;
/*overflow:hidden;*/
line-height:1;
opacity:.2;
}

.speakerlogo {
height:250px;
width:250px;
color:lime;
font-size:250px;
}

#speakerhold {
height:250px;
width:100%;
line-height:1;
display:inline-block;
text-align:center;
}

.logoflip, .logoflipmargin, .logomargin,.logmarginrev, .logomarginleft, .logoclock, .logoclockmargin,  .logoanima, .logoanimaY, .logospingrow {
-webkit-animation-duration:1.4s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-direction:alternate;

-moz-animation-duration:1.4s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-moz-animation-direction:alternate;

animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}

.logoclock {
-webkit-animation-name:logoclock;
-moz-animation-name:logoclock;
animation-name: logoclock;
}

.logoclockmargin {
-webkit-animation-name:logoclockmargin;
-moz-animation-name:logoclockmargin;
animation-name: logoclockmargin;
}

.logoflip {
-webkit-animation-name:logoflip;
-moz-animation-name:logoflip;
animation-name: logoflip;
}

.logoflipmargin {
-webkit-animation-name:logoflipmargin;
-moz-animation-name:logoflipmargin;
animation-name: logoflipmargin;
}
.logomargin {
-webkit-animation-name:logomargin;
-moz-animation-name:logomargin;
animation-name: logomargin;
}

.logomarginrev {
-webkit-animation-name:logomarginrev;
-moz-animation-name:logomarginrev;
animation-name: logomarginrev;
}

.logoanimaY {
-webkit-animation-name:logoanimaY;
-moz-animation-name:logoanimaY;
animation-name: logoanimaY;
}

.logoanima {
-webkit-animation-name:logoanima;
-moz-animation-name:logoanima;
animation-name: logoanima;
}

.logospingrow {
-webkit-animation-name:logospingrow;
-moz-animation-name:logospingrow;
animation-name: logospingrow;
}


.logoholdclock {
-webkit-animation-name:logoholdclock;
-moz-animation-name:logoholdclock;
animation-name: logoholdclock;

-webkit-animation-duration:1.4s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-direction:alternate;


-moz-animation-duration:1.4s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-moz-animation-direction:alternate;


animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;

}


@-webkit-keyframes logoanima {
0%  {-webkit-transform:rotate(0deg);margin-left:0%;font-size:250px;margin-top:0px;}
30% {margin-left:40%;font-size:125px;margin-top:30px;}
70%{margin-left:-40%;font-size:200px;}
100% {-webkit-transform:rotate(390deg);margin-left:40%;font-size:125px;margin-top:0px;}
}
@-moz-keyframes logoanima {
0%  {-moz-transform:rotate(0deg);margin-left:0%;font-size:250px;margin-top:0px;}
30% {margin-left:40%;font-size:125px;margin-top:30px;}
70%{margin-left:-40%;font-size:200px;}
100% {-moz-transform:rotate(390deg);margin-left:40%;font-size:125px;margin-top:0px;}
}

@keyframes logoanima {
0% {transform: rotate(0deg);margin-left:0%;font-size:250px;margin-top:0px;}
30% {margin-left:40%;font-size:125px;margin-top:30px;}
70%{margin-left:-40%;font-size:200px;}
100% {transform: rotate(390deg);margin-left:40%;font-size:125px;margin-top:0px;}
 }


@-webkit-keyframes logoanimaY {
0% {-webkit-transform:rotateY(0deg);margin-left:20%;font-size:250px;margin-top:0px;}
30% {margin-left:40%;font-size:125px;margin-top:30px;}
70%{margin-left:-40%;font-size:230px;}
100% {-webkit-transform:rotateY(390deg);margin-left:20%;font-size:125px;margin-top:0px;}
}
@-moz-keyframes logoanimaY {
0% {-moz-transform:rotateY(0deg);margin-left:20%;font-size:250px;margin-top:0px;}
30% {margin-left:40%;font-size:125px;margin-top:30px;}
70%{margin-left:-40%;font-size:230px;}
100% {-moz-transform:rotateY(390deg);margin-left:20%;font-size:125px;margin-top:0px;}
 }

@keyframes logoanimaY {
0% {transform:rotateY(0deg);margin-left:20%;font-size:250px;margin-top:0px; }
30% {margin-left:40%;font-size:125px;margin-top:30px;}
70%{margin-left:-40%;font-size:230px;}
100% {transform:rotateY(390deg);margin-left:20%;font-size:125px;margin-top:0px;}
 }



/**/
@-webkit-keyframes logoclock {
0%  {-webkit-transform:rotate(0deg);}
100% {-webkit-transform:rotate(420deg);}
}
@-moz-keyframes logoclock {
0%  {-moz-transform:rotate(0deg);}
100% {-moz-transform:rotate(420deg);}
}

@keyframes logoclock {
0%  {transform:rotate(0deg);}
100% {transform:rotate(420deg);}
}

/**/
@-webkit-keyframes logospingrow {
0%  {-webkit-transform:rotate(0deg);font-size:55vh;font-size:250px;}
100% {-webkit-transform:rotate(420deg);font-size:85vh;font-size:350px;}
}
@-moz-keyframes logospingrow {
0%  {-moz-transform:rotate(0deg);font-size:55vh;font-size:250px;}
100% {-moz-transform:rotate(420deg);font-size:85vh;font-size:350px;}
}

@keyframes logospingrow {
0%  {transform:rotate(0deg);font-size:55vh;font-size:250px;}
100% {transform:rotate(420deg);font-size:85vh;font-size:350px;}
}


/**/
@-webkit-keyframes logoclockmargin {
0%  {-webkit-transform:rotate(0deg);margin-left:-40%;}
30%{margin-left:20%;}
70%{margin-left:-10%;}
100% {-webkit-transform:rotate(420deg);margin-left:40%;}
}
@-moz-keyframes logoclockmargin {
0%  {-moz-transform:rotate(0deg);margin-left:-40%;}
30%{margin-left:20%;}
70%{margin-left:-10%;}
100% {-moz-transform:rotate(420deg);margin-left:40%;}
}

@keyframes logoclockmargin {
0%  {transform:rotate(0deg);margin-left:-40%;}
30%{margin-left:20%;}
70%{margin-left:-10%;}
100% {transform:rotate(420deg);margin-left:40%;}
}


/**/
@-webkit-keyframes logoflip {
0%  {-webkit-transform:rotateY(0deg);}
100% {-webkit-transform:rotateY(420deg);}
}
@-moz-keyframes logoflip {
0%  {-moz-transform:rotateY(0deg);}
100% {-moz-transform:rotateY(420deg);}
}

@keyframes logoflip {
0%  {transform:rotateY(0deg);}
100% {transform:rotateY(420deg);}
}

/**/
@-webkit-keyframes logoflipmargin {
0%  {-webkit-transform:rotateY(0deg);margin-left:-40%;}
30%{margin-left:20%;}
70%{margin-left:-10%;}
100% {-webkit-transform:rotateY(420deg);margin-left:40%;}
}
@-moz-keyframes logoflipmargin {
0%  {-moz-transform:rotateY(0deg);margin-left:-40%;}
30%{margin-left:20%;}
70%{margin-left:-10%;}
100% {-moz-transform:rotateY(420deg);margin-left:40%;}
}

@keyframes logoflipmargin {
0%  {transform:rotateY(0deg);margin-left:-40%;}
30%{margin-left:20%;}
70%{margin-left:-10%;}
100% {transform:rotateY(420deg);margin-left:40%;}
}



@-webkit-keyframes logomargin {
0%  {margin-left:-40%;}
30%{margin-left:20%;}
70%{margin-left:-10%;}
100% {margin-left:30%;}
}
@-moz-keyframes logomargin {
0%  {margin-left:-40%;}
30%{margin-left:20%;}
70%{margin-left:-10%;}
100% {margin-left:30%;}
}

@keyframes logomargin {
0%  {margin-left:-40%;}
30%{margin-left:20%;}
70%{margin-left:-10%;}
100% {margin-left:30%;}
}


@-webkit-keyframes logomarginrev {
0%  {margin-left:30%;}
30%{margin-left:-20%;}
70%{margin-left:10%;}
100% {margin-left:-40%;}
}
@-moz-keyframes logomarginrev {
0%  {margin-left:30%;}
30%{margin-left:-20%;}
70%{margin-left:10%;}
100% {margin-left:-40%;}
}

@keyframes logomarginrev {
0%  {margin-left:30%;}
30%{margin-left:-20%;}
70%{margin-left:10%;}
100% {margin-left:-40%;}
}







/*use this to flip and rotate */
@-webkit-keyframes logoholdclock {
0%  {-webkit-transform:rotate(0deg);width:250px;}
100% {-webkit-transform:rotate(420deg);width:250px;}
}
@-moz-keyframes logoholdclock {
0%  {-moz-transform:rotate(0deg);width:250px;}
100% {-moz-transform:rotate(420deg);width:250px;}
}

@keyframes logoholdclock {
0%  {transform:rotate(0deg);width:250px;}
100% {transform:rotate(420deg);width:250px;}
}