|
@mixin logo-gradient($color-one, $color-two) { |
|
background: $color-one; /* Old browsers */ |
|
background: -moz-linear-gradient(left, $color-one 0%, $color-two 81%); |
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%,$color-one), color-stop(81%,$color-two)); |
|
background: -webkit-linear-gradient(left, $color-one 0%,$color-two 81%); |
|
background: -o-linear-gradient(left, $color-one 0%,$color-two 81%); |
|
background: -ms-linear-gradient(left, $color-one 0%,$color-two 81%); |
|
background: linear-gradient(left, $color-one 0%,$color-two 81%); |
|
} |
|
|
|
@mixin animation($time, $fill) { |
|
-webkit-animation-duration: $time; |
|
-moz-animation-duration: $time; |
|
-ms-animation-duration: $time; |
|
-o-animation-duration: $time; |
|
animation-duration: $time; |
|
-webkit-animation-fill-mode: $fill; |
|
-moz-animation-fill-mode: $fill; |
|
-ms-animation-fill-mode: $fill; |
|
-o-animation-fill-mode: $fill; |
|
animation-fill-mode: $fill; |
|
} |
|
#hire { |
|
@include animation(1.2s, 'both'); |
|
width: 102px; |
|
height: 112px; |
|
position: absolute; |
|
top: 0; |
|
right: 25%; |
|
|
|
h3 { |
|
font-size: 18px; |
|
font-family: 'museo-sans'; |
|
text-align: center; |
|
margin-top: 25px; |
|
a { |
|
color: #FFF; |
|
text-decoration: none; |
|
} |
|
} |
|
.arrow { |
|
position: absolute; |
|
bottom: 0; |
|
width: 0; |
|
height: 0; |
|
border-left: 51px solid transparent; |
|
border-right: 51px solid transparent; |
|
border-bottom: 51px solid #FFF; |
|
} |
|
} |
|
|
|
.cssgradients { |
|
#hire { |
|
@include logo-gradient(#422411, #3c5985); |
|
} |
|
} |
