* {
	box-sizing: border-box;
}
	html, body   {
	max-width: 100%;
	overflow-x: hidden;
	padding: 0;
	margin: 0;
}
img {
	max-width:100%;
	height:auto !important;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 10px;
    max-width: 1920px;
    margin-left: auto ;
    margin-right: auto;
    grid-template-areas:
    "logo logo contact contact contact contact social social"
    "menu menu menu menu menu menu menu menu"
    "slider slider slider slider slider slider slider slider"
    "intro intro intro intro images images images images"
    "services services services services services services services services"
    "airport airport seaport seaport corporate corporate wedding wedding"
    "sport sport concert concert party party group group"
    "who who who who what what what what"
    "quote quote quote quote quote quote quote quote"
    "contact-l contact-l contact-l contact-l contact-r contact-r contact-r contact-r"
    "footer footer footer footer footer footer footer footer"
    ;
    }

.logo {
    padding: 20px;
    padding-bottom: 0;
    grid-area: logo;
    text-align: center;
}
.contact {
    padding: 20px;
    padding-bottom: 0;
    grid-area: contact;
    text-align: center;
}
.social {
    padding: 20px;
    padding-bottom: 0;
    grid-area: social;
    text-align: center;
}
.menu1 {
    text-align: center;
    grid-area: menu;
    background-color: #133E6E;
}
/* .menuwrapper {
  width: 50%;
  position: relative;
  max-width: 880px;
  background-color: chartreuse;
  margin-left: auto;
  margin-left: auto;
} */
.slider {
    grid-area: slider;
}
.intro {
    padding: 20px;
    grid-area: intro;
    text-align: center;
}
.right-images {
    padding: 20px;
    grid-area: images;
    text-align: center;
}
.services {
    padding: 20px;
    grid-area: services;
    text-align: center;
}
.airport {
    padding: 20px;
    background-color:  rgb(221, 218, 218);
    grid-area: airport;
    text-align: center;
}
.seaport {
    padding: 20px;
    background-color: rgb(196, 196, 196);
    grid-column: seaport;
    text-align: center;
}
.corporate {
    padding: 20px;
    background-color: rgb(221, 218, 218);
    grid-area: corporate;
    text-align: center;
}
.weddings {
    padding: 20px;
    background-color:  rgb(196, 196, 196);
    grid-area: wedding;
    text-align: center;
}
.sporting {
    padding: 20px;
    background-color: rgb(196, 196, 196);
    grid-area: sport;
    text-align: center;
}
.concerts {
    padding: 20px;
    background-color: rgb(221, 218, 218);
    grid-area: concert;
    text-align: center;
}
.party {
    padding: 20px;
    background-color:  rgb(196, 196, 196);
    grid-area: party;
    text-align: center;
} 
.outings {
    padding: 20px;
    background-color: rgb(221, 218, 218);
    grid-area: group;
    text-align: center;
}
.who {
    padding: 20px;
    grid-area: who;
    text-align: center;
}
.what {
    padding: 20px;
    grid-area: what;
    text-align: center;
}
.pullquote {
    line-height: 1.5;
    padding: 20px;
    grid-area: quote;
    height: 700px;
    background: url(../images/BG1.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 300px;
    padding-bottom: 300px;
    text-align: center;
}

.contact-left {
    padding: 20px;
    grid-area: contact-l;
    text-align: center;
}
.contact-right {
    padding: 20px;
    grid-area: contact-r;
    text-align: center;
}
.footer {
    padding: 20px;
    grid-area: footer;
    background-color: #1C3A68;
    text-align: center;
}
/*! END OF MAIN STYLES */

/*TODO FONT STYLES */
h1 {
  font-size: 2rem ;
  font-family: 'Mochiy Pop P One', sans-serif;
  color: black;
  padding-bottom: 20px;
}
h2 {
  font-size: 1.5rem ;
  font-family: 'Mochiy Pop P One', sans-serif;
  color: black ;
  padding-bottom: 20px;
}
h3 {
  font-size: 1.5rem ;
  font-family: 'Mochiy Pop P One', sans-serif;
  color: black ;
  padding-bottom: 20px;
}
h4 {
  font-size: 1rem ;
  font-family: 'Mochiy Pop P One', sans-serif;
  color: black ;
}
p {
  font-size: 1rem ;
  font-family: 'Raleway', sans-serif;
  color: black ;
  line-height: 1.5em;
}
.pullquotetext {
  color: white;
  font-size: 3rem;
  font-family: 'Mochiy Pop P One', sans-serif;
}
.footertext {
  color: white;
  font-family: 'Raleway', sans-serif;
}
/*! END FONT STYLES*/


  /*! BUTTONS */

  .button {
	background-color: #1C3A68;  /* Green */
	border: none;
	color: white;
  font-family: 'Raleway', sans-serif;
	padding: 16px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 14px 2px;
	transition-duration: 0.4s;
	cursor: pointer;
	}
	
	.button1 {
	background-color: #1C3A68; 
	color: white;     
  margin-left: 10px;
  margin-right: 10px;
	border: 2px solid #1C3A68;
	}
	
	.button1:hover {
	background-color: white;
	color: black;
	}
/*! END BUTTONS */


  /*! Font Awsome */
  .fa {
    padding: 20px;
    font-size: 50px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    margin: 10px 10px;
    color:#0071E0;
  }
  
  .fa:hover {
    opacity: 0.8;
    color: #1d2013;
    transition: .6s ease;
  }
  
  /* choose which icon you require here */
  
  .fa-facebook {
    background:transparent;
    color: rgb(7, 53, 139);
    padding-right: 30px; 
    padding-top: 10px; 
    text-decoration: none;
    transition: .6s ease;
  }
  .fa-instagram {
    background:transparent;
    color: rgb(139, 16, 16);
    padding-right: 20px; 
    padding-top: 10px; 
    text-decoration: none;
    transition: .6s ease;
  }
  .fas:hover {
    opacity: 0.5;
    color: #030300;
    transition: .6s ease;
}
  /*!End font awasome */

  /* -----
SVG Icons 
----- */

.svg-icon {
  width: 1.5em;
  height: 1.5em;
  float: left;
  padding-right: 6px;

}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #f9fbfd;
}

