@charset "utf-8";

/* CSS Document */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
    font-weight: 400;
}
a{
        text-decoration: none;
}

body {
    background: rgba(0, 0, 0, 0.7);
    margin: 0 !important;
    /*background: url('../images/bg.jpg') no-repeat;
    background-size: cover;*/
     cursor: url(../images/hand_pointer.png), none;
   
}

#main {
 
    display: block;
    width: 100%;
    max-width: 450px;
    padding: 0;
    margin: 0 auto;
}


.txtloading{
        font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
    position: relative;
    top: 70px;
    color: #015B90;
    font-weight: 600;
    text-align: center;
}

.facts{
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
    position: absolute;
    top: 600px;
    display: block;
    width: 100%;
    z-index: 100;
    max-width: 450px;
    background: #89BB43;
    color: #131313;
    font-weight: bold;
    text-shadow: 1px 1px rgba(224, 224, 224, 0.55);
    padding: 10px;

}

#canvas{
   display: none;
}

.pez_bg{
    
    width: 100%;
    max-width: 450px;
}

.pez_header{
    background : white;
         padding: 2px 4px 0px 4px;
}
.pez_header img{
   width: 80%;
}

.pez_logos{
    position: relative;
    float: right;
    top: 21px;
}

pre {
    background: black;
    text-align: left;
    padding: 20px;
    margin: 0 auto 30px auto;
}

div#preloaderHolder {
    position: absolute;
    top: 320px;
    padding: 50px;
    margin-right: auto;
    margin-left: auto;
    width: 450px;
}

img.pez_bg {
       width: 100%;
    /* height: 100%; */
    position: absolute;
    top: 0;

}

#mycursor {
 	cursor: none;
 	width: 97px;
 	height: 137px;
 	background: url("../images/hand_pointer.png)") no-repeat left top;
 	position: absolute;
 	display: none;
 	top: 0;
 	left: 0;
 	z-index: 10000;
}


/* -------------- P R E L O A D E R     A N I M A T I O N -----------------*/

.meter {
    height: 40px;
    /* Can be anything */
    position: relative;
    margin: 75px 10px 20px 12px;
    /* Just for demo spacing */
    background: rgba(100, 111, 71, 0.73);
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 2px;
    -webkit-box-shadow: inset 0 -1px 1px rgb(52, 101, 16);
    -moz-box-shadow: inset 0 -1px 1px rgb(52, 101, 16);
    box-shadow: inset 0 -1px 1px rgb(52, 101, 16);
}

.meter > span {
    display: block;
    height: 100%;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 19px;
    border-bottom-right-radius: 19px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: rgb(43, 194, 83);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43, 194, 83)), color-stop(1, rgb(84, 240, 84)));
    background-image: -moz-linear-gradient( center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
    -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.meter > span:after,
.animate > span > span {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
    background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    z-index: 1;
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    -webkit-animation: move 2s linear infinite;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
}

.animate > span:after {
    display: none;
}

@-webkit-keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

.orange > span {
    background-color: #f1a165;
    background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
    background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
}

.red > span {
    background-color: #f0a3a3;
    background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
    background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}

.nostripes > span > span,
.nostripes > span:after {
    -webkit-animation: none;
    background-image: none;
}




@media only screen and (min-width:300px) and (max-width: 558px) {
    #main {
        width: 100%;
        height: 100%;
    }
    
    .facts{

        top: 420px
    }
    div#preloaderHolder {
        top: 220px;
        margin-right: auto;
        margin-left: auto;
        width: 100%;
        padding: 25px;
    }
    
    img.pez_bg {
        width: 100%;
        height: auto;

        top: 0;
    }
    .meter {
        margin: 75px 10px 20px 3%;
    }
}

@media only screen and (min-width: 374px) and (max-width: 667px) {
   div#preloaderHolder {

        top: 172px;
    }
    .facts{

        top: 367px
    }
}


@media only screen and (min-width: 300px) and (max-width: 320px) {
   div#preloaderHolder {

        top: 110px;
    }
    .facts{

        top: 307px
    }
}




/*
@media only screen and (min-width:600px) and (max-width: 620px) {
    #main{
        width:450px;
    } 
}
*/

@media screen and (min-device-width: 768px) and (max-device-width: 1025px) {
    #main {
        max-width: 600px;
    }
}