@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
@import url("https://fonts.googleapis.com/css?family=Work+Sans:200,300,400,500");
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@700&family=WindSong:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 62.5%;
    font-size: 10px;
    font-family: 'Oswald', sans-serif;    
    background-color: #F5F5F5;
}
/* body, */
#slider,
.wrap,
.slide-content {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}
/* .abt{
  line-height: 200% !important;
  text-align: center;
  font-family: cursive !important;
  margin-top: 3%;
  letter-spacing: 0.2rem;
  padding: 2%;
  color: white;
  background-color: #26272b;
  /* position: absolute; */
  /* margin-left: 15%;
  top: 10%;
  width: 70%;
  height: 100%;
} */

.lights h2{
  /* border-bottom: 2px solid currentColor; */
  text-decoration: underline;
  text-underline-position: under;
  color: white;
    text-shadow: 0 0 5px yellow, 0 0 10px rgb(255, 115, 0),
             0 0 5px rgb(255, 115, 0), 0 0 30px rgb(255, 115, 0),
             0 0 5px rgb(255, 115, 0);
}
.nameplates h2{
  text-decoration: underline;
  text-underline-position: under;
  color: #5c4444;
    text-shadow: -1px -1px 1px #FFFFFF, 1px 1px 1px #5c4444;
    /* text-shadow: 2px 2px 2px #CCCCCC; */
}

.heading{
  font-family: 'Nanum Gothic', sans-serif;
  margin-left: 10%;
  margin-right: 10%;
  transform: scale(1, 1.5);
  line-height: 8rem;
  font-size: 42px;
  letter-spacing: 0.7rem;
  position: relative;
  /* margin: 0 auto; */
  text-align: center;
  top: 35%;
  /* margin-top: 10%; */
}
.abt h2{
  stroke-width: 10rem;
  color: white;
} */



/*------------------------------------*/
/*------ General Styles for Pen ------*/
/*------------------------------------*/

* {font-family: "Work Sans", sans-serif;}

.container{margin-top:5vh;}

.col-lg-6{padding:0 5px;}

.wrap {
  position: relative;
}
h2{
  font-size: 4rem !important;
  font-weight: 900;
    /* color: white; */
    color: #26272b;
    text-align: center;
    /* font-size: 100px; */
    letter-spacing: 2px;
    font-family: 'Raleway';

}
.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide1 {
    background-image: url("https://scontent.fdel1-1.fna.fbcdn.net/v/t1.0-9/80574071_2581639125389504_4786173819356184576_o.jpg?_nc_cat=109&_nc_sid=6e5ad9&_nc_ohc=HSRYV9hbCWcAX8wg7Ig&_nc_ht=scontent.fdel1-1.fna&oh=a05fd092c7dafbfe019a936ee82e6fac&oe=5EF90692");
  width: 100%;
    height: 100vh;
    background-position: center top;
	background-size:cover;
}
.slide2 {
    background-image: url("https://scontent.fixc1-3.fna.fbcdn.net/v/t1.0-9/79127094_2557528814467202_1090835304211808256_o.jpg?_nc_cat=100&_nc_sid=8bfeb9&_nc_ohc=KyaO8U_oxO8AX-m2XQ2&_nc_ht=scontent.fixc1-3.fna&oh=24cd9c02a7edc9cbfc04fd3254b7809f&oe=5F073D33");
  width: 100%;
    height: 100vh;
    background-position: center top;
	background-size:cover;
}
.slide3 {
  background-image: url("https://scontent.fixc1-3.fna.fbcdn.net/v/t1.0-9/83856922_2609678662585550_6256673967562555392_o.jpg?_nc_cat=104&_nc_sid=8bfeb9&_nc_ohc=34y5-DxlVWUAX-Xantt&_nc_ht=scontent.fixc1-3.fna&oh=4121e1583eacd5ba438dfe21c87b1593&oe=5F067065");
  width: 100%;
    height: 100vh;
    background-position: center top;
	background-size:cover;
}
.slide4 {
  background-image: url("https://scontent.fixc1-3.fna.fbcdn.net/v/t1.0-0/p180x540/79929253_2566538656899551_5358123533148880896_o.jpg?_nc_cat=100&_nc_sid=8bfeb9&_nc_ohc=dnfdgh-V5lsAX_bgwwq&_nc_ht=scontent.fixc1-3.fna&_nc_tp=6&oh=82b0aa8ab7edc333d051d0596c768dff&oe=5F05E971");
  width: 100%;
    height: 100vh;
    background-position: center top;
	background-size:cover;
}
.slide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.slide-content span {
  font-size: 5rem;
  color: #fff;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -35px;
  width: 0;
  height: 0;
  border-style: solid;
}

