/**********************************
MOBILE
***********************************/
@media screen and (max-width:479px)  { /* mobile */ 

	/**********************************
	HELPERS
	***********************************/
	.invisible-mob {
		visibility: hidden;
	}
	.hide-mob {
		display: none;
	}

	/**********************************
	CONTAINERS - BODY
	***********************************/
	
	#ym-container {
		width: 315px; /* 375px minus 60px for margins, 30px on each side */
	}
	
	#ym-container h1 {
		text-align: center;
	}
	
	
	/**********************************
	HERO
	***********************************/
	
	#hero-left {
		width: 100%;
	}
	
	#ym-container h1 {
		margin-bottom: 40px;
	}
	
	#hero-left p {
		width: 311px;
		padding: 0;
	}
	
	#hero-left img {
		margin-bottom: 40px;
		width: 100%; 
		height: auto;
	}
	
	#hero-right {
		width: 100%;
		border-left: none;
		border-top: 1px solid #95989a;
		border-bottom: 1px solid #95989a;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	
	#hero-right h2 {
		width: 100%;
		text-align: center;
		margin-top: 50px;
	}
	
	#hero-right .feature {
		float: left;
		margin-left: 0;
		margin-bottom: 25px;
	}
	
	#hero-right .feature-info {
		width: 100%;
		margin-top: 10px;
		margin-bottom: 90px;
	}
	
	#feature-bottom .feature {
		width: 270px;
		float: left;
	}
	
	/**********************************
	FORM
	***********************************/
	#ym-container form {
		width: 100%;
	}

	#ym-container form select, #ym-container form input {
		width: 100%;
	}
	
	#ym-container form input[type=submit] {
		margin-right: 45px;
	}
	
	#ym-container form #get-member {
		width: 100%;
	}
	
	.checkbox {
		width: 100%;
	}
	
	.checkbox #checkboxLabel {
		margin-left: 45px;
	}
	
	#ym-container form #terms {
		min-height: 120px;
	}
	
	#ym-container form #terms #show-terms {
		top: 80px;
		right: 25px;
	}

	#ym-container form #terms #hide-terms {
		position: absolute;
		bottom: 25px;
		right: 25px;
	}
	
	/**********************************
	DISCLAIMER
	***********************************/

	#ym-container #disclaimer {
		margin-top: 0;
		padding-top: 0;
		border: none;
	}
}



/**********************************
TABLETS
***********************************/
@media screen and (min-width:480px) and (max-width:1149px)  { /* tablets */ 

	/**********************************
	HELPERS
	***********************************/
	.invisible-tab {
		visibility: hidden;
	}
	.hide-tab {
		display: none;
	}
	

	/**********************************
	CONTAINERS - BODY
	***********************************/

	#ym-container {
		width: 687px; /* 767px minus 80px for margins, 40px on each side */
	}
	
	
	/**********************************
	HERO
	***********************************/
	
	#hero-left {
		width: 100%;
	}
	
	#hero-left p {
		width: 321px;
	}
	
	#hero-left img {
		width: 340px;
		height: auto;
	}
	
	#hero-right {
		float: left;
		width: 100%;
		border-left: none;
		border-top: 1px solid #95989a;
		border-bottom: 1px solid #95989a;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	
	#hero-right h2 {
		width: 100%;
		text-align: center;
		margin-top: 50px;
	}
	
	
	#hero-right .feature {
		width: 279px;
		float: left;
		margin-bottom: 30px;
	}
	
	#hero-right .feature:nth-child(odd) {
		margin-right: 70px;
	}

	#hero-right .feature span {
		width: 170px;
		float: right;
		margin: 8px 0 15px 0;
		font-size: 20px;
		color: #95989A;
	}

	#hero-right .feature-info {
		width: 100%;
		margin-top: 10px;
		margin-bottom: 70px;
	}
	
	#feature-bottom .feature {
		width: 45%;
		float: left;
		margin-left: 10px;
	}
	
	/**********************************
	FORM
	***********************************/
	#ym-container form {
		width: 100%;
	}

	#ym-container form select, #ym-container form input, #ym-container form #get-member {
		width: 314px;
	}
	
	
	/**********************************
	DISCLAIMER
	***********************************/

	#ym-container #disclaimer {
		margin-top: 0;
		padding-top: 0;
		border: none;
	}

	
}



/**********************************
DESKTOPS
***********************************/
@media screen and (min-width:1150px) { /* desktops */ 

	#ym-container {
		
	}

}