@font-face{
  font-family:"DejaVUSerif";
  src: url('./font/dejavuserif-webfont.ttf') format("truetype"),
       url('./font/dejavuserif-webfont.woff') format("woff"),
       url('./font/dejavuserif-webfont.eot'),
       url('./font/dejavuserif-webfont.eot?#iefix') format("embeded-opentype");
}
*{
   box-sizing:border-box;
}
html{
  
  border:2px solid white;
  min-height:100%;
  padding:5px;
    
}

body{

   display:flex;
   flex-direction:column;

   margin:0px; 
   background-color:#193f41 ; /*#1b2527;*/ /* #393f4d */
   min-height:100%;   
}

/*twitting.html*/

.xButtonCont{
   text-align:right;
   margin: 50px 50px 10px 0px;
}
.twitt{
 
   margin: 4%;
}
.twittText{
   
   border: 2px solid white;
   min-height: 2.6em;
   border-radius: 5px;
   height:100%;
   width:100%;
   padding:6px;
   min-height:400px;
   font-size:2.5em;
   font-family:'Chalky';
   resize:vertical;
   background-color:#193f41;
   color:white;
}

.twtButton{
   width:85px;
   height:45px;
   border-radius:5px;
   display: inline-block;
   color:white;
   text-align:center;
   font-family:Helvetica;
   font-size:1.4em;
   font-weight: bold;
   line-height: 1.9em;
   
}
.img{

   display: inline-block;
}

/*  index.html */

.user {
   align-self: end;
   background-color:#1da1f2; /* twitter blue*/
   text-align: center;
   padding:8px 10px 10px 10px;
   margin-right: 10%;
   margin-top: 5%;
   font-size:1.2em;
   color:white;
   line-height:1em;
   border-radius:2px;
   font-family:Helvetica;
   font-weight: bold;
}

.warning {
   background-color: #ffad00a3;
   margin: 20% 60% 0 0;
   width: auto;
}

.showQuote{
    font-size:3em;
    padding:0px 5px;
}
.showAuthor{
   font-size:2.2em;
}
.quoteCont{  /* container for quote text, and author text  */
   display:inline-block;
   width:80%;
   margin-left:10%;
   margin-top:5%;
   text-align:center;
   color: white;
   font-family: "Chalky";
}

.owletCont{ /* container for owlet .svg image and "wings" */
   display:inline-block;
   position:relative; /* hook for positininig elements inside*/
   right:-15%; /* moving it slitely to the right from normal position in page flow*/
   top:20px;
   
}
.quoteClick{ /* stretching this element to fill 100% of parent element */
  position:absolute;
  z-index:1;
  width:100%;
  height:100%;
 
  &, :hover {
   cursor: pointer;
  }
}
   
.xButton {
    width:55px;
    height:55px;
    border-radius:5px;
    display: inline-block;
    background: url('../images/X_logo_and_marks.svg') 0px -42px/106px 150px no-repeat;
    
    &, :hover {
      cursor: pointer;
   }
}
.boxShadow{  
    box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);

    transition: box-shadow 0.3s ; 
}
.logoOnClick{
    border:2px solid #193f41;
    width: 53px;
    height:53px;
    box-shadow: 0 1px 10px 1px rgba(255, 255, 255, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19);
    background:url('../images/X_logo_and_marks.svg') -2px -43px/103px 145px no-repeat;
}
.btnOnClick{
    border:1px solid #193f41;
    width: 84px;
    height:44px;
    box-shadow: 0 1px 10px 1px rgba(255, 255, 255, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19);
}

.quoteClickRadiate ~ .quoteSign{ /* for assigning with javascript */
    transition-delay:0s;
    text-shadow: 0px 2px 25px white;   
}
.quoteSign{
  display:inline-block;
  font-family: "DejaVu","DejaVUSerif", serif;
  font-size:6.3em;
  text-shadow:0px 2px 10px white;
  -webkit-transition: text-shadow 1s ; /* notice we are defining transition here insted in quoteClick, 
                                          since quoteClick is just the trigger for the transition     */
  transition:text-shadow 1s ; 
}

