.reveal .slides section > section { height: 95%; } .reveal li { margin: 0; padding: 0.1em} .reveal h2 { display: none; } /* THE MAINCONTAINER HOLDS EVERYTHING */ .flipcard { position: absolute; width: 450px; height: 650px; background: none; top: calc(50% - 15px); left: 50%; transform: translate(-50%, -50%); } /* THE CARD HOLDS THE FRONT AND BACK FACES */ .flipcard .fccard{ position: relative; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; transform-style: preserve-3d; transition: all 0.8s ease; } .flipcard .fchead p { font-size: 2.0em !important; margin: 0 0 20px 0; color: #fff; font-family: "Source Sans Pro", Helvetica, sans-serif; font-weight: 600; line-height: 1.2; letter-spacing: normal; text-transform: uppercase; text-shadow: none; word-wrap: break-word; } /* THE PSUEDO CLASS CONTROLS THE FLIP ON MOUSEOVER AND MOUSEOUT */ /* .fc-thecard:hover{ */ /* /\* transform: rotateY(180deg); *\/ */ /* } */ /* THE FRONT FACE OF THE CARD, WHICH SHOWS BY DEFAULT */ .flipcard .fcfront{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; backface-visibility: hidden; overflow: hidden; /* background: #ffc728; */ background: #7bdb96; color: #333; padding: 30px; } /* THE BACK FACE OF THE CARD, WHICH SHOWS ON MOUSEOVER */ .flipcard .fcback{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; backface-visibility: hidden; overflow: hidden; background: #dba57b; color: #333; text-align: center; transform: rotateY(180deg); padding: 30px; } .flipcard .fccard figure { margin: 0; height: 50%; } .flipcard .fccard figure img { margin: 0; height: 100%; max-width: unset; max-height: unset; } /* section of the card to flip the card */ .flipcard .fcflip { font-style: italic; position: absolute; bottom: -0.7em; width: 100%; padding: 1em 0; right: -1.7em; width: 5em; } .flipcard .fcfront .fcflip { background-color: #4d7d43; color: #7bdb96; transform: rotate(-45deg); background: linear-gradient(to bottom, transparent, #4d7d43); } .flipcard .fcback .fcflip { background-color: #806344; color: #dba57b; transform: rotate(-45deg); background: linear-gradient(to bottom, transparent, #806344); }