HTML, CSS and JavaScript playground

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="udNxShGB8cT0LnZCT0kYF2ZjlyWMBDKM6wAJ8O2i">
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<title>Montreal's Gigs</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="mtlgigs/css/app.css" rel="stylesheet">
<link href="mtlgigs/css/all.css" rel="stylesheet">
<link href="mtlgigs/css/slide.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500' rel='stylesheet' type='text/css'>

</head>
  <body>
<header id="header" class="header header--fixed animated"></header>
  <div class="global-overlay" style="display: none"></div>

<div id ="content">
    <div class ="date" id ='2016-Jul'>
                <h1>Juillet                    <sup class='year'>2016</sup>
                </h1>

<div class='flex-parent'>
                    <div class="event_card">
        <div class="wrapper Aligner">
    <div class="card__front quick-animated">
        <div class='eventId' style="display:none;">76</div>
        <div class="upper_right">
            <div class="event_date">
                                    <span class="event_date_number"></span>
                    <span class="event_date_text">Ce soir</span>
                            </div>
        </div>
        <div class="event_name">
            <div class="touchMiddle"></div>
            <h2>Iron Galaxy live at Bleury</h2>
        </div>
        <div class="lower_left">
            <div class="event_venue">
                <span class="venue-name">Bleury Vinyl Bar - <span class="time-event">21:00</span></span>
            </div>
        </div>

<div class="people_event">
            <div class="attending_people"><span>33</span>Participants</div>
            <div class="interested_people"><span>82</span>IntÃ©ressÃ©s</div>
        </div>

<div class="facebook-interaction">
            <div class="grid-backcard">
                <div class="fb-going">
                    <span>J'y vais</span>
                </div>
                <div class="fb-interested">
                    <span>IntÃ©ressÃ©(e)</span>
                </div>
                <div class="fb-not-going">
                    <span>Pas interessÃ©</span>
                </div>
            </div>
        </div>

<div class="facebook">
                        <span class='fa fa-external-link back_link '></span>
                        <a href='http://www.facebook.com/1173068036078228' target='_blank'>Lien                            
                        </a>
                    </div>
                
                
                                    <div class="ticket">
                        <span class='fa fa-ticket back_link '></span>
                        <a href='https://www.residentadvisor.net/event.aspx?858930' target='_blank'>Ticket
                        </a>
                    </div>

</div>
        </div>

<div class="adress-container">
            <div class="grid-backcard">
                <i class="fa fa-map-marker" style="padding-right: 15px;" aria-hidden="true"></i>
                <div class="place">Bleury Vinyl Bar
                                        <span class="adress">2109 rue de Bleury, H3A 2K2, Montreal</span>
                                    </div>

</div>
        </div>

<div class="event_card">
        <div class="wrapper Aligner">
    <div class="card__front quick-animated">
        <div class='eventId' style="display:none;">36</div>
        <div class="upper_right">
            <div class="event_date">
                                    <span class="event_date_number"></span>
                    <span class="event_date_text">Ce soir</span>
                            </div>
        </div>
        <div class="event_name">
            <div class="touchMiddle"></div>
            <h2>Lee Foss au Dstrkt | 07.22.2016</h2>
        </div>
        <div class="lower_left">
            <div class="event_venue">
                <span class="venue-name">New City Gas - <span class="time-event">22:00</span></span>
            </div>
        </div>

<div class="people_event">
            <div class="attending_people"><span>40</span>Participants</div>
            <div class="interested_people"><span>101</span>IntÃ©ressÃ©s</div>
        </div>

<div class="facebook">
                        <span class='fa fa-external-link back_link '></span>
                        <a href='http://www.facebook.com/1032092773533029' target='_blank'>Lien                            
                        </a>
                    </div>
                
                                    <div class="soundcloud">
                                                    <div style="padding: 0;">
                                <span class='fa fa-soundcloud back_link '></span>
                                <a href='https://www.soundcloud.com/leefoss' target='_blank'>Lee Foss</a>
                            </div>
                                            </div>
                
                                    <div class="ticket">
                        <span class='fa fa-ticket back_link '></span>
                        <a href='http://newcitygas.electrostub.com/event.cfm?cart&amp;showTimingID=169197' target='_blank'>Ticket
                        </a>
                    </div>

</div>
        </div>

<div class="adress-container">
            <div class="grid-backcard">
                <i class="fa fa-map-marker" style="padding-right: 15px;" aria-hidden="true"></i>
                <div class="place">New City Gas
                                        <span class="adress">950 Ottawa (Entre Ann et Dalhousie), H3C 1S4, Montreal</span>
                                    </div>

