/*--------------------------------------------------------------
Layouts
--------------------------------------------------------------*/
html {
font-family: 'Lato', sans-serif,'verdana';

}

body {
	margin: 0 auto;
 font-family: cagliostro;
  max-width: 90%;
 

}

strong { font-weight: normal; }

#title{   max-width: 80%; margin: 0 auto}

h1 {margin-top: 1em; font-family: cagliostro;}

header { margin: 0; display: flex; flex-wrap: wrap; flex-direction: column; flex-flow:wrap-start; align-items: center;  }

header div { flex: auto; width: 80%; margin:.5vh; margin-bottom: 3em; }

header div img { width: 100%;  }

figure {max-width: 100%; background-color: white; border: 1px solid grey;  padding:0.6em 0.7em  1em 0.7em; text-align: center; margin: 0; border-radius: 3px;
box-shadow: 0 8px 6px -6px black;}

figcaption { padding: 10px ; }

.number { float: left; }


/*buttom top*/

#button-top { font-family: arial; z-index: 1; border-radius: 50%; font-family:arial; background: rgba(0, 0, 0, 0.6);  width: 25px;
    height: 27px; text-align: center;  padding: 10px 22px 15px 5px;  font-size: 1.5em; position: fixed;  bottom: 10px;
    right: 10px; z-index: 1}

  #button-top a { text-decoration: none; }

  #button-top a:visited {-webkit-text-decoration: color: ;text-decoration: color: ;}

.color-buttom {color: white; text-align: center;padding-left: px;	 font-size: 1.1em;  }

/*END buttom top*/

.backhome { float: right;  border: 1px solid grey;  }

.backhome a { text-decoration: none; font-size: 0.7em; padding: 0.6em; }

.backhome a:hover { transition: all 0.3s ease 0s; padding: 0.7em; }

.backhome a:visited { color: grey; }


}

#footer {
  text-align: center;
}

#icon {
  padding: .4em 1em;
  text-align: center;
  background: #fff;
  height: 3em;
  display: flex;
  justify-content:center;
  color:#fff;
  align-items: center;
}


/* ICONS*/

#icon li, a {text-decoration: none;list-style: none; padding: 10px; color:black;}

.icon-facebook2:before { content: "\ea91";font-size: 20px; color:black;}

.icon-youtube:before { content: "\ea9d";font-size: 20px; color:black;}

.icon-instagram:before { content: "\ea92";font-size: 20px; color:black;}

.icon-500px:before { content: "\eaab";font-size: 20px; color:black;}




/*END buttom top*/

/* media query*/

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

body {max-width: 100%; background-color: black; }
#title{   max-width: 100%; margin: 0 auto}
header div { margin: 0; width: 100%; margin-bottom: 0em; }


header { padding: px; }

figure {max-width: 100%; background-color: white;border:1px 0px 1px 0px solid grey;  padding:0.6em 0.6em  2em 0.6em; text-align: center; margin: 0; border-radius: 0px;
box-shadow: 0 8px 6px -6px black; font-size: 0.8em;}

h1 { font-size: 1.2em; color: white; margin:1em; margin-top: 1.1em; text-align: center;}
p { font-size: 0.7em; color: white; text-align: center; }


.backhome { float: none; display: block;  position: fixed; top: 0px; left: 0px; border: 1px solid black; border-radius: 0px 0px 5px 0px; top: 5px;  }

.backhome a { font-size: 0.5em; color: black}

.backhome a:visited {color: black}


/*buttom top*/


.color-buttom {color: white;	  }

/*END buttom top*/

#footer p {color: black; background-color: #fff; height: 3em; margin: 0px;text-align: center;}

#icon { background-color: white; height: 4em; }


#button-top { font-family: arial; z-index: 1; border-radius: 50%; font-family:arial; background: rgba(0, 0, 0, 0.6);  width: 10px;
    height: 12px; text-align: center;  padding: 10px 22px 15px 5px;  font-size: 1em; position: fixed;  bottom: 10px;
    right: 10px; z-index: 1}

    .color-buttom {position: fixed;  bottom: 17px;
    right: 19px; }

    .icon-facebook2:before { content: "\ea91";font-size: 20px; color:black;}

.icon-youtube:before { content: "\ea9d";font-size: 20px; color:black;}

.icon-instagram:before { content: "\ea92";font-size: 20px; color:black;}

.icon-500px:before { content: "\eaab";font-size: 20px; color:black;}




}