body {

	font: normal 0.9em  'Helvetica Neue', sans-serif;
	display: -webkit-flex;

	display: flex;

	-webkit-flex-flow: row wrap;

	flex-flow: row wrap;

	align-items: center;
	justify-content: center;
	background-color: #fff;
 }



h1  { 
	font-size:2.5em;
	color: #fff;
	margin:0.5em 0 0 1em;
    }


.noir  { 
	color: #333;
    }

#redd  { 
	color: #fff;
	background-color: #e60;
	padding: 1em;

    }

h2 {

	color: #fff;
	font-weight: normal;

	font-size: 1.8em;

	margin:0.7em 0 0 0.9em;

 
}




  article h3  { 

	font-size:1.5em;
	font-weight:normal;
	letter-spacing: 0.03em;
	margin:0;
    }

#topreserva h3  { 
    margin-top:2em;
    }


h4 {

    color: #e40; 
	font-size:1.3em;
	font-weight:normal;
	letter-spacing: 0.03em;
	margin:2em 0 1em 0;
 
}

#andmalaga h4 {

    color: #333; 
	font-size:1.3em;
	font-weight:normal;
	letter-spacing: 0.03em;
	margin:2em 0 1em 0;
 
}




h5 {

	font-size:1.1em;
	color: #e40;
 
}


table {width: 100%;} th { background-color: #666; color: #fff; } tr { background-color: #fffbf0; color: #000; } tr:nth-child(odd) { background-color: #e4ebf2 ; } td { padding: 0.5em; }

#contact td { width: 50%; padding: 1em; }

#prec table  { width: 100%; border-collapse:collapse; } #prec td { text-align: center; padding: 0.5em; border:1px solid #333; background-color: #fff; }  #prec th { color:#333; text-align: center; background-color: #e4ebf2; padding: 0.5em; border:1px solid #333; }

#precc  {    display:none; }


.grup  {    color:#333; font-weight:normal; }

 

    #parentbox { 
	display: flex ;
	width: 1021px;
	border: thin none #eee; 
	flex-direction: row;
        flex-wrap: wrap;
        box-shadow: 6px 0 9px #777;
	align-items: center;
	justify-content: center;
	background-color: #eee;
    }




      header, nav, article, section, footer {

	border: 1px none;
	margin: 1px 0 1px 0;

	-webkit-flex: 1 100%;

	flex: 1 100%;

 }





#empresas {

	background: url(img/header-empresas.jpg) #eee no-repeat top left;
	height: 400px; 
	padding: 0;

	border-color: #ccc;

 }


#aprendeespanol {

	background: url(img/header-cursoespanol.jpg) #eee no-repeat top left;
	height: 400px; 
	padding: 0;

	border-color: #ccc;

 }


#cursoingles {

	background: url(img/header-cursoingles.jpg) #eee no-repeat top left;
	height: 400px; 
	padding: 0;

	border-color: #ccc;

 }
#cursofrances {

	background: url(img/header-cursofrances.jpg) #eee no-repeat top left;
	height: 400px; 
	padding: 0;

	border-color: #ccc;

 }
#extranjero {

	background: url(img/header-extranjero.jpg) #eee no-repeat top left;
	height: 400px; 
	padding: 0;

	border-color: #ccc;

 }
#cursoaleman {

	background: url(img/header-cursoaleman.jpg) #eee no-repeat top left;
	height: 400px; 
	padding: 0;

	border-color: #ccc;

 }
#activities {

	background: url(img/header-activities.jpg) #eee no-repeat top left;
	height: 400px; 
	padding: 0;

	border-color: #ccc;

 }
#reserve {

	background: url(img/header-reserve.jpg) #eee no-repeat top left;
	height: 400px; 
	padding: 0;

	border-color: #ccc;

 }





#language	{
    display:block;
    margin:3.8em 0 0 3em;
 }

.gruza  { 
       font-size:0.8em;
       color:#fff;
       text-decoration:none;
       margin:0 0 0 60em;
	padding: 0.1em 0.2em;
	background: #369;
	opacity: 0.5;
    }

#ingles	{
	background: url(img/bg-ingles.jpg) no-repeat top left;
 }

#aprendealeman	{
	background: url(img/bg-cursoaleman.jpg) no-repeat top left;
 }
#aprendefrances {

	background: url(img/bg-cursofrances.jpg) #eee no-repeat bottom left;
 }


nav {
	background: #369;
	height: 50px; 
	padding: 0 0 0 1.5em;

	border-color: #ccc;

	margin-bottom: 0;
 }


  #menu   { 
	font-size:0.9em;
	color:white;
	font-weight:normal;
        margin: 1.3em 0 0 0;
	padding:0 0 0 0;
        border:1px none white;
        display: block;
    }
  #menu a   { 
	font-size:0.9em;
	color:white;
	font-weight:normal;
	text-decoration:none;
    }
  #navig  { 
    display:none;
    }


    #getinfo {
    margin: 0.8em 0 0 1.5em;
    padding: 0.3em 0;
    text-decoration: none;
    border:1px none navy;
	width: 350px;
	height: 215px;    

	display:block;
 }



    #getinfo p {

	font-weight: bold;

	font-size: 110%;

	width: 90%;

	margin-left: 7%;

	margin-bottom: 15px;
 
}



    #topreserva {
    margin: 0.8em 0 0 1.5em;
    padding: 0.3em 0;
    text-decoration: none;
    border:1px none navy;
	width: 350px;
	height: 215px;    

	display:block;
 }



    #topreserva p {

	font-weight: normal;

	font-size: 110%;

	width: 80%;

	margin-left: 7%;


 
}





