@font-face{
    font-family: 'cabin-italic';
    src: url('../fonts/Cabin-Italic.ttf');
}

@font-face {
    font-family: cabin-regular;
    src: url("../fonts/Cabin-Regular.ttf");
}

@font-face {
    font-family: cabin-bold;
    src: url("../fonts/Cabin-Bold.ttf");
}

@font-face {
    font-family: cabin-medium;
    src: url("../fonts/Cabin-Medium.ttf");
}

*{
  margin:0;
  padding:0;
}

.tab{
    width:97%;
    height:83%;
    border-radius:15px;
    position:absolute;
    display:none;
    background-size:cover !important;
    overflow:hidden;
}

#tab_1{
  display:block;
  background:url("../img/bg_1_7.png");
}

#tab_2{
    background:url("../img/bg_1_7.png");
}

#tab_3{
  background:url("../img/bg_1_8.png");
}

#tab_4{
  background:url("../img/bg_1_9.png");
}

#tab_5, #tab_8{
  background:url("../img/bg_1_10.png");
}

#tab_6, #tab_9{
  background:url("../img/bg_1_11.png");
}

#tab_7{
  background:url("../img/bg_1_12.png");
}

#tab_nav{
  position:absolute;
  width:15%;
  height:9%;
  right:4%;
  top:16%;
  /* background:red; */
  z-index:10;
}

#tab_nav > div{
  display:inline-block;
  float:left;
  height:100%;
  width: 40%;
  margin-right: 15%;
  border-radius:10px;
  box-shadow: 0px 0px 0px 3px #2D415D,
  0px 0px 0px 8px #ABE2FB,
  0px 0px 0px 11px #2D415D;
}

#tab_nav > div > p{
  font-family:'cabin-regular';
  font-size:2em;
  color:#FFFFFF;
  text-align:center;
  position:relative;
  top:50%;
  transform:translateY(-50%);
}

#tab_nav > div:last-of-type{
  margin-right:0;
}

#tab_nav > div:not(.active):hover{
  cursor:pointer;
  transform:scale(1.05);
}

#tab_nav > div:not(.active):active{
  transform:scale(0.95);
}

#tab_nav > div:not(.active){
  background: rgba(125,160,204,1);
  background: -moz-linear-gradient(-45deg, rgba(125,160,204,1) 0%, rgba(125,160,204,1) 50%, rgba(92,137,191,1) 51%, rgba(92,137,191,1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(125,160,204,1)), color-stop(50%, rgba(125,160,204,1)), color-stop(51%, rgba(92,137,191,1)), color-stop(100%, rgba(92,137,191,1)));
  background: -webkit-linear-gradient(-45deg, rgba(125,160,204,1) 0%, rgba(125,160,204,1) 50%, rgba(92,137,191,1) 51%, rgba(92,137,191,1) 100%);
  background: -o-linear-gradient(-45deg, rgba(125,160,204,1) 0%, rgba(125,160,204,1) 50%, rgba(92,137,191,1) 51%, rgba(92,137,191,1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(125,160,204,1) 0%, rgba(125,160,204,1) 50%, rgba(92,137,191,1) 51%, rgba(92,137,191,1) 100%);
  background: linear-gradient(135deg, rgba(125,160,204,1) 0%, rgba(125,160,204,1) 50%, rgba(92,137,191,1) 51%, rgba(92,137,191,1) 100%);
}