</div>
        </div>

<div class="event_card">
        <div class="wrapper Aligner">
    <div class="card__front quick-animated">
        <div class='eventId' style="display:none;">22</div>
        <div class="upper_right">
            <div class="event_date">
                                    <span class="event_date_number"></span>
                    <span class="event_date_text">Ce soir</span>
                            </div>
        </div>
        <div class="event_name">
            <div class="touchMiddle"></div>
            <h2>Ekali w/ Tibe &amp; Jamvvis | Newspeak</h2>
        </div>
        <div class="lower_left">
            <div class="event_venue">
                <span class="venue-name">Newspeak - <span class="time-event">22:00</span></span>
            </div>
        </div>

<div class="people_event">
            <div class="attending_people"><span>117</span>Participants</div>
            <div class="interested_people"><span>294</span>IntÃ©ressÃ©s</div>
        </div>

<div class="facebook">
                        <span class='fa fa-external-link back_link '></span>
                        <a href='http://www.facebook.com/1738311016417322' target='_blank'>Lien                            
                        </a>
                    </div>
                
                                    <div class="soundcloud">
                                                    <div style="padding: 0;">
                                <span class='fa fa-soundcloud back_link '></span>
                                <a href='https://soundcloud.com/ekalimusic' target='_blank'>EKALI</a>
                            </div>
                                                    <div style="padding: 0;">
                                <span class='fa fa-soundcloud back_link '></span>
                                <a href='https://soundcloud.com/tibemtl' target='_blank'>Tibe</a>
                            </div>
                                                    <div style="padding: 0;">
                                <span class='fa fa-soundcloud back_link '></span>
                                <a href='https://soundcloud.com/jamvvis' target='_blank'>j&aring;mvvis</a>
                            </div>
                                            </div>
                
                                    <div class="ticket">
                        <span class='fa fa-ticket back_link '></span>
                        <a href='http://newspeakmtl.electrostub.com/event.cfm?cart&amp;id=169605' target='_blank'>Ticket
                        </a>
                    </div>

</div>
        </div>

<div class="adress-container">
            <div class="grid-backcard">
                <i class="fa fa-map-marker" style="padding-right: 15px;" aria-hidden="true"></i>
                <div class="place">Newspeak
                                        <span class="adress">1403 Sainte &Eacute;lisabeth, H2X 3C5, Montreal</span>
                                    </div>

</div>
        </div>

<div class="event_card">
        <div class="wrapper Aligner">
    <div class="card__front quick-animated">
        <div class='eventId' style="display:none;">6</div>
        <div class="upper_right">
            <div class="event_date">
                                    <span class="event_date_number"></span>
                    <span class="event_date_text">Ce soir</span>
                            </div>
        </div>
        <div class="event_name">
            <div class="touchMiddle"></div>
            <h2>Sb :: Dustin Zahn [All Night Long]</h2>
        </div>
        <div class="lower_left">
            <div class="event_venue">
                <span class="venue-name">Stereo Bar - <span class="time-event">22:00</span></span>
            </div>
        </div>

<div class="people_event">
            <div class="attending_people"><span>63</span>Participants</div>
            <div class="interested_people"><span>85</span>IntÃ©ressÃ©s</div>
        </div>

<div class="facebook">
                        <span class='fa fa-external-link back_link '></span>
                        <a href='http://www.facebook.com/812954042140172' target='_blank'>Lien                            
                        </a>
                    </div>
                
                                    <div class="soundcloud">
                                                    <div style="padding: 0;">
                                <span class='fa fa-soundcloud back_link '></span>
                                <a href='https://www.soundcloud.com/dustin-zahn' target='_blank'>Dustin Zahn</a>
                            </div>
                                            </div>
                
                                    <div class="ticket">
                        <span class='fa fa-ticket back_link '></span>
                        <a href='http://www.wantickets.com/Events/209359/DUSTIN-ZAHN-ALL-NIGHT-LONG' target='_blank'>Ticket
                        </a>
                    </div>

</div>
        </div>

<div class="adress-container">
            <div class="grid-backcard">
                <i class="fa fa-map-marker" style="padding-right: 15px;" aria-hidden="true"></i>
                <div class="place">Stereo Bar
                                        <span class="adress">856 St.Catherine Est, H2L2E3, Montreal</span>
                                    </div>

</div>
        </div>

