@charset 'UTF-8';

html,
html * {
  
  margin: 0;
  padding: 0;
}

body {
  font-family: arial, sans-serif;
  font-size: 1vw;
  background-image: url(../images/wedding-background.png);
}
.weddingh1 {
	color: goldenrod;
	padding-top: 0.9em;
	letter-spacing: .4em;
	text-shadow: -2px 3px 3px rgba(90, 0, 0, .6);
}
.weddingh2 {
	line-height: 1.6em
}
.intro-text2 h3 {
	line-height: 1.60em;
	padding-top: 0.5em;
	display: block;
	width: 100%;
	font-size: 1.65em
}
.intro-text3 h3 {
	line-height: 1.6em;
	display: block;
	margin: auto;
}
.intro-text4 {
	display: block;
	margin: auto;
	text-align: center;
}
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
	display: block;
	margin: auto;
	max-width: 100;
}
a, a:visited {
    color: inherit;
}
header {
  position: fixed;
  padding-top: 0.4em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  padding-bottom: 0.4em;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
	background:rgba(0,0,0,0.4)
}
.site-logo {
  position: relative;
  float: left;
}
.site-logo img {
  width: 25em;
}
.logo {
  opacity: 1;
}
.site-nav {
  position: relative;
  float: right;
  z-index: 400;
  top: 0;
  left: 0;
  display: block !important;
  width: 60%;
  padding: .75em 1em 0 0;
  opacity: .99;
  background: none;
}
.site-nav ul {
  list-style-type: none;
  margin: 0;
  text-align: right;
	
}
	
	
.site-nav ul li {
  display: inline-block;
  margin-bottom: 0;
  margin-left: 1.5em;
}
.site-nav ul li a {
  font-size: .85em;
  padding-bottom: .5em;
  text-decoration: none;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fff;
  -webkit-transition: color .3s;
  transition: color .3s;
}

.site-nav ul li a:hover {
  outline: none;
  border-bottom: 1px solid white;
	
}
.hero {
  position: relative;
  height: 56vw;
	z-index: 100;
	background-image: url(../images/FILM-animated2);
	background-size: contain;
 
}
.hero-content {
  font-family: 'pacifica_condensedregular';
  color: gray;
  position: absolute;
  z-index: 20000;
  padding-top: 4.2em;
  top: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}
h2 {
	font-weight: 100;
	font-size: 3em;
    line-height: 2.2;
	margin-bottom: -.35em;
	letter-spacing: .3em;
	text-transform: uppercase;
	text-shadow: 0px 0px 8px rgba(0, 0, 0,.2);
	text-align: center;
}
h1 {
  margin-bottom: 1.5%;
  text-transform: uppercase;
  text-shadow: 0px 0px 10px rgba(0, 0, 0,.05);
  letter-spacing: .85em;
  margin-left: .7em;
  font-size: 8.5vw;
	font-family: 'pacifica_condensedregular';
}
h3 {
  font-size: 1.5em;
  font-weight: 100;
  line-height: 2.75;
  
  letter-spacing: .35em;
  text-transform: uppercase;
  text-shadow: 0px 0px 8px rgba(0, 0, 0,.2);
}
.intro {
  position: relative;
  color: grey;

  padding: 2em 2em 2em;
  width: 95%;	
}
.intro-text {
  position: relative;
}
.intro p {
  font-family: 'acumin-pro-extra-condensed', sans-serif;
  font-size: 3.5vw;
  line-height: 1.5;
  position: relative;
  z-index: 200;
  text-align: center;
  letter-spacing: .125em;
}

@media (min-width: 768px){
  .intro p {
  font-family: 'acumin-pro-extra-condensed', sans-serif;
  font-size: 2.3vw;
  line-height: 1.5;
  position: relative;
  z-index: 200;
  text-align: center;
  letter-spacing: .225em;
}
  .intro {
  position: relative;
  color: grey;

  padding: 5.5em 6em 5.5em;
}
	
}

