/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media ( min-width : 320px) and (max-width: 480px) {
.our_methodology_text_container_two_columns{
	width: 100%;
}
.our_methodology_text_container_first_columns{
	width: 100%;
}
.our_methodology_text_container_second_columns{
	width: 100%;
}
#homapage_mobile_sidenav_buttons_container{
	width: 100%;
	display: inline-block;
	padding-top: 5%;
	padding-bottom: 10%;
	float: left;
}
.submission_guidelines{
	width: 95%;
}
.video_container_two_rows{
	width: 90%;
}

#homapage_mobile_videos_wrapper{
	width:100%;
	padding: 2%;
	text-align: center;
}
.homepage_mobile_video_width_controller{
	width: 80%; 
}

	.home_main_bg {
		background-image:
			url("../../resources/images/matilda-background-mobile-portrait.jpg");
	}
	#homapage_buttons_container {
		color: white;
		width: 100%;
		display: inline-block;
		text-align: center;
		height: 35%;
		position: relative;
	}
	#homepage_center_container {
		height: 40%;
		display: inline-block;
		width: 100%;
	}
	#side_space_holder {
		width: 4%;
		height: 100%;
		float: left;
	}
	.logo_div {
		display: inline-block;
		width: 90%;
		height: 100%;
	}
	.homepage_button {
		width: 90%;
		float: left;
		border-radius: 10px;
		margin: 5px;
	}
	.logo_background {
		background: url("../../resources/images/southerncross-transparent.png")
			center center no-repeat;
		background-size: 300px 150px;
		height: 100%;
		min-height: 100%;
	}
	.container_height {
		height: 750px;
	}
	
	#about-matilda-wrapper{
		width: 90%;
		margin: 0 auto;
	}
	#our_logo_text{
	width: 100%;
	text-align: left;
	float: left;
	}
	#our_logo_image{
		width:100%;
		float: left;
	}
	#our_logo_image img{
		width: 90%;
	}
	.problem_container {
		margin-bottom: 50px;
		width: 90%;
		margin: 0 auto;
		padding-top: 100px;
		text-align: left;
	}
	.problem_container p {
		width: 100%;
	}
	.tooltip .tooltiptext {
		visibility: hidden;
		width: 220px;
		background-color: #0c304a;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px 0;
		/* Position the tooltip */
		position: absolute;
		z-index: 1;
		bottom: 100%;
		left: 50%;
		margin-left: -60px;
		opacity: 0;
		transition: opacity 1s;
	}
	.performance_table_container_width {
		width: 100%;
	}
	.graph_info_wrapper{
	width: 100%;
	float: left;
	display: inline-block;
}
	.graph_side_navigator_style {
		display: inline-block;
		margin: 5% auto;
		width: 80%;
		float: none;
	}
	.graph_inner_container {
		width: 100%;
		float: left;
		text-align: center;
	}
	.graph_inner_container:after {
		content: "";
		display: block;
		padding-bottom: 100%;
	}
	.graph1 {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	#graph_title {
		width: 90%;
		margin: 0 auto;
		display: inline-block;
	}
	#graph_title h2 {
		width: 100%;
		max-width: 100%;
		float: left;
		margin: 0;
		padding: 0;
	}
	
