@charset "utf-8";

/* CSS RESET * -------------------------- */

* {margin: 0px; padding: 0px; box-sizing: border-box; box-sizing:border-box; }

a:link { text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
.clear { clear:both; }
.clearfix:after { content:""; display: table; clear: both; }

/* CSS TOP MARGINS * -------------------------- */

.top-marg1 { margin-top:5px;}
.top-marg2 { margin-top:10px;}
.top-marg3 { margin-top:15px;}
.top-marg4 { margin-top:20px;}
.top-marg5 { margin-top:25px;}
.top-marg6 { margin-top:30px;}
.top-marg7 { margin-top:35px;}
.top-marg8 { margin-top:40px;}
.top-marg9 { margin-top:45px;}
.top-marg10 { margin-top:50px;}

/* HEADER CSS * -------------------------- */

.content-row{ padding:0 50px;}
.content-row h1{ font-family:'RobotoBlack'; font-size:35px; text-transform:uppercase; color:#01b9f5; text-shadow:2px 2px 0px #333; }
.content-row h2{ font-family:'RobotoBlack'; font-size:35px; text-transform:uppercase; color:#01b9f5; text-shadow:2px 2px 0px #333;}
.content-row h3{ font-family:'Roboto'; font-weight:normal; font-size:20px; color:#2C2C2C;}
.content-row h4{ font-family:'Roboto'; font-weight:normal; font-size:17px; color:#2C2C2C; line-height:26px; }
.content-row h3 strong{ font-family:'RobotoBlackItalic';  } 
.content-row h5{ font-family:'Roboto'; font-weight:normal; text-transform:uppercase; font-size:20px; color:#fff; line-height:26px; margin:5px 0 0 0; }
.content-row p{ font-family:'Roboto'; font-weight:normal; font-size:17px; color:#5C5C5C; }

.sep-line { height:2px; width:200px; margin:10px auto;}
.sep-line2 { height:2px; width:200px; margin:10px auto 10px 0;}


#header{ position:fixed; width:100%; top:0; z-index:99; background: rgba(0, 0, 0, 0.8); box-shadow: 0px 5px 8px 5px rgba(0, 0, 0, 0.2); }
#header-top-bar{background:#1C1C1C; border-top:5px solid #01b9f5; color:#FFF; font-family:'RobotoRegular'; font-size:14px; padding:5px 50px; text-align:right;}
#header-top-bar span{ padding:0 5px;}
#logo-wrapper { float:left; width:360px; padding:5px 0; }
#logo-wrapper img { width:100%; }

.shadow {box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.3); background: rgba(255, 255, 255, 1); transition:all .4s ease-in-out; }
.logo-wrap img { width:100%; }

.menu-wrap { float:right; margin:38px 0 0 0;}
.menu-wrap ul{ list-style:none;}
.menu-wrap ul li{ position:relative; float:left; margin:0 0 0 5px; }
.menu-wrap ul li a{color:#fff; font-family:'RobotoBoldCondensed'; font-size:15px; text-transform:uppercase; text-align:left; display:block;
 padding:0 0 40px 0;}
.menu-wrap ul li a span{padding:10px 15px;}
.menu-wrap ul li a span.active, 
.menu-wrap ul li a span:hover { color:#01b9f5; border-top:1px solid #01b9f5; transition:all 0.5s ease 0s; background-color:rgba(39, 40, 40, 0.74); }
.menu-wrap ul li ul{ display:none; position:absolute; z-index:999; text-align:left; background:#fff;}
.menu-wrap ul li ul li{ margin:0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); width:225px; letter-spacing:0px; }
.menu-wrap ul li ul li a{ color:#555; font-family:'RobotoRegular'; font-size:14px; text-transform:none; text-align:left; padding:10px 15px; display: block;}
.menu-wrap ul li ul li a i{ margin:0 5px 0 0;}
.menu-wrap ul li ul li:hover a{ color:#01b9f5; font-size:14px; text-transform:none; padding:10px 15px; }
.menu-wrap ul li:hover ul{ display:block;}
.child-nav::before {border-style:solid; border-width:11px; top:-11px; content:""; left:0px; position:absolute; 
border-color:transparent transparent transparent #FFF;}

#responsive-nav{ display:none; text-align:right; padding:10px 0px; font-family:'RobotoBold'; text-transform:uppercase;}
#responsive-nav select{display:block; margin:0 auto; width:100%; height:40px; background:url(../images/nav.png) no-repeat 97% center #fff;
background-size:21px 14px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#999999; border:1px solid #999; padding-left:5px;}
#responsive-nav select optgroup { padding:10px 5px 10px 5px; margin:0 0 0 0; background: transparent;}
#responsive-nav select option { padding:10px 10px; border-bottom:1px solid #CCCCCC; margin:0; background:transparent; font-family:'RobotoRegular';
text-transform:uppercase;}

/* WHY BOX CSS * -------------------------- */

.why-box{ width:100%; text-align:left; }
.why-box img{ float:left; margin:0 40px 0 0; }
.why-box p{ margin:15px 0 0 0; line-height:24px;}

/* FEATURES BOX CSS * -------------------------- */

.features-box{ width:100%; background:#01b9f5; padding-top:50px; padding-bottom:20px; }
.features-box h1{ color:#fff;  }
.features-box h3{ color:#fff;  }
.features-box p{ font-family:'Roboto'; color:#fff;  }
.features-box a{ font-family:'RobotoBold'; color:#fff ; display:block; max-width:100px; border:2px solid #fff; text-transform:uppercase; font-size:14px; padding:5px 0; margin:20px 0 0 0; border-radius:2px;}
.features-box h3 span{ font-family:'RobotoBlackItalic';  }

.feature-img { width:150px; height:150px; display:inline-block; border-radius:50%; position:relative;
box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.5) inset, 0px 1px 2px rgba(0, 0, 0, 0.1); transition: all 0.4s ease-in-out 0s;}
.feature-info{ position:absolute; background:rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%; width:inherit; height:inherit; border-radius:50%; opacity:0;
transition:all 0.4s ease-in-out 0s; transform:scale(0);}
.feature-info i{ color:#FFF; font-size:50px; margin:55px 0 0 0;}
.feature-img:hover {box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1) inset, 0px 1px 2px rgba(0, 0, 0, 0.1);}
.feature-img:hover .feature-info { transform:scale(1); opacity: 1;}

.features-box .border-line { width:97%; height:3px; background:#FFF; margin:10px 0; position:relative; z-index:18;}
.features-box .border-line::after { font-family:"FontAwesome"; content: ""; display:block; position:absolute; width:0px; height:0px; z-index:10; top:-10px; left:50%; margin-left:-9px; color:#fff; font-size:30px; }

.features-box ul{ list-style:none; }
.features-box ul li{ width:25%; float:left; background:#000; }

/*----------------------------------- Gallery */

.crsl-items{ margin: 30px auto;}
.crsl-item figcaption{box-sizing:border-box; position:absolute; bottom:0; left:0; width:100%; padding:10px; color:#FFF; background:rgba(0,0,0,.5);}
.crsl-nav{position:relative;min-height:1px} 
.crsl-nav .previous{float:left}
.crsl-nav .next{float:right}

/* Custom controls */
#gallery-07{ position: relative;}
#gallery-07 .crsl-nav{position:absolute; top:0; left:0; width:100%; height:100%}
#gallery-07 .crsl-items:after{display:block; clear:both; content:''}
#gallery-07 .next,#gallery-07 .previous{position:absolute; top:50%; width:40px; height:40px; margin-top:-20px; text-indent:-10000px; color:#FFF; 
background:url(../images/previous-next.png) no-repeat rgba(0,0,0,.8); z-index:10; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px;-webkit-transition:background .2s ease-out; -moz-transition:background .2s ease-out; -o-transition:background .2s ease-out; transition:background .2s ease-out}
#gallery-07 .previous:hover, #gallery-07 .next:hover{ background-color: rgba(0,0,0, .95);}
#gallery-07 .previous{ left: 0; background-position: 0 0;}
#gallery-07 .next{right: 0; background-position: 100% 0;}
#gallery-07 .crsl-item{ margin-bottom: 0;}

/* SCREENSHOT BOX CSS * -------------------------- */

.portfolio-box{ float:left; width:23.5%; cursor:pointer; background:#000; overflow:hidden; position:relative; margin:40px 2% 0 0;  }
.portfolio-box img{ width:100%; transition: all 300ms ease-in-out 0s; }
.portfolio-box:hover img{ opacity:0.2; }
.portfolio-box:hover .buttons-wrap{ display:block; }
.buttons-wrap{ position:absolute; width:100%; height:100%; top:50%; margin-top:-15px; display:none; }
.buttonLeft {color:#fff; font-size:12px; line-height:28px; text-align:center; padding:10px 20px ; margin:4px 10px; border:2px solid #fff; border-radius:3px; 
font-family:'RobotoBold'; font-size:14px;}

.portfolio-button {font-family:'RobotoBold'; font-size:14px; border:2px solid #01b9f5; background:#01b9f5; color:#FFF; padding:10px 20px; display:block;
width:225px; margin:40px 0 0 0; transition: all 0.3s ease 0s; border-radius:2px; }
.portfolio-button:hover{ background:none; border:2px solid #222; color:#222;}

/* BENEFITS AND SUPPORT BOX CSS * -------------------------- */

.benefit-support-box{background-color:#111;}
.benefit-support-box h1{ text-align:left;}
.benefit-support-box h3{ color:#fff; text-align:left;}
.benefit-support-box h3 span{ font-family:'RobotoBlackItalic'; color:#01b9f5;  }
.benefit-support-box p{ color:#fff; margin:20px 0 0 0; text-align:left; }
.benefit-support-box ul{ list-style:none; margin:20px 0 0 0;  }
.benefit-support-box ul li{ font-family:'Roboto'; color:#fff; margin:5px 0 0 0; text-align:left;  }
.benefit-support-box ul li i{ margin:0 5px 0 0; }

.benefit-box{ width:48%; float:left; margin:50px 0; }
.support-box{ width:48%; float:right; margin:50px 0; }

/* DEMO BOX CSS * -------------------------- */

.demo-box{ width:100%; }
.demo-box a{ display:inline-block; font-family:'RobotoBold'; color:#fff; text-transform:uppercase; margin:20px 0 0 0; padding:10px 20px; border-radius:3px; width:260px; text-shadow:1px 1px 1px #333;}

/* FOOTER BOX CSS * -------------------------- */

.footer-wrap{ width:100%; background:rgba(0, 0, 0, 0.9); padding-bottom:50px;}
.footer-wrap h3{ font-family:'RobotoBold'; font-size:18px; margin-bottom:30px; color:#FFF; min-height:48px; line-height:47px; background:#222; text-transform:uppercase;}
.footer-wrap span { background:#01b9f5; padding:15px; display:inline-block; margin-right:20px; color:#FFF; position:relative; min-height:48px;}
.footer-wrap span::after { border-bottom:10px solid transparent; border-left:10px solid #01b9f5; border-top:10px solid transparent; content:""; 
position:absolute; right:-10px; }
.footer-wrap p{ color:#fff; text-align:left; font-size:16px; }
.footer-wrap ul{ list-style:none; text-align:left; } 
.footer-wrap ul li{ width:23.5%; float:left; margin:50px 2% 0 0;}
.footer-wrap ul li:last-child{ margin:50px 0 0 0; }

.f { margin-top:25px; border:2px solid #01b9f5; display:inline-block; min-width:115px; font-size:14px; padding:10px 15px; color:#01b9f5; 
text-transform:uppercase; font-family:'RobotoBold'; border-radius:3px; }

.quicklinks{}
.quicklinks ul li{ border-bottom:1px solid #5B6366; display:block; width:100%; margin:0; padding:7px 0; }
.quicklinks ul li a{ font-family:'Roboto'; color:#FFF; font-size:16px;}
.quicklinks ul li a i{ color:#01b9f5; font-size:16px; margin-right:5px;}
.quicklinks ul li:hover a{ color:#01b9f5; }
.quicklinks ul li:last-child{ border-bottom:none; margin:0; }
.quicklinks ul li:first-child{ padding:0 0 7px 0; }

.work{}
.work img{ width:100%;}

.address { font-family:'RobotoBold'; color:#FFF;}
.phone { font-family:'RobotoBoldCondensed'; color:#01b9f5; font-size:21px;}

#footer-copyright { border-top:1px solid #fff; padding:20px 50px; font-family:'Roboto'; color:#FFF; font-size:12px; text-transform:uppercase;
text-align:center; background:#01b9f5; }
#footer-copyright span { margin-right:10px; }
#footer-copyright span a{ color:#fff; }

/* ABOUT US PAGE CSS * -------------------------- */


.innner-banner h1{ padding:140px 0 0 0; text-align:left; }
.innner-banner h2{ font-family:'Roboto'; font-size:20px; text-transform:none; font-weight:normal; text-align:left; color:#fff; padding:0 0 40px 0; }

.about-left-text{ float:left; width:48%; text-align:left; }
.about-left-text h1{ font-family:'RobotoItalic'; text-transform:none; text-shadow:none; }
.about-left-text h2{ font-family:'azo_sansblack'; color:#2c2c2c; font-size:34px; }
.about-left-text p{ margin:10px 0 0 0; }
.about-left-text a{ font-family:'RobotoBold'; font-size:14px; display:inline-block; padding:10px 20px; border-radius:5px; }
.about-right-slider{ float:right; width:48%; height:500px; }

.aboutus{ width:100%; text-align:center;}
.aboutus span{ width:125px; line-height:115px; font-size:75px; background: rgba(255, 255, 255, 0.1); border-radius:50%; color:#fff; border:5px solid #fff;
margin:0 auto 10px auto; }


.aboutus h1{ color:#FFF;}
.aboutus p{ font-family:'Roboto'; color:#FFF; margin:20px 0 0 0; font-size:17px;}
.why-us{ width:48%; float:left; margin:50px 0; }
.our-mission{ width:48%; float:right; margin:50px 0; }


/* SUPPORT & TRAINING PAGE PAGE CSS * -------------------------- */

.supp-tran{ width:100%;}

.support-left{ float:left; width:58%; text-align:left; }
.support-left h1{ font-family:'RobotoItalic'; text-transform:none; text-shadow:none; }
.support-left h2{ font-family:'azo_sansblack'; color:#2c2c2c; font-size:34px; }
.support-left h3{ font-family:'azo_sansblack'; color:#2c2c2c; font-size:20px; font-weight:normal; margin:20px 0 0 0;}
.support-left h4{ font-family:'RobotoThin'; color:#2c2c2c; font-size:24px; font-weight:normal; margin:10px 0 0 0;}
.support-left h4 span{ font-family:'azo_sansblack'; color:#01b9f5; }
.support-left p{ margin:10px 0 0 0; }
.support-left a{ font-family:'RobotoBold'; font-size:14px; display:inline-block; padding:10px 20px; border-radius:5px; }

.support-left ul{ list-style:none; margin:15px 0 0 0; }
.support-left ul li{ font-family:'RobotoBold'; color:#555; font-size:18px; font-weight:normal; line-height:30px; }
.support-left ul li i{ color:#01b9f5; font-size:24px; display:inline-block; vertical-align:bottom; font-weight:bold; margin:0 10px 0 0;  }

.support-right{ float:right; width:42%; }
.support-right img{ width:100%; }

.support-form{ width:100%; text-align:left; position:relative; }
.support-form input[type="text"]{ width:82%; display:inline-block; font-family:'RobotoRegular'; font-size:15px; color:#555; border:none; }
.support-form textarea{ width:100%; font-family:'RobotoRegular'; font-size:15px; color:#555; border:none; padding:10px 15px; }
.support-form input[type="button"] {background:#01b9f5; border:none; padding:12px 15px; min-width:135px; font-family:'RobotoBold'; 
font-size:14px; text-transform:uppercase; color:#fff;}
.support-form input[type="reset"] {background:#01b9f5; border:none; padding:12px 15px; min-width:135px; font-family:'RobotoBold'; 
font-size:14px; text-transform:uppercase; color:#fff;}
.support-form ul{ list-style:none; }
.support-form ul li{ background:#fff; float:left; width:32%; margin:30px 2% 0 0; }
.support-form ul li:last-child{ margin:30px 0 0 0; }
.support-form .ticket{ text-align:right; color:#FFF; position:absolute; right:0; top:10px; font-family:'RobotoBold'; }
.support-form .ticket span{ color:#01b9f5; }
.support-form ul li span{ background:#01b9f5; padding:12px; display:inline-block; margin-right:15px; color:#FFF; position:relative; min-height:45px; 
width:45px; font-size:20px; text-align:center; line-height:45px;}
.support-form ul li span::after{ border-bottom:10px solid transparent; border-left:10px solid #01b9f5; border-top:10px solid transparent; content:""; 
position:absolute; right:-10px; }

/* BENEFITS PAGE PAGE CSS * -------------------------- */

.leftside-bar{ width:72%; float:left; }
.leftside-image{ text-align:left;}
.leftside-image img{ float:left; margin:0 20px 0 0; width:300px;}
.rightside-image{ text-align:left;}
.rightside-image img{ float:right; margin:0 0 0 20px; width:300px;}
.leftside-bar h1{ font-size:26px; text-shadow:none;}
.leftside-bar p{ font-family:'Roboto'; font-size:17px; margin:10px 0 0 0;}

.rightside-bar{ width:300px; float:right;}
.features-menu{ text-align:left; font-family:'RobotoBold'; color:#555; font-size:17px; font-weight:normal; line-height:30px; }
.features-menu h3{ font-family:'RobotoBold'; font-size:18px; color:#FFF; min-height:48px; line-height:47px; background:#222; text-transform:uppercase;}
.features-menu span { background:#01b9f5; padding:15px; display:inline-block; margin-right:20px; color:#FFF; position:relative; min-height:48px;}
.features-menu span::after { border-bottom:10px solid transparent; border-left:10px solid #01b9f5; border-top:10px solid transparent; content:""; 
position:absolute; right:-10px; }

.features-menu a{ display:block; background:#E8E8E8; color:#333; padding:10px; border-bottom:1px dotted #D1D1D1;}
.features-menu a:hover{ background:#DFDFDF; }
.features-menu a i{ color:#01b9f5; font-size:24px; display:inline-block; vertical-align:middle; font-weight:bold; margin:0 10px 0 0;  }

.ad{ width:100%;}
.ad img{ width:100%;}

.used-menu{ text-align:left; font-family:'RobotoBold'; color:#555; font-size:17px; font-weight:normal; line-height:30px; }
.used-menu h3{ font-family:'RobotoBold'; font-size:18px; color:#FFF; min-height:48px; line-height:47px; background:#222; text-transform:uppercase;}
.used-menu span { background:#01b9f5; padding:15px; display:inline-block; margin-right:20px; color:#FFF; position:relative; min-height:48px;}
.used-menu span::after { border-bottom:10px solid transparent; border-left:10px solid #01b9f5; border-top:10px solid transparent; content:""; 
position:absolute; right:-10px; }

.used-menu a{ display:block; background:#E8E8E8; color:#333; padding:10px; border-bottom:1px dotted #D1D1D1;}
.used-menu a:hover{ background:#DFDFDF; }
.used-menu a i{ color:#01b9f5; font-size:24px; display:inline-block; vertical-align:middle; font-weight:bold; margin:0 10px 0 0;  }

hr { background:url("../images/divider.png") no-repeat scroll center 0px; border:0px none; margin:20px 0px; height:6px;}
.separator{background:url("../images/pattern_3.png") repeat-x scroll 0px 0px / 8px 5px; height:5px; margin:20px 0;}

.more-features h1{ color:#fff; font-size:20px; }
.more-features p{ color:#fff; text-align: justify; font-family:'Roboto'; }
.more-features ul{ list-style:none;}
.more-features ul li{ float:left; width:47%; margin:50px 6% 0 0; }
.more-features ul li span{ width:100px; line-height:90px; font-size:50px; background: rgba(255, 255, 255, 0.1); border-radius:50%; color:#fff; border:5px solid #fff; margin:0 auto 10px auto; }
.more-features ul li:last-child{ margin:50px 0 0 0; }

/* CONTACT US PAGE CSS * -------------------------- */

.googlemap { position:relative; padding-bottom:0; /* 4:3 ratio*/ height:285px; overflow:hidden; }
.googlemap iframe { position:absolute; top:0; left:0; width:100% !important; height:300px !important; }
#contact-info{ float:right; width:48%; margin:0 0; text-align:center;}
#contact-info h1 {font-family:'RobotoBlack'; font-weight:normal; text-transform:uppercase; font-size:30px; color:#01b9f5; text-align:left;}
#contact-info h2 {font-family:'RobotoThin'; text-transform:none; font-weight:normal; font-size:20px; color:#2C2C2C; text-align:left; margin:10px 0 0 0;}
#contact-info h2 span{font-family:'RobotoBlackItalic';}
#contact-info h3 {font-family:'Roboto'; font-weight:normal; font-size:20px; color:#01b9f5; text-align:left; margin:20px 0 0 0; text-transform:uppercase;}
#contact-info i {font-size:20px; color:#01b9f5;}
#contact-info p {font-family:'Roboto'; font-weight:normal; font-size:17px; color:#5C5C5C; text-align:left; margin:10px 0 0 0; line-height:24px; }
#contact-info p span{font-family:'Roboto'; font-weight:normal; font-size:16px; color:#5C5C5C;  }
#contact-form{ float:left; width:48%; margin:0 0; text-align:center;}
#contact-form label {font-family:Roboto; font-size:14px; color:#2C2C2C; text-align:left; padding:0 0 7px 0; font-weight:bold; display:block;}
#contact-form input{ width:72%; display:inline-block; font-family:'Roboto'; font-size:15px; color:#555; border:none; }
#contact-form textarea{ width:100%; border:1px solid #CCC; padding:10px; font-family: Roboto; font-size:15px; color:#555;}
#contact-form input[type="button"] {background:#01b9f5; border:none; padding:12px 15px; width:100%; font-family:'Roboto'; 
font-size:14px; text-transform:uppercase; color:#fff;}
#contact-form h1 {font-family:'RobotoBlack'; font-weight:normal; text-transform:uppercase; font-size:30px; color:#01b9f5; text-align:left;}
#contact-form h2 {font-family:'RobotoThin'; text-transform:none; font-weight:normal; font-size:20px; color:#2C2C2C; text-align:left; margin:10px 0 0 0;}
#contact-form h2 span{font-family:'RobotoBlackItalic';}
#contact-form h3 {font-family:Roboto; font-weight:normal; font-size:16px; color:#2C2C2C; text-align:left; margin:10px 0 0 0; font-weight:bold;}
.left{ width:49%; float:left; margin:0 2% 0 0; }
.left span{ background:#01b9f5; padding:12px; display:inline-block; margin-right:15px; color:#FFF; position:relative; min-height:45px; 
width:45px; font-size:20px; text-align:center; line-height:45px;}
.left span::after{ border-bottom:10px solid transparent; border-left:10px solid #01b9f5; border-top:10px solid transparent; content:""; 
position:absolute; right:-10px; }
.left2{ width:49%; float:left; margin:0 0 0 0; }
.left2 span{ background:#01b9f5; padding:12px; display:inline-block; margin-right:15px; color:#FFF; position:relative; min-height:45px; 
width:45px; font-size:20px; text-align:center; line-height:45px;}
.left2 span::after{ border-bottom:10px solid transparent; border-left:10px solid #01b9f5; border-top:10px solid transparent; content:""; 
position:absolute; right:-10px; }
.field-border{border:1px solid #CCC;}

/* DOWNLOAD TRAIL PAGE CSS * -------------------------- */

.trail-form{ float:left; width:100%; margin:0 0; text-align:left;}
.trail-form h3{ font-family:'RobotoBlack'; text-transform:uppercase; color:#01b9f5; font-size:40px;}
.trail-form h4{ font-size:20px;}

.trail-form label {font-family:Arial; font-size:14px; color:#2C2C2C; text-align:left; padding:0 0 12px 0; font-weight:bold; display:block;}
.trail-form input{ width:72%; display:inline-block; font-family:'RobotoRegular'; font-size:15px; color:#555; border:none; }
.trail-form textarea{ width:100%; border:1px solid #CCC; padding:10px; font-family: Arial; font-size:15px; color:#555;}
.trail-form input[type="button"] {background:#01b9f5; border:none; padding:12px 15px; width:100%; font-family:'RobotoBold'; font-size:14px; text-transform:uppercase; color:#fff;}

.left{ width:49%; float:left; margin:0 2% 0 0; }
.left span{ background:#01b9f5; padding:12px; display:inline-block; margin-right:15px; color:#FFF; position:relative; min-height:45px; 
width:45px; font-size:19px; text-align:center; line-height:45px;}
.left span::after{ border-bottom:10px solid transparent; border-left:10px solid #01b9f5; border-top:10px solid transparent; content:""; 
position:absolute; right:-10px; }
.left2{ width:49%; float:left; margin:0 0 0 0; }
.left2 span{ background:#01b9f5; padding:12px; display:inline-block; margin-right:15px; color:#FFF; position:relative; min-height:45px; 
width:45px; font-size:19px; text-align:center; line-height:45px;}
.left2 span::after{ border-bottom:10px solid transparent; border-left:10px solid #01b9f5; border-top:10px solid transparent; content:""; 
position:absolute; right:-10px; }

/* SCREENSHOTS PAGE CSS * -------------------------- */

#filters { margin:1%; padding:0; list-style:none; }
#filters li { float:left; margin:0 10px 0 0; text-transform:uppercase; font-family:'RobotoBold'; font-size:14px;  }
#filters li:last-child{ margin:0 0 0 0; }
#filters li span {display: block; text-decoration:none; color:#2C2C2C; cursor: pointer; padding:5px 10px; }
#filters li span.active { color:#fff; background:#01b9f5; border-radius:2px;}

#portfoliolist .portfolio { width:23%; margin:1%; display:none; float:left; overflow:hidden; }
.portfolio-wrapper { overflow:hidden; position:relative !important; cursor:pointer; }
.portfolio-wrapper img { max-width:100%; }
.portfolio:hover .portfolio-wrapper>span { display:block;}
.portfolio-wrapper>span { top:50%; left:50%; right:50%; position:absolute; background-color:rgba(0,0,0,0.8); margin:-35px 0 0 -35px; border-radius:100%; 
width:70px; height:70px; display:none; padding:15px 0;}
.portfolio-wrapper>span>span{ line-height:70px; color:#fff; font-size:36px; }

/* FEATURES PAGE CSS * -------------------------- */

.features{ width:100%;}
.features h1{ font-size:30px; line-height:32px; text-shadow:none; text-align:left; }
.features h2{ font-size:24px; line-height:32px; text-shadow:none; text-align:left; margin:20px 0 0 0; }
.features h3{ font-size:20px; line-height:28px; text-align:left; margin:20px 0 0 0;}
.features h3 span{ font-size:22px; font-family:'RobotoBlackItalic'; }
.features p{ font-family:'RobotoThin'; font-weight:normal; font-size:16px; color:#5C5C5C; line-height:24px; text-align:left; }
.features a{ font-family:'RobotoBold'; font-size:14px; display:inline-block; padding:10px 20px; border-radius:5px; color:#fff; }
.features img{ width:50%; float:left; margin:0 20px 0 0; }

.features-high{ width:100%;}
.features-high ul{ list-style:none;}
.features-high ul li{ width:33.33333%; float:left; height:225px; overflow:hidden; text-align:center;}
.features-high ul li i { color:#fff; font-size:50px;}
.features-high ul li img{ width:100%;}

.features-points{ width:100%;}
.features-points ul{ list-style:none; margin:20px 0 0 0;}
.features-points ul li{ font-family:'RobotoBold'; font-weight:normal; font-size:16px; color:#2C2C2C; line-height:24px; text-align:left; margin:10px 0 0 0;}
.features-points ul li img{ width:30px; margin:0 10px 0 0; vertical-align:middle;}

.features-high .text{ padding:20px; }
.features-high .text p{ color:#fff;}

.features-left{ width:47%; float:left; }
.features-left h1{ font-size:30px; line-height:32px; text-shadow:none; text-align:left; }
.features-left h2{ font-size:24px; line-height:32px; text-shadow:none; text-align:left; margin:20px 0 0 0; }
.features-left h3{ font-size:20px; line-height:28px; text-align:left; margin:20px 0 0 0;}
.features-left h3 span{ font-size:20px; font-family:'RobotoBlackItalic'; }
.features-left p{ font-family:'Roboto'; font-weight:normal; font-size:17px; color:#5C5C5C; line-height:24px; text-align:left; }
.features-left a{ font-family:'RobotoBold'; font-size:14px; display:inline-block; padding:10px 20px; border-radius:5px; color:#01b9f5; }
.features-left img{ width:100%; }

.features-right{ width:47%; float:right; }
.features-right h1{ font-size:30px; line-height:32px; text-shadow:none; text-align:left; }
.features-right h2{ font-size:24px; line-height:32px; text-shadow:none; text-align:left; margin:20px 0 0 0; }
.features-right h3{ font-size:20px; line-height:28px; text-align:left; margin:20px 0 0 0;}
.features-right h3 span{ font-size:20px; font-family:'RobotoBlackItalic'; }
.features-right p{ font-family:'Roboto'; font-weight:normal; font-size:17px; color:#5C5C5C; line-height:24px; text-align:justify; }
.features-right a{ font-family:'RobotoBold'; font-size:14px; display:inline-block; padding:10px 20px; border-radius:5px; color:#fff; }
.features-right img{ width:100%; }




/* ==========================================================================
		Slider core styles
===========================================================================*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.slider-container {
  position: relative;

  overflow: hidden;

  width: 100%;
  margin: 0 auto;
}

.slider {
  position: relative;

  width: 9999px;
}
.slider:before,
.slider:after {
  display: table;

  content: ' ';
}
.slider:after {
  clear: both;
}
.slider div {
  position: relative;

  float: left;

  margin: 0;
  padding: 0;
}
.slider div img {
  display: block;

  max-width: 100%;
  height: auto;
}
.act,
#prev > span,
#next > span,
#slider-nav > a {
  background: url(../images/arrows.png) no-repeat;
}
#next > span,
#prev > span {
  display: block;

  width: 16px;
  height: 24px;
}
/* Arrows */
#next > span {
  background-position: -20px 0;
}
#prev > span {
  background-position: 0 0;
}
#next,
#prev {
  position: absolute;
  top: 50%;

  margin-top: -20px;
  padding: 10px 15px;

  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;

  border-radius: 5px;
  background: rgba(0, 0, 0, .39);

  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000'); /* ie8 */
       -o-user-select: none;
}
#prev {
  left: 10px;
}
#next {
  right: 10px;
}
.caption {
  position: absolute;
  bottom: 0;

  display: block;

  width: 100%;
  padding: 0 10px 30px;

  color: #fff;
  background: rgba(0, 0, 0, .39);

  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000'); /* ie8 */
}
.caption a {
  display: block;

  color: #fff;
}
.slider-nav {
  line-height: 30px;

  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0;

  text-align: center;
  /*background: #323232;*/
  /*opacity: .9;*/

  filter: alpha(opacity=90); /* ie8 */
}
.slider-nav a {
  display: inline-block;

  width: 12px;
  height: 12px;
  margin: 0 3px;

  -webkit-transition: background .5s ease;
     -moz-transition: background .5s ease;
       -o-transition: background .5s ease;
          transition: background .5s ease;

  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
}

.slider-nav .active {
  width: 12px;
  height: 12px;

  background: #fff;
}
@media (max-width: 580px) {
  .caption {
    display: none;
  }
}


/*pankaj css start*/
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: black;
    opacity: .8
}
.modal-backdrop.fade {
    opacity: 0
}
.modal-backdrop.fade.in {
    opacity: .8
}
.modal {
	text-align:left;
    position: fixed;
    top: 10%;
    left: 50%;
    z-index: 1050;
    width: 560px;
    margin-left: -280px;
    background-color: white;
    *border: 1px solid #999;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-box-sizing: padding-box;
    -moz-box-sizing: padding-box;
    box-sizing: padding-box;
    outline: 0
}
.modal.fade {
    -webkit-transition: top .3s ease-out, top .3s ease-out;
    -moz-transition: top .3s ease-out, top .3s ease-out;
    -ms-transition: top .3s ease-out, top .3s ease-out;
    -o-transition: top .3s ease-out, top .3s ease-out;
    transition: top .3s ease-out, top .3s ease-out;
    top: -25%
}
.modal.fade.in {
    top: 10%
}
.modal-header {
    padding: 9px 15px;
    border-bottom: 1px solid #eee
}
.modal-header .close {
    margin-top: 2px; color: #000; width:auto;
    text-shadow: none;
    opacity: 0.5;
    font-size: 15px;
    padding: 0px;
}
.modal-header h3 {
    margin: 0;
    line-height: 30px
}
.modal-body {
    position: relative;
    overflow-y: auto;
    max-height: 400px;
    padding: 15px
}

.close {
    float: right;
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    color: black;
    text-shadow: 0 1px 0 white;
    opacity: .2;
	text-decoration:none;
}
.close:hover {
    color: black;
    text-decoration: none;
    cursor: pointer;
    opacity: .4
}

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -moz-transition: opacity .15s linear;
    -ms-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear
}
.fade.in {
    opacity: 1
}