@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
html,body{
    margin:0;
    padding:0;
    font-family: 'Open Sans', sans-serif;
}
.tablet {
    width: 100%;
    /*height: auto;*/
}
html,body{
    text-rendering:geometricPrecision;
}
.mobile-li .dropdown-menu {
    right: 0;
    margin-top: 0px;
}
.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
#logIn{
        padding:0 !important;
}
#logIn .modal-dialog{
    width:100%;
    height:100%;
    margin:0;
    overflow:hidden;
}
.modal-body{
    width:100%;
    height:100vh;
    background-color:#e0eafc;
}
#logIn .close{
    font-size:72px;
    opacity:0.8;
    margin-right:2vw;
}
.center-img{
    text-align:center;
}
#logIn .close:hover{
    opacity:0.3;
}
#logIn img{
    margin-top:10vh;
    width:20%;
    margin-left:5em;
    min-width:250px;
}
#logIn form{
    width:30%;
    margin:0 auto;
    margin-top:6vh;
}
#logIn form input{
    margin-bottom:5vh;
}
.register-button {
    display:inline-block;
}
.modal-dialog{
        width:1400px;
        /*min-width:1100px;*/
        height:800px;
    }
p{
    font-weight:bold;
}
#pay{
   float: right;
   max-width:200px;
   max-height:150px;
   margin-top:-78px;
   margin-left:80px;  
}
ul.social-icons {
    position: absolute;
    float: left;
    list-style-type: none;
    display: inline;
    margin-top: 23px;
}
ul.social-icons li {
    display: inline;
    margin-right: 15px;
}
ul.social-icons img {
    width: 40px;
}

@media screen and (max-width:767px){
    #logIn form{
    width:80%;
    margin:0 auto;
    margin-top:6vh;
    }
    .desktop-nav{
        display:none;
    }
    .hide-tablet{
        display:none;
    }
    .hide-mobile{
        display:none;
    }
    .mobile-nav{
        height:100px;
        width:100%;
        padding-top:15px;
        box-shadow:0px 1px 5px #1b1b1b;
        padding-left:20px;
        padding-right:20px;
        position:fixed;
        z-index:10;
        background: white;
    }
    .logo{
        display:inline-block;
        width:40%;
     }
    .logo-img{
        width:135px;
       
    }
    .hamburger-menu {
        display:inline-block
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin: auto;
        width:80px;
        height:60px;
        cursor:pointer;
        float:right;
    }
    .bar,
    .bar:after,
    .bar:before{
        width:80px;
        height:8px;
    }
    .bar{
        position:relative;
        transform:translateY(25px);
        background:#1b1b1b;
        transition: all 0ms 300ms;
        border-radius: 25px;
    }
    .bar.animate{
        background: rgba(255,255,255,0);
    }
    .bar:before{
        content:"";
        position: absolute;
        left:0;
        bottom:20px;
        background:#1b1b1b;
        transition:bottom 300ms 300ms cubic-bezier(0.23,1,0.32,1),transform 300ms cubic-bezier(0.23,1,0.32,1);
        border-radius: 25px;
    }
    .bar:after{
        content:"";   
        position:absolute;
        left:0;
        top:20px;
        background:#1b1b1b;
        transition:top 300ms 300ms cubic-bezier(0.23,1,0.32,1), transform 300ms cubic-bezier(0.23,1,0.32,1);
        border-radius: 25px;
    }
    .bar.animate:after{
        top:0;
        transform:rotate(45deg);
        transition:top 300ms cubic-bezier(0.23,1,0.32,1) transform 300ms 300ms cubic-bezier(0.23,1,0.32,1);
    }
    .bar.animate:before{
        bottom:0;
        transform:rotate(-45deg);
        transition: bottom 300ms cubic-bezier(0.23,1,0.32,1), transform 300ms 300ms cubic-bezier(0.23,1,0.32,1);
    }
    .nav-inactive{
        width:60vw;
        height:100vh;
        right:0;
        background-color:white;
        position:fixed;
        z-index:10;
        margin-top:100px;
        margin-right:-60vw;
        transition:0.3s all ease-in-out;
    }
    .nav-active {
        width:60vw;
        right:0;
        margin-right:0;
        height:100vh;
        position:fixed;
        z-index:10;
        margin-top:100px;
        background-color:white;
        transition:0.3s all ease-in-out;
    }
    .mobile-ul {
        padding-left:0;
    }
    .mobile-li{
        list-style-type:none;
        margin-top:1em;
        text-align:right;
        padding-right:20px;
     }
    .mobile-li a{
        font-size:18px;
        height:100%;
        font-weight:700;
        color:#1b1b1b;
    }

    .call{
        position:fixed;
        z-index:10;
        margin-top:100px;
        padding:10px;
        text-align:center;
        color:white;
        display:block;
        background:#9ac96c;
        width:100%;
    }
    footer{
        /*height:60px;*/
        /*background-color:rgba(0,0,0,0.8);*/
    }

    #pay{
        margin-top:20px;
    }
}