form {

	width: 20em;
	color:white;
  }


input,
label.input {

	float: left;

	width: 40%;
}


input {
	margin: 0 0 1.5em .2em;

	padding: .2em .5em;

	background-color: #fffbf0;

	border: 1px solid #e7c157;
}


label.input {
	text-align: right;

	line-height: 1.5;
}


label.input::after {

	content: ": ";
}


button {

	float: right;

	margin-top:1em;
	width: 30%;
 
}



#contact form {

	width: 100%;
	color:#333;
  }



#contact input {
 
        margin:0;
        padding:0.5em;
	width: 90%;
 
}

#contact select {
 
        margin:1em 0 0 0;
        padding:0.5em;
	width: 100%;
 
}

#contact button {

	clear: both;

	width:100%;
	height:3em;
 
}


.blue { display:none; }


article {

        min-width: 10em;
	background: #fff;
	margin: 0;
	padding: 3em;
	align-items: left;
	justify-content: left;
  border:1px none red;
 }

article p {

	padding: 0 1em;


 }



section {

        min-width: 10em;
	background: #fff;
	margin: 0;
	padding: 1em 0 0.7em 0;
	align-items: left;
	justify-content: left;
  border:1px none red;
 }

section a {

   color:#555;
   text-decoration:none;
 }

.seperate {
   float:left;
   font-size:1.2em;
   color:#999;
   margin:0 0 0 20px;
 }
.icophone {
 float:left;
 margin:4px 0 0 25px;
 }
.textphone {
   float:left;
   color:#555;
   margin:4px 0 0 5px;
 }
.icomail {
 float:left;
 margin:0 0 0 20px;
 }
.textmail {
 float:left;
 margin:4px 0 0 5px;
 }
.matelmail {
 font:16px Times New Roman, Times, serif;
 font-weight:bold;
 color:#999;
 text-decoration: none;
 }
.icosky {
 float:left;
 margin:2px 0 0 25px;
 }
.textsky {
   float:left;
   color:#555;
   margin:4px 0 0 5px;
 }


.bookit {

       float:left;
       margin:4px 0 0 20px;
 
}
.bookit a {

       font-size: 0.9em;
       color: #fff; 
       background: #f74;
       padding:0.2em 0.7em;
       text-decoration:none;
 
}

.icoface {
 float: left;
 margin:0 0 0 25px;
 }
.icotube {
 float:left;
 margin:0 0 0 25px;
 }
.icogram {
 float:left;
 margin:0 0 0 25px;
 }



.top20 {

margin-top:20px;
 }
.top30 {

margin-top:30px;
 }



  #art {
    flex: 1 1 260px;
    align-self: center;
    max-width:260px;
    height: 300px;  
  }

  #art a {
 margin:0;
 display:block;
 color:#333;
 width: 260px;
 height: 300px;
 font-weight: normal;
 text-decoration:none;
  }

  #art p {

	padding: 0 1em;

	margin: 2em 0 0 0;
 }




#flright {

  float:right;
  margin:0 0 20px 30px;
 }
.flright {

  float:left;
  margin:0 40px 20px 0;
 }


#planempresa a {

       color: #eee; 
       background: #f74;
       padding:0.2em;
       text-decoration:none;
 
}






footer {

	color: #ddd; 
	padding: 0 0 0 1em; 
	background: #369;

	border-color: #ccc;

 }

#foomenu {

      text-align:left;
 }





footer a {

	color: #ddd; 
        text-decoration:none;
 }


.tfooter {

	margin-top: 5em;
 }




@media screen and (max-width: 640px) {

section {

	padding: 1em 0 1.2em 0;
 }

.icomail {
 clear: both;
 margin:0 0 0 25px;
 }
.icosky {
 clear: both;
 margin:5px 0 0 25px;
 }
.textsky {
   margin:7px 0 0 5px;
 }


.bookit {
       clear: both;
       margin:20px 0 0 0;
       background: #f74;
       width:100%;
       text-align:center;
 }
.bookit a {
	padding: 1em;
        border:1px none white;
        display: block;
 }
.icoface {
 clear: both;
 margin:20px 0 0 25px;
 }
.icotube {
 float:left;
 margin:20px 0 0 45px;
 }
.icogram {
 float:left;
 margin:20px 0 0 45px;
 }

      }


@media screen and (max-width: 820px) {

      header, nav, article, aside, footer {
        -webkit-flex: 1 100%;
        flex: 1 100%;
      }


    #parentbox { 
	width: 100%;
	align-items: left;
	justify-content: left;
    }

  nav h2  { 
    display:none;
    }



.gruza  { 
    display:none;
    }

  #menu  { 
    display:none;
    }
  #navig  { 
	font-size:0.9em;
	color:white;
	font-weight:normal;
        margin: 1.3em 0 0 0;
	padding:0 0 0 0;
        border:1px none white;
        display: block;
    }
  #navwi  { 
	width: 22.5em;
    }

article {

	padding: 2em 1em;
 }


                    }