@import url("https://fonts.googleapis.com/css?family=Raleway");
@import url("https://fonts.googleapis.com/css?family=Suez+One");
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Bungee|Lobster');


@font-face {
  font-family: 'Boing';
  font-style: normal;
  font-weight: bold;
  src: url("../fonts/boing/Boing_SemiboldWEB.eot");
  src: url("../fonts/boing/Boing_SemiboldWEB.eot?#iefix") format("embedded-opentype"), url("../fonts/boing/Boing_SemiboldWEB.woff") format("woff"), url("../fonts/boing/Boing_SemiboldWEB.ttf") format("truetype"), url("../../fonts/boing/Boing_SemiboldWEB.svg#proxima_nova_rgregular") format("svg");
}
@font-face {
  font-family: 'Graphik';
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/graphik/Graphik-Regular.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/graphik/Graphik-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/../graphik/Graphik-Regular.woff") format("woff"), url("../fonts/graphik/Graphik-Regular.ttf") format("truetype"), url("../../fonts/graphik/Graphik-Regular.svg#Graphik-Regular") format("svg");
  /* Legacy iOS */
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: 'Graphik';
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/graphik/Graphik-Light.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/graphik/Graphik-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/graphik/Graphik-Light.woff") format("woff"), Modern Browsers url("../fonts/graphik/Graphik-Light.ttf") format("truetype"), url("../fonts/graphik/Graphik-Light.svg#Graphik-Light") format("svg");
  /* Legacy iOS */
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: 'Graphik';
  font-style: normal;
  font-weight: bold;
  src: url("../fonts/graphik/Graphik-Medium.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/graphik/Graphik-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/graphik/Graphik-Medium.woff") format("woff"), url("../fonts/graphik/Graphik-Medium.ttf") format("truetype"), url("../../fonts/graphik/Graphik-Medium.svg#Graphik-Medium") format("svg");
  /* Legacy iOS */
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: 'Tiempos Headline';
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/tiempos/TiemposHeadline-Bold.eot");
  src: local("Tiempos Headline Bold"), local("TiemposHeadline-Bold"), url("../fonts/tiempos/TiemposHeadline-Bold.eot?#iefix") format("embedded-opentype"), url("../../fonts/tiempos/TiemposHeadline-Bold.woff") format("woff"), url("../../fonts/tiempos/TiemposHeadline-Bold.ttf") format("truetype"), url("../../fonts/tiempos/TiemposHeadline-Bold.svg#TiemposHeadline-Bold") format("svg");
}



.content__container__text {
/*    display: inline;*/
    float: left;
    margin-top: 0;
}
.content__container__list {
    float: left;
    margin-top: 0;
    margin-left: -30px;
    text-align: left;
    list-style: none;
    -webkit-animation-name: change;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-name: change;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}
.content__container__list__item {
  line-height: 40px;
/*  margin: 0;*/
}

@-webkit-keyframes change {
  0%, 12.66%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  16.66%, 29.32% {
    -webkit-transform: translate3d(0, -25%, 0);
            transform: translate3d(0, -25%, 0);
  }
  33.32%,45.98% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }
  49.98%,62.64% {
    -webkit-transform: translate3d(0, -75%, 0);
            transform: translate3d(0, -75%, 0);
  }
  66.64%,79.3% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }
  83.3%,95.96% {
    -webkit-transform: translate3d(0, -25%, 0);
            transform: translate3d(0, -25%, 0);
  }
}

@keyframes change {
  0%, 12.66%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  16.66%, 29.32% {
    -webkit-transform: translate3d(0, -25%, 0);
            transform: translate3d(0, -25%, 0);
  }
  33.32%,45.98% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }
  49.98%,62.64% {
    -webkit-transform: translate3d(0, -75%, 0);
            transform: translate3d(0, -75%, 0);
  }
  66.64%,79.3% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }
  83.3%,95.96% {
    -webkit-transform: translate3d(0, -25%, 0);
            transform: translate3d(0, -25%, 0);
  }
}






