@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;700&display=swap');

body {
	background-color:#f1f1f1;
	overflow-y: scroll;
}
.three {padding:10px}
h2 small {
color:#666
}
#blue-menu {padding:1em;}
a.blue-menu-links  {font-size:1.5em; color:#fefefe; text-shadow: 1px 1px 1px #666; cursor:pointer;}
.main-menu-links {text-shadow: 1px 1px 1px #666;}
#owned {font-size:1.85em; padding-bottom:1em; padding-top:1em }
.disclaimer {margin-top:-9vh; padding:1.5em; text-align:center; border-radius:6px; box-shadow: 0 0 20px 0 rgb(117 117 117 / 60%)}
.disclaimer p {line-height:28px; font-size:16px; padding:0; margin:0}
.hero {
margin-top:55px;
height: 92vh;
background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.2), rgba(0,0,0,0)), url(https://www.lsimarine.com/images/lsi-marine-construction-kitty-hawk-outer-banks-mobile.jpg) center center / cover no-repeat;
}
.hero-portfolio {
margin-top:55px;
height: 92vh;
background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.2), rgba(0,0,0,0)), url(https://www.lsimarine.com/images/1-first.jpg) center center / cover no-repeat;
}
.hero-about {
margin-top:55px;
height: 92vh;
background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.1), rgba(0,0,0,0)), url(https://www.lsimarine.com/images/equipment/lsi-marine-construction-outer-banks-16.jpg) center center / cover no-repeat;
}
.hero-contact {
margin-top:55px;
height: 24vh;
}
.add-top {margin-top:3em}
.add-bottom {margin-bottom:3em}
.logo {
height:18vh; 
width:auto; 
margin: 2vh 2vw;
background-color:#fff;
z-index:100;
}
.testimonials-section {
  margin-bottom:4em;
  width:100%;
  background-color:transparent;
  height: 750px;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.lsi {padding:3em}
#top-div {
background-color:#009ad1; 
height:55px;
position:fixed; 
top:0;
width:100%;
z-index:2000;
}
.menu.simple.vertical {height:70vh; }
/* consultation section */