@media screen and (min-width:768px) and (max-width:1024px) {
    #videoButton {
        margin-left:200px;
    }
}
@media screen and (min-width:1024px) and (max-width:1055px) {
    #videoButton {
        margin-left:360px;
    }
}
@media screen and (min-width:1056px) and (max-width:1400px) {
    #videoButton {
        margin-left:460px;
    }
}

@media screen and (min-width:768px) and (max-width:1400px) {
    #logIn form {
        width: 60%;
        margin: 0 auto;
        margin-top: 6vh;
    }

    .hide-tablet {
        display: none;
    }

    .desktop-nav {
        display: none;
    }

    .mobile-nav {
        height: 150px;
        width: 100%;
        padding-top: 15px;
        box-shadow: 0px 1px 5px #1b1b1b;
        padding-left: 20px;
        padding-right: 20px;
        position: fixed;
        z-index: 10;
        background: white;
    }

    .logo {
        display: inline-block;
        width: 60%;
    }

    .logo-img {
        width: 220px;
    }

    .hamburger-menu {
        display: inline-block position:absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100px;
        height: 80px;
        cursor: pointer;
        float: right;
        margin-top: 10px;
        margin-right: 20px;
    }

    .bar, .bar:after, .bar:before {
        width: 100px;
        height: 10px;
    }

    .bar {
        position: relative;
        transform: translateY(25px);
        background: #1b1b1b;
        transition: all 0ms 300ms;
        border-radius: 25px;
    }

    .bar.animate {
        background: rgba(225,225,225,0);
    }

    .bar:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 20px;
        background: #1b1b1b;
        transition: bottom 300ms 300ms cubic-bezier(0.23,1,0.32,1),transform 300ms cubic-bezier(0.23,1,0.32,1);
        border-radius: 25px;
    }

    .bar:after {
        content: "";
        position: absolute;
        left: 0;
        top: 20px;
        background: #1b1b1b;
        transition: top 300ms 300ms cubic-bezier(0.23,1,0.32,1), transform 300ms cubic-bezier(0.23,1,0.32,1);
        border-radius: 25px;
    }

    .bar.animate:after {
        top: 0;
        transform: rotate(45deg);
        transition: top 300ms cubic-bezier(0.23,1,0.32,1) transform 300ms 300ms cubic-bezier(0.23,1,0.32,1);
    }

    .bar.animate:before {
        bottom: 0;
        transform: rotate(-45deg);
        transition: bottom 300ms cubic-bezier(0.23,1,0.32,1), transform 300ms 300ms cubic-bezier(0.23,1,0.32,1);
    }

    .nav-inactive {
        width: 60vw;
        height: 100vh;
        right: 0;
        background-color: white;
        position: fixed;
        z-index: 10;
        margin-top: 100px;
        margin-right: -60vw;
        transition: 0.3s all ease-in-out;
    }

    .nav-active {
        width: 60vw;
        right: 0;
        margin-right: 0;
        height: 100vh;
        position: fixed;
        z-index: 10;
        margin-top: 100px;
        background-color: white;
        transition: 0.3s all ease-in-out;
    }

    .mobile-ul {
        padding-top: 2em;
        padding-left: 0;
    }

    .mobile-li {
        list-style-type: none;
        margin-top: 3em;
        text-align: right;
        padding-right: 20px;
    }

    .mobile-li a {
        font-size: 42px;
        height: 100%;
        font-weight: 700;
        color: #1b1b1b;
    }

    .call {
        display: none;
    }

    footer {
        /*height:60px;
        background-color:rgba(0,0,0,0.8);*/
    }

    #pay{
        margin-top:30px;
        margin-right:20px;
        width:200px;
        height:100px;
        margin-right:20px;
    }
    .desktop-nav{
        transition:0.3s all ease-in-out;
        height:100px;
        width:100%;
        background-color:white;
        padding-top:5px;       
        padding-left:3%;
        padding-right:1%;
        box-shadow:0px 1px 5px #1b1b1b;
        position:fixed;
        z-index:10;
        background-color: #FFFFFF; opacity: 0.8; filter: alpha(opacity=50);
        /*background-color: transparent;
        opacity:1;*/
    }
    .desktop-nav-down{
        height:75px;
    }
    .desktop-ul{
        transition:0.3s all ease-in-out;
        padding-top:15px;
        display:inline-block;
        float:right;
        padding-right:200px;
    }
    .desktop-ul-down{
        padding-top:0px;
    }
    .desktop-li{
        display:inline-block;
        margin-left:10px;
    }
    .desktop-li a{
        padding:10px;
        font-size:15px;
        color:#1b1b1b;
        font-weight: bold;
    }
  #videoButton {
        float: right;
    }
}

