:root {

  --prime: #3b4654;

  --second: #e6e6e6;

  --shadowDark: #bcc6d2;

  --shadowLight: #f6faff;

  --font: #8f949b;

  --radius:3rem;

}



.card-wrapper {

  margin: 0 auto;

  padding: 1rem 0 5rem 0;

  /*max-width: 80%;

  max-height: 80vh;*/

  width: 90%;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  background: #e9e9e9;

  border-radius: 0.5rem;

  border: 1px solid #cdcdcd;

}



.card-header {

  width: 40%;

  padding: 0 0 2rem 0;

  display: flex;

  justify-content: flex-start;

  align-items: center;

  flex-direction: column

}



.card-header h1, .box-item h1 {

  color: #8f949b;

  font-weight: 700;

  font-size: 1.4rem;

  margin: 4rem 0 0 0;

  padding: 0

}



.card-header p {

  color: var(--font);

  font-size: 1.3rem;

  margin: 0;

  padding: 0;

}



.card-logo-img {

  width: 50%;

  height: auto;

  /*padding: 2rem*/

}



 .card-button {

  background-color: var(--second);

  border: none;

  font-size: 1.2rem;

  padding: 0.9rem 2rem 0.7rem 2.5rem;

  text-transform: uppercase;

  font-weight: bolder;

  color: var(--font);

  margin: 1rem 0 1.2rem 0

}



.card-body {

  display: flex;

  justify-content: center;

  align-items: stretch;

  flex-direction: row;

  width: 90%;

}



.card-box {

  display: flex;

  align-items:stretch;

  flex-direction: column;

  width:30%;

  margin:0 2.5%;

  background:#cfcfcf;

  border-radius: 0.5rem;

  border:1px solid #d8d8d8;

  transition: all 350ms;

}

.card-box-body:hover {

  background: #e8e8e8;

  border-color: var(--blue);

}





.card-box h3 {

  text-align: center;

  color: #fff;

}

.card-shadow {

  -webkit-box-shadow: 0 10px 6px -6px #777;

  -moz-box-shadow: 0 10px 6px -6px #777;

   box-shadow: 0 10px 6px -6px #777;

}



.card-box-header {

  background: var(--blue);

  -webkit-box-shadow: 0 10px 6px -6px #777;

  -moz-box-shadow: 0 10px 6px -6px #777;

   box-shadow: 0 10px 6px -6px #777;

   z-index:2;

}



.card-box-body {

  display: flex;

  flex-direction: row;

  background: #e0e0e0;

  align-items:stretch;

  z-index:1;

  padding:0.9rem 0.8rem;

  transition: all 350ms;

}



.box-icon {

  display: flex;

  align-items: center;

}



.box-icon .fa {

  font-size: 5rem;

  color:#8f8f8f;

}



.box-right {

  margin-left:auto;

  text-align: right;

  line-height: 0.2rem;

}



.box-right h1 {

  font-size: 2rem;

}



.box-right span {

  font-weight: bold;

  color:var(--blue);

}



.card-box-footer {

  display: flex;

  background: #e5e5e5;

  padding: 0.5rem;

  align-items: center;

  text-decoration: none;

  transition: all 350ms;

  border-top: 1px solid #bebebe;

}



.card-box-footer:hover {

  background: var(--blue);

  color:#fff;

}



.card-box-footer-icon {

  margin-left:auto;

}



.card-box-footer-icon .fa {

  font-size: 1.2rem;

}



.card-box-footer-left span {

  font-weight: bolder;

  font-size:1rem;

}



@media (max-width: 1400px) {

  .card-body {

    width: 100%;

  }

  .card-box {

    width: 40%;

  }



  .card-header {

    width: unset;

    padding: 0 1rem;

  }

}

@media (max-width: 1100px) {

  .card-box {

    width: 90%;

    margin: 1rem auto 1.5rem auto;

  }

  .card-body {

    width: 100%;

    display: block;

  }

}



@media (max-width: 768px) {

  .card-wrapper {

    width: 100%;

  }

  .card-logo-img {

    padding: 0;

  }

}



#colorpicker {

    padding: 20px;

    position: absolute;

    top: 130%;

    left: auto;

    right: 0;

    background-color: #2a2a2a;

    border: 1px solid #BBB;

    display: none;

    z-index: 999999;

    box-sizing: content-box;

    font: normal 10px verdana;

    color: #ababab;

    border-radius: 4px;

    box-shadow: 0 1px 8px rgba(0,0,0,0.5);

}



.rgbaRange {

    background-color: #2a2a2a;

}



#colorpicker .btnOK {

    background-color: #267bba;

}



/*==================================================================*/