.whoweare {
   font-family: 'Pacifica Condensed Regular'
  font-size: 1.9vw;
  line-height: 1.5;
  position: relative;
  z-index: 200;
  text-align: center;
  letter-spacing: .205em;
}
}
.artworks {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.artwork {
  display: flex;
}
.artwork .artwork-piece {
  padding: 0.25em 1em 2em;

  background-image:-moz-linear-gradient( 135deg, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
  background-image: -webkit-linear-gradient( 135deg, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
  background-image: -ms-linear-gradient( 135deg, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
  width: 100%;
	text-align: center;
}
.artwork .artwork-description {
  background: #26223e;
  color: #fff;
  width: 100%;
  padding: 0.25em 1em 2em;
	text-align: center;
}


@media(max-width:768px){
.artwork .artwork-piece {
  padding: 0.25em 1em 2em;

  background-image:-moz-linear-gradient( 135deg, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
  background-image: -webkit-linear-gradient( 135deg, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
  background-image: -ms-linear-gradient( 135deg, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
  width: 100%;
	text-align: center;
}
.artwork .artwork-description {
  background: #26223e;
  color: #fff;
  width: 100%;
  padding: 0.25em 1em 2em;
	text-align: center;
}	
}



.artwork-piece figure {
  position: relative;
}
.artwork-piece figure img {
  position: relative;
  z-index: 100;
}
.artwork-title {
  font-family: 'acumin-pro-extra-condensed', sans-serif;
  font-size: 2em;
  font-weight: 100;
  padding: 2em 0 0 0;
  letter-spacing: .36em;
  text-transform: uppercase;
  line-height: 1.5;
  margin-bottom: .5em;
}
.artwork-text2 {
  font-size: 1.1em;
  line-height: 1.9;
  opacity: .8;
  text-align: center;
}
.artwork-title2 {
  font-family: 'acumin-pro-extra-condensed', sans-serif;
  font-size: 2em;
  font-weight: 105;
  padding: 2em 0 0 0;
  letter-spacing: .36em;
  text-transform: uppercase;
  line-height: 1.5;
  margin-bottom: .5em;
}
.artwork-text {
  font-size: 1.1em;
  line-height: 1.9;
  opacity: .8;
}
.see-more {
  font-size: 1em;
  display: inline-block;
  margin-top: 2.1em;
  padding: 0 0 .4em 0;
  transition: all .3s;
  text-decoration: none;
}
.see-more:hover {
  border-bottom: 1px solid white;
}
.img-polaroid {
  padding: 4px;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
footer {
  margin-top: 0em;
  
}
.footer-content {
  width: 100%;
  margin: 0 auto;
	padding-bottom:1.7em;
}
.footer-social {
  display: block;
  width: 100%;
  list-style-type: none;
  text-align: center;
	
}
.footer-social li {
  display: inline-block;
  margin: 0 1.2em;
}
.footer-social li a {
  line-height: 3.5em;
  display: inline-block;
  width: 4em;
  height: 4em;
  text-align: center;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 50%;
}
.footer-social li a:hover {
  border-color: green;
  background: #fff;
}
.footer-social li a img {
  width: auto;
  height: 1em;
}
.footer-social li a .social-hover {
  display: none;
}
.footer-social li a:hover .social-default {
  display: none;
}
.footer-social li a:hover .social-hover {
  display: inline;
}
.footer-info {
  padding-top: .5em;
	float: left;
}
.footer-info p {
  font-size: .8em;
  color:black;
  line-height: 1.55;
  max-width: 36em;
  margin-bottom: 1.7em;
}
.footer-disclaimer {
  width: 60%;
	float: left;
  position: relative;
}
.footer-credit {
  float: right;
  width: 40%;
  text-align: right;
  position: relative;
}
.footer-legal {
  opacity: .8;
	float: left;
}
.footer-credit a:hover {
  text-decoration: none;
}

td {
	padding: 3em 2em 0em 2em;
	color: goldenrod;
}


/* Add a black background color to the top navigation */
.topnav {
    
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 14px;
}
.topnav2 a {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 14px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}
.topnav2 a:hover {
    background-color: #ddd;
    color: black;
}

/* Add an active class to highlight the current page 
.active {
    background-color: #ec1c24;
    color: white;
}  */

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}
.topnav2 .icon {
    display: none;
}

/* When the screen is less than 800 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 800px) {
  .topnav a{display: none;}
  .topnav a.icon {display: none;}
  .topnav2 a{display: none;}
  .topnav2 a.icon {
    float: right;
    display: block;
  }
	
.site-logo {
  position: relative;
  float: left;
}
.site-logo img {
  width: 15em;
	padding-top: 0.6em;
}
.wedding_hero {
	padding-top: 4.2em;
	}
	header {
		background-color: #292929;
	}
	.intro-text h2 {
	font-size: 4em;
	width: 100%;
	line-height: 1.3em;
	}
	.intro-text2 h3 {
	line-height: 1.30em;
	padding-top: 0.1em;
	padding-bottom: 1.9em;
	display: block;
	width: 95%;
	font-size: 1.5em;
	}
	.intro-text3 h3 {
	line-height: 1.3em;
	display: block;
	margin: auto;
	font-size: 4em;
	width: 100%;
	}
	.packages {
	max-width: 80%;
	}
}

@media screen and (min-width: 800px) {
  .topnav a{display: none;}
  .topnav a.icon {display: none;}
  
  
	


}



/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}