@font-face {
    font-family: 'LimerickSerialLightRegular';
    src: url('fonts/limerick_serial-light-webfont.eot');
    src: url('fonts/limerick_serial-light-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/limerick_serial-light-webfont.woff') format('woff'),
    url('fonts/limerick_serial-light-webfont.ttf') format('truetype'),
    url('fonts/limerick_serial-light-webfont.svg#LimerickSerialLightRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LimerickSerialBold';
    src: url('fonts/limerick_serial-bold-webfont.eot');
    src: url('fonts/limerick_serial-bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/limerick_serial-bold-webfont.woff') format('woff'),
    url('fonts/limerick_serial-bold-webfont.ttf') format('truetype'),
    url('fonts/limerick_serial-bold-webfont.svg#LimerickSerialBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LimerickSerialRegular';
    src: url('fonts/limerick_serial-regular-webfont.eot');
    src: url('fonts/limerick_serial-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/limerick_serial-regular-webfont.woff') format('woff'),
    url('fonts/limerick_serial-regular-webfont.ttf') format('truetype'),
    url('fonts/limerick_serial-regular-webfont.svg#LimerickSerialRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LimerickSerialMediumRegular';
    src: url('fonts/limerick_serial-medium-webfont.eot');
    src: url('fonts/limerick_serial-medium-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/limerick_serial-medium-webfont.woff') format('woff'),
    url('fonts/limerick_serial-medium-webfont.ttf') format('truetype'),
    url('fonts/limerick_serial-medium-webfont.svg#LimerickSerialMediumRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}




/*******************************************/
/*/////////// ANIMATION CERCLES ///////////*/
/*******************************************/
.cycle{
    max-height: 440px;
    min-height: 440px;
    max-width: 440px;
    margin: 100px auto;
    position: relative;
}


/*************************************/
/*//////// CONTENU CENTRAL //////////*/
/*************************************/
.cycle__cont-global-central{
    background-color: #FFFFFF;
    border: 1px solid #83837f;
    border-radius: 440px;
    max-height: 440px;
    min-height: 440px;
    max-width: 440px;
}
.cycle__cont-global-central:before{
    background: url(images/fleche-cycle.png);
    content: '';
    height: 43px;
    left: 155px;
    position: absolute;
    top: -13px;
    width: 63px;
}

.cycle__contenu-central{
    left: 50%;
    margin: 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: opacity 0.3s ease;
}

.cycle__contenu-central p { margin-bottom:1em;color: #4c4b47;
    font-size: 1em;}
.cycle__contenu-central--0 {color:#83837f;}	
/********************************************************/
/*          ETATS pour cycle__contneu-central           */
/********************************************************/
.is-actif-central.cycle__contenu-central{ opacity: 1; }


/********************************************/
/*//////// CONTENUS AROUND CERCLE //////////*/
/********************************************/
.cycle__cont-global-around{
    position: absolute;
    top: 0;
}


/*------- Conteneurs des contenus autour du cercle central -------*/
.cycle__cont-contenu-around{
    min-width: 80px;
    min-height: 80px;
    position: absolute;
}
/* Positionnement des conteneurs de contenus */
.cycle__cont-contenu-around--1{ left: 180px; top: -40px; }
.cycle__cont-contenu-around--2{ left: 355px; top: 50px; }
.cycle__cont-contenu-around--3{ left: 395px; top: 220px; }
.cycle__cont-contenu-around--4{ left: 280px; top: 370px; }
.cycle__cont-contenu-around--5{ left: 70px; top: 370px; }
.cycle__cont-contenu-around--6{ left: -35px; top: 220px; }
.cycle__cont-contenu-around--7{ left: 0; top: 50px; }


/*------- Bulles pour les contenu autour du cercle central -------*/
.cycle__bulle-around{
    background-color: #ffad00;
    border: 0 solid #ffad00;
    border-radius: 500px;
    height: 33px;
    position: absolute;
    transition: background-color 0.3s ease, height 0.3s ease, margin-left 0.3s ease, margin-top 0.3s ease, width 0.3s ease;
    width: 33px;
}
/*************************************************/
/*          MODIFIEURS pour les bulles           */
/*************************************************/
/* Alignement vertical et horizontal des bulles */
[class*="cycle__bulle-around--"]{
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
/********************************************/
/*          ETATS pour les bulles           */
/********************************************/
/* Changement de style de la bulle */
.is-cycle-hover .cycle__bulle-around{
    background-color: #FFFFFF;
    border: 2px solid #ffad00;
    height: 170px;
    width: 170px;
}
/* Ajustement de la position des bulles lorsque celles-ci sont survolées */
.is-cycle-hover .cycle__bulle-around--1{ margin-left: 0; margin-top: 0; }
.is-cycle-hover .cycle__bulle-around--2{ margin-left: 0; margin-top: 0; }
.is-cycle-hover .cycle__bulle-around--3{ margin-left: 0; margin-top: 0; }
.is-cycle-hover .cycle__bulle-around--4{ margin-left: 0; margin-top: 0; }
.is-cycle-hover .cycle__bulle-around--5{ margin-left: 0; margin-top: 0; }
.is-cycle-hover .cycle__bulle-around--6{ margin-left: 0; margin-top: 0; }
.is-cycle-hover .cycle__bulle-around--7{ margin-left: 0; margin-top: 0; }


/*------- Contenu text autour du cercle central -------*/
.cycle__contenu-around{
    color: #00a3ad;
    font-family: 'LimerickSerialBold', sans-serif;
	letter-spacing:0.07em;
    font-size: 1.25em;
    margin: 0;
    /*min-width: 170px;*/
	width:170px;
    position: absolute;
    text-align: center;
    transition: margin-left 0.3s ease, margin-top 0.3s ease;
}
/* Positionnement des contenus */
.cycle__contenu-around--1{ left: -45px; top: -15px; }
.cycle__contenu-around--2{ left: 35px; top: 0; }
.cycle__contenu-around--3{ left: 30px; top: 40px; }
.cycle__contenu-around--4{ left: -42px; top: 64px; }
.cycle__contenu-around--5{ left: -50px; top: 67px; }
.cycle__contenu-around--6{ left: -130px; top: 40px; }
.cycle__contenu-around--7{ left: -100px; top: 0; }

/**********************************************/
/*          ETATS pour les contenus           */
/**********************************************/
/* Ajustement de la position des contenus lors d'un survol */
.is-cycle-hover .cycle__contenu-around--1{ margin-left: 0; margin-top: 40px; }
.is-cycle-hover .cycle__contenu-around--2{ margin-left: -78px; margin-top: 5px; }
.is-cycle-hover .cycle__contenu-around--3{ margin-left: -65px; margin-top: -25px; }
.is-cycle-hover .cycle__contenu-around--4{ margin-left: -3px; margin-top: -50px; }
.is-cycle-hover .cycle__contenu-around--5{ margin-left: 5px; margin-top: -55px; }
.is-cycle-hover .cycle__contenu-around--6{ margin-left: 85px; margin-top: -26px; }
.is-cycle-hover .cycle__contenu-around--7{ margin-left: 56px; margin-top: 25px; }

@media screen and (max-width: 1050px) { 
.cycle__cont-global-central:before {
    background: url(images/fleche-cycle.png);
    left:50%;
}

.cycle__cont-contenu-around {
    min-width: 30px;
    min-height: 30px;
    position: absolute;
}
.cycle__contenu-around {
    margin: 0;
    min-width: none;
    width: auto;
    position: absolute;
    text-align: left;
	font-size: 1em;
	background-color:#FFF;
	}
.cycle {max-width:none;margin: 50px auto;}
.cycle__cont-global-central {
    max-width: none;
	width:70%;
	float:right;}
.cycle__contenu-central {left:65%; width:45%; }
.cycle__contenu-central h2 { font-size:1.6em;}
.cycle__contenu-central--0 { font-size:1.6em; color: #f7ac00;}
.is-cycle-hover .cycle__bulle-around{
    background-color: #FFFFFF;
    border: 2px solid #ffad00;
    height: 50px;
    width: 50px;
}
.cycle__bulle-around{
    height: 25px;
    width: 25px;}

/* Positionnement des conteneurs de contenus */
.cycle__cont-contenu-around--1{ left: 0px; top: 0px; }
.cycle__cont-contenu-around--2{ left: 0px; top: 70px; }
.cycle__cont-contenu-around--3{ left: 0px; top: 140px; }
.cycle__cont-contenu-around--4{ left: 0px; top: 210px; }
.cycle__cont-contenu-around--5{ left: 0px; top: 280px; }
.cycle__cont-contenu-around--6{ left: 0px; top: 350px; }
.cycle__cont-contenu-around--7{ left: 0; top: 410px; }

/* Positionnement des contenus */
.cycle__contenu-around--1{ left: 40px; top: 5px; }
.cycle__contenu-around--2{ left: 40px; top: 0; }
.cycle__contenu-around--3{ left: 40px; top: 0px; }
.cycle__contenu-around--4{ left: 40px; top: 0px; }
.cycle__contenu-around--5{ left: 40px; top: 0px; }
.cycle__contenu-around--6{ left: 40px; top: 0px; }
.cycle__contenu-around--7{ left: 40px; top: 0; }

/* Ajustement de la position des contenus lors d'un survol */
.is-cycle-hover .cycle__contenu-around--1{ margin-left: 0; margin-top: 0px; }
.is-cycle-hover .cycle__contenu-around--2{ margin-left: 0px; margin-top: 0px }
.is-cycle-hover .cycle__contenu-around--3{ margin-left: 0px; margin-top: 0px }
.is-cycle-hover .cycle__contenu-around--4{ margin-left: 0px; margin-top: 0px }
.is-cycle-hover .cycle__contenu-around--5{ margin-left: 0px; margin-top: 0px }
.is-cycle-hover .cycle__contenu-around--6{ margin-left: 0px; margin-top: 0px }
.is-cycle-hover .cycle__contenu-around--7{ margin-left: 0px; margin-top: 0px; }

}