/* © Type on Point 2017 - All Rights Reserved */

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }

.typeonpoint-color:before {
  content: url(../img/color_icon.svg);
    cursor: pointer;
    opacity: .9;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 3;
    right: 134;
}


#fontUpload {
  font-family: "Fira Sans", "FontAwesome";
  height: 39px;
  display: inline-block;
}

#upLoadImg{
  font-family: "Fira Sans", "FontAwesome";
  height: 35px;
  width: 94px;
  display: inline-block;
  font-size: 15px;
  margin-left: 5px;
}

.styleimg, .blendImg, .filterImg, .shadowimg, .splitimg {
  width: 65px;
  height:65px;
  cursor: pointer;
  opacity: .65;
}

.styleimg.styleactive{
opacity: 1;
box-shadow: 0 0 2px 3px #fff;
/* -webkit-filter: brightness(120%); 
filter: brightness(120%); */
}

/* .filterImg{
  background-size: cover;
} */

/*add checkmark*/
@-webkit-keyframes check {
  0% {
          height: 0;
          width: 0;
      }
  
      33.3333% {
          width: 10px;
          height: 0;
      }
    
  }
  @-moz-keyframes check {
      0% {
          height: 0;
          width: 0;
      }
  
      33.3333% {
          width: 20px;
          height: 0;
      }
  }
  @-ms-keyframes check {
      0% {
          height: 0;
          width: 0;
      }
  
      33.3333% {
          width: 10px;
          height: 0;
      }
  }
  @keyframes check {
      0% {
          height: 0;
          width: 0;
      }
  
      33.3333% {
          width: 10px;
          height: 0;
      }
  }
  
  .checkmark {
      display: none;
      height: 75px; 
      width: 75px;
      position: absolute;
      top: 0;
      left: 0;
      touch-action: none;
      pointer-events: none;
  }
  
  .checkmark:after {
      -webkit-animation: check .8s;
      -moz-animation: check .8s ;
      -o-animation: check .8s;
      animation: check .8s;
      -moz-transform: scaleX(-1) rotate(145deg);
      -ms-transform: scaleX(-1) rotate(145deg);
      -webkit-transform: scaleX(-1) rotate(145deg);
      transform: scaleX(-1) rotate(140deg);
      -moz-transform-origin: left top;
      -ms-transform-origin: left top;
      -webkit-transform-origin: left top;
      transform-origin: left top;
      border-right: 5px solid forestgreen;
      border-top: 5px solid forestgreen;
      content: '';
      display: block;
      height: 21px;
      width: 11px;
      position: absolute;
      top: 35;
      left: 2;
      margin: 20px 0 0 40px;
  }

  .boutline {
    box-shadow: 0 0 0 2px rgb(3, 87, 196);
    width: 65px;
    height: 65px;
    z-index: 999;
    margin: 2px 8px 4px 0;
    position: relative;
    display: block;
    float: left;
    border-radius: 2px;
  }

.routline {
  box-shadow: 0 0 0 2px #B72E2E;
  width:65px;
  height: 65px;
  z-index: 999;
  margin: 2px 8px 4px 0;
  position: relative;
  display: block;
  float: left;
  border-radius: 2px;
}

.b2 {
  box-shadow: 0 0 0 2px rgb(20, 20, 20);
}

/* hover text highlight menu */
::selection {
  background: #276ACC; 
  color: #fff;
}

::-moz-selection {
  background: #276ACC; 
  color: #fff;
}

.top_links {
  font-weight: 600; 
  margin: 0 0 0 12px;
}


#tyTour{
  cursor: pointer;
  position: absolute;
  right: 124px;
  top: 6px;
}

/* Navigatin tools */
#studioBtns{
  /* float: right; */
  position: absolute;
  right: 45px;
  top: 2px;
  width: 82px;
  /* border: 1px solid */
}

.topSpacer{
	height: 55px;
}

.typeonpoint-grid {
	  /* content: url(../img/grid_icon.svg); */
    cursor: pointer;
    opacity: .9;
    width: 20px;
    height: 20px;
    margin-left: 14px;
}

/* Z index contorols */
#ZIcontrol{
  cursor: pointer;
  width:22px;
  height: 25px;
  display: inline-block;
  margin-left: 16px;
}

#topLayer{
  position: relative;
  z-index: 2 !important;
  margin-bottom: -10px;
  margin-top: 4px;
  background-color:  rgb(1, 77, 178);
  box-shadow: 1px 1px 2px #161616;
  height: 15px;
  width:15px;
  -webkit-transform: perspective(200px) rotateX(45deg) rotateY(1deg) rotateZ(45deg);
  -moz-transform: perspective(200px) rotateX(45deg) rotateY(1deg) rotateZ(45deg);
  -o-transform: perspective(200px) rotateX(45deg) rotateY(1deg) rotateZ(45deg);
  -ms-transform: perspective(200px) rotateX(45deg) rotateY(1deg) rotateZ(45deg);
  transform: perspective(200px) rotateX(45deg) rotateY(1deg) rotateZ(45deg);
}

#backLayer{
  position: relative;
  background-color:  rgb(1, 77, 178);
  height: 15px;
  width:15px;
  box-shadow: 1px 1px 2px #161616;
  -webkit-transform: perspective(200px) rotateX(45deg) rotateY(1deg) rotateZ(45deg);
  -moz-transform: perspective(200px) rotateX(45deg) rotateY(1deg) rotateZ(45deg);
  -o-transform: perspective(200px) rotateX(45deg) rotateY(1deg) rotateZ(45deg);
  -ms-transform: perspective(200px) rotateX(45deg) rotateY(1deg) rotateZ(45deg);
  transform: perspective(200px) rotateX(45deg) rotateY(1deg) rotateZ(45deg);
}

.redZSquare{
  background-color: #B72E2E !important;
}

.toTop{
  z-index: 99 !important;
  position: static;
}

.TLhidden{display: none;}

#cookie{
  width: 258px;
  background-color: hsla(0, 0%, 9%, 0.1);
  /* position: absolute; */
  bottom: 20px;
  left: calc(50vw - 92);
  color: #f2f2f2;
  padding: 15px;
  /* text-align: center; */
  cursor: pointer;
  border-radius: 4px;
  margin: 0 auto;
}

/*==============================================
Small Screens 
================================================*/
@media screen and (max-width: 840px) {
  #tyTour{
    top: 2px;
  }

  #studioBtns{
    top: -2px;
  }

  .topSpacer{
    height: 40px;
  }

}
  @media screen and (max-width: 456px) {

  .checkmark {
    height: 40px; 
    width: 40px;
  }

  .checkmark:after {
    top: 33;
    right: 8;
  }

  .top_links{
    display: none;
  }  

}