.button.success {background-color: #fff;
	color: #00517e; font-weight:bold; border:1px solid outset #00517e}
.button.success:hover {background-color: #efefef;
	color: #00517e; font-weight:bold}
.button.primary {background-color: #009ad1;
	color: #fff; margin-top:1em; border:1px solid #008EC0 ; border-radius:4px; box-shadow: 4px 4px 8px 0px rgb(0 0 0 / 50%);}
.button.primary:hover {background-color: #007AA6;
	color: #fff; }

#wave {
height: 45vh; 
width:100%; 
overflow:hidden; 
background: url(https://www.lsimarine.com/images/wave.jpg) no-repeat;
background-size: cover; top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
}	  
#hero#bgvideo {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#wave-text {
position:absolute; 
top:1; 
left:5%; 
z-index:10; 
color:#fefefe; 
width:90%; 
margin-top:10vh
}
.hero h1, .hero-portfolio h1 {
font : normal 700 2.25em 'Nunito Sans', sans-serif;
text-align: center;
color: #fefefe;
text-shadow: 1px 1px 2px #0a0a0a;
}
.hero h2, .hero-portfolio h2 {
font : normal 300 1.25em 'Nunito Sans', sans-serif;
text-align: center;
color: #fefefe;
text-shadow: 1px 1px 2px #0a0a0a;
}
.hero h1, .hero-about h1 {
font : normal 700 2.25em 'Nunito Sans', sans-serif;
text-align: center;
color: #fefefe;
text-shadow: 1px 1px 2px #0a0a0a;
}
.hero h2, .hero-about h2 {
font : normal 300 1.25em 'Nunito Sans', sans-serif;
text-align: center;
color: #fefefe;
text-shadow: 1px 1px 2px #0a0a0a;
}
.hero h1, .hero-contact h1 {
font : normal 700 2.25em 'Nunito Sans', sans-serif;
text-align: center;
color: #fefefe;
text-shadow: 1px 1px 2px #0a0a0a;
}
.hero h2, .hero-contact h2 {
font : normal 300 1.25em 'Nunito Sans', sans-serif;
text-align: center;
color: #fefefe;
text-shadow: 1px 1px 2px #0a0a0a;
}
.hero-section {
background: url("https://www.lsimarine.com/images/background-blue.jpg") 50% no-repeat;
background-size: cover;
height: 85vh;
text-align: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.hero-section .hero-section-text {
color: #fefefe;
text-shadow: 1px 1px 2px #0a0a0a;
}
* {
margin: 0;
padding: 0;
}
.text-bigger {
font-size:125%
}
.button {
font-family: 'Nunito Sans', sans-serif; font-weight:300
}
h1,h2,h3,h4,h5,h5,p,ul,li {
font-family: 'Nunito Sans', sans-serif; 
font-weight:300
}
.h1,.h2,.h3,.h4,.h5,.h5 {
font-family: 'Nunito Sans', sans-serif; 
font-weight:300
}
.card p {
font-size:1em; line-height:1.5em}

.dark-blue { color:rgba(8, 31, 63, 1) }

.medium-blue { color:rgba(0, 0, 0, 0) }

.light-blue { color:rgba(0, 0, 0, 0) }

.container {
width:100%; 
margin:0 auto; 
max-width:1200px;
}
.top-bar-title {
margin:0; padding:0; 
}
.hero-text {	
position: absolute;
top: 55vh;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width:100%;
max-width:1200px;
padding:1em;
margin:0;
z-index:1;
}
.hero-section-2 {
background: url('https://www.lsimarine.com/images/pathway.jpg') 50% no-repeat;
background-size:cover;
height: 50vh;
margin-top:5vh;
text-align: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.hero-section-2 .hero-section-text {
color: #fefefe;
text-shadow: 1px 1px 2px #0a0a0a;
}
.top-bar {
padding:0; 
margin:0; 
z-index:99
}
.topbar-responsive {
background: rgba(0, 0, 0, 0);
width:100%;
height:22vh;
padding:0;
z-index:101;
position:relative;
}
.topbar-responsive .menu {
z-index:1000;
width: 100%;
background-color:#009ad1;
overflow:hidden;
}
.topbar-responsive .topbar-responsive-logo {
vertical-align: middle; 
z-index:103
}

.topbar-responsive .menu li:last-of-type {
margin-right: 0;
}

.topbar-responsive .menu a {
color: #fefefe;
transition: color 0.15s ease-in;
padding:1em;
font-size:200%;
}

.topbar-responsive .menu a:hover {
color: #c6d1d8;
}
.topbar-responsive .menu li:first-of-type {
margin-left:0.875rem;
padding-top:5vh;
}
.topbar-responsive .top-bar-title {
position: relative;
width: 100%;
}
.topbar-responsive .top-bar-title span {
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.topbar-responsive .top-bar-title span .menu-icon {
margin-right:1em;
z-index:104;
}
.topbar-responsive-links {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
width: 100%;
-webkit-animation: fadeIn 0.3s ease-in;
animation: fadeIn 0.3s ease-in;
}
.menu-icon::after, .menu-icon:hover::after {
/* the block itself, the first line */
background: #fefefe;
/* respect WebKit */
-webkit-box-shadow: 0 8px 0 #fefefe, 0 16px 0 #fefefe; 
/* middle and bottom */
box-shadow: 0 8px 0 #fefefe, 0 16px 0 #fefefe;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
@keyframes slideDown {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}	
.card-section h4 {
font-size:1.625em;
}
#services.text-center{
font-size:2em;
}
#news {font-size:2.25em}
h5 a {
font-size:1.25em
}
.slick-prev:before, .slick-next:before {
	color:#0a0a0a;
	}
	.slider-nav {width:100; height:auto}
	.slider-nav img {padding:1em .5em}
	.slider-for {width:100%; height:auto}
@media screen and (max-width: 63.9375em) {
.topbar-responsive .menu {
left:0;
position:absolute;
top:22vh;
padding:0;
margin:0;
height:auto;
}
}
@media screen and (min-width: 40em) {
.three {padding:1em}	
.testimonials-section {
  height: 600px;
	}
}/* LARGE SCREEN MEDIA QUERIES */

@media screen and (min-width:64em) {
.disclaimer p {line-height:30px; font-size:18px; padding:0; margin:0}
#social-links {float:right}
.disclaimer {margin-top:-6vh; padding:1.5em; text-align:center; border-radius:6px; box-shadow: 0 0 20px 0 rgb(117 117 117 / 60%);}
.topbar-responsive .menu {
z-index:98;
max-height:4em;
width: 100%;
background-color:#009ad1;
overflow:hidden;
}
.dark {color:#006285}
.dark:hover {color:#00749e}
#top-div {
z-index:99; 
background-color:#009ad1; 
position:relative; 
height:55px;
}
.three {padding:1.25em}
#owned {font-size:2.5em; padding-bottom:30px; padding-top:0em;}
.hero {
height: 100vh;
margin-top:0;
background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.1), rgba(0,0,0,0)), url(https://www.lsimarine.com/images/lsi-marine-construction-kitty-hawk-outer-banks1.jpg) center center / cover no-repeat;
}
.lsi {padding-top:5em; padding-bottom:5em}
.add-top {margin-top:5em}
.add-bottom {margin-bottom:5em}
/* consultation section */
.on-site-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: url("https://www.lsimarine.com/images/pier-white.png");

  /* Set a specific height */
  height: 150px;

  /* Position and center the image to scale nicely on all screens */
  background-position:left;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  background-color:#117ec0;
}

/* Place text in the middle of the image */
.on-site-text {
  text-align: right;
  position: absolute;
  top: 55%;
  right: 0%;
  transform: translate(-50%, -50%);
  color: white;
  padding-right:3em;
}
.hero-portfolio {
height: 100vh;
margin-top:0;
}
.hero-about {
height:100vh;
margin-top:0;
}
.hero-contact {
height: 24vh;
margin-top:0;
background:none;
}
.top-bar-right {
position:relative;
width:auto;
float:right;
}
.topbar-responsive .menu a {
font-size:115%;
}
	
#services.text-center{
font-size:2.5em
}
#news {font-size:3em}
.topbar-responsive .top-bar-title {
position: relative;
width:auto;
}	
.topbar-responsive .menu li:first-of-type {
margin-left:0.875rem;
padding-top:0vh;
}
p {
font-size:125%; 
line-height:2em
}
.topbar-responsive .menu {
margin:0;
padding: 0;
height:auto;
background: rgba(0, 0, 0, 0);
}
.logo {
height:22vh; 
width:auto; 
padding:0;
margin-top:-50px; 
z-index:105
}
.hero h1,.hero-portfolio h1 {
color: #fff;
font : normal 700 3.5em 'Nunito Sans', sans-serif;
text-align: center;
text-shadow: 1px 1px 2px #0a0a0a;
}
.hero h1,.hero-about h1 {
color: #fff;
font : normal 700 3.5em 'Nunito Sans', sans-serif;
text-align: center;
text-shadow: 1px 1px 2px #0a0a0a;
}
.hero h2, .hero-about h2 {
color: #fff;
font : normal 300 2em 'Nunito Sans', sans-serif;
text-align: center;
text-shadow: 1px 1px 2px #0a0a0a;
}
.hero h1,.hero-contact h1 {
color: #fff;
font : normal 700 3.5em 'Nunito Sans', sans-serif;
text-align: center;
text-shadow: 1px 1px 2px #0a0a0a;
}
.hero h2, .hero-contact h2 {
color: #fff;
font : normal 300 2em 'Nunito Sans', sans-serif;
text-align: center;
text-shadow: 1px 1px 2px #0a0a0a;
}
.hero h2, .hero-portfolio h2 {
color: #fff;
font : normal 300 2em 'Nunito Sans', sans-serif;
text-align: center;
text-shadow: 1px 1px 2px #0a0a0a;
}
#wave {
height: 50vh; 
width:100%; 
overflow:hidden; 
background: url(https://www.lsimarine.com/images/wave.jpg) no-repeat;
background-size: cover;
}
#wave-text {
position:absolute; 
top:1; 
left:16%; 
z-index:10; 
color:#fefefe; 
width:68%; 
margin-top:18vh
}
.hero-section {
height: 80vh;
}
p {
font-size:110%; 
line-height:1.5em
}
}
/* END LARGE SCREENS */

@media screen and (min-width: 75em) {
.hero-section {
height: 75vh;
}
p {
font-size:125%; 
line-height:2em
}
}