*{
    margin: 0;
    padding:0;
    color: white;
}
body{
    background-color: #2c3e50;
}



a{
    color: white;
}

a:hover{
    color: white;

}





/* ------------------------------------------------------*/
/* logo */
/* ------------------------------------------------------*/


.logo{
    font-family: 'Righteous', cursive;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}
.logo span{
    margin: 0px 3px 0px 3px;
    opacity:0;
    transition: opacity 1s cubic-bezier(.05,.99,.9,1.44) 0s, transform 1s cubic-bezier(.05,.99,.9,1.44) 0s;
    display: inline-block;
    transform: translateX(100px);
   
}


.logo span.fade{
    opacity: 1;
    transform: translateX(0px);
}


/* menu */

#animacja{
    position: absolute;
    height: 100%;
    width: 20%;
    top:0;
    z-index:0;
    background-color: #1abc9c;
    left:0%;
    border-radius: 10px;
    transition: left .75s ease 0s, top .75s ease 0s;
}

.menu{
    height: 7.2vw;
    max-height: 70px;
    display:flex;
    justify-content: space-around;
    background-color: #58728d;
    position:relative;
    border-radius: 10px;
    font-size:0;
    box-shadow: 0 2px 3px 0 #09162f;

}
.menu a{
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    position: relative;
    z-index:1;
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
}




/* ------------------------------------------------------*/
/* content */
/* ------------------------------------------------------*/



.content{
    margin-top:30px;
    display: grid;
    grid-gap: 40px;
    grid-template-columns: auto auto;
    justify-content: space-evenly;
    align-items: flex-start;
    transition: height 1s ease-in-out;
    height: fit-content;

}

.events{
    width: 32vw;
    max-width: 350px;
    height: 28vw;
    max-height: 306.25px;
    perspective: 1500px;
    display: inline-block;
    transition: opacity .5s ease-in-out;
}

.card{
    width: 100%;
    height:100%;
    transition: all 1s ease-in-out;
    transform-style: preserve-3d;

    
}

.events:hover .card{
    transform: rotateY(180deg);

}

.card figure{
    width: 100%;
    height: 100%;
    position: absolute;
    margin:0;
    border-radius: 40px;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 2px 3px 0 #09162f;

    /* firefox */
    backface-visibility: hidden;
    transform: rotateX(0deg); 
    
}

.card .front{
    background-color: #58728d;
    text-align: center;

    
}

.card .back{
    background-color:#58728d;
    transform: rotateY(180deg);
    translate: rotateX(100px);

}

.card .back > p{
    margin: 10%;
    text-align: center;
}


.card_photo{
    height: 100%; 
    width: 100%;
    border-radius: 40px;
}

/* ------------------------------------------------------*/
/* footer */
/* ------------------------------------------------------*/

.footer *{margin: 0;}

.footer{
    margin-top: 40px;
    background-color: #58718d;;
    border-radius: 20px;
    box-shadow: 0 2px 3px 0 #09162f;

}

#footer_row{
    
    height: 227px;
    
}

#footer_row *{
    font-size: 20px;
}
/* Small footer */

#small_foot{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 100%;

}

#small_foot > div:first-child{margin-top: 20px;}
#small_foot > div:last-child{margin-bottom: 20px;}
#small_foot > div
{ 
    
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 256px;

}

#small_foot > div > p{
    margin-left: 10px;
}


#small_foot_image_one{
    width: 12%;
    margin-right: 3%;
}
#small_foot_image_two{
    width: 10%;
    margin-right: 5%;
}
#small_foot_image_three{
    width: 15%;
}

/* Social Media */

#Social_Media{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    
}

#Social_Media> div
{ 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.Social_image{
    height: 47px;
    cursor: pointer;
}

/* copy rights */

#copyrights{
    text-align: center;
    margin-top: 5px;
    font-size: 15px;
}