/* =Responsive Structure / mobile first
----------------------------------------------- */

.pubTvArea{position:relative}
#pubTvPastille{
        width: 77px;
        height: 77px;
        top: -35px;
        right: 20px;
        margin: 0;
        position: absolute;
}

@media (min-width: 370px) {
    

    
}

@media (min-width: 520px) {
    
    #cookie-banner { height: 60px !important; }
    
    #pageWrapper { width: 520px; margin-left: auto; margin-right: auto; box-shadow: 0 0 25px rgba(0, 0, 0, 0.35); }
      
    .container { padding: 0 50px 0; }
    #mobile-menu ul li a, #footer, .pageMainColMain, .contentFullPageSection, 
    .singleProductOtherSection, .main, .espaceProTopForm, .espaceProTopInfos  { padding-left: 50px; padding-right: 50px; }

    
    /*** home ***/
    
    .homeSlideshow, .homeSlideshowItems { height: 400px; }
    .slideItemContainer .messageImageLink { top: 50px; }
    
    .sejoursHomeListContainer { padding-left: 50px; padding-right: 50px; }
    .sejoursHomeListContainer .sejourVignette:nth-child(3n-5) { clear: both; }
    
    .priceTableQty, .priceTableHeaderQty, .priceTableNBpeople, .priceTableHeaderNBpeople { display: table-cell; }
      
    
}

@media (max-width: 768px) {
        /*** Personnalisez votre voyage version mobile ***/
    
    /*.persoVoyageItemMariage, .persoVoyageItemNoce { display: none !important;}*/
    .persoVoyageItemComb { float: unset !important;}
    
}


