@charset “utf-8”; .transition-basic {

transition: all 0.4s ease;

} $fuck: #444B60; // media queries $breakpoints: (

'small': 480px, 
'medium': 768px, 
'large': 992px, 
'x-large': 1200px

);

@mixin respond-to($breakpoint, $min-max:min-width) {

@media ($min-max: map-get($breakpoints, $breakpoint)) {
        @content;
}

}

// Back Image @mixin backImage($image, $opacity: 0) {

background-image: linear-gradient(rgba(0, 0, 0, $opacity), rgba(0, 0, 0, $opacity)), url($image);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;

}

// Form Placeholder Color @mixin placeholderColor($color) { // use within form class

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: $color;
}
::-moz-placeholder { /* Firefox 19+ */
  color: $color;
}
:-ms-input-placeholder { /* IE 10+ */
  color: $color;
}
:-moz-placeholder { /* Firefox 18- */
  color: $color;
}

}

// Button Color @mixin buttonColor($bg-color, $text-color) {

background: $bg-color;
border-color: $bg-color;
color: $text-color;
&:hover,
&:active,
&:focus,
&:target {
  background: darken($bg-color, 10%);
  border-color: darken($bg-color, 10%);
}

}

// Button w/ Icon @mixin buttonAndIcon($bg-color, $color, $icon) {

max-width: 210px;
width: 100%;
text-align: left;
background: $bg-color url($icon) no-repeat 95% 50%; /* For more icons visit https://www.iconfinder.com/search/?q=arrow+down&price=free */
background-size: 25px 25px;
padding: 12px 15px;
color: $color;
&:hover,
&:active,
&:focus,
&:target {
  color: $color;
  background: darken($bg-color, 10%) url($icon) no-repeat 95% 50%; /* For more icons visit https://www.iconfinder.com/search/?q=arrow+down&price=free */
  background-size: 25px 25px;
  border-color: darken($bg-color, 10%);
}

}