@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');

/****************   ****************/
/*** IMAGES DES ACCÈS RAPIDE _ SPORTS & CULTURE ***/
/****************   ****************/

/* Image Olympide  460x100 */
#par30615 .ar-bloc {
background-image: url(http://www.sud-gresivaudan.org/uploads/Image/53/52348_056_direct_lol.jpg);
}
/* Image Coulmes 460x100 */
#par30617 .ar-bloc {
background-image: url(
http://www.sud-gresivaudan.org/uploads/Image/6e/52347_056_direct_coulmes.jpg);
}
/* Image Médiathèques 460x100 */
#par30619 .ar-bloc {
background-image: url(http://www.sud-gresivaudan.org/uploads/Image/8b/52350_056_direct_mediatheques.jpg);
}
/* Image Ludothèques 460x100 */
#par30621 .ar-bloc {
background-image: url(http://www.sud-gresivaudan.org/uploads/Image/99/52349_056_direct_ludo.jpg);
}



/****************   ****************/
/*** ÉLÉMENTS PRINCIPAUX DE BASE ***/
/****************   ****************/

#bandeauHaut {
min-height: 94px !important;}

#ariane {display: none;}
#footer {background: #f1f4f9;}
.paragraphe .innerParagraphe h2 {border-bottom: none;}

.titrePage h1 {text-align: center;}

.clearfix:before, .clearfix:after {display: none;}
#footer a {color: #ff8400;}

/****************   ****************/
/*******  MENU PRINCIPAL  *******/
/****************   ****************/

#menu ul.menuNiv1 li.nav1 .aNiv1.hasChild .titleNiv1,
#menu ul.menuNiv1 li.nav1 .aNiv1 {
background: none;
text-align: center;
}
#menu ul.menuNiv1 li.nav1 .aNiv1 span,
#menu ul.menuNiv1 li.nav1 .aNiv1 {padding: 0 0 0 0;}
#menu ul.menuNiv1 li.nav1 .aNiv1 span, #menu ul.menuNiv1 li.nav1 .aNiv1 span.big {font-family: 'Roboto';}

#menu ul.menuNiv1 li.nav1:nth-child(2):hover {border-bottom-color: #ff8400;}
#menu ul.menuNiv1 li.nav1:nth-child(3):hover {border-bottom-color: #f85f73;}
#menu ul.menuNiv1 li.nav1:nth-child(4):hover {border-bottom-color: #52d681;}
#menu ul.menuNiv1 li.nav1:nth-child(5):hover {border-bottom-color: #ffd200;}
#menu ul.menuNiv1 li.nav1:nth-child(6):hover {border-bottom-color: #3490de;}

/******************   ******************/
/***  CARROUSEL _ ÉVÈNEMENTS À LA UNE  ***/
/******************   ******************/

.home .thematique, .home .date, .home .dots {display: none;}

.TPL_EVENEMENTALAUNE .carrousel .elements .element .infos {
left: auto;
right: 40px;
bottom: 35px;
background: rgba(255,255,255,0.9);
padding: 8px;
min-height: auto;
max-width: 80%;
}

.TPL_EVENEMENTALAUNE .carrousel .elements .element .infos h3 {
font-family: 'roboto';
font-size: 1.3em;
font-weight: bold;
letter-spacing: 0.0625em;
}

.accroche {position: relative;}

.TPL_EVENEMENTALAUNE .carrousel .elements .element .infos .accroche .more {
background-image: url(http://www.sud-gresivaudan.org/uploads/Image/de/51561_710_add.png);
background-position: 50% 50%;
padding: 3px 3px 3px 3px;
right: 10px;
background-color: #f1f4f9;
position: absolute;
transform : rotate(0deg);
transition: all 0.5s ease;
z-index: 5;
}


.TPL_EVENEMENTALAUNE .carrousel .elements .element .infos .accroche .more:hover {
transform : rotate(180deg);
}

.TPL_EVENEMENTALAUNE .carrousel .elements .element .image:before, .TPL_EVENEMENTALAUNEGLOBALE .carrousel .elements .element .image:before {display: none;}

.TPL_EVENEMENTALAUNE .carrousel .nav .prev,
.TPL_EVENEMENTALAUNE .carrousel .nav .next {
background-position: 50% 50%;
background-color: rgba(255,255,255,0.9);
width: 40px;
background-repeat: no-repeat;
padding: 5px;
transform: scale(0.8);
}

/********************   ********************/
/*********** LES 6 ACCÈS RAPIDE SERVICES  ***********/
/********************   ********************/

#PRR_TUILE {background-color: #f1f4f9 !important}

#PRR_TUILE .PRS_WIDTH_33G {
margin: 0 0 0 0;
background: white;
height: 60px;
margin: 10px 0 !important;
display: flex;
align-items: center;
justify-content: center;
}

