/* cairo-regular - latin */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/cairo-v6-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Cairo'), local('Cairo-Regular'),
         url('../fonts/cairo-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/cairo-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/cairo-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/cairo-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/cairo-v6-latin-regular.svg#Cairo') format('svg'); /* Legacy iOS */
  }
body {
    /* margin: 0;
    padding: 0;
    font-family: 'cairo'; */
    /* background: url("../Image/background.png"); */
    /* background-attachment: fixed; */
    /* background-size: cover; */
    background-position: center center;
    /* background-repeat: no-repeat; */
}

.heropic{
}
/* .logoheder{
    float: right;
    margin-right: 90px;
    margin-top: 10px;
    margin-top: 90px;
    margin-left:auto;
    margin-right:auto;
    display: block;
} */

.logoheder img {
  display:block;
  margin-left:auto;
  margin-right:auto;
}
.box{
    width: 380px;
    /* padding: 0px 40px 40px 40px; */
    display:block;
    margin-left:auto;
    margin-right:auto;
    /*padding: 40px;*/
    /* float: right;
    margin-right: 190px;
    margin-top: -25px; */
    /*margin-top: 60px;*/
    /* transform: translate(110%,40%); */
    text-align: center;
}
.box h1{
    color: #062635;
    font-weight: 200px;
    font-size: 42px;
}
.box p{
    color: #062635;
    font-weight: 80px;
    font-size: 30px;
    line-height: 2px;
    display:block;
    margin-left:auto;
    margin-right:auto;
}
.box input[type="text"], .box input[Type="password"]{

    border: 0;
    background: none;
    display: inline-block;
    text-align: right;
    border: 2px solid #BCB4B4;
    margin: 30px 2px 2px 2px;
    padding: 15px 15px;
    font-family: 'cairo';
    border-radius: 5px ;
    width: 360px;
    outline: none;
    color: #BCB4B4;
    transition: 0.25s;
    float: right;

}
.box input[type="text"]:focus, .box input[Type="password"]:focus{
    width: 380px;
    border-color: #368fb0;
    margin: 20px 5px 2px 2px;

}


.box button[type="submit"]{

    border: 0;
    background: #307f9c;
    /* display: block; */
    text-align: center;
    padding: 10px 10px;
    font-family: 'cairo';
    border-radius: 5px ;
    width: 170px;
    margin-top:50px;
    outline: none;
    color: #ffffff;
    transition: 0.25s;
    cursor: pointer;
    /* float: right; */
    /* margin-left:auto;
    margin-right:auto; */
    font-size:18px;
    font-weight: 100px;

}
.box button[type="submit"]:hover{
    background:  #368fb0;
}



.box input[type="submit"]{

    border: 0;
    background: rgb(1, 190, 77);
    display: block;
    text-align: center;
    padding: 10px 10px;
    font-family: 'cairo';
    border-radius: 5px ;
    width: 170px;
    margin-top:50px;
    outline: none;
    color: #ffffff;
    transition: 0.25s;
    cursor: pointer;
    /* float: right; */
    /* margin-left:auto;
    margin-right:auto; */
    font-size:18px;
    font-weight: 100px;

}
.box input[type="submit"]:hover{
    background: #4fa9c9;
}

.footer-container{
    z-index: -999999999999;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
}
.footer-container img {
    margin-top: 2px;
}
.footer-container p{
    color: #BCB4B4;
    margin-top: 0;
    font-size:15px;
}
/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {

 }

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {

 }

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {

  }

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

 }