.modal-header, h4, .close {
    background-color: maroon;
    color:white !important;
    text-align: right;
    font-size: 30px;
}

.modal-title, h2 {
    color:gray;
    text-align: left;
    font-size: 20px;
}

.modal-pic {
  width: 120px;
  height: 120px;
  float: right;
  margin:5px;
  /*margin:-43px,3px,3px,3px;*/

  z-index: 2;

  /*top:-40px;*/

}

.modal-footer {
    background-color: #555;
      /*float: left;*/
  }
.modal-content  {
    -webkit-border-radius: 10px ;
    -moz-border-radius: 10px ;
    border-radius: 10px ;
    }

.modal-jump {

}



h2, p {
  color:#666;
  font-family:Arial, Helvetica, sans-serif;
}

a {
color: maroon;
  font-family:Arial, Helvetica, sans-serif;
}
a:hover {
color: #222;

}

	/* simple */
.flip-container {
		-webkit-perspective: 1000;
		-moz-perspective: 1000;
		-ms-perspective: 1000;
		perspective: 1000;

		-ms-transform: perspective(1000px);
		-moz-transform: perspective(1000px);
  			-moz-transform-style: preserve-3d;
  			-ms-transform-style: preserve-3d;

		/*border: 1px solid #ccc;*/
}

.flip-container.flip .back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}


.flip-container.flip .front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-container, .front, .back {
		width: 180px;
		height: 180px;
		/*float: left;*/
    display: inline-block;
    margin:3px;
  	position:relative;
  	cursor:pointer;
}


.flipper {
		-webkit-transition: 0.6s;
		-webkit-transform-style: preserve-3d;
		-ms-transition: 0.6s;

		-moz-transition: 0.6s;
		-moz-transform: perspective(1000px);
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;

		transition: 0.6s;
		transform-style: preserve-3d;
    /*position:absolute;*/
  	/*top:0%;
  	left:0%;
  	margin:-4px 0 0 -4px;*/
		position: relative;
}

.front, .back {
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;

	    -webkit-transition: 0.6s;
	    -webkit-transform-style: preserve-3d;
	    -webkit-transform: rotateY(0deg);

	    -moz-transition: 0.6s;
	    -moz-transform-style: preserve-3d;
	    -moz-transform: rotateY(0deg);

	    -o-transition: 0.6s;
	    -o-transform-style: preserve-3d;
	    -o-transform: rotateY(0deg);

	    -ms-transition: 0.6s;
	    -ms-transform-style: preserve-3d;
	    -ms-transform: rotateY(0deg);

	    transition: 0.6s;
	    transform-style: preserve-3d;
	    transform: rotateY(0deg);

		position: absolute;
		top: 0;
		left: 0;
}

.front {
		-webkit-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		/*background: #ccc;*/
		z-index: 2;
    position:absolute;
  	left:0;
  	top:0;
  	width:100%;
  	height:100%;
  	/*border:1px solid #ddd;*/
  	/*background:url("img/background.jpg") no-repeat center center #f9f9f9;*/
}

.back {
		background: #ccc;
    /*font-size:18px;*/
      font-weight:bold;
      font-size:1.5em;
      color:#766;
      font-family:Arial, Helvetica, sans-serif;
            	/*padding-left:5px;*/
    padding:70px 10px 10px 10px;
		-webkit-transform: rotateY(-180deg);
	    -moz-transform: rotateY(-180deg);
	    -o-transform: rotateY(-180deg);
	    -ms-transform: rotateY(-180deg);
	    transform: rotateY(-180deg);
}

.back .dept{
  	font-size:13px;
  	/*padding-left:10px;*/
  	font-style:italic;
}

.center {
  display:block;
  margin-left:auto;
  margin-right:auto;
}