.svg-icon circle  {
  stroke: #fefeff;
  stroke-width: 1;
}

a :hover
.svg-icon path,
.svg-icon polygon,
.svg-icon rect :hover {
  fill: #01070e;
}


/* Scroll to top 2020 */
.cd-top {
        display: inline-block;
        height: 40px;
        width: 40px;
        position: fixed;
        bottom: 40px;
        right: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        /* image replacement properties */
        overflow: hidden;
        text-indent: 100%;
        white-space: nowrap;
        background: #053D67 url("../images/cd-top-arrow.svg") no-repeat center 50%;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: opacity .3s 0s, visibility 0s .3s;
        -moz-transition: opacity .3s 0s, visibility 0s .3s;
        transition: opacity .3s 0s, visibility 0s .3s;
      }
      .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
        -webkit-transition: opacity .3s 0s, visibility 0s 0s;
        -moz-transition: opacity .3s 0s, visibility 0s 0s;
        transition: opacity .3s 0s, visibility 0s 0s;
      }
      .cd-top.cd-is-visible {
        /* the button becomes visible */
        visibility: visible;
        opacity: 1;
      }
      .cd-top.cd-fade-out {
        /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
        opacity: .5;
      }
      .no-touch .cd-top:hover {
        background-color: #F29E92;
        opacity: 1;
      }
      @media only screen and (min-width: 768px) {
        .cd-top {
          right: 20px;
          bottom: 20px;
        }
      }
      @media only screen and (min-width: 1024px) {
        .cd-top {
          height: 60px;
          width: 60px;
          right: 30px;
          bottom: 30px;
        }

      }


      /** CSS Animation */

      .tada {
        -webkit-animation-name: tada;
        animation-name: tada;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        animation-delay: 2s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        }
        @-webkit-keyframes tada {
        0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        }
        10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        }
        30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        }
        40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        }
        100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        }
        }
        @keyframes tada {
        0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        }
        10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        }
        30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        }
        40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        }
        100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        }
        }