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

.box{ padding-left:5%; padding-right:5%;}
 ul { padding: 0px;
        list-style: none;}
.boxs{padding-left: 15px; padding-right: 15px;}
@media (min-width:250px) and (max-width: 940px) {.xs-padding{padding-left:5%; padding-right:5%;}}
@media (min-width:992px){

   
h2  { font-size: 40px;
text-transform: uppercase;
font-weight: 700;

color: #43b1fa;


letter-spacing: .2rem;
transition: all .2s; 
}

.text-center{text-align: center;}

.section-about h1 { font-size: 40px;
text-align: center;
font-weight: 700;
padding-top: 150px;
color: #43b1fa;


letter-spacing: .2rem;
transition: all .2s; 
}




@media (min-width:767px) {.page-p{ padding-left:50px; padding-right:50px}}


.top-p{padding-top:50px;}}




.logo{position: absolute;
	z-index:5000;
	top:50px;
	margin-top: 0px;
	margin-left:50px;}

@media (max-width:991px){

	.top-p{padding-top:150px;}
}

@media (max-width:767px){.top-p{padding-top:25px;}}
	@media (max-width:767px){ .parallax {
        height: 600px;
        background-image: linear-gradient(to right bottom,rgba(25, 34, 156, 0.8) ,rgba(20, 184, 248, 0.8) ), url(../img/high-res-dolphins-2.jpg);
        background-size: cover;
        background-position: center;
        position: relative;
    
		}}
