/*--Style for Learm Castellano--*/
/*-- Valid for the whole page --*/
*{
	font-family: "Segoe UI", "vivaldi", "Edwardian Script ITC", "Lucinda Sans", Verdana, "sans serif";
	font-size: 16px;
	color: #000;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #ffcc33;
}
	
#wrapper {
	max-width: 1000px;
	min-height: 100vh;
	margin: 0 auto;
	
	/*--Primary grid --*/
	display: grid;
	grid-template-areas: 
		"header"
		"menu"
		"content"
		"footer";
	
	grid-template-columns: 1fr; /*--1 fraction, means 100%--*/
	grid-template-rows: 100px				/*--header hight--*/
						minmax(50px, auto)	/*--menu hight--*/
						minmax(300px, auto)	/*--content hight--*/
						minmax(100px, auto); /*--footer hight--*/
	background-color: #0066cc; /*-- blue indigo --*/
	border-style: solid;
	border-color: black;
	border-width: 1px;
}

/*----------------------------HEADER--------------------------*/
header{
	grid-area: header;
	width: 100%;
	border-style: hidden hidden solid hidden;
	border-width: 1px;
	
		/*---Sub grid set up ---*/
	display: grid;
	grid-template-areas: 
		"site-name icon";
	grid-template-columns: 1fr 0.2fr;
	grid-template-rows: 1fr;
}

header h1{
	grid-area: site-name;
	color: #ffcc33;
	font-family: "Edwardian Script ITC";
	font-size: 5em;
	text-align: center;
}

img {
	grid-area: icon;
}

/*----------------------------NAVEGATION ---------------------*/
nav {
	grid-area: menu;
	background-color: #66ccff;
}

    /*-----flex set-up------*/
#navigation {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

   /*------format flex box-----*/
#navigation section{
	width: 110px;
	height: 140px;
	background-color: #ffcc33;
	
	margin:1em 0;
	text-align: center;
	border-radius: 10px;
	
}

a{
	text-decoration: none;
	color: #0066cc;
	text-align: center;
	display: block;
	padding: 0.1em;
	font-weight: bold;

}
 .fig {
	 padding: 0px 5px 5px 5px;
 }

a:hover {
	color: #ffcc33;
	background: #990000;
	border-radius: 10px;
}

/*-----------------------------FOOTER-----------------------------*/

footer{
	grid-area: footer;
	/*--width: 1fr;--*/
	padding: 0;
	
	/*--Sub grid set up -*/
	display: grid;
	grid-template-areas:
		"map contact media";
	grid-template-columns: 1fr 1fr 1fr;
}

/*---footer left----------*/
#left{
	grid-area: map;
	background-color: #66ccff;
	border-style: hidden solid hidden hidden;
	border-width: 0px;
	padding-top: 1em;
}

#left a{		
		color: #0066cc;
		font-weight: bold;	
		line-height: 1;
}

#left ul {
	list-style-type: none;
}
#left a:hover {
	color: #ffcc33;
	background: #990000;
}

/*-------footer contact------------*/
#contact {
	grid-area: contact;
	background-color: #ffcc33;
	border-style: hidden solid hidden hidden;
	border-width: 0px;
	align-content: center;
	text-align: center;
}
#contact section p{
	color: #0066cc;
	font-weight: bold;
	padding: 10px;
	

}
	/*-----Footer media ----*/
#media{
	grid-area: media;
	background-color: #66ccff;
	
	/*------format media flex box-----*/
	
	display: flex;
	flex-direction: row;
	justify-content: center; 
}

#media section{
	align-content: center;
}

.icon-headding{
	display: none;
}

/*-----------------------------------HOME -------------------------------*/

#home h2 {
	text-align: center;
	color: #ffcc33;
	font-size: 30px;
}

#spanish-map {
		width: 250px;
		height: 239px;
		float:left;
		margin-left: 0px;
		margin-bottom: 0px;
}

#home p {
	color: white;
	margin: 10px;
}

img {
	float: left;
	margin: 10px;
}

/*-----------------------------------COURSES -------------------------------*/

#courses h2 {
	padding: 5px;
	font-size: 1.8em;
	color: #ffcc33;
	text-align: center;
}

#courses h3 {
	padding-left: 1em;
	font-size: 1.5em;
	color: #ffcc33;
}

#courses ul {
	padding-left: 3em;
	padding-bottom: 0.5em;
}

