@charset "utf-8";

.rwd {
	overflow: auto;
}

img {
    max-width: 100%;
    height: auto;
}

.picture {
	float: left;
	margin-right: 30px;
	margin-bottom: 10px;
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
}

@media only screen and (min-width: 630px) and (max-width: 779px)
{.picture {float: none; display: block; margin-right: auto; margin-left: auto;}}

@media only screen and (max-width: 320px)
{.picture {float: none; display: block; margin-right: auto; margin-left: auto;}}

#flip, #flip2, #flip3, #flip4, #flip5, #flip6, #flip7, #flip8, #flip9, #flip10, #flip11, #flip12, #flip13, #flip14, #flip15, #flip16, #flip17, #flip18, #flip19, #flip20 {
    padding: 20px;
    text-align: center;
	margin-right: 5px;
	margin-left: 5px;
	margin-top: -14px;
	background-color: white;
    border: 1px solid #E1E1E1;
	cursor: pointer;
	color: red;
	font-size: 14px;
	margin-bottom: 20px;
	border-radius: 2px;
}

@media only screen and (max-width: 629px)
{#flip, #flip2, #flip3, #flip4, #flip5, #flip6, #flip7, #flip8, #flip9, #flip10, #flip11, #flip12, #flip13, #flip14, #flip15, #flip16, #flip17, #flip18, #flip19, #flip20 {margin-right: 0; margin-left: 0;}}

#panel, #panel2, #panel3, #panel4, #panel5, #panel6, #panel7, #panel8, #panel9, #panel10, #panel11, #panel12, #panel13, #panel14, #panel15, #panel16, #panel17, #panel18, #panel19, #panel20 {
	display: none;
	margin-bottom: 10px;
}

#panel p, #panel2 p, #panel3 p, #panel4 p, #panel5 p, #panel6 p, #panel7 p, #panel8 p, #panel9 p, #panel10 p, #panel11 p, #panel12 p, #panel13 p, #panel14 p, #panel15 p, #panel16 p, #panel17 p, #panel18 p, #panel19 p, #panel20 p {
	background-color: white;
	min-height: 550px;
	border: 1px solid #E1E1E1;
	padding: 20px;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: -15px;
	font-size: 13px;
	text-align: left;
	list-style-type: disc;
	border-radius: 2px;
}

