html, body {
    width: 100%;
    height: 100%;
}

body {
    font-family: Raleway, Arial, sans-serif;
    margin: 0;
}

body.homepage {
    font-family: Roboto, Arial, sans-serif;
}

a {
    color: #009fe3;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


body.homepage {
    background: url('http://www.sonicprotest.com/2017/img/header_prog.png') top left / cover no-repeat;
    height: 385px;
    margin-bottom: 80px;
}

body.homepage header {
    background: #fff url('http://www.sonicprotest.com/2017/pix/bg_homepage.png') top left no-repeat;
    height: 447px;
}

body.homepage ul.menu {
    display: none;
}

ul.menu {
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 0;
    font-family: Raleway, Arial, sans-serif;
}

ul.menu li {
    list-style-type: none;
    float: left;
}

ul.menu li a {
    padding: 14px 0;
    display: block;
    background: #eee;
    color: #000;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

ul.menu li a.edito {
    width: 266px;
    background: #e30613;
}

ul.menu li a.artist {
    width: 248px;
    background: #009fe3;
}

ul.menu li a.contact {
    width: 248px;
    background: #ffed00;
}

ul.menu li a.pro {
    width: 248px;
    background: #009640;
}

ul.menu li.logo {
    background: #fff;
    border-bottom: 1px solid #eee;
    height: 47.3px;
    text-align: center;
    width: 20%;
}

ul.menu li.logo a {
	background: #fff;
	padding: 0;
}

ul.menu li.logo img {
    width: 232px;
    margin-top: 5px;
}

ul.menu li ul.sub-menu {
    display: none;
    padding: 0;
	height: 343px;
    width: 248px;
    overflow-y: scroll;

}

ul.menu li ul.sub-menu li {
    width: 248px;
    float: none;
    border-top: 1px solid #ddd;
}

ul.menu li ul.sub-menu li a {
    font-size: 10px;
    letter-spacing: 2px;
}

ul.menu li a.artist:hover ul.sub-menu {
    display: block;
}

body h1 {
    margin-top: 80px;
}


body.contact {
    background: url('http://www.sonicprotest.com/2017/pix/bg_contact.png') bottom left no-repeat ;
    height: 554px;
}

body.pro {
    background: #ddd url('http://www.sonicprotest.com/2017/pix/bg_pro.png') center right 10% no-repeat ;
    height: 577px;
}

body.sp {
    background: #ddd url('http://www.sonicprotest.com/2017/img/bg_sp.png') top left repeat;
    height: 410px;
}

div.container {
    background:
        url('http://www.sonicprotest.com/2017/pix/bg_homepage_right.png') top right no-repeat fixed,
        url('http://www.sonicprotest.com/2017/pix/bg_homepage_left.png') top left no-repeat fixed;
}

div.content {
    width: 748px;
    margin: 40px auto 0;
}

div.content div.bloc {
    overflow: hidden;
    margin-bottom: 20px;
    text-align: center;
}

div.content div.bloc.gradient {
    width: 744px;
    margin: 20 0 0px;
    margin-left:2px;
    padding: 20px 0 0px;
    background: #fceabb; /* Old browsers */
    background: -moz-linear-gradient(top,  #fceabb 0%, #fccd4d 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #fceabb 0%,#fccd4d 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #fceabb 0%,#fccd4d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fccd4d',GradientType=0 ); /* IE6-9 */
}

div.content div.bloc.afternoon {
}

div.content div.bloc h3 {
	font-size: 1.8rem;
    font-weight: 200;
    margin-top: 20px;
}

div.content div.bloc p {
    font-size: 26px;
    margin: 10px 0 0;
}

div.content div.col {
    float: left;
    width: 344px;
    margin: 0 15px;
    list-style: none;
}

div.content div.sep {
    overflow: hidden;
    text-align: center;
}

div.logos {
    text-align: center;
    margin: 20px 0;
}

div.pass {
	overflow: hidden;
	clear: both;
}

div.pass img,
div.pass ul {
	display: inline-block;
	float: left;
	margin:10px 19px;
	padding: 0;
}

div.pass img.right {
	float: right;
}

div.pass ul li {
	list-style: none;
	text-align: center;
}

div.pass ul li.crous img {
  margin: 20px auto 10px;
  float: none;
}

body.sp div.sp {
     margin-top: 104px;
}

div.sp {
    background: red;
    color: #fff;
    display: inline-block;
    width: 100%;
    
}

div.sp div.col div.bloc strong,
div.sp a {
    color: black;
}

div.sp h2 {
    padding: 20px 0;
}

div.sp h2,
div.sp div.bloc {
    text-align:center;
}

div.sp div.bloc {
    margin-bottom: 0;
}

div.sp div.sep {
    margin-top: 25px;
}

body.contact div.social ul {
    display: inline-block;
    margin: 20px auto;
}

body.contact div.social ul li {
    float: left;
    margin: 0 10px;
    list-style: none;
}