@charset "utf-8";

#banner a{ position: absolute;left: 0;top: 0;width: 100%;height: 100%;}

/*#Index{ margin-top: 46px;}*/
#Index .about{ width: 48%;float: left;border: 1px solid #dddddd;}
#Index .item_tit{ height: 46px;line-height: 46px;border-bottom: 1px solid #dddddd;padding: 0 20px;}
#Index .item_tit a{ font-size: 1.1em;font-weight: bold;color: #0080FF;}
#Index .item_con{ height: 150px;line-height: 30px;overflow: hidden;padding: 10px 15px 0;}
#Index .item_con ul li{  overflow: hidden; height: 29px;line-height: 29px;background:  url(../images/home/article_icon.gif) left center no-repeat;padding-left: 15px;border-bottom: 1px dotted #f1f1f1;}
#Index .item_con ul li span{ float: right;}
#Index .news{ width: 48%;float: right;border: 1px solid #dddddd;}

@media screen and (max-width: 768px) {
    #Index{ margin-top: 0;}
    #Index .about,#Index .news{ width:  auto;float: none;margin-top: 4%;}
    #Index .item_con{ height: auto;}
    #Index .about .item_con{ padding-bottom: 10px;}
    #Index .item_con ul li{ height: 34px;line-height: 34px;}
}

/*20171101*/
/* CSS Document */
/* ===============
 * 重新定义Html元素
 * =============== */

