/*Site Design*/
svg{
  width:200px;
  margin:20px 0 15px 2%;
}
.set{
  background-color:#eee;
  width:96%;
  padding:50px 0;
  margin:0 2% 15px 2%;
  text-align:center;
  position:relative;
}
.set.even{background-color:#ddd;}
#set5{margin-bottom:50px;}
#set1:before{content:"SET 1";}
#set2:before{content:"SET 2";}
#set3:before{content:"SET 3";}
#set4:before{content:"SET 4";}
#set5:before{content:"SET 5";}
#set1:before,#set2:before,#set3:before,#set4:before,#set5:before{
  position:absolute;
  top:2px;
  left:2px;
  font-family:"Arial", sans-serif;
  font-size:70px;
  font-weight:900;
  font-stretch:condensed;
  color:#fff;
  line-height:1;
}
/*End Site Design*/


/*-------------------------------------------*/
/*   ---     Saan Design Button     ---   */
/* This part of the code is always necessary */
.saanButton{
  font-family:'Open Sans', sans-serif;
  font-size:16px;
  text-align:center;
  display:inline-block;
  margin:5px;
  padding:0 24px;
  overflow:hidden;
  border-radius:2px;
  border:solid 2px;
  cursor:pointer;
  line-height:45px;
  position:relative;
  -webkit-transition:all .4s;
  transition:all .4s;
}
.saanButton span{
  display: inline-block;
  line-height:100%;
  border:solid 0px #fff;
}
/* End of necessary part.*/


