/* 

CUSTOM STYLESHEET

Add your custom styles here instead of style.css so it is easier to 
update the template. Simply copy an existing style from style.css to 
this file, and modify it to your liking. 

*/

/* Hidden */
.hidden {
    display: none;
}

/* Ma couleur qui butte */
.blue {
    color: #003B6A;
}

.bluebackground {
    background-color: #003B6A;
}

/* Forms */
select {
    width: 100%;
}

input[type="text"] {
    width: auto;
}

.btn-custom:hover {
    opacity: 0.7!important;
}

input::-webkit-input-placeholder {
   color: #bbb;
}

input:-moz-placeholder {  
   color: #bbb;  
}

legend {
    color:#003B6A;
}

/* Fil d'ariane */
.breadcrumb {
    margin-bottom: 20px;
}

/* Titres */
h1 {
    color:#003B6A;
}

/* Zone du logo */
#logo {
    display: block;
    background: none;
    width: 940px;
    height: 115px;
    }
    #logo h1 {
        float:left;
        margin-right: 20px;
        } 
        #logo h1 img {
            width: 288px;
            }
    #logo .baseline {
        font-size: 12px;
        line-height: 12px;
        margin-top: 61px;
        display: inline-block;
        }
    #logo .contact {
        margin-top: 0;
        padding: 3px 5px;
        height: 73px !important;
        }
        #logo .contact p {
            display: block;
            font-size: 11px;
            font-weight: bold;
            text-transform: uppercase;
            margin-top: 10px;
            }
            #logo .contact p span {
                color: #003B6A;
                font-size: 32px;
                }
            #logo .contact p span.medium {
                font-size: 22px;
                }

/* Carousel */
.carousel {
    height: 204px;
    margin-bottom: 20px;
    }
    .carousel li {
        height: 204px;
        width: 300px;
        }
        .carousel li img {
            height: 154px;
            margin: 0 0 50px 0;
        }
    .carousel a.previous{
        top: 80px;
        }
    .carousel a.next{
        top: 80px;
        }
    .carousel h4 a {
        background-color: #003B6A;
        opacity: 1;
        }
    .carousel h4 a:hover {
        /* background-color: #54AEE0; */
        opacity: 0.7;
        }
        
/* Départs garantis */
.depart-garantit {
    width: 300px;
    height: 205px;
    }
    .depart-garantit p {
        margin-top: -11px;
        margin-bottom: 10px;
        font-size: 17px;
        overflow: hidden;
        width: 300px;
        height: 26px;
        }
    .depart-garantit img {
        width: 300px;
        height: 180px;
        }
    .depart-garantit a {
        text-decoration: none;
        }
    .depart-garantit a:hover {
        text-decoration: underline;
        }
        
/* Brochure */
.brochure img {
    margin: 5px;
    width: 80px;
    }

/* Forms de recherche simplon */
#tabs-1, #tabs-2, #tabs-3, #tabs-partenaires-1, #tabs-partenaires-2 {
    padding-top: 20px;
}
#top-destination-panel input[type="text"] {
    width: 252px;
}
#partenaires-panel {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 16px 0;
    padding: 1px 8px 4px;
}

/* Iframe formulaire de recherche des vols*/
#tabs-partenaires-2 iframe {
    width: 200px;
    height: 320px;
    margin: -10px 33px 0 33px;
}

/* Qui sommes nous */
.qui-sommes-nous {
    margin-top: 10px;
    background-color: #FFFFFF;
}

/* News */
.news {
    padding: 10px;
    margin: 20px 0;
    background: none repeat scroll 0 0 #FFFFFF;
    }
    .news h3 {
        color: #003B6A;
        font-size: 16px;
    }
    .news a.more {
        width: 262px;
        text-align: right;
        display: block;
    }
    
/* Nos agences home */
.nos-agences ul li {
    float: left;
    display: block;
    width: 290px;
    list-style-type: none;
}

/* Détail agence */
.detail-agence {
    height: 444px;
    }
    .detail-agence .adresse-agence {
        margin-bottom: 20px;
        height: 195px;
        overflow-y: auto;
        overflow-x: hidden;
        }
    .detail-agence .photos-agence {
        height: 195px;
        width: 282px;
        }
        .detail-agence .photos-agence .carousel {
            height: 195px;
            width: 282px;
            }
            .detail-agence .photos-agence .carousel li {
                height: 195px;
                width: 282px;
                }
                .detail-agence .photos-agence .carousel li img {
                    height: 195px;
                    width: 282px;
                    }
                    
.collaborateurs ul {
    padding: 0;
    }
    .collaborateurs li {
        list-style-type: none;
        float: left;
        width: 150px;
        background-color: #fff;
        margin-right: 20px;
        margin-bottom: 20px;
        }
        .collaborateurs li.no-margin {
            margin:0;
            }
            
/* Formulaire de contact */
.contact {
    margin-top: 25px;
    }
    .contact label {
        width: 300px;
        padding-right: 10px;
        display: inline-block;
        text-align: right;
        }
    .contact input, .contact textarea {
        width: 400px;
    }
    .contact input.btn {
        margin-left: 313px;
        margin-bottom: 20px;
        width: 410px;
    }
    .contact select {
        width: 410px;
    }
    .contact p.obligatoire {
        float:right;
    }
    
/* Liste des séjours Simplon */
span.label {
    width: 60px;
    display: inline-block;
}

