body { margin: 0; font-family: 'Chelsea Market', cursive }

.container { width:1170px; margin:auto }
.clearfix { clear:both }
.overlay { background:rgba(300, 200, 100, 0.3); width: 100%; height: 100% }
.text-center { text-align: center }
.required {color: red ; font-size: 17px}

/* start header */
.header .slider { background-image:url('../images/money-finance.jpg'); background-size: cover; height: 675px }
.header .slider .intro { padding-top: 200px; text-align: center }
.header .slider .intro h1 { margin:0 auto; width: 700px; padding: 5px 0; font-size: 72px; color:#fff }
.header .slider .intro p { margin: 5px 0 40px; line-height: 1.9; font-size: 24px; color: #fff}

.header .btn button {
    background-color: transparent; 
    padding: 10px 0; 
    width: 180px; 
    font-size: 22px;
    font-family: 'Chelsea Market';
    font-weight: 500;
    color: #eee;
    margin-bottom: 50px; 
    border: 3px solid #ccc; 
    border-radius: 10px
}

.header .btn button:hover {
    background-color: #fff; 
    color:rgba(128, 128, 128); 
    border: 3px solid #eee; 
    cursor: pointer;
    -webkit-transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out
}

.header .arrow { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; padding: 40px 0 }
.header .arrow i { font-size: 50px; padding-top: 2px; font-weight: 400; border: 3px solid #D3D3D3; color: #fff; border-radius: 50%; height: 45px; width: 45px; line-height: 45px; cursor: pointer }

.header .arrow i:hover {
    background-color: #fff;
    border: 3px solid #eee;
    color: rgba(128, 128, 128, 0.8);
    -webkit-transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out}



.header .navpar { background-color: #D3D3D3; color: #fff; overflow: hidden }
.header .navpar h2 { float:left; /*text-transform:uppercase;*/ font-size: 25px ; margin-top: 25px }
.header .navpar h2 span { color: #028DA5 }
.header .navpar ul { list-style:none;  padding-left:0; overflow:hidden; float: right }
.header .navpar ul li { float:left; padding:10px; font-size: 20px }
.header .navpar ul li a { color:#fff; text-decoration: none }
.header .navpar ul li a:hover,
.header .navpar ul li.active a { color:#028DA5 }
/* end header*/



/* Start Features */
.features { padding: 80px 0; overflow: hidden; height: 300px }
.features .container {text-align: center}
.features .box { width: 22%; float: left; margin-right: 4% }
.features .box:last-child { margin-right: 0 }
.features .box i { color: rgba(147,112,219); border: 2px solid #CCC; width: 120px; height: 120px; border-radius: 50%; line-height: 120px}
.features .box i:hover { 
    background-color: rgba(147,112,219); color: #FFF; border: 2px solid rgba(147,112,219); 
    -webkit-transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out}

.features .box h3 { text-transform: uppercase; font-weight: normal; color: #505050 }
.features .box p { line-height: 1.7; color: #888 }
/* End Features */



/* Start naming */ 
.naming { background-color: #eee ; padding-top: 30px}
.naming .titleName h3 {font-size: 35px; margin-top: 25px; color: #333}
.naming .emp_name { overflow: hidden; padding-top: 50px }
.naming .emp_name .names {width: 60%; margin-bottom: 40px}
.naming .emp_name .names label { color: #333; padding-left: 70px; font-size: 22px }
.naming .emp_name .names input { height: 30px; width: 45%; border: 2px solid #ccc; border-radius: 8px; position: absolute; right: 25% }
/* End naming  */ 



/* start content */ 
.content { background-color: #eee ; padding-bottom: 50px; line-height: 40px }
.content .groups .g_info1 { padding-bottom: 33px }
.content .groups label {color: #333; padding-left: 65px; font-size: 22px; margin-right: 30px }
.content .groups .g_info1 .form-control,
.content .groups .g_info2 .form-control {
    height: 35px;
    width: 22%;
    border-radius: 8px;
    border: 2px solid #ccc;
    font-family: 'Chelsea Market', cursive;
    color: #333;
    right: 25%;
    position: absolute;
}
/* end content */



/* start form info */ 
.o_group {background-color: #eee; padding-bottom: 60px; padding-top: 35px}
.o_group .AllForm { color: #333; margin-top: -20px; margin-top: -40px }
.o_group .form-group .form-control1 {
    position: absolute;
    right: 25%;
    height: 35px;
    width: 90px;
    margin-left: 20px;
    border: 2px solid #ccc;
    border-radius: 7px;
    font-family: 'Chelsea Market', cursive;
    color: #333
}

.o_group .form-group .form-control2 {
    position: absolute;
    right: 443px;
    height: 35px;
    width: 90px;
    margin-left: 20px;
    border: 2px solid #ccc;
    border-radius: 7px;
    font-family: 'Chelsea Market', cursive;
    color: #333
}

.o_group .form-group .form-control3 {
    position: absolute;
    right: 545px;
    height: 35px;
    width: 97px;
    margin-left: 20px;
    border: 2px solid #ccc;
    border-radius: 7px;
    font-family: 'Chelsea Market', cursive;
    color: #333
}
/* end form info */ 


/* start footer  */ 
.footer { background-color: #424242; padding-top: 22px }
.footer .div_foot { width: 100% }

.footer .div_foot input {
    text-decoration: none; 
    color: #fff;
    background-color: transparent; 
    padding: 10px 40px; 
    font-size: 25px;
    font-family: 'Chelsea Market';
    font-weight: 500;
    margin-bottom: 25px; 
    border: 2px solid #ccc; 
    border-radius: 10px
}

.footer .div_foot input:hover {
    color: #222;
    background-color: #fff;
    border: 2px solid #fff;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out 
}



/* Start Section Loading */
.loading-overlay {
    background: rgba(138,43,226);
    color: #FFF;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999
}

.spinner {
    width: 300px;
    height: 300px;
    position: relative;
    margin: 200px auto
}

.spinner .double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #FFF;
  opacity: 0.9;
  position: absolute;
  top: 0;
  left: 0
  
  -webkit-animation: sk-bounce 3.0s infinite ease-in-out;
  animation: sk-bounce 3.0s infinite ease-in-out
}

.double-bounce2 {
  -webkit-animation-delay: -2.0s;
  animation-delay: -2.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
/* End Section Loading */