html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, table, th, td { font-size: 1em; font-style: normal; font-weight: normal;}
table{border-collapse:collapse;border-spacing:0;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em{font-weight:normal;}
del,ins,a,a:hover,a:link,a:visited,a:active{text-decoration:none;}
body,textarea,input,button,select,legend{font:14px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{font-family:"Microsoft YaHei",sans-serif;font-size:12px;color:#5e5e5e;background:#fff;min-width:1200px;}
button,input{font-family:"Microsoft YaHei";}
a{color:#333;}
body{min-width: 1200px;font-size: 14px;}
.wrap{width: 1200px;margin:0 auto;}
.fl{float: left;}
.fr{float: right;}


.index_top{width: 100%;height: 610px;position: relative;}
#header,.layui-nav{background-color: #103e89;}
#header{position: relative;z-index: 1;}
/*.layui-carousel{top: -80px;}*/
#header .logo{padding: 20px 0;}
/*头部*/
#Menu{background: transparent;padding-top: 20px;}
.index_header .layui-nav{float: left;}
.index_header .login-btn,.register-btn{font-size: 14px;display: inline-block; width: 60px;height: 30px;line-height: 30px;text-align: center;border-radius: 4px;margin-top: 14px;}
.index_header .login-btn,.index_header .register-btn{color: #fff;border:1px solid #fff;margin-left: 5px;}
.index_header .register-btn{background-color: #e8363a; border:1px solid #e8363a;}
.index_header .login-before{float: right;}
.index_header .login-after{margin:22px 0;display: inline-block;}
.index_header .login-after span{font-size: 14px; color: #fff;padding-right: 10px;}
.index_header .login-after a{font-size: 14px;color: #fff;display: inline-block;padding-left: 10px;border-left: 1px solid #fff;}
.layui-nav .layui-nav-item a{font-size: 16px;color: rgba(255,255,255,1);padding: 0 17px;}
.layui-nav .layui-nav-item dd a{font-size: 14px;}
.layui-nav .layui-nav-child a{color: #333;}
.layui-nav .layui-nav-child a:hover{background: #fff !important;color: #00a3ff !important;}
/*底部*/
.m_footer{background-color: #393c40;overflow: hidden; max-height: 380px}
.m_footer .fttop{padding:50px 0 30px 0;overflow: hidden;}
.m_footer dl{float: left;width: 20%;}
.m_footer dl:last-child{width: 40%;}
.m_footer dt{color: #fff; margin-bottom: 20px;}
.m_footer dd,.m_footer dd a{color: #838383;line-height: 36px;}
.m_footer dd i{width: 18px;height: 20px;display: inline-block;vertical-align: middle;margin-top: -4px;margin-right: 8px;}
.m_footer dd i.address{background: url(../images/sl/icon-address.png) no-repeat center;}
.m_footer dd i.tel{background: url(../images/sl/icon-phone.png) no-repeat center;}
.m_footer dd i.email{background: url(../images/sl/icon-email.png) no-repeat center;}
.m_footer .ftcen{padding: 30px 0; border-top: 1px solid #9c9b9b;}
.m_footer .ftcen h1{color: #fff;margin-bottom: 20px;}
.m_footer .ftcen a{color: #838383;margin-right: 30px;}
.m_footer dd a:hover,.m_footer .ftcen a{color: #afadad}
.m_footer .ftbottom{color: #838383;text-align: center;padding: 30px 0;background-color: #232426;}

/*右侧浮动*/
.m_ycfd{position: fixed;bottom: 100px;right: 30px;}
.m_ycfd a{display:block;width: 50px;height: 50px;border-radius: 4px;background: rgba(0,0,0,.5);text-align: center;line-height: 50px;margin-top: 10px;}
.m_ycfd a i{display: inline-block; background: url(../images/sl/fd.png) no-repeat;vertical-align: middle;}
.m_ycfd .QQ i{width: 29px;height: 32px;}
.m_ycfd .erweima{position: relative;}
.m_ycfd .erweima i{width: 29px;height: 28px;background-position: 0 -48px;}
.m_ycfd .erweima .con{text-align: center;width:200px;padding:10px;background-color: #fff; position: absolute;left: -230px;bottom: 0;border:1px solid #e2e2e2; display: none;}
.m_ycfd .erweima .con p{color: #666;margin: 10px 0;}
.m_ycfd .erweima:hover .con{display: block;}
.m_ycfd .gotop i{width: 24px;height: 13px;background-position: 0 -91px;}

/*首页标题*/
.index_title{text-align: center;}
.index_title .tt{font-size: 40px;color: #000;}
.index_title .subtt{font-size: 20px;color: #777;margin-top: 20px;}
/*课程系列*/
.kecheng{padding: 80px 0 120px 0;}
.kecheng li{width: 500px;height: 130px;padding: 50px 40px;overflow: hidden;float: left;margin-left: 40px;transition: all 1s;}
.kecheng .pic{width: 150px;height: 130px;background: url(../images/sl/kecing_bg.png) no-repeat;text-align: center;line-height: 130px;position: relative; transition: all 1.8s;}
.kecheng .pic i,.kecheng .pic span{width: 74px;height: 62px;background: url(../images/sl/kecing2.png) no-repeat;display: inline-block;vertical-align: middle;
	position: absolute;
	top: 50%;
	left:50%;
	margin-left: -37px;
	margin-top: -31px;
	transition: all 1.3s;}
.kecheng .pic span{background-position: 0 -84px;height: 0;transition: all 1.3s;}
.kecheng .text{text-align: center;width: 290px;margin-top: 5px}
.kecheng .text h1{font-size: 24px;font-weight: lighter;color: #fff; letter-spacing: 3px;border-bottom: 1px solid #fff;padding-bottom: 20px;transition: all 1.3s;}
.kecheng .text p{font-size: 16px;font-weight: lighter;color: #fff; letter-spacing: 3px;line-height: 28px; padding-top: 20px;transition: all 1.3s;}

.kecheng li.li1{ background-color: #fb8689;}
.kecheng li.li2{ background-color: #76ceff;}
.kecheng li.li3{ background-color: #54c2ff;}
.kecheng li.li4{ background-color: #ffadaf;}
.kecheng li.li5{ background-color: #59dcfb;}

.kecheng li.li2 .pic i,.kecheng li.li2 .pic span{width: 58px;height: 80px;background-position: 0 -168px;margin-left: -20px;margin-top: -42px;}
.kecheng li.li2 .pic span{background-position: 0 -270px;height: 0;}

.kecheng li.li3 .pic i,.kecheng li.li3 .pic span{width: 84px;height: 88px;background-position: 0 -372px;margin-left: -42px;margin-top: -44px;}
.kecheng li.li3 .pic span{background-position: 0 -482px;height: 0;}

.kecheng li.li4 .pic i,.kecheng li.li4 .pic span{width: 70px;height: 70px;background-position: 0 -592px;margin-left: -35px;margin-top: -36px;}
.kecheng li.li4 .pic span{background-position: 0 -691px;height: 0;}

.kecheng li.li5 .pic i,.kecheng li.li5 .pic span{width: 81px;height: 71px;background-position: 0 -788px;margin-left: -39px;margin-top: -38px;}
.kecheng li.li5 .pic span{background-position: 0 -881px;height: 0;}

.kecheng li:hover{background-color: #fff;}
.kecheng li:hover .text h1{color: #000;border-bottom-color: #000;}
.kecheng li:hover .text p{color: #000}
/*.kecheng li:hover .pic{background: url(../images/sl/kecing_bg_HD.png) no-repeat;}*/
.kecheng li:hover .pic i{height: 0;}
.kecheng li.li1:hover .pic{background: url(../images/sl/kecing_bg_HD1.png) no-repeat;}
.kecheng li.li2:hover .pic{background: url(../images/sl/kecing_bg_HD2.png) no-repeat;}
.kecheng li.li3:hover .pic{background: url(../images/sl/kecing_bg_HD3.png) no-repeat;}
.kecheng li.li4:hover .pic{background: url(../images/sl/kecing_bg_HD4.png) no-repeat;}
.kecheng li.li5:hover .pic{background: url(../images/sl/kecing_bg_HD5.png) no-repeat;}

.kecheng li.li1:hover .pic span{height: 62px;}
.kecheng li.li2:hover .pic span{height: 80px;}
.kecheng li.li3:hover .pic span{height: 88px;}
.kecheng li.li4:hover .pic span{height: 72px;}
.kecheng li.li5:hover .pic span{height: 76px;}

.kecheng .top{margin-top: 60px;margin-left: -40px;overflow: hidden;}
.kecheng .top .pic{float: left;}
.kecheng .top .text{float: right;}

.kecheng .bottom{clear: both;margin-top:36px;margin-left: -40px;overflow: hidden;}
.kecheng .bottom li{width: 293px;height: 290px;}
.kecheng .bottom .pic{margin:0 auto;}
.kecheng .bottom .text{margin-top:50px;}

/*大咖导师*/
.dsjs{padding: 90px 0 40px 0;background:url(../images/sl/news_bg.jpg) no-repeat center;position: relative;}
.dsjs .index_title{padding-bottom: 50px;}
.dsjs .wrap{width: 1120px;}
.dsjs .index_title .tt,.dsjs .index_title .subtt{color: #fff;}
.daoshi{margin-top: 60px;margin-left:-4px;overflow: hidden;*margin-left:-170px;}
.daoshi li{text-align: center;width: 282px;height: 336px;position: relative;float: left;margin-left:4px;}
.daoshi .pic{width: 122px;height: 122px;border-radius: 50%;display: inline-block;transition: all 1.3s;}
.daoshi .name{font-size: 20px;color: #fff;letter-spacing: 3px;margin:20px 0 12px 0;transition: all .8s;}
.daoshi .zy{font-size: 16px;color: #fff;letter-spacing: 3px;transition: all .8s;}
.daoshi .js{font-size: 14px;color: #fff;padding: 0 22px;line-height: 22px;height: 0;overflow: hidden; position: absolute;bottom: 20px;transition: all 1s;}
.daoshi .bgblue{width: 282px;height: 0;background-color: #13a9fe;position: absolute;bottom: 0;transition: all .8s;}
.daoshi .info{width: 282px;position: absolute;top: 24px;}
.daoshi li:hover .bgblue{height: 336px;}
.daoshi li:hover .js,.daoshi li:hover .name,.daoshi li:hover .zy{color: #fff;}
.daoshi li:hover .js{height: 66px;}
.dsjs .prev,.dsjs .next{font-family:"SimSun"; font-size: 60px;color: #fff;position: absolute;top: 50%;left: 50%;z-index: 6;}
.dsjs .prev{margin-left: -600px;}
.dsjs .next{margin-left: 600px;}

/*学习方式*/
.learn{padding: 90px 0;}
.learncon{margin-top: 90px;overflow: hidden;}
.learncon li{width: 33.33%;float: left;text-align: center;}
.learncon .tt{font-size: 20px;color: #000;letter-spacing: 3px;margin-top: 30px;text-align: center;}
.learncon .js{font-size: 14px;color: #555;line-height: 24px;letter-spacing: 3px;margin-top: 16px;}

/*胜蓝口碑*/
.slkb{background: url(../images/sl/user_data_bg.jpg) no-repeat;background-repeat: no-repeat;background-size: cover;background-position: center;background-attachment: fixed;}
.slkbcon{padding: 90px 0 80px 0;}
.slkbcon .tt{font-size: 40px;color: #fff;letter-spacing: 14px;text-align: center;}
.slkbcon ul{margin-top: 80px;overflow: hidden;}
.slkbcon li{font-size: 20px;color: #fff;line-height: 60px;float: left;width: 25%;}
.slkbcon li span{font-size: 60px;}

/*学习保障*/
.xxbz{padding: 100px 0 130px 0;}
.xxbzcon{margin-top: 100px;margin-left:-34px;overflow: hidden;}
.xxbzcon li{width: 274px;height: 239px;background: url(../images/sl/bgbz.png) no-repeat;float: left;margin-left:34px;transition: all 1s;}
.xxbzcon .tt{font-size: 20px;color: #000; letter-spacing: 3px;text-align: center;padding: 50px 0 20px 0;transition: all 1s;}
.xxbzcon .js{font-size: 16px;color: #777;letter-spacing: 3px;text-align: center;padding:0 40px;line-height: 24px;transition: all 1s;}
.xxbzcon li:hover{background: url(../images/sl/bgbz_HD.png) no-repeat;}
.xxbzcon li:hover .tt,.xxbzcon li:hover .js{color: #fff;}

.bz2{padding: 90px 0;}
.business{overflow:hidden;padding:80px 0;}
.business ul{margin-left:-33px;margin-top: 80px;}
.business li{width:212px;padding:30px;text-align: center;border:1px solid #e8e8e8;background-color: #fff; float: left;margin-left:33px;}
.business li.list1{border-top:1px solid #ffac13;}
.business li.list2{border-top:1px solid #95e26b;}
.business li.list3{border-top:1px solid #ff9489;}
.business li.list4{border-top:1px solid #55bfff;}
.business li h1{font-size:22px;color:#333;line-height:24px;letter-spacing: 3px;}
.business .content{color:#999;height:110px; line-height:20px;margin-top:20px;overflow:hidden;letter-spacing: 3px;}
.business li .pic{width:127px;height:111px;line-height:111px;background:url(../images/sl/index.png) no-repeat;margin:0 auto;}
.business li .pic1{background-position:0 0;}
.business li .pic2{background-position:-140px 0;}
.business li .pic3{background-position:-280px 0;}
.business li .pic4{background-position:-419px 0;}
.business li .pic i{width:45px;height:45px;display:inline-block; background:url(../images/sl/index.png) no-repeat;vertical-align:middle;
  transition:all 0.3s ease-in-out 0s;-webkit-transition:all 0.3s ease-in-out 0s;o-transition:all 0.3s ease-in-out 0s;}
.business li .pic i.icon1{width:45px;height:40px;background-position:0 -125px;}
.business li .pic i.icon2{width:35px;height:41px;background-position:-162px -125px;}
.business li .pic i.icon3{width:42px;height:45px;background-position:-322px -125px;}
.business li .pic i.icon4{width:40px;height:40px;background-position:-456px -125px;}
.business li:hover .pic i.icon1{background-position:-73px -125px;}
.business li:hover .pic i.icon2{background-position:-235px -125px;}
.business li:hover .pic i.icon3{background-position:-381px -125px;}
.business li:hover .pic i.icon4{background-position:-518px -125px;}

/*胜蓝新闻*/
.slnews{padding: 90px 0;background-color: #f7f7f7;}
.newscon{overflow: hidden;}
.newscon .index_title{margin-bottom: 50px;}
.newscon .index_title .tt{margin-top: 0;}
.newscon .left{width: 430px;float: left;}
.newscon .pic{width: 430px;height: 325px;}
.newscon .pic img{width: 430px;height: 325px;transition: transform 1s ease 0s;}
.newscon .tt{margin-top: 20px;}
.newscon .tt a{font-size: 16px;color: #000;}
.newscon .time{font-size: 14px;color: #666;margin-top: 16px;}
.newscon .jj{font-size: 14px;color: #444;line-height: 24px;margin-top: 6px;}
.newscon .left .jj{margin-top: 16px;height: 100px;overflow: hidden;text-indent: 2em;letter-spacing: 2px;}
.newscon .right{width: 720px;float: right;overflow: hidden;}
.newscon .right li{clear: both;margin-top: 26px;overflow: hidden;}
.newscon .right .pic{width: 170px;height: 130px;float: left;}
.newscon .right .pic img{width: 170px;height: 130px;}
.newscon .right .text{width: 520px;float: right;}
.newscon .right .text .tt{margin-top: 14px;}
.newscon .left:hover .tt a,.newscon .right li:hover .tt a{color: #13a9fe;}
.newscon .left:hover .pic img,.newscon .right li:hover .pic img{transform: scale(1.05);-webkit-transform: scale(1.05);}
    

.slider{padding: 100px 0;overflow: hidden;background:url(../images/sl/bz_bg.jpg) no-repeat center;}
.slider .title{font-size: 20px;color: #000;margin-bottom: 20px;}
/*胜蓝荣誉*/
.slry{width: 525px;float: left;padding: 25px 40px 25px 25px;box-shadow: 0 0 6px #999;background-color: #fff;}
.slry li{width: 170px;float: left;margin-right: 15px;}
.slry li img{width: 170px;height: 120px;display: block;}
/*合作企业*/
.hzqy{width: 490px;float: right;padding: 25px 40px;box-shadow: 0 0 6px #999;position: relative;background-color: #fff;}
.hzqy .bd{height: 120px;overflow: hidden;}
.hzqy li{width: 164px;height: 120px;overflow: hidden;text-align: center;line-height: 120px;}
.hzqy li img{max-width: 164px;height: auto;display: inline-block;vertical-align: middle;}
.hzqy .prev,.hzqy .next{font-family: "SimSun";font-size: 26px;font-weight: bold; color: #777;position: absolute;top: 50%;margin-top: 8px;z-index: 2;}
.hzqy .prev{left: 25px;}
.hzqy .next{right: 25px;}

.learn .vp-thr-box{display: none\9;}
.learn .pic{display: none;display: block\9;}


.ic_footer.m-v-bx.f-link-bx {padding: 0 0 20px;}
.ic_footer.m-v-bx.f-link-bx .f-link-ul li {margin: 4px 0;}
.f-link-bx {padding-bottom: 30px;}
.f-link-bx .m-v-c-title {margin-top: 20px;}
.f-link-bx .m-v-c-title h3 {font-size: 18px;}
.f-link-bx .m-v-c-title h3 s {bottom: 5px;}
.f-link-ul li,.f-link-ul li a {display: inline-block;vertical-align: middle;}
.lt-ie9.lt-ie8 .f-link-ul li,.lt-ie9.lt-ie8 .f-link-ul li a {display: inline;}
.f-link-ul li {margin: 8px 0;color: #e2e2e2;line-height: 18px;}
.f-link-ul li a {color: #4e4e4e;font-size: 12px;padding: 0 15px;}

.vp-thr-ul ul {clear: both;margin: 60px 0 0 -9.33%;overflow: hidden;}
.vp-thr-ul ul li {float: left;margin-left: 9.33%;width: 24%;}
.vp-thr-ul ul li .vp-thr-box {position: relative;height: 300px;}
.vp-thr-desc {margin: 20px 0;}
.vp-thr-desc p {line-height: 200%;font-size: 16px;color: #ACB1B2;text-align: center;}
.vp-thr-desc p big {font-size: 24px;}



.loader {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  margin-top: -20px;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg) scaleX(-1);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-90deg) scaleX(-1);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg) scaleX(-1);
  transform: translateX(-50%) translateY(-50%) rotate(-90deg) scaleX(-1);
}
.loader div {
  position: absolute;
  left: 0;
  width: 10px;
  height: 10px;
  background: #445b73;
  border-radius: 100%;
  opacity: 0;
}

.loader div:nth-child(1) {
  top: 0rem;
  background: #65abf1;
  -moz-animation: dna_rotate 2s 0s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 0s infinite ease-in-out;
  animation: dna_rotate 2s 0s infinite ease-in-out;
}

.loader div:nth-child(2) {
  top: 0.6rem;
  -moz-animation: dna_rotate 2s 1.1s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 1.1s infinite ease-in-out;
  animation: dna_rotate 2s 1.1s infinite ease-in-out;
}

.loader div:nth-child(3) {
  top: 1.2rem;
  background: #65abf1;
  -moz-animation: dna_rotate 2s 0.2s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 0.2s infinite ease-in-out;
  animation: dna_rotate 2s 0.2s infinite ease-in-out;
}

.loader div:nth-child(4) {
  top: 1.8rem;
  -moz-animation: dna_rotate 2s 1.3s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 1.3s infinite ease-in-out;
  animation: dna_rotate 2s 1.3s infinite ease-in-out;
}

.loader div:nth-child(5) {
  top: 2.4rem;
  background: #65abf1;
  -moz-animation: dna_rotate 2s 0.4s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 0.4s infinite ease-in-out;
  animation: dna_rotate 2s 0.4s infinite ease-in-out;
}

.loader div:nth-child(6) {
  top: 3rem;
  -moz-animation: dna_rotate 2s 1.5s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 1.5s infinite ease-in-out;
  animation: dna_rotate 2s 1.5s infinite ease-in-out;
}

.loader div:nth-child(7) {
  top: 3.6rem;
  background: #65abf1;
  -moz-animation: dna_rotate 2s 0.6s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 0.6s infinite ease-in-out;
  animation: dna_rotate 2s 0.6s infinite ease-in-out;
}

.loader div:nth-child(8) {
  top: 4.2rem;
  -moz-animation: dna_rotate 2s 1.7s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 1.7s infinite ease-in-out;
  animation: dna_rotate 2s 1.7s infinite ease-in-out;
}

.loader div:nth-child(9) {
  top: 4.8rem;
  background: #65abf1;
  -moz-animation: dna_rotate 2s 0.8s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 0.8s infinite ease-in-out;
  animation: dna_rotate 2s 0.8s infinite ease-in-out;
}

.loader div:nth-child(10) {
  top: 5.4rem;
  -moz-animation: dna_rotate 2s 1.9s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 1.9s infinite ease-in-out;
  animation: dna_rotate 2s 1.9s infinite ease-in-out;
}

.loader div:nth-child(11) {
  top: 6rem;
  background: #65abf1;
  -moz-animation: dna_rotate 2s 1s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 1s infinite ease-in-out;
  animation: dna_rotate 2s 1s infinite ease-in-out;
}

.loader div:nth-child(12) {
  top: 6.6rem;
  -moz-animation: dna_rotate 2s 2.1s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 2.1s infinite ease-in-out;
  animation: dna_rotate 2s 2.1s infinite ease-in-out;
}

.loader div:nth-child(13) {
  top: 7.2rem;
  background: #65abf1;
  -moz-animation: dna_rotate 2s 1.2s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 1.2s infinite ease-in-out;
  animation: dna_rotate 2s 1.2s infinite ease-in-out;
}

.loader div:nth-child(14) {
  top: 7.8rem;
  -moz-animation: dna_rotate 2s 2.3s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 2.3s infinite ease-in-out;
  animation: dna_rotate 2s 2.3s infinite ease-in-out;
}

.loader div:nth-child(15) {
  top: 8.4rem;
  background: #65abf1;
  -moz-animation: dna_rotate 2s 1.4s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 1.4s infinite ease-in-out;
  animation: dna_rotate 2s 1.4s infinite ease-in-out;
}

.loader div:nth-child(16) {
  top: 9rem;
  -moz-animation: dna_rotate 2s 2.5s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 2.5s infinite ease-in-out;
  animation: dna_rotate 2s 2.5s infinite ease-in-out;
}

.loader div:nth-child(17) {
  top: 9.6rem;
  background: #65abf1;
  -moz-animation: dna_rotate 2s 1.6s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 1.6s infinite ease-in-out;
  animation: dna_rotate 2s 1.6s infinite ease-in-out;
}

.loader div:nth-child(18) {
  top: 10.2rem;
  -moz-animation: dna_rotate 2s 2.7s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 2.7s infinite ease-in-out;
  animation: dna_rotate 2s 2.7s infinite ease-in-out;
}

.loader div:nth-child(19) {
  top: 10.8rem;
  background: #65abf1;
  -moz-animation: dna_rotate 2s 1.8s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 1.8s infinite ease-in-out;
  animation: dna_rotate 2s 1.8s infinite ease-in-out;
}

.loader div:nth-child(20) {
  top: 11.4rem;
  -moz-animation: dna_rotate 2s 2.9s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 2.9s infinite ease-in-out;
  animation: dna_rotate 2s 2.9s infinite ease-in-out;
}

.loader div:nth-child(21) {
  top: 12rem;
  background: #65abf1;
  -moz-animation: dna_rotate 2s 2s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 2s infinite ease-in-out;
  animation: dna_rotate 2s 2s infinite ease-in-out;
}

.loader div:nth-child(22) {
  top: 12.6rem;
  -moz-animation: dna_rotate 2s 3.1s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 3.1s infinite ease-in-out;
  animation: dna_rotate 2s 3.1s infinite ease-in-out;
}

.loader div:nth-child(23) {
  top: 13.2rem;
  background: #65abf1;
  -moz-animation: dna_rotate 2s 2.2s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 2.2s infinite ease-in-out;
  animation: dna_rotate 2s 2.2s infinite ease-in-out;
}

.loader div:nth-child(24) {
  top: 13.8rem;
  -moz-animation: dna_rotate 2s 3.3s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 3.3s infinite ease-in-out;
  animation: dna_rotate 2s 3.3s infinite ease-in-out;
}

.loader div:nth-child(25) {
  top: 14.4rem;
  background: #65abf1;
  -moz-animation: dna_rotate 2s 2.4s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 2.4s infinite ease-in-out;
  animation: dna_rotate 2s 2.4s infinite ease-in-out;
}

.loader div:nth-child(26) {
  top: 15rem;
  -moz-animation: dna_rotate 2s 3.5s infinite ease-in-out;
  -webkit-animation: dna_rotate 2s 3.5s infinite ease-in-out;
  animation: dna_rotate 2s 3.5s infinite ease-in-out;
}

@-moz-keyframes dna_rotate {
  0% {
    opacity: 1;
    -moz-transform: scale(1);
    transform: scale(1);
    left: 40%;
    z-index: 0;
  }
  25% {
    opacity: 1;
    -moz-transform: scale(1.8);
    transform: scale(1.8);
  }
  50% {
    opacity: 1;
    left: 60%;
    z-index: 1;
    -moz-transform: scale(1);
    transform: scale(1);
  }
  75% {
    opacity: 1;
    -moz-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    left: 40%;
    z-index: 0;
    -moz-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes dna_rotate {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    left: 40%;
    z-index: 0;
  }
  25% {
    opacity: 1;
    -webkit-transform: scale(1.8);
    transform: scale(1.8);
  }
  50% {
    opacity: 1;
    left: 60%;
    z-index: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  75% {
    opacity: 1;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    left: 40%;
    z-index: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes dna_rotate {
  0% {
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    left: 40%;
    z-index: 0;
  }
  25% {
    opacity: 1;
    -moz-transform: scale(1.8);
    -ms-transform: scale(1.8);
    -webkit-transform: scale(1.8);
    transform: scale(1.8);
  }
  50% {
    opacity: 1;
    left: 60%;
    z-index: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  75% {
    opacity: 1;
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    left: 40%;
    z-index: 0;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/*step-2*/
.animation {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 260px;
  margin: 2px auto 0;
  vertical-align: middle;
}
.animation .device {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  border: 1px solid #65abf1;
  -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.animation .device .phone-home-button,
.animation .device .tablet-home-button {
  position: absolute;
  border-radius: 50%;
  border: 1px solid #65abf1;
  opacity: 0;
  z-index: 1;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.animation .device .phone-home-button {
  height: 10px;
  margin-top: -5px;
  right: 4px;
  top: 50%;
  width: 10px;
}
.animation .device .tablet-home-button {
  bottom: 2px;
  height: 10px;
  left: 50%;
  margin-left: -5px;
  width: 10px;
}
.animation .device .screen-stand {
  position: absolute;
  width: 100%;
  margin-left: -10px;
  margin-top: -1px;
  top: 60%;
  opacity: 0;
  z-index: 1;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.animation .device .screen-stand .leg {
  position: absolute;
  width: 12px;
  height: 16px;
  left: 50%;
  top: 1px;
  margin-left: -6px;
  border: 1px solid #65abf1;
}
.animation .device .screen-stand .foot {
  position: absolute;
  width: 120px;
  height: 4px;
  left: 50%;
  top: 18px;
  margin-left: -60px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border: 1px solid #65abf1;
}
.animation .device .display {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #65abf1;
  background: #fff;
  z-index: 3;
}
.animation .device .display div {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 100%;
  white-space: nowrap;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.animation .device .display div div {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  margin-top: -14px;
  font-size: 20px;
  text-align: center;
  color: #13a9fe;
}
.animation .device .display div div em {
  font-weight: lighter;
}
.animation[data-animation-step="1"] .device {
  width: 70%;
  height: 70%;
  padding: 10px;
  border-radius: 4px;
}
.animation[data-animation-step="1"] .device .slide1 {
  left: 0%;
}
.animation[data-animation-step="1"] .device .screen-stand {
  opacity: 1;
  top: 100%;
}
.animation[data-animation-step="2"] .device {
  width: 36%;
  height: 70%;
  padding: 14px 14px 20px;
  border-radius: 10px;
}
.animation[data-animation-step="2"] .device .slide1 {
  left: -100%;
}
.animation[data-animation-step="2"] .device .slide2 {
  left: 0%;
}
.animation[data-animation-step="2"] .device .tablet-home-button {
  opacity: 1;
}
.animation[data-animation-step="3"] .device {
  border-radius: 6px;
  height: 32%;
  padding: 10px 20px 10px 10px;
  width: 50%;
}
.animation[data-animation-step="3"] .device .slide1,
.animation[data-animation-step="3"] .device .slide2 {
  left: -100%;
}
.animation[data-animation-step="3"] .device .slide3 {
  left: 0%;
}
.animation[data-animation-step="3"] .device .phone-home-button {
  opacity: 1;
}
/*step-3*/
.ellipses-container {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  top: -20px;
}
.ellipses {
  border-radius: 50%;
  position: absolute;
  top: 0;
  border-style: solid;
}

.ellipses__outer--thin {
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  top: 50%;
  left: 50%;
  border-width: 1px;
  border-color: rgba(9, 56, 62, 0.2);
  -webkit-animation: ellipsesOrbit 2s ease-in-out infinite;
          animation: ellipsesOrbit 2s ease-in-out infinite;
}
/*.ellipses__outer--thin:after {
  content: "";
  background-image: url("../img/ellipses_dial.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  opacity: 0.15;
}*/
.ellipses__outer--thick {
  width: 180px;
  height: 180px;
  margin: -90px 0 0 -90px;
  top: 50%;
  left: 50%;
  border-color: #65abf1 transparent;
  border-width: 2px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-animation: ellipsesRotate 2s ease-in-out infinite;
          animation: ellipsesRotate 2s ease-in-out infinite;
}
.ellipses__orbit {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 2px;
  border-color: #65abf1;
  top: 5rem;
  right: 6.75rem;
}
.ellipses__orbit:before {
  content: '';
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  display: inline-block;
  background-color: #445b73;
  margin: 0 auto;
  left: 0;
  right: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@-webkit-keyframes ellipsesRotate {
  0% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  100% {
    -webkit-transform: rotate(-405deg);
            transform: rotate(-405deg);
  }
}
@keyframes ellipsesRotate {
  0% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  100% {
    -webkit-transform: rotate(-405deg);
            transform: rotate(-405deg);
  }
}
@-webkit-keyframes ellipsesOrbit {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes ellipsesOrbit {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/*html {*/
/*    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);*/
/*    -webkit-filter: grayscale(100%);*/
/*}*/