/*==================================================
Author: http://themeforest.net/user/navigator
Only At: ThemeForest.net


	* * * CONTENTS * * *

	0. Media screen up to 980 px
	
	1. Media screen up to 780 px
	
	2. Media screen up to 580 px

	3. Media screen up to 380 px
	
==================================================*/


/*------------------------------------------------
    0. Media screen up to 980 px
------------------------------------------------*/

@media screen and (max-width: 980px) {

	#mobile-nav {display:none;}


	nav ul {
		max-width:80%;
	}
	nav ul li a {
		font-size: 12px;
		font-weight: bold;
		padding:20px 10px;
	}
}


/*------------------------------------------------
    1. Media screen up to 780 px
------------------------------------------------*/

@media screen and (max-width: 780px) {
	
	.wrap {width: 94%;}

	.half {width: 100%; margin-bottom: 25px;}

	.fourth {width: 47%; margin-right: 3%;}
	.fourth:nth-of-type(2n):not(.last) {margin: 0px 0px 25px 0px;}

	.third img {width: 80%; height: auto;}
	.frame {background: none;}
	.frame img {border: 8px solid #fff;}

	.sixth {width: 30.66%;}
	.sixth:nth-of-type(3n):not(.last) {margin: 0px 0px 25px 0px;}

	.last {margin: 0px;}

	nav .wrap {
	    overflow:hidden;
	    width:94%;
	}

	nav ul {
		max-width:70%;
	}
	nav ul li a {
		font-size: 12px;
		font-weight: bold;
		padding:10px 20px;
	}

	#photos-download {text-align: center;}
	#photos-download span {float: none; margin: 0px auto 15px;}
	#photos-download .btn-download {float: none;}

	.home-image {
	    margin:50px auto;
	    border:3px solid #fff; 
	    text-align:center;
	}
	.home-text {
		margin-top:0;
	}
}


/*------------------------------------------------
    2. Media screen up to 580 px
------------------------------------------------*/

@media screen and (max-width: 580px) {

	.top-header {display: none;}

	#the-day .top-header {display: block;}
	
	.nav-icons li {width:0px;}
	
	#mobile-nav {
		display:block;
		float:left;
	}
	nav {
		top:20px;
	}
	nav ul {
		display: none;
		width: 100%;
		max-width: 100%;
		float: none;
		background: #111111;
		top: 10px;
		position: relative;
	}
	nav ul li {
		display:block;
		float:none;
	}
	nav ul li:hover {
		background:#eeeeee;
	}
	nav ul li a {
		color: #fff;
		display:block;
	}
	nav .wrap {overflow:visible;width: 100%;}

	a.logo {
		position:absolute;
		top:0;
		right:0;
	}

	h1.big {top: 90px;}
	h1 {line-height: 40px; font-size: 40px;}
	h2 {line-height: 22px; font-size: 32px;}

	ul#pages li section {padding-top: 90px;}
	ul#pages li#the-day section {padding-top: 150px;}

	.frame img {border: 6px solid #fff;}

	p.single {
		width:94%;
	}

	.sixth,
	.sixth:nth-of-type(3n):not(.last) {width: 47%; margin-right: 3%;}
	.sixth:nth-of-type(2n):not(.last) {margin: 0px 0px 25px 0px;}

	.last {margin: 0px;}

	.address {width: 75%;}

	#rsvp_form fieldset {margin: 15px 0px;}
	#rsvp_form input[type=text] {width: 80%; height: 35px;}

	.countdown.flip-clock-wrapper {
	    margin:20px;
	    transform: scale(0.5);
	    margin-left:-120px;
	}

	.invite {
		width:100%;
	}
	.ceremony img, .about img {
		width:100%;
	}
}


/*------------------------------------------------
    3. Media screen up to 380 px
------------------------------------------------*/

@media screen and (max-width: 380px) {

	#pages, footer {display: none;}

	#rotate-phone {display: block;}

}