<div class="event_card">
        <div class="wrapper Aligner">
    <div class="card__front quick-animated">
        <div class='eventId' style="display:none;">72</div>
        <div class="upper_right">
            <div class="event_date">
                                    <span class="event_date_number"></span>
                    <span class="event_date_text">Ce soir</span>
                            </div>
        </div>
        <div class="event_name">
            <div class="touchMiddle"></div>
            <h2>Funk Rite x Dr&ocirc;les d&#039;Oiseaux : Charles Valentin // Jason King // [MOSES]</h2>
        </div>
        <div class="lower_left">
            <div class="event_venue">
                <span class="venue-name">Velvet - <span class="time-event">23:00</span></span>
            </div>
        </div>

<div class="people_event">
            <div class="attending_people"><span>41</span>Participants</div>
            <div class="interested_people"><span>61</span>IntÃ©ressÃ©s</div>
        </div>

<div class="facebook">
                        <span class='fa fa-external-link back_link '></span>
                        <a href='http://www.facebook.com/515725568619519' target='_blank'>Lien                            
                        </a>
                    </div>
                
                                    <div class="soundcloud">
                                                    <div style="padding: 0;">
                                <span class='fa fa-soundcloud back_link '></span>
                                <a href='https://soundcloud.com/djcharlesvalentin' target='_blank'>Charles Valentin</a>
                            </div>
                                                    <div style="padding: 0;">
                                <span class='fa fa-soundcloud back_link '></span>
                                <a href='https://soundcloud.com/ja_kh' target='_blank'>ja_kh</a>
                            </div>
                                                    <div style="padding: 0;">
                                <span class='fa fa-soundcloud back_link '></span>
                                <a href='https://soundcloud.com/laurent-moses-b-langer' target='_blank'>[MOSES]</a>
                            </div>
                                            </div>

</div>
        </div>

<div class="adress-container">
            <div class="grid-backcard">
                <i class="fa fa-map-marker" style="padding-right: 15px;" aria-hidden="true"></i>
                <div class="place">Velvet
                                        <span class="adress">420 Rue St-Gabriel, H2Y 2Z9, Montreal</span>
                                    </div>

</div>
        </div>

<div class="event_card">
        <div class="wrapper Aligner">
    <div class="card__front quick-animated">
        <div class='eventId' style="display:none;">60</div>
        <div class="upper_right">
            <div class="event_date">
                                    <span class="event_date_number"></span>
                    <span class="event_date_text">Ce soir</span>
                            </div>
        </div>
        <div class="event_name">
            <div class="touchMiddle"></div>
            <h2>Martin Villeneuve &amp; Avilarge</h2>
        </div>
        <div class="lower_left">
            <div class="event_venue">
                <span class="venue-name">Circus Afterhours - <span class="time-event">23:59</span></span>
            </div>
        </div>

<div class="people_event">
            <div class="attending_people"><span>4</span>Participants</div>
            <div class="interested_people"><span>9</span>IntÃ©ressÃ©s</div>
        </div>

<div class="facebook">
                        <span class='fa fa-external-link back_link '></span>
                        <a href='http://www.facebook.com/801127723354785' target='_blank'>Lien                            
                        </a>
                    </div>
                
                
                                    <div class="ticket">
                        <span class='fa fa-ticket back_link '></span>
                        <a href='http://circus.electrostub.com/event.cfm?id=169195&amp;cart' target='_blank'>Ticket
                        </a>
                    </div>

</div>
        </div>

<div class="adress-container">
            <div class="grid-backcard">
                <i class="fa fa-map-marker" style="padding-right: 15px;" aria-hidden="true"></i>
                <div class="place">Circus Afterhours
                                        <span class="adress">917 rue Ste-Catherine Est, H2L 3T3, Montreal</span>
                                    </div>

</div>
        </div>

<div class="event_card">
        <div class="wrapper Aligner">
    <div class="card__front quick-animated">
        <div class='eventId' style="display:none;">13</div>
        <div class="upper_right">
            <div class="event_date">
                                    <span class="event_date_number"></span>
                    <span class="event_date_text">Demain</span>
                            </div>
        </div>
        <div class="event_name">
            <div class="touchMiddle"></div>
            <h2>DVS1 [All Night Long]</h2>
        </div>
        <div class="lower_left">
            <div class="event_venue">
                <span class="venue-name">Stereo - <span class="time-event">02:00</span></span>
            </div>
        </div>

<div class="people_event">
            <div class="attending_people"><span>192</span>Participants</div>
            <div class="interested_people"><span>275</span>IntÃ©ressÃ©s</div>
        </div>

