body{
	overflow: auto;
}

/*-------------------------------------------------- iPhone --------------------------------------------------*/
@media only screen and (max-width: 1000px) {
	.index-content0{
		width: 100%;
		overflow-x: hidden;
		overflow-y: hidden;
		max-height: 100vh;
		display: flex;
	    justify-content: center;
	}

	.index-content0 video{
		height: 100%;
	}

	.index-content0-slogan{
		position: absolute;
		left: 15%;
		width: 70%;
		top: 25%;
		font-size: 8vw;
		color: white;
		text-align: center;
		font-family: SourceSansPro-SemiboldItalic;
	}

	.index-content0 img{
		position: absolute;
		left: 49.2%;
		width: 8vw;
		cursor: pointer;
		top: 42%;
	}

	*::-webkit-media-controls-panel {
	  display: none!important;
	  -webkit-appearance: none;
	}

	*::--webkit-media-controls-play-button {
	  display: none!important;
	  -webkit-appearance: none;
	}

	*::-webkit-media-controls-start-playback-button {
	  display: none!important;
	  -webkit-appearance: none;
	}

	/*-----------------------------------------*/
	.index-content1{
		margin: 0 auto;
		width: 85%;
		height: auto;
	}

	.index-content1-wrapper{
		width: : 400px;
		margin-top: 200px;
		height: auto;
	}

	.index-content1-wrapper a{
		color: black;
	}

	/*.index-content1-wrapper a:hover > .box{
		margin-top: -25px;
		color: #00bdf2;
		transition: all 0.3s;
	}

	.index-content1-wrapper a:hover > .box img{
	 	transform: rotate(360deg);
	 	transition: transform 0.3s;
	}*/

	.box{
		width: 98%;
		margin-bottom: 150px;
		padding-bottom: 40px;
		height: 100%;
		background-color: white;
		border-radius: 40px;
		border: 12px solid #dedede;
		transition: all 0.3s;
	}

	.box-logo{
		margin-left: 39%; 
		margin-top: -90px;
		width: 180px;
		transition: transform 0.3s;
	}

	.box-title{
		margin-top: 20px;
		margin-bottom: 40px;
		font-family: SourceSansPro-Bold;
		text-align: center;
		font-size: 3em;
	}

	.box-text{
		margin: 0 auto;
		width: 80%;
		margin-top: 25px;
		margin-bottom: 35px;
		text-align: center;
		font-family: SourceSansPro-LightItalic;
		font-size: 2.5em;
		line-height: 1.5em;
	}

	/*-----------------------------------------*/
	.index-content2{
		overflow: auto;
		width: 100%;
		height: auto;
		background-color: #f5f7f9;
	}

	.index-content2-wrapper{
		margin: 100px auto;
		width: 850px;
		height: auto;
	}	

	.index-content2-image{
		margin-left: 100px;
		width: 650px;
		height: 650px;
	}

	.index-content2-image img{
		width: 650px;
		border-radius: 650px;
	}

	.index-content2-text{
		width: 100%;
		height: auto;
	}

	.index-content2-text-title{
		margin-top: 120px;
		font-size: 3em;
		font-family: SourceSansPro-Bold;
	}

	.index-content2-text-text{
		margin-top: 30px;
		font-family: SourceSansPro-Regular;
		font-size: 2.5em;
		line-height: 1.5em;
	}
}

