/*
 * fatima ellaymouni
 */
/***************** les fonts *********************/
 
@font-face {
    font-family: 'melbournebold';
    src: url('font/melbourne_bold-webfont.eot');
    src: url('font/melbourne_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/melbourne_bold-webfont.woff') format('woff'),
         url('font/melbourne_bold-webfont.ttf') format('truetype'),
         url('font/melbourne_bold-webfont.svg#melbournebold') format('svg');
    font-weight: normal;
    font-style: normal;

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

}
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

 

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

 

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

 

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

@media screen and (max-width: 48em) {/* 768px */

div.Contacteer {
    width: 420px !important;
}
div.Contacteer button {
	margin-right:7px;
}


}
/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body {
    background: url(../img/bg.jpg) top center repeat-x;
    font-family: Tahoma;
    font-size: 12px;
    color: #696969;
    min-width: 963px;
}
.index {
    background-image: url(../img/bg-index.jpg);
}
header {
    background: url(../img/back-header.png) top left repeat-x;
    height: 101px;
    z-index: 99;
    position: relative;
    width: 100%;
    min-width: 960px;
}

a {
	color:#1f7fbd;
	text-decoration:none}
/***********************/
#header {
    width: 960px;
    margin: 0 auto
}

div.langue { 
    height: 35px;
    width: 70%;
    float: right;
    text-align: right;
    margin-top: 15px;
}
div.langue a {
    color: #b9b9b9;
    background: url(../img/langue.png) left top no-repeat;
    text-decoration: none;
    font-size: 11px;
    font-family: 'Segoe UI';
	height: 30px;
	width:24px;
	display:inline-block;
	padding:4px 1px;
	text-align:center;
	margin:0 !important;
}
div.langue a:hover {
    color: #FFF;
    background: url(../img/hover-langue.png) left top no-repeat;
}
div.langue a.active {
    background: url(../img/langue-active.png)  0 -1px no-repeat;
    color: #22b4e8;
}

/*
 * menu
 */
nav {
float: right;
width: 780px;
margin-top: 10px;
text-align: right;
display: block;
font-family: 'melbournebold';
}

#img-logo {
    float: left;
    z-index: 99;
    position: absolute;
}
div.menu a {
    color: #3a3a3a;
    font-size: 12.4999px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0 5px;
}
div.menu a.active, div.menu a:hover {
    color: #234a9a;
}
/*
 * slide
 */
 #slide {
    width: 960px;
    margin: 0 auto;
    height: 402px;
    color: #FFF;
 }
#left-slide {
    float: left;
    width: 250px;
    height: 267px;
    
}
#logo-slide {
    width: 100%;
    height: 100px;
    float: left;
    text-align: center;
    display: none;
}

#logo-slide h1 {
    font-size: 80px;
    font-family: 'melbourneregular';
    margin: 0;height: 88px;
    color: #FFF;
}
#logo-slide h2, div#slide.quism #logo-slide h2 {
    font-weight: normal;
    margin: 0;
    font-family: 'melbourneregular';
    font-size: 23px;
    color: #FFF;
}
div.content.otherss {
min-height: 950px;
}
#logo-slide img {
    margin-top:30px;
}
#image-slide {
    width: 672px;
    height: 440px;
    float: right;
    z-index: 2;
    margin-top: -135px;
    display: none;
    background: url(../img/animation/home.png) bottom right no-repeat;
}
#image-quisommesnous {
     background: url(../img/qui-sommes-nous.png) bottom right no-repeat;
     width: 352px;
     height:274px;
     float: left;
     z-index: 1;
    position: absolute;
    margin-left: 140px;
    margin-top: -10px;
    display: none;
}
div#image-quisommesnous.yt {
    background-image: url(../img/animation/distribution.png);
    margin-left: 180px;
}
div#image-quisommesnous.express {
    background-image: url(../img/express.png);
    margin-top: -60px;
    margin-left: 170px;
}
div#image-quisommesnous.at {
    background-image: url(../img/animation/auto.png);
     background-position: 0 0;
    margin-left: 130px;
    margin-top: 25px;
    width: 450px;
}
div#image-quisommesnous.rt {
    background-image: url(../img/animation/parc.png);
    margin-top: 20px;
    width: 479px;
    margin-left: 60px;
}
div#image-quisommesnous.sitemap {
    background-image: url(../img/sitemap.png);
    margin-left: 180px;
    height: 180px;
}
div#sitemap div {
    width: 250px; 
    padding-left: 50px;
    float: left;
}
#sitemap a {
    color: #6d8088
}
#sitemap a:hover {
    color: #1F7FBD
}