/* ---   ---   Code SET 1 - Button N1 ---   --- */
#set1_bt1{
  background-color:#483c46;
  border-color:#483c46;
  color:#FFF;
}
#set1_bt1:before{
  content:attr(data-text);
  display: inline-block;
  position:absolute;
  margin:0;
  left:-105%;
  top:0;
  height:100%;
  width:100%;
  background-color:#FFF;
  color:#483c46;
  -webkit-transition:all .4s;
  transition:all .4s;
  opacity: 0.9;
}
#set1_bt1:hover{
  border-color:#FFF;
  box-shadow:0 0 3px 0 #483c46;  
}
#set1_bt1:hover:before{
  left:0;
}
/* ---   ---   Code SET 1 - Button N2 ---   --- */
#set1_bt2{
  background-color:#3c6e71;
  border-color:#3c6e71;
  color:#FFF;
}
#set1_bt2:before{
  content:attr(data-text);
  display: inline-block;
  position:absolute;
  left:0;
  top:-110%;
  height:100%;
  width:100%;
  background-color:#FFF;
  color:#3c6e71;
  -webkit-transition:all .4s;
  transition:all .4s;
  opacity: 0.9;
}
#set1_bt2:hover{
  border-color:#FFF;
  box-shadow:0 0 3px 0 #3c6e71;  
}
#set1_bt2:hover:before{
  top:0;
}
/* ---   ---   Code SET 1 - Button N3 ---   --- */
#set1_bt3{
  background-color:#70ae6e;
  border-color:#70ae6e;
  color:#FFF;
}
#set1_bt3:before{
  content:attr(data-text);
  display: inline-block;
  position:absolute;
  left:0;
  bottom:-110%;
  height:100%;
  width:100%;
  background-color:#FFF;
  color:#70ae6e;
  -webkit-transition:all .4s;
  transition:all .4s;
  opacity: 0.9;
}
#set1_bt3:hover{
  border-color:#FFF;
  box-shadow:0 0 3px 0 #70ae6e;  
}
#set1_bt3:hover:before{
  bottom:0;
}
/* ---   ---   Code SET 1 - Button N4 ---   --- */
#set1_bt4{
  background-color:#c0e570;
  border-color:#c0e570;
  color:#FFF;
}
#set1_bt4:before{
  content:attr(data-text);
  display:inline-block;
  position:absolute;
  right:-105%;
  top:0;
  height:100%;
  width:100%;
  background-color:#FFF;
  color:#c0e570;
  -webkit-transition:all .4s;
  transition:all .4s;
  opacity: 0.9;
}
#set1_bt4:hover{
  border-color:#FFF;
  box-shadow:0 0 3px 0 #c0e570;  
}
#set1_bt4:hover:before{
  right:0;
}
/* ---   ---   Code SET 1 - Button N5 ---   --- */
#set1_bt5{
  background-color:#f4743b;
  border-color:#f4743b;
  color:#FFF;
}
#set1_bt5:before{
  content:attr(data-text);
  display:inline-block;
  position:absolute;
  left:-105%;
  top:-105%;
  height:100%;
  width:100%;
  background-color:#FFF;
  color:#f4743b;
  -webkit-transition:all .4s;
  transition:all .4s;
  opacity: 0.9;
}
#set1_bt5:hover{
  border-color:#FFF;
  box-shadow:0 0 3px 0 #f4743b;  
}
#set1_bt5:hover:before{
  top:0;
  left:0;
}
/* ---   ---   Code SET 2 - Button N1 ---   --- */
#set2_bt1{
  background-color:#fff;
  border-color:#483c46;
  color:#483c46;
}
#set2_bt1:before{
  content:"";
  display:inline-block;
  position:absolute;
  left:-6%;
  top:-5%;
  width:5%;
  padding-bottom:5%;
  background-color:#fff;
  border-radius:50%;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition:all .8s;
  transition:all .8s;
  opacity:.9;
}
#set2_bt1:hover{
  border-color:#FFF;
  color:#FFF;
  opacity:.9;
  box-shadow:0 0 3px 0 #483c46; 
}
#set2_bt1:hover:before{
  background-color:#483c46;
  -webkit-transform:scale(50);
  transform:scale(50);
  z-index: -1;
}
/* ---   ---   Code SET 2 - Button N2 ---   --- */
#set2_bt2{
  background-color:#fff;
  border-color:#3c6e71;
  color:#3c6e71;
}
#set2_bt2:before{
  content:"";
  display: inline-block;
  position:absolute;
  left:-6%;
  bottom:-5%;
  padding-bottom:5%;
  width:5%;
  -webkit-transform:scale(1);
  transform:scale(1);
  background-color:#fff;
  border-radius:50%;
  -webkit-transition:all .8s;
  transition:all .8s;
  opacity:.9;
}
#set2_bt2:hover{
  border-color: #FFF;
  color: #FFF;
  opacity:.9;
  box-shadow: 0 0 3px 0 #3c6e71;
}
#set2_bt2:hover:before{
  background-color:#3c6e71;
  -webkit-transform:scale(50);
  transform:scale(50);
  z-index: -1;
}
/* ---   ---   Code SET 2 - Button N3 ---   --- */
#set2_bt3{
  background-color:#fff;
  border-color:#70ae6e;
  color:#70ae6e;
}
#set2_bt3:before{
  content:"";
  display:inline-block;
  position:absolute;
  right:-6%;
  top:-5%;
  padding-bottom:5%;
  width:5%;
  -webkit-transform:scale(1);
  transform:scale(1);
  background-color:#fff;
  border-radius:50%;
  -webkit-transition:all .8s;
  transition:all .8s;
  opacity:.9;
}
#set2_bt3:hover{
  border-color:#FFF;
  color:#FFF;
  opacity:.9;
  box-shadow:0 0 3px 0 #70ae6e;
}
#set2_bt3:hover:before{
  background-color:#70ae6e;
  -webkit-transform:scale(50);
  transform:scale(50);
  z-index: -1;
}
/* ---   ---   Code SET 2 - Button N4 ---   --- */
#set2_bt4{
  background-color:#fff;
  border-color:#c0e570;
  color:#c0e570;
}
#set2_bt4:before{
  content:"";
  display:inline-block;
  position:absolute;
  right:-6%;
  bottom:-5%;
  padding-bottom:5%;
  width:5%;
  -webkit-transform:scale(1);
  transform:scale(1);
  background-color:#fff;
  border-radius:50%;
  -webkit-transition:all .8s;
  transition:all .8s;
  opacity:.9;
}
#set2_bt4:hover{
  border-color:#FFF;
  color:#FFF;
  opacity:.9;
  box-shadow:0 0 3px 0 #c0e570;
}
#set2_bt4:hover:before{
  background-color:#c0e570;
  -webkit-transform:scale(50);
  transform:scale(50);
  z-index:-1;
}
/* ---   ---   Code SET 2 - Button N5 ---   --- */
#set2_bt5{
  background-color:#fff;
  border-color:#f4743b;
  color:#f4743b;
}
#set2_bt5:before{
  content:"";
  display:inline-block;
  position:absolute;
  left:47.5%;
  top:-15%;
  padding-bottom:5%;
  width:5%;
  background-color:#fff;
  border-radius:50%;
  -webkit-transform:scale(1);
  transform:scale(1);
  -webkit-transition:all .8s;
  transition:all .8s;
  opacity:.9;
}
#set2_bt5:hover{
  border-color:#FFF;
  color:#FFF;
  opacity:.9;
  box-shadow:0 0 3px 0 #f4743b;
}
#set2_bt5:hover:before{
   background-color:#f4743b;
  -webkit-transform:scale(32);
  transform:scale(32);
  z-index:-1;
}
/* ---   ---   Code SET 3 - Button N1 ---   --- */
#set3_bt1{
  background-color:#483c46;
  border-color:#483c46;
  color:#fff;
}
#set3_bt1:before,
#set3_bt1:after{
  content:"";
  display:inline-block;
  position:absolute;
  left:50%;
  width:0;
  height:2px;
  background-color:#483c46;
  -webkit-transition:all .5s;
  transition:all .5s;
}
#set3_bt1:before{
  top:0;
}
#set3_bt1:after{
  bottom:0;
}
#set3_bt1:hover{
  background-color:#fff;
  border-color:#fff;
  color:#483c46;
  box-shadow:0 0 3px 0 #483c46;
}
#set3_bt1:hover:before,
#set3_bt1:hover:after{
  left:24px;
  width:calc(100% - 48px);
}
/* ---   ---   Code SET 3 - Button N2 ---   --- */
#set3_bt2{
  background-color:#3c6e71;
  border-color:#3c6e71;
  color:#fff;
}
#set3_bt2:before,
#set3_bt2:after{
  content:"";
  display:inline-block;
  position:absolute;
  left:24px;
  width:0;
  height:2px;
  background-color:#3c6e71;
  -webkit-transition:all .5s;
  transition:all .5s;
}
#set3_bt2:before{
  top:0;
}
#set3_bt2:after{
  bottom:0;
}
#set3_bt2:hover{
  background-color:#fff;
  border-color:#fff;
  color:#3c6e71;
  box-shadow:0 0 3px 0 #3c6e71;
}
#set3_bt2:hover:before,
#set3_bt2:hover:after{
  width:calc(100% - 48px);
}
/* ---   ---   Code SET 3 - Button N3 ---   --- */
#set3_bt3{
  background-color:#70ae6e;
  border-color:#70ae6e;
  color:#fff;
}
#set3_bt3:before,
#set3_bt3:after{
  content:"";
  display:inline-block;
  position:absolute;
  right:24px;
  width:0;
  height:2px;
  background-color:#70ae6e;
  -webkit-transition:all .5s;
  transition:all .5s;
}
#set3_bt3:before{
  top:0;
}
#set3_bt3:after{
  bottom:0;
}
#set3_bt3:hover{
  background-color:#fff;
  border-color:#fff;
  color:#70ae6e;
  box-shadow:0 0 3px 0 #70ae6e;
}
#set3_bt3:hover:before,
#set3_bt3:hover:after{
  width:calc(100% - 48px);
}
/* ---   ---   Code SET 3 - Button N4 ---   --- */
#set3_bt4{
  background-color:#c0e570;
  border-color:#c0e570;
  color:#fff;
}
#set3_bt4:before,
#set3_bt4:after{
  content:"";
  display:inline-block;
  position:absolute;
  width:0;
  height:2px;
  background-color:#c0e570;
  -webkit-transition:all .5s;
  transition:all .5s;
}
#set3_bt4:before{
  left:24px;
  top:0;
}
#set3_bt4:after{
  right:24px;
  bottom:0;
}
#set3_bt4:hover{
  background-color:#fff;
  border-color:#fff;
  color:#c0e570;
  box-shadow:0 0 3px 0 #c0e570;
}
#set3_bt4:hover:before,
#set3_bt4:hover:after{
  width:calc(100% - 48px);
}
/* ---   ---   Code SET 3 - Button N5 ---   --- */
#set3_bt5{
  background-color:#f4743b;
  border-color:#f4743b;
  color:#fff;
}
#set3_bt5:before,
#set3_bt5:after{
  content:"";
  display:inline-block;
  position:absolute;
  width:100%;
  height:2px;
  background-color:#f4743b;
  -webkit-transition:all .5s;
  transition:all .5s;
}
#set3_bt5:before{
  left:0;
  top:0;
}
#set3_bt5:after{
  right:0;
  bottom:0;
}
#set3_bt5:hover{
  background-color:#fff;
  border-color:#fff;
  color:#f4743b;
  box-shadow:0 0 3px 0 #f4743b;
}
#set3_bt5:hover:before{
  left:24px;
  width:calc(100% - 48px);
  -webkit-transition:width .5s, left .5s .3s;
  transition:width .5s, left .5s .4s;
}
#set3_bt5:hover:after{
  right:24px;
  width:calc(100% - 48px);
  -webkit-transition:width .5s, right .5s .3s;
  transition:width .5s, right .5s .4s;
}
/* ---   ---   Code SET 4 - Button N1 ---   --- */
#set4_bt1{
  background-color:#fff;
  border-color:#483c46;
  color:#483c46;
}
#set4_bt1:before,
#set4_bt1:after{
  content:"";
  display:inline-block;
  position:absolute;
  width:150%;
  height:200%;
  background-color:#fff;
  -webkit-transition:all .5s;
  transition:all .5s;
}
#set4_bt1:before{
  left:0;
  top:-200%;
}
#set4_bt1:after{
  right:0;
  bottom:-200%;
}
#set4_bt1:hover{
  border-color:#fff;
  color: #fff;
  opacity:.9;
  box-shadow:0 0 3px 0 #483c46; 
}
#set4_bt1:hover:before,
#set4_bt1:hover:after{
  background-color:#483c46;
  -webkit-transform:rotate(21deg);
  transform:rotate(21deg);
  -webkit-transform-origin:bottom left;
  transform-origin:bottom left;
  z-index:-1;
}
#set4_bt1:hover:after{
  -webkit-transform-origin:top right;
  transform-origin:top right;
}
/* ---   ---   Code SET 4 - Button N2 ---   --- */
#set4_bt2{
  background-color:#fff;
  border-color:#3c6e71;
  color:#3c6e71;
}
#set4_bt2:before,
#set4_bt2:after{
  content:"";
  display:inline-block;
  position:absolute;
  width:150%;
  height:200%;
  background-color:#fff;
  -webkit-transition:all .5s;
  transition:all .5s;
}
#set4_bt2:before{
  right:0;
  top:-200%;
}
#set4_bt2:after{
  left:0;
  bottom:-200%;
}
#set4_bt2:hover{
  border-color:#fff;
  color:#fff;
  opacity:.9;
  box-shadow:0 0 3px 0 #3c6e71; 
}
#set4_bt2:hover:before,
#set4_bt2:hover:after{
  background-color:#3c6e71;
  -webkit-transform:rotate(-21deg);
  transform:rotate(-21deg);
  -webkit-transform-origin:bottom right;
  transform-origin:bottom right;
  z-index:-1;
}
#set4_bt2:hover:after{
  -webkit-transform-origin:top left;
  transform-origin:top left;
}
/* ---   ---   Code SET 4 - Button N3 ---   --- */
#set4_bt3{
  background-color:#fff;
  border-color:#70ae6e;
  color:#70ae6e;
}
#set4_bt3:before,
#set4_bt3:after{
  content:"";
  display:inline-block;
  position:absolute;
  left:0;
  width:100%;
  height:0;
  background-color:#fff;
  -webkit-transition:all .5s;
  transition:all .5s;
  z-index:-1;
}
#set4_bt3:before{
  top:0;
}
#set4_bt3:after{
  bottom:0;
}
#set4_bt3:hover{
  border-color:#fff;
  color:#fff;
  opacity:.9;
  box-shadow:0 0 3px 0 #70ae6e;
}
#set4_bt3:hover:before,
#set4_bt3:hover:after{
  background-color:#70ae6e;
  height:50%;
}
/* ---   ---   Code SET 4 - Button N4 ---   --- */
#set4_bt4{
  background-color:#fff;
  border-color:#c0e570;
  color:#c0e570;
}
#set4_bt4:before,
#set4_bt4:after{
  content:"";
  display:inline-block;
  position:absolute;
  width:0;
  height:200%;
  background-color:#fff;
  -webkit-transform: rotate(-21deg);
  transform: rotate(-21deg);
  -webkit-transition:all .8s;
  transition:all .8s;
}
#set4_bt4:before{
  right:0;
  top:-200%;
  -webkit-transform-origin:bottom right;
  transform-origin:bottom right;
}
#set4_bt4:after{
  left:0;
  bottom:-200%;
  -webkit-transform-origin:top left;
  transform-origin:top left;
}
#set4_bt4:hover{
  border-color:#fff;
  color:#fff;
  opacity:.9;
  box-shadow:0 0 3px 0 #c0e570; 
}
#set4_bt4:hover:before,
#set4_bt4:hover:after{
  background-color:#c0e570;
  width:150%;
  z-index:-1;
}
/* ---   ---   Code SET 4 - Button N5 ---   --- */
#set4_bt5{
  background-color:#fff;
  border-color:#f4743b;
  color:#f4743b;
}
#set4_bt5:before,
#set4_bt5:after{
  content:"";
  display:inline-block;
  position:absolute;
  width:0;
  height:50%;
  background-color:#fff;
  -webkit-transition:all .8s;
  transition:all .8s;
  z-index:-1;
}
#set4_bt5:before{
  left:0;
  top:0;
}
#set4_bt5:after{
  right:0;
  bottom:0;
}
#set4_bt5:hover{
  border-color:#fff;
  color:#fff;
  opacity:.9;
  box-shadow:0 0 3px 0 #f4743b; 
}
#set4_bt5:hover:before,
#set4_bt5:hover:after{
  background-color:#f4743b;
  width:100%;
}
/* ---   ---   Code SET 5 - Button N1 ---   --- */
#set5_bt1{
  background-color:#483c46;
  border-color:#483c46;
  color:#fff;
}
#set5_bt1:before,
#set5_bt1:after{
  content:attr(data-text);
  display:inline-block;
  position:absolute;
  left:0;
  width:100%;
  height:50%;
  background-color:#483c46;
  color:#FFF;
  -webkit-transition:all .5s;
  transition:all .5s;
  overflow:hidden;
}
#set5_bt1:before{
  top:-50%;
}
#set5_bt1:after{
  bottom:-50%;
  line-height:0;
}
#set5_bt1:hover{
  box-shadow:0 0 3px 0 #483c46;
}
#set5_bt1:hover:before{
  background-color:#fff;
  color:#483c46;
  top:0;
}
#set5_bt1:hover:after{
  background-color:#fff;
  color:#483c46;
  bottom:0;
}
/* ---   ---   Code SET 5 - Button N2 ---   --- */
#set5_bt2{
  background-color:#3c6e71;
  border-color:#3c6e71;
  color:#fff;
}
#set5_bt2:before,
#set5_bt2:after{
  content:attr(data-text);
  display: inline-block;
  position:absolute;
  width:100%;
  height:50%;
  background-color:#3c6e71;
  color:#FFF;
  -webkit-transition:all .5s;
  transition:all .5s;
  overflow:hidden;
}
#set5_bt2:before{
  top:0;
  left:-105%;
}
#set5_bt2:after{
  bottom:0;
  right:-105%;
  line-height:0;
}
#set5_bt2:hover{
  box-shadow:0 0 3px 0 #3c6e71;
}
#set5_bt2:hover:before{
  background-color:#fff;
  color:#3c6e71;
  left:0;
}
#set5_bt2:hover:after{
  background-color:#fff;
  color:#3c6e71;
  right:0;
}
/* ---   ---   Code SET 5 - Button N3 ---   --- */
#set5_bt3{
  background-color:#70ae6e;
  border-color:#70ae6e;
  color:#fff;
}
#set5_bt3:before{
  content:attr(data-text);
  display:inline-block;
  position:absolute;
  top:0;
  right:-155%;
  width:150%;
  height:100%;
  background-color:#70ae6e;
  color:#fff;
  border-top-left-radius:1.5em;
  border-bottom-left-radius:1.5em;
  -webkit-transition:all .5s;
  transition:all .5s;
}
#set5_bt3:hover{
  box-shadow:0 0 3px 0 #70ae6e;
}
#set5_bt3:hover:before{
  background-color:#fff;
  color:#70ae6e;
  right:0;
  padding-left: 50%;
  width: 100%;
  -webkit-transition:right .5s, padding-left .3s .5s, width .3s .5s;
  transition:right .5s, padding-left .3s .5s, width .3s .5s;
}
/* ---   ---   Code SET 5 - Button N4 ---   --- */
#set5_bt4{
  background-color:#c0e570;
  border-color:#c0e570;
  color:#fff;
}
#set5_bt4:before{
  content:attr(data-text);
  display:block;
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:5%;
  background-color:#fff;
  color:transparent;
  -webkit-transition:all .5s;
  transition:all .5s;
  visibility:hidden;
}
#set5_bt4:hover{
  box-shadow:0 0 3px 0 #c0e570;
}
#set5_bt4:hover:before{
  background-color:#fff;
  color:#c0e570;
  height:100%;
  top:0;
  visibility:visible;
}
/* ---   ---   Code SET 5 - Button N5 ---   --- */
#set5_bt5{
  background-color:#f4743b;
  border-color:#f4743b;
  color:#fff;
}
#set5_bt5:before{
  content:attr(data-text);
  display:inline-block;
  position:absolute;
  top:0;
  right:-140%;
  width:100%;
  height:100%;
  background-color:#fff;
  color:#f4743b;
  -webkit-transition:all .5s;
  transition:all .5s;
  -webkit-transform:skewX(-50deg);
  transform:skewX(-50deg);
}
#set5_bt5:hover{
  box-shadow:0 0 3px 0 #f4743b;
}
#set5_bt5:hover:before{
  background-color:#fff;
  color:#f4743b;
  right:0;
  -webkit-transform:skewX(0);
  transform:skewX(0);
  -webkit-transition:right .6s ,-webkit-transform .25s .35s ;
  transition:right .6s ,transform .25s .35s ;
}