/** {outline: red 1px solid;}
*/


/*! Type styles - mobile to 768px */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}



body {

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
	font-style: normal;
	font-size: 18px;
	line-height: 24px;
	font-style: normal;
}

h1	{
	font-size: 80px;
	line-height: 78px;
	letter-spacing: -1px;
	padding: 64px 0px;
	max-width: 960px;
}

span.cursor {
  border-right: .05em solid;
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% {
    border-color: transparent;
  }
}


#tour-reviews h1  {
	font-size: 70px;
	line-height: 70px;
	padding: 64px  0px 0px;
	border-top: 1px	solid #f3efeb;
	max-width:5000px;
}

h2 {
	max-width: 960px;
	font-size: 40px;
	line-height: 50px;
	margin-bottom: 80px;
	margin-left: auto;
	margin-right: auto;
}

#whoisit ul {
	padding-bottom: 64px;
	font-size: 18px;
	line-height: 24px;
	font-weight: bold;
	text-transform: uppercase;
}

#whoisit img{
	width: 100%;
} 



#set-tours p, #set-tours ul {
	font-size: 18px;
	line-height: 32px;
}

p, ul, h3{
	font-size: 22px;
	line-height: 30px;
	margin-bottom: 40px;

}


.centre {
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
}

.left-image {
	text-align: left;
}

.footnote, .terms {
	font-size: 13px;
	line-height: 16px;
	margin-bottom: 0px;
}
#whoisit .footnote {
	opacity: 0.5;
}




.italic, #reviews  p, #tour-reviews p {
	font-style: italic;
}
.underline {
	text-decoration: underline;
}
.bold {
	font-weight: bold;
}

.grey-text {
	color: lightgrey;
}


#contact h1 {
	font-weight: normal;
	margin-bottom: 96px;
}
#contact p.terms {
max-width: 100%;
}

#reviews h3 {
margin-bottom: 80px;
}

.wrapper {
	padding: 0px 10px 96px 10px;
}

#contact {
	padding-bottom: 10px;
}


button {
	background-color:#00ffff;
	border-radius:42px;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:17px;
	font-weight:bold;
	padding:16px 12px;
	text-transform: uppercase;
	border:0px solid #00ffff;
	float: right;
	z-index: 100000;
	position: fixed; /* Set the navbar to fixed position */
	top: 10px;
	right:10px;
}

button:hover {
	background-color:#00ebeb;
	font-style: italic;	
}


#nav {
  overflow: hidden;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
	  z-index: 1000;
}


#nav a {
  float: left;
  display: inline;
  text-align: center;
  padding: 10px 30px 10px 0px;
}


#set-tours {
	background-color: #f3efeb;
}

#confidence {
	background-image: url("img/clouds.jpg");
	padding: 96px 10px;
}
#confidence h2 {
	margin-bottom: 32px;
	max-width: 3000px;
}
#confidence h3 {
	margin-bottom: 8px;
	max-width: 3000px;
}

.smol {
	font-size: 16px;
	line-height: 20px;
}
.grid-container {
	display: grid;
	grid-template-columns: [col1] 20% [col2] 20% [col3] 20% [col4] 20%;
	grid-gap: 5%;
}


img.meanie {
	margin-left: auto;
	margin-right: auto;	
	max-width: 485px;
	position: relative;
	top: -180px;
	z-index: -200;
	margin-bottom: -84px;
}


.slider {
  width: 100%;
  max-width: 620px;
  height: 500px;
  position: relative;
  overflow: hidden; 
  margin: 64px auto;
}

.slide {
  width: 100%;
  max-width: 620px;
  height: 500px;
  position: absolute;
  transition: all 0.5s;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn {
  position: absolute;
  width: 40px;
  height: 40px;
  padding: 10px;
  border: none;
  border-radius: 50%;
  z-index: 10px;
  cursor: pointer;
  background-color: #fff;
  font-size: 18px;
}
.btn:active {
  transform: scale(1.1);
}
.btn-prev {
  top: 45%;
  left: 2%;
}

.btn-next {
  top: 45%;
  right: 2%;
}




@media   (max-width: 768px) {
#contact h1	{
	font-size: 50px;
	line-height: 56px;
	letter-spacing: -1px;
	padding: 64px 0px;
}

}



@media   (max-width: 600px) {

h1, #tour-reviews h1	{
	font-size: 40px;
	line-height: 44px;
	letter-spacing: -1px;
	padding: 64px 0px;
}

#tour-reviews h1  {

	padding: 64px  0px 0px;
	border-top: 1px	solid #f3efeb;
	max-width:5000px;
}

#contact h1	{
	font-size: 30px;
	line-height: 36px;
	letter-spacing: -1px;
	padding: 64px 0px;
}

h2 {
	max-width: 960px;
	font-size: 28px;
	line-height: 32px;
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
}

#nav a.hide-mob {
	display: none;
}