@media (min-width: 768px) {
    
    #pageWrapper { width: 768px; }
    
    .breadcrumb { display: block; }
    
    #menuPro { display: block; }
    .logoPro a.logoImage { position: relative; display: block; }
    .logoPro a.logoImage:after { 
        content: ''; position: absolute; right: -40px; top: -9px; z-index: 2; width: 35px; height: 32px;
        background: transparent url(img/vignette-logo-pro.png) no-repeat 0 0; 
    }
    
    /*** home ***/
    .sejoursHomeListContainer {  margin-right: -15px; margin-left: -15px; }
    .sejoursHomeListContainer .sejourVignette { float: left; width: 33.33333333%; padding: 0 15px 25px; }
    .partnersWebsiteArea { background: #333 url(img/partner-map.png) no-repeat 50% 50%; }
    
    
    .allDestinationsLink { float: right; max-width: 200px; padding-top: 10px; }
    .homeSearchWrapper form { float: left; width: 400px; margin-top: 0; }
    
    .homeLeftColumn .container { float: left; width: 50%; }
    .homeLeftColumn .pubTvArea { float: right; width: 50%; }
    
    .optionsForm { text-align: right; }
    
    .homeSlideRoomsWrapper { display: block; }
    .homeSlideshow, .homeSlideshowItems { height: 600px; }
    .slideItemContainer .messageImageLink img.messageImage { max-width: 460px; }
    .slideItemContainer .messageImageLink img.messageImage { max-height: 370px; }
    
    
    /*** footer ***/
    .FooterLinksListsRow { text-align: left; }
    .footerColumnInner { min-height: 380px; padding-top: 50px; }
    .footerList li { margin-bottom: 5px; }
    .footerList li span { display: block; }
    
    .footerPhone span { margin-top: 0; }
    
    .footerIconsLinks { text-align: center; border-top: 1px solid #0082AE; border-left: 0; }
    .footerIconsLinks > div { float: left; width: 25%; border-top: 0; border-left: 1px solid #0082AE; }
    .footerIconsLinks a i { display: block; font-size: 35px; line-height: 50px; }
    .footerIconsLinks a label { display: block; min-height: 32px; }
    .footerIconsLinks a label span { display: block; }
    
    /*** liste sejour ***/
    .productImageArea { padding-right: 15px; }
    .productInfos { padding-top: 0; }
    .sejourFeatures { float: left; width: 220px; }
    .productInfos .sejourPrice { float: right; width: 140px; margin-top: 0; }
    
    .pagePagination { padding-top: 0; display: inline-block; text-align: center; }
    
    /*** liste combines ***/
    .combineFeatures { background-color: #EAF5F8; margin-left: -142px; padding: 13px 10px 10px 150px; float: right; width: 100%; position: relative; z-index: 1; }
    .combineListTotal { float: left; }
    .combineListTextLink { float: right; }
    .combinesList .productInfos .sejourPrice { float: left; position: relative; z-index: 2; width: 142px; border-right: 2px solid #fff; }
    
    /*** single sejour ***/
    .unslider-arrow { bottom: 5px; }
    .unslider-arrow.next { right: 5px!important; }
    .unslider-arrow.prev { right: 45px; }
    
    .imagesRightSection img:first-child { margin-top: 0; }
    .productImageRoom img { width: auto; height: 104px; float: right; }
    
    .excursionImageWrapper { margin-bottom: 0; float: left; width: 30%; padding-right: 20px; }
    .excursionDescriptionWrapper { float: right; width: 70%; }
    .excursionHeader .excursionTitle, .excursionInfos { float: left; width: 100%; margin-right: -120px; padding-right: 120px; }
    .excursionHeader .excursionPrice, .excursionInfosWrapper .readMoreWrapper { float: right; width: 120px; text-align: right; }
    
    .singleProductOtherSection .sejourVignette { float: left; width: 25%; padding-left: 15px; padding-right: 15px; }
    .singleProductOtherSection .sejourVignette:nth-child(4n+1) { clear: both; }
    
    .tarifsSpeciauxInfos { float: right; width: 80%; }
    
    /*** single combine ***/
    
    .hotelInSingleCombineList { text-align: left; padding-bottom: 15px; }
    .hotelInSingleCombineList .hotelThumbnail { padding-right: 10px; padding-bottom: 0; }
    
    .hotelInSingleCombineList ul.productMediaLinks { font-size: 12px; line-height: 15px; text-align: right; padding-top: 0; padding-bottom: 0; }
    .hotelRowName { padding: 10px 0 0; min-height: 60px; }
    
    .hotelFormule { padding-top: 0; padding-bottom: 0; }
    .HotelDetailsDisplayLinks { text-align: right; position: relative; top: -10px; }
 
    /*** tarifs ***/
    .tarifsPageHeader1 h2 { float: left; width: 70%; }
    .supplementsLink { float: right; width: 30%; margin-top: 0; text-align: right; }
    
    .tarifs1MainForm form p { float: left; width: 100%; }
    .tarifs1MainForm form label { float: left; width: 35%; text-align: right; padding: 7px 20px 0 0; }
    .tarifs1MainForm form .bootstrap-select { float: left; width: 45%; }
    
    .tarifs1MainForm form .radioBtnLine p { display: inline; float: none; width: auto; margin-top: 0; }
    .tarifs1MainForm form .radioBtnLine label { display: inline-block; float: none; }
    .tarifs1MainForm form .radioBtnLine label.radioCompagnieLabel  { text-align: left; position: relative; top: 30px; width: auto; }
    .iconCompagnie { top: 7px; margin-left: 10px; }
    .tarifs1MainForm form .radioBtnLine .helper { display: inline-block; }
    
    
    /*** tarifs 2 ***/
    .tarifs2InfosRecap { width: 80%; margin: 0 auto; }
    .tarifs2InfosRecap .infoItem { float: left; width: 40%; margin-left: 20%; }
    .tarifs2InfosRecap .infoItem:nth-child(2n+1) { clear: both; margin-left: 0; }
    
    /*** tarifs 3 ***/
    
    .tarifs3MainRow .sectionHeader h2 { float: left; }
    .tarifs3MainRow .sectionHeader .sectionHeaderRight { float: right; padding-top: 15px; }
    .tarifs3MainRow .sectionHeader .sectionHeaderRight label { margin-left: 10px; }
    
    .tarifs3MainRow .flightRow { float: left; width: 100%; }
    .tarifs3MainRow .flightNumber { float: right; width: 20%; text-align: right; }
    .tarifs3MainRow .flightDeparture, .tarifs3MainRow .flightArrival { float: left; width: 40%; }
    .tarifs3MainRow .flightDeparture span, .tarifs3MainRow .flightArrival span { display: block; }
    .tarifs3MainRow .flightArrival i { display: block; }
    
    .assuranceName, .assuranceNickname { display: inline; }
    
    /*** tarifs 4 ***/
    .priceTable td, .priceTable thead th { padding: 10px; }
    
    .sectionHeaderTarifsTable h2 { float: left; }
    .sectionHeaderRight { float: right; }
    
    .specialOfferInfos { float: left; max-width: 400px;}
    .specialOfferThumbnail { margin-bottom: 0; float: right; width: 175px; }
    
    .buyerLeftFields { float: left; width: 47%; }
    .buyerRightFields { float: right; width: 47%; }
    .buyerAddressWrapper { min-height: 141px; }
    
    /*** espace Pro ***/
    
    .espaceProTopInfos  { padding-left: 30px; padding-right: 30px; min-height: 285px; }
    .espaceProTopForm { min-height: 285px; }
    
    .espaceProTopForm p { float: left; width: 48%; margin-left: 4%; margin-bottom: 20px; }
    .espaceProTopForm p:nth-child(2n+1) { clear: both; margin-left: 0; } 
     
    
    .espaceProSejourListSection .sejourVignette { float: left; width: 20%; }
    
    .newsInList:nth-child(3n+1) { clear: both; }
    
    /* */
    .middleText { display: block;  }
    
}




@media (min-width: 992px) {
    
    #pageWrapper { width: 992px; }
        
    #content, .leftColumnList.col-md-3, .rightColumnList.col-md-9, .rsvpBtn  { display: block;}
	   
    .priceTableList {display: block !important;}
    .btImprime{ display: block;}
/*  	.qtip  { display: block !important;} */
    .supplementsLink { display: block; margin-top: 15px; }
    #cookie-banner { height:unset !important; }
    
    .filtersTopTitle {padding-top: unset !important;}
    
    .main-menu { display: block; }
    #mobile-menu, #menu-toggle, .priceTableMobile, .priceTableMobileNoce, .back2topGrille, .btMobileFooter { display: none !important; }
    #headerRight { display: block; }
    
    #logoWrapper { padding-top: 40px; padding-bottom: 32px; }
    
    #menuPro { font-size: 14px; line-height: 18px; }
    #menuPro > ul > li > a { padding-left: 15px; padding-right: 15px; }
    
    /*** home ***/
    
    .homeSearchWrapper form { width: 600px; text-align: right; }
    
    .homeSlideshow { float: left; width: 822px; }
    .slideshowControls { left: 340px; }
    .slideshowControls a { height: 15px; width: 15px; margin: 0 2px; }
    #skyPub { display: block; float: right; }
    
    .homeSejoursListWrapper { float: right; width: 66.66666667%; }
    .homeLeftColumn { float: left; width: 33.33333333%; position: absolute; bottom: 0; left: 0; }
    #homePastille { width: 77px; height: 77px; top: -35px; right: 20px; margin: 0; }
    
    .partnerTitle span { display: block; }
    
    .homeSocial a { font-size: 17px; line-height: 34px;  height: 38px; width: 38px; top: 2px; }
    
    .homeMainRow { position: relative; }
    
    .homeLeftColumn .container, .homeLeftColumn .pubTvArea { float: none; width: 100%; }
    
    
    
    /*** footer ***/
    .footerColumnInner { padding-left: 45px; padding-right: 45px; min-height: 350px; }
    
    .footerCenter { clear: none; padding-top: 2px; }
    
    /*** liste sejour ***/
    .container.filtersSearch { padding-left: 15px; padding-right: 15px; }
    
    .filtersWidget ul li { padding: 2px 0; font-size: 12px; line-height: 15px; }
    .filtersWidget label:before { top: -2px; }
    .filtersWidget label:after { top: 2px; }
    
    .mobileOnlyText { display: none; }
    #moreFiltersArea { display: block!important; }
    
    .filterMoisDepart, .filterNombreNuites { float: none; width: 100%; margin-right: 0;}
        
    /*** liste combines ***/
    .combineListHotelItem:hover { background-color: #EAF5F8; } 
    .combineListHotelItem:hover .yellowStars { color: #002A3F; }
    
    /*** sejour single ***/
    
    .sejourSlideshow ul li { }
    .unslider-arrow { bottom: 25px; }
    .unslider-arrow.next { right: 40px!important; }
    .unslider-arrow.prev { right: 75px; }
    
    .combineSlideLeft .unslider-arrow.next { right: auto!important; left: 78px!important; }
    .combineSlideLeft .unslider-arrow.prev { right: auto; left: 43px; }
    
    .productImageRoom img { height: 108px; }
    
    .productPDFLink { padding-left: 50px; text-align: left; }
    .productPDFLink i { font-size: 40px; position: absolute; left: 0px; top: 10px; }
    
    .productPageHeaderRow { padding: 0 0 0; }
    .pageHeaderRight, .pageMainColRight { float: right; width: 15%; }
    .pageHeaderLeft, .pageMainColLeft { float: left; width: 15%; padding-top: 7px;}
    .pageHeaderMain { float: right; width: 70%; background: #fff; position: relative; top: -25px; z-index: 2; padding: 0 25px; }
    .pageHeaderMain:before { content: ''; position: absolute; width: 100%; height: 35px; left: 0; bottom: 100%; z-index: 1; background: #fff; }
    .pageHeaderMainText { float: right; width: 70%; background: #fff; position: relative; top: -60px; z-index: 2; padding: 0 25px; }
    .pageHeaderMainText:before { content: ''; position: absolute; width: 100%; left: 0; bottom: 100%; z-index: 1; background: #fff; }
    .productPageHeaderRow .pageHeaderRight, .productPageHeaderRow .pageHeaderLeft { padding-top: 10px; } 
    
    .pageHeaderRight ul.productMediaLinks li { display: block;  text-align: left; padding: 5px 0 0 0; }
    
    .productPageHeaderRow h1 { font-size: 44px; line-height: 44px; }
    
    .pageMainColMain { float: right; width: 70%; padding-left: 0; padding-right: 0; }
    .productPriceWrapper { min-height: 110px; margin-top: 0; text-align: left; padding: 30px 0 30px; }
    
    .productPriceTitle { float: left; width: 100px; padding-top: 10px; margin-bottom: 0;  }
    .singleProductPrice { float: left; width: 230px; margin-left: 30px; padding-top: 0; margin-bottom: 0; }
    .singleProductPrice span { padding-bottom: 3px; padding-left: 2px; }
    
    .singleProductPrice2 { float: left; width: 230px; margin-left: 30px; padding-top: 0; margin-bottom: 0; }
    .singleProductPrice2 span { padding-bottom: 3px; padding-left: 2px; }
    
    .singleProductDuration { float: left; width: 170px; padding-top: 40px; margin-bottom: 0; }
    
    .singleProductPriceComment { float: right; width: 164px; padding: 5px 0 0; }
    .pageMainColRight { padding-top: 7px; position: relative; }
    
    .tarifsSpeciauxWrapper { text-align: center; }
    .tarifsSpeciauxTitle { float: left; width: 20%; position: relative; top: 1px; }
/*     .tarifsSpeciauxInfos { float: right; width: 80%; } */
    .tarifsSpeciauxInfos p { margin: 0 0 5px; }
    .tarifsSpeciauxInfos p a .singleTarifSpecialTitle { display: inline-block; margin-right: 20px; }
    
    /*** single combine ***/
    .productPageHeaderRow.combinePageHeader .pageHeaderMain { padding: 0 25px; }
    .hotelsListHeader { text-align: left; }
    .hotelsListHeader h3 span { display: inline; }

    /*** tarifs ***/
    
    .tarifsBreadcrumb { display: block; }
    
                  
    .tarifs1MainForm { float: left; width: 68%; border-right: 1px solid #fff; }
    .tarifs1Conditions { padding-top: 45px; padding-bottom: 45px; float: right; width: 32%; }
    .tarifs1Conditions h4 { margin-bottom: 15px; }
    
    .hideOnMobile { display: inline; }
    .flip-scroll table { text-align: center; }
    
    /*** tarifs etape 2 ***/
    
    .tarifs2FirstRow form fieldset.tarifs2FirstRowFirstLine p { float: left; width: 40%;  }
    .tarifs2FirstRow form fieldset.tarifs2FirstRowFirstLine p:first-child, 
    .tarifs2FirstRow form fieldset.tarifs2FirstRowFirstLine p:last-child { width: 25%;  }
    .tarifs2FirstRow form fieldset.tarifs2FirstRowFirstLine p.numberDigitSelectWrapper .bootstrap-select { float: none; display: inline-block; width: 50px; }
    .tarifs2FirstRow form fieldset.tarifs2FirstRowFirstLine p label { float: left; width: 100%; text-align: right; padding: 5px 60px 0 0; margin-right: -50px; }
    
    .tarifs2FirstRow form fieldset.tarifs2FirstRowSecondLine p {  }
    .tarifs2FirstRow form fieldset.tarifs2FirstRowSecondLine p label { float: left; text-align: right; width: 305px; }
    .tarifs2FirstRow form fieldset.tarifs2FirstRowSecondLine p .bootstrap-select { width: 275px; }
    

    .tarifs2InfosRecap .infoItem { width: 30%; margin-left: 5%; }
    .tarifs2InfosRecap .infoItem:nth-child(2n+1) { clear: none; margin-left: 5%; }
    .tarifs2InfosRecap .infoItem:nth-child(3n+1) { clear: both; margin-left: 0; }
    
    /*** tarifs 3 ***/
    .tarifsSmallWidthSection { max-width: 600px; margin: 0 auto; }

    .tarifs3MainRow .sectionHeader h2, .tarifsPageHeader4 h2,  .passengersInfosSectionTitle { padding-right: 0; }
    .tarifs3MainRow .sectionHeader h2:before, .tarifsPageHeader4 h2:before, .passengersInfosSectionTitle:before { right: auto; left: -60px; }
    
    /*** espace pro ***/
    .espaceProMainForm { width: 85%; margin: 0 auto; }
    
}


@media (min-width: 1080px) {
    
    #pageWrapper { width: 1080px; }
    
    #menuPro > ul > li > a { padding-left: 23px; padding-right: 23px; }
    
    /*** home ***/
    
    .homeSearchWrapper form { width: 650px; }
    
    .homeSlideshow { float: left; width: 910px; }
    .slideshowControls { left: 375px; bottom: 10px; }
    
    .homeNewsletter input[type="text"], .homeNewsletter input[type="email"] { width: 209px; }
    
    .partnerItem a img { max-width: 200px; }
    
    /*** liste sejour ***/
    .sejourFeatures { width: 255px; }
    .sejourExcerpt { min-height: 100px; }
    
    /*** liste combines ***/
    .combineListHotelItem { margin-bottom: 7px; }
    
    /*** sejour ***/
    
    .unslider-arrow.next { right: 45px!important; }
    .unslider-arrow.prev { right: 80px; }
    
    .productPDFLink { padding-left: 55px; }
    
    .productImageRoom img { height: 118px; }
    .singleProductPrice { margin-left: 73px; }
    .singleProductPrice2 { margin-left: 170px; }
    
    /*** combine ***/
    .hotelRowName { padding: 16px 0 0; }
    
    /*** tarifs ***/
    .tarifsStep { padding-right: 22px; padding-left: 10px; }
    #headerRightTarifs { width: 780px; }
    
    /*** tarifs 2 ***/
    .tarifs2FirstRow form fieldset.tarifs2FirstRowSecondLine p label {  width: 355px; }
    
    /*** tarifs 3 ***/
    
    
}

@media (min-width: 1225px) {
    .back2topWrapper { position: fixed; right: 20px; bottom: 20px; width: 50px; height: 50px; padding: 0; background: transparent; display: none;  }
    .back2topWrapper a { color: #00a9d5; z-index: 999; display: block; border-radius: 5px; background: #002A3F;  }
    .back2topWrapper a:hover { color: #fff; background: #00a9d5; }
    .back2topWrapper a span { display: none; }
    .back2topWrapper a i { display: block; font-size: 30px;  }
    .back2topWrapper a i:before { line-height: 50px; }
}