@font-face {
  font-family: 'Afterglow-Regular';
  src: url('font/Afterglow-Regular.eot'); /* IE9 Compat Modes */
  src: url('font/Afterglow-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font/Afterglow-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('font/Afterglow-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('font/Afterglow-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
	    url('font/Afterglow-Regular.svg#Afterglow-Regular') format('svg'); /* Legacy iOS */
}

body {
	background: #f5f5f5;
	margin:0;
	padding: 0;
	font-family: 'Jost', sans-serif;
	font-size: 18px;
	color: #888;
}

main {
	width: 60%;
	margin: 0px auto;
    position: relative;
}

.counter {
	width: 100%;
	/*margin: 50px auto 0;
	background: #e3e9e7;*/
    position: relative;
}

.center {
	margin: 20px auto 0;
	text-align: center;
	width: 60%;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

h3 {
	margin-top: 50px;
	color: #ffbac3;
	font-size: 64px;
	font-family: 'Afterglow-Regular', cursive;
	font-weight: 300;
}

.sub {
	color: #B6BCB2;
	font-size: 48px;
	font-family: 'Afterglow-Regular', cursive;
	font-weight: 300;
}

.sub-small {
	font-family: 'Jost', sans-serif;
	font-size: 18px;
	color: #888;
}
	

.fliptimer .text {
	text-transform: none !important;
}


.clear:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clear {display: inline-block; } * html .clear { height: 1%;} .clear {display: block;}


header.desktop {
	background: url(../images/wedding_header.jpg);
	background-size:cover;
	background-position: center 0;
	width: 100%;
	padding: 200px 0;
	transition:padding 600ms ease, background-size 600ms ease;
}

.text {
	/*background: rgba(255,255,255,0.2);
	backdrop-filter: blur(4px);
	border-radius: 2px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;

padding: 50px;*/
margin: 0 auto;
position: relative;
width:600px;
}

.text .major {color: #cbc1b7;
	font-size: 96px;
font-family: 'Afterglow-Regular', cursive;
	font-weight: 300;
	margin: 0 auto;
	text-align: center;
	text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
}

.text .minor {color: #ffffff;
	font-size: 72px;
	font-family: 'Afterglow-Regular', cursive;
	font-weight: 300;
	text-align: center;
	text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
}

.groombride {
	margin-top: 30px;
}

.boxes {
	width: 60%;
	margin: 20px auto 0;
    position: relative;
}

.groom div, .bride div {
	width: 600px;
	height: 400px;
	background: red;
	float: left;
}


.groom div:first-child {
	background: url(http://placeimg.com/600/400/people);
}

.bride div:last-child {
	background: url(http://placeimg.com/600/400/nature);
}

.groom div:last-child, .bride div:first-child {
	background: #ebeae7;
}

footer {
	margin-top:100px;
	padding: 50px;
}

.full {
	margin: 0 auto 0;
	background: #c3d5d0;
	width: 100%;
	padding: 1px 0 0 0;
}

.counter .inner {
	width: 60%;
	margin: 0 auto;
	padding: 50px 0 50px 0;
	text-align: center;
	margin: 50px auto;
  box-shadow: 0 0 0 5px rgba(0,0,0,0.05), 0 0 3px 0 rgba(0,0,0,0.2);
  padding: 20px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(5px);
  border-radius:0;
  border-radius: 0;
	
}







@media only screen and (max-width: 1200px) {
.counter .inner {width: 90%;}
header.desktop {padding: 170px 0;}
}


@media only screen and (max-width: 1000px) {
.counter .inner {width: 92%;}
header.desktop {padding: 150px 0;
background-size:125%;}
}
@media only screen and (max-width: 800px) {
	
main, .center, .boxes {width: 94%;}
header.desktop {padding: 120px 0;
background-size:150%;}
}
@media only screen and (max-width: 600px) {
.counter .inner {width: 96%;}
h3 {font-size: 58px;}
header.desktop {background-size:200%;}
}
.std {
	position: fixed;
	top: 0;
	left: 0;
	background: url(../images/savethedate.png);
	background-size:cover;
	background-position: center 0;
	width: 200px;
	height: 218px;
}

.counter h3 {
	color: #fff !important;
}



a {
    color: #000;
}
#messages h3 {
	color: #c3d5d0;
}


#yummyyummy.border-bottom {
    border-bottom: 3px solid #dee2e6!important;
}

.categories h5 {
	display: inline-block;
	margin-right: 20px;
	margin-top: 10px;
}

.pink-text {
	color: #ffbac3 !important;
}

.blue-text{
	color: #c3d5d0 !important;
}

.categories h5:first-child {
	margin-left: 0;
}


.categories h5 a:hover {
	
	color: #ffbac3 !important;
}

a.logout:hover {
	
	color: #ffbac3 !important;
}

.bg a:after {
    content: "♥";
    display: inline-block;
    width: 12px;
    height: 12px;
    font-size: 0.75em;
    transform: rotate(12deg);
    position: relative;
    top: -13px;
    left: 2px;
}