@CHARSET "UTF-8";

#main h2 { margin-top:10px; }

#main .container {
    min-height:631px;
    background:black url(../img/BG-evenements.jpg) no-repeat top left;
    text-align:center;
    display:block;
    background-size:cover;
}

#main .container > ul {
    
  display:table;
  vertical-align:middle;
  text-align:left;
  list-style:none;
  margin:120px auto 0px auto;
  width:88%;
  padding:0px;
  line-height:20px;

}

#main .container > ul li {
    padding:10px 5px;
    margin:0px auto;
    min-width:325px;
    display:block;
    text-align:left;
    vertical-align:top;
}

#main .container .event .head h2 {
    margin:0px;
    padding:0px;
    color:black;
    text-transform:uppercase;
    padding:10px 20px 0px 20px;
    font:19px MinionPro-Regular,Helvetica,Sans-Serif;
}

#main .container .event .date {
    font:30px MinionPro-Regular,Helvetica,Sans-Serif;
    padding:5px 20px 20px 20px;
    color:white;
}

.msg p:first-child { margin-top:0px; }

#main .container .event .date { color:white; }

#main .container > ul li:nth-child(1) .head {
    background:transparent url(../img/BG-event-color-1.png);
}

#main .container >  ul li:nth-child(2) .head{
    background:transparent url(../img/BG-event-color-2.png);
}

#main .container > ul li:nth-child(3) .head {
    background:transparent url(../img/BG-event-color-3.png);
}

#main .event .msg {
    background:transparent url(../img/block-txt-area-gray.png);
    color:black;
    padding:20px;
}

#main .event .msg ul {
    display:block;
    list-style-type:square;
    margin:auto 20px;
    width:auto;
    text-align:left;
    padding:0px;
}

#main .event .msg ul li {
    display:block;
    padding:0px;
    margin:0px;
    width:auto;
}

@media (max-width: 1200px) {
    #main .container > ul {
        max-width:70%;
    }
}
@media (max-width: 1000px) {
    #main .container > ul {
        max-width:70%;
        padding:0px;
    }

}
@media (max-width:970px) {
    #main .container > ul {
        max-width:70%;
        padding:0px;
    }
    #main .container > ul li {
        float:none;
        padding:0px;
        margin:10px 0px;
        width:100%;
    }
}
@media (max-width:467px) {
    #main .container > ul {
        max-width:100%;
        padding:0px;
    }
    #main .container > ul li {
        margin-left:0px;
        margin-right:0px;
        width:100%;
        min-width:100%;
    }
}