/* 	USER DASHBOARD  STYLE*/
	#dashboard_container{
		width: 100%;
		padding-left: 2%;
		padding-right: 2%;
		padding-top: 10px;
		text-align: center;
		display: inline-block;
	}
	#dashboard_summary{
		width: 100%;
		text-align: left;
		display: inline-block;
		float: left;
		border-bottom: 5px solid gray;
		margin-bottom: 5%;
	}
	#dashboard_summary h2, #dashboard_summary ul li{
		padding-top: 0;
	    padding-bottom: 0;
	}
	#dashboard_summary h1{
		text-align: center;
	}
	#user_jobs{
		width: 100%;
		display: inline-block;
		float: left;
	}
	#user_jobs h1, #user_jobs h2, p{
		text-align: center;
	}	
	#user_jobs h2{
		padding-bottom: 0;
		padding-top: 0;
	}	
	
	/* CSS	for tutorial page*/
	.left_right_image{
		width: 500px; 
		height: 400px;
	}
	.left_right_sticky_div{
		display:none;
	}
	.central_text_div{
		width: 90%;
		text-align: justify;
	  	text-justify: inter-word;
	}
	/* CSS	for tutorial end*/
}
/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media ( min-width : 481px) and (max-width: 767px) {
.submission_guidelines{
	width: 80%;
}
.our_methodology_text_container_two_columns{
	width: 80%;
}
.our_methodology_text_container_first_columns{
	width: 100%;
}
.our_methodology_text_container_second_columns{
	width: 100%;
}

	.home_main_bg {
		background-image:
			url("../../resources/images/matilda-background-mobile-portrait.jpg");
	}
	#homapage_buttons_container {
		color: white;
		width: 100%;
		display: inline-block;
		text-align: center;
		height: 35%;
		position: relative;
	}
	#homepage_center_container {
		height: 40%;
		text-align: center;
		width: 100%;
	}
	#side_space_holder {
		width: 4%;
		height: 100%;
		float: left;
	}
	.logo_div {
		display: inline-block;
		width: 90%;
		height: 100%;
	}
	.homepage_button {
		width: 45%;
		float: left;
		border-radius: 10px;
		margin: 5px;
	}
	.logo_background {
		background: url("../../resources/images/southerncross-transparent.png")
			center center no-repeat;
		background-size: 300px 150px;
		height: 100%;
		min-height: 100%;
	}
	.container_height {
		height: 600px;
	}
		#about-matilda-wrapper{
		width: 90%;
		margin: 0 auto;
	}
	#our_logo_text{
	width: 100%;
	text-align: left;
	float: left;
	}
	#our_logo_image{
		width:100%;
		float: left;
	}
	#our_logo_image img{
		width: 90%;
	}
	.problem_container {
		margin-bottom: 50px;
		width: 90%;
		margin: 0 auto;
		padding-top: 100px;
		text-align: left;
	}
	.problem_container p {
		width: 100%;
	}
	.tooltip .tooltiptext {
		visibility: hidden;
		width: 220px;
		background-color: #0c304a;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px 0;
		/* Position the tooltip */
		position: absolute;
		z-index: 1;
		bottom: 100%;
		left: 50%;
		margin-left: -60px;
		opacity: 0;
		transition: opacity 1s;
	}
	.performance_table_container_width {
		width: 100%;
	}
	.graph_info_wrapper{
	width: 100%;
	float: left;
	display: inline-block;
	}
	.graph_side_navigator_style {
		display: inline-block;
		margin: 5% auto;
		width: 80%;
		float: none;
	}
	.graph_inner_container {
		width: 100%;
		float: left;
		text-align: center;
	}
	.graph_inner_container:after {
		content: "";
		display: block;
		padding-bottom: 100%;
	}
	.graph1 {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	#graph_title {
		width: 90%;
		margin: 0 auto;
	}
	/* 	USER DASHBOARD  STYLE*/
	#dashboard_container{
		width: 100%;
		padding-left: 2%;
		padding-right: 2%;
		padding-top: 10px;
		text-align: center;
		display: inline-block;
	}
	#dashboard_summary{
		width: 100%;
		text-align: left;
		display: inline-block;
		float: left;
		border-bottom: 5px solid gray;
	}
	#dashboard_summary h2, #dashboard_summary ul li{
		padding-top: 0;
	    padding-bottom: 0;
	}
	#dashboard_summary h1{
		text-align: center;
	}
	#user_jobs{
		width: 100%;
		display: inline-block;
		float: left;
	}
	#user_jobs h1, #user_jobs h2{
		text-align: center;
	}	
	#user_jobs h2{
		padding-bottom: 0;
		padding-top: 0;
	}
		/* CSS	for tutorial page*/
	.left_right_image{
		width: 500px; 
		height: 400px;
	}
	.left_right_sticky_div{
		display:none;
	}
	.central_text_div{
		width: 90%;
		text-align: justify;
	  	text-justify: inter-word;
	}
	/* CSS	for tutorial end*/
} /* End Mobile Landscape Queries */
/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media ( min-width : 768px) and (max-width: 1024px) and (orientation:
	portrait) {
.submission_guidelines{
	width: 80%;
}
.our_methodology_text_container_two_columns{
	width: 80%;
}
.our_methodology_text_container_first_columns{
	width: 100%;
}
.our_methodology_text_container_second_columns{
	width: 100%;
}
	.home_main_bg {
		background-image:
			url("../../resources/images/matilda-background-mobile-portrait.jpg");
	}
	#homapage_buttons_container {
		color: white;
		width: 100%;
		display: inline-block;
		text-align: center;
		height: 35%;
		position: relative;
	}
	#homepage_center_container {
		height: 40%;
		text-align: center;
		width: 100%;
	}
	#side_space_holder {
		width: 4%;
		height: 100%;
		float: left;
	}
	.logo_div {
		display: inline-block;
		width: 90%;
		height: 100%;
	}
	.homepage_button {
		width: 45%;
		float: left;
		border-radius: 10px;
		margin: 5px;
	}
	.logo_background {
		background: url("../../resources/images/southerncross-transparent.png")
			center center no-repeat;
		background-size: 300px 150px;
		height: 100%;
		min-height: 100%;
	}
	.container_height {
		height: 650px;
	}
		#about-matilda-wrapper{
		width: 90%;
		margin: 0 auto;
	}
	#our_logo_text{
	width: 100%;
	text-align: left;
	float: left;
	}
	#our_logo_image{
		width:100%;
		float: left;
	}
	#our_logo_image img{
		width: 90%;
	}
	.problem_container {
		margin-bottom: 50px;
		width: 90%;
		margin: 0 auto;
		padding-top: 100px;
		text-align: left;
	}
	.problem_container p {
		width: 100%;
	}
	.tooltip .tooltiptext {
		visibility: hidden;
		width: 220px;
		background-color: #0c304a;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px 0;
		/* Position the tooltip */
		position: absolute;
		z-index: 1;
		bottom: 100%;
		left: 50%;
		margin-left: -60px;
		opacity: 0;
		transition: opacity 1s;
	}
	.performance_table_container_width {
		width: 100%;
	}
	.graph_info_wrapper{
		width: 100%;
		float: left;
		display: inline-block;
	}
	.graph_side_navigator_style {
		display: inline-block;
		margin: 5% auto;
		width: 80%;
		float: none;
	}
	.graph_inner_container {
		width: 100%;
		float: left;
		text-align: center;
	}
	.graph_inner_container:after {
		content: "";
		display: block;
		padding-bottom: 100%;
	}
	.graph1 {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	#graph_title {
		width: 90%;
		margin: 0 auto;
	}
	/* 	USER DASHBOARD  STYLE*/
	#dashboard_container{
		width: 100%;
		padding-left: 2%;
		padding-right: 2%;
		padding-top: 10px;
		text-align: center;
		display: inline-block;
	}
	#dashboard_summary{
		width: 100%;
		text-align: left;
		display: inline-block;
		float: left;
		border-bottom: 5px solid gray;
	}
	#dashboard_summary h2, #dashboard_summary ul li{
		padding-top: 0;
	    padding-bottom: 0;
	}
	#dashboard_summary h1{
		text-align: center;
	}
	#user_jobs{
		width: 100%;
		display: inline-block;
		float: left;
	}
	#user_jobs h1, #user_jobs h2{
		text-align: center;
	}	
	#user_jobs h2{
		padding-bottom: 0;
		padding-top: 0;
	}
		/* CSS	for tutorial page*/
	.left_right_image{
		width: 500px; 
		height: 400px;
	}
	.left_right_sticky_div{
		display:none;
	}
	.central_text_div{
		width: 90%;
		text-align: justify;
	  	text-justify: inter-word;
	}
	/* CSS	for tutorial end*/
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media ( min-width : 768px) and (max-width: 1024px) and (orientation:
	landscape) {
	.our_methodology_text_container{
		width: 90%; 
	}
	.home_main_bg {
		background-image:
			url("../../resources/images/matilda-background-mobile-portrait.jpg");
	}
	#homapage_buttons_container {
		color: white;
		width: 100%;
		display: inline-block;
		text-align: center;
		height: 10%;
		position: relative;
	}
	#homepage_center_container {
		height: 60%;
		text-align: center;
		width: 100%;
	}
	#side_space_holder {
		width: 4%;
		height: 100%;
		float: left;
	}
	.logo_div {
		display: inline-block;
		width: 90%;
		height: 100%;
	}
	.homepage_button {
		width: 23.5%;
		float: left;
		border-radius: 10px;
		margin: 5px;
	}
	.logo_background {
		background: url("../../resources/images/southerncross-transparent.png")
			center center no-repeat;
		background-size: 300px 150px;
		height: 100%;
		min-height: 100%;
	}
	.container_height {
		height: 500px;
	}
		#about-matilda-wrapper{
		width: 90%;
		margin: 0 auto;
	}
	#our_logo_text{
	width: 100%;
	text-align: left;
	float: left;
	}
	#our_logo_image{
		width:100%;
		float: left;
	}
	#our_logo_image img{
		width: 60%;
	}
	.problem_container {
		margin-bottom: 50px;
		width: 90%;
		margin: 0 auto;
		padding-top: 100px;
		text-align: left;
	}
	.problem_container p {
		width: 100%;
	}
	.tooltip .tooltiptext {
		visibility: hidden;
		width: 220px;
		background-color: #0c304a;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px 0;
		/* Position the tooltip */
		position: absolute;
		z-index: 1;
		bottom: 100%;
		left: 50%;
		margin-left: -60px;
		opacity: 0;
		transition: opacity 1s;
	}
	.performance_table_container_width {
		width: 100%;
	}
	.graph_info_wrapper{
		width: 100%;
		float: left;
		display: inline-block;
	}
	.graph_side_navigator_style {
		display: inline-block;
		margin: 5% auto;
		width: 60%;
		float: none;
	}
	.graph_inner_container {
		width: 100%;
		float: left;
		text-align: center;
	}
	.graph_inner_container:after {
		content: "";
		display: block;
		padding-bottom: 100%;
	}
	.graph1 {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	#graph_title {
		width: 90%;
		margin: 0 auto;
	}
	/* 	USER DASHBOARD  STYLE*/
	#dashboard_container{
		width: 100%;
		padding-left: 2%;
		padding-right: 2%;
		padding-top: 10px;
		text-align: center;
		display: inline-block;
	}
	#dashboard_summary{
		width: 100%;
		text-align: left;
		display: inline-block;
		float: left;
		border-bottom: 5px solid gray;
	}
	#dashboard_summary h2, #dashboard_summary ul li{
		padding-top: 0;
	    padding-bottom: 0;
	}
	#dashboard_summary h1{
		text-align: center;
	}
	#user_jobs{
		width: 100%;
		display: inline-block;
		float: left;
	}
	#user_jobs h1, #user_jobs h2{
		text-align: center;
	}	
	#user_jobs h2{
		padding-bottom: 0;
		padding-top: 0;
	}
		/* CSS	for tutorial page*/
	.left_right_image{
		width: 500px; 
		height: 400px;
	}
	.left_right_sticky_div{
		display:none;
	}
	.central_text_div{
		width: 90%;
		text-align: justify;
	  	text-justify: inter-word;
	}
	/* CSS	for tutorial end*/
}