@import "compass/reset";

/*reset  general button styles */
#options .show-buttons button,
#options .show-buttons input[type="button"],
#options .show-buttons input[type="reset"],
#options .show-buttons input[type="submit"] {
  background:none;
  border-bottom:none;
  border-top:none;
  border-left:none;
  border-right:none;
  background-color: transparent;
}

* {
  -webkit-box-sizing:inherit;
  -moz-box-sizing:inherit;
  box-sizing: inherit;
}
/*base*/
@mixin fontsize($size:1.6, $line: $size * 1.5){
  font-size:   ($size * 10) + px;
  font-size:   $size + rem;
  line-height: $line;
}


//set different screen sizes
$screen-xs:                  480px !default;
$screen-sm:                  768px !default;
$screen-md:                  992px !default;
$screen-lg:                 1200px !default;

//set breakpoints for different screen sizes
@mixin at-least($device-width) {
  @media screen and (min-width: $device-width) {
    @content
  }
}

@mixin until($device-width) {
  @media screen and (max-width: $device-width - 1) {
    @content
  }
}

/*-----------*\
  CUBE STYLE
\*-----------*/

.wrap {
  display:block;
  perspective: 1000px;
  margin: 1em auto 2em;
  //  position: relative;
  //  top: 50%;
  //  transform: translateY(8%);

}
.cube-rot{
  transform-style: preserve-3d;
  transition: transform 1s;

}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
  transform-origin: inherit;
  a , a:-webkit-any-link{
    color:inherit;
  }


  figure {
    display:block;
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    margin: 0;
    border: 2px solid #464646;
    overflow: hidden;

    &:after{
      display:table;
      content:"";
      clear:both;
    }

    article{

      margin:4rem 3.5rem 6rem;
      overflow: hidden;
      text-align: center;
      height: calc( 100% - 10rem);
      width: calc( 100% - 7rem);



      h2{
        @include fontsize(3, 1.4);
        @include at-least($screen-xs){
          @include fontsize(4, 1.4);
        }
        @include at-least($screen-sm){
          @include fontsize(5, 1.4);
        }
        @include at-least($screen-lg){
          @include fontsize(6, 1.4);
        }
        margin: 1rem ;
      }

      span  {
        @include fontsize(2 , 1.4);
        @include at-least($screen-xs){
          @include fontsize(3, 1.6);
        }
        @include at-least($screen-sm){
          @include fontsize(4, 1.4);
        }
        @include at-least($screen-lg){
          @include fontsize(5, 1.4);
        }
        text-align: center;
        margin:0 auto;
        color: inherit;
        overflow: hidden;
        position: relative;
        display: block;
      }
    }
  }
}
/*buttons style have been reset in reset-section*/
#options .show-buttons{
  box-sizing: content-box;

  button.show-up     {
    position:absolute;
    top: 5px;
    left: 50%;
    display: block;
    transform: translate(-50%,0)  ;
    width: 4%;
    height: 0;
    padding-left:4%;
    padding-bottom: 4%;
    overflow: hidden;
    z-index: 999;

    &:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      margin-left:-500px;
      border-left: 500px solid transparent;
      border-right: 500px solid transparent;
      border-bottom: 500px solid #4679BD;;
    }
  }

  button.show-down   {
    position:absolute;
    bottom: 5px;
    left: 50%;
    display:block;
    transform: translate(-50%,0)  ;
    width:4%;
    height: 0;

    padding-left:4%;
    padding-top: 4%;
    overflow: hidden;
    z-index: 999;

    &:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      margin-left:-500px;
      margin-top:-500px;
      border-left: 500px solid transparent;
      border-right: 500px solid transparent;
      border-top: 500px solid #4679BD;;
    }
  }
  button.show-left   {
    position:absolute;
    left: 5px;
    top: 50%;
    display:block;
    transform: translate(0,-50%)  ;
    width:4%;
    height: 0;
    padding: 0;
    padding-bottom:4%;
    padding-top: 4%;
    overflow: hidden;
    z-index: 999;

    &:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      margin-top:-500px;
      border-top: 500px solid transparent;
      border-bottom: 500px solid transparent;
      border-right: 500px solid #4679BD;;
    }
  }
  button.show-right  {
    position:absolute;
    right: 5px;
    top: 50%;
    display:block;
    transform: translate(0,-50%)  ;
    width:0;
    height: 0;
    padding: 0;
    padding-bottom:4%;
    padding-top: 4%;
    padding-left: 4%;
    overflow: hidden;
    z-index: 999;
    &:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      margin-top:-500px;
      margin-left:-500px;

      border-top: 500px solid transparent;
      border-bottom: 500px solid transparent;
      border-left: 500px solid #4679BD;;
    }
  }

}