#arrow-left {
  border-width: 15px 20px 15px 0;
  opacity: 0.5;
  border-color: transparent #fff transparent transparent;
  left: 0;
  margin-left: 30px;
}

#arrow-right {
  border-width: 15px 0 15px 20px;
  opacity: 0.5;
  border-color: transparent transparent transparent #fff;
  right: 0;
  margin-right: 30px;
}


span{
  font-weight: 800;
}
.abt{
  text-align: center;
  /* line-height: 200% !important; */
  /* text-align: center; */
  
  /* margin-top: 5%; */
  letter-spacing: 0.2rem;
  padding:4% 6%;
  padding-bottom: 5%;
  background:linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45),
      rgba(255, 102, 0, 0.45)
    ), url(https://images.pexels.com/photos/268976/pexels-photo-268976.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  
  margin-left: 10%;
  width: 80%;
  height: 100%;
  color: white !important;
  background-color: #26272b;

}
.abt h2{
  line-height: 7rem;
}
.abt h3{
  /* font-family: 'Nanum Gothic', sans-serif; */
/* font-family: 'WindSong', cursive; */
font-family: 'Dancing Script', cursive;
  font-size: 30px;
  line-height: 4rem !important;
}
.abt h4{
  color: white;
  font-size: 35px;
  line-height: 5rem;
}
section p{
  font-size: 20px;
}
section h2{
  
  font-size: 30px;
}
#nav {
  position: fixed;
  top: 0;
    width: 100%;
    /* height: 100px; */
    
    transition: top 0.6s;
    line-height: 65px;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    /* background-color: red */
}

#nav div.logo h1 {
    float: left;
    font-size: 40px;
    color: white;
    font-family: 'Great Vibes', cursive;
    padding-left: 3rem;
}

#nav div.logo a {
    text-decoration: none;
    color: #fff;
    font-family: 'Great Vibes', cursive;
    font-size: 2.5rem;
}

#nav div.logo a:hover {
    color: #00E676;
}

#nav div.main_list {
    font-family: 'Courier New', Courier, monospace;
    height: 65px;
    float: right;
}

#nav div.main_list ul {
    width: 100%;
    height: 65px;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav div.main_list ul li {
    width: auto;
    height: 65px;
    padding: 0;
    padding-right: 3rem;
}

#nav div.main_list ul li a {
  text-transform: uppercase;
  letter-spacing: 3px;
 font-family:  'Arial Narrow Bold', sans-serif;
        text-decoration: none;
    color: #fff;
    line-height: 65px;
    font-size: 2.4rem;
}
#nav div.main_list ul li :hover {
  border-bottom:2px solid yellow;
  transition: ease-in 0.1s;
}


/* Home section */

.home {
    width: 100%;
    height: 100vh;
    background:linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45),
      rgba(255, 102, 0, 0.45)
    ), url(https://images.pexels.com/photos/220182/pexels-photo-220182.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-position: center top;
	background-size:cover;
}

#navTrigger {
    display: none;
}

/* #nav {
    padding-top: 20px;
    padding-bottom: 20px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
} */


/* Media qurey section */

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .container {
        margin: 0;
    }
}

@media screen and (max-width:768px) {
    #navTrigger {
        display: block;
    }
    #nav div.logo {
        margin-left: 15px;
    }
    #nav div.main_list {
        width: 100%;
        height: 0;
        overflow: hidden;
    }
    #nav div.show_list {
        height: auto;
        display: none;
    }
    #nav div.main_list ul {
        flex-direction: column;
        width: 100%;
        height: 100vh;
        right: 0;
        left: 0;
        bottom: 0;
        /* background-color: #111; */
        /*same background color of navbar*/
        background-position: center top;
    }
    #nav div.main_list ul li {
        width: 100%;
        text-align: right;
    }
    #nav div.main_list ul li a {
        text-align: center;
        width: 100%;
        font-size: 3rem;
        padding: 20px;
    }
    #nav div.media_button {
        display: block;
    }
}


