/* FIREFOX HACKS ----------------------------------------------------------------------------------- */

nav, x:-moz-any-link, x:default {
    margin-bottom: 10px;
}

main img, x:-moz-any-link, x:default {
    margin-bottom: 10px;
     padding-bottom: 10px;
}
@-moz-document url-prefix() {

nav {
  margin-bottom: 10px;
}

main img {
  margin-bottom: 10px;   
  padding-bottom: 10px;
}

}


/* GERAL STYLE ----------------------------------------------------------------------------------- */

body {
  color:#0000;
  background:#FFFFFF;
  margin:auto;
  font-family: Helvetica, Arial, sans-serif;
}

#container {
  margin:0 auto;
  width:55%;
  height:100%;
  overflow:hidden;
  position:relative;
}

header {
  margin: auto;  
  font-size: 2rem;
  color: #666;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}

nav {
  color: #666;
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

main {
  color: #666;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 50px;
  text-align: justify;
}

main img {
  width: 100%;
  margin-bottom: 10px;   
  padding-bottom: 10px;
}

figure img {
  width: 100%;
  margin: 0;
  padding: 0;  
}


form { 
    margin: 0 auto;
     }


#formulario form {
  width:100%;

}

a {
  color: #666;
  text-decoration: none;
  display: block;
  padding: 10px;
 }
 
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 20px 30px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  color: #000;
}

footer {
	position: relative;
	clear: both;
	height: auto;
	text-align: center;
	margin: 10px;
    padding: 10px;
} 





/* MEDIA QUERIES ----------------------------------------------------------------------------------- */

/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

#container {
  margin:0 auto;
  width:100%;
  height:100%;
  overflow:hidden;
  position:relative;
}

li {
  float: left;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 20px 10px;
  text-decoration: none;
}

}

/* Smartphones (landscape) ----------- */

@media only screen and (min-width : 321px) {

#container {
  margin:0 auto;
  width:100%;
  height:100%;
  overflow:hidden;
  position:relative;
}


}



/* Smartphones (portrait) ----------- */

@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/**********
iPad 3
**********/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* Desktops and laptops ----------- */

@media only screen  and (min-width : 1224px) {

#container {
  margin:0 auto;
  width:55%;
  height:100%;
  overflow:hidden;
  position:relative;
}


}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}