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



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



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

.top-row {border-bottom:1px solid #ccc;}
.top-row .top-rowright {margin:20px 0;}
.top-row .top-rowright p {margin: 0; font-size: 16px;}
.top-row .top-rowright a {}
.top-row .top-rowleft {padding:20px 0;}

.slider {padding: 130px 0 0 0 !important;}

.top-rowleft {}
.top-rowleft a {background:#0071bd; color:#fff; padding:20px 50px; transition: all .5s ease-in-out; text-align: center; width: 20%; margin: 0 auto; display: block;}
.top-rowleft a:hover {transition: all .5s ease-in-out; background:#0286df; color:#fff; text-decoration:none;}

.logo {    display: block;
    text-align: center;
    padding: 20px 0;
    position: fixed;
    z-index: 9999;
    background: #fff;
    width: 100%;}
.logo img {}

.main-nav {padding:10px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #a4a4a4;}

.main-icon {margin:30px 0 0 0;}
.main-icon .inner-icon {height:270px;}
.main-icon .inner-icon .inner-iconright {}
.main-icon .inner-icon .inner-iconright img {margin:0 auto; display:block;}
.main-icon .inner-icon .inner-iconleft {}
.main-icon .inner-icon .inner-iconleft h3 {}
.main-icon .inner-icon .inner-iconleft hr {margin-top:10px; margin-bottom:10px;  border-top:3px solid #1356a5;}
.main-icon .inner-icon .inner-iconleft p {text-align:justify;}

.content-1 {background:#ccc; padding:30px 0; color:#515151;}
.content-1 hr {border-top:1px solid #979797;}
.content-1 h1 {font-size:35px;}
.content-1 h2 {font-size:25px;}
.content-1 h3 {font-size:20px;}


.banner {background: url(../images/banner.png) no-repeat fixed; text-align:center; color:#fff; background-size:contain; padding:70px 0;}
 



 /* ===============      ===============
                    FORM
   ===============      =============== */
.main-blog_bg {background: url(../images/blog-bg.jpg) repeat; padding:30px 0;}
.main-reservation_bg {background: url(../images/reservation_bg.jpg) no-repeat fixed; background-size:cover; padding:30px 0;}
.main-reservation {background: url(../images/main-reservation.png) repeat; height:auto; width:100%; margin:0 auto; border:1px solid #fff; border-radius:10px; padding: 20px; color:#fff;}
.main-reservation h1 {color:#fff;}
.main-reservation .opacityclass {margin:30px 0;}
.main-reservation .opacityclass .inputborderclass {border:1px solid #fff; padding:10px 0;}
.main-reservation .opacityclass .inputborderclass p {color:#fff;}
.main-reservation .opacityclass .inputborderclassleft {}
.main-reservation .opacityclass .inputborderclassright {text-align:right;}
.main-reservation .opacityclass .inputborderclassright input, .main-reservation .opacityclass .inputborderclassright select {color: #555; background-color:#fff; background-image:none; border:1px solid #ccc; border-radius:4px; width:100%;}
.main-reservation .headingclass h3 {color:#fff; text-align:center;}
.main-reservation .grayclass {background:#ccc; padding:10px 30px;}
.main-reservation .grayclass input {width:90%; background:#ccc; padding:10px 15px; border:1px solid #ababab; margin:0 0 0 20px;}
.reservebutton {background:#0071bd; color:#fff; padding:10px 50px; border:0; text-align:center; margin:0 auto; display:block;}


 /* ===============      ===============
                 INNER PAGES
   ===============      =============== */
.inner-pages {background: url(../images/inner-pages.png) repeat; color:#fff;}
.inner-pages a {color:#fff; font-size:25px;}
.inner-pages a:hover {color:#fff; text-decoration:none;}

.fleet {margin:20px auto;}
.fleet img {margin:0 auto; display:block;}
.fleet h3 {text-align:center;}
.fleet a {background:#0071bd; color:#fff; padding:10px; width:50%; margin:0 auto; display:block; text-align:center;}
.fleet a:hover {color:#fff;}


.services {margin:20px auto;} 




.icondiv {padding: 30px 0;}

.icondiv1 {}
.icondiv1 .image {
  display: block;
  width: 100%;
  height: auto;
}

.icondiv1 .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.icondiv1 .icondiv1:hover .overlay {
  opacity: 1;
}

.icondiv1 .text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.icondiv1 .text a, .icondiv2 .text a, .icondiv3 .text a, .icondiv4 .text a, .icondiv5 .text a {color:#fff;}





.icondiv2 .image {
  display: block;
  width: 100%;
  height: auto;
}

.icondiv2 .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.icondiv2 .icondiv2:hover .overlay {
  opacity: 1;
}

.icondiv2 .text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}







.icondiv3 .image {
  display: block;
  width: 100%;
  height: auto;
}

.icondiv3 .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.icondiv3 .icondiv3:hover .overlay {
  opacity: 1;
}

.icondiv3 .text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}







.icondiv4 .image {
  display: block;
  width: 100%;
  height: auto;
}

.icondiv4 .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.icondiv4 .icondiv4:hover .overlay {
  opacity: 1;
}

.icondiv4 .text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}







.icondiv5 .image {
  display: block;
  width: 100%;
  height: auto;
}

.icondiv5 .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.icondiv5 .icondiv5:hover .overlay {
  opacity: 1;
}

.icondiv5 .text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}







.icondiv6 .image {
  display: block;
  width: 100%;
  height: auto;
}

.icondiv6 .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.icondiv6 .icondiv6:hover .overlay {
  opacity: 1;
}

.icondiv6 .text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

 /* ===============      ===============
          INNER PAGES RESERVATION
   ===============      =============== */
.inner-reservation {background: url(../images/main-reservation.png) repeat; height:630px; width:100%; border:1px solid #fff; border-radius:10px;}
.inner-reservation h1 {color:#fff;}
.inner-reservation .opacityclass {margin:30px 0;}
.inner-reservation .opacityclass .inputborderclass {border:1px solid #fff; padding:10px 0;}
.inner-reservation .opacityclass .inputborderclass p {color:#fff;}
.inner-reservation .opacityclass .inputborderclassleft {}
.inner-reservation .opacityclass .inputborderclassright {text-align:right;}
.inner-reservation .opacityclass .inputborderclassright input, .main-reservation .opacityclass .inputborderclassright select {color: #555; background-color:#fff; background-image:none; border:1px solid #ccc; border-radius:4px; width:100%;}
.inner-reservation .headingclass h3 {color:#fff; text-align:center;}
.inner-reservation .grayclass {background:#ccc; padding:10px 30px;}
.inner-reservation .grayclass input {width:70%; background:#ccc; padding:10px 15px; border:1px solid #ababab; margin:0 0 0 20px;} 








.archive {background-color:#f2f2f2; border:1px solid #d7d7d7; padding:0 30px 20px; margin: 20px 0 0 0;}

.first-footer {background:#000; padding:30px 0; color:#ccc;}
.first-footer hr {margin-top:20px; margin-bottom:20px; border-top: 3px solid #1356a5;}
.first-footer ul {padding:0; margin:0;}
.first-footer ul li {list-style-image:url(../images/bullet.png);}


.last-footer {background:#000; padding:30px 0; border-top:1px solid #373737; text-align:center; color:#fff;} 
.last-footer img {display:block; margin:0 auto;}
.last-footer a {color:#fff;}
.last-footer a:hover {color:#fff; text-decoration:none;}


.main_cities {background:#393939; padding:30px 0; color: #fff;}
.main_cities .cities_list {}
.main_cities .cities_list ul {}
.main_cities .cities_list ul li {list-style-type:none;}
.main_cities .cities_list ul li a {color:#9e9e9e;}



 /* ======        ======
            BLOG
   =======       ======= */
.blog {background-color:#f2f2f2; border:1px solid #d7d7d7; padding:0 30px 20px;}
.blog a {font-weight:bold;}
.blog hr {margin-top:10px; margin-bottom:20px; border: 0; border-top:1px solid #cecece;}
.blog h1 {text-transform:uppercase; font-size:30px;}
.blog h1 a {color:#1356a5; transition:all .5s ease-in-out;}
.blog h1 a:hover {color:#000; text-decoration:none; transition:all .5s ease-in-out;}
.blog .readmore {background-color:#1356a5; border:1px solid #d7d7d7; height:36px; text-align:center; font-size:14px; border-radius: 0px; color:#fff!important; padding:5px 15px;}
.blog .socialclass, .socialclass {margin:10px 0 20px 0; display:block; width:100%; float:left;}





 /* ===============                      ===============
                   Phones and Handhelds
   ===============                      =============== */
@media only screen and (max-width: 599px) {
.banner {background-size:auto;}
.inner-reservation {height:800px;}
.main-reservation .opacityclass .inputborderclassleft, .main-reservation .opacityclass .inputborderclassright {text-align:center;} 
.main-reservation .grayclass input {width:70%;}
.main-icon .inner-icon {height:auto;}
.top-rowleft a {display:block; text-align:center; float:inherit; width: 70%;}
.main-icon .inner-icon .inner-iconleft h3 {text-align:center;}
.icondiv1, .icondiv2, .icondiv3, .icondiv4, .icondiv5, .icondiv6 {padding:15px 0 0 0;}
.icondiv1 img, .icondiv2 img, .icondiv3 img, .icondiv4 img, .icondiv5 img, .icondiv6 img {width:auto !important; margin: 0 auto;}
}

@media only screen and (max-width: 549px) and (min-width: 400px) {
.banner {background-size:auto;}
.inner-reservation {height:870px;}
.main-reservation .opacityclass .inputborderclassleft, .main-reservation .opacityclass .inputborderclassright {text-align:center;} 
.main-reservation .grayclass input {width:70%;}
.main-icon .inner-icon {height:auto;}
.top-rowleft a {display:block; text-align:center; float:inherit; width: 70%;}
.main-icon .inner-icon .inner-iconleft h3 {text-align:center;}
.icondiv1, .icondiv2, .icondiv3, .icondiv4, .icondiv5, .icondiv6 {padding:15px 0 0 0;}
.icondiv1 img, .icondiv2 img, .icondiv3 img, .icondiv4 img, .icondiv5 img, .icondiv6 img {width:auto !important; margin: 0 auto;}
}

@media only screen and (max-width: 650px) and (min-width: 550px) {
.banner {background-size:auto;}
.inner-reservation {height:850px;}
.main-reservation .opacityclass .inputborderclassleft, .main-reservation .opacityclass .inputborderclassright {text-align:center;} 
.main-reservation .grayclass input {width:70%;}
.main-icon .inner-icon {height:auto;}
.top-rowleft a {display:block; text-align:center; float:inherit; width: 70%;}
.main-icon .inner-icon .inner-iconleft h3 {text-align:center;}
.icondiv1, .icondiv2, .icondiv3, .icondiv4, .icondiv5, .icondiv6 {padding:15px 0 0 0;}
.icondiv1 img, .icondiv2 img, .icondiv3 img, .icondiv4 img, .icondiv5 img, .icondiv6 img {width:auto !important; margin: 0 auto;}
}

/* ===============                      ===============
                         Tablets
   ===============                      =============== */
@media only screen and (max-width: 990px) and (min-width: 600px) {
.inner-reservation {height:650px;}
}

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

}