/* Generic Responsive Style Sheet */

@media screen and (orientation:portrait) {
	
	/* ----- Page Navigation Style Sheet ----- */
	
	#nav {
		display: none !important;
	}
	
	/* ----- Body Content Style Sheet ----- */
	
	h2 {
		font-size: 25px;
		font-weight: 400;
		margin: 0.45em 0;
		text-align: center;
	}
	
	p {
		font-size: 15px;
		font-weight: 400;
		text-align: center
	}
	
	/* ----- Slide 1 Style Sheet ----- */
	
	#intro {
		background: url(../images/app-launch/bg.jpg) no-repeat center center !important;
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		-o-background-size: cover !important;
		background-size: cover !important;
	}
	
	#intro .content-holder {
		background: rgba(0, 0, 0, 0.60);		
	}
	
	#intro .content-holder .mobile-links {
	    margin: 3% 2%;
	    height: auto;
	}
	
	#intro .content-holder .mobile-links a {
	    margin: 0 4px;
	}
		
	#intro .content h2 {
		font-size: 25px;
		font-weight: 400;
		margin: 0.45em 0;
	}
	
	#intro .content p {
		font-size: 15px;
		font-weight: 400;
	}
	
	/* ----- Slide 2 Style Sheet ----- */
	
	#second .content-holder .content .left {
		max-height: 250px;
		width: 100%;
		height: 100%;
		margin: 50px 0 20px 0;
		background: url(../images/app-launch/phone.png) no-repeat center center !important;
		-webkit-background-size: contain !important;
		-moz-background-size: contain !important;
		-o-background-size: contain !important;
		background-size: contain !important;
		float: left;
		clear: both;
	}
	#second .content-holder .content 
	{
	    max-height: 510px;
	      top: -23%;
	}
	
	#second .content-holder .content .right {
		width: 100%;
		height: 100%;
		float: none;
		clear: both;
	}
	
	#second .content-holder .content p.desktop {
		display: none;
	}
	
	#second .content-holder .content ul {
		display: none;
	}
	
	#second .content-holder .content p.mobile {
		display: inherit;
	}
	
	/* ----- Slide 3 Style Sheet ----- */
	
	#third {
		background: url(../images/app-launch/003-bg.jpg) no-repeat 40% 20% !important;
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		-o-background-size: cover !important;
		background-size: cover !important;
	}
	
	#third .content-holder {
		max-height: none;
		max-width: 100%;
		width: 100%;
		height: auto;
		padding: 2% 0;
		margin: 0 auto;
		vertical-align: middle;
		white-space: normal;
		position: absolute;
		text-align: center;
		bottom: 0;
		left: 0;
		right: 0;
		top: inherit;
	    background: rgba(255, 255, 255, 0.85);
	}

	
	#third .content-holder .content {
		height: auto;
		width: 90%;
		float: none;
		margin: 0 auto;
	}
	
	figure {
		margin: 20px 0;
	}
	
	figure .badge-large {
	    font-size: 35px;
	    font-weight: 300;
	}
	
	/* ----- Slide 4 Style Sheet ----- */
	
	#fourth {
		background: url(../images/app-launch/004-bg.jpg) no-repeat 40% 20% !important;
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		-o-background-size: cover !important;
		background-size: cover !important;
	}
	
	#fourth .content-holder {
		background: rgba(0, 0, 0, 0.70);
	}
	
	#fourth .content-holder .content h2 {
		text-align: center;
		color: #FFFFFF;
	}
	
	#fourth .content-holder .content p {
		text-align: center;
		color: #FFFFFF;
		padding-bottom: 20px;
	}
	
	/* ----- Slide 5 Style Sheet ----- */
	
	#fifth {
		background: url(../images/app-launch/005-bg.jpg) no-repeat 65% 20% !important;
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		-o-background-size: cover !important;
		background-size: cover !important;

	}
	
	#fifth .content-holder {
		max-height: none;
		max-width: 100%;
		width: 100%;
		height: auto;
		padding: 2% 0;
		margin: 0 auto;
		vertical-align: middle;
		white-space: normal;
		position: absolute;
		text-align: center;
		bottom: 0;
		left: 0;
		right: 0;
		top: inherit;
	    background: rgba(0, 0, 0, 0.30);
	}
	
	#fifth .content-holder .content {
		height: auto;
		width: 90%;
		float: none;
		margin: 0 auto;
	}
	
	#fifth .content-holder .content h2 {
		color: #FFFFFF;
	}
	
	#fifth .content-holder .content p {
		color: #FFFFFF;
		padding-bottom: 20px;
	}
		/* ----- Slide 6 Style Sheet ----- */
	
	#sixth .desktop {
		display: none;
	}
	
	#sixth {
		min-height: 1250px;
		height: 100%;
		width: 100%;
		margin: 0 auto;
		padding: 0;
		position: inherit;
		overflow: visible;	
	}
	
	#sixth .mobile {
		height: 100%;
		width: 100%;
		margin: 0 auto;
		padding: 0;
		position: relative;
	}
	
	#sixth .mobile {
		display: inherit;
	}
	
	#sixth .mobile .one {
		background: url(../images/app-launch/upload-photo.jpg) no-repeat center center !important;
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		-o-background-size: cover !important;
		background-size: cover !important;
		height: 250px;
		width: 100%;
		position: relative;
		clear: both;
	}
	
	#sixth .mobile .two {
		background: url(../images/app-launch/neighbour.jpg) no-repeat center center !important;
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		-o-background-size: cover !important;
		background-size: cover !important;
		height: 250px;
		width: 100%;
		position: relative;
		clear: both;
	
	}
	
	#sixth .mobile .three {
		background: url(../images/app-launch/trusted-circle.jpg) no-repeat center center !important;
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		-o-background-size: cover !important;
		background-size: cover !important;
		height: 250px;
		width: 100%;
		position: relative;
		clear: both;
	}
	
	#sixth .mobile .four {
		background: url(../images/app-launch/add-product.jpg) no-repeat center center !important;
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		-o-background-size: cover !important;
		background-size: cover !important;
		height: 500px;
		width: 100%;
		position: relative;
		clear: both;
	}
	
	#sixth .mobile .one div, #sixth .mobile .two div, #sixth .mobile .three div {
		padding: 20px;
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 26px;
		text-align: center;
		background: rgba(0, 0, 0, 0.60);
	}
	
	#sixth .mobile .one div span.content, #sixth .mobile .two div span.content, #sixth .mobile .three div span.content {
		font-family: 'Lato', sans-serif;
		font-size: 18px;
		font-weight: 300;
		font-style: normal;
		line-height: 1.2;
		letter-spacing: normal;
		color: #FFFFFF;
		text-align: center;
		clear: both;
		display: block;
	}
	
	#sixth .mobile .four .mobile-links {
	    display: block;
	    height: 44px;
	    position: absolute;
	    width: 300px;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    top: 58%;
	    margin: auto;
	    text-align: center;
	}
	
	#sixth .mobile .four .mobile-links h2 {
		font-family: 'Lato', sans-serif;
		font-size: 25px;
		font-weight: 300;
		font-style: normal;
		line-height: 1.4;
		letter-spacing: normal;
		color: #FFFFFF;
		padding: 0;
		margin: 0 0 0.45em 0;
		text-align: center;
	}
	
	#sixth .mobile .four .mobile-links a {
	    background-position: 50% center;
	    background-repeat: no-repeat;
	    background-size: 100% auto;
	    display: inline-block;
	    margin: 0 4px;
	}
	
	#sixth .mobile .four .mobile-link-ios {
	    background-image: url("https://s.yimg.com/uy/build/images/appstores/ios-2.svg");
	    height: 44px;
	    width: 148px;
	    display: inline-block;
	}
	
	#sixth .mobile .four .mobile-link-android {
	    background-image: url("https://s.yimg.com/uy/build/images/appstores/google-2.svg");
	    height: 44px;
	    width: 128px;
	    display: inline-block;
	}
	
	/* ----- Footer Style Sheet ----- */
	
	footer {
		height: 10px;
		width: 100%;
		padding: 20px 0;
		position: relative;
		clear: both;
	}
	
	footer #copyright {
		font-family: 'Lato', sans-serif;
	    font-size: 10px;
	    font-weight: 400;
	    text-align: center;
	    color: #2f4159;
	    margin: 0 auto;
	    width: 300px;
	}

	#sixth .bottom-content .two, #sixth .bottom-content .three, #sixth .bottom-content .four {
		width: 100%; 
	}
	
	#sixth .bottom-content .two div, #sixth .bottom-content .three div, #sixth .bottom-content .four div {
		padding: 20px 10px;
		height: 24px;
	}
	
	#sixth .bottom-content .two div span.content, #sixth .bottom-content .three div span.content, #sixth .bottom-content .four div span.content {
		font-size: 20px; 
	}
  
}

@media screen and (max-width: 1150px) 
{
    #second .content-holder .content .left 
    {
        max-height: 500px;
    }
    h2 
    {
        font-size: 30px;
    }
    #second .content-holder .content ul li 
    {
         line-height: 1;
    }
    header #text-field {
	    display:none;
    }
    
}

@media screen and (max-width: 600px) 
{
    #second .content-holder .content .left 
    {
        max-height: 250px;
    }
    h2 
    {
        font-size: 25px;
    }
}