#lock {
    background: url(../img/animation/lock.png) 20px 10px no-repeat;
    padding-left: 70px;
    display: none;
    margin-top: 8px;
    width: 230px;
}
#clock {
    background: url(../img/animation/clock.png) 20px 10px no-repeat;
    padding-left: 70px;
    display: none;
    margin-top: 8px;
    width: 230px;
}
#puce {
    background: url(../img/animation/puce-ok.png) 20px 10px no-repeat;
    padding-left: 70px;
    display: none;
    margin-top: 8px;
    width: 230px;
}
#lock h1, #puce h1, #clock h1 {
    font-size: 30px;
    font-family: 'melbourneregular';
    margin-bottom: 0;
    color: #FFF;
}
#lock span, #puce span, #clock span {
    font-family: Arial; 
}
/**************** qui sommes nous *************/
div#slide.quism {
    height: 255px;
}
div#slide.quism #logo-slide {
    float: right;
    height: 25px;
    margin-top: 15px;
    width: 650px;
}
div#slide.quism #left-slide { 
    float: right;
    height: 190px;
    margin-right: 110px;
    margin-top: 10px;
}
div#slide.quism #lock h1, div#slide.quism #puce h1, div#slide.quism #clock h1 {
    margin-top: 12px;
line-height: 32px;
}
div#left-slide.catindex {
    margin-top: 20px
}
/******************button devis ************************/
div.back-devis {
    height: 91px;
    min-width: 960px;
    width: auto;
    background: url(../img/button/back-white-to-repeat.png) top left repeat-x;
    margin-top: -57px;
    z-index: 2;
    position: relative;
}
div.button-devis {
    background:  url(../img/button/back-button-blanc.png) top left no-repeat;
    width: 300px;
    height: 92px;
}
div.button-devis button {
    background:  url(../img/button/button-devis.png) top left no-repeat;
    width: 247px;
    height: 49px;
    color: #fff;
    font-size: 24px;                                  
    font-family: 'melbourneregular';
    border: none;
    text-align: center;
    padding: 0 15px 0 23px;
    margin: 30px 0 0 25px;
    text-shadow: 1px 1px #497f00;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all .3s ease-in-out;
}
div#index div.button-devis button {
    margin-top: -12px;
}
div.button-devis button span {
    float: right;
    width: 41px;
    height: 31px;
    background: url(../img/icon/fleche.png) 0 0 no-repeat;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all .3s ease-in-out;
}
div.button-devis button:hover span {
    background-position: 10px 0;
}
div.button-devis button:hover {
    background-image: url(../img/button/button-devis-hover.png);
}
div.button-devis.btndevis button {
    margin-top: 30px;
}
/****************** category ********************/
div.content {
    background-color: #FFF;
    min-height: 380px;
    min-width: 960px;
}
div.content div#header {
    height: 220px;
}
div.category {
    width: 240px; 
    float: left;
    text-align: center;
    margin-top: 16px;
}
div.category div.title {
    width: 177px;
    height: 39px;
    margin: 0 auto;
    background: url(../img/back-cat.png) top center no-repeat;
    padding: 2px 0;
    font-weight: bold;
    /*font-size: 12px;
    font-family: 'melbourneregular';
    color: #333;*/
}
div.category .img {
    margin-top: 20px;

}
div.category .img1 {
    margin-top: 22px;
	height:142px;
}
div.category .img2 {
    margin-top: 12px;
	height:142px;
}
div.category .img3 {
    margin-top: 20px;
	height:142px;
}
div.category .img4 {
    margin-top: 10px;
	height:142px;
}
/*********************** other ******************/
div.separate {
    background: url(../img/saparate.png) top left repeat-x;
    width: 100%;
    height: 5px;
    margin: 0 auto;
}
div#taillesite {
    width: 960px;
    margin: 0 auto;
}
div.Wie {
    
width: 900px;
margin: 0 auto;
}
div.Wie div.separate {
    padding-bottom: 25px;
}
div.Wie p {
    font-size: 13px;
    margin-top: 4px;
    margin-bottom: 4px;
    text-align: justify;
}
div.Wie img {
    float: left;
    margin-right: 10px;
     
}
div.Wie h1 {
    font-size: 27px;
    font-family: 'melbourneregular';
    color: #a5c02a;
    margin-bottom: 7px;
    line-height: 24px;
}
div.Wie h1 span {
    color: #696969;
}
div.Wie button {
    background: url(../img/button/readmore.png) top center no-repeat;
    width: 100px;
    height: 39px;
    border: none;
    color: #FFF;
}
div.Wie button:hover, button:hover {
    background-image: url(../img/button/readmore-hover.png);
}
/********************** footer **********************/
div.footer {
    background: url(../img/back-ground-footer.jpg) top center repeat-x;
    height: 272px;
    min-width: 960px;
    margin-top: 15px;
    margin-bottom: 10px;
}
div.taxixollicontact {
    width: 122px;
    height: 188px;
    background: url(../img/taxicolli-footer.png) top center no-repeat;
    float: right;
    color: #FFF;
    font-size: 14px;
    font-family: Arial;
    font-weight: bold;
	margin-right:-8px;
    padding: 75px 57px 0 105px;
}
div.quiklink {
    width: 215px;
    background: url(../img/forms/ligne-footer.png) 210px 67px no-repeat;
    float: left; 
    height: 270px;
}

