.picture {
    color: rgb(0,124,195);
}

.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}

.contrast {-webkit-filter: contrast(160%); filter: contrast(160%);}
.container{
}

h2{
    color: rgb(111,68,138);
}

body
{
	user-select:none;
	font-family: cursive;
    background-image: url(../resources/BG.jpg);
    background-repeat: no-repeat;
    background-position: ;
    background-attachment: fixed;
    /* -webkit-background-size: cover; */
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100vw 100vh;
    /* background-position: center; */
    overflow: hidden;
}
#coverPage{
	position: fixed;
	bottom:0;
}


.nopadding
{
	padding: 0px!important;
}
.para
{
	height:37vh; 
	color:black;
	text-align:center;
	font-size:2.5vw; 
	font-weight:bold;
	padding:6% !important;
	background-position:center;
	background-repeat:no-repeat;
	background-size:100% 100%;
}
#buckets
{
	
}
#showQuestion
{
	font-size:3vw;
}
#score
{
	font-size:3vw;
	color:#4d0000;
}
.score
{
	font-size:3vw;
}
#messageDiv
{
 height:15vh;
 color: rgb(111,68,138);
 font-size:3vw;
}
#playAgainDiv
{
	position:fixed;
	bottom:0;
}

#dvSource, #dvDest
{
    position: relative;
    min-height: 100px;
}

.scoreCard{
    display: block;
	font-size:3vw;
}

h1, label{
    text-align: center;
    color: rgb(111,68,138);
}

.heading h2{
    color: rgb(111,68,138);
}

button{
    margin:0 auto;
    color: white;
    background-color: rgb(0,124,195);
    transition: background-color 1s;
}


button:hover{
    background-color: rgb(111,68,138);

}


@-webkit-keyframes thumb {
	0% { -webkit-transform: scale(1); }
	50% { -webkit-transform: scale(0.9); }
	100% { -webkit-transform: scale(1); }
}

.shake
{
	-webkit-animation-name: thumb;
	-webkit-animation-duration: 200ms;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: 2;
	-webkit-animation-timing-function: linear;
}

.moveBtn {
	position :relative;
	animation: mymove .9s;
    -webkit-animation: mymove .9s;
    -moz-animation: buttonShake .9s;
    -ms-animation: buttonShake .9s;
    -o-animation: buttonShake .9s;
	
}


@-webkit-keyframes mymove {
    0%   {top: 0px; left : 0px;}
    100% { top: 500px; left : -700px; width: 50px; height: 50px; opacity: 0.2;}
}


@keyframes mymove {
    0%   {top: 0px; left : 0px;}
    100% { top: 500px; left : -500px; width: 50px; height: 50px; opacity: 0.2;}
}


@-ms-keyframes mymove {
     0%   {top: 0px; left : 0px;}
    100% { top: 500px; left : -500px; width: 50px; height: 50px; opacity: 0.2;}
}


@-moz-keyframes mymove {
     0%   {top: 0px; left : 0px;}
    100% { top: 500px; left : -500px; width: 50px; height: 50px; opacity: 0.2;}
}


@-o-keyframes mymove {
     0%   {top: 0px; left : 0px;}
    100% { top: 500px; left : -500px; width: 50px; height: 50px; opacity: 0.2;}
} 

.moveBtnMiddle {
	position :relative;
	animation: mymove2 .9s;
    -webkit-animation: mymove2 .9s;
    -moz-animation: buttonShake .9s;
    -ms-animation: buttonShake .9s;
    -o-animation: buttonShake .9s;
	
}


@-webkit-keyframes mymove2 {
    0%   {top: 0px; left : 0px;}
    50%  {top: 250px; width: 75px;}
    100% {top: 700px; width: 50px; opacity: 0.2;}
}


@keyframes mymove2 {
    0%   {top: 0px; left : 0px;}
	50%  {top: 250px; width: 75px;}
    100% {top: 700px; bottom: -200px; width: 50px; height: 50px; opacity: 0.2;}
}


@-ms-keyframes mymove2 {
    0%   {top: 0px; left : 0px;}
    50%  {top: 250px; width: 75px;}
    100% {top: 700px; width: 50px; height: 50px; opacity: 0.2;}
}


@-moz-keyframes mymove2 {
    0%   {top: 0px; left : 0px;}
    50%  {top: 250px; width: 75px;}
    100% {top: 700px; width: 50px; height: 50px; opacity: 0.2;}
}