#nav a {
  float: left;
  display: inline;
  text-align: center;
  font-size: 16px;
  padding: 10px 16px 10px 0px;
}

#nav button {
	background-color:#00ffff;
	border-radius:42px;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	padding:8px 6px;
	text-transform: uppercase;
	border:0px solid #00ffff;
	float: right;
	margin: 10px 20px;
}

 p, ul, h3 {
	font-size: 18px;
	line-height: 24px;

}

img.meanie {
	max-width: 300px;
	position: relative;
	top: -130px;
	z-index: -200;
	margin-bottom: -84px;
}

.slider {
  width: 100%;
  max-width: 620px;
  position: relative;
  overflow: hidden; 
  margin: 64px auto 0px;
}

.slide {
  width: 100%;
  max-width: 620px;
  position: absolute;
  transition: all 0.5s;
}

.wrapper {
	padding: 0px 10px 32px 10px;
}

#set-tours li {
	font-size: 16px;
	margin-bottom: 16px;
	line-height: 22px;	
}

.grid-container {
	display: block;
}

.image-hold {
	width: 100%;
	aspect-ratio: 2 / 1;
}

}

#big-bob {
display: block;
position: fixed;
top: 0;
left: 0;
width:100%;
height: auto;
}

.bob-hide {
visibility: hidden;
}

.bob-show {
visibility: visible !important;
}







.fadelong {


    -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 5s; /* Firefox < 16 */
        -ms-animation: fadein 5s; /* Internet Explorer */
         -o-animation: fadein 5s; /* Opera < 12.1 */
            animation: fadein 5s;
}