div.quiklink a:hover { color:#7b7b7b}

div.Contacteer {
    width: 407px;
    float: left;
    padding-left: 37px;
}
div.Contacteer li {
    list-style: none;
    font-size: 16px;
    font-family: Arial;
    color: #595959;
}
div.Contacteer input {
    background: url(../img/button/input-newsletter.png) top left no-repeat;
    width: 300px;
    height: 43px;
    border: none;
    padding-left: 13px;
    font-size: 12px;
    font-family: Arial;
    margin: 0;
    float:left;
    color: #303030;
}
div.Contacteer button {
    background: url(../img/button/button-newsletter.png) center center no-repeat;
    width: 91px;
    height: 43px;
    color: #FFF;
    border: none;
    font-family: 'melbourneregular';
    font-size: 15px;
    float: right;
    text-shadow: 1px 1px #0052ac;
    transition: all 0.2s ease-in-out 0s;
-webkit-transition: all .3s ease-in-out;
}
div.Contacteer button:hover {
    background-image: url(../img/button/button-newsletter-hover.png);
}

div#info {
    float: left;
    margin-left: 10px;
}



/******/
div.quiklink ul, div.Contacteer ul {
    padding-left: 10px;
    margin-bottom: 10px;
}
div.quiklink li {
    list-style : none;
    font-size:14px;
    font-family: Arial;
    
    border-bottom: 1px solid #383535;
    width: 150px;
    padding: 5px 0;
}
div.quiklink li a {
    text-decoration: none;
    color: #595959;
}
div.footer div.title {
    color: #FFF;
    margin-top: 30px;
    font-size: 25px;
    font-family: 'melbourneregular';
    padding-bottom: 10px;
    background: url(../img/forms/ligne-Contacteer.png) bottom left repeat-x;
    width: 80%;
}
div.Contacteer div.title {
    width: 100%;
}
div.adress {
    margin-bottom: 18px;
    font-size: 12px;
    font-weight: normal;
}
div.adressa {
    margin-bottom:  12px;
}
div.adress a {
    color: #019cff;
}
div.grayfooter {
    color: #b3b3b3;
    font-size: 13px;
    margin-bottom: 10px;
}
div.grayfooter.right {
    float: right;
	margin-right:4px;
    text-align: right;
    margin-top: 10px;
    width: 105px;
}
div.grayfooter.right div {
    float: left;
    margin-top: 5px;
}
 
 
div.iii a {

    width: 145px;
    height:40px; 
    margin-left: 10px;
     
    float: left;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all .2s ease-in-out;
}
div.iii a.facebook {
    background: url(../img/icon/social/facebook.jpg) 0 0 no-repeat;
}
div.iii a.facebook:hover {
    background-position: 0 -40px;
}