body{
    padding: 0px;
    margin: 0px;
    width: 100%;
    margin: 0px;
    text-align: center;
    background: radial-gradient(#022857 10%, #000d1c 70%);
    background-repeat: no-repeat;
/*    background: #001329;*/
    position: absolute;
    font-family: Raleway, Segoe Ui;
/*  animation: myMainbg 30s infinite;
    
    animation-name: fadeIn;
    animation-duration: 4s;
    animation-iteration-count: 1;
*/
}

.white{
    color: #fff;
}
.blue{
  color: #0d4b72;
    
}
.nav{
    height: 70px;
    width: 100%;
    z-index: 99999999999;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
/*    position: fixed;*/
/*    box-shadow: 0px 0px 20px #000;*/
}
.nav_icon{
    display: none;
    float: right;
    background: none;
    height: 48px;
    width: 48px;
    border: none;
    cursor: pointer;
    outline: none;
    margin: -8px 25px 0px 5px;
    padding: 2px 5px 7px 7.5px;
    border-radius: 60px;
}

.menu_line{
    background: #fff;
    height: 2px;
    width: 17px;
    margin: 4px 0px 0px 4.5px;
}
.thickline{
    background: #eee;
    height: 1.8px;
    width: 100%;
}
.middle_line{
    background: #fff;
    height: 2px;
    width: 12px;
    margin: 4px 0px 0px 4.5px;
}
.bold{
    font-weight: bolder
}
.links{
    margin: -2px 10% 0px 0px;
    float: right;
    width: 62%;
    color: white;
}
.link_content{
    margin: 11px 10px 0px 10px;
    float: right;
    font-weight: bolder;
    font-size: 14px;
    text-transform: capitalize;
    cursor: pointer;
}
.link_content:hover{
    color: #6b98bf;
/*    animation: pulse 1s;*/
    transition: ease-in-out .3s;
}
.links2{
    background: #000000;
    width: 100%;
    color: white;
    padding: 15px 0px;
    position: absolute;
    z-index: 99999;
    display: none;
}
.link_content2{
    text-decoration: none;
    list-style: none;
    font-weight: bolder;
    font-size: 14px;
    padding: 10px 0px;
    text-transform: capitalize;
    cursor: pointer;
    width: 100%;
/*    border-bottom: 1px solid rgba(255, 255, 255, 0.03); */
}
.link_content2:hover{
    color: #042848;
    transition: ease-in-out .3s;
}
.top{
    z-index: 999999;
    position: absolute;
} 

#particles-js{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: .5;
    display: block;
    width: 100%;
    height: 550px;
}

img{
    margin: 15px 0px 0px 10%;
    float: left;
    width: 115px;
    height: 45px;
}
.typewrite{
    /*margin: 0px 0px 0px -15px;*/
    /*padding: -10px;*/
    color:#fff; 
    text-decoration: none;
}
.R{
    float: right;
}
.C{
    text-align: center;
}
.left{
    text-align: left;
}
.L{
    float: left
}

