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

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //ios tap box
}

#mm-main {
    position: fixed;
    bottom: 7px;
    right: 40px;
    width: 100px;
    height: 100px;
    cursor: pointer;
    z-index: 1000;

 -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently
                                  not supported by any browser */    
}
#mm-intro {
    display: block;
    width: auto;    
    height: 116px; /* 96 */
    position: fixed;
    bottom: 10px;
    right: 30px;
    z-index: 999;
}
#mm-quote-container {
    height: 155px; /* was 140 */
    display: none;  
    width: 580px;   
    max-width: 100%;
    -webkit-filter: drop-shadow(5px 5px 10px #222);
    filter: drop-shadow(5px 5px 10px #222);  

}
.maximized #mm-quote-container {    
    display: table;    
}
#mm-main.spinOut #mm-quote-container {
    opacity: 0;
}
#mm-quote-container > div {
    display: table-cell;
    vertical-align: bottom;
}
#mm-text {
  white-space: pre-wrap;
    pointer-events: none;  
}

#mm-mm {
    height: 100px;
    float: right;
    clear: right;
    position: relative;
    right: 0px;
    bottom: 0px;
    pointer-events: none;

    -webkit-filter: drop-shadow(5px 5px 6px #222);
    filter: drop-shadow(5px 5px 6px #222);    
}

.maximized #mm-mm {
    top: 55px;
    right: 120px;
}

#mm-main.maximized {
    bottom: 0;
    right: 0;


}

/* INTRO/OUTRO ANIMATIONS */

#mm-main { 
    visibility: hidden;
}

#mm-main.visible {
    visibility: visible;  
}

/* .spinIn and .spinOut are here, all other css animations are in animation.css */

#mm-main.spinIn {
    -webkit-animation-name: spinIn;
    -webkit-animation-duration: 300ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spinIn;
    -moz-animation-duration: 300ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spinIn;
    -ms-animation-duration: 300ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;            
    animation-name: spinIn;
    animation-duration: 300ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

#mm-main.spinOut {
    visibility: visible;
    opacity: 0;
    -webkit-animation-name: spinOut;
    -webkit-animation-duration: 300ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spinOut;
    -moz-animation-duration: 300ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spinOut;
    -ms-animation-duration: 300ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;            
    animation-name: spinOut;
    animation-duration: 300ms;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
}

@-moz-keyframes spinIn {
    from {-moz-transform:rotate(0deg) scale(.4);opacity:0;}
    to {-moz-transform:rotate(360deg) scale(1);opacity:1; }
}
@-webkit-keyframes spinIn {
    from {-webkit-transform:rotate(0deg) scale(.4);opacity:0;}
    to {-webkit-transform:rotate(360deg) scale(1);opacity:1; }
}
@keyframes spinIn {
    from {transform:rotate(0deg) scale(.4);opacity:0;}
    to {transform:rotate(360deg) scale(1);opacity:1; }
}

@-moz-keyframes spinOut {
    from {-moz-transform:rotate(360deg) scale(1);opacity:1; right: 0; }
    to {-moz-transform:rotate(0deg) scale(.4);opacity:0; right: -300px; bottom: -220px; }
}
@-webkit-keyframes spinOut {
    from {-webkit-transform:rotate(360deg) scale(1);opacity:1; right: 0; }
    to {-webkit-transform:rotate(0deg) scale(.4);opacity:0; right: -300px; bottom: -220px; }
}
@keyframes spinOut {
    from {transform:rotate(360deg) scale(1);opacity:1; right: 0; }
    to {transform:rotate(0deg) scale(.4);opacity:0; right: -300px; bottom: -220px; }
}

#mm-intro {
    opacity: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    -webkit-filter: drop-shadow(5px 5px 10px #222);
    filter: drop-shadow(5px 5px 10px #222);      
}

#mm-intro.visible {
    opacity: 1;
    visibility: visible;
}

/* typed.js animated cursor */

.typed-cursor {
    margin-left: 2px;
    position: relative;
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}            


/* ============================================================================================================================
== BLOCKQUOTE WITH OBTUSE TRIANGLE from speech.css :-P
** ============================================================================================================================ */

#mm-text-container {
    position:relative;
    padding:15px 30px;
    margin:0;
    color:#000;
    background:#f3961c; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
    /* Using longhand to avoid inconsistencies between Safari 4 and Chrome 4 */
    -webkit-border-top-left-radius:25px 50px;
    -webkit-border-top-right-radius:25px 50px;
    -webkit-border-bottom-right-radius:25px 50px;
    -webkit-border-bottom-left-radius:25px 50px;
    -moz-border-radius:25px / 50px;
    border-radius:25px / 50px;

    background: linear-gradient(#e6e6e6, #a5a5a5) repeat scroll 0 0 #a5a5a5;
    //text-shadow: 0px 1px 1px #e6e6e6;
    text-shadow: none !important;
    padding: 20px 30px !important;
    width: auto;
    min-width: 320px;
    display:block;
    text-align: left;
    font-family: Times, Times New Roman;
    font-size: 18px;
    line-height: 22px;
    color: #000000 !important;
}

/* display of quote author (alternatively use a class on the element following the blockquote) */
#mm-text-container + p {margin:10px 150px 2em 0; text-align:right; font-style:italic;}

