// Importar estilos generales
@import "../../styles";
@import url(https://fonts.googleapis.com/css?family=Oswald:300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

$bg-color: #383B44;
$title-color: #fff;
$main-color: #3F8CD9;
$opacity: .3;

@function img($image){
  @return url('img/' + $image);
}

body {
  background : $bg-color;
}

h1 {
  color: rgba($title-color,.8);
}

.banner {
  width : 80%;
  height :500px;
  margin-left : auto;
  margin-right : auto;

  display : flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border : 1px solid $title-color;
  box-shadow: 0 5px 5px -5px #000;
  background : $main-color;

  position : relative;

  &:before {
    content : '';
    position : absolute;
    top : 0;
    width : 100%;
    height : 100%;
    background : img('city.jpg') center / cover;
    opacity: $opacity;
  }

  &__title,
  &__subtitle {
    margin : 0;
    text-transform : uppercase;
    color: $title-color;
    text-align : center;
    position : relative;
  }

  &__title {
    font-size : 4em;
    font-family : Oswald, 'sans-serif';
    font-weight : 300;
  }

  &__subtitle {
    font-size : 1.5em;
    letter-spacing: 0.1em;
    font-family : 'Open Sans', 'sans-serif';
  }
}