#flashcard_container {margin-left: 80px;margin-right: 80px;position: relative;z-index: 100;display: flex;}
#flip{font-size:30px;}
#fc-titles {color: #FFFFFF;font-size: 1.5em;height: 48px;position: absolute;right: 127px;text-align: center;top: 15px;width: 99px;z-index: 20;}
.flashcard_container {max-height:100%; margin-left: 80px;margin-right: 80px;position: relative;z-index: 100;}
.flashcards {height:500px;}
.fc-nav-back, .fc-nav-forward, #flip, .fcmenu{cursor: pointer;}
ul.flash{clear:both;padding:20px;list-style:none;}
.fc-trigger{font-size:5em; color:#fff;-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-ms-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;  }
.hidefront {font-size: 29px;font-weight: bold;left: 0;position: absolute;text-align: center;top: 48%;width: 100%;}
.hideback{display:none;text-align:center;left: 0;position: absolute;font-size: 20px;padding:10px;text-align: center;top: 44%;width: 100%;}
/*---------------- Random Button ---------------- */
#flip {bottom: 20px;color: #333333;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 2em;left: 50%;margin-left: -100px;padding-top: 16px;position: absolute;text-align: center;width: 200px;z-index: 30;-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-ms-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;}
#flip:after {color: #688FCA;content:'\f112';display: inline-block;font-family: FontAwesome;font-size: 1em;left: 117px;pointer-events: none;position: absolute;top: 14px;transform:rotate(55deg);-ms-transform:rotate(55deg);-webkit-transform:rotate(55deg);}
#fc-menu_return {color: #FFFFFF;font-size: 3em;position: absolute;right: 13px;top: -4px;z-index: 20;cursor: pointer;}
#fc-menu_random {color: #FFFFFF;font-size: 3em;position: absolute;right: 70px;top: -2px;z-index: 20;cursor: pointer;}
#rlb {bottom: 5px;height: 40px;left: 7px;opacity: 0.5;position: absolute;width: 40px;}
.fc-flipcolour{color:#fff !important;}
.fc-title {background: #343131;color: #FFFFFF;font-size: 1.5em;padding: 12px 18px;position: relative;z-index: 10;}
.fcTitle {position: relative;text-align: center;color: #cfcfcf;font-size: 3em;left: 0;top: 215px;width: 100%;}
.fc-backward {background: #CFCFCF;display: block;height: 100%;left: -80px;text-align:center;width:80px;padding-top: 200px;position: absolute;top: 0;z-index: 8;}
.fc-backward:hover, .fc-forward:hover{background: #688FCA;color:#fff;}
.fc-forward {background: #CFCFCF;display: block;height: 100%;padding-top: 215px;position: absolute;right: -80px;width: 80px;top: 0;z-index: 8;text-align: center;}
#set_title{border-bottom: 1px solid #8CCAEC;margin: 20px 8px 10px;}
#flashcard_header{margin: auto auto 20px;position: relative;text-align: center;width: 50%;}
.flash_nav > .btn-info {background-color: #8CCAEC;border-color: #46B8DA;color: #FFFFFF;}
.flash_nav > .btn-info:hover{background-color:#7AAFCC;}
.flashsplash{background: #5F5F5F;min-height: 500px;position: relative;text-align: center;overflow:hidden;white-space: nowrap;top: 0;width: 100%;}
/*Main menu container*/
.fc-container {width: 100%;list-style-type: none;display: flex;display: -webkit-flex;display: -ms-flexbox;-webkit-box-pack: start;-ms-flex-pack: center;flex-direction: row;-webkit-flex-direction: row;-ms-flex: row;    flex-wrap: wrap;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;align-content: center;-webkit-align-content: center;-ms-flex-align: center;justify-content: center;-webkit-justify-content: center;-ms-justify: center;align-items: center;-webkit-align-items: center;}
/*Holder for each card */
.fcmenu {float: left;height: 100px;margin: 10px;position: relative;width: 200px;perspective:800px;-ms-perspective:800px;-webkit-perspective:800px;-mos-perspective:800px;}
.fcmenu div{display: block;position: absolute;width: 100%;height: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;-o-backface-visibility: hidden;-ms-backface-visibility: hidden;-mos-backface-visibility: hidden;-webkit-transition-duration: 400ms;transition-duration: 400ms;-o-transition-duration: 400ms;-ms-transition-duration: 400ms;-mos-transition-duration: 400ms;z-index:10;}
.fcmenu:hover .fcmenufront{-webkit-transform: rotateY(180deg);transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg);-mos-transform: rotateY(180deg);z-index:0;}
.fcmenu:hover .fcmenuback{-webkit-transform: rotateY(360deg);transform: rotateY(360deg);-o-transform: rotateY(360deg);-mos-transform: rotateY(360deg);-ms-transform: rotateY(360deg);z-index:10;}
/*card Front*/
.fcmenu .fcmenufront{background: #1f5f92;color:#fff;padding-top:32px;font-size:1.5em;text-align: center;}
/*Card Back*/
.fcmenu .fcmenuback{background: #333;color:#fff;padding-top:30px;font-size:1.5em;text-align: center;z-index:0;-webkit-transform: rotateY(180deg);transform: rotateY(180deg);-ms-mos-transform: rotateY(180deg);-o-transform: rotateY(180deg);}
#fc-progess-bar {background: none repeat scroll 0 0 #343131;border: medium none;border-radius: 0;color: #688FCA;/*This is how IE10 pulls bg colour, no idea why.*/height: 9px;left: 0;position: absolute;top: 58px;transition: all 500ms ease 0s;width: 100%;z-index: 20;-webkit-appearance: none; -moz-appearance: none;appearance: none;}
#fc-progess-bar::-webkit-progress-bar {background-color: #343131;border-radius: 0px;}
#fc-progess-bar::-moz-progress-bar {background-color:#688FCA;}
#fc-progess-bar::-ms-progress-bar {background-color:#688FCA;}
#fc-progess-bar::-webkit-progress-value{background-color:#688FCA;}
/*Main menu container*/
.fc-card-container {height: 500px;left: 0;list-style-type: none;position: absolute;top: 0;width: 100%;overflow:hidden;}
/*Holder for each card */
.fc-card-holder{width: 100%;height: 100%;position: relative;perspective:800px;-ms-perspective:800px;-webkit-perspective:800px;-mos-perspective:800px;}
.fc-card-holder div {-webkit-backface-visibility: hidden;backface-visibility: hidden;-o-backface-visibility: hidden;-ms-backface-visibility: hidden;-mos-backface-visibility: hidden;-webkit-transition-duration: 400ms;transition-duration: 400ms;-o-transition-duration: 400ms;-ms-transition-duration: 400ms;-mos-transition-duration: 400ms;display: block;height: 500px;left: 0;padding-left: 90px;padding-right: 90px;position: absolute;top: 0;width: 100%;z-index: 1;display: table;}
.fc-card-holder div p{display: table-cell;vertical-align: middle;}
/*card Front*/
.fc-card-holder .fc-card-front {background: #fff;color: #343131;font-size: 2em;text-align: center;}
/*Card Back*/
.fc-card-holder .fc-card-back{background: #343131;color:#fff;font-size: 1.3em;text-align: center;z-index:0;-webkit-transform: rotateY(180deg);transform: rotateY(180deg);-ms-transform: rotateY(180deg);-mos-transform: rotateY(180deg);-o-transform: rotateY(180deg);}
.fc-flipforwards{-webkit-transform: rotateY(180deg) !important;transform: rotateY(180deg)!important;-ms-transform: rotateY(180deg)!important;-o-transform: rotateY(180deg)!important;-mos-transform: rotateY(180deg)!important;z-index:0;}
.fc-flipbackwards{/*...It only works with this many Important tags. */-webkit-transform: rotateY(360deg)!important;transform: rotateY(360deg)!important;-o-transform: rotateY(-mos-transform: rotateY(360deg)!important;-ms-transform: rotateY(360deg)!important;z-index:10;}