.left { /* left quote sign, that is left wing */
   position:absolute;
   top:30px;
   left:-15px;
   line-height:2em; 

   -ms-transform-origin:top;
   -webkit-transform-origin:top;
   transform-origin: top;

   -ms-transform:skewY(35deg);
   -webkit-transform:skewY(35deg);
   transform: rotateY(-1deg) skewY(35deg); /* setting rotateY to -1deg just to solve animation bug.
                                              otherwise not needed */ 
}
.lwAnimation {

   animation: leftWingFlap 8s 0s 1 cubic-bezier(.61,-0.3,.71,.71) forwards, 
                 tuckWing 0.7s 7.5s 1 cubic-bezier(.61,-0.3,.71,.71) forwards,
                   wingRadiate 1.7s 8.1s 1 cubic-bezier(.61,-0.3,.71,.71) forwards;

   -webkit-animation: leftWingFlap 8s 0s 1 cubic-bezier(.61,-0.3,.71,.71) forwards, 
                       tuckWing 0.7s 7.5s 1 cubic-bezier(.61,-0.3,.71,.71) forwards,  
                        wingRadiate 1.7s 8.1s 1 cubic-bezier(.61,-0.3,.71,.71) forwards;

   -moz-animation: leftWingFlap 8s 0s 1 cubic-bezier(.61,-0.3,.71,.71) forwards, 
                    tuckWing 0.7s 7.5s 1 cubic-bezier(.61,-0.3,.71,.71) forwards,
                     wingRadiate 1.7s 8.1s 1 cubic-bezier(.61,-0.3,.71,.71) forwards;
   
   -o-animation: leftWingFlap 8s 0s 1 cubic-bezier(.61,-0.3,.71,.71) forwards, 
                  tuckWing 0.7s 7.5s 1 cubic-bezier(.61,-0.3,.71,.71) forwards,
                   wingRadiate 1.7s 8.1s 1 cubic-bezier(.61,-0.3,.71,.71) forwards;
}




@keyframes leftWingFlap{
     10%{ /* wing up*/
      transform:skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg); 
      left:-33px;
   }
   15%{
      transform: skewY(35deg); /* wing down */
   }
   20%{
      transform:skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg);
      left:-32px;
   }
   25%{
      transform: skewY(35deg); 
   }
   33%{
      transform:skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg);
      left:-32px;
   }
   93%{
      transform: skewY(35deg);
   }
   96%{
       
      transform: skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg) ;
      left:-32px;
   }
   
}
@-webkit-keyframes leftWingFlap{
     10%{ /* wing up*/
      transform:skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg); 
      left:-34px;
   }
   15%{
      transform: skewY(35deg); /* wing down */
   }
   20%{
      transform:skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg);
      left:-32px;
   }
   25%{
      transform: skewY(35deg); 
   }
   33%{
      transform:skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg);
      left:-32px;
   }
   93%{
      transform: skewY(35deg);
   }
   96%{
       
      transform: skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg) ;
      left:-32px;
   }
   
}
@-moz-keyframes leftWingFlap{
     10%{ /* wing up*/
      transform:skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg); 
      left:-32px;
   }
   15%{
      transform: skewY(35deg); /* wing down */
   }
   20%{
      transform:skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg);
      left:-32px;
   }
   25%{
      transform: skewY(35deg); 
   }
   33%{
      transform:skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg);
      left:-32px;
   }
   93%{
      transform: skewY(35deg);
   }
   96%{
       
      transform: skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg) ;
      left:-32px;
   }
   
}
@-o-keyframes leftWingFlap{
     10%{ /* wing up*/
      transform:skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg); 
      left:-32px;
   }
   15%{
      transform: skewY(35deg); /* wing down */
   }
   20%{
      transform:skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg);
      left:-32px;
   }
   25%{
      transform: skewY(35deg); 
   }
   33%{
      transform:skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg);
      left:-32px;
   }
   93%{
      transform: skewY(35deg);
   }
   96%{
       
      transform: skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg) ;
      left:-32px;
   }
   
}