#tab_nav > div.active{
  background: rgba(87,103,125,1);
  background: -moz-linear-gradient(-45deg, rgba(87,103,125,1) 0%, rgba(87,103,125,1) 51%, rgba(45,65,93,1) 51%, rgba(45,65,93,1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(87,103,125,1)), color-stop(51%, rgba(87,103,125,1)), color-stop(51%, rgba(45,65,93,1)), color-stop(100%, rgba(45,65,93,1)));
  background: -webkit-linear-gradient(-45deg, rgba(87,103,125,1) 0%, rgba(87,103,125,1) 51%, rgba(45,65,93,1) 51%, rgba(45,65,93,1) 100%);
  background: -o-linear-gradient(-45deg, rgba(87,103,125,1) 0%, rgba(87,103,125,1) 51%, rgba(45,65,93,1) 51%, rgba(45,65,93,1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(87,103,125,1) 0%, rgba(87,103,125,1) 51%, rgba(45,65,93,1) 51%, rgba(45,65,93,1) 100%);
  background: linear-gradient(135deg, rgba(87,103,125,1) 0%, rgba(87,103,125,1) 51%, rgba(45,65,93,1) 51%, rgba(45,65,93,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57677d', endColorstr='#2d415d', GradientType=1 );
}

.tab_nav{
  position:absolute;
  bottom:0;
  width:16%;
  height:9.5%;
  left: 42%;
  z-index:1;
}

.tab_nav div{
  display:inline-block;
  float:left;
  height:100%;
}

.custom_btn{
    width:33.3%;
    height:100%;
    background: #64b238;
    color:#FFF;
    font-size:3em;
    text-align:center;
    border-bottom:solid 6px #006633;
    bottom:0;
    position:absolute;
}

.custom_btn:hover{
    cursor:pointer;
    background:#79C84F;
}

.custom_btn:active{
    transform:scaleY(0.8);
    background:#006633;
}

.btn_previous{
  border-radius:10px 0 0 0;
  left:1%;
}

.btn_home{
  border-radius:0;
  right:33%;
}

.btn_next{
  border-radius:0px 10px 0 0;
  right:0;
}

.item{
  position:absolute;
  width:40%;
  top:24%;
}

.item:hover{
  cursor:pointer;
  transform:scale(1.05);
}

.item:active{
  transform:scale(0.95);
}

.item:nth-of-type(1){
  left:5%;
}

.item:nth-of-type(2){
  left:55%;
}

.drop{
  position:absolute;
  width:60.3%;
  height:65%;
  left:3.1%;
  top:3.8%;
  border-radius:19px;
}

.drop > img{
  display:inline-block;
  float:left;
  width:20%;
  margin-left:5%;
  margin-top:2%

}

.drags{
  position:absolute;
  width:30%;
  height:50%;
  /* background:red; */
  left:67%;
  top:16%;
}

.drags > img{
  display:inline-block;
  float:left;
  width:40%;
  margin-bottom:4%;
}

.drags > img:nth-of-type(odd){
  margin-right:9%;
}

.drags > img:nth-of-type(4){
  width:50%;
}

.drag:hover{
  cursor:pointer;
  transform:scale(1.05);
}

.drag:active{
  transform:scale(0.95);
}

.grabbing{
  cursor: -webkit-grabbing; 
  cursor: -moz-grabbing;
}

.dragging{
  pointer-events:none;
}

.animation{
  transition:all 0.7s ease;
}

.highlight{
  border:dashed 2px gray;
}

#video{
    position:absolute;
    top:18%;
    left:20%;
    width:60%;
    height:65%;
    background:black;
}

#video video{
    width:100%;
    height:100%;
    border:none;
    display:none;
}

.btn_play{
    height:25%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
}

.btn_play:hover{
    cursor:pointer;
    opacity:0.85;
    height:27%;
}

.btn_play:active{
    opacity:1;
    height:24%;
}

#tab_7 .btn_previous{
  border-radius:10px 10px 0 0;
}

#tab_4 .btn_home{
  border-radius:0 10px 0 0;
}

#tab_5 .btn_previous, #tab_6 .btn_previous{
  border-radius:10px 10px 0 0;
}


/* NEW STYLES */

.point{
  display:inline-block;
  float:left;
  height: 10%;
  width:100%;
  border-radius:100%;
  margin-bottom: 413%;
  box-sizing:border-box;
  border: solid 2px #F9F9ED;
}

.point:not(.dropped):hover{
  cursor:pointer;
}

.point:last-of-type{
  margin-right:0;
  margin-left:1%;
}

#circle_pointer{
  position:absolute;
  width:2%;
  height:4%;
  border-radius:100%;
  pointer-events:none;
  background:#ED1E79;
  display:none;
}

#svg{
  position:absolute;
  top:0;
  left:0;
  pointer-events:none;
  z-index:10;
}

#line{
  display:none;
}

.show{
  display:block !important;
}

#tab_1 .tab_nav{
  left:94%;
}

.point > div{
  width:90%;
  height:90%;
  border-radius:100%;
  background:#ED1E79;
  position:relative;
  left:5%;
  top:5%;
  display:none;
}

#tab_1 .btn_help{
  border-radius:10px 10px 0 0;
}

.selecting{
  cursor:-webkit-grabbing !important;
  cursor:-moz-grabbing !important;
}

.dropping{
  display:block !important;
}

.row{
  position:absolute;
  height: 49%;
  width: 2%;
  /* background:purple; */
  top: 36%;
}

.row:nth-of-type(1){
  left: 45%;
}

.row:nth-of-type(2){
  left: 76%;
}

#tab_9 .btn_previous{
  border-radius:10px 10px 0 0;
}

#tab_8 .btn_next{
  border-radius:0 10px 0 0;
}