.plus { float:left;  text-align: center; width: 33.33%;  padding:14px;  }

.plus a {  text-align: center; margin: auto;width: 100%;  height:280px; display: block;  background: #fff; border-radius: 10px; border:1px solid #d5d9e0;  -webkit-box-shadow: 0px 5px 20px -10px rgba(0,0,0,0.3);  -moz-box-shadow: 0px 5px 20px -10px rgba(0,0,0,0.3);  box-shadow: 0px 5px 20px -10px rgba(0,0,0,0.3);  -webkit-transition: all 300ms linear;  -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear;  transition: all 300ms linear; }

.plus2 a { height:240px;} 

.plus a:hover { background: url(../img/bg_01.png)  #4d566a ;  transition: 0.5s ease; }
.plus a:link { color: #616b75; }

.plus a:hover .ca-main { color: #fff; opacity: 1;  -webkit-animation: moveFromTop 300ms ease-in-out;  -moz-animation: moveFromTop 300ms ease-in-out; -ms-animation: moveFromTop 300ms ease-in-out;}
.plus a:hover p { color: #fff; opacity: 1;  -webkit-animation: moveFromTop 300ms ease-in-out;  -moz-animation: moveFromTop 300ms ease-in-out; -ms-animation: moveFromTop 300ms ease-in-out;}

.plus  p { text-align:center; font-size:16px; letter-spacing: 0.03em; line-height: 24px; }
.plus:hover  span { background: url('../img/st3.png') no-repeat; margin: auto; display: block; width: 47px; height:19px;-webkit-animation: moveFromBottom 300ms ease-in-out;  -moz-animation: moveFromBottom 300ms ease-in-out;  -ms-animation: moveFromBottom 300ms ease-in-out; }


.ca-content {  padding:20px; padding-top: 4px; }
.ca-main { color: #616c81; margin:10px;  font-size: 20px;  -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear;  -o-transition: all 300ms linear; -ms-transition: all 300ms linear;  transition: all 300ms linear; }

.icoim1  { background:url(../img/icon_01.png);  }
.icoim2  { background:url(../img/icon_02.png);  }
.icoim3  { background:url(../img/icon_03.png);  }
.icoim4  { background:url(../img/icon_04.png);  }
.icoim5  { background:url(../img/icon_05.png); }
.icoim6  { background:url(../img/icon_06.png); }

.icoim1, .icoim2, .icoim3,  .icoim4, .icoim5, .icoim6 { background-size:100%; height:80px; widht:80px; }

.ico  { display:inline-block; overflow:hidden; height: 80px; width: 80px;  margin-top:30px; -webkit-transform:scale(1.0); -moz-transform:scale(1.0); -ms-transform:scale(1.0); -o-transform:scale(1.0); transform:scale(1.0); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }

.ico2  {margin-top:50px;}


.plus a:hover  .ico  { -webkit-transform:scale(1.2); -moz-transform:scale(1.2);  -ms-transform:scale(1.2);  -o-transform:scale(1.2);  transform:scale(1.2); }

.tabs  { display: inline-block; width:100%;  margin-top:20px; margin-bottom:20px; }
.tabs div.active a  { background:#8c97a8; width:100%; }

.tabs h4  {  font-size: 20px;  font-weight: bold; }

@media only screen and (max-width: 1280px) {.plus { width: 33,33%; } }
@media only screen and (max-width: 920px) {.plus { width: 50%; } }
@media only screen and (max-width: 480px) {.plus { width: 100%; } }

@-webkit-keyframes moveFromBottom {  from { opacity: 0;  -webkit-transform: translateX(-200%); }  to { opacity: 1;  -webkit-transform: translateX(0%);  }}
@-moz-keyframes moveFromBottom { from { opacity: 0;  -moz-transform: translateX(-200%);  } to  {opacity: 1; -moz-transform: translateX(0%);  }  }
@-ms-keyframes moveFromBottom {  from { opacity: 0;  -ms-transform: translateX(-200%);  } to {  opacity: 1; -ms-transform: translateX(0%);  }}


.flip-box {
  background-color: transparent;
  width: 100%;
  height: 278px; 
  border: 1px solid red;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: #555;
  color: white;
  transform: rotateY(180deg);
}


.cardBox { 
  float: left;
  font-size: 1.2em;
  padding:0 15px 0 15px;
  perspective: 800px;
  transition: all 0.3s ease 0s;
  width: 33.33%;  
}

.cardBox h3 { font-size:24px; font-weight: normal; color: #333;  margin-top:40px; }

.cardBox h4 {  font-size:18px; line-height: 24px; color: #fff;  margin-bottom:30px; margin-left:14px; margin-right: 14px;  }

.cardBox:hover .card { 
  transform: rotateY( 180deg);
}

.card {
  cursor: pointer;
  height: 276px;
  transform-style: preserve-3d;
  transition: transform 1s ease 0s;
  width: 100%;
  -webkit-animation: giro 1s 1;
  animation: giro 1s 1;
}

.card p {
  margin-bottom: 1.8em;
}

.card  .front img { width:100%; height:100%; border-radius: 6px; }

.card .front, .card .back { border-radius: 6px; 
  backface-visibility: hidden;
  box-sizing: border-box;
  color: white;
  display: block;
  font-size: 1.2em;
  height: 100%;
  padding: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}

.card .front strong {
  background: #fff;
  border-radius: 100%;
  color: #222;
  font-size: 1.5em;
  line-height: 30px;
  padding: 0 20px 4px 6px;
}

.card .back {  background: #333;
  transform: rotateY( 180deg);
}

.card .back a {
  padding:10px 20px;
  background: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.8em;
  transition: all 0.2s ease 0s;
}

.card .back a:hover {
  background: #fff;
  color: #333;
  text-shadow: 0 0 1px #333;
}

.cardBox:nth-child(1) .card .back {
  background: cornflowerblue;
}

.cardBox:nth-child(2) .card .back {
  background: orange;
}

.cardBox:nth-child(3) .card .back {
  background: yellowgreen;
}

.cardBox:nth-child(4) .card .back {
  background: #33a2d5;
}

.cardBox:nth-child(2) .card {
  -webkit-animation: giro 1.5s 1;
  animation: giro 1.5s 1;
}

.cardBox:nth-child(3) .card {
  -webkit-animation: giro 2s 1;
  animation: giro 2s 1;
}

.cardBox:nth-child(4) .card {
  -webkit-animation: giro 2.5s 1;
  animation: giro 2.5s 1;
}

@-webkit-keyframes giro {
  from {
    transform: rotateY( 180deg);
  }
  to {
    transform: rotateY( 0deg);
  }
}

@keyframes giro {
  from {
    transform: rotateY( 180deg);
  }
  to {
    transform: rotateY( 0deg);
  }
}

@media screen and (max-width: 767px) { .cardBox {;margin-top: 3%;width: 46%;} .card {height: 285px; } .cardBox:last-child {  margin-bottom: 3%; }}
@media screen and (max-width: 600px) {.cardBox { width: 100%; }.card { height: 300px; }}
@media (max-width: 600px)  {  .plus { width:100%;} .plus { padding: 5px 0px 5px 0px;}}
@media (max-width: 400px) { .card { height: 200px; } .cardBox h3 { font-size:20px; font-weight: normal; color: #333;  margin-top:20px; margin-bottom: 0;} .cardBox h4 {  font-size:15px; line-height: 20px; color: #fff; margin-bottom:20px; margin-top: 10px;  } .ca-main { font-size: 18px; }
.ico { height: 55px; width: 55px; margin-top: 20px;} .plus a:hover .icoim1, .plus a:hover .icoim2, .plus a:hover .icoim3, .plus a:hover .icoim4, .plus a:hover .icoim5,  .plus a:hover .icoim6  { background-position: 0px 60px; } .plus a { height: 100%;} .plus p { font-size: 14px; }  .plus span { display: none; }}