.infopanel .a-partir-de {
    font-size: 18px;
    font-weight: bold;
    height: 29px;
    margin-bottom: 0;
    }
    .infopanel .a-partir-de:hover {
        opacity: 0.7;
        cursor:pointer;
        }
    .infopanel .a-partir-de a {
        color: #fff;
        text-decoration: none;
        }

.infopanel h2 {
    margin-bottom: 0;
    font-size: 18px;
    }
    .infopanel h2 a {
        text-decoration: none;
        }
    .infopanel h2 a:hover {
        text-decoration: underline;
        }
    
.infopanel div.sous-titre {
    font-style: italic;
}

.infopanel ul {
    list-style-type: none;
    height: 74px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    margin: 5px 0;
    }
    
.infopanel .roomlist th {
    }
    .infopanel .roomlist th.dates {
        width:50%;
        }
    .infopanel .roomlist th.disponibilites {
        width:15%;
        }
    .infopanel .roomlist th.prix {
        width:15%;
        }
    .infopanel .roomlist th.detail {
        width:10%;
        }
    .infopanel .roomlist th.reserver {
        width:10%;
        }
        
/* Détail d'un sérjour Simplon '*/
.services ul {
    list-style-type: none;
    }
    
.detail-voyage h2 {
    margin-bottom: 20px;
    }    

.detail-voyage h3 {
    color:#003B6A !important;
    }
    
.detail-voyage .roomlist{
    font-size: 14px;
    margin-bottom: 20px;
    }
    .detail-voyage .roomlist th {
        
        }
        .detail-voyage .roomlist th.dates {
            width:55%;
            }
        .detail-voyage .roomlist th.disponibilites {
            width:15%;
            }
        .detail-voyage .roomlist th.prix {
            width:15%;
            }
        .detail-voyage .roomlist th.reserver {
            width:15%;
            }
    .detail-voyage .roomlist tr {
        
        }
        .detail-voyage .roomlist tr td {
            height: 39px;
            vertical-align: middle;
            }
    .detail-voyage img.big {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #EEEEEE;
        float: right;
        margin: 0 0 10px 10px;
        padding: 6px;
        }
        
.carousel-voyage .carousel {
    width:282px;
    height: 144px;
    margin: 10px 0 0 0;
    }
    .carousel-voyage .carousel li {
        width:282px;
        height: 144px;
        }
        .carousel-voyage .carouselli img {
            width:282px;
            height: 144px;
            }
    .carousel-voyage .carousel a.previous {
        top:60px;
    }
    .carousel-voyage .carousel a.next {
        top:60px;
    }
            
/* Liste des spéctacles */
.representation .grid_5 {
    width: 440px;
    margin-right: 0;
    }
    .representation .grid_5 h2 {
        margin-bottom: 10px;
        }
    .representation .grid_5 img {
        margin-right: 20px;
        width: 120px;
        }
        
        
.representation .grid_2 {
    margin-right: 0px;
    }
    .representation .grid_2 p {
        font-weight: bold;
        }
    .representation .grid_2 .btn {
        font-size: 18px; 
        margin-top: 5px;
        }
        
/* Panier étape 1 */
.prix-total-produit {
    font-size: 20px;
}

.suivant-panier {
    margin: 15px;
    font-size: 20px;
}

.panier {
        
    }
    .panier #voyageurs {
        margin-bottom: 30px;
        }
    .panier h2 {
        line-height: 74px;
        margin-bottom: 10px;
        padding-left: 81px;
        }
        .panier h2.produit {
            background: url('../../../images/interface/front/v2/panier-produit.png') no-repeat;
            }
        .panier h2.depart {
            background: url('../../../images/interface/front/v2/panier-depart.png') no-repeat;
            }
        .panier h2.adresse {
            background: url('../../../images/interface/front/v2/panier-adresse.png') no-repeat;
            }
        .panier h2.paiement {
            background: url('../../../images/interface/front/v2/panier-paiement.png') no-repeat;
            }
        .panier h2.confirmation {
            background: url('../../../images/interface/front/v2/panier-confirmation.png') no-repeat;
            }
    .panier label {
        width: 170px;
        display: inline-block;
        text-align: right;
        margin-right: 10px;
        }
    .panier select.civilite {
        width: 50px;
        margin-right: 15px;
        }  
    .panier input[type="text"] {
        margin-right: 15px;
        width: 130px;
        }  
    .panier select {
        margin-right: 10px;
        width: 140px;
        } 
    .panier fieldset {
        padding: 15px;
        } 
    .panier legend {
        padding: 10px;
        } 
    .panier .prix-total-produit {
        font-size: 14px;
        display: inline-block;
        width: 120px;
        margin: 0;
        }
        .panier .prix-total-produit span {
            clear: both;
            display: inline-block;
            font-size: 20px;
            font-weight: bolder;
            }
            
/* Spinner AJAX */
#spinner-gestour {
    margin-right: 10px;
    }
    
/* Page de réservation */
.reservation {
    margin-bottom: 15px;
    }
    .reservation label {
        width: 200px;
        }
    .reservation input[type="text"] {
        width: 250px;
        }
    .reservation select {
        width: 260px;
        }
        
/* Social media */
.social {
    line-height: 32px;
    }
    .social img {
        float:right;
        margin-right: 25px;
        }