@font-face {
font-family: "Lato-Bold";
src: url("../fonts/Lato-Bold.woff2") format("woff2"),
    url("../fonts/Lato-Bold.woff") format("woff"),
    url("../fonts/Lato-Bold.ttf") format("ttf");
font-weight: normal!important; font-style: normal!important;
}


html, body{width: 100%; margin: 0px; padding: 0px; text-align: left; font-size: 14px;background: #000000; font-family: 'Lato', sans-serif;}
body{height:100%; position: absolute; z-index: 0; color: #ffffff;overflow-x: hidden!important; overflow: scroll; background:#000000;}
* {-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing: border-box;-moz-box-sizing:border-box; box-sizing:border-box; margin:0px;padding:0px;-webkit-tap-highlight-color: rgba(0,0,0,0);}
*:focus {outline: none;}
img{border:0px !important; outline:none !important;}
a[href^="tel"]{color:inherit;text-decoration:none;}
.Color_Y{color:#ffd77c}

#Main{display: flex; justify-content: center; align-items: center; flex-direction: column;width: 100%; min-height: 100%; position: relative; margin: 0px auto;}
#MainLogo{display: flex; width: 100%; max-width: 400px;position: relative; margin: 0px auto;}
p{display: flex; width: 100%; max-width: 400px;position: relative; margin: 0px auto; text-align: center; justify-content: center; font-size: 20px}
.Cta{display: flex; width:80%; max-width: 400px; height: 80px; position: relative; margin: 20px auto; justify-content: center; font-size: 20px;transition: all .2s ease-in-out;
background: #db1a2f; align-items: center; color: #ffffff; text-decoration: none; font-size: 40px; font-family: "Lato-Bold"; border-radius: 100px;}
.Cta:hover{background: #ffffff;color: #db1a2f; transform: scale(1.1);}


#BarCont{width:100%; height:auto; margin: 20px auto; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column;
/* -webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
border-top: solid 1px #252322;border-bottom: solid 1px #252322; */

background: #000000;
}

@media only screen and (min-width:320px) and (max-width:600px){
  #MainLogo{max-width: 320px;}
  p{max-width: 320px;font-size: 15px}
  .Cta{max-width: 320px; height: 60px; font-size: 30px;}
}











.MoveBounce {
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-name: bounce-1;
    animation-timing-function: linear;
}
@keyframes bounce-1 {
    0% {transform: translateY(0);}
    50% {transform: translateY(25px);}
    100% {transform: translateY(0);}
}






/* BAR LOADING */
.bar {
    /**
     * The loading bar is centered both vertically and horizontally using
     * top: 50%; and left: 50%; and then pulling it back using negative margins.
     */
    position: relative;
    /* top: 50%;
    left: 50%; */
    height: 10px;
    width: 200px;
    /* margin-top: -10px; */
    /* margin-left: -100px;  */
    /* border-radius: 20px; */
    border-radius: 20px;
    background-image: -webkit-linear-gradient(-45deg, #ffb100 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #ffb100 50%, #ffb100 75%, rgba(255, 154, 26, 0) 75%);
    background-image: -moz-linear-gradient(-45deg, #ffb100 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #ffb100 50%, #ffb100 75%, rgba(255, 154, 26, 0) 75%);
    background-image: -o-linear-gradient(-45deg, #ffb100 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #ffb100 50%, #ffb100 75%, rgba(255, 154, 26, 0) 75%);
    background-image: linear-gradient(-45deg, #ffb100 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #ffb100 50%, #ffb100 75%, rgba(255, 154, 26, 0) 75%);
    background-color: #d3d3d3;
    background-size: 50px 50px;
    border: 1px solid #ffb100;
    border-bottom-color: #e68100;
    -webkit-box-shadow: inset 0 10px 0 rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 10px 0 rgba(255, 255, 255, 0.2);
    -webkit-animation: move 2s linear infinite;
    -moz-animation: move 2s linear infinite;
    -ms-animation: move 2s linear infinite;
    animation: move 2s linear infinite;
}

/**
 * The ::before element creates the darker box around the loading bar itself.
 */

.bar::before {
    content: " ";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(0, 0, 0, 0.1);
    z-index: -1;
}

/**
 * Animate the stripes.
 */

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

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

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

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