@-o-keyframes mymove2 {
    0%   {top: 0px; left : 0px;}
    50%  {top: 250px; width: 75px;}
    100% {top: 700px; width: 50px; height: 50px; opacity: 0.2;}
}



.moveBtnLast {
	position :relative;
	animation: mymove1 .9s;
    -webkit-animation: mymove1 .9s;
    -moz-animation: buttonShake .9s;
    -ms-animation: buttonShake .9s;
    -o-animation: buttonShake .9s;
	
}


@-webkit-keyframes mymove1 {
    0%   {top: 0px; left : 0px;}
    100% {top: 500px; left : 700px; width: 50px;height: 50px; opacity: 0.2;}
}


@keyframes mymove1 {
    0%   {top: 0px; left : 0px;}
    100% {top: 500px; left : 600px; width: 50px; height: 50px; opacity: 0.2;}
}


@-ms-keyframes mymove1 {
    0%   {top: 0px; left : 0px;}
    100% {top: 500px; left : 600px; width: 50px; height: 50px; opacity: 0.2;}
}





.trash{transition:opacity 200ms;
    width:128px;
    height:128px;opacity:0.8;
    position:relative;
    right:0;
    top:3px;
    vertical-align:middle;
    cursor:pointer;
    margin:50px auto 10px
}  
 .trash > .lid{
    transform-origin:19% 100%;
    transition:transform 150ms;
    height:28px;
    width:128px;
    -webkit-transform-origin:-7% 100%}  
 .trash > .can{
    background-position:0 -30px!important;
    width:128px;
    height:97px;margin:30px 0 0;
    padding:0!important
}  
 .trash > .can,.trash > .lid{
    background:url("../resources/RecycleBin.png") 0 0 no-repeat;
    position:absolute;
    right:8px;
    top:2px;
    -webkit-transform:rotate(0deg);
    -webkit-transition:-webkit-transform 250ms
}  
 .trash > .can:hover{
    border:none!important;
    box-shadow:none!important
}  
 .trash > span{
    display:inline-block
}  
.trash:hover > .lid{
    transform:rotate(-45deg);
    transition:transform 250ms;
    -webkit-transform:rotate(-45deg);
    -webkit-transition:-webkit-transform 250ms
}  

.bucketPicture label{
    position: fixed;
    margin-top: -84px;
    margin-left: -33px;
    color: white;
}

@media only screen  and (min-device-width :768px) and (max-device-width:820px){
 #showQuestion{
        font-size:28px;
        color:black;
}
.bucketPicture label{
        font-size:25px;
        position: fixed;
        margin-top: -175px;
        margin-left: -67px;
        text-align: center;
        color: black;
        width: 135px;
}
#score{
   color:#4d0000; 
}

.para
{
	height:32vh; 
	color:black;
	text-align:center;
	font-size:2.5vw; 
	font-weight:bold;
	padding:5% !important;
	background-position:center;
	background-repeat:no-repeat;
	background-size:100% 100%;
}
}

@media screen and (min-device-width: 1025px) {
    #dvSource, #dvDest{
        padding-left: 0px;
    }
    .bucketPicture label 
    {
        position: fixed;
        margin-top: -165px;
        margin-left: -68px;
        color: black;
        font-size:28px;
        text-align: center;
        width: 135px;
    }
    #showQuestion{
        color:black;
    }
    #score{
        margin-left: 15px;
         color:#4d0000; 
    }

}
@media screen  and (min-device-width :1200px) and (max-device-width :1500px) {
.para
{
	height:40vh;
	color:black;
	text-align:center;
	font-size:2.3vw;
	font-weight:bold;
	padding:7% !important;
	background-position:center;
	background-repeat:no-repeat;
	background-size:100% 100%;
}
#endPageMsg
{
	text-align:center;
	font-size: 5vw;
	font-weight:bold;
}	
}
@media screen  and (min-device-width :1900px){
.para
{
	height:34vh;
	color:black;
	text-align:center;
	font-size:2.5vw;
	font-weight:bold;
	padding:6% !important;
	background-position:center;
	background-repeat:no-repeat;
	background-size:100% 100%;
}
#endPageMsg
{
	text-align:center;
	font-size: 5vw;
	font-weight:bold;
}
}