/*-------------------------------------------------- iPad --------------------------------------------------*/
@media screen and (min-width: 1000px) and (max-width: 1199px) {
	.index-content0{
		width: 100%;
		overflow-x: hidden;
		overflow-y: hidden;
		max-height: 100vh;
		display: flex;
	    justify-content: center;
	}

	.index-content0 video{
		height: 100%;
	}

	.index-content0-slogan{
		position: absolute;
		left: 25%;
		width: 50%;
		top: 45%;
		font-size: 3.5vw;
		color: white;
		text-align: center;
		font-family: SourceSansPro-SemiboldItalic;
	}

	.index-content0 img{
		position: absolute;
		left: 49.2%;
		width: 2.5vw;
		cursor: pointer;
		top: 58%;
	}

	/*-----------------------------------------*/
	.index-content1{
		margin: 0px auto;
		width: 95%;
		height: auto;
	}

	.index-content1-wrapper{
		width: : 400px;
		margin-top: 100px;
		height: auto;
	}

	.index-content1-wrapper a{
		color: black;
	}

	.box{
		display: inline-block;
		vertical-align: top;
		width: 30%;
		margin-left: 1%;
		margin-bottom: 100px;
		padding-bottom: 40px;
		height: 375px;
		background-color: white;
		border-radius: 40px;
		border: 7px solid #dedede;
		transition: all 0.3s;
	}

	.box-logo{
		margin-left: 33%; 
		margin-top: -60px;
		width: 100px;
		transition: transform 0.3s;
	}

	.box-title{
		margin-top: 20px;
		margin-bottom: 40px;
		font-family: SourceSansPro-Bold;
		text-align: center;
		font-size: 2.2em;
	}

	.box-text{
		margin: 0 auto;
		width: 80%;
		margin-top: 25px;
		margin-bottom: 35px;
		text-align: center;
		font-family: SourceSansPro-LightItalic;
		font-size: 1.5em;
		line-height: 1.3em;
	}

	/*-----------------------------------------*/
	.index-content2{
		overflow: auto;
		width: 100%;
		height: auto;
		background-color: #f5f7f9;
	}

	.index-content2-wrapper{
		margin: 100px auto;
		width: 900px;
		height: auto;
	}	

	.index-content2-image{
		display: none;
		margin: 0 auto;
		width: 400px;
		height: 400px;
	}

	.index-content2-image img{
		width: 400px;
		border-radius: 180px;
	}

	.index-content2-text{
		width: 900px;
		height: auto;
		margin-top: 50px;
	}

	.index-content2-text-title{
		font-size: 2.5em;
		font-family: SourceSansPro-Bold;
	}

	.index-content2-text-text{
		margin-top: 20px;
		font-family: SourceSansPro-Regular;
		font-size: 1.3em;
		line-height: 1.3em;
	}
}


/*-------------------------------------------------- Laptop --------------------------------------------------*/
@media screen and (min-width: 1200px) {
	.index-content0{
		width: 100%;
		overflow-x: hidden;
		overflow-y: hidden;
		max-height: 100vh;
		display: flex;
	    justify-content: center;
	}

	.index-content0 video{
		height: 100%;
	}

	.index-content0-slogan{
		position: absolute;
		left: 25%;
		width: 50%;
		top: 45%;
		font-size: 3.5vw;
		color: white;
		text-align: center;
		font-family: SourceSansPro-SemiboldItalic;
	}

	.index-content0 img{
		position: absolute;
		left: 49.2%;
		width: 2.5vw;
		cursor: pointer;
		top: 58%;
	}


	/*-----------------------------------------*/
	.index-content1{
		width: 100%;
		height: auto;
	}

	.index-content1-wrapper{
		margin: 150px auto;
		width: 1000px;
		height: 310px;
	}

	.index-content1-wrapper a{
		color: black;
	}

	.index-content1-wrapper a:hover > .box{
		margin-top: -25px;
		color: #00bdf2;
		transition: all 0.3s;
	}

	.index-content1-wrapper a:hover > .box img{
	 	transform: rotate(360deg);
	 	transition: transform 0.3s;
	}

	.box{
		float: left;
		width: 200px;
		margin: 0px 15px;
		height: 300px;
		background-color: white;
		border-radius: 15px;
		border: 5px solid #dedede;
		transition: all 0.3s;
	}

	.box-logo{
		margin-left: 65px; 
		margin-top: -40px;
		width: 80px;
		transition: transform 0.3s;
	}

	.box-title{
		margin-top: 10px;
		font-family: SourceSansPro-Bold;
		text-align: center;
		font-size: 25px;
	}

	.box-text{
		margin: 0 auto;
		width: 80%;
		margin-top: 25px;
		text-align: center;
		font-family: SourceSansPro-LightItalic;
		font-size: 16px;
		line-height: 22px;
	}

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

	.index-content2{
		overflow: auto;
		width: 100%;
		height: auto;
		background-color: #f5f7f9;
	}

	.index-content2-wrapper{
		margin: 100px auto;
		width: 1000px;
		height: 320px;
	}	

	.index-content2-image{
		float: left;
		width: 250px;
		height: 320px;
	}

	.index-content2-image img{
		width: 250px;
		border-radius: 180px;
	}

	.index-content2-text{
		float: right;
		width: 675px;
		height: 320px;
	}

	.index-content2-text-title{
		font-size: 30px;
		font-family: SourceSansPro-Bold;
	}

	.index-content2-text-text{
		margin-top: 10px;
		font-size: 16px;
		font-family: SourceSansPro-Regular;
		line-height: 22px;
	}
}