.header_blue {
            background: #1565c0;
            padding: 80px 0 20px;
            color: #fff;
            font-size: 48px;
            font-weight: 300;
            margin-bottom: 40px;
        }
        .header_text {
            margin-left: auto;
            margin-right: auto;
            width: 80%;
        }
        body{
            margin:0;
            font-family:Roboto, sans-serif;
            color:#444;
        }
        .unlockBtn:hover{
            box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
        }
        .unlockBtn {
            background: #2196f3;
            border: none;
            border-radius: 2px;
            box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
            min-height: 31px;
            min-width: 70px;
            padding: 2px 16px;
            text-align: center;
            text-shadow: none;
            text-transform: uppercase;
            -webkit-transition: all 280ms ease;
            transition: all 280ms ease;
            box-sizing: border-box;
            cursor: pointer;
            -webkit-appearance: none;
            display: inline-block;
            vertical-align: middle;
            font: 500 14px/31px Roboto,sans-serif!important;
            outline: 0!important;
            color:white;
        }
        .content-container{
            width:80%;margin:0 auto;
        }
        @font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'),local(Roboto-Light),url(../fonts/Pru33qjShpZSmG3z6VYwnRJtnKITppOI_IvcXXDNrsc.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'),local(Roboto-Light),url(../fonts/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local(Roboto-Medium),url(../fonts/oOeFwZNlrTefzLYmlVV1UBJtnKITppOI_IvcXXDNrsc.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local(Roboto-Medium),url(../fonts/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}
        body{
  background-image: url("img/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
  background-color:#000000;


}
.center {
margin: auto;
}

.Main1{
width:600px;
height:auto;
padding: 15px;
padding-bottom: 10px;
margin-top: 10px;
background-color: #00000000;
border-radius: 8px;
border-color: #00000000;
border-style: solid;
animation:mymove 1s;

position: relative;

}
#Main1 {animation-timing-function: ease;}
@keyframes mymove {
from {bottom: -50px;opacity:0.5;}
to {bottom: 0px;opacity:1;}
}
input[type=text] {
width:80%;
padding: 5px 6px;
margin-bottom:10px;
margin-right:5px;
margin-left:5px;
box-sizing: border-box;
border: 2px solid #dcdcdc;
border-radius: 4px;
font-size: 22px;
font-family:'Itim';
font-weight: 800;
}

.Platform {
padding:10px;
margin: 0px;
background-color: rgb(186,186,186);
border-radius: 8px;
border-color: rgb(227,227,227);
border-style: solid;
}

.Packket {

padding:10px;
margin: 0px;
height:auto;
background-color: #00000000;
border-radius: 8px;
border-color: #00000000;
border-style: solid;
}
.containerPlat {
position: relative;
padding-left: 105px;
margin: 5px;
cursor: pointer;
font-size: 70px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.containerPlat input {
position: absolute;
opacity: 1;
cursor: pointer;
}

.checkmark {
position: absolute;
top: 0;
left: 0;
height: 74px;
width: 107px;
background-color: #f2f2f2;
border-radius: 6%;
}

h1 {
font-size: x-large;
font-family: 'Itim';
margin-top: 20px;
color: white;
}

button{
padding:10px 30px 10px 30px;
margin:20px;
border-style:solid;
border-width:2px;
border-radius:5px;
border-color:#fff;
background-color: #08a300;
color: white;
font-size:22px;
font-weight:bold;
}







.recentActivity{
text-align:left;
width:600px;
height:auto;
padding: 15px;
padding-bottom: 10px;
margin-top: 10px;
background-color: #000;
border-radius: 8px;
border-color: #ffffff;
border-style: solid;
}
.footer{
text-align:center;
width:600px;
height:auto;
padding: 15px;
padding-bottom: 10px;
margin-top:100px;
}



.recent {
	height:100px;
position: relative;
text-align:center;
margin-bottom: 10px;
padding-top: 10px;
background-color: rgb(186,186,186);
border-radius: 8px;
border-color: rgb(227,227,227);
border-style: solid;
height: 100px;

}
div.step {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
bottom: 10px;
left: 10px;
border-radius: 50px;
z-index: 2;
border-style: solid;
border-width: 4px;
border-color: #e8e8e8;
}

div.step2 {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
bottom: 10px;
right: 10px;
border-radius: 50px;
z-index: 2;
border-style: solid;
border-width: 4px;
border-color: #e8e8e8;
}

div.step3 {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
bottom: 10px;
right: 50%;
border-radius: 50px;
z-index: 2;
border-style: solid;
border-width: 4px;
border-color: #e8e8e8;
}
div.recentprobar {
position: absolute;
height: 6px;
bottom: 20px;
left: 10px;
border-radius: 0px;
z-index: 1;
}

div.recentprobarbg {
position: absolute;
height: 3px;
bottom: 22px;
left: 20px;
border-radius: 0px;
z-index: 0;
width: 91%;
background-color: rgb(210,210,210);
}

.SelectCard{
	cursor:pointer;
	
}
.SelectCard:hover{-webkit-animation:slide-top .5s cubic-bezier(.25,.46,.45,.94) both;animation:slide-top .5s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes slide-top{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}}@keyframes slide-top{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}}
.Probackground {
margin-right: 20px;
width: 96%;
height: 30px;
background-color: rgb(220,220,220);
left: 2%;
border: solid;
border-width: 2px;
border-color: rgb(255,255,255);
position: relative;
}
.Progressbar {
width: 0%;
height: 28px;
background-color: #000;
position: absolute;
border-radius: 0px;
width: 96%;
border: solid;
border-width: 0.5px;
border-color: #fff;
}

.percent {
color: white;
left: 40px;
position: absolute;
font-family: 'Itim';
font-size: 20px;
z-index: 2;

}

h1 {
font-size: x-large;
font-family: 'Itim';
margin-top: 20px;
color: white;
}

h2 {
font-size: x-large;
font-family: 'Itim';
margin-top: 20px;
color: green;
}

p {
font-size: large;
font-family: 'Itim';
margin-top: 10px;
color: orange;
}


.recenttext {
font-size: x-large;
font-family: 'Itim';
text-align:center;
color:white;
}
.Lastcode{
  margin-top: 10px;
  font-size: x-large;
  font-family: 'Itim';
  text-align:center;
  color: #0d529f;
  background-color: #fff;
  border-radius: 5px;
  width: 96%;
  border: solid;
  border-width: 2px;
  border-color: #fff;
}

@media only screen and (max-width:800px) {
/* For tablets: */
body{
	background-color:#00000000;
}
.Main1{
width:90%;
height:auto;
padding: 10px;
padding-bottom: 10px;
margin-top: 10px;
background-color: #00000000;
border-radius: 8px;
border-color: #00000000;
border-style: solid;
}
.recentActivity{
text-align:left;
width:90%;
height:auto;
padding: 10px;
padding-bottom: 10px;
margin-top: 10px;
background-color: #000;
border-radius: 8px;
border-color: #ffffff;
border-style: solid;
}
.footer{
margin-top:100px;
text-align:left;
width:90%;
text-align:center;
height:auto;
padding: 15px;
padding-bottom: 10px;

;

}
}
@media only screen and (max-width:500px) {
/* For mobile phones: */

}

a:link {
color: #038cec;
background-color: transparent;
text-decoration: none;
}
.loader {
margin-bottom:20px;
border: 16px solid #000;
border-radius: 50%;
border-top: 16px solid white;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.hideform {
display: none;
}