@import url('https://fonts.googleapis.com/css?family=Ubuntu%3A300%2C400%2C500%2C700%2C300italic%2C400italic%2C500italic%2C700italic&amp;display=swap');
@charset "UTF-8";

:root{
    --c-black:#0d0e0f;
    --c-red:#cf0414;
    --c-red-l:#ff0b1b;
    --c-red-s:#ff0a2f;
    --c-red-d:#ff082f;
    --c-red-xd:#CA0C16;
    --c-grey:#b9baba;
    --w-txt: 360px;
    --w-txt-gap: 20px;
    --w-bp-xs: 0;
    --w-bp-sm: 576px;
    --w-bp-md: 768px;
    --w-bp-lg: 992px;
    --w-bp-xl: 1200px;
    --br:17px;
}

@media only screen and (min-width:1200px){
    .container, .container-lg, .container-md, .container-sm, .container-xl{max-width:1200px !important}
}

html, body{background:#222222;color:#fff}
body {font-family:Ubuntu}

header{height:66px;background: rgba(13,14,15,.7);position:fixed;z-index:333;top:0;width:100%;
    box-shadow:0 10px 20px rgba(13,14,15,.7), inset 0 10px 20px 0px rgba(13,14,15,1);margin-bottom:40px}
header .bg-dark {margin:0 -20px;padding:10px 20px 5px 20px;background-color: rgba(13,14,15,.7) !important;
    box-shadow:0 20px 20px rgba(13,14,15,.7);border-bottom:solid 1px rgba(13,14,15,.3)}

.quote{margin:0 0 10px 0;padding:20px;outline:1px dashed #ff0a2f;outline-offset:-5px;
    background-color:#282C30;box-shadow:0 5px 20px rgb(0,0,0)}

.quote p{quotes:'\201c' '\201d'}
.quote p:before{content:open-quote;color:#ff0a2f;padding-right:5px}
.quote p:after{content:close-quote;color:#ff0a2f;padding-left:5px}

/*w1-collapse*/
@media only screen and (max-width:768px) {
    header nav .navbar-brand{padding-left:20px}
    header nav button.navbar-toggler{margin-right:20px}
    header .bg-dark{background-color: rgba(13, 14, 15, .95) !important;box-shadow:0 30px 20px rgba(13,14,15,.95)}
    header .bg-dark div#w1-collapse.show{padding-bottom: 10px;border-bottom:solid 1px var(--c-red-l)}
}

main{padding:85px 0 40px 0;background:var(--c-black)}

main p.desc{margin:10px 0 0 0;padding-top:20px;text-align:justify;color:#aaa;border-top:solid #ff0a2f 1px}

footer{border-top:solid 1px var(--c-red-s);min-height:40px;text-align:center}
footer a:hover{text-decoration:none}
footer div.col-lg-4{padding:10px 0;text-align:left;font-size:95%}
footer div.col-lg-4:first-child{text-align:center}
footer div.col-lg-4 p{padding: 5px 20px;text-align:left;color:#aaa;font-size:small}
footer div.col-lg-4:first-child p{text-align:center}
footer div.col-lg-4 > div:first-child{padding:22px 0;width:44px;float:left;text-align:center;color:var(--c-red-s)}
footer div.col-lg-4 > div:first-child i{font-size:140%; text-shadow: 0 7px 9px rgba(0,0,0,.4), 0 -7px 9px rgba(255,255,255,.1)}
footer > div > div.row > p{color:#aaa;font-size:small;text-align:center;margin:0 0 -7px 0 !important;overflow:hidden;white-space:nowrap}
footer ~ p{margin-top:-20px;padding:0 5px 10px 5px;text-align:center;color:#aaa;font-size:small}

.inl{display:inline}

h1, .h1{text-transform:uppercase;padding-bottom:20px;font-size:1.5em}
h2, .h2{font-size:1.45em}
h1,.h1, h2,.h2, h3,.h3, h4,.h4, h5,.h5, h6,.h6 {text-shadow:0 5px 10px rgba(13,14,15,.3)}
@media screen and (max-width:768px){
    h1, .h1{font-size:1.25em}
    h2, .h2{font-size:1em}
}

a{color:#fff}
a.active, a:hover, a::selection{color:var(--c-red-l)}

::selection{background-color:var(--c-red-s);color:#fff}

p.txt {text-align:justify;column-width:var(--w-txt);column-gap:var(--w-txt-gap);column-count:2;column-fill:balance}

div.grd, ul.grd{width:100%;margin:-20px 0;padding:0;display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:20px}
@media screen and (max-width:768px) {
    div.grd, ul.grd{grid-template-columns:repeat(1, 1fr)}
}

div.grd p, ul.grd li{padding: 20px;margin: 0;text-align:center;background-color:rgba(50,50,50,.1) !important;
    opacity:.9;box-shadow:0 5px 20px rgb(13,14,15)}
div.grd p:hover, ul.grd li:hover{background-color:#282C30 !important;transition:.4s;opacity:1;box-shadow:0 5px 20px rgb(0,0,0)}
ul.grd{margin-left:0; padding-left:0}
ul.grd li{list-style-type:none;border-top: solid 1px rgba(255,255,255,.04);border-bottom: solid 1px rgba(0,0,0,.5)}

/** C8R-SITE - index, contact **/
body.c8r-site h1{clear:both}

/** C8R-PAGE - rental-conditions, faq */
body.c8r-page h1{clear:both !important;width:100%}
body.c8r-page main div.container {display:flex;flex-flow:row wrap}
body.c8r-page main div.container p{padding-bottom:40px}
body.c8r-page main div.container i.fa {display:block;font-size:2.5em;padding:10px;color:var(--c-red-s)}

.dropdown-item.active, .dropdown-item:active, .dropdown-item::selection{background-color: var(--c-red)}

/** NAVBAR */
ul.navbar-nav{text-transform:uppercase;font-size:smaller}
ul.navbar-nav li{margin-left:16px}
ul.navbar-nav li.nav-item a.nav-link{color:#fff !important}
ul.navbar-nav li.nav-item a.nav-link.active,
ul.navbar-nav li.nav-item a.nav-link:hover,
ul.navbar-nav li.nav-item.active a.nav-link{color:var(--c-red-l) !important}
ul.navbar-nav li.nav-item-lang a.nav-link{display:inline-block !important}
ul.navbar-nav li.nav-item-lang span{font-size:120%;opacity:.5}

#social-ics > *{display:inline-block;padding:0 0 0 0;font-size:150%;min-width:28px;text-align:center;border-radius:30px;border:solid 1px #000}
#social-ics > *:hover{font-size:140%;border:solid 1px #222222}

#messenger-ics-container{margin-top:20px;padding-right:98px;text-align:right}
body#index #messenger-ics-container{margin-top:65px}
@keyframes messenger-ics {
    0%   { background: rgba(13,14,15,0.7);border-color:rgba(255,255,255,0.1); }
    50%  { background: rgba(40,44,48,0.6);border-color: rgba(93, 93, 93, 0.4); }
    100% { background: rgba(13,14,15,0.7);border-color:rgba(255,255,255,0.1); }
}
#messenger-ics{
    display:inline-block;padding:3px;background:rgba(13,14,15,0.9);
    width:112px;
    height:42px;
    position:fixed;z-index:999;margin-top:-20px;
    border:solid 1px rgba(111,111,111,0.1);border-radius:11px;text-align:center;
    box-shadow: 0px 0px 19px 11px rgba(13,14,15,0.9);
    animation: messenger-ics 2s infinite linear;
    line-height: normal;
}
#messenger-ics:hover{animation:none;background: rgba(40,44,48,0.9);border-color: rgba(255, 255, 255, 0.2)}
#messenger-ics > *{display:inline-block;padding:1px 0 1px 0;opacity:90%}
#messenger-ics > *:hover{opacity:100%}
#messenger-ics img{height:32px;width:32px}

#messenger-ics .min-phone{font-size:20px;margin-top:8px;
    margin-left:-100px;margin-right:0;text-align:right;
    white-space:nowrap;overflow:visible;
    display:none
    }

@media screen and (max-width:1199px) {
    #messenger-ics-container{padding-right:98px;margin-top:0}
    body#index #messenger-ics-container{margin-top:45px}
    #messenger-ics{margin-top:0}
}

/*@media screen and (max-width:990px) {
    #messenger-ics-container{padding-right:30px}
    #messenger-ics{width:42px;margin-top:0}
    #messenger-ics > *{display:block;padding:2px 0 2px 0}
}*/

@media screen and (max-width:990px) {
    h1{margin-right:160px !important}
    #index h1{margin-right:0 !important}
}

@media(max-width:768px){
    #messenger-ics-container{
        margin-top:-70px;
        height: 75px;
        margin-right:80px !important
    }
    body#index #messenger-ics-container{margin-top:-44px}
    #messenger-ics{
        width:118px !important
    }
    #messenger-ics > *{
        display:inline-block !important;
        padding: 1px 1px !important;
    }
    #messenger-ics .min-phone{display:block;margin-left:0;margin-right:-40px;text-align:left}
    h1{margin-right:auto !important}
}

/** NAVBAR BREADCRUMB */
.breadcrumb {background-color:transparent}
.breadcrumb-item.active{color:var(--c-red)}
.breadcrumb-item+.breadcrumb-item::before{color: #6c757d;content: "/"}

body main {background:var(--c-black);
    background:linear-gradient(180deg, rgba(13,14,15,1) 80px, rgba(40,44,48,1) 300px, rgba(40,44,48,1) 350px, var(--c-black) 600px)
}

/* INDEX */
body#index main{padding-top:40px}
@media screen and (max-width:768px) {
    body#index main{padding-top:60px}
}

body#index h1{color:#fff;text-align:center;margin:-52px 0 -8px}
@media screen and (max-width:768px) {
    body#index h1{font-size:1.25em;margin:-40px 0 0}
}
body#index div.carousel-inner img{padding:40px 30%}
.carousel-control-prev-icon, .carousel-control-next-icon{opacity:.4}
.carousel-indicators{opacity:.2}
.main-auto-list-hover{background-color:#383c40;transition:.8s;opacity:.6;box-shadow:0 5px 20px rgb(0,0,0)}

/* INDEX */
.main-auto-list{padding:0;margin-bottom:20px;transition:.6s}
.main-auto-list > div{
    display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;
    margin:0;outline:1px dashed #ff0a2f;outline-offset: -5px;padding:10px 0;opacity:.9;
    background:url("/img/arenda-sport-kabrioleta-kiev.png") 50% 30px no-repeat;background-size:calc(min(300px, 65%));
    transition:1s;box-shadow:0 5px 20px rgb(13,14,15)}
.main-auto-list > div:nth-child(2){
    background: url("/img/arenda-sedana-kiev.png") 50% 35px no-repeat;background-size:calc(min(300px, 63%))}
.main-auto-list > div:nth-child(3){
    background: url("/img/arenda-vnedorozhnika-kiev.png") 50% 50px no-repeat;background-size:calc(min(300px, 58%))}

.main-auto-list > div:hover{background-size:calc(min(360px, 80%));background-color: #282c30;
    background-position: 50% 25px;transition:.4s;opacity:1;box-shadow:0 5px 20px rgb(0,0,0)}

.main-auto-list > div:nth-child(2):hover{background-position: 50% 28px;background-size:calc(min(360px, 77%))}
.main-auto-list > div:nth-child(3):hover{background-position: 50% 45px;background-size:calc(min(360px, 70%))}
.main-auto-list h3{font-size: 14pt;text-align:center;padding-top:10px;padding-bottom:104px}
.main-auto-list nav.auto-list div{padding:0 20px;display:grid;grid-template-columns:1fr 72px;font-size:90%;transition:2s}
.main-auto-list nav.auto-list div:hover{transition:.2s;background-color: rgba(13,14,15,.3)}
.main-auto-list nav.auto-list a{display:inline-block;margin:8px 0;padding:5px 0 5px 46px;
    text-transform:uppercase;background-repeat:no-repeat;background-size:32px}
.main-auto-list nav.auto-list span{text-align:right;margin:7px 0;padding:5px 0 5px 5px}

.main-auto-list nav{flex-grow:1}
.main-auto-list > div > div{padding:10px 20px 0 20px;text-align:center;font-size:80%;min-height:40px;transition:opacity 1s;
    height:auto;color:var(--c-grey)}
.main-auto-list summary{opacity:.8;outline:none;text-align:right}
.main-auto-list details[open] summary{opacity:.5}

#contacts-list{padding:0 0 20px 0;font-size: 18px;text-align: center}

/** CONTACTS */

/* REVIEWS */

/** FAQ **/
body#faq li{text-align:left;font-size:90%;text-align:justify}
body#faq li h5{text-align:left;color:var(--c-red-d);clear:both;width:100%;padding-bottom:10px}
body#faq p{margin:0;padding-bottom:20px}
body#faq ul.grd{margin-top:10px}

/** RENTAL-CONDITIONS **/
body#rental-conditions h3{clear:both;width:100%}
body#rental-conditions ul.grd{margin-top:10px}
body#rental-conditions p{margin:0;padding-bottom:20px}
body#rental-conditions div.grd{
    width:100%;margin:-20px 0;padding:0;display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:20px
}
@media screen and (max-width:768px) {
    body#rental-conditions div.grd{grid-template-columns:repeat(1, 1fr)}
}
body#rental-conditions div.grd p{padding: 20px;margin: 0;text-align:center;background-color:rgba(50,50,50,.1) !important;
    opacity:.9;box-shadow:0 5px 20px rgb(13,14,15)}
body#rental-conditions div.grd p:hover{background-color:#282C30 !important;transition:.4s;opacity:1;
    box-shadow:0 5px 20px rgb(0,0,0)}

body#rental-conditions ul.grd a{color:#e60a2c;font-weight:bold}


/** NEWS */
body.c8r-news .breadcrumb{margin-top:10px;margin-bottom:-20px}
body.c8r-news div.card{border:solid 1px rgba(0, 0, 0, 0.325);
    border-top-left-radius:0;border-top-right-radius:0;box-shadow: 0 5px 20px rgb(13,14,15)}
body.c8r-news div.card-body{color:var(--c-black)}
body.c8r-news div.card-body a{color:var(--c-red)}
body.c8r-news div.card-body .btn-primary:not(:disabled):not(.disabled),
body.c8r-news div.card-body .btn-primary:not(:disabled):not(.disabled).active
    {color:#fff;background-color:var(--c-red);border-color: var(--c-red)}
body.c8r-news .card-img, body.c8r-news .card-img-top {border-radius:0}
body.c8r-news p a{color:#e60a2c}
div.card-text{margin:20px auto}
div.card-text p{text-align: justify}
ul.list-group{border-top: solid 1px #FF082F;padding-left:5px;padding-right:5px;
    background-color:transparent !important;border-top-left-radius:0;border-top-right-radius:0}
ul.list-group li{box-shadow: 0 5px 20px rgb(13,14,15)}
ul.list-group h6{color:var(--c-black)}


/** AUTO INFO PAGE */
/*#auto-info h1{font-size:1.35em}*/
#auto-info h2{font-size:1.25em;margin:0 0 10px}
#auto-info h2 i{font-size:28px;color:var(--c-red) !important;margin-right:20px}
#auto-info button{margin-top:10px;background-color: var(--c-red);border:solid 1px var(--c-red)}
#auto-info div.auto-order{border:solid 1px #ff0a2f;padding:15px 15px 5px 15px;box-shadow:0 5px 20px rgb(13, 14, 15);background-color:rgba(13,14,15,.5)}
#auto-info div.auto-desc{padding:0;font-size:95%}
#auto-info div.auto-gallery{display:flex;flex-flow:row wrap;justify-content:space-between;align-content:space-between;margin:10px 0}
#auto-info div.auto-gallery a{display:inline-block}
#auto-info div.auto-gallery a img{max-width:100px;max-height:68px}
/*#auto-info iframe{width:100%;max-height:calc(100vmin * 1.72)}*/

#auto-info .video-responsive{display:block;max-width:750px}
#auto-info .video-responsive > div{overflow:hidden;padding-bottom:56.25%;position:relative;height:0}
#auto-info .video-responsive > div > iframe{left:0;top:0;height:100%;width:100%;position:absolute}

@media screen and (max-width:768px) {
    #auto-info div.auto-gallery{justify-content: stretch}
    #auto-info div.auto-gallery a{border:solid 1px transparent}
    #auto-info div.auto-gallery a img{max-width:80px}
    #auto-info iframe{width:100%;max-height:496px}
}

#auto-prices{width:100%;margin:15px 0;padding:0;display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:20px}
@media screen and (min-width:768px) {
    #auto-prices{grid-template-columns: repeat(4, 1fr)}
}
@media screen and (min-width:1200px) {
    #auto-prices{grid-template-columns: repeat(8, 1fr)}
}
#auto-prices > div{margin:0; min-width:100px;border:solid 1px var(--c-red)}
#auto-prices > div > div{padding:10px;text-align:center}
#auto-prices > div > div:first-child{background:var(--c-red)}

#auto-attributes{width:100%;margin:20px 0;padding:0;display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:20px}
@media screen and (min-width:768px) {
    #auto-attributes{grid-template-columns: repeat(3, 1fr)}
}
#auto-attributes > div{font-size:90%;text-transform:uppercase;text-align:center}
#auto-attributes > div > div{font-weight:bold}
#auto-attributes > div > div:first-child{font-weight:400}
#auto-attributes > div > div:last-child i{display:inline-block;height:10px;width:40px;border-top:solid 1px var(--c-red)}

.icon-box-shape div {position: relative;height: 54px;width: 54px;margin: 5px;
    -webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;-webkit-transition: .3s;
    -moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;transition: .3s;border:solid 2px transparent;
    display: inline-block;font-size:32px;color:rgb(255,10,47);background:rgba(255,255,255,0)}
.icon-box-shape div:hover {border:solid 2px rgb(255,10,47);background:rgba(255,255,255,1);
    -webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;transition: .5s}


div.main-auto-list:hover > div{opacity:.4}
div.main-auto-list > div:hover{opacity:1}
div.main-auto-list .col-lg-3{background: rgba(34,40,46,.5)}
.main-auto-list .col-lg-3 > h3{padding-top: 18px !important;padding-bottom: 18px !important;
    margin-left: 3px; margin-right: 5px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.4)
}
nav.auto-list + div:last-child {min-height: 36px;padding-top: 16px;padding-bottom: 10px;text-align: center}
nav.auto-list + div:last-child a{display: inline-block;min-height: 56px;max-width: 200px}
.alert-success {color: #0ba82f;font-weight: bold;background-color: #ffffff;border-color: #ffffff}
div.alert{position: relative;z-index:999;margin-top:36px;margin-bottom:-36px}

h1{position:relative;z-index:0;color:rgba(255,255,255,.9);margin-right:140px}
@media screen and (max-width:990px) {
    h1{margin-right:50px;font-size:1.2em}
}
body#contact h1, body#leave-customer-review h1{
    margin-right:auto
}
