/********** common setting **********/
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/eot/IRANSansWeb_Black.eot');
    src: url('../fonts/eot/IRANSansWeb_Black.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb_Black.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb_Black.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb_Black.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/eot/IRANSansWeb_Bold.eot');
    src: url('../fonts/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb_Bold.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/eot/IRANSansWeb_Medium.eot');
    src: url('../fonts/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb_Medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb_Medium.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb_Medium.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/eot/IRANSansWeb_Light.eot');
    src: url('../fonts/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb_Light.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/eot/IRANSansWeb_UltraLight.eot');
    src: url('../fonts/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb_UltraLight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/eot/IRANSansWeb.eot');
    src: url('../fonts/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb.ttf') format('truetype');
}
@font-face {  font-family: enfont;  font-weight: normal;  src: url('../fonts/ttf/TitilliumWeb-Regular.ttf');  }
@font-face {  font-family: enfont;  font-weight: 500;  src: url('../fonts/ttf/TitilliumWeb-Bold.ttf');  }
@font-face {  font-family: enfont;  font-weight: bold;  src: url('../fonts/ttf/TitilliumWeb-Black.ttf');  }
@font-face {  font-family: enfont;  font-weight: 100;  src: url('../fonts/ttf/TitilliumWeb-Light.ttf');  }
body{    font-family:IRANSans;     overflow-x:hidden}
h2{    font-weight:bold}

img{    display:block;     max-width:100%}
h4, .h4{    line-height:1.4}
a,
button{    cursor:pointer}
p.success{
    clear: both;
    text-align: center;
    padding-top: 30px;
    color: #1cb95b;
}
.jumbotron{    margin-bottom:0 !important}

.atlas-cta{    border-radius:30px !important;     padding:8px 27px !important;     font-weight:normal;     font-size:17px;     transition:.3s ease-in-out !important}

.atlas-cta:hover{    text-decoration:none;     transform:translateY(-5px)}

.atlas-cta-wide{    width:100%}

