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



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



*********************************************************************/
.mainheader {background:#199bb9; color: #fff;}
.mainheader .mainheader-left {padding: 20px 0;}
   .mainheader .mainheader-left h1 {font-size:18px;}
.mainheader .mainheader-center {padding: 30px 0;}
   .mainheader .mainheader-center img {width:100%;}
.mainheader .mainheader-right {padding:30px 0; text-align: center;}
   .mainheader .mainheader-right a {color:#fff; font-size:20px;}

.mainnav {background:#000;}

.mainbanner {text-align:center; padding:140px 0 230px 0; background-repeat: no-repeat; background-image:url(../images/mainbanner.jpg); background-size: cover; background-position: center center; height: 100%; opacity: 1; visibility: inherit; z-index: 20; color: #fff; text-transform: uppercase; font-weight: bold;}
  .mainbanner h1 {font-family: 'Anton', sans-serif;}
  .mainbanner .reservenow, .readmore {font-size: 17px; background: #199bb9; padding: 10px 60px; color: #fff; border-radius: 10px; display: block; width: 230px; margin: 0 auto;} 
  
.bannercall {display:none;}
.bannercall a {}

.contentdiv {background:#353535; padding: 20px 0; color: #fff; text-align: center; border-top: 1px solid #4a4949;}
.blog {background:#353535; padding: 20px 0; color: #fff; border-top: 1px solid #4a4949;}
.blog a {color: #199bb9}
.contentdivtwo {padding: 20px; text-align:center;}

.homeserv {background:#eaeaea; padding:50px 0;} 

.contentone {}
.contentone .contentone-left {float: left; width: 50%; display: block;}
.contentone .contentone-right {float: right; width: 50%; display: block;}
  .contentone .contentone-right .contentone-rightinner {width: 80%; margin: 0 auto;}
  
.contenttwo {}
.contenttwo .contenttwo-left {float: left; width: 50%; display: block;}
  .contenttwo .contenttwo-left .contenttwo-leftinner {width:70%; margin: 0 auto;}
.contenttwo .contenttwo-right {float: right; width: 50%; display: block;}

.mainbutton {font-size: 15px; background: #199bb9; padding:5px 60px; color: #fff; border-radius: 10px; display: block; width: 190px; margin: 0 auto; float: left; text-align: center;}

.statistics {background:url(../images/statisticsbg.jpg) no-repeat fixed; background-color:#000; padding: 50px 0; color: #fff; text-align: center;}
.statistics ul {text-align: left;}

.bigreservenow {background:#199bb9; text-align: center; padding: 30px 0; color:#fff;}
.bigreservenow a {border:1px solid #21a8c7; padding:10px 20px; border-radius:5px; color:#fff; background:#125d6e;}
.bigreservenow a:hover {color:#fff; text-decoration:none;}

.mainfooter {background:#1b1b1b; text-align:center; padding:0 0 50px 0; color:#fff;}
.mainfooter a {color:#fff; font-size: 20px;}
.mainfooter a:hover {color:#fff; text-decoration:none;}

.homeserv {text-align: center;}

.mainfleet {background:#000; color:#fff; padding:40px 0;}
.mainfleet .fleet {background: #1d1d1d; border-top: 1px solid #5d5d5d;}

.mainserv {background: #000; padding: 30px 0;} 

.newclass input[type="submit"] {background:#199bb9; padding:15px 50px; border:0; color:#fff; font-weight:bold; font-size:16px;}



div.flip {margin:0px; cursor:pointer; padding:5px; text-align:center; background:#199bb9; transition:all .5s ease-in-out; border-radius:8px; box-shadow:5px  5px  5px #b7b7b7; border:2px solid #fff; float: left; width: 100%;}
.paneltwo input[type="submit"], .newreserveheight input[type="submit"] {margin:0 0 20px 0; cursor:pointer; padding:10px 30px 10px 30px; text-align:center; background:#6d0510; transition:all .5s ease-in-out; border-radius:8px; box-shadow:5px  5px  5px #b7b7b7; border:2px solid #fff;}
div.flip:hover {background:#333532; transition:all .5s ease-in-out;}
div.flip h4 {margin:0 !important; color:#fff !important; font-weight: normal;}
div.flip p {margin:0 !important; color: #fff;}
div.panel {widht:50%; height:auto; display:none;}

.reservebutton {background:#f7f7f7; padding: 30px 0; text-align: center; border-bottom:1px dashed #abaaaa;}
.reservebutton a {background:#199bb9; padding:10px 20px; color:#fff; border-radius:5px; box-shadow:0 8px 6px -6px black; border: 2px solid #500209; text-shadow: 2px 2px #6b141b;}
.reservebutton a:hover {color:#fff;}
.reservebutton .container {padding:0 !important;}

.reserveclass {
    background: #199bb9;
    padding: 14px 12px;
    border-radius: 5px;
    font-size: 18px;
    color: #000;
    border: 1px dashed #fff;
    font-weight: bold;
    float: left;
}


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

      RESPONSIVE TABLE FORM
      
**********************************/

.mainheading {width:100%; float:left; background:#e1f1fd; border:1px solid #77c7ff; margin:10px 0 0 0;}
.heading, .heading3 {width:23%; float:left; padding:10px; margin:10px 0 0 2%;}
.heading p, .heading3 p {margin:0; padding:0;}









 /* ===============                      ===============
                   Phones and Handhelds
   ===============                      =============== */
@media only screen and (max-width: 599px) {
.mainheader-left, .mainheader-right {display:none;}
.mainbanner .reservenow {font-size:15px; padding:7px 45px;} 
.mainbanner {background-size: 100%; background-position: 20% 0; color: #000; padding: 140px 0 40px 0;}
.mainheader .mainheader-center {padding-right:5px; padding-left:5px;}
.mainbanner .container {}
.bannercall {font-size: 20px; display:block; text-align: center; background: #199bb9; border-top: 1px dashed #0c748d; padding: 10px 0;}
.bannercall a {color:#000;}

.contentone {width:100%; margin:0 !important;}
.contentone .contentone-left {float: left; width: 100%; display: block; margin: 0 !important;}
.contentone .contentone-left img, .contenttwo .contenttwo-left img {width: 100%;}
.contentone .contentone-right {float: left; width: 100%; display: block;}
.contentone .contentone-right .contentone-rightinner {width: 90%;  margin:0 auto;}
.mainbutton {margin: 0 auto 20px auto;} 

.contenttwo {width:100%; margin:0 !important;}
.contenttwo .contenttwo-left {float: left; width: 100%; display: block; margin: 0 !important;}
.contenttwo .contenttwo-left .contenttwo-leftinner {width: 90%;} 
.contenttwo .contenttwo-left .contenttwo-rightinner {width: 90%;  margin:0 auto;}
.contenttwo .contenttwo-right {width: 100%; display: block; margin: 0 auto;}
.contenttwo .contenttwo-right img {width: 100%;}
.mainbutton {margin: 0 auto 20px auto;}

 

.mainheading {width:100%; float:left; display:block; height:auto; clear:both;}
.heading {width:100%; padding:10px; clear:both; margin:0 !important;}
.heading3 {width:50%; padding:10px; clear:none; margin:0 !important; float:left; height:45px;}
.reservebutton a {display:block; margin:10px auto 0 auto; width:90%;} 

.blog2 img {width: 100%;}
}

@media only screen and (max-width: 549px) and (min-width: 400px) {
.mainheader-left, .mainheader-right {display:none;}
.mainbanner .reservenow {font-size:15px; padding:7px 45px;} 
.mainbanner {background-size: 100%; background-position: 20% 0; color: #000; padding: 190px 0 40px 0;}
.mainheader .mainheader-center {padding-right:5px; padding-left:5px;}
.mainbanner .container {padding:0 !important;}
.bannercall {font-size: 20px; display:block; text-align: center; background: #199bb9; border-top: 1px dashed #0c748d; padding: 10px 0;}
.bannercall a {color:#000;}

.contentone {width:100%; margin:0 !important;}
.contentone .contentone-left {float: left; width: 100%; display: block; margin: 0 !important;}
.contentone .contentone-left img {width: 100%;}
.contentone .contentone-right {float: left; width: 100%; display: block;}
.contentone .contentone-right .contentone-rightinner {width: 90%;  margin:0 auto;}
.mainbutton {margin: 0 auto 20px auto;} 

.contenttwo {width:100%; margin:0 !important;}
.contenttwo .contenttwo-left {float: left; width: 100%; display: block; margin: 0 !important;}
.contenttwo .contenttwo-left .contenttwo-leftinner {width: 90%;} 
.contenttwo .contenttwo-left img, .contenttwo .contenttwo-left img {width: 100%;} {width: 100%;}
.contenttwo .contenttwo-left .contenttwo-rightinner {width: 90%;  margin:0 auto;}
.contenttwo .contenttwo-right {width: 100%; display: block; margin: 0 auto;}
.contenttwo .contenttwo-right img {width: 100%;}
.mainbutton {margin: 0 auto 20px auto;} 
 

.mainheading {width:100%; float:left; display:block; height:auto; clear:both;}
.heading {width:100%; padding:10px; clear:both; margin:0 !important;}
.heading3 {width:50%; padding:10px; clear:none; margin:0 !important; float:left; height:45px;}
.reservebutton a {display:block; margin:10px auto 0 auto; width:90%;} 

.blog2 img {width: 100%;}
}

@media only screen and (max-width: 650px) and (min-width: 550px) {
.mainheader-left, .mainheader-right {display:none;}
.mainbanner .reservenow {font-size:15px; padding:7px 45px;} 
.mainbanner {background-size: 100%; background-position: 20% 0; color: #000; padding: 190px 0 40px 0;}
.mainheader .mainheader-center {padding-right:5px; padding-left:5px;}
.mainbanner .container {padding:0 !important;}
.bannercall {font-size: 20px; display:block; text-align: center; background: #199bb9; border-top: 1px dashed #0c748d; padding: 10px 0;}
.bannercall a {color:#000;}

.contentone {width:100%; margin:0 !important;}
.contentone .contentone-left {float: left; width: 100%; display: block; margin: 0 !important;}
.contentone .contentone-left img {width: 100%;}
.contentone .contentone-right {float: left; width: 100%; display: block;}
.contentone .contentone-right .contentone-rightinner {width: 90%;  margin:0 auto;}
.mainbutton {margin: 0 auto 20px auto;} 

.contenttwo {width:100%; margin:0 !important;}
.contenttwo .contenttwo-left {float: left; width: 100%; display: block; margin: 0 !important;}
.contenttwo .contenttwo-left .contenttwo-leftinner {width: 90%;} 
.contenttwo .contenttwo-left img, .contenttwo .contenttwo-left img {width: 100%;} {width: 100%;}
.contenttwo .contenttwo-left .contenttwo-rightinner {width: 90%;  margin:0 auto;}
.contenttwo .contenttwo-right {width: 100%; display: block; margin: 0 auto;}
.contenttwo .contenttwo-right img {width: 100%;}
.mainbutton {margin: 0 auto 20px auto;} 



.mainheading {width:100%; float:left; display:block; height:auto; clear:both;}
.heading {width:100%; padding:10px; clear:both; margin:0 !important;}
.heading3 {width:50%; padding:10px; clear:none; margin:0 !important; float:left; height:45px;}
.reservebutton a {display:block; margin:10px auto 0 auto; width:90%;} 

.blog2 img {width: 100%;}
}


@media (min-width:750px) and (min-width: 700px) {


}

/* ===============                      ===============
                         Tablets
   ===============                      =============== */
@media only screen and (max-width: 990px) and (min-width: 600px) {
.mainheader-left, .mainheader-right {display:none;}
.mainbanner .reservenow {font-size:15px; padding:7px 45px;} 
.mainbanner {background-size: 100%; background-position: 20% 0; color: #000; padding: 290px 0 40px 0;}
.mainheader .mainheader-center {padding-right:5px; padding-left:5px;}
.mainbanner .container {padding:0 !important;}
.bannercall {font-size: 20px; display:block; text-align: center; background: #199bb9; border-top: 1px dashed #0c748d; padding: 10px 0;}
.bannercall a {color:#000;}

.contentone {width:100%; margin:0 !important;}
.contentone .contentone-left {float: left; width: 100%; display: block; margin: 0 !important;}
.contentone .contentone-left img {width: 100%;}
.contentone .contentone-right {float: left; width: 100%; display: block;}
.contentone .contentone-right .contentone-rightinner {width: 90%;  margin:0 auto;}
.mainbutton {margin: 0 auto 20px auto;} 

.contenttwo {width:100%; margin:0 !important;}
.contenttwo .contenttwo-left {float: left; width: 100%; display: block; margin: 0 !important;}
.contenttwo .contenttwo-left .contenttwo-leftinner {width: 90%;} 
.contenttwo .contenttwo-left img, .contenttwo .contenttwo-left img {width: 100%;} {width: 100%;}
.contenttwo .contenttwo-left .contenttwo-rightinner {width: 90%;  margin:0 auto;}
.contenttwo .contenttwo-right {width: 100%; display: block; margin: 0 auto;}
.contenttwo .contenttwo-right img {width: 100%;}
.mainbutton {margin: 0 auto 20px auto;} 



.mainheading {width:100%; float:left; display:block; height:auto; clear:both;}
.heading {width:100%; padding:10px; clear:both; margin:0 !important;}
.heading3 {width:50%; padding:10px; clear:none; margin:0 !important; float:left; height:45px;}
.reservebutton a {display:block; margin:10px auto 0 auto; width:90%;} 

.blog2 img {width: 100%;}
}

/* ===============                      ===============
                         Laptops
   ===============                      =============== */
@media only screen and (max-width: 1125px) and (min-width: 1000px) { 
.mainheader-left, .mainheader-right {display:none;}
.mainbanner .reservenow {font-size:15px; padding:7px 45px;} 
.mainbanner {background-size: 100%; background-position: 20% 0; color: #000; padding: 290px 0 40px 0;}
.mainheader .mainheader-center {padding-right:5px; padding-left:5px;}
.mainbanner .container {padding:0 !important;}
.bannercall {font-size: 20px; display:block; text-align: center; background: #199bb9; border-top: 1px dashed #0c748d; padding: 10px 0;}
.bannercall a {color:#000;}

.contentone {width:100%; margin:0 !important;}
.contentone .contentone-left {float: left; width: 100%; display: block; margin: 0 !important;}
.contentone .contentone-left img {width: 100%;}
.contentone .contentone-right {float: left; width: 100%; display: block;}
.contentone .contentone-right .contentone-rightinner {width: 90%;  margin:0 auto;}
.mainbutton {margin: 0 auto 20px auto;} 

.contenttwo {width:100%; margin:0 !important;}
.contenttwo .contenttwo-left {float: left; width: 100%; display: block; margin: 0 !important;}
.contenttwo .contenttwo-left .contenttwo-leftinner {width: 90%;} 
.contenttwo .contenttwo-left img, .contenttwo .contenttwo-left img {width: 100%;} {width: 100%;}
.contenttwo .contenttwo-left .contenttwo-rightinner {width: 90%;  margin:0 auto;}
.contenttwo .contenttwo-right {width: 100%; display: block; margin: 0 auto;}
.contenttwo .contenttwo-right img {width: 100%;}
.mainbutton {margin: 0 auto 20px auto;} 



.mainheading {width:100%; float:left; display:block; height:auto; clear:both;}
.heading {width:100%; padding:10px; clear:both; margin:0 !important;}
.heading3 {width:50%; padding:10px; clear:none; margin:0 !important; float:left; height:45px;}
.reservebutton a {display:block; margin:10px auto 0 auto; width:90%;} 

.blog2 img {width: 100%;}
}

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

}