
*, *:after, *:before{box-sizing:border-box;}


.popup h2 {
font-family: Tahoma, Arial, sans-serif;
background: maroon;
color: white;
text-align: center;
padding-top: 3%;
padding-bottom: 3%;
margin: 0;
font-family: cursive;
}
.popup .close {
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: white;
float: right;
}
.popup .close:hover {
color: #06D85F;
cursor:pointer;
}
.popup .content {
text-align: center;
color: navy;
font-weight: bold;
font-family: arial;
font-size: 18px;
line-height: 2em;
padding: 2%;
}

.overlay .popup {
background: aliceblue;
border-radius: 14px;
width: 21em;
height: 450px;
position: fixed;
top: 0;
left: 40%;
margin: 70px 0px 0px 0px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
z-index: 10;
padding-bottom: 20px;
text-align: center;
}

/*Let's make it appear when the page loads*/
.overlay:target:before {
display: none;
}


.overlay:target .popup {
display:none;
}
.catchieWords{
color: navy;
font-size: 25px;
font-weight:bold;
font-family: cursive;
}
.catchieWords:hover{ color:red;}
.popupVideo{width: 98%;height: 200px;}
iframe{ width:100%;height:16em;}
.register{display:block;width:100%;line-height:2.188em;}
.zoom{
padding: 0% 31%;
}
.playstoreImg{width:100%;}
.register{border-radius:6px;padding:0.188em 0.938em;margin-bottom: 0em;animation-delay:1.10s;color:white;font-weight:bold;animation: pound 3s infinite;font-family: cursive;padding-top: 3%;}
@keyframes pound{from{transform:none;}
50%{transform:scale(1.3);}
to{transform:none;}
}
@media screen and (max-width: 768px){
.overlay .popup{
width: 86%;
left: 7%;
}
.catchieWords{
font-size: 20px;
}

.tabs {
display: table;
table-layout: fixed;
width: 92%;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}

form input {
    padding: 12px;
    background: #fff;
    text-align: center;
    font-size: 14px;
    border-radius: 20px;
    width: 224px;
}

}

<!--login and download page sarts-->
body {font-family: Arial, Helvetica, sans-serif;}


.button {
display: inline-block;
padding: 15px 25px;
font-size: 17px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #c18307;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}

.button {width: 60%;}

.button:hover {background-color: #3e8e41}

.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}

body {
background: #FFF;
margin: 0;
padding: 0;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;font-weight: light;
font-weight: 100;
}

.closes {
  display: inline-block;
    color: #0264b3;
    float: right;
    font-size: 28px;
    border-radius: 0px 13px 0px 0px;
    padding: 2px 5px;
    /* background: #ccc; */
    font-weight: bold;
}

.closes:hover,
.closes:focus {
display:inline-block;
color: #000;
text-decoration: none;
padding:2px 5px;
background:#ccc;
color:#060;
cursor: pointer;
}

.logginFormFooter {
text-align: center;
color: #777;
width: 100%;
font-size: 12px;
position: fixed;
bottom: 10px;
}

.logginFormFooter a {color: #777; font-weight: 600;}
.logginFormFooter a:hover {color: #AAA;}

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

label {
display: block;
font-size: 12px;
color: blue;
}

.tabs {
display: table;
table-layout: fixed;
width: 100%;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}

.tabs > li {
transition-duration: .25s;
display: table-cell;
list-style: none;
text-align: center;
padding: 5px 20px 12px 20px;
position: relative;
overflow: hidden;
cursor: pointer;

background-color: none;

}
.tabs > li:before {
z-index: -1;
position: absolute;
content: "";
width: 100%;
height: 120%;
color: #FFF;
top: 0;
left: 0;
background-color: #0264b3;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition-duration: .25s;
}

.tabs > li:hover:before {
-webkit-transform: translateY(70%);
transform: translateY(70%);
}
.tabs > li.active {
color: #FFF;
}
.tabs > li.active:before {
transition-duration: .5s;
background-color:#0264b3;
-webkit-transform: translateY(0);
transform: translateY(0);
}

.tab__content {
position: relative;
width: 100%;

}
.tab__content > li {
width: 100%;
position: absolute;
border-radius: 5px;
color: #FFF;
top: 0;
left: 0;
display: none;
list-style: none;
}
.tab__content > li .content__wrapper {
text-align: center;
border-radius: 3px;
padding-top: 24px;
}

form input {
padding: 12px;
background: #fff;
text-align: center;
font-size: 14px;
border-radius: 20px;
width: 260px;
border: 1px solid #0264b3;
font-weight: 300;
}

form input:first-child {margin-top: 8px;}
form input:last-child { margin-bottom: 0px;}

form input:focus {background-color: #FFF;}
form input:hover {background-color: #FFF;}
form input:placeholder {color: blue;}

form [type="submit"]:focus,
form [type="submit"]:hover {background: #009CEF;}

form [type="submit"] {
background: #0264b3;
color: #FFF;
margin-top: 20px;
border-radius: 20px;
margin-top: 20px;
width: 260px;
cursor: pointer;
}

.buttons {
background-color: #4CAF50;border: none;color: white;padding: 15px 32px;text-align: center;border-radius: 12px;text-decoration: none;display: inline-block; font-size: 22px;margin: 4px 2px;cursor: pointer;
}
.buttons{
border-radius: 12px;
}
<!--login and download page ends-->




