/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

body, html{
    padding: 0px;
    margin: 0px;
    
    
    background-color: #ffffff;
}


* {
    font-family: Roboto !important;
    margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font-size: 1em;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
	font-style: normal;
}

a{
    color: #267CE6;  
    text-decoration: underline; 
}

.margin2em1em{
    margin: 2em 1em;    
}

.margin1em{
    margin: 1em;    
}

.center{
    text-align: center;   
}

/* FRAME */


div.frame {
    display: block;
    background-color: #ffffff;
    overflow: hidden;
    font-size: 15px;
}

@media (max-width: 800px) {
  div.frame {
    font-size: 13px;   
  }
}


div.frame-content{
    position: relative;
    z-index: 20;   
}



h1 {
    font-size: 2em;
    font-weight: bold;
}





/* HEADER */

div.header{
    background-color: #ffffff;
    padding: 1em;
    
    margin: 0;
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
    align-items: center;
    justify-content: space-between;
}



div.dealer-contacts{
    margin: 1em 0;   
}

div.dealer-title{
    font-weight: bold;   
}


/* MENU */

.menu{
    border-bottom: solid #f0f0f0 1px;
    z-index: 10;
    position: relative;
    line-height: 0px;
}

.menu label{
    overflow: hidden;
    position: relative;
    color: #888888;
    display: inline-block;
    margin: 0px;
    line-height: 3em;
    font-size: 1.2em;   
    cursor: pointer;
    padding: 0 1em;
    outline: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.menu label .counter{
    position: absolute;
    right: 1px;
    top: 1px;
    z-index: 100;
    display: inline-block;
    height: 2em;
    line-height: 2.1em;
    font-size: 0.5em;
    border-radius: 1em;
    
    padding: 0 0.5em;
    
    color: #ffffff;
    background-color: #dd0000;
    overflow: hidden;
}

.menu label.active{
    color: #000000;
}

.menu label .border{
    display: block;
    position: absolute;
    height: 2px;
    width: 0%;
    background-color: #dd0000;
    bottom: 0px;
    right: 0px;
    transition: all 0.2s ease-out 0s;
}

.menu label.active .border{
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: #dd0000;
    bottom: 0px;
    left: 0px;
    
}


.material-click-marker{
    position:absolute;
    width:30px;
    height:30px;
    opacity:0;
    border-radius:50%;
    left:50%;
    top: 50%;
    margin-left:-15px;
    margin-top: -15px;
    transform:scale(7);
    background-color:#888888;
    transition:all 0.5s ease-out 0s;
    z-index:-1
}


label:active .material-click-marker{
    transition:none!important;
    transform:scale(.1);
    opacity:0.5
}


/* TABS */


.tab{
    display: none;   
}
input.tab-selector{
    display: none;
}
input.tab-selector:checked + .tab{
    display: block
}




/* GRID */


div.grid{
    margin: 0.5em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
    align-items: stretch;
    justify-content: flex-start;
}

/* CAR CARD */

a.card{
    
    position: relative;
    display: block;
    margin: 0.5em;   
    background-color: #ffffff;
    flex-basis: 23%;
    text-align: center;
    border: solid #dddddd 1px;
    text-decoration: none;   
    padding: 0;
    transition: all 0.2s ease-out 0s;
    z-index: 0;
    overflow: hidden;
}

a.card:hover{
    z-index: 100;
    box-shadow: 0px 0px 0.5em #888888;
    border: solid #ffffff 1px;
    transform:scale(1.05);
}

a.card img.main{
    width: 90%;
    margin: 0.5em auto;
    height: auto;   
}


div.chars{
    width: 100%;
    margin-top: 1em;
}
div.chars div.chars-row{
    border-top: solid #dddddd 1px; 
    text-align: left;
}



div.card-title{
    font-size: 1.2em;
    text-align: center;
       
}

span.attention{
    color: #dd0000;
    font-weight: bold;
}


.svgicon{
    display: inline-block;
    vertical-align: middle;
    height: 1.5em;
    width: 1.5em;
    margin: 0.3em;
    text-align: center;
}

.svgicon img{
    display: inline-block;
    width: 80%;
    height: auto;
    margin-top: 10%;  
    opacity: 0.5;   
}


.filters{
    margin: 1em;
    padding: 0.5em;
    background-color: #f4f4f4;   

    border: solid #dddddd 1px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
    align-items: stretch;
    justify-content: flex-start;
}

.filters select{
    flex-basis: 23%;
    margin:0.5em;
    border: solid #dddddd 1px;
}



/* BUTTONS */


a.button{
    display: inline-block;
    background-color: #888888;
    color: #ffffff;
    text-align: center;
    line-height: 3em;
    font-size: 1.2em;
    padding: 0 2em;
    box-shadow: 1px 1px 2px #888888;
    margin: 0.5em;
    text-decoration: none;
    text-transform: uppercase;
    
    transition:all 0.2s ease-out 0s;
}

a.button:hover{
    transform:scale(1.05);
    box-shadow: 0px 0px 1em #888888;
}

a.button-show-more{
    background-color: #dd0000;
    color: #ffffff;
}

a.button-show-more:hover{
    background-color: #ff0000;
}