@font-face { font-family: ralel; src: url('../fonts/Raleway-Light.ttf') format('truetype'); }
@font-face { font-family: sari; src: url('../fonts/SariOffcPro-Medium.ttf') format('truetype'); }

span.hfg{
	font-family:ralel;font-size:20px;color:#4a4a4a;"
}
span.hfg:hover{ 
	background-color: #eeeeee;
	color:#D9213D;
	cursor:default;
};
span.hfg2{
	font-family:ralel;font-size:18px;color:#4a4a4a;"
}
span.hfg2:hover{ 
	color:#D9213D;
	cursor:pointer;
};
/* entire container, keeps perspective */
.flip-container {
	-webkit- perspective: 1000px;
	-webkit- transform-style: preserve-3d;
	perspective: 1000px;
	transform-style: preserve-3d;
}
	/*  UPDATED! flip the pane when hovered */
	.flip-container:hover .back {
		-webkit- transform: rotateY(0deg);
		transform: rotateY(0deg);
	}
	.flip-container:hover .front {
	    -webkit- transform: rotateY(180deg);
	    transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 150px;
	height: 50px;
}

/* flip speed goes here */
.flipper {
	-webkit- transition: 0.6s;
	-webkit- transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	-webkit- transition: 0.6s;
	-webkit- transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;

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

/*  UPDATED! front pane placed above back */
.front {
	z-index: 2;
	-webkit- transform: rotateY(0deg);
	transform: rotateY(0deg);
}

/* back initially hidden pane */
.back {
	-webkit- transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

/* 
	Some vertical flip updates 
*/
.vertical.flip-container {
	position: relative;
}

.vertical .back {
	-webkit- transform: rotateX(180deg);
	transform: rotateX(180deg);
}

.vertical.flip-container:hover .back {
    -webkit- transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.vertical.flip-container:hover .front {
    -webkit- transform: rotateX(180deg);
    transform: rotateX(180deg);
}
	

/* Drop down*/
.dropbtn {
    background-color: #ffffff;
    padding-right: 16px;
    padding-bottom: 5px;
    border: none;
    cursor: pointer;
    font-family:ralel;
    font-size:20px;
    color:#aaaaaa;
}

.dropdown {
    font-family:ralel;
    position: relative;
    display: inline-block;
    z-index:4;
}

.dropdown-content {
    display: none;
    position:absolute;
    background-color: #ffffff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    text-align:left;
    font-size:14pt;
}

.dropdown-content a {
    color: #aaaaaa;
    padding: 10px;
    padding-left: 8px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #eeeeee;
    color:#D9213D;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #eeeeee;
}