.right {
   position:absolute;
   top:30px;
   right:-17px;
   line-height:2em;

   -ms-transform-origin:top;
   -webkit-transform-origin:top;
    transform-origin: top;

   -ms-transform:rotateY(-180deg) skewY(35deg); 
   -webkit-transform:rotateY(-180deg) skewY(35deg); 
   transform:rotateY(-180deg) skewY(35deg); /* oposite position then that of a left wing */
}
.rwAnimation {   
   animation: rightWingFlap 8s 0s 1 cubic-bezier(.61,-0.3,.71,.71) forwards, 
               tuckWing 0.9s 7.5s 1 cubic-bezier(.61,-0.3,.71,.71) forwards,
                wingRadiate 1.7s 8.1s 1 cubic-bezier(.61,-0.3,.71,.71) forwards;
   
   -webkit-animation: rightWingFlap 8s 0s 1 cubic-bezier(.61,-0.3,.71,.71) forwards, 
                       tuckWing 0.9s 7.5s 1 cubic-bezier(.61,-0.3,.71,.71) forwards,
                        wingRadiate 1.7s 8.1s 1 cubic-bezier(.61,-0.3,.71,.71) forwards;
    
  
   -moz-animation: rightWingFlapMoz 8s 0s 1 cubic-bezier(.61,-0.3,.71,.71) forwards, 
                    tuckWing 0.9s 7.5s 1 cubic-bezier(.61,-0.3,.71,.71) forwards,
                     wingRadiate 1.7s 8.1s 1 cubic-bezier(.61,-0.3,.71,.71) forwards;
   
   -o-animation: rightWingFlap 8s 0s 1 cubic-bezier(.61,-0.3,.71,.71) forwards, 
                  tuckWing 0.9s 7.5s 1 cubic-bezier(.61,-0.3,.71,.71) forwards,
                   wingRadiate 1.7s 8.1s 1 cubic-bezier(.61,-0.3,.71,.71) forwards;
}

@keyframes rightWingFlap{
   10%{   /* wing up */
      transform: rotateY(-180deg) skewY(20deg) skewX(40deg) translateY(10px) rotateX(110deg) rotateZ(10deg) ;
      right:-30px;
   }
   15%{
   
      transform:rotateY(-180deg) skewY(35deg);  /* wing down */ 
   }
   20%{
  
      transform: rotateY(-180deg) skewY(20deg) skewX(40deg) translateY(10px) rotateX(110deg) rotateZ(10deg) ;
      right:-30px;
   }
   25%{

      transform:rotateY(-180deg) skewY(35deg); 
   }
   33%{
     
      transform: rotateY(-180deg) skewY(20deg) skewX(40deg) translateY(10px) rotateX(110deg) rotateZ(10deg) ;
      right:-30px;
   }
   93%{
      transform:rotateY(-180deg) skewY(35deg);
   }
   96%{
       
      transform: rotateY(-180deg) skewY(20deg) skewX(40deg) translateY(10px) rotateX( 110deg) rotateZ(10deg) ;
      right:-30px;
   }
}  

@-webkit-keyframes rightWingFlap{
     10%{   /* wing up */
      transform: rotateY(-180deg) skewY(20deg) skewX(40deg) translateY(10px) rotateX(110deg) rotateZ(10deg) ;
      right:-32px;
   }
   15%{
   
      transform:rotateY(-180deg) skewY(35deg);  /* wing down */ 
   }
   20%{
  
      transform: rotateY(-180deg) skewY(20deg) skewX(40deg) translateY(10px) rotateX(110deg) rotateZ(10deg) ;
      right:-30px;
   }
   25%{

      transform:rotateY(-180deg) skewY(35deg); 
   }
   33%{
     
      transform: rotateY(-180deg) skewY(20deg) skewX(40deg) translateY(10px) rotateX(110deg) rotateZ(10deg) ;
      right:-30px;
   }
   93%{
      transform:rotateY(-180deg) skewY(35deg);
   }
   96%{
       
      transform: rotateY(-180deg) skewY(20deg) skewX(40deg) translateY(10px) rotateX(110deg) rotateZ(10deg) ;
      right:-30px;
   }
}

@-moz-keyframes rightWingFlapMoz{ 
     10%{   /* wing up */
      transform: rotateY(-180deg) skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg) ;
      right:-30px;
   }
   15%{
   
      transform:rotateY(-180deg) skewY(35deg);  /* wing down */ 
   }
   20%{
  
      transform: rotateY(-180deg) skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg) ;
      right:-30px;
   }
   25%{

      transform:rotateY(-180deg) skewY(35deg); 
   }
   33%{
     
      transform: rotateY(-180deg) skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg) ;
      right:-30px;
   }
   93%{
      transform:rotateY(-180deg) skewY(35deg);
   }
   96%{
       
      transform: rotateY(-180deg) skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg) ;
      right:-30px;
   }
}

