/** Shopify CDN: Minification failed

Line 31:0 Unexpected "}"
Line 150:11 Expected identifier but found whitespace
Line 151:3 Unexpected "size("
Line 157:0 Comments in CSS use "/* ... */" instead of "//"
Line 162:2 Comments in CSS use "/* ... */" instead of "//"
Line 163:2 Comments in CSS use "/* ... */" instead of "//"
Line 173:2 Comments in CSS use "/* ... */" instead of "//"
Line 206:0 Comments in CSS use "/* ... */" instead of "//"
Line 207:0 Comments in CSS use "/* ... */" instead of "//"
Line 208:0 Comments in CSS use "/* ... */" instead of "//"
... and 22 more hidden warnings

**/
.video-container {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
}

.video-container iframe, .video-container object, .video-container embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    }
}

.RB {
    margin: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.logofooter {
    margin: 20px;
    width: 100px;
    height: 70px;
    line-height: 0px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#disqus_thread {
	padding: 12px 10px 0;
	margin: 0 auto;
	max-width: 750px;
}

@media screen and (min-width: 673px) {
	#disqus_thread {
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media screen and (min-width: 1040px) {
	#disqus_thread {
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media screen and (min-width: 1110px) {
  #disqus_thread {
		padding-left: 20px;
		padding-right: 20px;
	}
}

.spr-badge[data-rating="0"] {
  display: none;
}

/* FiberClick */

.fiberclicklogo {
max-width: 100%;
vertical-align: middle;
padding-bottom:10px;
padding-left: 3px;
}  

:root{
  --background-dark: #2d3548;
  --text-light: rgba(255,255,255,0.6);
  --text-lighter: rgba(255,255,255,0.9);
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 64px;
  --width-container: 1200px;
}

*{
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}

body{
  height: 100%;
}

.hero-section{
  align-items: flex-start;
  background-image: linear-gradient(15deg, #fffff 0%, #fffff 150%);
  display: flex;
  min-height: 100%;
  justify-content: center;
  padding: var(--spacing-xxl) var(--spacing-l);
}

.card-grid{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-column-gap: var(--spacing-l);
  grid-row-gap: var(--spacing-l);
  max-width: var(--width-container);
  width: 100%;
}

@media(min-width: 540px){
  .card-grid{
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media(min-width: 960px){
  .card-grid{
    grid-template-columns: repeat(4, 1fr); 
  }
}

.cardContainer
  position: relative
  +size(300px, 400px)
  min-width: 300px
  min-height: 400px
  margin: 0px
  perspective: 1000px

// .active is applied to .card when .card is clicked.
.active
  transform: translateZ(0px) rotateY(180deg) !important
  &:after
    display: none
  // &:hover:after
  //   opacity: 0 !important

.card
  display: inline-block
  +size(100%, 100%)
  cursor: pointer
  -moz-backface-visibility: hidden
  transform-style: preserve-3d
  transform: translateZ(-100px)
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)
  // :after allows for a more performant box-shadow because only opacity is being animated.
  &:after
    content: ''
    position: absolute
    z-index: -1
    +size(100%, 100%)
    border-radius: 5px
    box-shadow: 0 14px 50px -4px hsla(0, 0%, 0%, 0.15)
    opacity: 0
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1.4)
  &:hover
    transform: translateZ(0px)
  &:hover:after
    opacity: 1

  .side
    -webkit-backface-visibility: hidden
    backface-visibility: hidden
    position: absolute
    +size(100%, 100%)
    border-radius: 5px
    background-color: $l1

  .front
    z-index: 2
  .back
    transform: rotateY(180deg)

  .info
    padding: 16px



// --------------
// Front of card
// --------------

.front

  .img
    background-color: $l2
    background-position: center
    background-size: cover
    border-radius: 0px 0px 0 0
    +size(100%, 250px)

  .img1
    background-image: url(http://i.imgur.com/1aE1nMA.jpg)
  .img2
    background-image: url(http://i.imgur.com/2p9VXAn.jpg)
  .img3
    background-image: url(http://i.imgur.com/I5ABT2v.jpg)



// --------------
// Back of card
// --------------

.back
  position: relative

  h2
    margin-top: 6px
    margin-bottom: 18px

  .reviews
    display: flex
    align-items: center
    margin-bottom: 12px
    cursor: pointer
    p
      color: $l3
      font-weight: 300
      margin: 1px 0 0 6px
      transition: 0.3s ease-in-out
    &:hover
      p
        color: $d2

  li
    line-height: 22px
    margin: 2px 0 6px 0

  .btn
    // positioning
    position: absolute
    bottom: 16px
    +size(calc(100% - 32px), 56px)
    display: flex
    align-items: center
    justify-content: center
    // style
    background-color: $p1
    background-image: linear-gradient(-90deg, $g1, $g2)
    border-radius: 5px
    cursor: pointer

    &:hover
      h4
        transform: translateX(0px)
      svg
        transform: translateX(0px)
        opacity: 1

    h4
      transform: translateX(12px)
      transition: transform 0.3s ease-out
    svg
      margin: 1px 0 0 4px
      transform: translateX(-8px)
      opacity: 0
      transition: all 0.3s ease-out

    :root{
  --background-dark: #2d3548;
  --text-light: rgba(255,255,255,0.6);
  --text-lighter: rgba(255,255,255,0.9);
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 64px;
  --width-container: 1200px;
}

*{
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}

body{
  height: 100%;
}

.hero-section{
  align-items: flex-start;
  background-image: linear-gradient(15deg, #ffffff 0%, #ffffff 150%);
  display: flex;
  min-height: 100%;
  justify-content: center;
  padding: var(--spacing-xxl) var(--spacing-l);
}

.card-grid{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-column-gap: var(--spacing-l);
  grid-row-gap: var(--spacing-l);
  max-width: var(--width-container);
  width: 100%;
}

@media(min-width: 540px){
  .card-grid{
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media(min-width: 960px){
  .card-grid{
    grid-template-columns: repeat(4, 1fr); 
  }
}

.card{
  list-style: none;
  position: relative;
}

.card:before{
  content: '';
  display: block;
  padding-bottom: 150%;
  width: 100%;
}

.card__background{
  background-size: cover;
  background-position: center;
  border-radius: var(--spacing-l);
  bottom: 0;
  filter: brightness(0.75) saturate(1.2) contrast(0.85);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  trsnsform: scale(1) translateZ(0);
  transition: 
    filter 200ms linear,
    transform 200ms linear;
}

.card:hover .card__background{
  transform: scale(1.05) translateZ(0);
}

.card-grid:hover > .card:not(:hover) .card__background{
  filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
}

.card__content{
  left: 0;
  padding: var(--spacing-l);
  position: absolute;
  top: 0;
}

.card__category{
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-s);
  text-transform: uppercase;
}

.card__heading{
  color: var(--text-lighter);
  font-size: 1.9rem;
  text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
  line-height: 1.4;
  word-spacing: 100vw;
}
      
.contactus  {    
      // reset
@import '//codepen.io/chrisdothtml/pen/ojLzJK.css'

btn-size = 90px
sites = {
  'facebook': #3B5998
  'twitter': #3CF
  'google': #DC4A38
  'dribbble': #F26798
  'skype': #00AFF0
}

$animate {
  transition: all .35s
  transition-timing-function: cubic-bezier(
    0.310,
    -0.105,
    0.430,
    1.590
  )
}

$btn__inactive {
  
  &:before {
    top: 90%
    left: -110%
  }
  
  .fa {
    transform: scale(.8)
  }
  
  // variants
  for name, color in sites {
    
    &.{name} {
      
      &:before {
        background-color: color
      }
      
      .fa {
        color: color
      }
    }
  }
}

$btn__active {

  &:before {
    top: -10%
    left: -10%
  }

  .fa {
    color: #fff
    transform: scale(1)
  }
}

.social-btns {
  height: btn-size
  margin: auto
  font-size: 0
  text-align: center
  position: absolute
  top: 0
  bottom: 0
  left: 0
  right: 0

  .btn {
    @extends $btn__inactive
    @extends $animate
    display: inline-block
    background-color: #fff
    width: btn-size
    height: btn-size
    line-height: btn-size
    margin: 0 10px
    text-align: center
    position: relative
    overflow: hidden
    border-radius: 28%
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1)
    //overflow bug fix
    opacity: .99

    &:before {
      @extends $animate
      content: ''
      width: 120%
      height: 120%
      position: absolute
      transform: rotate(45deg)
    }

    .fa {
      @extends $animate
      font-size: 38px
      vertical-align: middle
    }

    &:focus,
    &:hover {
      @extends $btn__active
    }
  }
}
}