.btn_btn{
    width: 190px;
    height: 35px;
    border: none;
    outline: none;
    font-weight: 900;
    font-size: 14px;
    font-family: Raleway, Segoe Ui;
    background: #085f23;  /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(left, #06531e, #1a9540);
    background: -o-linear-gradient(left, #06531e, #1a9540);
    background: linear-gradient(to right, #06531e, #1a9540);  /*W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    text-transform: capitalize;
    color: white;
    cursor: pointer;
    text-shadow: 0px 0px 1px #000;
}
.btn_btn:hover{
    background: #1a9540;
    background: linear-gradient(to right,#06531e, #1a9540, #06531e);
    transition: ease-in-out .5s;
}
.btn{
    width: 175px;
    height: 35px;
    border: none;
    outline: none;
    border-radius: 20px;
    font-weight: 900;
    font-size: 14px;
    font-family: Raleway, Segoe Ui;
    background: #0c375f;
    text-transform: capitalize;
    color: white;
    cursor: pointer;
    box-shadow: 0px 1px 1px #000;
    text-shadow: 0px 0px 1px #000;
}
.btn:hover{
    background: #1a588e;
    transition: ease-in-out .5s;
}
/*.intro{  */
/*    font-family: "Boing", sans-serif;*/
/*    font-size: 40px;*/
/*    margin: 0px 0px -25px 0%; */
/*    height: 40px;*/
/*    width: 430px;*/
/*    overflow: hidden;*/
/*}*/
.display{
    text-align: center;
}
.typewrite{
    color:#fff; 
    text-decoration: none;
}
.intro{
    margin: 60px 0px 0px 0px;
    width: 90%;
    font-size: 40px;
    font-weight: 500;
    font-family: "Boing", sans-serif; 
    text-shadow: 0px 0px 5px #111; 
    z-index: 1111;
    display: inline-block;
    
}
@media(max-width: 770px){
    .intro{
        font-size: 44px;
    }
}
@media(max-width: 670px){
    .intro{
        font-size: 33px;
    }
}
@media(max-width: 500px){
    .intro{
        font-size: 25px;
    }
}
.fa{
    font-size: 40px !Important;
    color: #95c782;
}
.up{
    font-size: 28px !Important;
    color: #cecbc5;
    float: right;
    text-align: right;
    bottom: 20;
/*    top: 0;*/
    right: 50;
    position: fixed;
    z-index: 9999;
    
}
.fa-heart{
    font-size: 16px !Important;
    animation: 1s pulse infinite;
}
.gap{
    margin: 120px 0px 0px 0px;
}
.sub{
    width: 60%;
    font-size: 19px;
    font-weight: 900;
    text-align: center;
    display: inline-block;
    line-height: 30px;
}
.sub_heading{
    font-weight: bolder;
    margin: -15px 0px 0px 0px;
    color: #033158;
}
.tab{
    margin-left:20px;
}
.description{
    margin-top: 0px;
    font-weight: 500;
    line-height: 30px;
    color: #0a4272;
}
.features_description{
    width: 80%;
    margin: 10px 10%;
    font-weight: 500;
    line-height: 30px;
    color: #0a4272;
}
.bind{
    width: 40%; 
    float: left;
    margin: 0px 0px 0px 7%;
    position: relative;
    overflow: hidden;
}
.bind_two{
    width: 350px; 
    float: right;
    margin: 0px 7% 0px 0px;
    position: relative;
    overflow: hidden;
/*    box-shadow: 0px 0px 3px #ccc;*/
}
.lhs{
/*     background: pink;*/
/*
    color: #24243e;
    margin-left: 8%;
    width: 40%;
   
    position: relative;
*/
}


.parent {
    display: flex;
    flex-wrap: wrap;
    width: 65%;
    margin: 0px 17.5%;
}

.child {
    flex: 2 0 170px;
    margin: 12px 7px;
    padding: 20px 15px; 
    background: white;
    box-shadow: 0px 0px 10px #ddd;
}
.child>h4{
    font-size: 13px;
    font-weight: bolder;
    margin: 10px 0px 0px 0px;
    color: #033158;
}
.child>p{
    font-size: 12px;
    font-weight: bolder;
    margin: 5px 0px 0px 0px ;
    font-weight: 100;
    color: #033158;
}
.wrap{
    width: 100%;
    padding: 0px 3%;
}
.rhs{
    color: #24243e;
    width: 350px;
    border-radius: 5px;    
    background: #f7f7f7;
    box-shadow: 0px 0px 2px #ccc;
    overflow: hidden;
}
.reg_form{
    padding: 20px 0px;
}
.txt{
    padding: 10px;
    margin: 8px;
    width: 280px;
    height: 37px;
    outline: none;
    font-weight: 900;
    font-family: "Raleway";
    border: none;
    border-radius: 5px;
    box-shadow: 0px 0px 2px #ccc ;
}
.txt::placeholder{
    font-size: 15px;
    font-weight: 100;
    font-family: "Raleway";
    color: #aaaaaa;
}
.btnJoin{
    padding: 10px;
    margin: 8px;
    width: 280px;
    height: 37px;
    outline: none;
    border: none;
    color: white;
    text-transform: capitalize;
    font-size: 16px;
    border-radius: 5px;
    background: #3a8e2b;
    cursor: pointer;
}
.btnJoin:hover{
    background: #4fb73d;    
    transition: .3s Ease-In-Out;
}
.btnDemo{
    padding: 10px;
    margin: 8px;
    width: 150px;
    height: 37px;
    outline: none;
    color: white;
    text-transform: capitalize;
    font-size: 16px;
    border-radius: 20px;
    background: none;
    cursor: pointer;
}
.Outline{
    border: 1px solid;
    background: none;
}
.Colored{
    border: none;
    background: #4fb73d;    
}
.btnDemo:hover{
    background: #70b766;
    transition: .3s Ease-In-Out;
}
.caption{
    margin: 0px;
    border-radius: 5px 5px 0px 0px;
    padding: 40px 0px;
    color: #828386;
    background: white;
    font-family: "Boing";
    font-weight: bolder;
}
.dashone{
    width: 12px;
    height: 3px;
    margin: 2px 0px 3px 0px;
    background: #3a9b3e;
}
.dashtwo{
    width: 12px;
    height: 3px;
    margin: 2px 0px 0px 0px;
    background: #3a9b3e;
}
.dashthree{
    width: 12px;
    height: 3px;
    margin: 1px 0px 0px 0px;
    background: #3a9b3e;
}
@keyframes moveSlideshowR {
  100% { 
    transform: translateX(100%);  
/*    transform: translateX();  */
  }
    20%{
    transform: translateX(-100%); 
  }
}
@keyframes moveSlideshowL {
  90% { 
    transform: translateX(-100%);  
  }
  50%{
    transform: translateX(100%); 
  }
}
.lineOne{
    width:100%;
    height: 2px;
    margin: 20px 0px;
    background: linear-gradient(to right, rgba(48, 43, 99, 0), rgba(48, 43, 99, 0),rgba(48, 43, 99, 1));
    animation: 15s moveSlideshowR linear infinite;
}

.lineTwo{
    width: 150%;
    margin: 20px 0px;
    height: 2px;
    background: linear-gradient(to right, rgba(43, 99, 60, 1), rgba(43, 99, 60, 0), rgba(43, 99, 60, 0));
    animation: 15s moveSlideshowL linear infinite;
}
.part_one{
    width: 100%;
    height: 600px;
    color: white;
    overflow: hidden;
    text-align: center;
}
a{
    color: white;
    text-decoration: none;
}
.part_two{
    background: white;
    width: 100%;
    height: auto;
    padding: 110px 0px;
    display: inline-block;
}
.heading{
    font-family: "boing";
    font-size: 29px;
    margin: 0px;
}
.features_heading{
    font-family: "boing";
    font-size: 29px;
    margin: 0px 5%;
    width: 90%;  
}
.blue{    
    color: #293062;
}
.part_three{
    background: #f8f8f8;
    width: 100%;
    display: inline-block;
    padding: 120px 0px;
}
.white{
    color: white;
}
.part_four{
    background: #014245;
    width: 100%;
    display: inline-block;
    padding: 220px 0px;
}

footer{
    text-align: center;
    width: 100%;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: #014245;  /* fallback for old browsers */
/*background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);   Chrome 10-25, Safari 5.1-6 */
/*background: linear-gradient(to right, #24243e, #302b63, #0f0c29);  W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding: 15px 0px;
}



@media(max-width: 1050px){
       
    .btnJoin, .txt{
        width: 90%;
    }
    
}
@media(max-width: 980px){
    .links{
        margin: 5px 2% 0px 0px;
        width: 79%;
    }
    img{
        margin: 20px 0px 0px 4%;
        width: 100px;
        height: 37px;
    }
    
    .lhs{
        margin-left: 5%;
    }
    .rhs{
        width: 300px;
        margin-right:4%;
    }
@media(max-width: 800px){ 
    
    .lhs{
        width: 90%;
        margin-right: 5%;
    }
    .rhs{
        width: 90%;
    }
    .bind{
        width: 90%;
        margin: 0px;
        padding: 5px;
        display: inline-block;
    }
    .bind_two{
        width: 100%;
        margin: 0px;
        padding: 5px;
        float: right;    
    }
    .part_two{
        background: white;
        width: 100%;
        display: inline-block;
        padding: 20px 0px;
    }
    

}
@media(max-width: 710px){
    .links2{
/*        display: none;*/
    }
    .nav_icon{
        display: block;
    }
    .links{
        display: none;
    }
    .sub{
        width: 80%; 
    }
    .features_heading{
     font-size: 20px;   
    }
     
}
@media(max-width: 500px){
    .content__container__list__item {
      line-height: 32px;
    }
    .intro{
        /*margin: 15px 0px -15px 55px; */
        /*height: 26px;*/
    }
    .intro{
        /*font-size: 30px;*/
        width: 90%;
        /*float: left;*/
    }
    .sub{
        width: 80%;
        font-size: 16px;
        line-height: 18px;
    }
    .line{
        width: 280px;
    }
    .part_two{
        padding: 0px 0px;
    }
    .part_three{
        padding: 80px 0px;
    }
    .part_four{
        padding: 80px 0px;
    }
    .heading{
        font-size: 20px;
    }
    .parent {
        width: 90%;
        margin: 0px 5%;
    }

}
}