<div class="facebook">
                        <span class='fa fa-external-link back_link '></span>
                        <a href='http://www.facebook.com/301334833544288' target='_blank'>Lien                            
                        </a>
                    </div>
                
                                    <div class="soundcloud">
                                                    <div style="padding: 0;">
                                <span class='fa fa-soundcloud back_link '></span>
                                <a href='https://www.soundcloud.com/dvs1' target='_blank'>DVS1</a>
                            </div>
                                            </div>
                
                                    <div class="ticket">
                        <span class='fa fa-ticket back_link '></span>
                        <a href='http://www.wantickets.com/Events/209210/DVS1-ALL-NIGHT-LONG' target='_blank'>Ticket
                        </a>
                    </div>

</div>
        </div>

<div class="adress-container">
            <div class="grid-backcard">
                <i class="fa fa-map-marker" style="padding-right: 15px;" aria-hidden="true"></i>
                <div class="place">Stereo
                                        <span class="adress">858 Saint Catherine East, H2L 2E3, Montreal</span>
                                    </div>

</div>
        </div>

<div class="event_card">
        <div class="wrapper Aligner">
    <div class="card__front quick-animated">
        <div class='eventId' style="display:none;">66</div>
        <div class="upper_right">
            <div class="event_date">
                                    <span class="event_date_number"></span>
                    <span class="event_date_text">Demain</span>
                            </div>
        </div>
        <div class="event_name">
            <div class="touchMiddle"></div>
            <h2>Terrence Parker sur l&#039;esplanade de la Place des Arts !</h2>
        </div>
        <div class="lower_left">
            <div class="event_venue">
                <span class="venue-name">Esplanade de la Place des Arts - <span class="time-event">21:00</span></span>
            </div>
        </div>

<div class="people_event">
            <div class="attending_people"><span>166</span>Participants</div>
            <div class="interested_people"><span>447</span>IntÃ©ressÃ©s</div>
        </div>

<div class="facebook">
                        <span class='fa fa-external-link back_link '></span>
                        <a href='http://www.facebook.com/851511141652085' target='_blank'>Lien                            
                        </a>
                    </div>
                
                                    <div class="soundcloud">
                                                    <div style="padding: 0;">
                                <span class='fa fa-soundcloud back_link '></span>
                                <a href='https://soundcloud.com/terrence-parker' target='_blank'>Terrence Parker</a>
                            </div>
                                                    <div style="padding: 0;">
                                <span class='fa fa-soundcloud back_link '></span>
                                <a href='https://soundcloud.com/francis-oak' target='_blank'>Francis Oak</a>
                            </div>
                                                    <div style="padding: 0;">
                                <span class='fa fa-soundcloud back_link '></span>
                                <a href='https://soundcloud.com/motionsmotions' target='_blank'>MOTIONS</a>
                            </div>
                                            </div>
                
                                    <div class="ticket">
                        <span class='fa fa-ticket back_link '></span>
                        <a href='https://www.weezevent.com/ancient-futur-x-melting-pot' target='_blank'>Ticket
                        </a>
                    </div>

</div>
        </div>

<div class="adress-container">
            <div class="grid-backcard">
                <i class="fa fa-map-marker" style="padding-right: 15px;" aria-hidden="true"></i>
                <div class="place">Esplanade de la Place des Arts
                                        <span class="adress">175, rue Ste-Catherine Ouest, , Montreal</span>
                                    </div>

</div>
        </div>

<div class="event_card">
        <div class="wrapper Aligner">
    <div class="card__front quick-animated">
        <div class='eventId' style="display:none;">35</div>
        <div class="upper_right">
            <div class="event_date">
                                    <span class="event_date_number"></span>
                    <span class="event_date_text">Demain</span>
                            </div>
        </div>
        <div class="event_name">
            <div class="touchMiddle"></div>
            <h2>Bixel Boys + Hunter Siegel au Good Vibes Only | 07.23.2016</h2>
        </div>
        <div class="lower_left">
            <div class="event_venue">
                <span class="venue-name">New City Gas - <span class="time-event">22:00</span></span>
            </div>
        </div>

<div class="people_event">
            <div class="attending_people"><span>17</span>Participants</div>
            <div class="interested_people"><span>56</span>IntÃ©ressÃ©s</div>
        </div>

