/* global */
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css2?family=Special+Gothic+Expanded+One&display=swap');
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}

.flex-grid {
  display: flex;
}
.section-1 {
  flex: 1;
}

.section-2 {
  flex: 1;
}

body{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #101214;
    color: #7A7C80;
}

.background-image {
    background-image: url('media/images/banner.jpg');
    background-size: cover;
    min-height: 500px;
    min-width: 500px;
    z-index: 1;
    left: 0;
    right: 0;
    background-position: top, top;
    display: inline-block;
    background-repeat: no-repeat;
          -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
      mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

h1 {
    color: #fff;
    font-family: 'Special Gothic Expanded One' !important;
    font-weight: 400;
}

h2,.white{
    color: #fff;
}

a {
    color: #7A7C80;
    text-decoration: none;
}
/* section 1 */
.section-1{
    padding-top: 10vh;
    text-align: center;
    flex-direction: row;
}

.section-1 p{
    font-size: 1.1rem;
    padding-bottom: 10px;
    margin:0;
}

.section-1 h2{
    font-size: 1.7rem;
    margin-bottom: 10px;
}

.section-1 a{
    font-size: 1.5rem;
    padding: 10px;
}
/* section 2 */
.section-2{
    padding-top: 1vh;
    width: 60%;
    flex-direction: row;
}

.section-2 h2{
    font-size: 1.7rem;
    margin-bottom: 10px;
}

.section-2 p{
    font-size: 1.1rem;
    padding-bottom: 5px;
    margin:0;
}

.section-2 a{
    display: block;
    padding: 5px;
    font-size: 1.2rem;
    padding-left: 0;
    width: 100px;
}
/* animations / utilities */
.section-2 a:hover{
    font-size: 1.3rem;
    color: #fff;
    cursor: pointer;
    transition: 0.2s;
}

.section-1 a:hover{
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}

.white:hover{
    position: relative;
    padding-left: 10px;
}

/* media queres */
@media(max-width:580px){
    .flex-grid {
        display: flex;
         flex-direction: column;
    }
    .section-1{
        padding:0;
        padding-top: 5rem;
    }
    .section-2{
        padding: 0;
        padding-left: 1.5rem;
        padding-top: 1rem;
    }
}

figure {
  margin: 0;
}