/* --- mobile-index.css --- */

@charset "UTF-8";


:root {
	/*--black-thin-outline: medium solid #000;*/
}

@media only screen and (max-width:46.25rem){
	#i_2_navbar{
		/* -- see central.css -- */
	}
	.c_1_container{
		display: grid;
		flex-wrap: wrap;
		grid-template-columns: 1fr 1fr;
		grid-template-rows:
		1fr 	/* header */
		0.313rem
		1fr 	/* products yapps */
		0.938rem
		1fr 	/* positions */
		0.938rem
		1fr 	/* task 1 */
		1fr 	/* task 2 */
		0.938rem
		1fr 	/* task 3 */
		1fr 	/* task 4 */
		0.938rem
		1fr 	/* description */
		1fr 	/* buttons */
		0.938rem
		1fr 	/* image */
		0.625rem
		1fr 	/* bottombar */
		1fr 	/* footer */
		0.313rem;
		grid-template-areas:
		"i_4_header i_4_header"
		". ."
		"i_5_products i_5_yapps"
		". ."
		"i_6_positions i_6_positions"
		". ."
		"i_5_task1 i_5_task1"
		"i_5_task2 i_5_task2"
		". ."
		"i_6_task3 i_6_task3"
		"i_6_task4 i_6_task4"
		". ."
		"i_10_description i_10_description"
		"i_10_buttons i_10_buttons"
		". ."
		"i_10_image i_10_image"
		". ."
		"i_7_bottombar i_7_bottombar"
		"i_8_footer i_8_footer"
		". .";
	}

	#i_4_header {
		display: flex;
		grid-area: i_4_header;
		flex-direction: row-reverse;
		background-color: #F0F0F0;
		transition: background-image 1s ease-in-out;
		background-image: url('header-logo.jpg');
		background-size : cover;
		background-repeat: no-repeat;
		background-position: center;
		border-bottom:#CCC medium solid;
		margin-bottom: 0.5rem;
		flex-wrap: wrap;
	}
	/* -- header description -- */
	#i_4_header > div > div > * {
		padding: 0.5rem;
	}
	#i_3_search {
		/*background: #EEE;*/
		/*width: 125px;*/
		/*height: 1.5rem;*/
		/*color: dimgrey;*/
		/*text-decoration: none;*/
		/*text-align: left;*/
		/*padding: 0 10px;*/
		/*margin: 1rem 4rem 0 0;*/
		/*opacity: .8;*/
		/*float: right;*/
		/*border: thin #FFF solid;*/
		/*border-radius: 0.5rem;*/

		width: 100%;
		height: 2rem;
		color: dimgrey;
		text-decoration: none;
		text-align: left;
		/* padding: 0 10px; */
		margin: 1rem 0 0 0;
		/* opacity: .8; */
		/* float: right; */
		border: thin var(--color-gray-3) solid;
		border-radius: 1rem;
	}
	#i_10_image{
		display: flex;
		/*background-color: #F0F0F0;*/
		grid-area: i_10_image;
		line-height: 7.5rem;
		justify-content: center;
	}
	.c_task_description, .c_project-description-format, .c_tech-stack-format{
		font-size: var(--font-14);
	}

}