/* ==========================================================================
   General styles
   ========================================================================== */
   
body,
html {
  height: 100%;
  overflow: auto;
}

body {
  font-family: 'Oxygen', "Segoe UI", "Helvetica Neue Light", Helvetica, sans-serif;
  background: #333 url(../img/bg.png) center center no-repeat fixed;
  -webkit-background-size: cover;
  background-size: cover;
  color: #fff;
  font-weight: 300;
  text-shadow: 0px 0px 10px rgba(150, 150, 150, 0.6);
}

a:hover { text-decoration: none; }

img { max-width: 100%; }

.logo {
	

	
}

.container {
	
margin-top: -50px;
}

.lista {
	
	font-size:20px;
}


/* ==========================================================================
   Progress bar
   ========================================================================== */
   
.progress {
  overflow: hidden;
  margin-bottom: 0;
  background-color: transparent;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.progress-bar {
  background-color: #bea882;
  color: rgba(0, 0, 0, 0.8);
  text-align: right;
  padding-right: 2em;
}

.fa-mail {
  background-image: url(../img/mail.png);
}

/* ==========================================================================
   animation
   ========================================================================== */

.animation-container {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: hidden;
  z-index: -100;
  width: 100%;
}

.clouds {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background: transparent url(../img/clouds_3.png) repeat-x 50% 50%;
  -webkit-background-size: cover;
  background-size: cover;
  -webkit-animation: clouds 100s linear 0s infinite both;
  -moz-animation: clouds 100s linear 0s infinite both;
  -o-animation: clouds 100s linear 0s infinite both;
  animation: clouds 100s linear 0s infinite both;
}
 @-webkit-keyframes clouds {
 from {
 background-position: 0 50%, 50% 50%;
}
 to {
 background-position: -150em 50%, 50% 50%;
}
}
 @-moz-keyframes clouds {
 from {
 background-position: 0 50%, 50% 50%;
}
 to {
 background-position: -150em 50%, 50% 50%;
}
}
@-o-keyframes clouds {
 from {
 background-position: 0 50%, 50% 50%;
}
 to {
 background-position: -150em 50%, 50% 50%;
}
}
 @keyframes clouds {
 from {
 background-position: 0 50%, 50% 50%;
}
 to {
 background-position: -150em 50%, 50% 50%;
}
}

/* ==========================================================================
   Top Header styles
   ========================================================================== */
   

.top-header { margin: 3em 0 1.5em; }

.top-header h1 {
  font-size: 2.618em;
  font-weight: 400;
}

/* ==========================================================================
   social media styles
   ========================================================================== */
   
.social { padding-bottom: 3em; }

.social p {
  font-size: 1.5em;
  color: #7A7A81;
}

.social-icons {
  list-style: none;
  padding-left: 0;
}

.social-icons li {
  display: inline-block;
  padding-right: 1em;
}

.social-icons li:last-child { padding-right: 0; }

.social-icons a { color: #c5a46a; }

.social-icons a:hover { color:#c5a46a ; }  /*#bea882*/

.fa-2x { font-size: 1.5em; }

/* ==========================================================================
   Small devices (tablets, 768px and up)
   ========================================================================== */

@media (min-width: 768px) {

.top-header { margin: 7.5em 0 1.5em; }

.top-header h1 {
  font-size: 3.236em;
  font-weight: 700;
  text-transform: uppercase;
}
}

/* ==========================================================================
   Medium devices (desktops, 992px and up)
   ========================================================================== */

@media (min-width: 992px) {

.top-header { margin: 13.5em 0 3em; }

.top-header h1 { font-size: 4.236em; }
}

/* ==========================================================================
   Medium devices (desktops, 992px and up)
   ========================================================================== */

@media (max-width: 400px) {

.container {
	
	margin-top: -20px;

	
}

	.logo {
		
		height: 110px;
		width: 110px;
		
	}

	.lista {
	
	font-size:15px;
	color:#8a5a05;

/*#8a5a05*/
}

#lista {

	
}
#mail {
	
	margin-top: -12px;
}

}