@-o-keyframes rightWingFlap{
     10%{   /* wing up */
      transform: rotateY(-180deg) skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg) ;
      right:-30px;
   }
   15%{
   
      transform:rotateY(-180deg) skewY(35deg);  /* wing down */ 
   }
   20%{
  
      transform: rotateY(-180deg) skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg) ;
      right:-30px;
   }
   25%{

      transform:rotateY(-180deg) skewY(35deg); 
   }
   33%{
     
      transform: rotateY(-180deg) skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg) ;
      right:-30px;
   }
   93%{
      transform:rotateY(-180deg) skewY(35deg);
   }
   96%{
       
      transform: rotateY(-180deg) skewY(20deg) skewX(40deg) translateY(10px) rotateX(-110deg) rotateZ(10deg) ;
      right:-30px;
   }
}

@keyframes tuckWing{ 
   100%{
     line-height:1.3em;
   }
}
@-webkit-keyframes tuckWing{ 
   100%{
     line-height:1.3em;
   }
}
@-moz-keyframes tuckWing{ 
   100%{
     line-height:1.3em;
   }
}
@-o-keyframes tuckWing{ 
   100%{
     line-height:1.3em;
   }
}



@keyframes pageGlide{
  0%{
     transform: translate(-40px,150px) scale(0.7);
  }
}
@-webkit-keyframes pageGlide{
  0%{
     transform: translate(-40px,150px) scale(0.7);
  }
}
@-moz-keyframes pageGlide{
  0%{
     transform: translate(-40px,150px) scale(0.7);
  }
}
@-o-keyframes pageGlide{
  0%{
     transform: translate(-40px,150px) scale(0.7);
  }
}

@keyframes wingRadiate{
   
     25%{
        text-shadow: 0px 2px 25px white;
     }
     50%{
        text-shadow: 0px 0px 10px white;
     }
     75%{
         text-shadow: 0px 2px 25px white;
    }   
    
}

@-webkit-keyframes wingRadiate{
   
     25%{
        text-shadow: 0px 2px 25px white;
     }
     50%{
        text-shadow: 0px 0px 10px white;
     }
     75%{
         text-shadow: 0px 2px 25px white;
    }   
    
}
@-moz-keyframes wingRadiate{
   
     25%{
        text-shadow: 0px 2px 25px white;
     }
     50%{
        text-shadow: 0px 0px 10px white;
     }
     75%{
         text-shadow: 0px 2px 25px white;
    }   
    
}
@-o-keyframes wingRadiate{
   
     25%{
        text-shadow: 0px 2px 25px white;
     }
     50%{
        text-shadow: 0px 0px 10px white;
     }
     75%{
        text-shadow: 0px 2px 25px white;
    }   
    
}
.owletCont{
   -webkit-animation: pageGlide 8.1s cubic-bezier(.61,-0.3,.71,.71); 
   -moz-animation: pageGlide 8.1s cubic-bezier(.61,-0.3,.71,.71); 
   -o-animation: pageGlide 8.1s cubic-bezier(.61,-0.3,.71,.71); 
   animation: pageGlide 8.1s cubic-bezier(.61,-0.3,.71,.71); 
}
.owletContRedir{
   display:inline-block;
   position:relative; /* hook for positininig elements inside*/
   right:-15%; /* moving it slitely to the right from normal position in page flow*/
   top:20px;

}
.wingsRedir{          /* both wing css for twitter redirection urls*/
   line-height:1.3em;
}


.tweetEpilog{
  display: inline-block;
  height: 55px;
}

.tweetOk{
   animation: tweetOk 1.6s cubic-bezier(.61,-0.3,.71,.71) 0s 2 alternate forwards; 
}

