/* ----------------------------
How does it Work Section
---------------------------- */
section.work { /* background: #f5f5f5; padding-bottom: 0;  */ }
section.work .center_phone { height: 250px; background: url('../images/mobile_frame2.png') top center no-repeat; margin: 0 auto; padding-top: 15px; position: relative; left: 50%; width: 320px; margin-left: -160px; }
.phone_previews { overflow: hidden; padding-top: 60px; }
/* --------------------------------------------------------------
>>> TABLE OF CONTENTS:----------------------------------------------------------------
########################################
File Name:phone-position.css
Template Name:Rocket App
Created By:Muneeb Ul Haq Gilani
http://themeforest.net/user/thematicwebs
Description:Below is the description of phone-position.css file with table of contents and style names for easy search.
#########################################

0.0 - OWL slider styling
1.0 - Bullet Base Position Styling
2.0 - Right Length Positions
3.0 - Left Positions
4.0 - Bullet div > div Styling
5.0 - Phone Hover - Typography
6.0 - Phone Bullets - General Styling
-------------------------------------------------------------- */
/* Owl Slider */
section.work .owl-wrapper-outer { overflow: visible !important; }
section.work .owl-item { opacity: 0.2; filter: alpha(opacity=20); padding: 0 0px; }
section.work .owl-item.o_2away { opacity: 0.04; filter: alpha(opacity=04); transition: all .45s ease-in-out; -webkit-transition: all .45s ease-in-out; -moz-transition: all .45s ease-in-out; }
section.work .owl-item div { text-align: center; }
section.work .owl-item.active { opacity: 1; filter: alpha(opacity=100); transition: all .45s ease-in-out; -webkit-transition: all .45s ease-in-out; -moz-transition: all .45s ease-in-out; position: relative; z-index: 50 }
section.work .owl-item.active div img { width: 240px; margin-top: 0; }
section.work .owl-item div img { width: 220px; margin-top: 21px; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; text-align: center; }
section.work .owl-item h2 { color: #0e0f10; font-weight: 200; margin-top: 0; display: inline-block; width: 270px; height: 30px; position: absolute; top: -138px; left: 50%; margin-left: -135px; font-size: 15px; font-family: "Montserrat", sans-serif; text-transform: uppercase; opacity: 0; filter: alpha(opacity=0); }
.end_slider { text-indent: -9999px; }
section.work .owl-buttons { top: -65px; position: absolute; left: 50%; width: 300px; margin-left: -150px; }
/* ----------------------------
Bullet Base Position Styling
---------------------------- */
.bullet div > div { background: none !important; }
.bullet.left { left: 50px; }
.bullet.right { right: 70px; }
/* Bullet Height Positions */
.bullet.top { top: 30px; }
.bullet.centre { top: 140px; }
.bullet.btm { top: 268px; }

/* ----------------------------
Right Length Positions
---------------------------- */
.bullet.right div { background: url('../images/icon-bar.png') right repeat-x; position: absolute; left: 20px; height: 17px; width: 117px; }
/* Left close Length */
.right.close { margin-right: -120px; }
.bullet.right.close div > div { left: 30px; }
.bullet.right.close > div { width: 45px; }
.right.mid { margin-right: -70px; }
.right.mid > div { background: url('../images/icon-bar.png') right no-repeat; position: absolute; width: 108px; left: 17px; height: 14px; }
/* Right far Length */
.bullet.right.far { margin-right: -40px; }
.bullet.right.far div > div { left: 170px; }
.bullet.right.far > div { width: 185px; }
/* ----------------------------
Left Positions
---------------------------- */
.bullet.left div { background: url('../images/icon-bar.png') left repeat-x; position: absolute; right: 20px; height: 17px; width: 117px; }
/* Left close Length */
.left.close { margin-left: -120px; }
.bullet.left.close div > div { right: 30px; }
.bullet.left.close > div { width: 45px; }
/* Left mid Length */
.bullet.left.mid { margin-left: -70px; }
.bullet.left.mid div > div { right: 90px; }
.bullet.left.mid > div { width: 108px; }
/* Left far Length */
.bullet.left.far { margin-left: -40px; }
.bullet.left.far div > div { right: 170px; }
.bullet.left.far > div { width: 185px; }
/* ----------------------------
Bullet div > div Styling
---------------------------- */
.bullet.left div > div { display: block; padding-right: 30px; position: absolute; right: 90px; width: 250px; top: -12px; text-align: right; }
.bullet.right div > div { display: block; padding-left: 30px; position: absolute; left: 90px; width: 250px; top: -12px; text-align: left; }
.bulletText h4{ color: #f15b2a; font-size: 18px;}
.bulletText p{ color: #000000; font-size: 18px; line-height: 22px;}

/* ----------------------------
Phone Bullets - General Styling
---------------------------- */
section.work .owl-item .bullet { opacity: 0; filter: alpha(opacity=0); transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transform: scale(0.8); -webkit-transform: scale(0.8); -ms-transform: scale(0.8); -moz-transform: scale(0.8); width: 25px; height: 25px; border-radius: 20px; background: transparent; position: absolute; border: 3px solid #ff6633; }

section.work .owl-item .bullet::before {color: #ff6633; content: "+"; font-size: 32px; left: 0; position: absolute; text-align: center; top: -2px; width: 100%;}
section.work .owl-item.active h2 { transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transform: scale(0.8); -webkit-transform: scale(0.8); -ms-transform: scale(0.8); -moz-transform: scale(0.8); opacity: 0; filter: alpha(opacity=0); }
section.work .owl-item.active .bullet, section.work .owl-item.active h2 { opacity: 1; filter: alpha(opacity=100); transition: 1s all .4s ease-in-out; -webkit-transition: 1s all .4s ease-in-out; -moz-transition: 1s all .4s ease-in-out; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); }
/* .phoneOverlay */
.phoneOverlay { position: absolute; top: 0; left: 5%; width: 90%; height: 210px; background: rgba(0, 0, 0, 0.9); z-index: 9999; border: 1px solid #fff; display: none; padding-bottom: 30px; }
.phoneOverlay div { width: 280px; margin: 20px auto; text-align: center; }
.phoneOverlay div h4 { font: 18px "Montserrat", sans-serif; text-transform: uppercase; color: #ff6633; }
.phoneOverlay div p { font: 13px "Open Sans", sans-serif; color: #fff; }
.phoneOverlay .clicktoClose { color: #fff; text-transform: uppercase; cursor: pointer; position: absolute; bottom: 10px; margin: 0; width: 100%; text-align: center; }
.phone_previews >h4 { max-width: 290px; padding: 0 50px; margin: 10px auto; color: #ff6533; }

/* Bullet positioning of individual slides */
#banr2 .bullet.left.centre{top: 70px;}
#banr2 .bullet.right.centre{ top: 80px; right: 80px;}
#banr3 .bullet.left.centre{left: 62px; top: 48px;}
#banr3 .bullet.right.centre{top: 60px; right: 60px;}
#banr4 .bullet.left.centre{ top: 60px;}
#banr4 .bullet.right.centre{top: 80px; right: 110px;}
/* responsive */
@media (max-width:767px) {
    .center_phone .owl-item:first-child { display: none; }
    /*.center_phone .owl-item:last-child { display: none; }*/
    .bullet.left div, .bullet.right div { display: none; }
    .phone_previews >h4 { font-size: 18px; }
    section.work .owl-item .bullet { cursor: pointer; background-color: #fff;}
}
@media (min-width:768px) {
    section.work .center_phone { height: 464px; background-image: url('../images/mobile_frame.png'); padding-top: 34px; width: 1210px; margin-left: -605px; }
    section.work .owl-buttons { width: 538px; margin-left: -269px; }
    section.work .owl-item.active div img { width: 524px; }
    section.work .owl-item div img { width: 500px; }
    .center_phone .owl-item:first-child{ width: 302px !important }
    /*.center_phone .owl-item:last-child { width: 302px !important }*/
    .phoneOverlay div h4 { margin-top: 120px; }
    .phone_previews>h4 { max-width: 550px; margin: 0 auto 30px; }
    section.work .owl-buttons { top: -95px; }
    /* Bullet positioning of individual slides */
    #banr2 .bullet.left.centre{left: 70px; top: 160px;}
    #banr2 .bullet.right.centre{ top: 180px; right: 140px;}
    #banr3 .bullet.left.centre{left: 110px; top: 115px;}
    #banr3 .bullet.right.centre{top: 145px; right: 105px;}
    #banr4 .bullet.left.centre{ top: 135px;}
    #banr4 .bullet.right.centre{top: 185px; right: 190px;}
    section.work .owl-item .bullet::before{ top: -3px;}

}
@media (min-width:768px) and (max-width:1023px) {
    .bullet.left div { width: 25px; }
    .bullet.right div { width: 30px; }
    .bullet.left div > div { width: 100px; padding-right: 0; right: 30px; }
    .bullet.right div > div { width: 100px; padding-left: 0; left: 30px; }
}
@media (min-width:1024px) and (max-width:1199px) {
    .bullet.left div { width: 70px; }
    .bullet.right div { width: 80px; }
    .bullet.left div > div { width: 200px; right: 40px; }
    .bullet.right div > div { width: 200px; left: 50px; }
}
@media (min-width: 1200px){
    #banr2 .bullet.right > div{ width: 170px;}
    #banr2 .bullet.right div > div{ left: 145px;}
    #banr3 .bullet.left > div{ width: 137px;}
    #banr3 .bullet.left div > div{ right: 120px;}
    #banr3 .bullet.right > div{ width: 137px;}
    #banr3 .bullet.right div > div{ left: 110px;}
    #banr4 .bullet.right > div{ width: 215px;}
    #banr4 .bullet.right div > div{ left: 190px;}
    section.work .owl-item .bullet::before{ top: -5px;}
}