div.iii a.in {
    background: url(../img/icon/social/in.jpg) 0 0 no-repeat;
}
div.iii a.in:hover {
    background-position: 0 -40px;
}
/****************** infobulles *******************/
.tooltip
{
  position: relative;
   
   
  display: inline-block;
  text-decoration: none;
  color: #fff;
  outline: none;
}

.tooltip span
{
  visibility: hidden;
  font-size: 11px;
  position: absolute;
  text-align: center;
  bottom: 28px;
  left: 50%;
  z-index: 999;
  width: 91px;
  margin-left: -85px;
  padding: 2px 2px;
  border: 1px solid #ac2d5d;
   letter-spacing: 0.8px;
  background-color: #ea4c89;
  -moz-border-radius: 4px;
  border-radius: 4px;
  text-shadow: 1px 1px 0 #ac2d5d;
}

.tooltip:hover
{
  border: 0; /* IE6 fix */
}

.tooltip:hover span
{
  visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 90%;
  margin-left: -8px;
  border-top: 8px solid #ea4c89;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 0;
}

.tooltip span:before
{
  border-top-color: #ac2d5d;
  bottom: -8px;
}
/******************** column-left ********************/
div.content.others {
    min-height: 950px;
}
div#column-left {
    width: 644px;
    float: left;
    padding-left: 30px;
}
h1 {
    color: #146a90;
    font-size: 24px;
    font-family: 'melbourneregular';
     margin: 0;
     font-weight: normal;
}
h2 {
    color: #9DB83B;
    font-family: 'melbourneregular';
}
div#column-left p {
    color: #6d8088;
    text-align: justify;
}
div#column-left h3 {
    color: #9db83b;
    font-family: Tahoma;
    font-size: 14px;
     
}
  ul  {
    padding-left: 25px;
}
  ul li {
    list-style-image: url(../img/icon/superieur.png);
    color: #6d8088;
    margin-bottom: 5px;
}

/******************** column-right ********************/
div#column-right {
    width: 284px;
    float: right;
}

div.column-up {
    background: url(../img/rectangle-top.jpg) top center no-repeat;
    width: 271px;
    height: 5px;
    margin : 0 auto
}

