/*------------------------------------------------------------------------------------

	Theme Name: Eternity
	Theme URI: http://wp.themechills.com/eternity
	Description: A beautiful landing page template for all wedding occasions.
	Author: ThemeChills
	Author URI: http://www.themechills.com
	Version: 1.7

--------------------------------------------------------------------------------------

	1. Screens that are at least 768px
	2. Screens that are at least 940px
	3. Screens that are at least 1280px
	3. Screens that are at least 1550px
	4. iPads (landscape)
	5. iPads (portrait)
	6. Retina Image Support

-------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------*/
/*	1. Styles for screens that are at least 768px; */
/*-----------------------------------------------------------------------------------*/

@media only screen and (min-width: 48em) {

	blockquote {
		padding: 4em;
	}

	/* Logo --------------------------------------------------------*/

	.logo {		
		margin:1em auto 0;
	}
	.logo a {
		border-radius: 0;
	}
	.ribbon {
		background:url(../img/ribbon.png) bottom left repeat-x;		
	}

	/* Grid --------------------------------------------------------*/

	.large-3,
	.large-9 {
		width:100%;
	}
	.row .large-offset-1 {
		margin-left: 0;
	}
	.clearing-assembled .clearing-container .carousel {
		height:185px;
	}
	.clearing-assembled .clearing-container .carousel > ul li {
		margin-right: 5px;
		width: 185px;
	}
	.section-title {	
		font-size: 6em;			
		margin-top: 4rem;
		padding-bottom: 0;
		width: auto;	
	}
	.section-title span:first-child {
		margin-right: -15px;	
	}
	.section-title span:last-child {
		margin-left: -10px;	
	}
	.section-title span,
	.section-title em {
		display: inline-block;
	}	

	/* Carousel +  Flexslider --------------------------------------*/

	.carousel li {
		width: 25%;
	}

	/* Form --------------------------------------------------------*/

	.rsvp-form fieldset {
		padding: 2.5em;	
	}

	/* Date Block --------------------------------------------------*/

	.date-container {
		padding: 3em;
		text-align: left;
	}
	.date-container.col-1 {			
		border-bottom: none;
		text-align: right;
		padding-bottom: 0;
	}
	.date-container.col-2 {
		border-left: 1px solid #e4e4e4;
	} 
	.date-container .day-date {
		font-size: 1.250em;		
	}
	.date-container .day-time, 
	.date-container .day-address {
		font-size: 1.563em;
	}
	.date-container .day-meta {
		font-size: 2.188em;
	}

	/* Footer ----------------------------------------------------*/

	footer {
		text-align: left;
	}
	footer .credit {
		text-align: right;
	}

}

/*-----------------------------------------------------------------------------------*/
/*	4. Styles for screens between 1768px and 1750px; */
/*-----------------------------------------------------------------------------------*/
@media only screen and (min-width: 48em) and (max-width: 109.375em) {
	
	.full-width-wrap {
		width: 100%;
	}

}

/*-----------------------------------------------------------------------------------*/
/*	2. Styles for screens that are at least 940px; */
/*-----------------------------------------------------------------------------------*/

@media only screen and (min-width: 58.75em) {

	.top-bar-section ul li {
		border: none;
	}
	.top-bar .toggle-topbar {
		display: none;
	}
	.top-bar .title-area {
		position: static;
	}
	section.top-bar-section {
		overflow: visible;
	}

}

/*-----------------------------------------------------------------------------------*/
/*	3. Styles for screens that are at least 1280px; */
/*-----------------------------------------------------------------------------------*/

@media only screen and (min-width: 80em) {

	/* Logo -------------------------------------------------------*/

	.logo {		
		margin:auto;
	}

	/* Visibility -------------------------------------------------*/

	.hide-for-large, 
	.hide-for-large-down {
		display: inherit !important;
	}

	/* Grid ------------------------------------------------------*/

	.large-3 {
		width: 25%;
	}
	.large-9 {
		width: 75%;
	}
	.row .large-offset-1 {
		margin-left: 8.33333%;
	}
	.section-title.blog {
		margin-top: 0;
	}

	/* Sidebar ------------------------------------------------------*/

	aside {
		height: 100%;
		position: fixed!important;
		float: left;
		display: block;
		left: 0;
		z-index: 10;	
	}
	#main > .row {
		padding-top: 0;
	}
	.top-bar {
		display: none!important;
	}
}

/*-----------------------------------------------------------------------------------*/
/*	4. Styles for iPads (landscape) */
/*-----------------------------------------------------------------------------------*/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	
	/* Top Bar ------------------------------------------------------*/

	.top-bar {
		overflow: hidden;
		position: fixed;
	}
	.top-bar-section ul li {
		border-bottom: none;
	}

	/* Header ------------------------------------------------------*/
	
	header {
		margin-top: 4em;
	}

	/* Gifts Grid --------------------------------------------------*/
	
	#section-5 .large-6 {
		width: 66.66667%;
	}

}

/*-----------------------------------------------------------------------------------*/
/*	5. Styles for iPads (portrait) */
/*-----------------------------------------------------------------------------------*/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	
	blockquote {
		padding: 2em 2em 4em;
	}

	/* Date Block --------------------------------------------------*/

	.date-container {
		padding:3em;
	} 
	.date-section > .large-6 {
		width: 100%;
	}
	.date-container,
	.date-container.col-1 {
		text-align: center;
	}
	.date-container.col-1 {
		border-bottom: 1px solid #e4e4e4;
		padding-bottom: 1em;
	}

	/* Gifts Grid --------------------------------------------------*/
	
	#section-5 .large-6 {
		width: 83.33333%;
	}

}

/*-----------------------------------------------------------------------------------*/
/*	6. Retina Image Support */
/*-----------------------------------------------------------------------------------*/

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
     
    .hearts {
		background: url(../img/icon-hearts@2x.png) no-repeat center bottom;
		background-size: 56px 29px;
    }

}