﻿@charset "utf-8";
/* CSS Document */
 body {
     font-family: 'Helvetica Neue';
     font-size:1.4rem;
     line=height:1.rem 
}
 @font-face {
     font-family: 'Impact';
     src: url('../fonts/Impact.woff2') format('woff2'), url('../fonts/Impact.woff') format('woff'), url('../fonts/Impact.ttf') format('truetype'), url('../fonts/Impact.svg#Impact') format('svg');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
}
 @font-face {
     font-family: 'Helvetica Neue';
     src: url('../fonts/HelveticaNeue.woff2') format('woff2'), url('../fonts/HelveticaNeue.woff') format('woff'), url('../fonts/HelveticaNeue.svg#HelveticaNeue') format('svg');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
}
 header {
     padding:0px 
}
 .vid-area {
     background:#1c2d57;
     padding:60px 20px;
}
 .head-title {
     margin-bottom:40px 
}
 .vid-area .head-title h1 {
     font-family: 'Impact';
     color:#fff;
     text-align: center;
     font-size:3.5rem;
     letter-spacing:1px 
}
 .vid-area .head-title h2 {
     font-family: 'Impact';
     color:#fff;
     text-align: center;
     font-size:2.5rem;
     letter-spacing:1px ;
}
 .vid-area .head-title h3 {
     color:#fff ;
     text-align: center;
     font-size:2.1rem;
}
 .vid-are-text {
     color:#fff ;
}
 .vid-cont img {
     width:100%;
     border:14px solid #de2531;
     -webkit-box-shadow: 0px 0px 30px -14px rgba(0,0,0,0.75);
     -moz-box-shadow: 0px 0px 30px -14px rgba(0,0,0,0.75);
     box-shadow: 0px 0px 30px -14px rgba(0,0,0,0.75);
}
 .module-cont img {
     width:100% 
}
 .module-cont {
}
 .module-title {
     background:#1c2d57;
     text-align:center;
     color:#fff;
     font-family: 'Impact';
     letter-spacing:1px;
     margin-bottom:10px;
     padding:20px 
}
 .module-wrap {
     padding:60px 20px;
}
 .mod-wrap {
     border:3px solid #1c2d57;
}
 .module-cont {
     -webkit-box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.41);
     -moz-box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.41);
     box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.41);
     margin:20px 
}
 .module-cont h3 {
     background:#f05511;
     text-align:center;
     font-family: 'Impact';
     text-transform:uppercase;
     color:#fff;
     letter-spacing:1px;
     padding:10px;
     margin-bottom:0px 
}
 .module-cont p {
     background:#1c2d57;
     text-align:center;
     font-family: 'Impact';
     text-transform:uppercase;
     color:#fff;
     letter-spacing:1px;
     padding:10px;
     font-size:1rem 
}
/*==== GREEN====*/
 .mod-wrap.gr {
     border:3px solid #158024;
}
 .module-cont.gr h3 {
     background:#00356f;
}
 .module-cont.gr p {
     background:#158024;
}
 .module-title.gr {
     background:#158024;
}
/*==== RED====*/
 .mod-wrap.rd {
     border:3px solid #de2531;
}
 .module-cont.rd h3 {
     background:#000;
}
 .module-cont.rd p {
     background:#de2531;
}
 .module-title.rd {
     background:#de2531;
}
 footer {
     background:#1c2d57;
     padding:70px 20px 
}
 footer .foot-text {
     color:#fff;
     font-family: 'Impact';
     letter-spacing:1px;
     text-align:center;
}
 footer .foot-text a{
     color:#fff;
     font-family: 'Impact';
     letter-spacing:1px;
     text-align:center;
}
 .mod-process {
     padding:0px 20px 60px 
}
 .mod-process h2 {
     color:#1c2d57;
     text-align:center;
     font-family: 'Impact';
     letter-spacing:1px;
     font-size:2.3rem 
}
 .mod-arrow {
     text-align:center;
     padding:20px 10px;
     font-family: 'Impact';
     letter-spacing:1px;
     font-size:1.8rem;
     color:#fff 
}
 .mod-arrow.it {
     clip-path: polygon(100% 50%, 85% 0%, 0% 0%, 15% 50%, 0% 100%, 85% 100%);
}
 .mod-arrow.ft {
     clip-path: polygon(100% 50%, 85% 0%, 0% 0%, 0% 50%, 0% 100%, 85% 100%);
}
 .mod-arrow.it.or {
     background:#e88209 
}
 .mod-arrow.it.gr {
     background:#1abb5e 
}
 .mod-arrow.it.yl {
     background:#e3cb00 
}
 .mod-arrow.ft.rd {
     background:#f82937 
}
 .mod-c.rd {
     background:#f82937 
}
.mod-c {
    border: 4px solid #a2a2a2;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background: #a2a2a2;
    float: left;
    /*margin:0px 20px*/
}
.mod-chk {
    border: 5px solid #a2a2a2;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    /*margin-top:-10px;*/
    background: #a2a2a2;
    float: left;
    /*margin-left: 10px*/
}
 .mod-chk img {
     width:100%;
     border-radius:50%;
}
 .mod-circle-wrap {
     padding:20px 10px 
}
 .grline {
     height:6px;
     background:#a2a2a2;
     margin-top:-28px 
}
 .grline-w {
     height:6px;
     background:#a2a2a2;
     position:relative;
     margin-top:-60px;
     z-index:-1;
}
/*===========LOGIN================*/
 .form-wrap {
    background:#d10032;
     margin:20px 30px 60px;
     -webkit-box-shadow: 0px 0px 14px 10px rgba(0,0,0,0.5);
     -moz-box-shadow: 0px 0px 14px 10px rgba(0,0,0,0.5);
     box-shadow: 0px 0px 14px 10px rgba(0,0,0,0.5);
}
 .form-inner {
    padding:10px 20px 40px
}
 .form-inner h3 {
    color:#fff;
     font-size:1.5rem;
    text-align: center;
     margin:30px
}
 .form-div {
    margin: 10px
}
 .form-field {
    border:4px solid #1c2d57;
    width:100%;
     padding:10px
}

 .form-field:focus::placeholder {
  color: transparent;
}

 .form-submit {
    text-align:center
}
 .form-btn {
    background:#1c2d57 !important;
     border:4px solid #fff;
     color:#fff;
     width:100%;
     padding:15px;
    font-weight: bold
}
/*===========WELCOME================*/
 header.w-pg .logo img{
    width:38%;
}
 .w-wrap {
    padding:50px 0px 80px
}
 footer.w-pg {
    padding-top:0
}
 .foot-note {
     border:6px solid #1c2d57;
     text-align:center;
     padding:15px;
     text-transform:uppercase;
     color:#fff;
     font-size:1.7rem;
     max-width:70%;
     margin:0 auto;
     margin-top:-40px;
     margin-bottom:30px;
     background:#d10032;
}
 .foot-info{
    padding:10px
}
 .foot-info h3 {
    color:#fff;
     text-align:center;
     font-family: 'Impact';
     font-size:2.2rem 
}
 .foot-info p {
    color:#fff;
    font-size:1.8rem;
     text-align: center;
     line-height:1.5rem 
}


