body { background: linear-gradient(to right, rgba(200,0,120,1) 0%, rgba(100,0,200,1) 100%);}
body, h1,h2,h3,h4,h5,h6 {font-family: "cardo";}

a {
	color: #000;
	  display: inline-block;
	  position: relative;
	  text-decoration: none;
	  transition: all 0.3s ease-in-out;
  }
	 a:before {
	    background-color: #000;
	    content: '';
	    height: 1px;
	    position: absolute;
	    bottom: -1px;
	    left: 50%;
	    transform: translateX(-50%);
	    transition: all 0.3s ease-in-out;
	    width: 100%;
	  }
	  a:hover:before{width:0;}
	  a:hover { color: #fff;}

.script {font-family: "dancing script";}
#hero { color: #fff; }
#hero h1 , #hero h2 {color: #fff; text-shadow: 0 0 20px #000;}
#hero h1 { font-size: 8rem; line-height: .7em; padding-top: .2em;}

section#video { margin-top: -150px;}
@media (max-width: 480px) { 
    section#video { margin-top: -4em;}
	#hero { padding-bottom: 5em;}
}

.align-center { justify-content: center; }

.parallax { 
    /* The image used */
    background-image: url("../img/landing-hero.jpg?good=2");

    /* Set a specific height */
    height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

.huge { display: block;  font-size:8rem; color: rgba(0,0,0,.6); text-align: center; margin: auto;}

.pic { object-fit: cover; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; }
.pic-holder { width: 100%; padding-bottom: 100%; background: gold; /** <-- For the demo **/ position: relative; display:block;}
  


header,footer,.top-bar {background: linear-gradient(to right, rgba(0,102,255,1) 0%, rgba(39,230,160,1) 100%); color: #fff;}
header A, footer A { color: #ff0;}
header A:before, footer A:before { background-color: #ff0;}
footer { padding: 2em;}

span#title { padding: 0 1em; font-weight: bold;}

#body-photos { margin: 2em 0;}
.offcanvas-full-screen {
  position: fixed;
  z-index: 1;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: #0a0a0a;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
  overflow-y: auto;
}

[data-whatinput='mouse'] .offcanvas-full-screen {
  outline: 0;
}

.offcanvas-full-screen.is-transition-overlap {
  z-index: 10;
}

.offcanvas-full-screen.is-transition-overlap.is-open {
  box-shadow: 0 0 10px rgba(10, 10, 10, 0.7);
}

.offcanvas-full-screen.is-open {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}

.offcanvas-full-screen.is-open ~ .off-canvas-content {
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}

.offcanvas-full-screen.is-transition-push::after {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 1px;
  box-shadow: 0 0 10px rgba(10, 10, 10, 0.7);
  content: " ";
}

.offcanvas-full-screen.is-transition-overlap.is-open ~ .off-canvas-content {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

.offcanvas-full-screen-inner {
  padding: 1rem;
  text-align: center;
}

.offcanvas-full-screen-menu {
  margin: 0;
  list-style-type: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.offcanvas-full-screen-menu > li {
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

[data-whatinput='mouse'] .offcanvas-full-screen-menu > li {
  outline: 0;
}

.offcanvas-full-screen-menu > li > a {
  display: block;
  padding: 0.7rem 1rem;
  line-height: 1;
}

.offcanvas-full-screen-menu input,
.offcanvas-full-screen-menu select,
.offcanvas-full-screen-menu a,
.offcanvas-full-screen-menu button {
  margin-bottom: 0;
}

.offcanvas-full-screen-menu > li {
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%;
}

.offcanvas-full-screen-menu > li > a {
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.offcanvas-full-screen-menu a {
  color: #fefefe;
}

.offcanvas-full-screen-menu a:hover {
  color: #b2b2b2;
}

.offcanvas-full-screen-close {
  color: #fefefe;
  font-size: 5rem;
}

.offcanvas-full-screen-close:hover {
  color: #b2b2b2;
}