@keyframes tweetOk{
   10%{
      opacity:0; 
      width:30px;
      height:30px; 
      background: url('../images/X_logo_and_marks.svg') -22px -17px/42px 60px no-repeat;
    
   } 
   25%, 100%{
       width:60px; 
       height:60px;
       box-shadow:none; 
       opacity:1;
       background: url('../images/X_logo_and_marks.svg') -57px -39px/106px 150px no-repeat;
       background-color: #eee; 
   }
   
}
@-moz-keyframes tweetOk{
   10%{
      opacity:0; 
      width:30px;
      height:30px; 
      background: url('../images/X_logo_and_marks.svg') -22px -17px/42px 60px no-repeat;
    
   } 
   25%, 100%{
       width:60px; 
       height:60px;
       box-shadow:none; 
       opacity:1;
       background: url('../images/X_logo_and_marks.svg') -57px -39px/106px 150px no-repeat;
       background-color: #eee; 
   }
   
}
@-o-keyframes tweetOk{
   10%{
      opacity:0; 
      width:30px;
      height:30px; 
      background: url('../images/X_logo_and_marks.svg') -22px -17px/42px 60px no-repeat;
    
   } 
   25%, 100%{
       width:60px; 
       height:60px;
       box-shadow:none; 
       opacity:1;
       background: url('../images/X_logo_and_marks.svg') -57px -39px/106px 150px no-repeat;
       background-color: #eee; 
   }
   
}
@-webkit-keyframes tweetOk{
   10%{
      opacity:0; 
      width:30px;
      height:30px; 
      background: url('../images/X_logo_and_marks.svg') -22px -17px/42px 60px no-repeat;
    
   } 
   25%, 100%{
       width:60px; 
       height:60px;
       box-shadow:none; 
       opacity:1;
       background: url('../images/X_logo_and_marks.svg') -57px -39px/106px 150px no-repeat;
       background-color: #eee; 
   }
   
}
.tweetFailed{
   animation: tweetFailed 1.6s cubic-bezier(.61,-0.3,.71,.71) 0s 2 alternate forwards; 
}

@keyframes tweetFailed{
  10%{
      opacity:0; 
      width:30px;
      height:30px; 
      background: url('../images/X_logo_and_marks.svg') -12px -41px/42px 60px no-repeat;
    
    
   } 
   25%, 100%{
       width:60px; 
       height:60px;
       box-shadow:none; 
       opacity:1;
       background: url('../images/X_logo_and_marks.svg') -27px -98px/106px 150px no-repeat;
       background-color: #eee; 
   }

}

@-moz-keyframes tweetFailed{
  10%{
      opacity:0; 
      width:30px;
      height:30px; 
      background: url('../images/X_logo_and_marks.svg') -12px -41px/42px 60px no-repeat;
    
    
   } 
   25%, 100%{
       width:60px; 
       height:60px;
       box-shadow:none; 
       opacity:1;
       background: url('../images/X_logo_and_marks.svg') -27px -98px/106px 150px no-repeat;
       background-color: #eee; 
   }

}

@-o-keyframes tweetFailed{
  10%{
      opacity:0; 
      width:30px;
      height:30px; 
      background: url('../images/X_logo_and_marks.svg') -12px -41px/42px 60px no-repeat;
    
    
   } 
   25%, 100%{
       width:60px; 
       height:60px;
       box-shadow:none; 
       opacity:1;
       background: url('../images/X_logo_and_marks.svg') -27px -98px/106px 150px no-repeat;
       background-color: #eee; 
   }

}
@-webkit-keyframes tweetFailed{
  10%{
      opacity:0; 
      width:30px;
      height:30px; 
      background: url('../images/X_logo_and_marks.svg') -12px -41px/42px 60px no-repeat;
    
    
   } 
   25%, 100%{
       width:60px; 
       height:60px;
       box-shadow:none; 
       opacity:1;
       background: url('../images/X_logo_and_marks.svg') -27px -98px/106px 150px no-repeat;
       background-color: #eee; 
   }

}
@media (max-width:569px){
   
   .quoteCont{
     margin-left:7.5%;
     width:85%;
   }  

   .owletCont{
    transform: scale(0.9);
   }
    
   .owletContRedir{
     transform: scale(0.9);
   }

   .showQuote{ /* 20% smaller font size */ 
      font-size: 2.4em;
   }
   .showAuthor{
      font-size:1.8em;
   }
   
}

@media screen and (min-width:1024px) and (min-height:768px){
   .user{
      margin-top:3%;
   }
   .quoteCont{
      margin-top:10%;    
   }
}