#courses li {
	color: white;
}

/*-----------------------------------TIMETABLES -------------------------------*/

#terms {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

	/*--------format terms -------------*/

#schedule h2 {
	padding: 5px;
	font-size: 1.8em;
	color: #ffcc33;
	text-align: center;
}

#terms section {
	width: 100px;
	height: 80px;
	background-color: #ffcc33;
	border: 1px black solid;
	border-radius: 0px;
	box-shadow: 5px 5px 5px;
	text-align: center;
	padding: 0px;
	margin:1em 0;
}
#terms h3 {
	color: #0066cc;
	text-decoration: underline;
}
	
#terms p{
	color: #0066cc;
}
	
	/*--------format Timetable morning -------------*/
	
#morning {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#morning section {
	width: 160px;
	height: 140px;
	background-color: #ffcc33;
	border: 1px black solid;
	border-radius: 0px;
	box-shadow: 5px 5px 5px;
	text-align: center;
	padding: 0px;
	margin:1em 0;
}
#morning h3 {
	color: #0066cc;
}

.time {
	color: #0066cc;
	text-decoration: underline;
	padding-bottom: 2px;
}

#morning p {
	color: #0066cc;
	height: 25px;

}

.beginners{
	font-weight: bold;
	padding-top: 40px;
}

/*--------format Timetable evening -------------*/
#evening {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#evening section {
	width: 160px;
	height: 140px;
	background-color: #ffcc33;
	border: 1px black solid;
	border-radius: 0px;
	box-shadow: 5px 5px 5px;
	text-align: center;
	padding: 0px;
	margin:1em 0;
}

#evening h3{
	color: #0066cc;
}


#evening p {
	color: #0066cc;
	height: 25px;

}

/*-----------------------------------APPLLICATION FORM -------------------------------*/

#application h2 {
	padding: 5px;
	font-size: 1.8em;
	color: #ffcc33;
	text-align: center;
}

#app-form { 
	width: 75%; 
	height: auto; 
	margin: 0 auto; 
	background: #0066cc; 
	padding: 1em; 
	/* border: 1px solid black; */
}


fieldset { 
	width: auto;
	padding: 1em; 
	background: #66ccff; 
	
}

legend { 
	width: 25%; 
	height: auto; 
	background: #ffcc33; 
	font-size: 1em; 
	padding: 0.5em; 
	color: #0066cc;
	font-weight: bold; 
}

label { 
	width: 11em; 
	display: inline-block;
	margin: 0.3em 0;
} 

#subject {
	width: 185px;	
}

#reasons {
	width: 185px;
}

#course {
	width: 185px;

}

#time {
	width: 185px;
}

#send {
	padding: 1% 0% 0% 31%;
}

/*-----------------------------------TRANSLATION -----------------------------------*/

#translation h2 {
	padding: 5px;
	font-size: 1.8em;
	color: #ffcc33;
	text-align: center;
}

#translation { 
	width: 70%; 
	height: auto; 
	margin: 0 auto; 
	background: #0066cc; 
	padding: 1em; 
	/* border: 1px solid black; */
}

#quote { 
	width: 35%; 
	height: auto; 
	background: #ffcc33; 
	font-size: 1em; 
	padding: 0.5em; 
	color: #0066cc;
	font-weight: bold; 
}

#topic {
	width: 185px;
}

/*-------------------------MEDIA QUERIES-------------------------------------*/
/*---------------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
	#wrapper{
	grid-template-rows: 70px;  /*--header hight reduced from 100px to 70 px--*/
}
		/*---------------- header-------------*/							
	
		/*---Sub grid set up ---*/
	header {

	grid-template-areas: 
		"site-name";
	grid-template-columns: 1fr;
}
	header h1{	
	font-size: 3em;	
}
	header img {
	display: none;
}
		/*------------- navigation -----------*/

	#navigation {
	/* This is the flex box inside nav for mobile menu layout (column) */
	flex-direction: column;	
}
	#navigation section{
	width: 130px;
	height: 25px;
}
 .fig {
	 display: none;
 }
	
	/*--------Footer------------------------*/

	footer {	
	/*--Sub grid set up -*/
		grid-template-areas:
		"map"
		"contact"
		"media";
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr;
}

#left{

	padding-bottom: 1em;
}


    /*------APPLLICATION FORM ---------------*/

label { 
	display: flex;
} 

}