.our-process { text-align:center; position:relative; margin:-22px 0 0 0 }
.bb-name { color:#3aabc9; font-weight:bold; text-transform:uppercase; font-size:24px; margin:0px 0px 30px 0px; }
.bb-title, .bb-title-sub { color:#251f20; text-align:center; font-size:14px; font-family:"Lato", Helvetica, Arial, sans-serif; padding:0; margin:0 }
.bb-title { font-size:28px; font-weight:300; margin:30px 0 10px; line-height:32px }
.bb-title-sub { font-size:16px; font-weight:normal }
.our-process .bb-name { margin-top:30px }
.animation-target { -webkit-animation:animation 750ms linear infinite both; animation:animation 750ms linear infinite both }
.animation-target { -webkit-animation:animation 750ms linear both; animation:animation 750ms linear both }
h2.process-subtitle { padding:10px 10px 40px; font-size:52px; text-transform:uppercase; color:rgba(0,0,0,0.8); position:relative; text-shadow:1px 1px 2px rgba(0,0,0,0.2) }
h2.process-subtitle:before { width:4px; height:40px; background:rgba(17,17,22,0.8); content:''; position:absolute; right:75%; margin-right:-4px; bottom:-4px; -moz-border-radius:2px 2px 0 0; -webkit-border-radius:2px 2px 0 0; border-radius:2px 2px 0 0 }
h2.process-subtitle:after { width:25%; height:0; border-bottom:4px dotted rgba(17,17,22,0.8); content:''; position:absolute; right:50%; margin-right:-1px; bottom:-4px }
.process-links { position:absolute; left:10px; top:25%; width:98px; z-index:1001 }
.process-links a.current{ background:rgba(8,55,106,0.5);}
.small-icn { background:#092c70; font-size:16px; width:85px; height:85px; line-height:40px; margin:38px 5px 5px 25px; float:left; border-radius:50%; display:block; text-align:center; -webkit-transition:background .2s linear; -moz-transition:background .2s linear; -o-transition:background .2s linear; -ms-transition:background .2s linear; transition:background .2s linear; padding:15px 0 0 0 }
.process-links a { background:#092c70; font-size:16px; width:80px; height:80px; line-height:40px; margin:5px; border-radius:50%; display:block; text-align:center; -webkit-transition:background .2s linear; -moz-transition:background .2s linear; -o-transition:background .2s linear; -ms-transition:background .2s linear; transition:background .2s linear; padding:12px 0 0 0 }
.process-links a:hover { background:rgba(8,55,106,0.5); }
.process-container { width:100%; position:relative; text-align:left; float:left; overflow:hidden }
.process-title { font-size:20px; margin:45px 0 0 0; float:none; text-transform:uppercase; color:#251f20; text-shadow:0 1px 1px #fff; padding:20px 0; font-weight:300 }
.process-container:before { position:absolute; width:4px; background:rgba(17,17,22,0.8); top:0; left:50%; margin-left:-2px; content:''; height:100% }
.process-row { width:100%; clear:both; float:left; position:relative; padding:11px 0; z-index:999 }
.process-left, .process-right { float:left; width:50%; position:relative }
.process-right { padding-left:2% }
.process-left { text-align:right; float:left; padding-right:2% }
.pro-right { float:right!important }
.process-circle { border-radius:50%; overflow:hidden; display:block; text-indent:-9000px; text-align:left; -webkit-box-shadow:0 2px 5px rgba(230,235,240,1.0) inset, 0px 0 0 6px rgba(230,235,240,1.0); -moz-box-shadow:0 2px 5px rgba(230,235,240,1.0) inset, 0px 0 0 6px rgba(230,235,240,1.0); box-shadow:0 2px 5px rgba(230,235,240,1.0) inset, 0px 0 0 6px rgba(230,235,240,1.0); background-color:#fff; background-repeat:no-repeat; background-position:center center; position:static }
.process-small .process-circle { width:100px; height:100px }
.process-medium .process-circle { width:200px; height:200px }
.process-large .process-circle { width:210px; height:210px }
.process-circle-deco:before { width:29%; height:0; border-bottom:5px dotted #ddd; border-bottom:5px dotted #092c70; -webkit-box-shadow:0 1px 1px #fff; -moz-box-shadow:0 1px 1px #fff; box-shadow:0 1px 1px #fff; position:absolute; top:50%; content:''; margin-top:-3px }
.process-circle-deco:after { width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; content:''; position:absolute; top:50%; margin-top:-10px }
.process-left .process-circle-deco:before { right:2% }
.process-right .process-circle-deco:before { left:2% }
.process-left .process-circle-deco:after { right:0; border-right:10px solid rgba(17,17,22,0.8) }
.process-right .process-circle-deco:after { left:0; border-left:10px solid rgba(17,17,22,0.8) }
.process-left .process-circle { float:right; margin-right:30% }
.process-right .process-circle { float:left; margin-left:30% }
.process-container .process-bg { margin-top:34px; padding:10px 15px; color:#fff; background:rgba(230,235,240,1.0) }
.process-container .process-medium .process-bg { margin-top:82px }
.process-container .process-large .process-bg { margin-top:67px; margin-left:70px }
.process-container .process-left .process-bg { border-right:5px solid #092c70; text-align:left }
.process-container .process-right .process-bg { border-left:5px solid #092c70 }
.process-container .process-bg span { color:rgba(255,255,255,0.8); font-size:13px; display:block; padding-bottom:5px }
.process-container .process-bg div { font-size:14px; line-height:22px; color:#333; display:block }
.process-circle-1 { background-image:url(../images/order-lg.jpg) }
.process-circle-2 { background-image:url(../images/pack-lg.png) }
.process-circle-3 { background-image:url(../images/transfer-lg.png) }
.process-circle-4 { background-image:url(../images/happy-lg.png) }



@media(min-width:320px) and (max-width:767px) {
.cl-title { font-size:22px }
.process-row { padding:6px 0 }
.process-links { display:none }
.process-links a { background:rgba(0,0,0,0.2); font-size:16px; width:40px; height:40px; line-height:40px; margin:5px; border-radius:50%; display:block; text-align:center; -webkit-transition:background .2s linear; -moz-transition:background .2s linear; -o-transition:background .2s linear; -ms-transition:background .2s linear; transition:background .2s linear; padding:0 }
.process-links a img { width:25px; height:25px }
.process-large .process-circle { width:85px; height:85px }
.process-circle-deco:after { width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; content:''; position:absolute; top:50%; margin-top:-10px }
.process-left .process-circle-deco:after { right:0; border-right:7px solid rgba(17,17,22,0.8) }
.process-right .process-circle-deco:after { left:0; border-left:7px solid rgba(17,17,22,0.8) }
.process-circle-deco:before { width:29%; height:0; border-bottom:2px dotted #ddd; border-bottom:2px dotted rgba(17,17,22,0.3); -webkit-box-shadow:0 1px 1px #fff; -moz-box-shadow:0 1px 1px #fff; box-shadow:0 1px 1px #fff; position:absolute; top:50%; content:''; margin-top:-3px }
.process-circle { background-size:cover; box-shadow:0 2px 5px #092c70 inset, 0px 0 0 6px #092c70 }
.process-title { font-size:15px; text-transform:uppercase; margin:26px 0 0 0; color:#092c70; text-shadow:0 1px 1px #fff; padding:20px 0; font-weight:300 }
.process-container .process-bg a { font-size:17px; font-weight:300; line-height:27px; color:rgba(255,255,255,0.9); display:block }
.small-icn { background:#092c70; font-size:16px; width:50px; height:50px; line-height:40px; margin:38px 5px 5px 25px; float:left; border-radius:50%; display:block; text-align:center; -webkit-transition:background .2s linear; -moz-transition:background .2s linear; -o-transition:background .2s linear; -ms-transition:background .2s linear; transition:background .2s linear; padding:14px 0 0 0 }
.small-icn img { height:36px; width:36px; margin-top:-5px }
.process-container .process-large .process-bg { margin-top:5px; margin-left:20px }
.process-container .process-bg div { font-size:12px; line-height:16px }
.process-circle-1 { background-size:100% 100% }
.process-circle-2 { background-size:100% 100% }
.process-circle-3 { background-size:100% 100% }
.process-circle-4 { background-size:100% 100% }
.process-circle-5 { background-size:100% 100% }
.process-circle-6 { background-size:100% 100% }


}