/**********************************************************************************

	Project Name: Responsive Layout Style for Flattern Landing Page Based on The Template Style
	Project Description: Flattern is a flat design landing page for your apps, product, or portfolio
	Author: xWisnux
	Author URI: http://www.worksofwisnu.com
	Version: 1.0.0
	
**********************************************************************************/
/* Large desktop */
@media (min-width: 1200px) { 	
	/* App Layout
	---------------------------------*/
	span.rollover-play{
		margin-top: 154px !important;
		margin-left: 100px !important;
		height: 370px;
		width: 206px;
	}
	
	.video-wrapper iframe{
		width: 100%;
	}
	
	/* Product Layout
	---------------------------------*/
	a.price{
		width: 100%;
		text-align: center;
	}
	
	/* Portfolio Layout
	---------------------------------*/
	
	.contact-form form select{
		width: 97.6%;
	}
	
	.contact-form form input[type="submit"].send-button {
		width: 95.6%;
	}
	
	.form-error-message{
		width: 94.7%;
	}
	
	.team-profile ul li.profile-link-top {
		left: 150px;
	}
	
	.team-profile ul li.profile-link-left{
		left: 40px;
	}
	
	.team-profile ul li.profile-link-right{
		right: 38px;
	}
	
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
	.subscribe-form input.form{
		width: 62%;
	}
	
	#header .left-marketing {
		margin-top: 37px;
		margin-bottom: 42px;
	}
	
	/* App Layout
	---------------------------------*/
	span.rollover-play{
		margin-top: 110px !important;
		margin-left: 70px !important;
		height: 265px;
		width: 150px;
	}
	
	.video-wrapper iframe{
		width: 100%;
	}
	
	ul.testimonials-list li img.testi-photo{
		margin: 40px 50px 75px;
	}
	
	/* Coming Soon Layout
	---------------------------------*/
	ul#countdown li{
		text-align: center;
		width: 95px;
		height: 95px;
		margin-right: 8px;
	}
	
	ul#countdown li:before{
		top: 45px;
	}
	
	ul#countdown li:after{
		top: 47px;
	}
	
	ul#countdown li span{
		font-size: 60px;
		height: 60px;
		line-height: 95px;
	}
	
	/* Product Layout
	---------------------------------*/
	a.price{
		text-align: center;
		line-height: 1.2em;
	}
	
	/* Portfolio Layout
	---------------------------------*/
	.flattern-nav .nav{
		width: auto;
	}
	
	.flattern-nav .nav-collapse.collapse {
		height: auto;
		overflow: visible;
	}
	
	.portfolio-banner {
		top: 75%;
	}
	
	.team-profile ul li.profile-link-top {
		left: 80px;
	}
	
	.team-profile ul li.profile-link-left{
		left: -15px;
	}
	
	.team-profile ul li.profile-link-right{
		right: -15px;
	}
	
	.contact-form form select{
		width: 102.5%;
	}
	
	.contact-form form input[type="submit"].send-button {
		width: 106%;
		background: url(../img/mail-plane.png) 20px center no-repeat;
	}
	
	.form-error-message{
		width: 94.4%;
	}
	
	
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { 
	body{
		text-align: center;
	}
	
	.top-header a{
		margin: 20px auto 15px;
		text-align: center;
		float: none;
	}

  #login-signup-links {
      float: none;
  }

	#testimonials .flexslider {
		background: url(../img/quote.png) center no-repeat !important;
	}
	
	ul.testimonials-list{
		margin: 0;
	}
	
	ul.testimonials-list li img.testi-photo{
		float: none;
		margin: 35px auto;
	}
	
	ul.testimonials-list li p{
		padding: 0 40px;
	}
	
	ul.social-icons {
		margin: 0 20px;
	}
	
	ul.social-icons li{
		margin-right: 5px;
	}
	
	/* App Layout
	----------------------------------*/
	a.logo {
		font-size: 48px;
	}
	
	#header .left-marketing{
		margin-top: 75px;
		margin-bottom: 0;
	}
	
	.store-button{
		margin: 20px 5px;
	}
	
	span.rollover-play{
		margin-top: 155px !important;
		margin-left: 99px !important;
		height: 368px;
		width: 208px;
	}
	
	.video-wrapper iframe{
		width: 100%;
	}
	
	img.featurette-image {
		margin: 10% auto;
	}
	
	ul.image-preview {
		margin-left: 12px;
	}
	
	.subscribe-form form input[type="text"]{
		margin-left: 10px;
	}
	
	.subscribe-form form input[type="submit"]{
		margin-left: -14px;
	}
	
	/* Coming Soon Layout
	----------------------------------*/
	ul#countdown li{
		margin-right: 4px;
	}
	
	/* Product Layout
	----------------------------------*/
	.marketing{
		margin: 40px 0;
	}
	
	.pricing-table {
		text-align: center;
		padding: 0 20px;
		margin: 20px 0 30px;
	}
	
	/* Portfolio Layout
	---------------------------------*/
	.flattern-nav .nav{
		width: auto;
	}
	
	.flattern-nav .nav-collapse.collapse {
		height: auto;
		overflow: visible;
	}
	
	.flattern-nav .nav > li > a > span.nav-icon > img{
		width: 50%;
		display: block;
		margin: 0 auto 10px;
	}
	
	.portfolio-banner .tagline{
		margin: 30px 0;
	}
	
	#portfolio-tagline h1 {
		margin: 85px 20px 30px;
	}
	
	.tagline {
		margin: 10px 0;
	}
	
	.left-work-meta {
		text-align: center;
		border: 0;
	}
	
	ul.work-done {
		border-top: 0;
		margin-left: 0;
		padding-top: 0;
	}
	
	.team-profile {
		text-align: center;
		margin: 50px 0;
		padding: 0 20px;
	}
	
	.team-profile ul li.profile-link-top{
		top: -69px;
		left: 167px;
	}
	
	.team-profile ul li.profile-link-right{
		top: 40px;
		right: 54px;
	}
	
	.team-profile ul li.profile-link-left{
		top: 40px;
		left: 55px;
	}
	
	.contact-form .row-fluid {
		margin-bottom: 0;
	}
	
	.contact-form textarea {
		width: 90%;
	}
	
	input[type="submit"].send-button {
		width: 100.5%;
	}

}