@keyframes fadein {
0%		{ opacity: 0; }
20% 	{ opacity: 0; }
100%	{ opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
0%		{ opacity: 0; }
20% 	{ opacity: 0; }
100%	{ opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
0%		{ opacity: 0; }
20% 	{ opacity: 0; }
100%	{ opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
0%		{ opacity: 0; }
20% 	{ opacity: 0; }
100%	{ opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
0%		{ opacity: 0; }
20% 	{ opacity: 0; }
100%	{ opacity: 1; }
}


/** rotateComplexOut*/

 @keyframes rotateComplexOut {
   1% {
     opacity: 90%;
     transform: translate3d(0,0,0) rotate(0deg);
   }
   10% {
     transform: translate3d(200px, 140px, 0) rotate(1080deg);
   }
   20% {
     transform: translate3d(-2000px, 600px, 0) rotate(-160deg) scale(5);
   }
   30% {
     transform: translate3d(-200px, -140px, 0) rotate(340deg);
   }
   40% {
     transform: translate3d(-200px, 140px, 0) rotate(-720deg);
   }
   50% {
     transform: translate3d(200px, 140px, 0) rotate(120deg) scale(1.2);
   }
   60% {
     transform: translate3d(0px, 0px, 100px) rotate(1080deg) scale(1.5);
   }
   65% {
     transform: translate3d(0px, 0px, 200px) rotate(-1080deg) scale(2.0);
   }
   90% {
     transform: translate3d(0px, 0px, 600px) rotate(6080deg) scale(10.0);
   }
   99% {
     transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(.01);
     opacity: 100%
   }
   100% {
     display: none  !important;
     transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(0) !important;
     opacity: 0% !important;
   }

 }

  .rotateComplexOut {
    animation-timing-function: linear;
    transform-origin: bottom center;
    animation-name: rotateComplexOut;
    animation-duration: 7s;

  }




/**
    * simpleEntrance
    * - enter in simply
    */
   @keyframes simpleEntrance {

     0% {
       opacity: 0%;
       transform: translate3d(-2000px,1500px,500px) scale(10);
     }

     1% {
       opacity: 100%
     }

     40% {
       transform: translate3d(2000px,0px,0) scale(5);
     }
     50% {
       transform: translate3d(-2000px,-100px,0) scale(3);
     }
     60% {
       transform: translate3d(2000px,100px,0) scale(2);
     }
     70% {
       transform: translate3d(-2000px,400px,0) scale(.1);
     }

     75% {
       transform: translate3d(0px,0px,0) scale(.1);
     }

     90% {
       transform:  rotate(360deg) translateX(150px) rotate(-360deg)
     }

   }

    .simpleEntrance {
      animation-timing-function: linear;
      transform-origin: center center;
      animation-name: simpleEntrance;
      animation-duration: 6.5s;
    }






@keyframes airport {

0%		{opacity: 0%; transform: translate3d(0px,0px,0px);}
95%		{opacity: 0%; transform: translate3d(40px,40px,0px);}
100%	{opacity: 100%; transform: translate3d(0px,0px,0px);}
   }

.airport	{
      animation-timing-function: linear;
      transform-origin: bottom center;
      animation-name: airport;
      animation-duration: 9s;
    }

@keyframes opener-mob {

0%		{opacity: 0%; transform: translate3d(0px,0px,0px);}
95%		{opacity: 0%; transform: translate3d(40px,40px,0px);}
100%	{opacity: 100%; transform: translate3d(0px,0px,0px);}
   }

.opener-mob	{
      animation-timing-function: linear;
      transform-origin: bottom center;
      animation-name: opener-mob;
      animation-duration: 8s;
    }


/*Margins and padding
.wrapper { padding: 0 16px;}
.stand-first, .schedule, .terms { margin-bottom: 100px }
.goodbye { margin-bottom: 40px }
p,h2,a {margin: 0;}
a { transition: opacity 0.15s ease-out; transition: color 0.15s ease-out; text-decoration: none;}


.nav a{
	position: fixed;	
	top: 10px;
	font-family: acumin-pro-wide, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #332828;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 1px;
	z-index: 1000;
}

.nav a:hover{ opacity: 100%;}
.nav .nav-ceremony { left: 16px; }
.nav .nav-rsvp-mobile, .nav .nav-rsvp { font-weight: 700;}
.nav .nav-rsvp-mobile:hover, .nav .nav-rsvp:hover { color: #ED31B6;}
.nav .nav-reception {right: 16px;}	

		.nav .nav-rsvp	{display: inline; width: 100%; text-align: center; }
		.nav .nav-rsvp-mobile	{display: none;}


.full {
height: 92vh;
display: grid;
grid-template-rows: 1fr auto;
justify-content: center;
justify-items: center;
}

.nb {
width:90%;
/*max-width: 1700px;*/


/*.update {
color:red;
}

.stand-first, .schedule, .goodbye {
	font-family: freight-big-pro, Times, "Times New Roman", serif;
	font-weight: 300;

	font-size: 28px;
	line-height: 30px;
}

span.line-through {text-decoration:line-through;}
.stand-first span.bold {font-weight: 700;}
.stand-first a { color: #ED31B6; -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; font-feature-settings: "lnum";}
span.italic {font-style: italic;}



.schedule {padding:0 5%; line-height: 26px;	}
.schedule h2 { 
	font-family: acumin-pro-wide, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 3px;
	line-height: 14px;
	margin-bottom: 30px;
}

.schedule span.time {
	font-family: freight-micro-pro, Times, "Times New Roman", serif;
	font-weight: 400;
	font-size: 14px;
	-moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; font-feature-settings: "lnum";
	display: inline-block;
	margin-right: 20px;
	letter-spacing: 1px;
}

.divider {
	height: 1px;
	background-color: #332828;
	opacity: 15%;
	margin: 10px 0 15px;

}
.schedule span.smcp {-moz-font-feature-settings: "smcp"; -webkit-font-feature-settings: "smcp"; font-feature-settings: "smcp";}



.terms {margin-bottom: 20vh;}
.terms span.heading {
	font-family: acumin-pro-wide, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 17px;}

.terms a {color: #ED31B6; border-bottom:solid 1px rgba(237, 49, 182, 0.2); }
.terms a:hover{ color: #ED31B6; border-bottom:solid 1px rgba(237, 49, 182, 1);transition: all 0.25s ease-out; }

span.strikeout {
  font-size: 1em;
  position: relative;
}
.strikeout::after {
  border-bottom: 1px solid rgba(51, 40, 40, 0.7);
  content: "";
  left: 0;
  line-height: 1em;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 60%;
}

.last { display: inline-block; margin-top:10px;}


@media   (min-width: 375px) {

		body {font-size: 20px; line-height: 26px;}
		.nav a {font-size: 15px;}
		.stand-first, .schedule, .goodbye {font-size: 34px; line-height: 38px;}
		.schedule {line-height: 30px; padding:0 10%;}
		.schedule h2 {font-size: 14px;}
}

@media   (min-width: 768px) {
		.wrapper { padding: 0 8%;}
		.schedule, .terms, .goodbye {padding: 0 0 0 27% ;}
				.schedule {line-height: 32px;}

		.schedule h2 {font-size: 14px;}


.last { display: inline-block; margin-top:14px;}

}

@media   (min-width: 1024px) {

		.wrapper { padding: 0 10%;}
		.stand-first, .schedule, .goodbye  {font-size: 42px; line-height: 45px;}
		.schedule {line-height: 34px;}

		.nav a {font-size: 16px;}
		.schedule, .terms, .goodbye {padding: 0 5% 0 30% ;}
		.schedule h2 {font-size: 14px;}
		.schedule span.time {font-size: 16px;}
		.last { display: inline-block; margin-top:20px;}

}

@media  (min-width: 1300px) {
		body {font-size: 24px; line-height: 30px;}
		.stand-first, .schedule, .goodbye  {font-size: 50px; line-height: 55px; max-width: 1270px; margin: 100px auto;}
		.schedule {line-height: 40px;}
		.nav a {font-size: 16px;}
		.schedule, .terms, .goodbye {padding: 0 10% 0 40% ;}
		.schedule span.time {font-size: 18px; margin-right: 40px;}
		.terms span.heading {font-size: 21px;}

}