#PRR_TUILE .regroupementInner .first {margin-left: 1.4% !important;}
#PRR_TUILE .regroupementInner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#PRR_TUILE .regroupementInner .paragraphe {margin-top: 10px !important; position: relative; cursor: pointer; overflow: hidden;}
#PRR_TUILE .regroupementInner .paragraphe .innerParagraphe p {
font-size: 1.1em;
letter-spacing: 0.0625em;
max-width: 200px;
text-align: center;
line-height: 1.3em;
}

/*** Effet au passage de la souris***/
#PRR_TUILE .regroupementInner .paragraphe::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 30px;
background: #4d5876;
margin-left: -27px;
transition: all 0.3s ease;
}

#PRR_TUILE .regroupementInner .paragraphe:nth-child(1)::before,
#PRR_TUILE .regroupementInner .paragraphe:nth-child(2)::before {
background: #4d5876;
}
#PRR_TUILE .regroupementInner .paragraphe:nth-child(3)::before {
background: #4d5876;
}
#PRR_TUILE .regroupementInner .paragraphe:nth-child(4)::before {
background: #4d5876;
}
#PRR_TUILE .regroupementInner .paragraphe:nth-child(5)::before {
background: #4d5876;
}
#PRR_TUILE .regroupementInner .paragraphe:nth-child(6)::before {
background: #4d5876;
}

#PRR_TUILE .regroupementInner .paragraphe:hover::before {
margin-left: 0px;
transition: all 0.5s ease;
}

/* Liens */
#PRR_TUILE a {color: inherit !important; padding: 20px 0;}
#PRR_TUILE a:hover {text-decoration: none !important;}

/*********** LES 4 ACCÈS RAPIDE  SPORT/CULTURE ***********/
/*** Olympide _ Coulmes _ Médiathèques _ Ludothèques ***/
/**************************   **************************/

#PRR_DEMARCHE {height: 240px;}
#PRR_DEMARCHE .PRS_WIDTH_50G, #PRR_DEMARCHE .PRS_WIDTH_50D {
height: 100px;
margin: 10px 0 !important;
overflow: hidden;
position: relative;
}

#PRR_DEMARCHE .paragraphe .innerParagraphe {height: 100%;}

/* ar = accès rapide */ 
.ar-bloc {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
top: 0;
overflow: hidden;
}

.ar-over {
position: absolute;
left: 0;
top: 0;
width: 120px;
height: 100%;
margin-left: -120px;
background: #ffd200;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
}

#PRR_DEMARCHE .PRS_WIDTH_50G:hover .ar-over, #PRR_DEMARCHE .PRS_WIDTH_50D:hover .ar-over {
margin-left: 0px;
transition: all 0.5s ease;
}

.ar-over-icon {
width: 16px;
height: 16px;
background: url(http://www.sud-gresivaudan.org/uploads/Image/13/51577_108_external.png);
margin: 5px 0;
}
/* Accès rapide avec icon "visite la page" : Ludothèques & Médiathèques */
#par30619 .ar-over-icon,
#par30621 .ar-over-icon {
background: url(http://www.sud-gresivaudan.org/uploads/Image/a3/51618_481_arrow-right.png);
}

.ar-over-text a {
color: #333; 
letter-spacing: 0.0625em;
padding: 5px;
z-index: 10;
}

.ar-lien a, .ar-over-text a {color: #333 !important;}
.ar-lien a:hover, .ar-over-text a:hover {text-decoration: none;}

.ar-lien p {
padding: 10px 15px;
font-size: 1.1em;
letter-spacing: 0.0625em;
background: white;
margin: 0 0 0 0 !important;
position: absolute;
left: 20px;
top: 20px;
transition: all 0.5s ease;
z-index: 5;
}

#PRR_DEMARCHE .PRS_WIDTH_50G:hover .ar-lien p,
 #PRR_DEMARCHE .PRS_WIDTH_50D:hover .ar-lien p {
left: 140px;
transition: all 0.5s ease;
}

/**************************   **************************/
/*********** ACTUS & AGENDAS & LIENS ANNUAIRE  ***********/
/**************************   **************************/

#PRR_AGENDA {
height: 600px;
background-color: #f1f4f9 !important
}
#PRR_AGENDA .regroupementInner .first {
margin-left: 1.4% !important;
}
#PRR_AGENDA .PRS_WIDTH_33G {
margin: 0 0 0 0;
}
#PRR_AGENDA .regroupementInner  {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