.cta-green{    background:#21d268;     color:#fff; box-shadow: 0px 2px 16px 0px rgba(47, 207, 92, 0.5);}

.cta-green:hover{    color:#fff;     background: #21da68; box-shadow: 0px 9px 21px 0px rgba(47, 207, 92, 0.5);}

.cta-green:disabled {
    background: #35363b;
}
.cta-blue{
    background: #3744ba;
    border: 2px solid #3744ba;
    color: #fff;
    transition: all 0.4s;
    font-size: 18px;
    padding: 3px 32px!important;}
.cta-lblue{    background:#446ce4;     margin-top: 30px;
    margin-bottom: 89px;    color:#fff;  box-shadow: 0px 4px 13px 0px rgba(68, 108, 228, 0.5); transition: all 0.4s;}

.cta-lblue:hover{   background: #456dee;  color:#fff; box-shadow:0px 9px 21px 0px rgba(68, 108, 228, 0.5);}

.cta-black{    color:#171717;     font-weight:normal;     display:inline-block;     font-size:18px}
.cta-white{
    font-size: 17px;
    color: #35363b;
    letter-spacing: -1px;
    transition: all 0.4s;
    background: #fff;
    box-shadow: 0px 2px 25px 0px rgba(53, 53, 53, 0.12);
    padding: 8px 45px 8px 19px!important;
}
.cta-white:hover{
    box-shadow: 0px 9px 25px 0px rgba(53, 53, 53, 0.12);
}
.cta-blue:hover{    background:transparent;     color:#fff;     transform:translateY(0px)}

.cta-ghost{    border:2px solid #192440 !important;     color:#192440}

.cta-ghost:hover{    color:#fff;     background:#121a2e}

#banner{
    background-size: cover;
    position: relative;
    background: #fbfbfd url(../img/usability.png)no-repeat right 140px top 130px;
    padding-top: 0;
    border-bottom: 1px solid #f1f3f6;
}
#banner:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/banner-bk2.png) no-repeat right bottom;
    width: 60%;
    height: 71%;
}
.text-white{    color:#fff}
.font-weight-bold{    font-weight:bold}
.phone{    display:inline-block;     direction:ltr;     margin:23px;     font-size:17px;     font-weight:normal}
.phone:hover{    color:#fff}
.phone span{    display:inline-block;     position:relative;     top:6px;     margin-right:10px}
span.one{    font-size:15px;     font-weight:normal}
h3.one span, h3.two span.second{
    display: inline-block;
    position: relative;
    width: 11px;
    height: 4px;
    background: #2fcf5c;
    margin-right: 0;
    margin-left: 10px;
    top: -3px;}
/********** banner **********/
#banner header{    overflow:hidden}

#banner header h1{    font-size:1px;        color:transparent;     background:url(../img/logo.png)no-repeat right 20px center;     height:40px}
#banner h2{    font-size:30px; margin-top: 3px;     line-height:1.3; font-weight: normal;     margin-bottom: 60px;  }
#banner h2 strong{
    font-weight:500;
}
#banner p{
    font-size: 19px;
    font-weight: normal;
    margin-bottom: 0;
    font-family: tahoma;
    text-transform: uppercase;
    padding-bottom: 13px;
}
#banner img{
    float: left;
    padding-top: 45px;
}
#banner .right{
    padding: 155px 15px 100px;
}
#banner .cta-blue{
    margin-top: 32px;
}
.jumbotron{    padding-top:10px;     padding-bottom:140px}
.atlas-cta1{    padding-left:45px!important;     font-size:20px}
.atlas-cta span{
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url(../img/arrow-b.png) no-repeat center center;
    position: absolute;
    top: 10px;
    right: 14px;
}
.navbar-default{ background:#fff;  margin-bottom:0;  position:absolute;  width:100%;  z-index:1}
.navbar-default.scrolled{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    left: 0;
    background: #fff;
    border-bottom: 1px solid #ddd;
}
.navbar-default.scrolled .navbar-nav>li>a {
    color: #555;
    padding: 20px 10px;

}
.navbar-default.scrolled .navbar-nav>li:before {
    background: #21d268;
}
.navbar-default.scrolled .navbar-nav>li>a:hover, .navbar-default.scrolled .navbar-nav>li>a:focus {
    color: #555;
}
.navbar-default .navbar-nav>li:before{ background:#c03c42}
.navbar-default .navbar-nav>li:hover:before, .navbar-default .navbar-nav>li.active:before, .navbar-default .navbar-nav>li:focus:before{ left:0}
.navbar-default .navbar-nav>li:before{
    content: "";
    position: absolute;
    border-radius: 0 0 6px 6px;
    z-index: 3;
    left: 100%;
    right: 0;
    top: 0;
    background: #fff;
    height: 4px;
    -webkit-transition-property:left;  transition-property:left;  -webkit-transition-duration:0.3s;  transition-duration:0.3s;  -webkit-transition-timing-function:ease-out;  transition-timing-function:ease-out}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
    color: #fff;
    background-color: transparent;}
.navbar-brand{ display:none}
.scrolled .navbar-brand{ display:inline-block}
/************** about ***********/
#section-about{ background:#fff;  padding:0px 0 60px}
#section-about{
    margin-top:-135px;
}
#section-about span.image{
    display: block;
    height: 75px;
}
#section-about h4{
    font-size: 20px;
    font-weight: bold;

}
#section-about .media h4{
    color: #35363b;
    font-size: 21px;
}
#section-about h5{
    font-family: enfont;
    text-transform: uppercase;
    font-size: 17px;
    font-weight: 500;
}
#section-about h3{
    clear: both;
    font-size: 16px;
    color: #58585c;
}
#section-about .item{
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 3px 6px 0px rgba(77, 77, 80, 0.13);
    padding: 45px 30px 30px;
}
#section-about .container > div.col-md-3{
    padding: 15px 4px;
}
#section-about .container > div.col-md-6{
    padding-top: 40px;
}
span.more{
    display: inline-block;
    background: url("../img/more.png") no-repeat center center;
    height:15px;
    width:35px;
    right: 0;
    position: relative;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s ;
    -ms-transition: all 0.4s ;
    -o-transition: all 0.4s ;
    transition: all 0.4s ;
}
#section-about .item:hover span.more,#section-about .media:hover span.more{
    right:10px;
}
.media .image {
    padding: 30px 0;
}
.media .image img{
    width:100%;
    border-radius: 5px;
    box-shadow: 0px 13px 18px -7px rgba(105, 105, 111, 0.2)

}
.black p{
    font-size: 15px;
    padding: 15px 0 20px;
    line-height: 2;
    color: #6a6c74;
    font-weight: normal;
}
 .black .media p {
    font-size: 17px;
    text-align: justify;
}
.col1{ padding:25px 0}
.cta-black span{ display:inline-block;  position:relative;  right:7px;  top:3px;  transition:all 0.3s}
.about{ margin-right:20px}
.cta-black:hover{ color:#171717;  text-decoration:none}
.cta-black:hover span{ right:12px}
/************ prose *************/
#section-pr{
    background: url("../img/video-back.jpg") repeat-x center center;
    background-size: auto 100%;
}
#section-pr p{
    font-size: 21px;
    font-weight: 500;
    color: #3a3b40;
    padding: 80px 0 0px;
    margin-bottom: 0;
}
#section-pr p.p2{
    font-size: 19px;
    font-family: enfont;
    font-weight: 400;
    padding: 0;
}
#section-pr p.p2 strong{
    font-weight: 500;
}
.step{
    display: inline-block;
    padding: 10px;
    position: relative;
}
.step:after{
    content: '';
    position: absolute;
    top: 42px;
    background: url(../img/dots.jpg)no-repeat center center;
    width: 50px;
    height: 20px;
    left: -34px;
}
.step:last-of-type:after{
    display: none;
}
.step h3{
    font-size: 18px;
    color: #35363b;
    margin-bottom: 5px;
}
.step span{
    font-size: 18px;
    font-family: enfont;
    color: #35363b;
    font-weight: 400;
}
#section-moshaver h3.rainbow{
    display: inline-block;
    font-weight: 500;
    padding-bottom: 5px;
}
#section-moshaver .atlas-cta{
    padding-right: 44px!important;
}
#section-moshaver .atlas-cta span {
    background: url(../img/download.png) no-repeat center center;

}
#section-mojavez{
    background-image: -moz-linear-gradient( 0deg, rgb(66,66,217) 0%, rgb(42,134,238) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgb(66,66,217) 0%, rgb(42,134,238) 100%);
    background-image: -ms-linear-gradient( 0deg, rgb(66,66,217) 0%, rgb(42,134,238) 100%);
    padding:50px 0
}
#section-mojavez h3{
    font-size: 25px;
}
#section-mojavez span{
    ont-size: 16px;
    text-transform: uppercase;
    font-family: enfont;
    padding-bottom: 10px;
    display: block;
}
#section-mojavez .container{
    max-width: 750px;
}
#section-mojavez p{
    font-size: 18px;

    line-height: 1.8;
    padding: 30px 15px 40px;
}
#section-mojavez .cta-white:hover{
      color: #f26629;
}
/*********** services **************/
#section-service p{ font-size:15px;  font-weight:100;  padding:10px 0 10px}
#section-service .col-md-12 p, #section-moshaver .col-md-12 p{ font-size:17px;  font-weight:400;  margin:18px auto;  padding:10px 0 10px}
#section-service{background:#f9fafc;  padding:85px 0}
#section-service .item{ box-shadow:0px 10px 21px 0px rgba(0,0,0,0.05);  background:#fff;  border-radius:10px;  padding:40px 30px;  transition:all 0.6s;  cursor:pointer}
#section-service .item span.image{ height:80px;  display:block}
#section-service .py-4{ margin-bottom:30px}
.title-sec{ font-size:17px;  font-weight:400;  color:#171717;  padding-bottom:20px;  padding-top:10px}
.title-sec i{ color:#fff;  background:#21d268;  display:inline-block;  width:22px;  height:22px;  border-radius:50%;  text-align:center;  margin-left:11px;  position:relative;  top:2px;  padding-right:4px}
#section-service .item:hover{ background:#21d268;  box-shadow:0px 23px 32px 0px rgba(33,210,104,0.25)}
#section-service .item p, #section-service .item h4, #section-service .item svg:not(:root){ transition:all 0.6s}
#section-service .item:hover p, #section-service .item:hover h4{ color:#fff}
#section-service .item:hover svg:not(:root){ fill:#fff}
/**************** moshaverin ************/
#section-moshaver span.image img{    margin:0 auto}
#section-moshaver span.image{    display:inline-block;     position:relative}
#section-moshaver span.image:after{    content:'';     position:absolute;     width:45px;     height:11px;     top:43px;     left:-19px;     background:url(../img/wave2.png) no-repeat center center}
#section-moshaver h4{ font-size:19px}
#section-moshaver .item h3{ font-size:20px;  color:#21d268;  margin-top:40px;  margin-bottom:15px}
#section-moshaver, #request{ padding:80px 0}
#section-moshaver .item{ margin-top:50px}
/************** mojavez ****************/
.shadow img{ box-shadow:0px 29px 54px 0px rgba(112,112,112,0.29);  border-radius:4px;  float:left;  margin-top:20px}
#back{
    height: 600px;
    width: 100%;
    background: url(../img/moshavere.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    }
.btn:focus, .btn:active:focus, .btn.active:focus{
    outline: 0;
}
#request p{ font-size:18px;  font-weight:400;
    color: #6a6c74;  margin:18px auto;  padding:10px 0 10px;  line-height:1.9;  margin-bottom:25px}
li{ list-style:none}
li input{
    border-style: solid;
    border-width: 2px;
    border-color: #dddfe4;
    border-radius: 30px;
    width: 85%;
    height: 54px;
    font-size: 17px;
    color: #b8bac0;
    font-weight: 500;
    padding: 0 20px;
    margin-top: 20px;
    margin-bottom: 35px;
    outline: 0;
    text-align: center;

}
#alert{
    display: block;
    text-align: center;
    color: #ca2828;
    font-size: 17px;
}
#request p.success{ clear:both;  margin-bottom:0;  padding-top:30px;  text-align:center;  color:#21d268}
label.error{ display:inline-block;  margin-bottom:5px;  font-weight:100;  color:#ca2828}
li input:focus, li textarea:focus{ outline:0;  border-color:#21d268}
li textarea{ height:235px;  padding-top:20px}
.padrl0{ padding-right:0;  padding-left:0}
ul{ padding-right:0}
#request .container{ max-width:962px}
#map-canvas{ height:450px}
#contact .container{ padding:90px 0}
.information p{ font-size:17px;  padding-top:10px;  padding-bottom:30px}
.information li{ font-size:17px;  font-weight:normal;  line-height:1.7}
.information li a{ color:#333;  transition:all 0.4s}
.information li a:hover{ color:#21d268;  text-decoration:none}
#contact .atlas-cta{ color:#333;  border:2px solid #333}

/********** copyright **********/
#copyright{
    background: #fafafb;
}
#copyright ul{
    margin-bottom: 50px;
}
#copyright .container:before{
    content: '';
    width: 100%;
    height: 70px;
    position: absolute;
    top: -35px;
    background: url("../img/footer.png") no-repeat center center;
}
#copyright .container{  padding:80px 0;  position: relative   }
#copyright .text-left{    direction:ltr;     padding-top:6px;     font-size:15px;     text-transform:uppercase;     color:#3f3f3f}
#copyright a{
    color: rgba(53, 54, 59, 0.71);
    font-size: 17px;
    padding: 10px;
    transition: all 0.4s;
}
#copyright a:hover{   text-decoration: none; color:#21d268;   }
#copyright p{
    margin-bottom:0;
}
#copyright p a{
    font-weight: 500;
    font-size: 16px;
}
.modal {
    background-color: rgba(244, 248, 251, 0.98);
}
.modal-content {
    -webkit-box-shadow: none;
     box-shadow:none;
     border: 0;
}
.modal-content li input {
    max-width: 400px;
    display: block;
    margin: 10px auto;
}
.modal-content .atlas-cta {
    width: 100%;
    max-width: 400px;
    margin-top: 30px;
}

