//////////////////////////////////////////////////// // FLUID GRID COLUMNS
// // Example: sassmeister.com/gist/7951177
$fluid-grid-cols: 1 $fluid-grid-grid-rows: 10 $fluid-grid-padding: 2% $fluid-grid-class-name: views-row
@mixin grid-mobile($class-name: $fluid-grid-class-name)
[class*='#{$class-name}'] float: left clear: both width: 100% +box-sizing('border-box')
@mixin grid-desktop($class-name: $fluid-grid-class-name)
[class*='#{$class-name}'] float: left clear: none +box-sizing('border-box')
@mixin fluid-grid-modern($cols: $fluid-grid-cols, $grid-rows: $fluid-grid-grid-rows, $padding: $fluid-grid-padding, $class-name: $fluid-grid-class-name)
[class*='#{$class-name}'] width: (100% + $padding) / $cols padding: 0 0 $padding $padding .#{$class-name}-1 margin-left: -($padding) .#{$class-name}:nth-child(#{$cols}n + 1) margin-left: -($padding) clear: both
@mixin fluid-grid($cols: $fluid-grid-cols, $grid-rows: $fluid-grid-grid-rows, $padding: $fluid-grid-padding, $class-name: $fluid-grid-class-name)
[class*='#{$class-name}'] width: (100% + $padding) / $cols padding: 0 0 $padding $padding clear: none .#{$class-name}-1 margin-left: -($padding) @for $x from 1 through $grid-rows .#{$class-name}-#{$x * $cols + 1} margin-left: -($padding) clear: both
//======================================
$blue1: rgba(146, 198, 224, 0.25) $blue2: rgba(146, 198, 224, 0.075)
@mixin grid-background-4
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, $blue1), color-stop(21.05263%, $blue1), color-stop(21.05263%, $blue2), color-stop(26.31579%, $blue2), color-stop(26.31579%, $blue1), color-stop(47.36842%, $blue1), color-stop(47.36842%, $blue2), color-stop(52.63158%, $blue2), color-stop(52.63158%, $blue1), color-stop(73.68421%, $blue1), color-stop(73.68421%, $blue2), color-stop(78.94737%, $blue2), color-stop(78.94737%, $blue1), color-stop(100%, $blue1)) background-image: -webkit-linear-gradient(left, $blue1, $blue1 21.05263%, $blue2 21.05263%, $blue2 26.31579%, $blue1 26.31579%, $blue1 47.36842%, $blue2 47.36842%, $blue2 52.63158%, $blue1 52.63158%, $blue1 73.68421%, $blue2 73.68421%, $blue2 78.94737%, $blue1 78.94737%, $blue1 100%) background-image: -moz-linear-gradient(left, $blue1, $blue1 21.05263%, $blue2 21.05263%, $blue2 26.31579%, $blue1 26.31579%, $blue1 47.36842%, $blue2 47.36842%, $blue2 52.63158%, $blue1 52.63158%, $blue1 73.68421%, $blue2 73.68421%, $blue2 78.94737%, $blue1 78.94737%, $blue1 100%) background-image: linear-gradient(left, $blue1, $blue1 21.05263%, $blue2 21.05263%, $blue2 26.31579%, $blue1 26.31579%, $blue1 47.36842%, $blue2 47.36842%, $blue2 52.63158%, $blue1 52.63158%, $blue1 73.68421%, $blue2 73.68421%, $blue2 78.94737%, $blue1 78.94737%, $blue1 100%)
@mixin grid-background-8
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, $blue1), color-stop(10.25641%, $blue1), color-stop(10.25641%, $blue2), color-stop(12.82051%, $blue2), color-stop(12.82051%, $blue1), color-stop(23.07692%, $blue1), color-stop(23.07692%, $blue2), color-stop(25.64103%, $blue2), color-stop(25.64103%, $blue1), color-stop(35.89744%, $blue1), color-stop(35.89744%, $blue2), color-stop(38.46154%, $blue2), color-stop(38.46154%, $blue1), color-stop(48.71795%, $blue1), color-stop(48.71795%, $blue2), color-stop(51.28205%, $blue2), color-stop(51.28205%, $blue1), color-stop(61.53846%, $blue1), color-stop(61.53846%, $blue2), color-stop(64.10256%, $blue2), color-stop(64.10256%, $blue1), color-stop(74.35897%, $blue1), color-stop(74.35897%, $blue2), color-stop(76.92308%, $blue2), color-stop(76.92308%, $blue1), color-stop(87.17949%, $blue1), color-stop(87.17949%, $blue2), color-stop(89.74359%, $blue2), color-stop(89.74359%, $blue1), color-stop(100%, $blue1)) background-image: -webkit-linear-gradient(left, $blue1, $blue1 10.25641%, $blue2 10.25641%, $blue2 12.82051%, $blue1 12.82051%, $blue1 23.07692%, $blue2 23.07692%, $blue2 25.64103%, $blue1 25.64103%, $blue1 35.89744%, $blue2 35.89744%, $blue2 38.46154%, $blue1 38.46154%, $blue1 48.71795%, $blue2 48.71795%, $blue2 51.28205%, $blue1 51.28205%, $blue1 61.53846%, $blue2 61.53846%, $blue2 64.10256%, $blue1 64.10256%, $blue1 74.35897%, $blue2 74.35897%, $blue2 76.92308%, $blue1 76.92308%, $blue1 87.17949%, $blue2 87.17949%, $blue2 89.74359%, $blue1 89.74359%, $blue1 100%) background-image: -moz-linear-gradient(left, $blue1, $blue1 10.25641%, $blue2 10.25641%, $blue2 12.82051%, $blue1 12.82051%, $blue1 23.07692%, $blue2 23.07692%, $blue2 25.64103%, $blue1 25.64103%, $blue1 35.89744%, $blue2 35.89744%, $blue2 38.46154%, $blue1 38.46154%, $blue1 48.71795%, $blue2 48.71795%, $blue2 51.28205%, $blue1 51.28205%, $blue1 61.53846%, $blue2 61.53846%, $blue2 64.10256%, $blue1 64.10256%, $blue1 74.35897%, $blue2 74.35897%, $blue2 76.92308%, $blue1 76.92308%, $blue1 87.17949%, $blue2 87.17949%, $blue2 89.74359%, $blue1 89.74359%, $blue1 100%) background-image: linear-gradient(left, $blue1, $blue1 10.25641%, $blue2 10.25641%, $blue2 12.82051%, $blue1 12.82051%, $blue1 23.07692%, $blue2 23.07692%, $blue2 25.64103%, $blue1 25.64103%, $blue1 35.89744%, $blue2 35.89744%, $blue2 38.46154%, $blue1 38.46154%, $blue1 48.71795%, $blue2 48.71795%, $blue2 51.28205%, $blue1 51.28205%, $blue1 61.53846%, $blue2 61.53846%, $blue2 64.10256%, $blue1 64.10256%, $blue1 74.35897%, $blue2 74.35897%, $blue2 76.92308%, $blue1 76.92308%, $blue1 87.17949%, $blue2 87.17949%, $blue2 89.74359%, $blue1 89.74359%, $blue1 100%)
@mixin grid-background-12
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, $blue1), color-stop(6.77966%, $blue1), color-stop(6.77966%, $blue2), color-stop(8.47458%, $blue2), color-stop(8.47458%, $blue1), color-stop(15.25424%, $blue1), color-stop(15.25424%, $blue2), color-stop(16.94915%, $blue2), color-stop(16.94915%, $blue1), color-stop(23.72881%, $blue1), color-stop(23.72881%, $blue2), color-stop(25.42373%, $blue2), color-stop(25.42373%, $blue1), color-stop(32.20339%, $blue1), color-stop(32.20339%, $blue2), color-stop(33.89831%, $blue2), color-stop(33.89831%, $blue1), color-stop(40.67797%, $blue1), color-stop(40.67797%, $blue2), color-stop(42.37288%, $blue2), color-stop(42.37288%, $blue1), color-stop(49.15254%, $blue1), color-stop(49.15254%, $blue2), color-stop(50.84746%, $blue2), color-stop(50.84746%, $blue1), color-stop(57.62712%, $blue1), color-stop(57.62712%, $blue2), color-stop(59.32203%, $blue2), color-stop(59.32203%, $blue1), color-stop(66.10169%, $blue1), color-stop(66.10169%, $blue2), color-stop(67.79661%, $blue2), color-stop(67.79661%, $blue1), color-stop(74.57627%, $blue1), color-stop(74.57627%, $blue2), color-stop(76.27119%, $blue2), color-stop(76.27119%, $blue1), color-stop(83.05085%, $blue1), color-stop(83.05085%, $blue2), color-stop(84.74576%, $blue2), color-stop(84.74576%, $blue1), color-stop(91.52542%, $blue1), color-stop(91.52542%, $blue2), color-stop(93.22034%, $blue2), color-stop(93.22034%, $blue1), color-stop(100%, $blue1)) background-image: -webkit-linear-gradient(left, $blue1, $blue1 6.77966%, $blue2 6.77966%, $blue2 8.47458%, $blue1 8.47458%, $blue1 15.25424%, $blue2 15.25424%, $blue2 16.94915%, $blue1 16.94915%, $blue1 23.72881%, $blue2 23.72881%, $blue2 25.42373%, $blue1 25.42373%, $blue1 32.20339%, $blue2 32.20339%, $blue2 33.89831%, $blue1 33.89831%, $blue1 40.67797%, $blue2 40.67797%, $blue2 42.37288%, $blue1 42.37288%, $blue1 49.15254%, $blue2 49.15254%, $blue2 50.84746%, $blue1 50.84746%, $blue1 57.62712%, $blue2 57.62712%, $blue2 59.32203%, $blue1 59.32203%, $blue1 66.10169%, $blue2 66.10169%, $blue2 67.79661%, $blue1 67.79661%, $blue1 74.57627%, $blue2 74.57627%, $blue2 76.27119%, $blue1 76.27119%, $blue1 83.05085%, $blue2 83.05085%, $blue2 84.74576%, $blue1 84.74576%, $blue1 91.52542%, $blue2 91.52542%, $blue2 93.22034%, $blue1 93.22034%, $blue1 100%) background-image: -moz-linear-gradient(left, $blue1, $blue1 6.77966%, $blue2 6.77966%, $blue2 8.47458%, $blue1 8.47458%, $blue1 15.25424%, $blue2 15.25424%, $blue2 16.94915%, $blue1 16.94915%, $blue1 23.72881%, $blue2 23.72881%, $blue2 25.42373%, $blue1 25.42373%, $blue1 32.20339%, $blue2 32.20339%, $blue2 33.89831%, $blue1 33.89831%, $blue1 40.67797%, $blue2 40.67797%, $blue2 42.37288%, $blue1 42.37288%, $blue1 49.15254%, $blue2 49.15254%, $blue2 50.84746%, $blue1 50.84746%, $blue1 57.62712%, $blue2 57.62712%, $blue2 59.32203%, $blue1 59.32203%, $blue1 66.10169%, $blue2 66.10169%, $blue2 67.79661%, $blue1 67.79661%, $blue1 74.57627%, $blue2 74.57627%, $blue2 76.27119%, $blue1 76.27119%, $blue1 83.05085%, $blue2 83.05085%, $blue2 84.74576%, $blue1 84.74576%, $blue1 91.52542%, $blue2 91.52542%, $blue2 93.22034%, $blue1 93.22034%, $blue1 100%) background-image: linear-gradient(left, $blue1, $blue1 6.77966%, $blue2 6.77966%, $blue2 8.47458%, $blue1 8.47458%, $blue1 15.25424%, $blue2 15.25424%, $blue2 16.94915%, $blue1 16.94915%, $blue1 23.72881%, $blue2 23.72881%, $blue2 25.42373%, $blue1 25.42373%, $blue1 32.20339%, $blue2 32.20339%, $blue2 33.89831%, $blue1 33.89831%, $blue1 40.67797%, $blue2 40.67797%, $blue2 42.37288%, $blue1 42.37288%, $blue1 49.15254%, $blue2 49.15254%, $blue2 50.84746%, $blue1 50.84746%, $blue1 57.62712%, $blue2 57.62712%, $blue2 59.32203%, $blue1 59.32203%, $blue1 66.10169%, $blue2 66.10169%, $blue2 67.79661%, $blue1 67.79661%, $blue1 74.57627%, $blue2 74.57627%, $blue2 76.27119%, $blue1 76.27119%, $blue1 83.05085%, $blue2 83.05085%, $blue2 84.74576%, $blue1 84.74576%, $blue1 91.52542%, $blue2 91.52542%, $blue2 93.22034%, $blue1 93.22034%, $blue1 100%)
@mixin width-25($padding: 0)
width: 25% float: left padding: $padding
@mixin width-33($padding: 0)
width: 33.33% float: left padding: $padding
@mixin width-50($padding: 0)
width: 50% float: left padding: $padding
@mixin width-66($padding: 0)
width: 66% float: left padding: $padding
@mixin width-75($padding: 0)
width: 75% float: left padding: $padding
@mixin width-100($padding: 0)
width: 100%
@mixin width-50-100($padding: 0)
width: 100% float: left padding: $padding +breakpoint($tablet-portrait) width: 50% float: left padding: $padding
@mixin vertical-align
&:before content: '' display: inline-block vertical-align: middle height: 100% width: .1px