/*Only for canvas*/
	
@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
	#canvas {
		width: 350px !important;
		height: 321px !important;
	}
}
@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
	#canvas {
		width: 425px !important;
		height: 390px !important;
	}
@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) {
	#canvas {
		width: 350px !important;
		height: 321px !important;
	}
}

	
	/*From two column two one column*/
	
@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
	.main_container_left, .main_container_right {
		width: calc(100% - 20px);
		display: block;
		margin-left: 10px;
		margin-right: 10px;
	}
	.main_container_right {
		width: 100%;
		display: block;
		margin-left: 0;
		margin-right: 0;
	}
	#animation_container {
		float: none !important;
		margin: 80px auto 0 auto;
		display: block;
	}
	video {
	object-position: center top;
	}
	.icons {
			width: calc(100% - 40px);
	}
	.icons_mobile {
	    margin-top: 80px;
	}
	.videooverlay h1, .videooverlay h2 {
	    width: 80%;
	}
	h1 {
	   font-size:50px;
	}
	h2 {
	   font-size:30px;
	}
}

@media only screen and (max-width: 650px), only screen and (max-device-width: 650px) {

	.intro_text { margin-top: 0; }
	.vertical_line {
		left:0;
	}
	.flow_step_left, .flow_step_right {
		width: calc(100% - 30px);
		float: none;
		display: block;
		text-align: left;
		padding-right: 0;
		padding-left: 30px;
		background-position: top left;
	}
	.flow_step_left {
		background-image: url('../images/art_02.png');
	}
	.nav_content {
		display: none;
	}
	.nav_content_mobile {
		display: block;
	}
	.hobby_container_middle {
		margin-right: 0;
	}
	.hobby_container {
		width: 100%;
 		margin: 0 0 45px 0;
	}
}

@media only screen and (max-width: 450px), only screen and (max-device-width: 450px) {
    h1 {
        font-size:40px;
    }
    h2 {
        font-size:20px;
    }
}