/* lato-300 - latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/lato-v23-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/lato-v23-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/lato-v23-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/lato-v23-latin-300.woff') format('woff'), /* Modern Browsers */
         url('../fonts/lato-v23-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/lato-v23-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
  }
  /* lato-regular - latin */
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/lato-v23-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/lato-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/lato-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/lato-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/lato-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/lato-v23-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
  }
  /* lato-700 - latin */
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/lato-v23-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/lato-v23-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/lato-v23-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/lato-v23-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/lato-v23-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/lato-v23-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
  }

html, body {font-family: 'Lato', sans-serif; font-weight: 400; font-size: 1em; color: #555; padding: 0 ;margin: 0;}
body {background-image: url(../media/background-image.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed;}

/****************************** Fixes ******************************/
.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}
.clear {clear: both;}
/*Internet Explorer*/
img{border: 0; display: block; padding:0px; border-spacing:0px; border-style:none; border-collapse: collapse; margin:0; overflow: hidden;}

/****************************** Typo ******************************/
a, a:link, a:visited {border-bottom: solid 1px #000; color: #000; text-decoration: none;}
a:hover {color: #000; border-bottom: solid 0px #000;}
h1 {font-size: 1.8em; color: #888; line-height: normal; font-family: 'Lato', sans-serif; font-weight: 300;}
p {font-family: 'Lato', sans-serif; font-weight: 300; font-size: 0.95em; line-height: 1.7em; text-align: left; list-style-type: square;}
ul li p {margin: 0;}

.bold {font-weight: 700;}
.italic {font-style: italic;}

#footer p {text-align: center;}
.footer-font a {text-align:center; color: #000; font-size: 0.95em; text-decoration: none; font-weight: 300; text-transform:uppercase; letter-spacing: 0.1em; border-bottom: solid 1px #000;}
.footer-font a:hover {text-decoration: none; border-bottom: solid 0px #000;}

/****************************** Divs ******************************/
.container > header {width: 250px; padding-top: 4em; padding-bottom: 4em; margin: auto;}

#content {width: 80%; background-color: #fff; padding: 5em 0 7em 0; margin: auto;}
#left {width: 32%; margin:0 3% 20px 15%; float: left;}
#right {width: 32%; margin:0 15% 20px 3%; float: left;}
#both {width: 70%; margin:0 15% 20px 15%; clear: both;}

#line {width: 70%; margin: 50px 15% 70px 15%; clear: both; border-bottom:1px solid rgba(0,0,0,0.1);}
#footer {width: 100%; text-align: center; margin: 100px auto 250px auto;}

#img-list {width: 90px; float: left; margin: 0 0 10px 20px;}
#img-list img {width: 90px;}

/****************************** Responsive ******************************/

@media (max-width: 900px) {
h1 {font-size: 2.5em;}
p {font-size: 1.3em;}    
#left{width:80%; margin:0px 10% 0 10%; clear:both}
#right{width:80%; margin:20px 10% 20px 10%; clear:both}
#line {width: 80%; margin:30px 10% 53px 10%; border-bottom: 2px solid rgba(0,0,0,0.1);}    
#both{width:80%; margin-left:10%; margin-right:10%; margin-bottom:20px; clear:both}
}