div.column-under {
    background: url(../img/back-under.jpg) top center repeat-y;
    height: 905px;
    width: 271px;
     margin : 0 auto
}
div.column-under div.category {
    background: url(../img/forms/back-under-cat.png) bottom center no-repeat ;
    width: 269px;
    padding-bottom: 25px;
    padding-top: 25px;
    margin: 0 auto
}
div.column-bottom {
    background: url(../img/rectangle-bas.jpg) bottom center no-repeat;
    width: 271px;
    height: 5px;
    margin : 0 auto
}
/***************************** contact ************************/
div#map_canvas {
    min-width: 960px;
    width: 100%;
    height: 419px;
    margin-top: -6px;
}
div.content.contacts {
min-height: 500px;
}
div.content.contacts p {
    font-size: 13px
}
div.contact {
    background: url(../img/forms/back-contact.png) top center no-repeat;
    width: 211px;
    color: #666666;
    padding: 15px 50px 0 10px;
    font-size: 13px;
    margin-top: 10px;
}
div.contact p {
    text-align: right;
}
div.row {
    margin: 10px 0;
    min-height: 41px;
}
div.row.textarea {
    height: 120px
}
div.row label {
    margin-left: 30px;
    color: #778890;
    font-size: 14px;
    margin-top: 10px;
    float: left;
}
div.row.error label, div.row.error h2 {
    color: #ff8e7b;
}
div.row input[type="text"] {
    background: url(../img/button/input.jpg) top center no-repeat;
    border: none;
    width: 486px;
    height: 32px;
    padding: 5px 0 5px 20px;
    float: right;
}
div.row textarea {
    background: url(../img/button/textarea.jpg) top center no-repeat;
    border: none;
    width: 486px;
    height: 99px;
    padding: 5px 0 5px 20px;
    float: right;
}
button {
    color: #FFF;
    background: url(../img/button/readmore.png) top center no-repeat;
    border : none;
    width: 100px;
    height: 39px;
    font-size: 14px;
}
div.button {
    text-align: center;
    width: 380px;
}
/************** discours**************/
div.discours {
    background: url(../img/forms/discours.jpg) top center no-repeat;
    width: 455px;
    height: 54px;
    color: #6d8088;
    font-size: 20px;
    font-family: "Times New Roman";
    font-style: italic;
    padding: 18px 90px;
    margin-top: 10px;
    text-align: center;
}
/***************** cars ****************/
div.cars {
    background : url(../img/forms/back-voiture.jpg) top center no-repeat;
    width: 298px;
    height: 233px;
    padding: 5px 8px 5px 10px;
    float: left;
    margin: 5px 5px 5px 0;
}
div.type {
    background : url(../img/icon/type-cars.png) top center no-repeat;
    width: 36px;
    height: 27px;
    text-align: center;
    color: white;
    padding-top: 8px;
    margin-right: -2px;
    float: right;
    margin-top: -23px;
    z-index: 99;
    position: relative;
}
div#column-left div.cars h1 {
    font-family: Tahoma;
    font-size: 14px;
    font-weight: bold;
    color: #9DB83B;
    margin: 5px 0;
}
div.details {
    width: 50%;
    float: left;
    color: #146a90;
    font-size: 12px;
    font-family: Tahoma
}
div.details span {
    color: #6d8088;
    font-size: 12px;
    font-family: Tahoma
}
div.details span span {
    font-size: 10px;
}
div.content.car {
min-height: 1400px;
}
div.legende {
    background : url(../img/forms/legende.jpg) top center no-repeat;
    width: 212px;
    float: right;
    height: 64px;
    padding: 12px 60px 12px 12px;
    margin-top: 15px;
}
div.legende h2 {
    margin: 0 0 10px 0;
    color: #333333;
    font-size: 13px;
    font-weight: normal;
    text-transform: uppercase;
    text-align: left;
}
div.legende span {
     
    color: #146a90;
}
div.paddingleft {
    padding-left: 30px
}
.notification {
cursor: pointer;
clear: both;
height: auto;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px 5px 5px 40px;
font-size: 12px;
position: relative;
min-height: 30px;
vertical-align: middle;
}
.failure {
background-image: url(../img/icon/error.png);
background-position: 5px center;
background-repeat: no-repeat;
border: 1px solid #EB5439;
background-color: #FCCAC1;
}
.success {
    background-image: url(../img/icon/success.png);
    background-position: 5px center;
    background-repeat: no-repeat;
    border: 1px solid #98c700;
    background-color: #e1fca4;
}
.notification p {
color: #6D8088;
line-height: 12px;
padding: 2px;
margin: 1px;
width: 300px !important;
}
div.content.contacts.classhauteur {
    min-height: 600px;
}

/**************** cfr ****************
ul.cfr li {
    width: 250px;
    float: left;
}*/
/****************** tarifs *******************/
.obligatoire {
	float:right;
	color:#778890;
    font-size: 12px;
    font-family: Tahoma;
    margin-top: 10px;
	}
