html {
  box-sizing: border-box;
  // scroll-behavior: smooth;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body{
  @include font-sans;
  font-size:15px;
  line-height:22px;
  color:#000;
  @include bg('../images/texture/body-white-bg.jpg',
              '../images/texture/body-white-bg@2x.jpg');
  background-color:#f1f1f1;
  background-size:100% auto;
  background-repeat:no-repeat;
  
  &.white {
    @include bg('../images/texture/body-white-bg.jpg',
              '../images/texture/body-white-bg@2x.jpg');
    background-color:#f1f1f1;

  }

  &.blue {
    background-image:url(../images/texture/body-blue-bg@2x.jpg);
    background-color:#00aed5;

  }

  &.blue-dark {
    background-image:url(../images/texture/body-blue-dark-bg@2x.jpg);
    background-color:#203455;

  }

}

.all{
  max-width:1780px;
  margin-left:auto;
  margin-right:auto;
  padding:50px;
  
  & > .inner{
    position:relative;
    
    background-color:$white;
    box-shadow:0 0 15px 0 rgba(0,0,0,0.15);
    
  }
}

.all.full{
  padding:0;
}

.all.full{
  padding:0;
}

li{
  list-style:none;
}

button{
  cursor:pointer;
  @include font-sans;
  appearance:none;
  border:none;
  background-color:transparent;
  padding:0;
  margin:0;
  text-align:left;

  &:focus{
    outline:0;
  }
}

@include breakpoint($laptop){
  .all{
    padding:35px;
  }
}

@include breakpoint($laptop-tablet){
  .all{
    padding:30px;
  }
}

@include breakpoint($tablet-landscape){
  .all{
    padding:0;
  }
}