/* Animation */
/* Inspiration taken from Dicson https://codemyui.com/simple-hamburger-menu-x-mark-animation/ */

#navTrigger {
    cursor: pointer;
    width: 30px;
    height: 25px;
    margin: auto;
    position: absolute;
    right: 30px;
    top: 0;
    bottom: 0;
}

#navTrigger i {
    background-color: #fff;
    border-radius: 2px;
    content: '';
    display: block;
    width: 100%;
    height: 4px;
}

#navTrigger i:nth-child(1) {
    -webkit-animation: outT 0.8s backwards;
    animation: outT 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

#navTrigger i:nth-child(2) {
    margin: 5px 0;
    -webkit-animation: outM 0.8s backwards;
    animation: outM 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

#navTrigger i:nth-child(3) {
    -webkit-animation: outBtm 0.8s backwards;
    animation: outBtm 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

#navTrigger.active i:nth-child(1) {
    -webkit-animation: inT 0.8s forwards;
    animation: inT 0.8s forwards;
}

#navTrigger.active i:nth-child(2) {
    -webkit-animation: inM 0.8s forwards;
    animation: inM 0.8s forwards;
}

#navTrigger.active i:nth-child(3) {
    -webkit-animation: inBtm 0.8s forwards;
    animation: inBtm 0.8s forwards;
}

@-webkit-keyframes inM {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes inM {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes outM {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes outM {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes inT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(9px) rotate(135deg);
    }
}

@keyframes inT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(9px) rotate(0deg);
    }
    100% {
        transform: translateY(9px) rotate(135deg);
    }
}

@-webkit-keyframes outT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(9px) rotate(135deg);
    }
}

@keyframes outT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(9px) rotate(0deg);
    }
    100% {
        transform: translateY(9px) rotate(135deg);
    }
}

@-webkit-keyframes inBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
    }
}
.contact{
  text-align: center;
}
.contact h2{
  color: white !important;
}
@keyframes inBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) rotate(0deg);
    }
    100% {
        transform: translateY(-9px) rotate(135deg);
    }
}

@-webkit-keyframes outBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
    }
}

@keyframes outBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) rotate(0deg);
    }
    100% {
        transform: translateY(-9px) rotate(135deg);
    }
}

.affix {
    padding: 0;
    /* background-color: #111; */
}






.myH2 {
	text-align:center;
	font-size: 4rem;
}
.myP {
	text-align: justify;
	padding-left:15%;
	padding-right:15%;
	font-size: 20px;
}
@media all and (max-width:700px){
	.myP {
		padding:2%;
	}
}
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    /* background-color: black; Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px; /* Some padding */
    border-radius: 3px; /* Rounded corners */
    font-size: 10px; /* Increase font size */
  }
  
  #myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
  }
  
  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      flex: 50%;
      max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      flex: 100%;
      max-width: 100%;
    }
  }
  .gallery{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    grid-column-gap: 10rem;
    grid-row-gap: 2rem;
    
  }

  .gallery img{
        cursor: pointer;
        height: 25rem;
        width: 25rem;
        object-fit: cover;
        border-radius: 3.5px;
        box-shadow: 0px 0px 15px #fff;
  }

 .gallery{
     margin-left: 2.5%;
     margin-right: 8%;
 }


  .btn {
    box-sizing: border-box;
    appearance: none;
    background-color: transparent;
    border: 2px solid red;
    border-radius: 0.6em;
    color: red;
    cursor: pointer;
    display: flex;
    align-self: center;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    margin: 20px;
    padding: 1.2em 2.8em;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
  
   
  }

  .btn :hover{
    
      color: #fff;
      outline: 0;
    
  }
  .btn :focus{
    
    color: #fff;
    outline: 0;
  
}



  .site-footer
{
  background-color:#26272b;
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:white;
}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links
{
  padding-left:0;
  list-style:none
}
.footer-links li
{
  display:block
}
.footer-links a
{
  color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links.inline li
{
  display:inline-block
}
.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0
}
@media (max-width:991px)
{ .gallery{
  margin-left: 20%;
  /* margin-right: 0px; */
}
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center
  }
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.twitter:hover
{
  background-color:#00aced
}
.social-icons a.linkedin:hover
{
  background-color:#007bb6
}
.social-icons a.dribbble:hover
{
  background-color:#ea4c89
}
@media (max-width:767px)
{
  .social-icons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}