/*******************************************************************



     DESIGN AND DEVELOP BY : Imam ul Tahir
     CONTACT : +92 033 437 65516



*********************************************************************/


.topline {background:#007fd8; text-align:center; padding:10px 0;}
.topline h1 {margin:0; color:#fff; font-size:20px;}
.topline a {}
.topline a:hover {}
.topline ul {padding:0;}
.topline ul li {display:inline-block; padding:5px; margin:5px 0; background:#004b7f; border-radius: 5px;}
.topline ul li a {color:#fff; font-size:20px;}
.topline ul li a:hover {text-decoration:none;}
.topline ul li img {float:left; display:block; margin:0 5px 0 0;}


.allign_left {text-align:left;}
.allign_right {text-align:right;}
.allign_center {text-align:center;}
.allign_justify {text-align:justify;}

.color_wight {color:#000; font-size:14px; margin:10px 0 10px 0; border-bottom:1px dashed #bababa; padding:0 0 10px 0;}
.color_wight h1 {margin:0; font-size:18px;}
.color_wight h1 a {color:#065957;}
.margintopone {margin:20px 0 20px 0;}
.margintoptwo {margin:10px 0 0 0;}
.marginbottom {margin:0 0 30px 0; border-bottom: 1px dashed #696969; float:left; height:auto; padding:0 0 40px 0;}
.margintopone h3 {text-align:center;}

.catalogid {font-size: 17px;}

.marginLeft {margin:0 0 0 10px;}
.marginTop {margin-top:30px;} 
.productCenter {text-align:center;}
.productCenter img {text-align:center; margin:0 auto; display:block;}

.banner {background: url(../images/banner-bg.png) no-repeat #000 top center; padding:60px 0 60px 0; text-align:center;}
.banner h1 {color: #d8b479; text-shadow: 2px 2px #1f1f1f;}
.banner h2 {color: #fff; font-size: 25px; text-shadow: 2px 2px #1f1f1f;}



.main-nav {padding:20px 0; background:#000;}

.main-content {background: url(../images/banner-bg2.png) no-repeat #000 top center; background-attachment: fixed; color: #fff; padding: 40px 0;}
.main-content h2 {}
.main-content .products {padding:10px 0; float:left;}
.main-content .main-content-left h3 {text-align:center; color:#007fd8;}
.main-content .main-content-left img {text-align:center; margin:0 auto; display:block;}
.main-content .main-content-right {float:left;}
.main-content .main-content-right img {}
.main-content .products a {background: #000; color: #fff; padding: 5px 10px; float: left; font-size: 15px; box-shadow: 0px 0px 10px #e0e0e0; margin: 0 0 0 15px;}
.main-content .main-content-right h3 {margin: 0;} 

.newdiv {}
.newdiv a {background:#007fd8; color:#fff; padding:10px 30px; float:left; float:left; margin:12px 0 0 20px; font-size:15px;}


.left-content {padding:20px 0; margin:0 0 20px 0;}
.left-content .col-sm-12 {padding:0;}
.left-content .col-sm-12 img {}
.left-content .left-contentHeading {}
.left-content .left-contentHeading h2 {color:#007fd8; margin:0; text-align: center;}
.left-content h3 {text-transform:uppercase;}
.left-content ul {padding:0; margin:0;}
.left-content ul li {padding:3px 0; list-style: none;}
.left-content ul li a {}



.right-content {}
.right-content .col-sm-3 {padding:0;}
.right-content .right-contentProduct {text-align:center; background:#ececec; border-right: 1px solid #cccc;}
.right-content .right-contentProduct img {text-align:center; margin:0 auto; display:block;}
.right-content .right-contentProduct h3 {background:#fdae32; margin:0; padding:10px; font-size:1vw;}
.right-content .right-contentProduct a {color:#fff; text-transform:uppercase;}
.right-content .right-contentProduct a:hover {text-decoration:none; color:#ae6b03;}


.blueBG {background:#007fd8; color:#fff; padding:5px 0 5px 10px; margin:0; float:left; width:100%;}

.callheader {text-align: right;}
.callheader a {background: #d8b479; padding: 10px; color: #fff; border-radius: 3px; float: left; margin: 10px;}
.callheader a:hover {color: #fff; text-decoration:none;}
 
.textus {display:none;}




.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}

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

/* Modal Content */
.modal-content {
  position: relative; 
}

/* The Close Button */
.close {
  color: white;
  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;
  background: #000;
  -webkit-user-select: none;
}

.prev a,
.next a {
	color:#fff;
} 

/* 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 {
  color:#fff;
	text-decoration: none;
}

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

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);
}

.logoheader {}
.mainlogoheader {}

.contactButtons {padding-right:0 !important; padding-left:0 !important; margin-top:10px; margin-bottom:25px; }
.contactButtons a {background:#fdae32; float:left; display:block; padding:10px 12px; color:#fff; font-size:1vw; text-transform:uppercase; border-radius:5px; -webkit-box-shadow: 3px 3px 15px 3px #b3b3b3; 
box-shadow:3px 3px 15px 3px #b3b3b3;}
.contactButtons a:hover {color:#fff; text-decoration:none;}

.leftt {float:left;}
.center {text-align:center;}

.firstcontent {padding: 30px 0;}
.firstcontent h2 {font-size: 20px;}
.firstcontent h3 {color:#d8b479; font-size: 20px;}

.allcities {padding: 30px 0;}
.allcities a {float: left; display: block; background: #000; margin: 10px 0 0 10px; padding: 10px; color: #fff; border-radius: 5px;}
.allcities a:hover {color: #fff; text-decoration:none;} 


.homeservices {background:url(../images/homeservicesbg.jpg) no-repeat #000 top center; padding:40px 0 50px 0; color:#fff; height:auto;} 
.homeservices .homeservicesinner {text-align:center; background:url(../images/homeservicesinnerbg.png); margin:0 0 0 5px; padding:20px 0; height:auto; width: 23%;} 
.homeservices h2 {margin: 0;}
.homeservices h2 a {font-size: 18px; color: #fff;}

.viewall {margin-bottom: 30px;}
.viewall a {background: #d8b479; color: #fff; display: block; text-align: center; width: 40%; margin: 0 auto; padding: 10px; font-size: 24px;  border-radius: 5px;}
.viewall a:hover {color: #fff; text-decoration:none;} 


.main-footer {background:#000; border-top:30px solid #10c7da; color:#ccc; padding: 20px 0;}
.main-footer hr {margin-top: 10px; margin-bottom: 10px; border-top: 1px solid #525050;}
.main-footer ul {}
.main-footer ul li {}
.main-footer ul li a {color:#fff;}
.main-footer ul li a:hover {color:#fff; text-decoration: none;}
.social {}
.social a {display: block; float: left; margin: 0 10px 0 0;}
.social a img {}

.lastfooter {background:#d8b479; border-bottom:2px solid #4d4d4c; text-align:center; padding:10px 0;}
.lastfooter p {color:#fff; margin: 0;}

.servicesborder {border-top: 2px dashed #fff;}
.contact a {color:#fff;}
.contact a:hover {color:#fff;}


.float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 99999999999999;
}

.tagdiv {background: #05408bcc; padding: 10px; float: left;}
.tagdiv h1 {margin: 10px 0 0 10px; background: #000; display: block; float: left; padding: 10px; border-radius: 5px; border: 1px solid #407fcf;}
.tagdiv h1 a {color: #fff; font-size: 12px; float: left; font-family: 'Open Sans';}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


 /* ===============                      ===============
                   Phones and Handhelds
   ===============                      =============== */
@media only screen and (max-width: 599px) { 
.main-nav {background-size:cover;}
.navbar {margin:0;}
.footer-left, .footer-center, .footer-right {width:100% !important;} 
.contactButtons a {width:100%; margin:0 0 20px 0; font-size:3vw;}
.right-content {padding-right:0 !important; padding-left:0 !important;}
.right-content .right-contentProduct h3 {font-size: 4vw;}
.left-content {margin:20px 0 20px 0; float:left;}
.marginLeft {margin: 0;}
.navbar {margin-top:-40px !important;}
.right-content {}
.banner {}
.banner img, .firstcontent img {width:100%;}
.modal {padding-top:200px;}
.main-content .main-content-right a {width:100%; text-align:center; margin: 12px 0 0 0;}
.main-content .products img {width: 100%;}
.main-content .main-content-right h3 {margin:10px 0 0 0;}
.navbar-inverse .navbar-nav > li > a {margin: 10px 0 0 5px !important;}
.navbar-collapse {margin-top: 30px;}
.logoheader {height:auto; margin: 60px 0 0 0; display: block;}
.mainlogoheader img {width:100%;}
.main-nav {padding:20px 0 10px 0;}
.main-content .main-content-right {padding:0;}
.callheader {height: 180px;}
.callheader a {background: #e50f0f; padding: 9px; color: #fff; border-radius: 3px; display: block; text-align: center; margin: 10px 0 0;}
.viewall a, .center img {width:100%;}
.homeservices .homeservicesinner {width: inherit;}
.viewall a {float: left;}
.textus {display:block;}
.blogimage img {width:100%;}

@media only screen and (max-width: 549px) and (min-width: 400px) {  
.main-nav {background-size:cover;}
.navbar {margin:0;}
.footer-left, .footer-center, .footer-right {width:100% !important;} 
.contactButtons a {width:100%; margin:0 0 20px 0; font-size:3vw;}
.right-content {padding-right:0 !important; padding-left:0 !important;}
.right-content .right-contentProduct h3 {font-size: 4vw;}
.left-content {margin:20px 0 20px 0; float:left;}
.marginLeft {margin: 0;}
.navbar {margin-top:-73px !important;}
.modal {padding-top:200px;}
.main-content .main-content-right a {width:100%; text-align:center; margin: 12px 0 0 0;}
.main-content .products img {width: 100%;}
.main-content .main-content-right h3 {margin:10px 0 0 0;}
.navbar-inverse .navbar-nav > li > a {margin: 10px 0 0 5px !important;}
.navbar-collapse {margin-top: 30px;}
.logoheader {height:auto; margin: 60px 0 0 0; display: block;}
.main-nav {padding:20px 0 10px 0;}
.mainlogoheader img {width:100%;}
.main-content .main-content-right {padding:0;}
.callheader {height: 180px;}
.callheader a {background: #e50f0f; padding: 9px; color: #fff; border-radius: 3px; display: block; text-align: center; margin: 10px 0 0;}
.banner img, .firstcontent img, .viewall a, .center img {width:100%;}
.homeservices .homeservicesinner {width: inherit;}
.viewall a {float: left;}
.textus {display:block;}
.blogimage img {width:100%;}
}

@media only screen and (max-width: 650px) and (min-width: 550px) {  
.main-nav {background-size:cover;}
.navbar {margin:0;}
.footer-left, .footer-center, .footer-right {width:100% !important;} 
.contactButtons a {width:100%; margin:0 0 20px 0; font-size:3vw;}
.right-content {padding-right:0 !important; padding-left:0 !important;}
.right-content .right-contentProduct h3 {font-size: 4vw;}
.left-content {margin:20px 0 20px 0; float:left;}
.marginLeft {margin: 0;}
.navbar {margin-top:-40px !important;}
.modal {padding-top:200px;}
.main-content .main-content-right a {width:100%; text-align:center; margin: 12px 0 0 0;}
.main-content .products img {width: 100%;}
.main-content .main-content-right h3 {margin:10px 0 0 0;}
.navbar-inverse .navbar-nav > li > a {margin: 10px 0 0 5px !important;}
.navbar-collapse {margin-top: 30px;}
.logoheader {height:auto; margin: 60px 0 0 0; display: block;}
.main-nav {padding:20px 0 10px 0;}
.mainlogoheader img {width:100%;}
.main-content .main-content-right {padding:0;}
.callheader {height: 180px;}
.callheader a {background: #e50f0f; padding: 9px; color: #fff; border-radius: 3px; display: block; text-align: center; margin: 10px 0 0;}
.banner img, .firstcontent img, .viewall a, .center img {width:100%;}
.homeservices .homeservicesinner {width: inherit;}
.viewall a {float: left;}
.textus {display:block;}
.blogimage img {width:100%;}
}

/* ===============                      ===============
                         Tablets
   ===============                      =============== */
@media only screen and (max-width: 990px) and (min-width: 600px) { 
.main-nav {background-size:cover;}
.navbar {margin:0;}
.footer-left, .footer-center, .footer-right {width:100% !important;} 
.contactButtons a {width:100%; margin:0 0 20px 0; font-size:3vw;}
.right-content {padding-right:0 !important; padding-left:0 !important;}
.right-content .right-contentProduct h3 {font-size: 4vw;}
.left-content {margin:20px 0 20px 0; float:left;}
.marginLeft {margin: 0;} 
.navbar {margin-top:-40px !important;}
.modal {padding-top:200px;}
.main-content .main-content-right a {width:100%; text-align:center; margin: 12px 0 0 0;}
.main-content .products img {width: 100%;}
.main-content .main-content-right h3 {margin:10px 0 0 0;}
.navbar-inverse .navbar-nav > li > a {margin: 10px 0 0 5px !important;}
.navbar-collapse {margin-top: 30px;}
.logoheader {height:auto; margin: 60px 0 0 0; display: block;}
.main-nav {padding:20px 0 10px 0;}
.mainlogoheader img {width:100%;}
.main-content .main-content-right {padding:0;}
.callheader {height: 180px;}
.callheader a {background: #e50f0f; padding: 9px; color: #fff; border-radius: 3px; display: block; text-align: center; margin: 10px 0 0;}
.textus {display:block;}
}

/* ===============                      ===============
                         Laptops
   ===============                      =============== */
@media only screen and (max-width: 1125px) and (min-width: 1000px) { 

}

/* ===============                      ===============
                         Big Screen
   ===============                      =============== */
@media only screen and (max-width: 1200px) and (min-width: 1050px) {  

}