<div class="facebook">
                        <span class='fa fa-external-link back_link '></span>
                        <a href='http://www.facebook.com/1784325185136280' target='_blank'>Lien                            
                        </a>
                    </div>
                
                                    <div class="soundcloud">
                                                    <div style="padding: 0;">
                                <span class='fa fa-soundcloud back_link '></span>
                                <a href='https://www.soundcloud.com/bixelboys' target='_blank'>BIXEL BOYS</a>
                            </div>
                                                    <div style="padding: 0;">
                                <span class='fa fa-soundcloud back_link '></span>
                                <a href='https://www.soundcloud.com/HunterSiegel' target='_blank'>HUNTER SIEGEL</a>
                            </div>
                                            </div>
                
                                    <div class="ticket">
                        <span class='fa fa-ticket back_link '></span>
                        <a href='http://newcitygas.electrostub.com/event.cfm?cart&amp;showTimingID=169207' target='_blank'>Ticket
                        </a>
                    </div>

</div>
        </div>

</div>
        </div>

<div class="event_card">
        <div class="wrapper Aligner">
    <div class="card__front quick-animated">
        <div class='eventId' style="display:none;">5</div>
        <div class="upper_right">
            <div class="event_date">
                                    <span class="event_date_number"></span>
                    <span class="event_date_text">Demain</span>
                            </div>
        </div>
        <div class="event_name">
            <div class="touchMiddle"></div>
            <h2>Sb :: 4x2 Addy &amp; Friends</h2>
        </div>
        <div class="lower_left">
            <div class="event_venue">
                <span class="venue-name">Stereo Bar - <span class="time-event">22:00</span></span>
            </div>
        </div>

<div class="people_event">
            <div class="attending_people"><span>26</span>Participants</div>
            <div class="interested_people"><span>19</span>IntÃ©ressÃ©s</div>
        </div>

<div class="facebook">
                        <span class='fa fa-external-link back_link '></span>
                        <a href='http://www.facebook.com/1080513868688967' target='_blank'>Lien                            
                        </a>
                    </div>
                
                                    <div class="soundcloud">
                                                    <div style="padding: 0;">
                                <span class='fa fa-soundcloud back_link '></span>
                                <a href='https://www.soundcloud.com/djaddy' target='_blank'>djaddy+ ï£¿</a>
                            </div>
                                            </div>
                
                                    <div class="ticket">
                        <span class='fa fa-ticket back_link '></span>
                        <a href='http://www.wantickets.com/Events/209361/4x2-ADDY-FRIENDS' target='_blank'>Ticket
                        </a>
                    </div>

</div>
        </div>

</div>
        </div>

<div class="event_card">
        <div class="wrapper Aligner">
    <div class="card__front quick-animated">
        <div class='eventId' style="display:none;">71</div>
        <div class="upper_right">
            <div class="event_date">
                                    <span class="event_date_number"></span>
                    <span class="event_date_text">Demain</span>
                            </div>
        </div>
        <div class="event_name">
            <div class="touchMiddle"></div>
            <h2>Studio on the Rock: Vagabon (Birthday) // Jimmy be // John palms // Nadim</h2>
        </div>
        <div class="lower_left">
            <div class="event_venue">
                <span class="venue-name">Velvet - <span class="time-event">23:00</span></span>
            </div>
        </div>

<div class="people_event">
            <div class="attending_people"><span>22</span>Participants</div>
            <div class="interested_people"><span>48</span>IntÃ©ressÃ©s</div>
        </div>

<div class="facebook">
                        <span class='fa fa-external-link back_link '></span>
                        <a href='http://www.facebook.com/720434984761633' target='_blank'>Lien                            
                        </a>
                    </div>
                
                
                                    <div class="ticket">
                        <span class='fa fa-ticket back_link '></span>
                        <a href='http://www.wantickets.com/Events/209174/Studio-on-the-Rock-Vagabon-Birthday-Jimmy-be-John-palms-Nadim/' target='_blank'>Ticket
                        </a>
                    </div>

</div>
        </div>

html {
  height: 100%; }

body {
  height: 100%;
  overflow: scroll;
}

#content {
  /* height: 200px; */
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.place {
  font-size: 14px;
  -ms-flex: 2;
  flex: 2; }

.adress {
  font-size: 12px;
  display: block;
  color: #b5b5b5; }

.event_card.flipped .card__back {
  height: auto !important; }

.event_card.flipped {
  position: fixed;
  z-index: 5;
  height: 70%;
  max-width: 504px;
  width: 504px;
  /*overflow: auto;*/
  margin: auto !important;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }
  @media (max-width: 320px) {
    .event_card.flipped {
      width: 98%;
      height: 98%; } }
  @media (min-width: 321px) and (max-width: 714px) {
    .event_card.flipped {
      width: 93%;
      height: 75%; } }
  @media (min-width: 714px) and (max-width: 900px) {
    .event_card.flipped {
      width: 98%;
      height: 90%; } }

.global-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 4; }

