@font-face {
  font-family: 'Roboto';
  src:  url('/fonts/RobotoCondensed-Regular.ttf') format('ttf');
}

@font-face {
  font-family: 'RobotoLight';
  src:  url('/fonts/RobotoCondensed-Light.ttf') format('ttf');
}

@font-face {
  font-family: 'RobotoBold';
  src:  url('/fonts/RobotoCondensed-Bold.ttf') format('ttf');
}

* {
  margin:0;
  padding:0;
  background-color:#333333;
  color:#cdcdcd;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
}

h2{
  font-family: 'RobotoBold', sans-serif;
  font-size:2em;
}

h3{
  font-family: 'RobotoBold', sans-serif;
  font-size:1.75em;
}

h4{
  font-family: 'RobotoBold', sans-serif;
  font-size:1.5em;
}

p {
  font-family:'RobotoLight', sans-serif;
}

@media (max-width: 575px) {
  body {
    width:100%;
    padding:5px 10Px;
  }
  header {
    width:100%;
    height:42px;

  }
  main {
    width:100%;
    height:auto;
  }
  footer {
    width:100%;
  }

@media (min-width: 576px) {

}

@media (min-width: 768px) {

}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {

}

@media (min-width: 1400px) {

}