div#column-left form.tarif h2, div#column-left form.tarif h3 {
    margin-bottom: 0;
    font-size: 24px;
    float: left;
    font-weight: normal;
    width: 96%;
}
div#column-left form.tarif h3 {
    color: #1dace8;
    font-size: 17px;
}
form.tarif div.row {
    width: 310px;
    float: left;
    margin: 0;
    padding-left: 10px;
}
form.tarif div.row.first {
    width: 100px
}
form.tarif div.row.second {
    width: 200px
}
form.tarif div.row input {
    width: 279px;
    height: 33px;
    float: none;
    margin: 0 0 0 -2px;
    background: url(../img/button/zone-text.png) 0 0 no-repeat;
}
form.tarif div.row.first input {
    width: 80px;
    background-image: url(../img/button/input-petit.png);
}
form.tarif div.row.second input {
    width: 170px;
    background-image: url(../img/button/input-petit-.png);
    margin-left: -6px;
}
 
form.tarif div.row label {
    margin: 5px 0 ;
}
form.tarif div.row.textarea {
    width: 100%;
    min-height: 180px;
    
}

form.tarif div.row.textarea textarea {       
    margin-top: 10px;
    margin-right: 20px;
    background-image: url(../img/button/textarea.png);
    width:601px;
}
form.tarif  div.button {
text-align: left;
width: 90%;
float: left;
padding-left: 10px;
}
div.clear {
    width: 614px;
    margin-left: 10px;
    border-top: 1px solid #ebe6e2;
    height: 4px;
    float: left;
}
/******/
 div.selectBox
            {
                position:relative;
                display:inline-block;
                cursor:pointer;
                text-align:left;
                line-height:30px;
                clear:both;
                color:#888;
                border: 1px solid #CCC;
                border-radius:5px;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
                margin-left: 20px;
                /*margin-top: 20px;*/
            }
            span.selected
            {
                width:160px;
                text-indent:20px; 
                border :none;
                 
                overflow:hidden;
                margin-left: 2px;
                border-radius:5px;
            }
            span.selectArrow
            {
                width:30px; 
                text-align:center;
                font-size: 0px;
                
            }
            
            span.selectArrow,span.selected
            {
                position:relative;
                float:left;
                height:29px;
                z-index:1;
                margin-right: 2px;
                margin-top: 1px;
            }
            
            div.selectOptions
            {
                position:absolute;
                top:30px;
                left:0;
                width:195px;
                border:1px solid #ccc;
                border-bottom-right-radius:5px;
                border-bottom-left-radius:5px;
                overflow:hidden;
                background-color: #fff;
                padding-top:2px;
                display:none;
            }
                
            span.selectOption
            {
                display:block;
                width:80%;
                line-height:20px;
                padding:5px 10%;
            }
            
            span.selectOption:hover
            {
                color:#f6f6f6;
                background:#4096ee; 
            }
/********************** types*******************/
div.Direction, div.Express, div.Distribution {
    display: none;
    width: 100%
}
div.content.trav {min-height: 980px;}
div.content.trav.classhauteur {min-height: 1200px;}

div#image-trieven {
background: url(../img/animation/tarif.png) bottom right no-repeat;
width: 352px;
height: 274px;
float: left;
z-index: 1;
position: absolute;
margin-left: 250px;
margin-top: 0;
display: none;
}
div.white {

    width: 100%;
    
    
    height: 10px;
    float: left;
}
form.tarif div.row.typeinput {
    width: 100%;
    margin-top: 10px;
}
/********** smart ************/
a#smart {
    background:url(../img/icon/smart.jpg) 0 0 no-repeat;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all .3s ease-in-out;
}
a#smart:hover {
    background-position: 0 -20px;
}
.affiche {
    display: inline !important;
}
.nonaffiche {
    display: none;
}

div.langue a.espace {
    background: none;
    width:80px !important;
    color: #22b4e8 !important;
}
div.langue a:hover {
    color: #1f7fbd !important;
    background:none;
}