/* CSS - 23/10/2015
 *
 * Theme : RWD - VIF for Drupal 7
 * By www.iPika.fr
*/



/* TEMP
================================================== */
@media only screen and (min-width: 1px) and (max-width: 480px)
{
#access { display: none }


}




/* All Responsive
================================================== */ 
@media only screen and (min-width: 481px) and (max-width: 1300px)
{
#quick-menu { left: 0 }

}


/* Tablet (Portrait) = Design for a width of 760px
================================================== */
@media only screen and (min-width: 1px) and (max-width: 800px)
{

}


/* MOBILE
================================================== */
@media only screen and (min-width: 1px) and (max-width: 480px)
{
.inner { width: 320px }

h1 {margin: 0 0 15px 15px; font: 400 1.9em/1.2em "aller",sans-serif }
/*h2 {font: 400 1.65em/1.2em "aller",sans-serif; margin: 0 0 15px 15px }*/
h2 {font: 400 1.65em/1.2em "aller",sans-serif }
.field-name-body { padding: 15px }
.sticky-menu { display: none }

/* ------ Header ------ */
header .inner { position: relative; width: 300px; height: 100px; padding: 10px; margin-bottom: 0 }
.header-button, .language, #header-search, .header-follow, #quick-menu { display: none }
.logo { width: 70px; height: auto; margin-right: 10px; padding: 0 }
.claim { width: 220px; padding: 35px 0 0 0; font: italic 400 1.25em/0.9em "daniel-bd",cursive }
.burger:after { position: absolute; width: 230px; height: 120px; right: 10px; top: 0; color: #373131; font: 1.5em/40px "Fontello"; content: "\E81D"; text-align: right }
.sharing-top .printer { display: none }



/* ------ NAV ------ */
nav { z-index: 2; position: absolute; width: 100%; height: auto; left: 0; top: 0; font: normal 1.1em/1em 'aller-bd', serif }
nav ul { display: none; position: absolute; top: 120px; width: 100%; background: #AA0137 }
nav.open ul { display: block }
nav ul.menu li {display: block; text-align: left; border-bottom: 1px solid #FFF; line-height: 1.2em }
nav ul li a { position: relative; display: block; padding: 0 20px; color: #FFF; line-height: 35px; background: #AA0137 }
nav ul li a:hover, nav ul li:hover > a { color: #FFF; text-decoration: none }
nav ul li.expanded a:after { position: absolute; width: 30px; height: 30px; right: 0; top: 0; color: #FFF; font: 1em/35px "Fontello"; content: "\E818" }
/* ------ Nav - Level 2 ------ */
nav ul ul { display: block; position: relative; width: auto; padding: 0; top: 0; left: 0; margin-bottom: -1px; font: normal 0.9em/1em 'aller'; background: #E3E2E2; text-transform: initial }
nav ul li:hover ul { display: block }
nav ul ul li { display: block }
nav ul li a.active { color: #FFF }
nav ul ul li a { padding: 8px 20px; background: none; color: #000; line-height: 1.2em } 
nav ul ul a.active, nav ul ul li a:hover { color: #9C0E31} 
nav ul ul li a.active { font: normal 1em/1em 'aller-bd', serif }
nav ul ul li a:after { display: none }
nav ul ul li:last-child a:after { display: none }
nav ul li:hover a:before { display: none }
nav ul li:hover ul a:before { display: none }
/* ------ Nav - Header/Button ------ */
nav .header-button { display: none; position: absolute; top: 120px; float: none; width: 100%; height: 105px; margin: 0; background: #FFF }
nav.open .header-button { display: block }
nav .header-button ul { position: relative; top: 0 }
.header-button li { float: none; margin-right: 0; padding: 0px; width: 100%; display: block }
nav .header-button li a { display: block; position: relative; padding: 0px 10px; line-height: 30px; color: #FFF; border: none; border-bottom: 1px solid #FFF; font-size: 0.85em }
nav .pane-menub { position: absolute; top: 105px; width: 100% }
/* ------ Nav - Logged-in ------ */
.logged-in header .inner { padding-bottom: 60px }
.logged-in header #account-block { clear: both; }
.logged-in header nav.open { top: 50px }
.logged-in .open .burger:after { top: -50px }



/* ------ COMMON ------ */
.breadcrumb { float: left; width: calc(100% - 80px); padding: 10px 5px }
.sharing-top { width: 125px; padding: 10px 0 }
.page-top { margin-bottom: 10px }
.push-buy { width: 100%; height: auto }
.push-buy img { width: 100%; height: auto }
.actu-tags { margin: 0px 15px 15px }
.actu-tags li, .actu-tags li div { float: none; display: inline }
.actu-tags li:first-child { padding-left: 0 }

/* ------ HOME ------ */
.front h2 { margin-left: 15px }
/* ------ news ------ */
#news-headlight {margin: 0; padding-bottom: 0; padding-top: 20px }
.news-headlight-bloc { width: 100%; height: auto; margin: 0 0 10px }
.front .news-headlight-bloc { display: none }
.news-headlight-bloc.large {display: block; width: 100%; height: auto; margin: 0; padding-bottom: 45px }
.news-headlight-view {z-index: 0; position: relative }
.news-headlight-bloc.large .news-headlight-desc {position: relative; left: auto; bottom: auto; width: 300px; margin: 0; padding: 20px 15px }
.news-headlight-bloc.large .news-headlight-desc h3 a {font: 400 1.1em/1.45em 'aller-bd',sans-serif}
.news-headlight-bloc.large .news-headlight-date, .news-headlight-bloc.large .news-headlight-tags {margin: 0;font-size: 0.9em;color: #000; background: none }
.news-headlight-bloc.large .news-headlight-date {padding: 0px 10px 0 0 }
.news-headlight-bloc.large .news-headlight-tags {padding: 0px 0px 0 10px }
.news-all {z-index: 1; right: auto; font-size: 1.10em;left: 15px }
#news-headlight .news-all { bottom: 430px; top: auto }
.front .push-buy a { margin: 0 }
 
/* ------ agenda ------ */
#event-list { padding: 15px 0px 60px; margin: 0; background: none }
#event-list .event-list-bloc { width: 100%; height: auto; margin: 0 0 20px }
.front .event-list-bloc { display: none }
.front .event-list-bloc:first-child { display: block }
.event-list-desc { padding: 15px }
.front .event-list-desc { padding: 15px 15px 55px }
#event-list .news-all { top: auto; bottom: 15px }
#event-list .news-all li {float: none; margin-left: 0 }
#button-access {padding: 10px 0 }
#button-access #button-front ul {text-align: center; padding: 10px 15px 5px }
#button-access #button-front ul li {margin-bottom: 7px }
#button-access #button-front ul li a { max-width: none;width: 230px }
.front .pane-vif-search-vigneron-form, .pane-vif-search-salon-form {padding: 20px 15px; margin: 0 0 15px 0 }
.front #search-inner p {margin: 0; font: 400 1.3em/1.2em 'aller-bd', serif }
.front #search-inner input[type=text] {width: 230px; margin: 0}
.front .form-actions.form-wrapper {position: relative; background: #a2033c; border: 0; width: 35px; height: 35px; font-size: 0 }
.front .form-actions.form-wrapper:after {position: absolute; content: "\E80E"; font: 22px/35px "Fontello"; color: #FFF; top: 0; left: 20% }
.front #search-inner input[type=submit] {background: rgba(162, 3, 60, 0); width: 35px; height: 35px; font-size: 0; padding: 0; border: 0; z-index: 1; position: relative }
.front .pane-vif-search-vigneron-form .form-item, .form-actions {margin: 20px 0 0 0 }
.search-advanced {display: none}

#gallery {width: 100%; height: 355px; margin-bottom:0 }
#gallery .gallery-inner {z-index: 1; position: relative; top: auto; left: auto; width: 100%; height: auto }
#gallery .gallery-arrow {top: 20%; left: 0; text-align: center; background:#373131; width: 30px; height: 42px }
#gallery .gallery-arrow.right {right: 0; text-align: center }
#gallery .gallery-arrow:after {font: 1.6em/42px "Fontello",serif }
#gallery .gallery-desc {position: relative; bottom: auto; left: auto; width: 290px; padding: 15px; background: #FFF}

#video-list .video-list-bloc { width: 100%; height: auto; margin: 0 0 20px }
#video-list .video-list-bloc:nth-child(3n) { margin: 0 0 20px }
.video-list-desc { padding: 15px }
.front .video-list-bloc {display: none }
.front .video-list-bloc:first-child {display: block }

#direct-selling .direct-selling-bloc:nth-child(n+2) {position: absolute; /*top: 150px;*/ left: 0 }
#direct-selling h2 {font: 400 1.55em/1.2em "aller",sans-serif }
#direct-selling {height: 470px; overflow: hidden }
#direct-selling:before{z-index: 0; width: 100%; top: 100px }
.direct-selling-bloc {z-index: 1 }
.direct-selling-bloc { display: none; position: relative; float: none; width: 290px; height: 300px; padding: 35px 15px 15px 15px; margin: 0 8px 0 0 }
.direct-selling-bloc:last-child { display: block }
.direct-selling-bloc:before {top: 30px }
.direct-selling-desc {float: left; width: 185px; padding-top: 20px }
#direct-selling .player {display: block; position: absolute; bottom: 40px; left: 40%}
#direct-selling .player .item-list {display: block}
#direct-selling .player ul li {float: left; margin: 0 3px; width: 14px; height: 14px; font-size: 0; background: #373131; border-radius: 50% }
#direct-selling .player .node-512.first.active {background:#a2033c}
.direct-selling-view { height: 200px }
.direct-selling-view img { height: 100%; width: auto }
#partners { padding: 15px 0 0 0; height: auto }
#partners ul {display: block; width: 290px; padding: 0 15px }
#partners li {display: inline-block; width: 100px; margin: 15px 20px 0px }
#partners li a { display: table-cell; width: 100px; padding: 0; text-align: center }
#partners li img { max-width: 100px; height: auto }

footer { width: 100%; margin: 0 auto }
footer .inner {background:none; padding: 0px 0 20px }
.footer-content { float: none; width: 100%; text-align: center }
.newsletter-subscribe a {width: calc(100% - 44px); padding: 0 10px 0 30px; margin-bottom: 15px }
.newsletter-subscribe a:before {left: 15px }
.footer-link a {font: 400 100%/1.7em 'aller', sans-serif }
.footer-mention {margin-top: 10px; font: 600 0.8em/1.3em "Open Sans",sans-serif }
.footer-follow {float: none; margin-left: 105px; margin-top: 20px }



/* ------ Actus list ------ */
.actu-list-bloc {clear: none; position: relative; margin-bottom: 40px }
.actu-list-view {float: none; width: 100%; margin-right: 0 }
.actu-list-desc {float: none; width: 290px;padding: 15px }
.item-list .pager {text-align: center; margin-bottom: 50px}

/* ------ Actus detail ------ */
#actu h1 {margin: 0 0 10px 15px; font: 400 1.7em/1.2em "aller",sans-serif }
.actu-bloc {width: 100%; padding-bottom: 420px }
.actu-date {margin: 0 0 15px 15px}
.actu-view {clear: none; float: none; width: 100%; height: auto; margin: 0 }
.actu-view img { width: 100%; height: auto }
#actu .field-name-body {clear: none; padding: 15px 15px 0 }
#actu .field-name-body h2 {font: 400 1.3em/1.2em "aller",sans-serif }
#actu .push-buy {position: absolute; bottom: 25px }
#also-list { margin: 0; background: none }
.also-list-bloc { position: initial; float: none; width: 100%; margin: 0; padding-bottom: 30px }
.also-list-desc { padding: 20px 15px 0 }
.also-list-desc .field-name-body { padding: 0 }



/* ------ search vigneron------ */
#search .search-form { padding: 0 15px; margin-bottom: 30px }
.search-form h1 {margin: 0 0 10px 0px; font: 400 1.7em/1.2em "aller",sans-serif }
.search-form input[type=text]{width: 270px; margin-right: 0; margin-bottom: 10px }
.search-form input[type=submit] {width: 290px }
#search-left { width: 100%; margin: 0 }
.search-title { position: relative; margin: 0 15px 10px; font: 400 1.1em/1em "aller-bd",sans-serif }
.search-title:after {position: absolute; content: "\E808"; right: 0; top: 0; font: 1.2em/1.2em "Fontello",serif; text-align: center }
#search-left .panel-pane.pane-block {display: none}
#search-left.open .panel-pane.pane-block {display: block}
#search-left .panel-pane.pane-block h2 {margin: 0 0 10px 0 }
#search-right {float: none; width: 100% }
#search-right .map { clear: both; position: relative; width: 100%; height: 295px }
#map-views { width: 100% !important; height: 295px !important }
.grippie {bottom: -275px }
#search-right .filter {margin-bottom: 30px;text-align: center }
#search-right .filter select {width: 290px}
.result-bloc {width: calc(100% - 60px); padding: 20px 30px; margin-bottom: 25px }
.result-name {float: none; margin:0}
.result-place { position:relative; float: none; margin: 20px 25px 30px }
.result-view { float: none; margin: 0 auto }
.result-desc { width: 100%; padding: 20px 0 15px}
.result-more a, .add-selection a { clear: both; float: left; margin: 15px 0 0 0 }
#search .pager {margin-top: 40px}


/* ------ detail vigneron------ */
.establishment-menu li.active a::after { right: 15px; left: auto; top: 4px; font-size: 1.6em; color: #890000; line-height: 40px; }
.establishment-specificity, .good-deal { padding: 20px; -moz-column-count: 1; -moz-column-gap: 0 }
#establishment {overflow: hidden }
#establishment .push-buy { display: none }
#establishment h2 { margin: 0 0 10px 15px }
#establishment .add-selection.top {position: initial; top:0; padding:0 0 15px 15px }
#establishment .add-selection.top a {float: none }
#establishment .establishment-view {clear: none; float: none; width: 100%; height: auto; margin: 0}
#establishment .establishment-view img { display: block; width: 100%; height: auto }
#establishment .establishment-desc .field-name-body { padding: 0 15px; margin: 20px 0}
#establishment .establishment-desc { margin: 0 0 20px }
.establishment-menu ul,.establishment-menu ul li { display: block; font: 400 1.1em/40px "aller-bd",sans-serif}
.establishment-menu li a::before { display: none }
.establishment-bloc {padding: 0}
.establishment-location { display: block }
.establishment-map { display: block; width: 100%; height: auto; margin-bottom: 0 }
.establishment-map img { display: block; width: 100%}
.establishment-contact { display: block; width: calc(100% - 60px); height:auto; margin-bottom: 0; padding: 30px }
.wine-bloc { width: 100%; height: auto; padding-right: 0 }
.wine-view { float: none; margin: -15px 0 20px 0; width: 100%; height: auto}
.wine-view img {width: 100%}
.wine-name {float: none; width: 290px; margin: 0 0 15px 15px }
.wine-place {float: left; width: calc(100% - 55px); padding: 5px 15px 25px 40px }
.wine-col.first { width: calc(100% - 55px); height: auto; padding: 0 15px 0 40px; margin-right: 0; border-right: 0 }
.wine-col.last {width: calc(100% - 30px); height: auto; padding: 10px 15px 25px 15px }
.wine-col.last .add-selection a {right: 15px }
.wine-more {margin-bottom: 20px }
.wine-more:after {left: 43% }
.establishment-show-bloc { width: 100%; height: auto; padding: 15px 0 55px 0 }
.establishment-show-view {float:none; width: 100%; height: auto}
.establishment-show-img {width: 100%}
.establishment-show-desc {float: none; width: 290px; height: auto; padding: 35px 15px 20px 15px}
.establishment-show-bloc .establishment-show-place { padding: 0; margin-bottom: 20px }
.establishment-show-bloc .establishment-show-stand { position: relative; top: 0; margin-bottom: 20px }
.establishment-show-bloc .establishment-show-link a {left: 15px}
.establishment-show-bloc .add-selection a {bottom: auto; right: auto; font-size: 1em;; margin: 25px 0 0 0 }
#gallery {height: auto}
#establishment #gallery .field-name-body { margin-bottom: 0; padding: 15px }
.establishment-partner {float: none; margin-top: 10px; text-align: center }

.oenotourisme-activity {display: block; padding-bottom: 30px}
.oenotourisme-activity-bloc {display: table; width: 290px; padding:0 15px 20px 15px }
.oenotourisme-activity-bloc span {display: table-cell; width: 130px; margin-bottom: 0 }
.oenotourisme-activity-bloc ul {display: table-cell; text-align: left; padding-left: 15px; vertical-align: middle }
.oenotourisme-activity-bloc ul li {width: 100%}
.oenotourisme-bloc { width: 100%; height: auto; padding: 15px 0 25px 0; margin-bottom: 0}
.oenotourisme-view {float:none; width: 100%; height: auto; margin: -15px 0px 0px }
.oenotourisme-view img {display: block; width: 100%}
.oenotourisme-desc {float: none; width: calc(100% - 30px); height: auto; padding: 20px 15px}
.oenotourisme-desc .field-name-body { padding: 0 }
.oenotourisme-tags { position: relative; bottom: auto; left: auto; margin: 0 }

.picnic-bloc { width: 100%; height: auto; padding: 15px 0; margin-bottom: 0 }
.picnic-map {width: 100%}
.picnic-map img {width: 100%}
.picnic-name {float: none; width: 290px; margin: 0 0 15px 15px }
.picnic-place {float: left; width: 290px; padding: 5px 0 25px 40px }
.picnic-col.first {width: 265px; padding-right: 15px; margin-right: 0; border-right: 0; padding-left: 40px }
.picnic-col.last {width: 290px; height: auto; padding: 20px 15px 40px 0px }
.picnic-bloc .add-selection a {right: 15px }

#establishment #direct-selling {margin-bottom: 30px }
#-vif-search-salon-form { padding-bottom: 80px }

/* ------ salon accueil ------ */
#show h2 {margin: 0px 0px 15px 15px }
#banner {display: none}
#show-page .add-selection a {margin: 0 0 0 15px }
.page-salons .add-selection a { margin: 0 0 0px 15px }
#show-page #news-headlight {display: block }
#show-page #news-headlight .news-headlight-bloc {width: 100%; margin: 0 0 10px 0 }
#show-page #event-list .event-link {top: auto; right: auto; bottom: 15px }
#show-page #event-list .event-list-bloc { float: none; width: 100%; height: auto; margin: 0 0 20px }
#show-page #event-list { position: relative; padding-bottom: 100px; background: none }
#video-list { margin-bottom: 0; position: relative; background: none }


/* ------ salon detail ------ */
#show .show-view {clear: none; float: none; width: 100%; height: auto; margin: 0 }
#show .show-view img { width: 100%; height: auto }
#show .event-link {float: none; margin-bottom: 20px }
#show #search-inner { margin: 0 15px }
#show #search-inner h2 { margin: 0 0 15px; font: 400 1.55em/1.2em "aller",sans-serif }
#show #search-inner .form-item { float: none }
#show #search-inner input[type=text] { width: calc(100% - 20px); margin: 0 0 15px }
#show #search-inner .form-actions {float: none}
#show #search-inner input[type=submit] { width: 100%; margin-bottom: 30px }
#show .show-information { padding: 20px 0px 90px }
#show .show-map {float: none; width: 100%; height: auto; margin-bottom: 0 }
#show .show-map img {display:block; width: 100%}
#show .show-contact {float: none; width: calc(100% - 30px); height: auto }
#show .event-link { top: auto; bottom: 0; right: auto }
#show .show-more {background: #FFF; padding: 25px 25px 0 }
#show .show-bloc {position: relative; padding-bottom: 420px; margin-bottom: 20px }
#show .show-bloc .push-buy { position: absolute; bottom: 25px }
#show .show-date {margin: 0 0 25px 15px }

/* ------ salon list ------ */
#show-list .show-list-filter {margin-bottom: 20px}
#show-list .show-list-filter .form-type-checkbox {margin-left: 15px }
#show-list .show-list-bloc {margin-bottom: 30px }
#show-list .show-list-view {float: none; width: 100%}
#show-list .show-list-desc { float: none; width: 290px; padding: 15px }
.show-list-edition { margin-top: 5px }
#gmap { width: 100% !important }

/* ------ salon list ------ */
.result-stand { position: relative; top: 0; right: 0; margin: 20px 0 0 }


/* ------ PicNic --------- */
.field-name-field-picnic-wait-bg img { width: 100%; height: auto; }
.field-name-field-picnic-block-photos > .field-items > .field-item { width: 100%; padding: 20px 0!important; }


/* ------ contact ------ */
#contact label {text-align:left }
#contact .form-item { margin-bottom: 10px }
input[type="text"], input[type="email"], input[type="number"], input[type="password"], textarea { width: calc(100% - 20px) }
#contact .form-actions { width: 100%; margin: 20px 0 }
/* ------ Formulaire ------ */
.formulaire .form-item { overflow: hidden; width: 100%; margin-bottom: 30px }
#dashboard-left .formulaire .form-item { width: 100% }
.formulaire label { float: none; width: auto; margin-right: 0; text-align: left }
.formulaire select { float: none; width: 100% }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=password], .formulaire input[type=number], #dashboard-left .formulaire input[type="text"], #dashboard-left .formulaire input[type="email"], #dashboard-left .formulaire input[type="password"], #dashboard-left .formulaire input[type="number"] { float: none; width: calc(100% - 24px) }
.formulaire .description { margin-left: 0 }
.formulaire .form-type-radios { margin-bottom: 20px }
.formulaire .form-type-radios .form-item { margin-bottom: 10px }
.formulaire .form-type-radio label { float : none }
.formulaire .form-type-radio input { float : left; margin: 6px 10px 0px 0 }
.formulaire .form-type-checkbox label { float : none }
.formulaire .form-type-checkbox input { float : left; margin: 6px 10px 0px 0 }
.formulaire #edit-actions { margin-left: 0 }
.formulaire #edit-actions input { margin-left: 0; width: 100% }
#user-profile-form #edit-cancel { margin: 20px 0 }
.password-strength { left: 0; top: 70px }
div.password-confirm { left: 0; top: 180px }
div.form-item div.password-suggestions { width: calc(100% - 22px); padding: 10px; margin: 0; }
.pane-vif-search-oenot-form,
.page-search-oenotourisme #search .search-form,
.pane-vif-search-picnic-form,
.page-search-pique-nique #search .search-form{
	padding: 20px 20px 170px
}
#search-inner input[type="submit"]{ width: 100% }
.pane-vif-search-oenot-form #search-inner #edit-actions, .page-search-oenotourisme .views-submit-button { width: auto; margin: 0 }
#search-inner input[type="text"], .pane-vif-search-oenot-form #search-inner input[type="text"], .page-search-oenotourisme .search-form input[type="text"] { width: calc(100% - 20px); margin: 0 0 20px }
.pane-vif-search-oenot-form #search-inner input#edit-save[type="submit"], .page-search-oenotourisme .search-form input#edit-save[type="submit"] { margin:  0 }
.location-or { position: absolute;  right: -13px;  top: 355px }
.location-or:before { right: 150px ; top: -37px }
.search-form .location-or { top: 260px }
.page-search-oenotourisme .views-submit-button input,.page-search-pique-nique .views-submit-button input { width: 100% }
.page-search-pique-nique .views-submit-button{margin:0;width:100%;}
.page-search-pique-nique .search-form input[type="text"]{width:100%;}
#search-left .pane-vif-search-facette-title > h2{
	padding-left: 15px;
}
.picnic-map-info{
	width:100%;
	height: 280px;
}
.picnic-contact-bloc .result-place{
	margin: 0 0 16px;
}
.node-type-vigneron .pane-picinic > h2{
	margin: 0 0 10px 15px;
}

/* ------ DASHBOARD ------ */
#dashboard-left { /*float: none;*/; width: 100%; margin-right: 0 }
#dashboard-right { /*float: none*/; width: 100%; padding: 0 }


/* ------ Initialisation Menu ------ */
ul.primary { overflow: hidden; height: auto; padding: 10px 0; font: 1em/1em 'aller-bd', serif }
ul.primary li a { display: block; float: none; padding: 10px 35px 10px 15px; line-height: 1em }
ul.primary li a:after { display: none }
ul.primary li a:hover { color: #890000; background: none }
ul.primary li.active a, ul.primary li.active a:hover { color: #890000; border: 0; background: none }
ul.primary li.active a:before { position: absolute; content: "\E818"; color: #890000; font: 1.3em/1em "Fontello",serif; transform: translate(-50%, 0); transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); top: 30%; bottom: auto; left: auto; right: 0 }


}