.topnav{ overflow:hidden;  text-align:center}

.navbar-default .navbar-nav>li>a{
    display: inline-block;
    color: #fff;
    text-align: center;
    padding: 40px 10px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 300;
}
.navbar-default{
    background: transparent;
    margin-bottom: 0;
    position: absolute;
    z-index: 1;
    left: 130px;
    border: 0;
}
.navbar-nav{ float:none;  margin:0}
.navbar-nav>li{ float:none;  text-align:center;  display:inline-block}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{ color:#fff}

.topnav .icon{ display:none}
/* The Modal (background) */
.modal{ display:none;  position:fixed;     padding-top: 200px; z-index:1;  left:0;  top:0;  width:100%;  height:100%;  overflow:auto; }

/* Modal Content */
.modal-content{ position:relative;   margin:auto;  padding:0;  width:90%;  max-width:1200px}

/* The Close Button */
.close{ color: #333;     z-index: 5; position:absolute;  top:10px;  right:25px;  font-size:35px;  font-weight:bold}

.close:hover,
.close:focus{ color:#999;  text-decoration:none;  cursor:pointer}

.mySlides{ display:none}

.cursor{ cursor:pointer}

/* Next &previous buttons */
.prev,
.next{ cursor:pointer;  position:absolute;  top:50%;  width:auto;  padding:16px;  margin-top:-50px;  color:white;  font-weight:bold;  font-size:20px;  transition:0.6s ease;  border-radius:0 3px 3px 0;  user-select:none;  -webkit-user-select:none}

/* Position the "next button"to the right */
.next{ right:0;  border-radius:3px 0 0 3px}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover{ background-color:rgba(0,0,0,0.8)}

/* Number text (1/3 etc) */
.numbertext{ color:#f2f2f2;  font-size:12px;  padding:8px 12px;  position:absolute;  top:0}

img{ margin-bottom:-4px}

.caption-container{ text-align:center;  background-color:black;  padding:2px 16px;  color:white}

.demo{ opacity:0.6}

.active,
.demo:hover{ opacity:1}

img.hover-shadow{ transition:0.3s}

.hover-shadow:hover{ box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.rainbow {
    padding-bottom: 2px;
    background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #4242d9), color-stop(1, #2a86ee) );
    background-image: gradient( linear, left top, right top, color-stop(0, #4242d9), color-stop(1, #2a86ee) );
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
}


/********** RWD **********/
@media (max-width:1199px){
    #section-service .item{        height:350px}
    #banner::before {
        width: 66%;
    }
}
@media (max-width:991px){    .container,.text-right,.text-left{        text-align:center}
    #section-pr img, .information img{        margin:0 auto}
    .shadow img{        float:none;         margin:0 auto}
    #section-about img{        margin:0 auto}
    #banner, #pb-navbar, .page{    overflow-x:hidden}
    .navbar-default {
        left: 0;
    }
    header .cta-blue{
        display: none;
    }
    #section-pr {
        background: #f4f8fb;
        padding: 0 15px 80px;
    }
    #banner .right{
        text-align: right;
    }
    .col1{
        padding: 0;
    }
    #copyright .container::before {
        top: -15px;
    }
}
@media (max-width:767px){    .scrolled .navbar-brand{        display:none}
    #section-service .item{        height:auto;         max-width:450px;         margin:0 auto}
    #banner::before {
        display: none;
    }
    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus,.navbar-default .navbar-nav > li > a,.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
        color: #333;
    }
    .navbar-default .navbar-nav > li::before {
        background: #333;
    }
    #banner .right{
        text-align: center;
    }
    #banner img {
        float: none;
        padding-top: 0;
        display: block;
        margin: 0 auto;
    }
    #section-about .item {
        max-width: 400px;
        margin: 0 auto;
    }
    .media, .media .media {
        max-width: 500px;
        margin: 0 auto;

    }
}
@media (max-width:575px){    #banner h1{        font-size:3.6rem}
    .navbar-default{        display:none}
    #section-about{        padding:60px 0 60px}
    #banner{        height:auto}
    .col-xs-4, .col-xs-8{        width:100%}
    #banner header h1{        background:url(../img/logo.png)no-repeat center center}
    h3.two span.first, h3.two span.second, h3.one span, h3.two span.second{ display:none}
    header .cta-blue {
        display: block;
    }
    #banner .right {
        padding: 80px 15px 60px;
    }
    .step{
        display: block;
    }
    .step::after{
        display: none;
    }
    .list-inline > li {
        margin-bottom: 20px;
    }
}