@media only screen and (max-width: 1119px)
{#panel p, #panel2 p, #panel3 p, #panel4 p, #panel5 p, #panel6 p, #panel7 p, #panel8 p, #panel9 p, #panel10 p, #panel11 p, #panel12 p, #panel13 p, #panel14 p, #panel15 p, #panel16 p, #panel17 p, #panel18 p, #panel19 p, #panel20 p {min-height: 700px;}}

@media only screen and (max-width: 929px)
{#panel p, #panel2 p, #panel3 p, #panel4 p, #panel5 p, #panel6 p, #panel7 p, #panel8 p, #panel9 p, #panel10 p, #panel11 p, #panel12 p, #panel13 p, #panel14 p, #panel15 p, #panel16 p, #panel17 p, #panel18 p, #panel19 p, #panel20 p {min-height: 800px;}}

@media only screen and (max-width: 739px)
{#panel p, #panel2 p, #panel3 p, #panel4 p, #panel5 p, #panel6 p, #panel7 p, #panel8 p, #panel9 p, #panel10 p, #panel11 p, #panel12 p, #panel13 p, #panel14 p, #panel15 p, #panel16 p, #panel17 p, #panel18 p, #panel19 p, #panel20 p {min-height: 900px;}}

@media only screen and (max-width: 689px)
{#panel p, #panel2 p, #panel3 p, #panel4 p, #panel5 p, #panel6 p, #panel7 p, #panel8 p, #panel9 p, #panel10 p, #panel11 p, #panel12 p, #panel13 p, #panel14 p, #panel15 p, #panel16 p, #panel17 p, #panel18 p, #panel19 p, #panel20 p {min-height: 980px;}}

@media only screen and (max-width: 629px)
{#panel p, #panel2 p, #panel3 p, #panel4 p, #panel5 p, #panel6 p, #panel7 p, #panel8 p, #panel9 p, #panel10 p, #panel11 p, #panel12 p, #panel13 p, #panel14 p, #panel15 p, #panel16 p, #panel17 p, #panel18 p, #panel19 p, #panel20 p {min-height: 0; margin-right: 0; margin-left: 0;}}

#flip:hover, #flip2:hover, #flip3:hover, #flip4:hover, #flip5:hover, #flip6:hover, #flip7:hover, #flip8:hover, #flip9:hover, #flip10:hover, #flip11:hover, #flip12:hover, #flip13:hover, #flip14:hover, #flip15:hover, #flip16:hover, #flip17:hover, #flip18:hover, #flip19:hover, #flip20:hover {
	text-decoration: underline;
}

#flipon, #flipon2, #flipon3, #flipon4, #flipon5, #flipon6, #flipon7, #flipon8, #flipon9, #flipon10, #flipon11, #flipon12, #flipon13, #flipon14, #flipon15, #flipon16 {
    padding-top: 5px;
    padding-bottom: 15px;
    text-align: center;
	margin-right: 5px;
	margin-left: 5px;
	margin-top: 0px;
	background-color: white;
    border: 1px solid #E1E1E1;
	cursor: pointer;
	color: red;
	font-size: 14px;
	margin-bottom: 19px;
	border-radius: 2px;
}

@media only screen and (max-width: 629px)
{#flipon, #flipon2, #flipon3, #flipon4, #flipon5, #flipon6, #flipon7, #flipon8, #flipon9, #flipon10, #flipon11, #flipon12, #flipon13, #flipon14, #flipon15, #flipon16 {margin-right: 0; margin-left: 0;}}

#panelon, #panelon2, #panelon3, #panelon4, #panelon5, #panelon6, #panelon7, #panelon8, #panelon9, #panelon10, #panelon11, #panelon12, #panelon13, #panelon14, #panelon15, #panelon16 {
	display: none;
	margin-bottom: 10px;
}

#panelon p, #panelon2 p, #panelon3 p, #panelon4 p, #panelon5 p, #panelon6 p, #panelon7 p, #panelon8 p, #panelon9 p, #panelon10 p, #panelon11 p, #panelon12 p, #panelon13 p, #panelon14 p, #panelon15 p, #panelon16 p {
	background-color: white;
	min-height: 50px;
	border: 1px solid #E1E1E1;
	padding: 15px;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: -14px;
	margin-bottom: 20px;
	font-size: 13px;
	text-align: center;
	list-style-type: disc;
}

#panelon img, #panelon2 img, #panelon3 img, #panelon4 img, #panelon5 img, #panelon6 img, #panelon7 img, #panelon8 img, #panelon9 img, #panelon10 img, #panelon11 img, #panelon12 img, #panelon13 img, #panelon14 img, #panelon15 img, #panelon16 img {
	width: 20%;
    padding: 10px;
}

@media only screen and (max-width: 999px)
{#panelon img, #panelon2 img, #panelon3 img, #panelon4 img, #panelon5 img, #panelon6 img, #panelon7 img, #panelon8 img, #panelon9 img, #panelon10 img, #panelon11 img, #panelon12 img, #panelon13 img, #panelon14 img, #panelon15 img, #panelon16 img {text-align: center; width: 30%}}

@media only screen and (max-width: 629px)
{#panelon img, #panelon2 img, #panelon3 img, #panelon4 img, #panelon5 img, #panelon6 img, #panelon7 img, #panelon8 img, #panelon9 img, #panelon10 img, #panelon11 img, #panelon12 img, #panelon13 img, #panelon14 img, #panelon15 img, #panelon16 img {text-align: center; width: 20%}}

@media only screen and (max-width: 458px)
{#panelon img, #panelon2 img, #panelon3 img, #panelon4 img, #panelon5 img, #panelon6 img, #panelon7 img, #panelon8 img, #panelon9 img, #panelon10 img, #panelon11 img, #panelon12 img, #panelon13 img, #panelon14 img, #panelon15 img, #panelon16 img {text-align: center; width: 30%}}

@media only screen and (max-width: 749px)
{#panelon p, #panelon2 p, #panelon3 p, #panelon4 p, #panelon5 p, #panelon6 p, #panelon7 p, #panelon8 p, #panelon9 p, #panelon10 p, #panelon11 p, #panelon12 p, #panelon13 p, #panelon14 p, #panelon15 p, #panelon16 p {min-height: 50px;}}

@media only screen and (max-width: 629px)
{#panelon p, #panelon2 p, #panelon3 p, #panelon4 p, #panelon5 p, #panelon6 p, #panelon7 p, #panelon8 p, #panelon9 p, #panelon10 p, #panelon11 p, #panelon12 p, #panelon13 p, #panelon14 p, #panelon15 p, #panelon16 p {min-height: 0; margin-right: 0; margin-left: 0;}}

#flipon:hover, #flipon2:hover, #flipon3:hover, #flipon4:hover, #flipon5:hover, #flipon6:hover, #flipon7:hover, #flipon8:hover, #flipon9:hover, #flipon10:hover, #flipon11:hover, #flipon12:hover, #flipon13:hover, #flipon14:hover, #flipon15:hover, #flipon16:hover {
	text-decoration: underline;
}

.row:after {
    content: "";
    clear: both;
    display: block;
}

.bar {
	float: left;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.bar p {
	background-color: white;
	min-height: 160px;
	border: 1px solid #E1E1E1;
	padding: 20px;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: -2px;
	margin-bottom: 5px;
	font-size: 13px;
	text-align: left;
	box-sizing: border-box;
	border-radius: 2px;
	box-shadow:0 2px 10px rgba(0, 0, 0, 0.10);
}

@media only screen and (max-width: 1199px)
{.bar p {min-height: 230px;}}

@media only screen and (max-width: 979px)
{.bar p {min-height: 190px;}}

@media only screen and (max-width: 879px)
{.bar p {min-height: 200px;}}

@media only screen and (max-width: 779px)
{.bar p {min-height: 290px;}}

@media only screen and (max-width: 649px)
{.bar p {min-height: 310px;}}

@media only screen and (max-width: 629px)
{.bar p {min-height: 120px; margin-right: 0; margin-left: 0;}}

.bar h3 {
	background-color: #c20d20;
	min-height: 26px;
	padding: 10px;
	border-radius: 2px;
	border: 1px solid #E1E1E1;
	color: white; 
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 0;	
	margin-bottom: 5px;
	text-align: center;
	box-shadow:0 2px 10px rgba(0, 0, 0, 0.30);
	text-transform: uppercase;
}

.bar figure {
	background-color: white;
	border: 1px solid #E1E1E1;
	min-height: 75px;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: -2px;
	margin-bottom: 0;
	font-size: 13px;
	font-weight: normal;
	text-align: center;
}

@media only screen and (max-width: 629px)
{.bar figure {margin-right: 0; margin-left: 0;}}

@media only screen and (max-width: 709px)
{.bar h3 {font-size: 14px;}}

@media only screen and (max-width: 629px)
{.bar h3 {margin-right: 0; margin-left: 0;}}

@media only screen and (min-width :630px) {
.bar {width: 49.9999%;}}

.bar2 {
	float: left;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

@media only screen and (min-width :779px) {
.bar2 {width: 33.3333%;}}

@media only screen and (min-width :993px) {
.bar2 {width: 33.3333%;}}

.flip-box {
  background-color: transparent;
  width: auto;
  height: auto;
 
  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);
}

#flip:hover, #flip2:hover, #flip3:hover, #flip4:hover, #flip5:hover, #flip6:hover, #flip7:hover, #flip8:hover, #flip9:hover, #flip10:hover, #flip11:hover, #flip12:hover, #flip13:hover, #flip14:hover, #flip15:hover, #flip16:hover, #flip17:hover, #flip18:hover, #flip19:hover, #flip20:hover {
  background-color: #244854; color: white;}
#flipon:hover, #flipon2:hover, #flipon3:hover, #flipon4:hover, #flipon5:hover, #flipon6:hover, #flipon7:hover, #flipon8:hover, #flipon9:hover, #flipon10:hover, #flipon11:hover, #flipon12:hover, #flipon13:hover, #flipon14:hover, #flipon15:hover, #flipon16:hover {
  background-color: #244854; color: white;}