.foot-but {text-align: center;margin-top:30px}
.foot-but input {padding:8px 50px;background:transparent; border:5px solid #fff; color:#fff}
.foot-but input:hover{ border:5px solid #029dff; color:#fff}

a:link, a:hover, a:active, a:visited {
    text-decoration: none;
}

 @media only screen and (min-width : 360px) and (max-width : 480px) {
     .grline-w {
         display:none 
    }
     .mod-arrow {
         margin-bottom:10px 
    }
     .mod-process h2 {
         font-size:1.5rem 
    }
     .head-title h1 {
         font-size:2rem !important;
    }
     .head-title h3 {
         font-size:1.32rem !important;
    }
     .tr {
         margin-top:20px 
    }
     header.w-pg .logo img{
        width:80%;
    }
     .w-wrap {
        padding-top:10px
    }
     .foot-note {
         font-size:1.2rem;
         max-width:80%;
    }
     foot-info{
        padding:10px
    }
     .foot-info h3 {
         font-size:1.1rem;
    }
     .foot-info p {
        font-size:1.2rem;
    }
	 
	  .l-pg .head-title h2{font-size:1.5rem}
  .form-inner {margin:0; padding:10px}
	 .form-inner h3 {font-size:1.2rem}
	 .form-wrap {margin:0}
.form-field::placeholder {
  
 font-size:1rem
}
  
}
 @media only screen and (min-width : 768px) and (max-width : 1024px) {
     .grline-w {
         height:6px;
    }
     .mod-arrow {
         margin-bottom:10px 
    }
     .mod-process h2 {
         font-size:1.5rem 
    }
     .head-title h1 {
         font-size:2.8rem !important;
    }
     .head-title h3 {
         font-size:1.6rem !important;
    }
     .tr {
         margin-top:20px 
    }
     .module-cont h3{
        font-size:2.5rem
    }
     .module-cont p{
        font-size:1.5rem;
    }
     .mod-c {
         border:4px solid #a2a2a2;
         border-radius:50%;
         width:25px;
         height:25px;
         background:#a2a2a2;
         float:left;
         margin:0px 2px 
    }
     .mod-chk {
         border:3px solid #a2a2a2;
         border-radius:50%;
         width:40px;
         height:40px;
         margin-top:-10px;
         background:#a2a2a2;
         float:left;
         margin-left: 5px 
    }
     .grline {
         height:6px;
         background:#a2a2a2;
         margin-top:-20px 
    }
     header.w-pg .logo img{
        width:60%;
    }
     .w-wrap {
        padding-top:10px
    }
     .foot-note {
         font-size:1.2rem;
         max-width:80%;
    }
     foot-info{
        padding:10px
    }
     .foot-info h3 {
         font-size:1.4rem;
    }
     .foot-info p {
        font-size:1.2rem;
    }
	  .l-pg .head-title h2{font-size:2rem}
}
 @media only screen and (min-width : 1200px) and (max-width : 1366px) {
     header.w-pg .logo img{
        width:60%;
    }
     .w-wrap {
        padding-top:10px
    }
     .grline-w {
         height:6px;
    }
     .mod-arrow {
         margin-bottom:10px 
    }
     .mod-process h2 {
         font-size:1.5rem 
    }
     .head-title h1 {
         font-size:2.8rem !important;
    }
     .head-title h3 {
         font-size:1.6rem !important;
    }
     .module-cont h3{
        font-size:1.8rem
    }
     .module-cont p{
        font-size:1.1rem;
         line-height:1.3rem 
    }
     .mod-wrap .module-title {
        font-size:1.5rem
    }
     .mod-c {
         border:4px solid #a2a2a2;
         border-radius:50%;
         width:25px;
         height:25px;
         background:#a2a2a2;
         float:left;
         margin:0px 10px 
    }
     .mod-chk {
         border:3px solid #a2a2a2;
         border-radius:50%;
         width:40px;
         height:40px;
         margin-top:-10px;
         background:#a2a2a2;
         float:left;
         margin-left: 10px 
    }
     .grline {
         height:6px;
         background:#a2a2a2;
         margin-top:-20px 
    }
     footer .foot-text {
        font-size:1.2rem
    }
     .vid-cont img {
        width:97%
    }
     .vid-cont {
        text-align:center
    }
	 
	 .l-pg .head-title h2{font-size:2rem}
	 
}
 @media only screen and (min-width : 1367px) and (max-width : 1920px) {
     .vid-cont img {
        width:88%
    }
     .vid-cont {
        text-align:center
    }
}
 