/*
Theme Name: 	Betheme Child
Theme URI: 		http://themes.muffingroup.com/betheme
Author: 		Muffin group
Author URI: 	http://muffingroup.com
Description:	Child Theme for Betheme - Premium WordPress Theme
Template:		betheme
Version: 		1.6
*/

/* Theme customization starts here
-------------------------------------------------------------- */
@font-face {
  font-family: 'Copperplate Gothic Light';
  src: url('https://gatelyinn.com/wp-content/uploads/2016/11/Copperplate-Gothic.eot'); /* IE9 Compat Modes */
  src: url('https://gatelyinn.com/wp-content/uploads/2016/11/Copperplate-Gothic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://gatelyinn.com/wp-content/uploads/2016/11/Copperplate-Gothic.woff') format('woff'), /* Pretty Modern Browsers */
       url('https://gatelyinn.com/wp-content/uploads/2016/11/Copperplate-Gothic.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('https://gatelyinn.com/wp-content/uploads/2016/11/Copperplate-Gothic.svg#svgCopperplateGothicLight') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Copperplate';
  src: url('https://gatelyinn.com/wp-content/uploads/2016/11/Copperplate-Gothic.eot'); /* IE9 Compat Modes */
  src: url('https://gatelyinn.com/wp-content/uploads/2016/11/Copperplate-Gothic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://gatelyinn.com/wp-content/uploads/2016/11/Copperplate-Gothic.woff') format('woff'), /* Pretty Modern Browsers */
       url('https://gatelyinn.com/wp-content/uploads/2016/11/Copperplate-Gothic.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('https://gatelyinn.com/wp-content/uploads/2016/11/Copperplate-Gothic.svg#svgCopperplate') format('svg'); /* Legacy iOS */
}

// Thanks to codepen.io/alaingalvan for suggesting this color variable:

$background: hsl(210, 45, 10)



// http://www.paulirish.com/2012/box-sizing-border-box-ftw/

/*
html
  box-sizing: border-box
*/
*, *:before, *:after
  box-sizing: inherit


/*
html
  background: $background
  font-size: .625em // 10px for rems
*/
.soc
  display: block
  font-size: 0
  list-style: none
  margin: 0
  padding: 48px // IE8
  padding: 4.8rem
  text-align: center
  li
    display: inline-block
    margin: 12px // IE8
    margin: 1.2rem
  a, svg
    display: block
  a
    position: relative // IE8
    height: 14px // IE8
    height: 1.4rem
    width: 14px // IE8
    width: 1.4rem
  svg
    height: 100%
    width: 100%
  // IE8:
  em
    font-size: 12px
    line-height: 1.5
    margin-top: -.75em
    position: absolute
    text-align: center
    top: 50%
    right: 0
    bottom: 0
    left: 0

// Using placeholder selectors and @extend (keeps output CSS lean) instead of [class*='icon-'] attribute selector because IE8 doesn't support it :<

%social-icon-hover
  border-radius: 100%
  color: $background // IE8
  fill: $background
  transform: scale(1.25)
  transition: background-color .5s, transform .5s ease-out

// Neat color trick, <3 Sass
@for $i from 1 through 30
  .icon-#{$i}
    color: hsl($i * 12, 70, 50) // IE8
    fill: hsl($i * 12, 70, 50)
    &:hover
      background: hsl($i * 12, 70, 50)
      @extend %social-icon-hover

.bs-buttons {font-size: 40px;}