/* Agendas & Actus à venir */
.tpl_evenementListe.actualite .listeEvenement ul, .tpl_evenementListe.actualite .listeEvenement li {overflow: hidden !important;}

.tpl_evenementAVenir ul li.reseau:before,
.tpl_actualites ul li .extra.reseau:before {
display: none;
}
.tpl_evenementAVenir ul,
.tpl_actualites ul {
display: flex;
flex-direction: column;
}
.tpl_evenementAVenir ul li,
.tpl_actualites ul li {
height: 90px;
width: 100%;
margin: 0 0 5px 0;
border-bottom: none;
}
.tpl_evenementAVenir ul li:hover,
.tpl_actualites ul li:hover {
background-color: rgba(255,255,255,0.6);
}

.tpl_actualites ul li {background-color: #fff; overflow: hidden;}
.tpl_actualites ul li:nth-child(6) {display: none;}

.tpl_evenementAVenir ul li .inner {min-height: auto;}
.tpl_evenementAVenir ul li:hover .inner {
margin-top: 0px;
}
.tpl_evenementAVenir ul li .inner .text,
.tpl_actualites ul li .inner .text {display: none;}
.tpl_evenementAVenir ul li .inner .image, 
.tpl_actualites ul li .inner .image{
display: none;
}
.tpl_evenementALaUne h2 {display: none;}
.tpl_evenementAVenir ul li .inner h3 {
font-size: 1em;
margin: 30px 0 0 0;
position: relative;
font-family: 'Roboto';
letter-spacing: 0.0625em;
padding-top: 5px;
}

.tpl_evenementAVenir ul li .inner .theme {
top: 0;
font-family: 'Roboto';
font-size: 0.85em;
letter-spacing: 0.0625em;
margin-top: -25px;
padding: 2px 8px;
margin-left: 8px;
}

.tpl_evenementAVenir ul li .inner .days {
background-image: none;
padding: 0 0 0 0;
color: #777;
letter-spacing: 0.1em;
font-size: 0.917em;
}

.tpl_evenementAVenir ul li:hover .inner .days {
background-image: none;
font-size: 0.917em;
}

tpl_evenementAVenir {padding-bottom: 60px;}
.tpl_evenementAVenir .all, 
.tpl_actualites .all {
width: 100%;
position: absolute;
bottom: -55px;
margin: 0 0 0 0;
text-align: center;
background: #333;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: pointer;
}

.tpl_evenementAVenir .all::before, 
.tpl_actualites .all::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 30px;
background: white;
height: 100%;
margin-left: -30px;
transition: all 0.5s ease;
}

.tpl_evenementAVenir .all:hover::before,
.tpl_actualites .all:hover::before {
margin-left: 0px;
transition: all 0.5s ease;
}

.tpl_evenementAVenir .all a,
.tpl_actualites .all a {
background-color: transparent;
background-image: none;
padding: 0 0 0 0;
font-size: 1.1em;
letter-spacing: 0.1em;
margin-left: 13px;
color: #fff !important;
}