@media screen and (min-width:1401px) {
    .desktop-nav{
        transition:0.3s all ease-in-out;
        height:100px;
        width:100%;
        background-color:white;
        padding-top:5px;       
        padding-left:3%;
        padding-right:1%;
        box-shadow:0px 1px 5px #1b1b1b;
        position:fixed;
        z-index:10;
        background-color: #FFFFFF; opacity: 0.8; filter: alpha(opacity=50);
        /*background-color: transparent;
        opacity:1;*/
    }
    .desktop-nav-down{
        height:75px;
    }
    .desktop-ul{
        transition:0.3s all ease-in-out;
        padding-top:15px;
        display:inline-block;
        float:right;
        padding-right:210px;
    }
    .desktop-ul-down{
        padding-top:0px;
    }
    .desktop-li{
        display:inline-block;
        margin-left:10px;
    }
    .desktop-li a{
        padding:10px;
        font-size:18px;
        color:#1b1b1b;
        font-weight: bold;
    }
    .desktop-li a:hover{
        color:gray;
        text-decoration:none;
        transition:0.3s all ease-in-out;
    }
    .number{
        line-height:5px;
        float:right;
        font-weight:700;
    }
    .number1 {
        line-height:10px;
        float:right;
        font-weight:700;
    }
    .mobile-nav{
        display:none;
        height:150px;
        width:100%;
        padding-top:15px;
        box-shadow:0px 1px 5px #1b1b1b;
        padding-left:20px;
        padding-right:20px;
        position:fixed;
        z-index:10;
        background: white;
    }
    .logo{
        display:inline-block;
        background-color:white; 
    }
    .logo-img{
        width:170px;
        /*transition:0.3s all ease-in-out;*/
        padding-top:3px;
    }
    .logo-img-down{
        width:125px;
    }
    .nav-inactive{
        display:none;
    }
    .call{
        display:none;
    }
    footer{
        /*height:60px;*/
        background-color:rgba(0,0,0,0.8);
    }
}
@media screen and (min-width:320px) and (max-width:320px) {
     #videoButton{
        margin-left:50px;
    }
     #pay{
         width:150px;
         height:75px;
         margin-right:10px;
     }
}
@media screen and (min-width:375px) and (max-width:375px) {
     #videoButton{
        margin-left:80px;
    }
     #pay{
         width:150px;
         height:75px;
         margin-right:10px;
     }
}
@media screen and (min-width:412px) and (max-width:414px) {
     #videoButton{
        margin-left:100px;
    }
      #pay{
         width:150px;
         height:75px;
         margin-right:10px;
     }
}
@media screen and (min-width:360px) and (max-width:360px) {
     #videoButton{
        margin-left:70px;
    }
     #pay{
         width:150px;
         height:75px;
         margin-right:10px;
     }
}
#d_register{
	
    width: 30%;
    margin-left: 35%;

}