/* Portrait phones and down */
@media (max-width: 320px) {
	/* App Layout
	----------------------------------*/
	ul.image-preview li {
		float: none;
	}
	
	.form{
		width: 55%;
	}
	
	span.rollover-play{
		margin-top: 122px !important;
		margin-left: 77px !important;
		height: 292px;
		width: 165px;
	}
	
	.subscribe-form form input[type="text"]{
		margin-left: 8px;
	}
	
	.subscribe-form form input[type="submit"]{
		margin-left: -11px;
	}
	
	/* Coming Soon Layout
	----------------------------------*/
	ul#countdown li{
		margin-right: 20px;
		margin-left: 20px;
	}
	
	ul#countdown li:last-child{
		margin-right: 20px;
	}
	
	/* Portfolio Layout
	----------------------------------*/
	.flattern-nav .nav{
		padding: 0 20px;
	}
	
	.flattern-nav .nav > li > a > span.nav-icon {
		display: none;
	}
	
	.portfolio-banner{
		top: 75%;
	}
	
	.team-profile ul li.profile-link-top{
		top: -45px;
		left: 88px;
	}
	
	.team-profile ul li.profile-link-right{
		top: 45px;
		right: 0px;
	}
	
	.team-profile ul li.profile-link-left{
		top: 45px;
		left: 0;
	}
	
	.contact-form input {
		width: 85.5%;
	}
	
	.contact-form textarea{
		width: 85%;
	}
	
	input[type="submit"].send-button{
		width: 101.5%;
	}
	
	.form-error-message{
		width: 83.5%;
	}
}