.tpl_evenementAVenir .all a::before,
.tpl_actualites .all a::before {
content: "";
position: absolute;
width: 16px;
height: 16px;
background: url(http://www.sud-gresivaudan.org/uploads/Image/c0/51576_063_external-white.png);
margin-left: -26px;
 margin-top: -2px;
}

.tpl_evenementAVenir ul li .inner .link {
display: none;
background-image : url(http://www.sud-gresivaudan.org/uploads/Image/a3/51618_481_arrow-right.png);
width: 16px;
height: 16px;
}

.tpl_actualites ul li .content h3 {
position: relative;
font-size: 1em;
font-family: 'Roboto';
letter-spacing: 0.0625em;
margin: 5px 0 0 0;
padding: 4px 0;
}
.tpl_actualites ul li .content h3 a {
color: #2b3941;
}
.tpl_actualites ul li .content h3 a:hover {text-decoration: none;} 
.tpl_actualites ul li .content .date {display: block;}
.tpl_actualites ul li .extra {width: auto;}
.tpl_actualites ul li .content {
width: 100%;
margin-left: 0;
padding: 0 8px;
}
.tpl_actualites ul li .extra .theme {
top: 0;
font-family: 'Roboto';
font-size: 0.85em;
letter-spacing: 0.0625em;
padding: 2px 8px;
margin-left: 8px;
margin-top: 5px;
}
/* Colonne des liens : annuaire des assos & proposer un évènement & évènements du territoire */
#par30692 .innerParagraphe {margin-top: 46px;}

.bouton {
height: 90px;
display: flex;
align-items: center;
background: #fff;
margin-bottom: 5px;
}
.bouton:nth-child(2) {margin-bottom: 5px;}

.annuaire-bouton,
.proposer-bouton {
padding: 10px;
position: relative;
overflow: hidden;
margin-left: 35px;
}

.annuaire-bouton p,
.proposer-bouton p {
letter-spacing: 0.1em;
font-size: 1.1em;
margin: 0 0 0 18px !important;
line-height: 1.2em;
transition: all 0.5s ease;
}

.annuaire-bouton p {width: 80%;}

.annuaire-bouton p::before,
.proposer-bouton p::before {
content: "";
position: absolute;
width: 16px;
height: 16px;
background-image: url(http://www.sud-gresivaudan.org/uploads/Image/a3/51618_481_arrow-right.png);
background-repeat: no-repeat;
margin-left: -24px;
margin-top: -1px;
opacity: 0.9;
}

.annuaire-bouton:hover p,
.proposer-bouton:hover p {
margin: 0 0 0 28px !important;
}

.annuaire-bouton a,
.proposer-bouton a
 {color: #333;}

.annuaire-bouton a:hover,
.proposer-bouton a:hover {text-decoration: none;}

/************************   ************************/
/*********** RÈGLES _ RESPONSIVE  ***********/
/************************   ************************/

@media (max-width: 940px) {
.TPL_EVENEMENTALAUNE, .TPL_EVENEMENTALAUNEGLOABLE {width: 100%;}
}

@media (max-width: 830px) {
.annuaire-bouton,
.proposer-bouton {
margin-left: 20px;
}
}

@media (max-width: 785px) {
#PRR_TUILE .PRS_WIDTH_33G:nth-child(1) p,
#PRR_TUILE .PRS_WIDTH_33G:nth-child(2) p {display: flex; justify-content: center;}

#PRR_TUILE .PRS_WIDTH_33G:nth-child(1) p a, #PRR_TUILE .PRS_WIDTH_33G:nth-child(2) p a {width: 70%; text-align: center;}
}

@media (max-width: 768px) {
#PRR_DEMARCHE {height: auto;}
#PRR_DEMARCHE .PRS_WIDTH_50G, #PRR_DEMARCHE .PRS_WIDTH_50D {width: 460px;}
#PRR_DEMARCHE .regroupementInner {display: flex; flex-direction: column; align-items: center;}
.TPL_EVENEMENTALAUNE .carrousel .elements .element, .TPL_EVENEMENTALAUNEGLOBALE .carrousel .elements .element {height: 343px;}
.tpl_evenementAVenir ul li .inner .days {margin-top: 0; font-size: 0.917em; line-height: normal;}

.tpl_actualites ul li .content .date {display: none;}
.tpl_evenementAVenir ul li {display: block;}
.proposer-bouton p {margin: 0 0 0 42px !important;}
.annuaire-bouton p {margin-left: 42px !important;}
.annuaire-bouton:hover p, 
.proposer-bouton:hover p {
margin: 0 0 0 47px !important;
}

.annuaire-bouton,
.proposer-bouton {
margin-left: -10px;
}

}

@media (max-width: 690px) {
#PRR_AGENDA .paragraphe .innerParagraphe h2 {font-size: 1.3em; font-family: 'roboto';}
#PRR_AGENDA .paragraphe .innerParagraphe h2 span {font-family: 'roboto';}
#par30692 .innerParagraphe {margin-top: 37px;}
}

@media (max-width: 640px) {
body {overflow-x: hidden;}
.tpl_evenementAVenir ul li.bloc3,
.tpl_evenementAVenir ul li.bloc4,
.tpl_evenementAVenir ul li.bloc5 {display: none;}
.tpl_evenementAVenir .all, .tpl_actualites .all {bottom: 25px;}
.tpl_evenementAVenir, .tpl_actualites {height: 300px;}
.tpl_actualites ul li:nth-child(3), .tpl_actualites ul li:nth-child(4), .tpl_actualites ul li:nth-child(5) {display: none;}
#PRR_AGENDA {height: auto;}
.annuaire-bouton, .proposer-bouton {margin-left: 10px !important;}
#par30692 .innerParagraphe {margin-top: 0px;}
.bouton {height: 50px;}
}

@media (max-width: 480px) {
#PRR_DEMARCHE .PRS_WIDTH_50G, #PRR_DEMARCHE .PRS_WIDTH_50D {width: 100%;}
.TPL_EVENEMENTALAUNE .carrousel .elements .element .infos {
position: relative;
bottom: auto;
right: auto;
width: 100%;
}
.TPL_EVENEMENTALAUNE .carrousel .elements .element .infos .accroche .more {display: none !important;}
}