@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Montserrat:ital,wght@0,300;0,400;0,700;1,300&family=Open+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');
	
:root {
	--accent-bg-color: 128, 0, 0;
    --cover-bg-color: 128, 0, 0;
    --main-bg-color: 255, 255, 255;
    --dark-color: 0, 0, 0;
    --light-color: 255, 255, 255;
}
	
* {
	box-sizing: border-box;
	font-size: 16px;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}
html {
	font-family: sans-serif;
	scroll-snap-type: mandatory;
	scroll-snap-points-y: repeat(100vh);
	scroll-snap-type: y mandatory;
	font: 400 1.0rem/1.3rem "Playfair Display", serif;
	scroll-behavior: smooth;
}
section {
	border-bottom: 1px solid white;
	height: 100vh;
	scroll-snap-align: start;
	text-align: center;
	position: relative;
	background: #000;
}
section:nth-child(3) {
	border-bottom: 0px solid white;
}
h2 {
	font-size: 1.8rem;
	line-height: 2.2rem;
	margin-bottom: 20px;
	text-transform: capitalize;
	font-weight: 100
}
h2.form-title {
	margin-bottom: 0;
}
h3 {
	margin: 10% 0 0;
	font-size: 1.3rem;
	line-height: 1.8rem;
	text-tranform: uppercase;
	font-weight: 100
}
.item-four p {
	font: 300 1.0rem/1.4rem "Montserrat", sans-serif;
}

/*All Items*/
.item {
	text-align: left;
	position: relative;
	width: calc(100%/3);
	float: left;
	background-color: maroon;
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 1px solid white;
	height: 100vh;
	scroll-snap-align: start;
	background-position: center;
	scroll-padding-top: 0
}
.full {
width: calc(100%/1);	

}
.item-one {
	background-image: url("../images/ncm-3.jpg");
}
.item-one p {
	position: absolute;
	bottom: 10%;
	width: 100%;
	margin: 0 auto;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.3rem;
	line-height: 1.8rem;
	text-align: center
}
.item-two {
	background-image: url("../images/ncm-2.jpg");
}
.item-three {
	background-image: url("../images/ncm-1.jpg");
}
.item-four {
	background-color: maroon;
	text-align: center;
	color: #fff
}
.item-five {
	background-image: url("../images/ncm-5.jpg");
}
.item-six {
	background-image: url("../images/ncm-6.jpg");
}
.overlay-light {
	background: rgba(255, 255, 255, 1);
	height: 100%;
	position: relative;
	
}
.main {
	margin: 0 auto;
	padding: 5%
}
.content, .inner {
	width:100%;
	text-align: center;
	margin: 0 auto;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.inner {
	padding:0 5%;
}
.quote {
	font: 400 1.8rem/2rem "Playfair Display", serif;
	padding: 0 7% 10px;
	color: #333;
	text-align: center;
	position: absolute;
	top: 20%;
	width: 100%;
	margin: 0 auto
}
.quote:before {
	content: "\275D";
	padding-right: 5px;
	color: maroon;
}
.quote:after {
	content: "\275E";
	padding-left: 5px;
	color: maroon;
}
.signature {
	font-style: italic;
	font-size: 1.2rem
}
/*sidebar*/
.sidebar {
  position: fixed;
  text-align: left;
  top: 20px;
  width: 200px;
  left: -300px;
  background-color: rgba(var(--dark-color), 1);
  transition: all .5s ease;
  z-index: 99999
}
.sidebar header {
  background: rgba(var(--dark-color), 1);
  height: 57px
}
.sidebar a {
  display: block;
  padding: 15px;
  width: 100%;
  color: rgba(var(--light-color), 1);
  border-left: 5px solid transparent;
  transition: all .5s ease;
  text-decoration: none
}
.sidebar ul li a:hover {
  border-left: 5px solid rgba(var(--accent-bg-color), 1);
  color: rgba(var(--accent-bg-color), 1);
  background: rgba(var(--main-bg-color), 1)
}
#check {
  display: none
}
label #open, label #cancel {
  position: fixed;
  top: 20px;
  left: 0;
  cursor: pointer;
  margin: 0;
  background-color: rgba(var(--dark-color), 1);
  height: 56px;
  width: 56px;
  text-align: center;
  line-height: 25px;
  transition: all .5s ease;
  z-index: 9999999;
  padding: 18px 0
}
label #cancel {
  opacity: 0;
  visibility: hidden
}
#check:checked ~ .sidebar {
  left: 0;
  -webkit-transition: left 1s;
}
#check:checked ~ label #open {
  opacity: 0;
  visibility: hidden
}
#check:checked ~ label #cancel {
  opacity: 1;
  visibility: visible
}	
.mobile {
		display:none;
	}	
	.desktop {
		display:block;
	}	
.resizeimages {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}
a {
	color:white;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}

@media only screen and (max-width: 768px) /* 640 40em*/ {
.main {
	border-bottom: 1px solid white;
	height: 100vh;
	scroll-snap-align: start;
	text-align: center;
	position: relative;
}
	
.item, .main {
	width: calc(100%/1);
	clear: both;
}
	.mobile {
		display:block;
	}	
	.desktop {
		display:none;
	}
.item-one p {
	font-size: 1.2rem;
	line-height: 1.7rem;
}
#sidebar-box {
	display:none;
	}
}