/* creates the larger triangle */
#mm-text-container:before {
  content:"";
  position:absolute;
  bottom:-30px;
  right:80px;
  border-width:0 0 30px 50px;
  border-style:solid;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
  border-color: transparent #a5a5a5;
}

/* creates the smaller triangle */
/*#mm-text-container:after {
  content:"";
  position:absolute;
  bottom:-30px;
  right:110px;
  border-width:0 0 30px 20px;
  border-style:solid;
  border-color:transparent #fff;
  display:block;
  width:0;
}*/

/* COLORS */

#mm-main.mm-purple #mm-text-container {
    background: linear-gradient(#ac34e6, #71149e) repeat scroll 0 0 #71149e;
    text-shadow: 0px 1px 1px #ac34e6;
}
#mm-main.mm-purple #mm-text-container:before {
    border-color: transparent #71149e;
}
#mm-main.mm-pink #mm-text-container {
    background: linear-gradient(#ffd9c8, #bf6854) repeat scroll 0 0 #bf6854;
    text-shadow: 0px 1px 1px #ffd9c8;
}
#mm-main.mm-pink #mm-text-container:before {
    border-color: transparent #bf6854;
}
#mm-main.mm-red #mm-text-container {
    background: linear-gradient(#ff002e, #af0000) repeat scroll 0 0 #af0000;
    text-shadow: 0px 1px 1px #ff002e;
}
#mm-main.mm-red #mm-text-container:before {
    border-color: transparent #af0000;
}
#mm-main.mm-yellow #mm-text-container {
    background: linear-gradient(#ffde00, #bc9700) repeat scroll 0 0 #bc9700;
    text-shadow: 0px 1px 1px #ffde00;
}
#mm-main.mm-yellow #mm-text-container:before {
    border-color: transparent #bc9700;
}
#mm-main.mm-green #mm-text-container {
    background: linear-gradient(#68de3a, #318b0f) repeat scroll 0 0 #318b0f;
    text-shadow: 0px 1px 1px #68de3a;
}
#mm-main.mm-green #mm-text-container:before {
    border-color: transparent #318b0f;
}
#mm-main.mm-blue #mm-text-container {
    background: linear-gradient(#34a7e5, #1371a3) repeat scroll 0 0 #1371a3;
    text-shadow: 0px 1px 1px #34a7e5;
}
#mm-main.mm-blue #mm-text-container:before {
    border-color: transparent #1371a3;
}
#mm-main.mm-brown #mm-text-container {
    background: linear-gradient(#b0784f, #693c1b) repeat scroll 0 0 #693c1b;
    text-shadow: 0px 1px 1px #b0784f;
}
#mm-main.mm-brown #mm-text-container:before {
    border-color: transparent #693c1b;
}
#mm-main.mm-orange #mm-text-container {
    background: linear-gradient(#fa8a34, #a45c23) repeat scroll 0 0 #a45c23;
    text-shadow: 0px 1px 1px #fa8a34;
}
#mm-main.mm-orange #mm-text-container:before {
    border-color: transparent #a45c23;
}

/* INTRO POSITION */
/* maybe nah: 4, 7, 14; */
/* nah: 3, 6, 8, 13; */

.mm-intro-0 {
    right: 24px !important;
}

.mm-intro-1 {
    right: 0px !important;
}

.mm-intro-2 {
    right: 28px !important;
}

.mm-intro-3 {
    right: 6px !important;
}

.mm-intro-4 {
    right: -7px !important;
}

.mm-intro-5 {
    right: 40px !important;
    bottom: 13px !important;
}
.mm-intro-6 {
    bottom: -8px !important;
    right: 2px !important;
}
.mm-intro-7 {
    right: 28px !important;
}
.mm-intro-8 {
    right: -20px !important;
    height: 60px !important;
}
.mm-intro-9 {
    right: -10px !important;
    bottom: 8px !important;
}
#mm-intro.mm-intro-10 {
    right: 5px !important;
    height: 45px !important;
    bottom: 30px !important;
}


/* MOBILE TABLET ETC */

@media screen and (max-width: 580px) {

    body #mm-intro {
        height: 90px;
        margin-right: -30px;
    }

    #mm-main {
        height: 80px;
        width: 80px;
        right: 7px;
    }
    #mm-mm {
        height: 80px;
    }    #mm-quote-container {
        width: 100%;
    }
    #mm-text-container {
        min-width: 100px !important;
        font-size: 14px;
        line-height: 17px;
    }
    #mm-main.maximized {
        width: 94% !important;
        padding: 0 3%;
        right: auto;
        left: 0;
    }
    .maximized #mm-mm {
        height: 90px;        
        left: -100px;
    }
    #mm-intro.mm-intro-10 {
        right: 20px !important;
    }
}


@media screen and (max-height: 320px) {
    #mm-main.maximized {
        width: 94% !important;
        padding: 0 3%;
        right: auto;
        left: 0;
    }
    #mm-quote-container {
        width: 100%;
    }
    #mm-text-container {
        min-width: 100px !important;
        font-size: 14px;
        line-height: 17px;
    }
    .maximized #mm-mm {
        height: 110px;  
        top: 40px;      
    }
}