@media screen and (min-width: 0px) and (max-width: 500px) {

	section {
		min-width: 320px;
		padding: 20px 0px;
	}
	section > div {
		width: 100%;
		-moz-box-sizing: border-box;
		margin: 30px auto;
		padding-left: 10px;
		padding-right: 10px;
		box-sizing:border-box
	}

	.title {
		margin-top: 30px;
		margin-bottom: 30px;
		font-size: 24px;
	}
	.sentence {
	    box-sizing: border-box;
		padding-left: 10px;
		padding-right: 10px;
	}
	.artwork {
	    box-sizing: border-box;
	}

	/**************************************
	 *  Header
	 **************************************/
	header {
		opacity: 0;
	}
	header > * {
		display: none;
	}

	/**************************************
	 *  CropClip
	 **************************************/
	#cropclip {
		position: relative;
		height: 550px;
	}
	#cropclip .title {
		padding-top: 30px;
		font-size: 70px;
	}
	#cropclip .subtitle {
		font-size: 18px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	#cropclip .artwork {
		position: absolute;
		width: 800px;
		animation-name: cropclip-artwork-key;
		animation-duration: 6s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		-webkit-animation-name: cropclip-artwork-key;
		-webkit-animation-duration: 6s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
	}
	@keyframes cropclip-artwork-key {
		0%, 30%, 100% { left: 0px; }
		60%, 92%      { left: calc(100% - 800px); }
	}
	@-webkit-keyframes cropclip-artwork-key {
		0%, 30%, 100% { left: 0px; }
		60%, 92%      { left: calc(100% - 800px); }
	}

	#cropclip-iphone-baloon,
	#cropclip-mac-notice, 
	#cropclip-mac-baloon, 
	#cropclip-crop-img {
		animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
	}
	@keyframes cropclip-iphone-baloon-key {
		0%, 19%, 93%, 100% { opacity: 0; }
		20%, 92%           { opacity: 1; }
	}
	@-webkit-keyframes cropclip-iphone-baloon-key {
		0%, 19%, 93%, 100% { opacity: 0; }
		20%, 92%           { opacity: 1; }
	}

	/**************************************
 	 *  Description
	 **************************************/
	#description-title1, #description-title2 {
		display: block;
	}
	
	.descriptions {
		height: auto;
	}
	.description {
		position: relative;
		height: auto;
		margin: 30px 0px;
	}
	.description .artwork {
		width: 300px;
		margin: 30px 0px;
	}
	#description-1 .artwork {
		height: 100px;
		top: 0px;
	}
	#description-2 .artwork {
		top: 0px;
	}
	#description-3 .artwork {
		top: 0px;
	}
	
	#description-1 .description-photo-h, 
	#description-1 .description-photo-v {
		position: absolute;
		border: solid #fff 3px;
	}
	#description-1 .description-photo-h {
		width: 80px;
	}
	#description-1 .description-photo-v {
		height: 80px;
	}
	#description-1-photo1 {
		top: 10px;
		left: 0px;
	}
	#description-1-photo2 {
		top: 0px;
		left: 85px;
	}
	#description-1-photo3 {
		top: 20px;
		left: 140px;
	}
	#description-1-photo4 {
		top: 0px;
		left: 225px;
	}
	#description-3 .catchphrase {
		top: 0px;
	}

	#description-3 .artwork {
		opacity: 1;
		height: 270px;
	}
	#description-3 .description-photo {
		width: 80px;
	}
	#description-3-photo1 {
		top: 25px;
		left: 30px;
	}
	#description-3-photo2 {
		top: 40px;
		left: 80px;
	}
	#description-3-photo3 {
		top: 55px;
		left: 130px;
	}
	#description-3-photo4 {
		top: 70px;
		left: 180px;
	}
	#description-3 .catchphrase {
		top: 0px;
	}
	#description-3-catchphrase1 {
		font-size: 18px;
		font-weight: normal;
	}
	#description-3-catchphrase2 {
		font-size: 26px;
	}

	#description-2, #description-baloon2, #description-pager2-on,
	#description-3, #description-baloon3, #description-pager3-on {
		display: block;
	}
	.description-baloons, .description-pagers {
		display: none;
	}

	/**************************************
	 *  Condition
	 **************************************/
	.condition-clause {
		width: 300px;
		height: 80px;
		border-radius: 20px;
	}
	.condition-clause-icon {
		position: relative;
		top: 0px;
		left: -95px;
	}
	.condition-clause-device {
		margin: 0px;
	}
	.condition-clause-version {
		display: inline;
		margin: 0px;
	}
	.condition-plus {
		display: block;
		height: 25px;
		margin: 5px;
	}

	/**************************************
	 *  Setup
	 **************************************/
	#setup .artwork {
		text-align: left;
	}
	.setup-step {
		position: relative;
		width: 100%;
		margin: 40px 10px;
	}
	#setup-step1, #setup-step2, #setup-step3 {
		top: 0px;
		left: 0%;
	}
	.setup-icon {
		width: 80px;	
		height: 80px;	
	}
	.setup-checks {
		margin: 0px -5px;
	}
	.setup-store {
		position: absolute;
		top: 32px;
		left: 100px;
	}
	.setup-arrow {
		display: none;
	}

	/**************************************
 	 *  Support / FAQ
 	 **************************************/
	.faq-Q {
		margin-left: 0px;
	}
	.faq-A {
		margin-left: 0px;
	}

	/**************************************
	 *  Support / Contact 
	 **************************************/

	/**************************************
	 *  Footer
	 **************************************/
	footer span {
		display: block;
	}

}