.cpModal {
  height: 100%;
  width: 20%;
  background-color: white;
  position: fixed;
  top: 0;
  left: -20%;
  z-index: 100; }

.cpClickLine {
  height: 100%;
  width: 15px;
  background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, transparent 95%);
  background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, transparent 95%);
  background: -o-linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, transparent 95%);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, transparent 95%);
  float: right;
  margin-right: -15px;
  background-size: 25px 25px;
  background-position: -8px 0px;
  position: relative; }
  .cpClickLine .tab {
    position: relative;
    width: 50px;
    height: auto; }
    .cpClickLine .tab span {
      display: block;
      background: #3f99a1;
      width: 200px;
      height: 40px;
      line-height: 40px;
      position: relative;
      left: -80px;
      top: 100px;
      color: #fff;
      text-align: center;
      font-weight: 600;
      text-transform: uppercase;
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
      .cpClickLine .tab span i {
        margin-right: 10px; }
.cpClickLine .tab2 span {
      display: block;
      background: #1f99a1;
      width: 200px;
      height: 40px;
      line-height: 40px;
      position: relative;
      left: -80px;
      top: 264px;
      color: #fff;
      text-align: center;
      font-weight: 600;
      text-transform: uppercase;
      cursor: pointer;
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
      .cpClickLine .tab2 span {
        background-color: red;
      }




      .cpClickLine .tab span i {
        margin-right: 10px; }
.cpMenuHeader, .cpMenuFooter {
  padding: 10px; }
  .cpMenuHeader p, .cpMenuFooter p {
    font-size: 0.7em;
    margin: 0; }
  .cpMenuHeader h5, .cpMenuFooter h5 {
    font-weight: 400; }

.cpLogo {
  width: 70%;
  max-width: 180px;
  margin: 0 auto; }
  .cpLogo img {
    width: 100%; }

.cpMenuContent {
  width: 100%;
  height: 100%;
  float: left;
  border-right: 6px solid #3f99a1; }

.cpSocialInfo label {
  display: block; }

.cpContactInfo label {
  display: block; }

.cpTitle {
  width: 100%;
  background: #56b5bd;
  color: #fff;
  padding: 6px 10px;
  font-size: 16px;
  position: relative; }
  .cpTitle i {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 38px;
    line-height: 38px;
    text-align: center; }

.cpAddressInfo_box, .cpContactInfo_box, .cpCompanyInfo_box, .cpSocialInfo_box {
  padding: 0 5px; }
  .cpAddressInfo_box li, .cpContactInfo_box li, .cpCompanyInfo_box li, .cpSocialInfo_box li {
    padding-bottom: 5px;
    background: #eee; }
    .cpAddressInfo_box li:focus, .cpAddressInfo_box li:hover, .cpContactInfo_box li:focus, .cpContactInfo_box li:hover, .cpCompanyInfo_box li:focus, .cpCompanyInfo_box li:hover, .cpSocialInfo_box li:focus, .cpSocialInfo_box li:hover {
      background: #d8dde5; }
    .cpAddressInfo_box li:last-child, .cpContactInfo_box li:last-child, .cpCompanyInfo_box li:last-child, .cpSocialInfo_box li:last-child {
      padding-bottom: 10px; }

label {
  font-size: 11px;
  color: #818181;
  font-weight: 600; }

input {
  width: 100%;
  padding: 4px 6px;
  outline: none;
  border: 1px solid #888; }
  input:hover {
    border: 1px solid #56b5bd; }
  input:focus {
    border: 1px solid #56b5bd; }

.cpMenuButton {
  display: block;
  width: 80%;
  max-width: 280px;
  height: 40px;
  line-height: 40px;
  margin: 20px auto;
  background: #56b5bd;
  color: #fff;
  text-transform: uppercase;
  outline: none;
  border: none;
  -webkit-transition: all;
  -webkit-transition-delay: 0s;
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: ease; }
  .cpMenuButton:hover {
    box-shadow: inset 280px 0 #31777c, inset -280px 0 #31777c; }

/* ANIMATIONS */
.cpShowMenu {
  -webkit-animation: cpShowMenuAnimation 1s;
  /* Chrome, Safari, Opera */
  animation: cpShowMenuAnimation 1s;
  left: 0%; }

.cpHideMenu {
  -webkit-animation: cpHideMenuAnimation 1s;
  /* Chrome, Safari, Opera */
  animation: cpHideMenuAnimation 1s;
  left: -20%; }

/* Chrome, Safari, Opera */
@-webkit-keyframes cpShowMenuAnimation {
  from {
    left: -20%; }
  to {
    left: 0%; } }
/* Standard syntax */
@keyframes cpShowMenuAnimation {
  from {
    left: -20%; }
  to {
    left: 0%; } }
/* Chrome, Safari, Opera */
@-webkit-keyframes cpHideMenuAnimation {
  from {
    left: 0%; }
  to {
    left: -20%; } }
/* Standard syntax */
@keyframes cpHideMenuAnimation {
  from {
    left: 0%; }
  to {
    left: -20%; } }
.files img {
  width: 150px;
  height: 150px; }
.tabClick{
  cursor: pointer;
}



.removePhoto{
  cursor: pointer;
}