nav i {
  display: inline !important; }

a.icon-block {
  display: block;
  width: 10em;
  padding-left: 15px; }

a.icon-block span {
  font-family: "Roboto";
  letter-spacing: 0.5px; }

a.icon-block i,
a.icon-block span {
  width: 100%;
  clear: both;
  padding-left: 10px; }

.fav {
  color: #EF5E5E !important; }

span.heart.fa.fa-heart-o {
  color: #b5b5b5; }

.organizer-name-container span {
  display: inline-block;
  text-align: center; }

header span, .logout a {
  cursor: pointer;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 10px;
  padding-left: 10px;
  border-radius: 50px;
  border: 2px solid #2a282b;
  transition: all 0.2s ease; }

header span:hover {
  color: white !important;
  background: rgba(181, 181, 181, 0.17);
  border-color: rgba(181, 181, 181, 0); }

header span:active {
  color: white !important;
  background: rgba(217, 79, 92, 0.5);
  border-color: rgba(181, 181, 181, 0); }

.no-display {
  display: none; }

.menu-item.selected {
  background: #d94f5c;
  border-color: #d94f5c; }

.fb-going, .fb-interested, .fb-not-going {
  margin-left: 20px; }

.fb-going.selected, .fb-interested.selected, .fb-not-going.selected {
  color: white !important;
  background: #d94f5c;
  border: 2px solid #d94f5c;
  border-radius: 50px; }

header span.selected, .logout a.selected {
  color: white !important;
  background: #d94f5c;
  border: 2px solid #d94f5c; }

header i {
  position: absolute !important;
  left: 30px !important;
  font-size: 25px !important;
  top: 15px; }

.heart-logo {
  color: #d94f5c; }

.star-logo {
  color: #FFEB3B; }

.no {
  text-align: center; }

.circle-logo {
  border: solid 3px rgba(255, 255, 255, 0.79);
  border-radius: 100%;
  height: 250px;
  position: absolute;
  width: 250px;
  top: 46.5%;
  left: 50%;
  transform: translate(-50%, -50%); }

.animated-logo {
  position: relative;
  top: 25%; }

.container-no-text {
  margin-top: 80px; }

.title-no {
  margin-bottom: 20px;
  font-family: "Roboto";
  letter-spacing: 0.5px;
  font-size: 28px;
  font-weight: 100; }

.space {
  margin-top: 180px; }

.text-no {
  font-family: "Roboto";
  letter-spacing: 0.5px;
  font-size: 15px;
  font-weight: 400; }

/* HEADER  */
.header {
  background-color: #2a282b;
  font-family: "Roboto";
  letter-spacing: 0.5px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #dedede;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 14px; }

.header--fixed {
  position: fixed;
  z-index: 10;
  right: 0;
  left: 0;
  top: 0;
  height: 55px; }

#header {
  animation-duration: 0.2s;
  /*position:relative;*/ }

/* Events */
.flex-parent {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin-left: -14px;
  margin-top: -14px; }
  @media (max-width: 414px) {
    .flex-parent {
      margin-left: 0px; } }
  .flex-parent .event_card:not(.flipped) {
    -ms-flex: 1 0 350px;
    flex: 1 0 350px;
    margin-left: 14px;
    margin-top: 14px;
    padding: 14px;
    box-sizing: border-box;
    height: 140px; }
    @media (max-width: 667px) {
      .flex-parent .event_card:not(.flipped) {
        padding: 1px 0px 1px 0px !important;
        -ms-flex: 1 0 315px;
        flex: 1 0 315px; } }
    @media (max-width: 414px) {
      .flex-parent .event_card:not(.flipped) {
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
        padding: 1px 0px 1px 0px !important;
        margin-left: 0px; } }
    @media (min-width: 728px) {
      .flex-parent .event_card:not(.flipped) {
        max-width: calc( 50% - 14px); } }
    @media (min-width: 1092px) {
      .flex-parent .event_card:not(.flipped) {
        max-width: calc( 33.3333333333% - 14px); } }
    @media (min-width: 1456px) {
      .flex-parent .event_card:not(.flipped) {
        max-width: calc( 25% - 14px); } }
    @media (min-width: 1400px) {
      .flex-parent .event_card:not(.flipped) {
        min-width: calc(25% - 14px); } }

.user_pref_card {
  height: 40px;
  position: relative; }
  .user_pref_card .card__front {
    /*max-width: 140px;*/
    border-radius: 7px; }
  .user_pref_card .card__back {
    border-radius: 7px;
    background: white; }
  .user_pref_card.flipped {
    min-height: 100px;
    position: fixed;
    z-index: 5;
    margin: auto !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; }
    .user_pref_card.flipped .card__back {
      width: 300px !important;
      position: fixed;
      z-index: 5;
      margin: auto !important;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      height: 90px; }

.container-user-preferences {
  -ms-flex-pack: center !important;
  justify-content: center !important;
  margin: auto !important; }

.container-organizers-card, .container-user-preferences {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin-left: -14px;
  font-family: "Roboto";
  letter-spacing: 0.5px;
  font-weight: 300; }
  @media (max-width: 414px) {
    .container-organizers-card, .container-user-preferences {
      margin-left: 0px; } }
  .container-organizers-card .organizers-card, .container-organizers-card .user_pref_card, .container-user-preferences .organizers-card, .container-user-preferences .user_pref_card {
    -ms-flex: 1 0 160px;
    flex: 1 0 160px;
    margin-left: 14px;
    margin-top: 14px;
    padding: 14px;
    box-sizing: border-box; }
    @media (max-width: 667px) {
      .container-organizers-card .organizers-card, .container-organizers-card .user_pref_card, .container-user-preferences .organizers-card, .container-user-preferences .user_pref_card {
        padding: 1px 0px 1px 0px !important;
        -ms-flex: 1 0 315px;
        flex: 1 0 315px; } }
    @media (max-width: 414px) {
      .container-organizers-card .organizers-card, .container-organizers-card .user_pref_card, .container-user-preferences .organizers-card, .container-user-preferences .user_pref_card {
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
        padding: 1px 0px 1px 0px !important;
        margin-left: 0px; } }
    @media (min-width: 348px) {
      .container-organizers-card .organizers-card, .container-organizers-card .user_pref_card, .container-user-preferences .organizers-card, .container-user-preferences .user_pref_card {
        max-width: calc( 50% - 14px); } }
    @media (min-width: 522px) {
      .container-organizers-card .organizers-card, .container-organizers-card .user_pref_card, .container-user-preferences .organizers-card, .container-user-preferences .user_pref_card {
        max-width: calc( 33.3333333333% - 14px); } }
    @media (min-width: 696px) {
      .container-organizers-card .organizers-card, .container-organizers-card .user_pref_card, .container-user-preferences .organizers-card, .container-user-preferences .user_pref_card {
        max-width: calc( 25% - 14px); } }
    @media (min-width: 640px) {
      .container-organizers-card .organizers-card, .container-organizers-card .user_pref_card, .container-user-preferences .organizers-card, .container-user-preferences .user_pref_card {
        min-width: calc(25% - 14px); } }

.user_pref_card {
  max-width: 200px !important; }

.cover_picture_container {
  width: 100%;
  max-height: 186px;
  overflow: hidden; }

.grid_container {
  width: 90%;
  margin: auto; }
  @media (max-width: 320px) {
    .grid_container {
      width: 90%; } }
  @media (min-width: 321px) and (max-width: 714px) {
    .grid_container {
      width: 90%; } }
  @media (min-width: 714px) and (max-width: 900px) {
    .grid_container {
      width: 90%; } }

.grid {
  width: 55%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  .grid.user {
    -ms-flex-pack: center;
    justify-content: center; }
  @media (max-width: 320px) {
    .grid {
      width: 94%; } }
  @media (min-width: 321px) and (max-width: 714px) {
    .grid {
      width: 90%; } }
  @media (min-width: 714px) and (max-width: 900px) {
    .grid {
      width: 65%; } }

.logout {
  position: absolute;
  right: 1%; }

.admin {
  position: absolute;
  left: 1%; }
  .admin span {
    color: #464444 !important; }

.grid-backcard {
  width: 85%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  @media (max-width: 320px) {
    .grid-backcard {
      width: 95%; } }

.event_card:not(.flipped) {
  height: 140px;
  position: relative; }
  @media (max-width: 414px) {
    .event_card:not(.flipped) {
      height: 110px !important; } }

.organizers-card {
  height: 65px;
  position: relative; }
  @media (max-width: 414px) {
    .organizers-card {
      height: 65px !important; } }

.upper_left {
  position: absolute;
  top: 10px;
  left: 10px; }

.upper_right {
  position: absolute;
  top: 10px;
  right: 10px; }

.lower_left {
  position: absolute;
  bottom: 10px;
  left: 10px; }

.lower_right {
  bottom: 10px;
  right: 10px;
  position: absolute;
  font-size: 14px; }

.Aligner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center; }

html {
  background-color: #EFF0F1; }

.no-background {
  background-color: transparent !important;
  box-shadow: none !important;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: column;
  flex-direction: column; }

h1 {
  color: #2a282b;
  font-family: "Roboto";
  letter-spacing: 0.5px;
  font-size: 4em;
  font-weight: 100;
  text-align: center;
  padding: 50px 0px 50px 0px;
  text-transform: lowercase; }

h2 {
  color: #2a282b;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.5px;
  font-size: 1em;
  font-weight: 300; }

sup.year {
  font-size: 20px;
  letter-spacing: 0.5px;
  color: #d94f5c;
  top: -1.5em;
  margin-left: 5px; }

.hidden {
  opacity: 0; }

.visible {
  opacity: 1; }

.venue-name {
  color: #d94f5c; }

.time-event {
  color: #b5b5b5; }

.event_name {
  width: 90%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.title_user_pref {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex-align: center;
  align-items: center;
  font-size: 15px; }
  .title_user_pref span {
    font-size: 14px; }
  .title_user_pref label {
    min-width: 170px;
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    font-size: 13px; }
    .title_user_pref label:before {
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 10px;
      position: absolute;
      left: 0;
      bottom: 1px;
      background-color: rgba(170, 170, 170, 0.07);
      box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.8);
      border-radius: 8px; }
  .title_user_pref .row {
    margin: 15px 0px; }

input[type=radio] {
  display: none; }

input[type=radio]:checked + label:before {
  content: "\2022";
  color: #d94f5c;
  font-size: 30px;
  text-align: center;
  line-height: 18px; }

.event_date {
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.5px; }

a {
  color: #b5b5b5 !important;
  text-decoration: none;
  cursor: pointer; }

.event_venue {
  color: #000000;
  font-size: 12px;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  letter-spacing: 0.5px; }

.event_social {
  font-size: 16px; }

.event_social_back {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.event_date_number {
  font-size: 22px;
  color: #d94f5c; }

.event_date_text {
  font-size: 12px;
  text-transform: uppercase;
  color: #626262; }

.overlay {
  background: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity .25s ease;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center; }

.event_card:hover .overlay {
  opacity: 1; }

.event_card:hover .overlay span {
  color: white;
  font-size: 5em;
  font-family: "Roboto";
  letter-spacing: 0.5px; }

#content-admin {
  position: absolute;
  top: 58px;
  min-width: 100%; }

.wrapper {
  width: 90%; }
  @media (max-width: 320px) {
    .wrapper {
      width: 100%; } }
  @media (min-width: 321px) and (max-width: 714px) {
    .wrapper {
      width: 100%; } }
  @media (min-width: 714px) and (max-width: 900px) {
    .wrapper {
      width: 90%; } }

.container-admin {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center; }

.btn-group-justified {
  margin: 40px 0px; }

.table-responsive {
  margin-top: 50px; }

.card__front,
.card__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*min-height: 140px;*/ }

.zoomOut {
  animation-name: zoomOut !important; }

.zoomIn {
  animation-name: zoomIn; }

.event_card.flipped .card__front, .user_pref_card.flipped .card__front {
  transform: rotateY(-180deg); }

.event_card.flipped .card__back, .user_pref_card.flipped .card__back {
  transform: rotateY(0);
  animation-name: zoomIn; }

.card__front, .card__back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.3s; }

.card__front:not(.organizers-card) {
  background-color: #fdfeff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); }

.card__back {
  background-color: #EFF0F1;
  transform: rotateY(-180deg);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); }

.container-weekend {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex-align: stretch;
  align-items: stretch; }

#friday {
  -ms-flex-order: 1;
  order: 1;
  -ms-flex-preferred-size: 32%;
  flex-basis: 32%; }

#saturday {
  -ms-flex-order: 2;
  order: 2;
  -ms-flex-preferred-size: 32%;
  flex-basis: 32%; }

#sunday {
  -ms-flex-order: 3;
  order: 3;
  -ms-flex-preferred-size: 32%;
  flex-basis: 32%; }

.event_card.column {
  margin: 14px 0PX; }

z-index: 10; }

/*# sourceMappingURL=app.css.map */