@media (min-width:767px){
 .parallax {
    height: 600px;
    background-image: linear-gradient(to right bottom,rgba(25, 34, 156, 0.8) ,rgba(20, 184, 248, 0.8) ), url(../img/high-res-dolphins-2.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    
}
}


.parallax_inside{
    height: 300px;
    background-image: linear-gradient(to right bottom,rgba(25, 34, 156, 0.8) ,rgba(20, 184, 248, 0.8) ), url(../img/high-res-dolphins-2.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    
}





	.main-head-hr{max-width: 300px; margin-top: 15px;border: 0; height: 1px; border-top: 1px solid #fff; }


@media(max-height:570px){.header__text-box{ position:absolute;top:40%; left: 50%; transform: translate(-50%, -50%); text-align: center}}
@media(min-height:570px){ .header__text-box{ position:absolute;top:50%; left: 50%; transform: translate(-50%, -50%); text-align: center}}


.heading-primary{color: #FFFFFF; text-transform: uppercase; backface-visibility: hidden; margin-bottom: 2rem;}
    @media (max-width:520px){
        
.heading-primary-main{display: block; font-size: 2rem;   font-weight: 400; letter-spacing:2.5rem; animation: moveInLeft; animation-duration: 2s; animation-timing-function: ease-out; /*animation-iteration-count: 3; animation-delay: 3s;*/}
.heading-primary-sub{ display: block; font-size: 1.3rem;margin-bottom: 50px; letter-spacing: .75rem; font-weight: 500;animation: moveInRight 2s ease-out;}
        
    }
    
        @media (min-width:520px){
    


.heading-primary-main{display: block; font-size: 3rem;   font-weight: 400; letter-spacing:3.5rem; animation: moveInLeft; animation-duration: 2s; animation-timing-function: ease-out; /*animation-iteration-count: 3; animation-delay: 3s;*/}

.heading-primary-sub{display: block; font-size: 1.5rem; margin-bottom: 50px;  letter-spacing: 1.75rem; font-weight: 500;animation: moveInRight 2s ease-out;}
    }
    
    @media (min-width:700px){
    
.heading-primary-main{display: block; font-size: 6rem;   font-weight: 400; letter-spacing:3.5rem; animation: moveInLeft; animation-duration: 2s; animation-timing-function: ease-out; /*animation-iteration-count: 3; animation-delay: 3s;*/}
.heading-primary-sub{display: block; font-size: 2rem;margin-bottom: 50px; letter-spacing: 1.75rem; font-weight: 500;animation: moveInRight 2s ease-out;}
    }

.heading-primary-sub{color: rgba(255,255,255,1.00);}
@keyframes moveInLeft{
0%{ opacity: 0;
    transform: translateX(-10rem)}
    
    80% {transform: translateX(2rem)}
    
100%{ opacity: 1; transform: translate(0)}
    
}



@keyframes moveInRight{
0%{ opacity: 0;
    transform: translateX(10rem)}
    
    80% {transform: translateX(-2rem)}
    
100%{ opacity: 1; transform: translate(0)}
    
}
@keyframes moveBottom{
0%{ opacity: 0;
    transform: translateY(2rem)}
    

    
100%{ opacity: 1; transform: translate(0)}
    
}





.btn:link,.btn:visited{text-transform: uppercase;text-decoration: none;padding: 1.5rem 4rem; display: inline-block; border-radius: 100px; transition: all .2s; position: relative;}
.btn:hover{transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,.3); color:rgba(234,163,0,1.00)}
.btn:active{transform:translateY(-1px); box-shadow: 0 5px 8px rgba(0,0,0,.3); }



.btn-white{background-color: #FFFFFF; color: #777777; }
.btn-animated{animation: moveBottom .5s ease-out .75s; animation-fill-mode: backwards }
.btn::after{
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 100px;
    position: absolute;
    top: 0;
    left:0;
    z-index: -1;
    transition: all .4s
    
        
}.btn:hover::after{transform: scaleX(1.4) scaleY(1.6);  opacity: 0 }


.btn-white::after{background-color: #FFFFFF;}


.btn-orange:hover{background-color: #ffb900; color: #fff;}



.section-about{ min-height: 500px;  position: relative; margin-top:50px; margin-bottom: 250px;}@media only screen and (max-width: 56.25em){.section-about{ padding-bottom: 100px}} @media (min-width:800px){.about-padding{padding-left: 4%; }} 
  

@media only screen and (max-width: 992px){
.section-about{margin-top:50px;}
}


.padding_bottom_50{padding-bottom: 50px;}


.composition{position:relative}.composition__photo{width:40%;-webkit-box-shadow:0 1.5rem 4rem rgba(0,0,0,0.4);box-shadow:0 1.5rem 4rem rgba(0,0,0,0.4);border-radius:2px;position:absolute;z-index:10;-webkit-transition:all .2s;transition:all .2s;outline-offset:2rem}

@media only screen and (max-width: 992px){.composition__photo{float:left;position:relative;width:33.33333333%;-webkit-box-shadow:0 1.5rem 3rem rgba(0,0,0,0.2);box-shadow:0 1.5rem 3rem rgba(0,0,0,0.2)}}

.composition__photo--p1{left:20%;top:-2rem}
.composition__photo--p2{right:10%;top:2rem}
@media only screen and (max-width: 992px){
	
	.composition__photo--p1{top:3rem;left: 50%; -webkit-transform:scale(1.2);transform:scale(1.2)} .composition__photo--p2{right:-50%;}}



@media only screen and (max-width: 992px){.composition__photo--p2{top:6rem;-webkit-transform:scale(1.3);transform:scale(1.3);z-index:100}}.composition__photo--p3{left:30%;top:10rem}

@media only screen and (max-width: 992){
	
	
	.composition__photo--p3{top:2.6rem;left:0%;-webkit-transform:scale(1.1);transform:scale(1.1)}}


.composition__photo:hover{ outline: 10px solid  #43b1fa;
    transform: scale(1.05) translateY(-0.5rem);
    box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.5);
    z-index: 20;}

.composition:hover .composition__photo:not(:hover){-webkit-transform:scale(0.95);transform:scale(0.95)}

.feature-box {
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 1.5rem;
    padding: 1rem;
	min-height: 300px;
 padding: 25px;
	margin-left: 25px;
		margin-right: 25px;
    text-align: center;
    border-radius: 3px;
    -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}
@media only screen and (max-width: 992px) {
    .feature-box {
        margin: 2rem;
    }
}

.feature-box:hover {
    -webkit-transform: translateY(-1.5rem) scale(1.03);
    transform: translateY(-1.5rem) scale(1.03);
}
.section-features {

    padding: 20rem 0;
    background-image: linear-gradient(to right bottom, rgba(20, 184, 248, 0.8), #19229c), url(../img/high-res-dolphins-1.jpg);
    background-size: cover;
    background-position: center;
    transform: skewY(-7deg);
    margin-top: -10rem; 
margin-bottom: 150px;}
    .section-features > * {
      transform: skewY(7deg);
}




@media only screen and (max-width: 992px) {
    .section-features {
        padding: 10rem 0;
		clip-path:none
    }
}

 .events-socail-media {width: 40px; float: left} 
	.link { text-decoration: underline;} 

@media(min-width:992px){.events h3{ display: block; font-size: 4rem; margin-top:-80px; text-align: center;   font-weight: 400; letter-spacing:1rem; ;}}@media(max-width:992px){.events h3{ display: block; font-size: 4rem; margin-top:50px; text-align: center;   font-weight: 400; letter-spacing:1rem; ;}} .events a{font-weight: 600; color: rgb(25, 34, 156)} .events p a:hover{ color: rgba(93,93,93,1.00)}  

@media only screen and (max-width: 56.25em) {.section-events { padding: 20rem 0 10rem 0;}}

.btn,.btn:link,.btn:visited {    text-transform: uppercase;    text-decoration: none;    padding: 1.5rem 4rem;    display: inline-block;    border-radius: 10rem;    -webkit-transition: all 0.2s;    transition: all 0.2s;    position: relative;    font-size: 1.6rem;    border: none;    cursor: pointer;}.btn:hover {    -webkit-transform: translateY(-3px);    transform: translateY(-3px);    -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);}.btn:hover::after {    -webkit-transform: scaleX(1.4) scaleY(1.6);    transform: scaleX(1.4) scaleY(1.6);    opacity: 0;}
.btn:active,.btn:focus {    outline: none;    -webkit-transform: translateY(-1px);    transform: translateY(-1px);    -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);}.btn--white { background-color: #fff; color: #777;}.btn--white::after {  background-color: #fff;}

/* Slideshow container */

	.slideshow-container {
	
		height: auto;
		position: relative;
		margin: auto;
	}
	
	.mySlides {
		display: none;
	}
	
	
	/* Next & previous buttons */
	
	.prev,
	.next {
		cursor: pointer;
		position: absolute;
		top: 50%;
		width: auto;
		margin-top: -22px;
		padding: 16px;
		color: #FFF;
		font-weight: bold;
		font-size: 28px;
		transition: 0.6s ease;
		border-radius: 0 3px 3px 0;
	}
	
	
	/* 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 {
		background-color: rgba(0, 0, 0, 0.8);
	}
	
	
	/* NUmber text (1/3 etc) */
	
	.numbertext {
		color: yellow;
		font-size: 12px;
		padding: 8px 12px;
		position: absolute;
		bottom: 0;
	}
	
	
	/* The dots/bullets/indicators */
	
	.dot {
		cursor: pointer;
		height: 13px;
		width: 13px;
		margin: 0 2px;
		background-color: #bbb;
		border-radius: 50%;
		display: inline-block;
		transition: background-color 0.6s ease;
	}
	
	.active,
	.dot:hover {
		background-color: #717171;
	}
	
	
	/* Fading animation */
	
	.fade {
		-webkit-animation-name: fade;
		-webkit-animation-duration: 1.5s;
		animation-name: fade;
		animation-duration: 1.5s;
	}
	
	@-webkit-keyframes fade {
		from {
			opacity: .4
		}
		to {
			opacity: 1
		}
	}
	
	@keyframes fade {
		from {
			opacity: .4
		}
		to {
			opacity: 1
		}
	}
.navigation__checkbox {
  display: none; }

.navigation__button {
  background-color: #fff;
  height: 7rem;
  width: 7rem;
  position: fixed;
  top: 6rem;
  right: 6rem;
  border-radius: 50%;
  z-index: 2000;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer; }

.navigation__background {
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  position: fixed;
  top: 6.5rem;
  right: 6.5rem;
  background-image: linear-gradient( to right bottom, rgb(20, 184, 248), rgb(25, 34, 156));
  z-index: 1000;
  transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1); }

.navigation__nav {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;
  opacity: 1;
display: none;
  width: 0;
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.navigation__list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
  width: 100%; }

.navigation__item {
  margin: 1rem; }

.navigation__link:link, .navigation__link:visited {
  display: inline-block;
  font-size: 3rem;
  font-weight: 300;
  padding: 1rem 2rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
  background-size: 220%;
  transition: all .4s; }
  .navigation__link:link span, .navigation__link:visited span {
    margin-right: 1.5rem;
    display: inline-block; }

.navigation__link:hover, .navigation__link:active {
  background-position: 100%;
  color: #19229c;
  transform: translateX(1rem); }

.navigation__checkbox:checked ~ .navigation__background {
  transform: scale(80); }

.navigation__checkbox:checked ~ .navigation__nav {
  opacity: 1;
  width: 100%; 
display:inline-block;
}

  
.navigation__icon {
  position: relative;
  margin-top: 3.5rem; }

  .navigation__icon, .navigation__icon::before, .navigation__icon::after {
    width: 3rem;
    height: 2px;
    background-color: #333;
    display: inline-block; }
  .navigation__icon::before, .navigation__icon::after {
    content: "";
    position: absolute;
    left: 0;
    transition: all .2s; }
  .navigation__icon::before {
    top: -.8rem; }
  .navigation__icon::after {
    top: .8rem; }

.navigation__button:hover .navigation__icon::before {
  top: -1rem; }

.navigation__button:hover .navigation__icon::after {
  top: 1rem; }

.navigation__checkbox:checked + .navigation__button .navigation__icon {
  background-color: transparent; }

.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
  top: 0;
  transform: rotate(135deg); }

.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
  top: 0;
  transform: rotate(-135deg); }

.card { margin-left: 25px;
    margin-right: 25px;
    perspective: 150rem;
    -moz-perspective: 150rem;
    position: relative;
    height: 52rem; }
    .card__side {
      height: 52rem;
      transition: all .8s ease;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      backface-visibility: hidden;
      border-radius: 3px;
      overflow: hidden;
      box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); }
      .card__side--front {
        background-color: #fff; }
      .card__side--back {
        transform: rotateY(180deg); }
        .card__side--back-1 {
          background-image: linear-gradient(to right bottom, #2998ff, #5643fa); }
        .card__side--back-2 {
          background-image: linear-gradient(to right bottom,#ffb900, #ff7730 ); }
   
    .card:hover .card__side--front {
      transform: rotateY(-180deg); }
    .card:hover .card__side--back {
      transform: rotateY(0); }
    .card__picture {
      background-size: cover;
      height: 23rem;
      background-blend-mode: screen;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
      clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
      border-top-left-radius: 3px;
      border-top-right-radius: 3px; }
      .card__picture--1 {
        background-image:  url(../img/jumping-dolphins.jpeg); }
      .card__picture--2 {
        background-image:  url(../img/sunset-ocean-outer-banks-nc.jpg); }
  
    .card__heading {
      font-size: 2.8rem;
      font-weight: 300;
      text-transform: uppercase;
      text-align: right;
      color: #fff;
      position: absolute;
      top: 75px;
      right: 2rem;
      width: 75%; }
    .card__heading-span {
      padding: 1rem 1.5rem;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone; }
      .card__heading-span--1 {
        background-image: linear-gradient(to right bottom, rgba(41, 152, 255, 0.85), rgba(86, 67, 250, 0.85)  ); }
      .card__heading-span--2 {
        background-image: linear-gradient(to right bottom, rgba(255, 185, 0, 0.85), rgba(255, 119, 48, 0.85)); }
      
    .card__details {
      padding: 3rem; }
      .card__details ul {
     
        width: 80%;
        margin: 0 auto; }
        .card__details ul li {
          text-align: center;
          font-size: 1.5rem;
          padding: 1rem; }
          .card__details ul li:not(:last-child) {
            border-bottom: 1px solid #eee; }
    .card__cta {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      text-align: center; }
    .card__price-box {
      text-align: center;
      color: #fff;
      margin-bottom: 8rem; }
    .card__price-only {
      font-size: 1.4rem;
      text-transform: uppercase; }
    .card__price-value {
      font-size: 6rem;
      font-weight: 100; }.row2 {    max-width: 114rem;    margin: 0 auto;}.row2:not(:last-child) {    margin-bottom: 8rem;}@media only screen and (max-width: 56.25em) {   .row2:not(:last-child) {        margin-bottom: 6rem;    }}@media only screen and (max-width: 56.25em) {    .row2 { max-width: 50rem;  padding: 0 1rem;    }}.row2::after {    content: "";    display: table;    clear: both;}.row2 [class^="col-"] {    float: left;}@media only screen and (max-width: 56.25em) { .row2 [class^="col-"]:not(:last-child) { margin-right: 0;  margin-bottom: 6rem;  }}@media only screen and (max-width: 56.25em) {    .row2 [class^="col-"] {   width: 100% !important;    }}

      
      .footer__navigation {
    
        
        display: inline-block; }
      .footer__list {
        list-style: none; }
      .footer__item {
        display: inline-block; padding-right: 15px;}

        @media (min-width: 992px) { .story  { transform: skewX(-12deg); }   .story__text {
          transform: skewX(12deg); }  }
      .story {
       
        width: 100%;
        margin: 0 auto;
        
        background-color: rgba(255, 255, 255, 0.6);
        border-radius: 3px;
        padding: 6rem;
        padding-left: 9rem;
        font-size: 1.6rem;

        
        border: #2998ff solid 1px; }

   
      

          .contact_section{ color: #ffffff;     padding: 50px 0;
            background-image: linear-gradient(to right bottom, rgb(20, 138, 248), rgba(25, 34, 156, 0.9)), 
            url(../img/harbor-star-boat.png); 
            background-size: cover;
            background-position: bottom;
         }
      .text_color_white{color: #ffffff !important}

      .text_right{text-align: right;}