/*
body{
  background: url(images/bg.png);
  background-repeat: repeat;
}
html {
	box-sizing: border-box;line-height: 1.5;
	font-family: "Roboto", sans-serif;
	font-weight: normal;
	color: rgba(0,0,0,0.87);
}
.container{
	margin: 0 auto;
	max-width: 1280px;
  	width: 80%;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.1
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	font-weight: inherit
}
h1 {
	font-size: 4.2rem;
	line-height: 110%;
	margin: 2.1rem 0 1.68rem 0
}
h2 {
	font-size: 3.56rem;
	line-height: 110%;
	margin: 1.78rem 0 1.424rem 0
}
h3 {
	font-size: 2.92rem;
	line-height: 110%;
	margin: 1.46rem 0 1.168rem 0
}
h4 {
	font-size: 2.28rem;
	line-height: 110%;
	margin: 1.14rem 0 0.912rem 0
}
h5 {
	font-size: 1.64rem;
	line-height: 110%;
	margin: 0.82rem 0 0.656rem 0
}
h6 {
	font-size: 1rem;
	line-height: 110%;
	margin: 0.5rem 0 0.4rem 0
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.1
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	font-weight: inherit
}
h1 {
	font-size: 4.2rem;
	line-height: 110%;
	margin: 2.1rem 0 1.68rem 0
}
h2 {
	font-size: 3.56rem;
	line-height: 110%;
	margin: 1.78rem 0 1.424rem 0
}
h3 {
	font-size: 2.92rem;
	line-height: 110%;
	margin: 1.46rem 0 1.168rem 0
}
h4 {
	font-size: 2.28rem;
	line-height: 110%;
	margin: 1.14rem 0 0.912rem 0
}
h5 {
	font-size: 1.64rem;
	line-height: 110%;
	margin: 0.82rem 0 0.656rem 0
}
h6 {
	font-size: 1rem;
	line-height: 110%;
	margin: 0.5rem 0 0.4rem 0
}
*/
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}
.card h3 {
	font-size: 2.92rem;
	line-height: 110%;
	margin: 1.46rem 0 1.168rem 0
}
.card h5 {
	font-size: 1.64rem;
	line-height: 110%;
	margin: 0.82rem 0 0.656rem 0
}
.card h6 {
	font-size: 1rem;
	line-height: 110%;
	margin: 0.5rem 0 0.4rem 0
}
.card-bg {
	background-size: cover !important;
	background-repeat: no-repeat !important;
}
.card_bg1{ background : url(../images/flip/1.JPG);}
.card_bg2{ background : url(../images/flip/2.JPG);}
.card_bg3{ background : url(../images/flip/3.JPG);}
.card_bg4{ background : url(../images/flip/4.JPG);}
.card_bg5{ background : url(../images/flip/5.JPG);}
.card_bg6{ background : url(../images/flip/6.JPG);}
.card_bg7{ background : url(../images/flip/7.JPG);}
.card_bg8{ background : url(../images/flip/8.JPG);}
.card_bg9{ background : url(../images/flip/9.JPG);}
.card_bg10{ background : url(../images/flip/10.JPG);}
.card_bg11{ background : url(../images/flip/11.JPG);}
.card_bg12{ background : url(../images/flip/12.JPG);}
.card_bg13{ background : url(../images/flip/13.JPG);}
.card_bg14{ background : url(../images/flip/14.JPG);}
.card_bg15{ background : url(../images/flip/15.JPG);}
.card_bg16{ background : url(../images/flip/16.JPG);}
.card_bg17{ background : url(../images/flip/17.JPG);}
.card_bg18{ background : url(../images/flip/18.JPG);}

/*---------------------------------- 
			demo.css 
---------------------------------*/
.wrapper {
    width: 100%;
    margin: 0 auto;
}
.card-panel {
	transition: box-shadow .25s;
	padding: 20px;
	margin: 0.5rem 0 1rem 0;
	border-radius: 2px;
	background-color: #fff
}
.card .card-title {
	color: #fff;
	font-size: 24px;
	font-weight: 300
}
.card .card-title.activator {
	cursor: pointer
}
.card {
  position: relative;
  float: left;
  padding-bottom: 16%;
  width: 16.66666666666%;
  margin: 0px 0px;
  text-align: center;
  overflow: hidden;
  background-color: #fff;
  transition: box-shadow .25s;
  border-radius: 2px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

/* card fronts and backs */
.card_front, .card_back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.card_front, .card_back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}
.card_back {
  background-color: #000;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

/* card text */
.card_text {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-top: 6%;
  height: 40px;
  color: #fff;
  line-height: 20px;
}
.card.effect_random.flipped .card_front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
.card.effect_random.flipped .card_back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}
@media screen and (max-width: 601px){
  .card{
    padding-bottom: 33.33333333%;
    width: 33.33333333%;
    position: relative;
    float: left;
  }  
  .card_text h3{
    font-size: 22px;
    line-height: 10px
  }
  .card_text h5{
    font-size: 18px;
    line-height: 10px
  }
}