@fonts-url: "fonts/";

@font-face {
  font-family: MyriadPro;
  src: url("@{fonts-url}Myriad-Pro_31655.ttf");
}
@font-face {
  font-family: MyriadPro;
  src: url("@{fonts-url}Myriad-Pro-Bold_31631.ttf");
  font-weight: bold;
}
@font-face {
  font-family: MyriadPro;
  src: url("@{fonts-url}Myriad-Pro-Light_31642.ttf");
  font-weight: lighter;
}
@font-face {
  font-family: AmericanTypewriter;
  src: url("@{fonts-url}ufonts.com_american-typewriter.ttf");
}
@font-face {
  font-family: AmericanTypewriter;
  src: url("@{fonts-url}ufonts.com_american-typewriter-bold.ttf");
  font-weight: bold;
}

@background-color: #f8f8fc;
@box-shadow: 0 0 14px 4px rgba(0, 0, 0, 0.06);
@standard-padding: 24px 5% 24px 5%;

/* layout */

.wrapper{
  display: flex;
  flex-direction: column;
  height: 759px;
  width: 100%;
  background-color: @background-color;
}

.wrapper-sm {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: @background-color;
}

.wrapper > *,
.wrapper-sm > *{
  border: 0;
  background-color: @background-color;
}

.wrapper {
  .header {
    padding-top: 69px;
    padding-bottom: 20px;
  }
  
  .content-wrapper {
    display: flex;
    height: 419px;
    flex-direction: row;
    margin: 0 93px 80px 93px;
    box-shadow: @box-shadow;
  }

  .content-map {
    height: 100%;
    width: 100%;
    flex: 78;
    border: none;
    padding: 0;
  }

  .content-info-panel {
    flex: 42;
    border: none;
  }

}

/* small size layout */

.wrapper-sm {

  .header {
    margin-top: 29px;
  }

  .content-wrapper {
    display: flex; 
    flex-direction: column;
    width: 100%;
    box-shadow: none;
    align-items: center;
    padding: 0 0 60px 0;
  }

  .content-map {
    flex: 1 100%;
    border: none;
    padding: 0;
    height: 100%;
    width: 100%;
  }

  .content-info-panel {
    flex: 1;
    border-radius: 0;
    width: 80%;
    position: relative;
    bottom: 100px;
    align-self: center;
    margin-top: 0px;
    margin-bottom: -100px;
    background-color: white;
    box-shadow: @box-shadow;
  }

}