/* --------------------------------------------------------------------------------------------- */
/* ------------------------------------- TIME.JS Audio Player ---------------------------------- */
/* --------------------------------------------------------------------------------------------- */

/* ------------------------------------------ Icons -------------------------------------------- */

#flashcard_container {
    height: 500px;
    margin-left: 80px;
    margin-right: 80px;
    position: relative;
    z-index: 100;
}
#flip{font-size:30px;}
#fc-titles {
    color: #ffffff;
    font-size: 1.5em;
    height: 48px;
    position: absolute;
    right: 146px;
    text-align: center;
    top: 15px;
    width: 106px;
    z-index: 20;
}
.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%;
    height:100%;
    position: absolute;
    list-style-type: none;
    top:0;
    display: flex;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;
    -webkit-box-pack: start;-webkit-flex-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: #cfcfcf;
    color:#333;
    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-transform: rotateY(180deg);
    -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: 3em;
    text-align: center;
}

/*Card Back*/
.fc-card-holder .fc-card-back{
    background: #343131;
    color:#fff;
    font-size: 2em;
    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(360deg)!important;
    -mos-transform: rotateY(360deg)!important;
    -ms-transform: rotateY(360deg)!important;
    z-index:10;
}

@media only screen and (min-width : 320px) and (max-width : 480px){
    #flashcard_container {margin-left: 0px;margin-right: 0px;height: 300px;}
    #fc-titles {
        height: 48px;
        right: 67px;
        top: 12px;
    }
    .fc-backward {
        left: 0px;
        padding-top: 0px;
        position: relative;
        top: 0;
        width:100%;
    }
    #fc-menu_random {
        right: 70px;
        top: -2px;
    }
    .fc-nav-back, .fc-nav-forward{
        display:inline-block;
        width:50%;
        top:-40px;
        position:relative;
    }
    .fc-forward {
        right: 0px;
        display:inline-block;
        padding-top: 0px;
        position: relative;
        top: 0;
        width:100%;
    }
    .fc-title {font-size: 0.9em;padding: 5px 18px 26px;}
    #fc-titles {font-size: 0.8em;left: 19px;position: relative;top: -25px;width: 99px;text-align:left;}
    .fc-trigger {font-size: 3em;}
    #fc-progess-bar {top: 51px;}
    .fc-card-holder .fc-card-front{
        font-size: 2em;
    }
    .fc-card-holder .fc-card-back {
        font-size: 1em;
    }
    #flip {
       bottom: -45px;
       left: 0;
       padding-top: 0px;
       width: 100%;
       margin-left:0;
       color:#fff;
       background: #343131;
    }
    #flip::after{
        left: 165px;
        top: 0px;
    }

    .fc-card-holder div {
    padding-left: 0px;
    padding-right: 0px;

}
    .fc-card-container, .fc-card-holder div{height:300px;}
    .fcmenu .fcmenufront,.fcmenu .fcmenuback {font-size: 0.8em;padding-top: 30px;}
    .fcmenu {height: 80px;width: 80px;margin: 5px;}
    .flashsplash{
        min-height: 300px;
    }

}