@charset "utf-8";
/* CSS Document */

section#range{
}
	section#range .content {
	width: 710px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 40px;
	padding-left: 10px;
	float: left;
	}
    section#range .title{
        font: 23px/23px Arial, sans-serif;
        color:#263854;
        text-align:center;
        text-transform:uppercase;
        padding:35px 0;
    }

    
    

    /***********/
    /* filters */
    /***********/
    
    section#range #filters{
        color:#333c59; 
        padding:10px;
    }
        section#range #filters .filters_top{
            border-bottom:1px solid #b9c9d6;
            padding:0 0 10px 0;
        }
            section#range #filters .filters_button{
                display:inline-block;
                border:1px solid #b9c9d6;
                padding:3px 7px;
                cursor:pointer;
                font: 14px/14px Arial, sans-serif;
                text-transform:uppercase;
            }
            section#range #filters .filters_button:hover {
                background:#e7edf2;
            }
            
        section#range #filters .filters_content{
            font-size:0;
            width:100%;
            position: relative;
            padding:20px 0;
            border-bottom:1px solid #b9c9d6;
            display:table;
        }
            section#range #filters .filter_type{
                width:25%;
                height:100%;
                display:table-cell;
                position: relative;
                vertical-align:top;
                padding:0 20px;
            }
            section#range #filters .filter_type:nth-of-type(1),
            section#range #filters .filter_type:nth-of-type(2){
                padding:0 5px;
            }
            section#range #filters .filter_type:after{
                content:"";
                width:1px;
                height:36%;
                position: absolute;
                background:#b9c9d6;
                top: 33%;
                margin: 0 0 0 -20px;
            }
            section#range #filters .filter_type:nth-of-type(1):after,
            section#range #filters .filter_type:nth-of-type(2):after{
                margin: 0 0 0 -5px;
            }
            
            section#range #filters .filter_type:first-of-type:after{
                display:none;
            }
                section#range #filters .filter_type_title{
                    text-align:center;
                    font: 18px/18px Arial, sans-serif;
                    text-transform:uppercase;box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    -webkit-box-sizing: border-box;
                }
                section#range #filters .filter_type_content{
                }
                    section#range #filters .filter_type_content ul{
                    }
                
                        section#range #filters .filter_type_content ul li{
                            font: 13px/18px Arial, sans-serif;
                            display:inline-block;
                            vertical-align:top;
                            margin:15px 0 0 0;
                        }
                        section#range #filters .filter_type:nth-of-type(1) .filter_type_content ul{
                            padding:0 0 0 5px;
                        }
                            section#range #filters .filter_type:nth-of-type(1) .filter_type_content ul li{
                                width:33.33%;
                            }
                        section#range #filters .filter_type:nth-of-type(2) .filter_type_content ul{
                            padding:0 0 0 35px;
                        }
                            section#range #filters .filter_type:nth-of-type(2) .filter_type_content ul li{
                                width:50%;
                            }
                            section#range #filters .filter_type_content ul li .checkbox {
                                background: url("../../images/peugeot_common/common/checkbox_2.png") no-repeat left top;
                                cursor: pointer;
                                display: inline-block;
                                height: 14px;
                                margin: 0 0 0 0;
                                vertical-align: top;
                                width: 14px;
                                background-size:28px auto;
                            }
                            section#range #filters .filter_type_content ul li .checkbox.checked {
                                background: url("../../images/peugeot_common/common/checkbox_2.png") no-repeat -14px top;
                                height: 14px;
                                width: 14px;
                                background-size:28px auto;
                            }
                            section#range #filters .filter_type_content ul li label{
                                font: 12px/11px Arial, sans-serif;
                                color:#c2c5cb;
                                cursor: pointer;
                                display:inline-block;
                                vertical-align: top;
                                padding: 1px 3px 0 3px;
                                box-sizing: border-box;
                                -moz-box-sizing: border-box;
                            }
                            section#range #filters .filter_type_content ul li label.active{
                                color: #263854;
                            }
                            
                        section#range .slider_container{
                            margin:30px 0 0 0;
                        }
                            section#range .slider_container .slider {
                                background: #97b1c1;
                                height: 1px;
                                position: relative;
                                width: 100%;
                                
                            }
                            section#range .slider_container .slider .min ,
                            section#range .slider_container .slider .max{
                                position: absolute;
                                background: #114f77;
                                height: 7px;
                                width: 7px;
                                left: 0;
                                top: -3px !important;
                                z-index: 2;
                                border-radius: 50%;
                                cursor:pointer;
                            } 
                            section#range .slider_container .slider .min:after,
                            section#range .slider_container .slider .max:after{
                                position: absolute;
                                content:"";
                                background: #114f77;
                                height: 17px;
                                margin: -5px 0 0 -5px;
                                opacity: 0;
                                border-radius: 50%;
                                position: absolute;
                                width: 17px;
                                
                            } 
                            
                            /*
                            body.tablet .slider_container .slider .min ,
                            body.tablet .slider_container .slider .max{
                                height: 14px;
                                width: 14px;
                                top: -6px !important;
                            }  
                            */
                            section#range .slider_container .slider .between {
                                background: #114f77;
                                height: 1px;
                                left: 0;
                                position: absolute;
                                top: 0;
                                width: 0;
                                z-index: 1;
                            }
                        section#range .slider_container .text{
                            padding:20px 0 0 0;
                            font-size: 0;
                            color:#000;
                            text-align:center;
                        }
                            section#range .slider_container .text .left{
                                text-align:right;
                                display:inline-block;
                                width:43%;
                                font: 12px/12px Arial, sans-serif;
                            } 
                            section#range .slider_container .text .middle{
                                text-align:center;
                                display:inline-block;
                                width:10%;
                                font: 12px/12px Arial, sans-serif;
                            } 
                            section#range .slider_container .text .right{
                                text-align:left;
                                display:inline-block;
                                width:43%;
                                font: 12px/12px Arial, sans-serif;
                            } 
                

                    @media (max-width: 1165px) {
                        section#range #filters .filter_type:nth-of-type(1) .filter_type_content ul li,
                        section#range #filters .filter_type:nth-of-type(2) .filter_type_content ul li{
                            width:50%;
                        }
                    }
                    @media (max-width: 880px) {
                        section#range #filters .filters_content{
                            padding:14px 0 !important;
                        }
                    
                        section#range #filters .filter_type{
                            width:50%;
                            height:auto;
                            display:inline-block;
                            position: relative;
                            vertical-align:top;
                            box-sizing: border-box;
                            -moz-box-sizing: border-box;
                            -webkit-box-sizing: border-box;
                            border-left:none;
                            padding:24px !important;
                        }
                        
                        
                        section#range #filters .filter_type:after{
                            display:none;
                        }
                        section#range #filters .filter_type:nth-of-type(2):after{
                            display:block;
                            height:50%;
                            top:57%;
                            margin: 0 0 0 -24px;
                        }
                        section#range #filters .filter_type:nth-of-type(4):after{
                            display:block;
                            height:50%;
                            top:30%;
                            margin: 0 0 0 -24px;
                        }
                        section#range #filters .filter_type:nth-of-type(3):before,
                        section#range #filters .filter_type:nth-of-type(4):before{
                            content:"";
                            width:50%;
                            height:1px;
                            position: absolute;
                            background:#b9c9d6;
                            top: 0;
                            left:50%;
                            margin: 0 0 0 -25%;
                        }

                    }
                    @media (max-width: 520px) {
                        section#range #filters .filter_type:nth-of-type(1) .filter_type_content ul{
                            padding: 0 0 0 0;
                        
                        }
                        section#range #filters .filter_type:nth-of-type(2) .filter_type_content ul{
                            padding: 0 0 0 18px;
                        }
                    }
                
    /**********/
    /* select */
    /**********/
    
    section#range #select_sort {
        margin:0 0 0 0;
        padding:0 10px;
        text-align:right;
        font-size: 0;
    }
        section#range #select_sort .sort_text{
            color:#124f7b;
            display:inline-block;
            vertical-align:middle;
            padding: 0 16px 0 0;
            font: 13px/24px Arial, sans-serif;
            text-transform:uppercase;
        }
        section#range #select_sort .button_dark {
            border-radius: 0;
            cursor: pointer;
            width: 170px;
            display:inline-block;
            vertical-align:middle;
        }
            section#range #select_sort .button_dark_left{
                display:none;
            }
            section#range #select_sort .button_dark_right{
                display:none;
            }
            section#range #select_sort .button_dark_middle{
                display: block;
                width: 100%;
            }
                section#range #select_sort .button_dark_middle dl {
                    background-color:#ffffff;
                    background-image:url("../../images/peugeot_common/common/arrow_menu_down_grey.png");
                    background-size:auto 7px;
                    background-position:96% 50%;
                    background-repeat:no-repeat;
                    display: block;
                    width: 100%;
                    margin: 0 0 0 -2px;
                    padding: 0;
                    position: relative;
                    border-radius:3px;
                    border:1px solid #b9cad6;
                }
                section#range #select_sort .button_dark_middle dl.open {
                    background-color:#e7edf2;
                    background-image:url("../../images/peugeot_common/common/arrow_menu_up_grey.png");
                    background-size:auto 7px;
                    background-position:96% 50%;
                    background-repeat:no-repeat;
                    border-radius:3px 3px 0 0;
                    margin: 0 0 0 -2px;
                    padding: 0;
                    position: relative;
                    border:1px solid #b9cad6;
                }
                    section#range #select_sort .button_dark_middle dl  dt {
                        overflow: hidden;
                        padding: 0;
                        width: auto;
                        height: 24px;
                        line-height: 24px;
                        text-align: left;
                    }
                        section#range #select_sort .button_dark_middle dl  dt a {
                            padding: 0 0 0 10px;
                            display: block;
                            font: 13px/24px Arial, sans-serif;
                            color:#124f7b;
                            text-transform:uppercase;
                            height: 24px;
                        }
                    section#range #select_sort .button_dark_middle dl dd {
                        color: #474659;
                        margin-left: -1px;
                        margin-right: 0;
                        margin-top: 0px;
                        position: absolute;
                        text-align: left;
                        visibility: hidden;
                        width: 100%;
                        z-index: 5000;
                        border:1px solid #b9cad6;
                    }
                    section#range #select_sort .button_dark_middle dl.open dd {
                        visibility: visible;
                    }
                        section#range #select_sort .button_dark_middle dl dd ul {
                            cursor: pointer;
                            list-style-image: none;
                            overflow: auto;
                            padding: 0;
                            border-radius:0 0 4px 4px;
                        }
                            section#range #select_sort .button_dark_middle dd ul li {
                                background:#ffffff;
                                padding: 0 5px 0 22px;
                                cursor: pointer;
                                padding: 0 10px;
                                font: 13px/24px Arial, sans-serif;
                                text-transform:uppercase
                            }
                            section#range #select_sort .button_dark_middle dd ul li:hover {
                                background:#e7edf2;
                            }
						
                
                
    /**********/
    /* models */
    /**********/ 
               
               
    /* top models */
    section#range section#top_models{
        background:#f1f3f2;
    }

    /* middle models */
    section#range section#middle_models{
    }

        section#range .models{
            margin:0 0 0 0;
            font-size:0;
            text-align:center;
        }
            section#range .models .model{
                display:inline-block;
                width:225px;
                height:240px;
                vertical-align:top;
                position:relative;
                padding:10px;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                color:#333c59;  
                text-transform: uppercase;
            }
            section#range .models .model.special_offer{
                color:#e26100;
            }
            section#range .models .model.new{
                color:#3598bd;
            }
                section#range .models .model .model_content_wrap{
                    position:relative;
                    height:100%;
                    box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    -webkit-box-sizing: border-box;
                }
                    section#range .models .model .model_content_wrap .model_content{
                        position:relative;
                        background:#f1f3f2;
                        height:100%;
                        padding:10px;
                        box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        -webkit-box-sizing: border-box;
                    }
                        section#range .models .model  .model_sub_title{
                            font:bold 15px/15px Arial, sans-serif;
                            position:absolute;
                            width:100%;
                            left:0;
                        }
                        section#range .models .model  .model_title{
                            font:16px/16px Arial, sans-serif;
                            margin:16px 0 0 0;
                        }
                            section#range .models .model  .model_title span{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 27px;
	line-height: 27px;
                            }
                        section#range .models .model .model_img{
                            text-align:center;
                            height:100px;
                            margin:11px 0;
                        }
                            section#range .models .model .model_img a{
                                display:block;
                            }
                            section#range .models .model .model_img img{
                                display:inline-block;
                                max-width:185px;
                                max-height:100px;
                            }
                            
                        section#range .models .model  .model_price{
                            font:10px/10px 'Peugeot', Arial, sans-serif;
                        }  
                            section#range .models .model  .model_price span{
                                font:bold 21px/21px 'Peugeot', Arial, sans-serif; 
                                
                            } 
                            section#range .models .model .b_blue{
                                background: #3091b8; /* Old browsers */
                                background: -moz-linear-gradient(top,  #3091b8 0%, #104d75 100%); /* FF3.6+ */
                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3091b8), color-stop(100%,#104d75)); /* Chrome,Safari4+ */
                                background: -webkit-linear-gradient(top,  #3091b8 0%,#104d75 100%); /* Chrome10+,Safari5.1+ */
                                background: -o-linear-gradient(top,  #3091b8 0%,#104d75 100%); /* Opera 11.10+ */
                                background: -ms-linear-gradient(top,  #3091b8 0%,#104d75 100%); /* IE10+ */
                                background: linear-gradient(to bottom,  #3091b8 0%,#104d75 100%); /* W3C */
                                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3091b8', endColorstr='#104d75',GradientType=0 ); /* IE6-9 */
                                font:14px/14px Arial, sans-serif;
                                -khtml-border-radius: 3px;
                                -ms-border-radius: 3px;
                                border-radius: 3px;
                                text-decoration:none;
                                color:#ffffff;
                                padding:6px 10px;
                                margin:10px 0 0 0;
                                cursor:pointer;
                                transition: all 150ms ease;
                                display:none;
                            }
                            section#range .models .model .b_blue:hover{
                                background: #104d75; /* Old browsers */
                                background: -moz-linear-gradient(top,  #104d75 0%, #3091b8 100%); /* FF3.6+ */
                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#104d75), color-stop(100%,#3091b8)); /* Chrome,Safari4+ */
                                background: -webkit-linear-gradient(top,  #104d75 0%,#3091b8 100%); /* Chrome10+,Safari5.1+ */
                                background: -o-linear-gradient(top,  #104d75 0%,#3091b8 100%); /* Opera 11.10+ */
                                background: -ms-linear-gradient(top,  #104d75 0%,#3091b8 100%); /* IE10+ */
                                background: linear-gradient(to bottom,  #104d75 0%,#3091b8 100%); /* W3C */
                                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#104d75', endColorstr='#3091b8',GradientType=0 ); /* IE6-9 */
                                transition: all 150ms ease;
                            }
                            section#range .models .model .b_grey{
                                background: #fcfcfc; /* Old browsers */
                                background: -moz-linear-gradient(top,  #fcfcfc 0%, #d1d2d1 100%); /* FF3.6+ */
                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#d1d2d1)); /* Chrome,Safari4+ */
                                background: -webkit-linear-gradient(top,  #fcfcfc 0%,#d1d2d1 100%); /* Chrome10+,Safari5.1+ */
                                background: -o-linear-gradient(top,  #fcfcfc 0%,#d1d2d1 100%); /* Opera 11.10+ */
                                background: -ms-linear-gradient(top,  #fcfcfc 0%,#d1d2d1 100%); /* IE10+ */
                                background: linear-gradient(to bottom,  #fcfcfc 0%,#d1d2d1 100%); /* W3C */
                                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#d1d2d1',GradientType=0 ); /* IE6-9 */
                                font:14px/14px Arial, sans-serif;
                                -khtml-border-radius: 3px;
                                -ms-border-radius: 3px;
                                border-radius: 3px;
                                text-decoration:none;
                                color:#505059;
                                padding:6px 10px;
                                margin:10px 0 0 0;
                                cursor:pointer;
                                transition: all 150ms ease;
                                display:none;
                            }
                            section#range .models .model .b_grey:hover{
                                background: #d1d2d1; /* Old browsers */
                                background: -moz-linear-gradient(top,  #d1d2d1 0%, #fcfcfc 100%); /* FF3.6+ */
                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d1d2d1), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
                                background: -webkit-linear-gradient(top,  #d1d2d1 0%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
                                background: -o-linear-gradient(top,  #d1d2d1 0%,#fcfcfc 100%); /* Opera 11.10+ */
                                background: -ms-linear-gradient(top,  #d1d2d1 0%,#fcfcfc 100%); /* IE10+ */
                                background: linear-gradient(to bottom,  #d1d2d1 0%,#fcfcfc 100%); /* W3C */
                                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d2d1', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
                                transition: all 150ms ease;
                            }
                        
                        
                        
            /* hover */
            section#range .models .model:hover{
                padding:0;
            }
                section#range .models .model:hover .model_content_wrap{
                    background:#ffffff;
                    position:absolute;
                    height:auto;
                    width:245px;
                    border:1px solid #bbcfd8;
                    z-index:10000;
                    padding:10px;
                    margin:-10px 0 0 -10px;
                }
                    section#range .models .model:hover .model_content_wrap .model_content{
                        padding:19px 10px 10px 10px;
                        background:#f1f3f2;
                        position:relative;
                        height:100%;
                    }
                        section#range .models .model:hover .model_title{
                            padding: 0 10px;
                        }
                        section#range .models .model:hover .model_price{
                            padding: 0 10px;
                        }
                        section#range .models .model:hover .b_blue,
                        section#range .models .model:hover .b_grey{
                            display:block;
                        }
    
    
    /* Mentions */
    section#range section#mentions{
        font:13px/14px Arial, sans-serif;
        color: #333C59;
    }
        section#range section#mentions .content{
            padding:20px 10px;
        }