@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Abel|Give+You+Glory');


body {
/*	background:url(small.jpg) center top; 
    background-size: 100% 100vh;
	background-attachment:fixed;
	background-repeat: repeat-y; */
	margin: 0;
	padding: 0;
	color: #022447;	
	text-align: center;
	font-family: 'Abel', sans-serif;	
	font-size: 10pt;
	
}
.intro {
	font-size: 18pt;
	font-variant:small-caps;
	text-shadow: #fff 1px 1px ;
	font-weight: bold;	
}
#background {
	margin-left: 0;
	width: 100%;
	height:100%;
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: -1;
	background:url(images/back2.jpg) center top;
	-webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;
}
@media (min-width: 600px) {
#background {
	background:url(images/back.jpg) center top; 
	background-size: cover;
}
}

h1,h3,h4,h5,h6 {
	font-family: 'Give You Glory', cursive;
}

h1 {
	text-align:center;
	color: #022447;
	font-size: 38pt;
	font-weight: bold;
	line-height: 50px;
	text-shadow: #fff 2px 2px ;
}
@media (min-width: 600px) {
h1 {
	line-height: 60px;	
}
}

h2 {
	
	color: #FC2165;
	font-size: 18pt;
	text-align: center;
    white-space: nowrap;
	display: table;
    white-space: nowrap;
	box-sizing: border-box;
	width: 100%;
	margin: auto; 
	padding: 0 4%;}
h2:before, h2:after {
      content: '';
      border-top: 4px solid #FC2165;
	   display: table-cell;
      position: relative;
      top: 0.5em;
      width: 50%;
	  box-sizing:border-box;
	  
}
h2:before {
	  right: 2%;}
h2:after {
	  left: 2%;}
	  
h3 {
	font-family: Exo;
	font-size: 14pt;
	text-align: center;
    white-space: nowrap;
	display: table;
    white-space: nowrap;
	box-sizing: border-box;
	width: 100%;
	margin: auto; 
	padding: 0 4%;}
h3:before, h3:after {
      content: '';
      border-top: 4px solid #FC2165;
	   display: table-cell;
      position: relative;
      top: 0.5em;
      width: 50%;
	  box-sizing:border-box;
	  
}
h3:before {
	  right: 2%;}
h3:after {
	  left: 2%;}
	  
h4 {
	font-size: 16pt;
	text-decoration: underline;
	color: #FC2165;	
		padding: 0px;
	margin: 0px;
}


  /* NAVIGATION MENU BAR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#mainnav {
	position: absolute;
	left: 0;
	top: 68px;
	font-size: 14pt;
	margin: 0px;
	color: #FFF;
	box-sizing: border-box;
	padding: 0px;
	transition: 0.5s ease;
    -moz-transition:   0.5s ease;
    -ms-transition:     0.5s ease;
    -o-transition:      0.5s ease;
    -webkit-transition:  0.5s ease;
	z-index: 2;
}

#mainnav img {
	width: 48px;	
}

ul.navigation {
	list-style: none;
	margin: 0px;
	padding: 20px;
	text-align:center;
	position: relative;  
}

ul.navigation li a, ul.navigation li a:visited  {
    text-decoration: none;
}

ul.navigation li a:hover{
	color: #FF5D21;
	background-color: #FFFFFF;
}

@media (min-width: 600px) {
#mainnav {
	display: block !important;
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	text-align: center;
	font-size: 12pt;
}
#mainnav img {
	width: 64px;	
}
ul.navigation {
	padding: 0px; 
	margin-left: 50px; 
}
ul.navigation li {
	display: inline-block;
	padding: 0px 8px;
}
.logo {
	position: absolute;
	left: 2%;
	top: 5px;	
}
}


  /* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#title {
	padding: 100px 0 0px 0	
}

@media (min-width: 600px) {
#title {
	padding: 0 30% 0 0;	
}
}

  /* BOXES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hexagon {
  background:url(images/hexagon.png) no-repeat center top;
  background-size: 100% 100%;
  padding: 40px 20% 40px 20%;
  box-sizing:border-box;
  width: 98%;
  min-height: 200px;
  margin: 0px 1%;
}
.octagon {
  background:url(images/octagon.png) no-repeat center top;
  background-size: 100% 100%;
  padding: 50px 20% 50px 20%;
  box-sizing:border-box;
  width: 98%;
  margin: 0px 1%;
}
@media (min-width: 600px) {
.hexagon {
  padding: 40px 20% 40px 20%;
  background-size: 100% 100%;
  width: 98%;
  display: inline-block;
  margin: 0px auto 6px auto;
}
.float {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
max-width: 1000px;
margin: auto;
}
}

  /* RSVP
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.rsvp {
	background-color: #fff;
	padding: 6px;
	border-radius: 6px;
	width: 42%;
	margin: 0px 3% 8px 3%;
	text-align:center;
	box-sizing:border-box;
	float: left;	
}

.rsvp:hover {
	background-color: #FC2165;
	cursor: pointer;	
}

  /* INPUT BOXES AND BUTTONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], textarea, select {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	padding: 6px 10px;
	margin: 4px 0;
	border: 1px solid #D1D1D1;
 	border-radius: 6px;
 	box-shadow: none;
 	box-sizing: border-box;
	width: 100%;
}

button,
input[type="submit"],
input[type="button"] {
  padding: 4px;
  color: #FC2165;
  background-color: transparent;
  border-color: #FC2165;
  text-align: center;
  font-size: 12pt;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }
  
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover
{
  border-color: #FFF;
  background-color: #FC2165;
  color: #FFF;
  outline: 0; }
  
select {
	background: url(images/Down-arrow.png) no-repeat right center;
	background-color: #fff;
	padding-right: 26px;
	padding-left: 6px;
	width: 80px;
}

/** OTHER SHIT **/


.direction {
	margin-top: -44px;	
}