body {font-size:15px;font-family: 'Open Sans', sans-serif;background-color: #ddd;       }
a:link {color:#001f59}
nav .navbar-nav {float:right;margin-top: 10px}
.navbar-inverse {background-color:#001f59}

.navbar-inverse .navbar-nav>li>a,.navbar-inverse .navbar-brand {color:#fff}
.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li>a.active {opacity:0.7}
.navbar-inverse .navbar-brand h1 {font-family: 'Montserrat', sans-serif;text-transform:uppercase;
font-size:2em;}
.navbar-brand {height: auto;padding:0px 15px 8px;font-size:1em}
nav.navbar {border-radius:0;margin-bottom: 10px}
body .navbar-collapse {padding: 0}

.main {text-align:left}
.main h2 {text-align:center}
.tv {display:table;margin:0 auto;width:820px;border-radius:15px;border:15px solid #92a9bd;}
body.ships .tv {background-color:#000;}
/* panoramic scrolling begin */
#tech-slideshow {
    height: 575px;
    position: relative;
    overflow: hidden;
    z-index:5;
}
#tech-slideshow > div {
    height: 575px;
    width: 2337px;
    background: url("../img/home_panoramic.jpg");
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    
    -moz-transition:  opacity 0.5s ease-out; 
       -o-transition: opacity 0.5s ease-out; 
  -webkit-transition: opacity 0.5s ease-out; 
      -ms-transition: opacity 0.5s ease-out; 

    -webkit-animation: moveSlideshow 55s linear infinite;
    -moz-animation:    moveSlideshow 55s linear infinite;
    
}


@-webkit-keyframes moveSlideshow {
    0% { right: 0; }
    100% { right: -1558px; }
}
@-moz-keyframes moveSlideshow {
    0% { right: 0; }
    100% { right: -1558px; }
}

/* end scrolling script */


/* fade animation begin */
.slider,.slider3 {
  width: 300px;
  height: 200px;
  margin: 0;
  position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5,.slide6 {
  position: absolute;
  width: 100%;
  height: 100%;
  display:table;
}
.slide1 {
  background: url(../img/gateway-marina-hm1.jpg) no-repeat center;
      background-size: cover;
    animation:fade 9s infinite;
-webkit-animation:fade 9s infinite;

} 
.slide2 {
  background: url(../img/gateway-marina-hm2.jpg) no-repeat center;
      background-size: cover;
    animation:fade2 9s infinite;
-webkit-animation:fade2 9s infinite;
}
.slide3 {
  background: url(../img/gateway-marina-hm3.jpg) no-repeat center;
      background-size: cover;
    animation:fade3 9s infinite;
-webkit-animation:fade3 9s infinite;
}
.slide4 {
  background: url(../img/gateway-marina-hm4.jpg) no-repeat center;
      background-size: cover;
    animation:fade 9s infinite;
-webkit-animation:fade3 9s infinite;
}
.slide5 {
  background: url(../img/gateway-marina-hm5.jpg) no-repeat center;
      background-size: cover;
    animation:fade2 9s infinite;
-webkit-animation:fade3 9s infinite;
}
.slide6 {
  background: url(../img/gateway-marina-hm6.jpg) no-repeat center;
      background-size: cover;
    animation:fade3 9s infinite;
-webkit-animation:fade3 9s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

/* animation end */
#hmanimation {position:absolute;top:370px;left:195px;z-index: 99999;background:rgba(255,255,255,0.7);color:#000;
height: 200px;border-radius:15px;width:780px;}
.content {width:460px;float:left;padding: 20px 10px 10px 20px; height: 200px;font-weight:bold}
.home .content,.ships .content  {overflow-y: hidden;}
.home .content {padding-top: 0px}
#hmanimation h1 {font-family: "Montserrat"; display:block;font-size:1.7em; line-height:1.3em}

.slider,.slider3 {float:right; margin-left:20px;}

.slider div,.slider3 div,.slider img {border:2px solid #fff;border-radius:15px}

/* Ships slide */
/* fade animation begin */
.slider2,.slider4,.slider5,.slider6  {
  width: 820px;
  height: 575px;
  margin: 0;
  position: relative;

}
.slider2 .slide1 {
  background: url(../img/chandlery_main01.jpg) no-repeat center;
      background-size: cover;
    animation:fade4 13s infinite;
-webkit-animation:fade4 13s infinite;

} 

.slider2 .slide2 {
  background: url(../img/chandlery_main02.jpg) no-repeat center;
      background-size: cover;
    animation:fade5 13s infinite;
-webkit-animation:fade5 13s infinite;
}

@keyframes fade4
{
  0%   {opacity:1}
  50% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade5
{
  0%   {opacity:0}
  50% { opacity: 1}
  100% { opacity: 0}
}
.slider3 .slide1 {
  background: url(../img/ships-store-sm2.jpg) no-repeat center;
      background-size: cover;
    animation:fade4 9s infinite;
-webkit-animation:fade4 9s infinite;

} 
.slider3 .slide2 {
  background: url(../img/ships-store-sm1.jpg) no-repeat center;
      background-size: cover;
    animation:fade5 9s infinite;
-webkit-animation:fade5 9s infinite;
}
/* ships slide end */

/* hi n dry */
#tech-slideshow > div#tech-slideshow-2 {
    height: 575px;
    width: 2287px;
    background: url("../img/hidri_panoramic.jpg");
    -webkit-animation: moveSlideshow2 55s linear infinite;
    -moz-animation:    moveSlideshow2 55s linear infinite;
    }
    
@-webkit-keyframes moveSlideshow2 {
    0% { right: 0; }
    100% { right: -1524px; }
}
@-moz-keyframes moveSlideshow2 {
    0% { right: 0; }
    100% { right: -1524px; }
}
/*  wet slips */

.slider4 .slide1 {
  background: url(../img/wetslips_main01.jpg) no-repeat center;
      background-size: cover;
    animation:fade4 13s infinite;
-webkit-animation:fade4 13s infinite;

} 

.slider4 .slide2 {
  background: url(../img/wetslips_main02.jpg) no-repeat center;
      background-size: cover;
    animation:fade5 13s infinite;
-webkit-animation:fade5 13s infinite;
}

/* docking */
.slider5 .slide1 {
  background: url(../img/docking01.jpg) no-repeat center;
      background-size: cover;
    animation:fade4 13s infinite;
-webkit-animation:fade4 13s infinite;

} 

.slider5 .slide2 {
  background: url(../img/docking02.jpg) no-repeat center;
      background-size: cover;
    animation:fade5 13s infinite;
-webkit-animation:fade5 13s infinite;
}

/*contact*/
/* docking */
.slider6 .slide1 {
  background: url(../img/contact-gateway-marina.jpg) no-repeat center;
      background-size: cover;
    animation:fade4 13s infinite;
-webkit-animation:fade4 13s infinite;

} 

.slider6 .slide2 {
  background: url(../img/wetslips_main02.jpg) no-repeat center;
      background-size: cover;
    animation:fade5 13s infinite;
-webkit-animation:fade5 13s infinite;
}


/*responsive */
@media only screen  and (max-width: 1024px)  {
	.container {width:1000px}
	.navbar-inverse .navbar-brand h1 {font-size:1.8em;margin-top:15px}
	.nav>li>a {padding:10px}
	#hmanimation {left:110px}
	.row {margin: 0}
	.main {display:none}
}

@media only screen  and (max-width: 768px)  {
	.container {width:768px}
.tv {width: 748px;border-width:10px}
.col-lg-12 {padding: 0}
nav .navbar-nav {float:left}
	#hmanimation {left:30px;width:700px}
	.content {width:400px}
	.slider, .slider3 {margin-left: 0}
	.slider2, .slider4, .slider5, .slider6 {width: 740px}
}

@media only screen  and (max-width: 736px)  {
	.container {width:736px;padding: 0}
.tv {width: 100%;}
.navbar-nav {margin: 8px 0}
.slider2, .slider4, .slider5, .slider6 {width: 716px}
.navbar-inverse .navbar-brand h1 {margin-left: 10px}
nav .navbar-nav {margin-left: 30px}
#hmanimation {left:18px}
}

@media only screen  and (max-width: 667px)  {
	.container {width:667px;padding: 0}
.tv {width: 100%;}
.navbar-nav {margin: 8px 0}
.slider2, .slider4, .slider5, .slider6 {width: 647px}
.navbar-inverse .navbar-brand h1 {margin-left: 10px}
nav .navbar-nav {margin-left: 30px}
#hmanimation {left:10px;width:640px}
.content {width:340px}
#hmanimation h1 {margin-top: 0}
}

@media only screen  and (max-width: 568px)  {
	body {font-size:12px}
	.container {width:568px;padding: 0}
.tv {width: 100%;}
.navbar-nav {margin: 8px 0}
.slider2, .slider4, .slider5, .slider6 {width: 548px}
.navbar-inverse .navbar-brand h1 {margin-left: 10px}
nav .navbar-nav {margin-left: 30px}
#hmanimation {left:10px;width:548px}
.content {width:248px}
#hmanimation h1 {margin-top: 10px}
body#wet .content {padding: 5px}
}

@media only screen  and (max-width: 414px)  {
	body {font-size:12px}
	.container {width:414px;padding: 0}
.tv {width: 100%;}
.navbar-nav {margin: 8px 0}
.slider2, .slider4, .slider5, .slider6 {width: 394px}
.navbar-inverse .navbar-brand h1 {margin-left: 10px}
nav .navbar-nav {margin-left: 30px}
#hmanimation {left:10px;width:auto;float:none;height:auto;}
.content {height: auto;text-align:center;padding: 15px}
.slider, .slider3 {display: none}
#hmanimation h1 {margin-top: 10px}
body#wet .content {padding: 15px}

}

@media only screen  and (max-width: 320px)  {
	body {font-size:10px}
	.container {width:320px;padding: 0}
.tv {width: 100%;}
.navbar-nav {margin: 8px 0}
.slider2, .slider4, .slider5, .slider6 {width: 300px}
.navbar-inverse .navbar-brand h1 {margin-left: 10px}
nav .navbar-nav {margin-left: 30px}
#hmanimation {left:10px;width:300px;float:none}
.content {width:300px}
.slider {display: none}
#hmanimation h1 {margin-top: 10px}
body#wet .content {padding: 5px}
}