@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');

@font-face {
    font-family:"Sansation";
    src: url("fonts/Sansation_Bold.woff") format('woff');
    font-weight:700;
}
@font-face {
    font-family:"Sansation";
    src: url("fonts/Sansation_Regular.woff") format('woff');
    font-weight:400;
}

body,
html {
  width: 100%;
  height: 100%;
  color:#fff;
	background:#07060B;
}

body {
  font-family: 'Open Sans', Arial;
    overflow-x: hidden;
	font-weight:600;
}
h1,h2,.display-h1,.display-h2{
  font-family:'Sansation','Open Sans',Arial;
}

.btn-xl {
    padding: 0.8em 2.4rem;
}
.btn{
	font-size:0.9em;
}

P{
	font-size:0.97rem;
	line-height:1.75;
}


.carousel-indicators li {
  background-color: #999;
  background-color: rgba(70,70,70,.25);
}

.carousel-indicators .active {
  background-color: #444;
}


.mycards{
    justify-content: center;
}
.mycards P{
	line-height:1.6;
	font-size:0.92em;
}
.mycards .card-header{
	background:#101010;
}
.mycards .card{
	width:100%;
	color:#fafafa;
    height: 100%;
	background:url(img/card.jpg) no-repeat 0 100% #101010;
	background-size:100% 55px;
}
.mycards .card-body{
	padding-bottom:65px;
	padding-top:10px;
}
.mycards .card-title{
	font-weight:500;
	font-size:1.5em;
	margin:0;
}
.mycards .card-title .fa {
    float: right;
    padding: 3px;
}

[data-toggle="collapse"]{
	cursor:pointer;
}
[data-toggle="collapse"] .fa:before {  
	content: "\f139";
}
[data-toggle="collapse"].collapsed .fa:before {
	content: "\f13a";
}

/* LESS THEN LG */
@media (max-width:992px) {
	.mycards .card{
		background-size:100% 35px;
	}
	.mycards .card-body{
		padding-bottom:50px;
	}
}
/* MORE THEN OR LG */
@media (min-width:993px) {
	.collapse-lg-none .collapse,
	.collapse-lg-none .collapsing{
		display: block !important;
		overflow: auto !important;
		height: auto !important;
	}
	.collapse-lg-none [data-toggle="collapse"]{
		cursor:default;
	}
	.collapse-lg-none [data-toggle="collapse"] .fa{
		display:none;
	}
}


.cardcarousel{
	position: relative;
    left: 10%;
    width: 150%;
    margin: 40px 0;
	z-index:2;
	background:#fff;
}
.cardcarousel > DIV{
    box-shadow: -1px -1px 10px rgba(0,0,0,0.1), 7px 15px 5px rgba(0,0,0,0.1);
}
.cardcarousel .card{
	border:0;
	border-top: 2px solid #555;
    padding: 2em 3em 3.5em 3em;
		border-radius:0; /* bo to je pojebane potom */
}
.cardcarousel H3{
    color: #111;
    font-weight:700;
    font-size: 1.4em;
    padding-bottom: 0.5em;
}

a.carousel-control-prev:hover{
	background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
	transition:all 1s;
}
a.carousel-control-prev{
    justify-content:left;
    padding-left:1%;
}
a.carousel-control-next:hover{
	background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent);
	transition:all 1s;
}
a.carousel-control-next{
	justify-content:flex-end;
	padding-right:1%;
}


.masthead{
	min-height: 30rem;
	position: relative;
	display: table;
	width: 100%;
	height: auto;
	padding-top: 4rem;
	padding-bottom: 8rem;
	background:url(img/header.jpg) no-repeat 50% 50%;
	background-size: cover;
}

#individualizace{
	background:url(img/cerna_audi.jpg) no-repeat 50% 0;
}


@media (min-width: 992px) {
  .masthead {
    height:100vh;
	max-height:1100px;
	min-height:690px;
  }
}


/* ------- MENE JAK MOBIL ------------ */
@media (max-width:500px) {
	.masthead{
		background-image:url(img/header-mobile.jpg);
	}
	.btn-xl{
		padding:1.2em 2rem !important;
	}
	.content-section {
		padding-left:0.5em;
		padding-right:0.5em;
	}
}



.content-section-heading h2 {
  font-size: 3rem;
}

.content-section-heading h3 {
  font-size: 1rem;
  text-transform: uppercase;
}

.text-gray{
	color:#5e676f!important;
}


/*---------- HEADERS ------- */
.display-1,
h1{
  font-weight:700;
  line-height:1.2;
  font-size: 3.5rem;
}
.display-h2,
h2{
	font-weight:700;
	line-height:1;
	font-size: 2.4rem;
}
.display-3, h3{
    font-weight:300;
	line-height:1.5;
	color:#eee;
	font-size:1.75rem;
}
.display-4, h4{
	line-height:1.38;
	font-size:1.5rem;
	font-weight:400;
}

.text-responsive{
    font-size: 2.8vw;
}

.h-supline:before{
	content: '';
	clear:both;
    border-top: 2px solid #fff;
    width: 60px;
    height: 1px;
    padding-top:.7em;
    display: block;
    margin-top:.7em;
}

.h-line:after{
    content: '';
	clear:both;
    border-bottom: 2px solid #343A40;
    width: 60px;
    height: 1px;
    padding-top: 1em;
    display: block;
	margin-top:0.2em;
    margin-bottom:1em;
   /* box-shadow: 0 2px 2px -3px #444;*/
}
.h-line-centered:after{
	margin-left:auto;
	margin-right:auto;
}

.my-inset{
	margin-left: 0;
}


@media (max-width: 992px) {
	.my-inset{
		margin-left:0;
	}

  .display-1, h1{
	  font-size:2.5rem;
  }
  .display-4, h4{
	  font-size:1.3rem;
  }
  .btn-xl{
    padding: 0.8em 2rem;
	font-size:0.8em;
  }
	.h-line-sm-centered:after{
		margin-left:auto;
		margin-right:auto;
	}
	#individualizace{
		background-size: contain;
	}
}



.row-montaze IMG{
	width:100%;
	height:100%;
}


@media (max-width:700px) {
	.display-1, h1{
		font-size:2rem;
	}
	.display-h2, h2{
	  font-weight:700;
	  line-height:1.3;
	  font-size:1.8rem;
	}
	.display-3, h3{
		line-height:1.3;
		color:#eee;
		font-size:1.6rem;
	}
	.znacka H3{
		font-size: 1.3em;
	}
	.znacka{
		width: 140px !important;
	}
}


.bg-light{
	background-color:#E8E8E8 !important;
}


.img-masked{
	position:relative;
}
.img-masked:after{
	content:'';
	position:absolute;
	top:0;left:0;
	bottom:0;right:0;
	background:transparent;
}


.text-faded {
  color: rgba(255, 255, 255, 0.7);
}



/* Map */
#kontakt{
	position:relative;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	overflow:hidden;
}

.map{
	position:relative;
}
.map .cropmap{
	filter:grayscale(1);
	transition:all 0.2s;
	height:550px;
	width:100%;
	overflow:hidden;
}
#kontakt:hover .cropmap{
	filter:none;
}
.mapcard {
    position: absolute;
    top: 40px;
	left:0;
    /*left: 10%;*/
    padding: 35px;
	padding-right:45px;
	color:#fafafa;
    background:rgba(0, 0, 0, 0.8);
	background:linear-gradient(to bottom, rgba(40,40,40,0.8) 10px, rgba(0,0,0,0.8));
}
.mapcard .h-line {
    font-size: 1.3em;
}
.mapcard .h-line:after {
    border-color: #555;
}
.mapcard A{
	color:#fff !important;text-decoration:underline;
}
.mapcard A:hover {
    color: #bccdff !important;
}

A.nolink{
	text-decoration:none;
}
#kontakt .container{
	position:relative;
	top:-550px; /* vyska mapy */
}



.znacka{
	display:inline-block;
	width:210px;
	vertical-align:middle;
}
.znacka H3{
	color:#222;
	margin-bottom:0;
}
.znacka P{
	color:#888;
	padding-left:2vw;
	padding-right:2vw;
}
.znacka-logo{
    display: block;
    height: 90px;
    background: no-repeat 50% 80%;
    background-size: contain;
    margin: 15px;
    text-align: center;
}




#carouselLogos .carousel-indicators{
    top: 2em;
    position: relative;
}
#carouselLogos .carousel-indicators li{
    border-radius: 50%;
    height: 12px;
    width: 12px;
    margin-left: 10px;
    margin-right: 10px;
}



/* SIZE MD */
@media (max-width: 768px) {
	#kontakt{
		background:linear-gradient(to bottom, #666, #07060B);
	}
	.mapcard{
		position:relative;
		top:0;
		left:0;
		background:transparent;
	}
	#kontakt .container{
		position:static;
		top:0;
	}
	.map .cropmap{
		height:350px;
	}
	.cardcarousel{
		left:0;
		width:100%;
		margin:40px 0 20px 0;
	}
	.cardcarousel .card{
		padding: 2em 2em 3em 2em;
	}
	
	.minicard{
		width:30vw;
	}
}



.scroll-to-top {
  position: fixed;
  right: 15px;
  bottom: 15px;
  display: none;
  width: 50px;
  height: 50px;
  text-align: center;
  color: white;
  background: rgba(52, 58, 64, 0.5);
  line-height: 45px;
}

.scroll-to-top:focus, .scroll-to-top:hover {
  color: white;
}

.scroll-to-top:hover {
  background: #343a40;
}

.scroll-to-top i {
  font-weight: 800;
}


.container.wider{
    max-width: 1400px;
}

.genevo-logo H1{
    display: inline-block;
	text-indent:-9999px;
	background:url(img/genevo-logo.svg) no-repeat;
	background-size:200px;
	width:200px;
	height:55px;
}



/* Side Menu */
#sidebar-wrapper {
  position: fixed;
  z-index: 2;
  right: 0;
  width: 250px;
  height: 100%;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  -webkit-transform: translateX(250px);
  transform: translateX(250px);
    background: rgba(0, 0, 0, 0.7);
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-nav li.sidebar-nav-item a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 15px;
}

.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  font-size: 1.2rem;
  background: rgba(52, 58, 64, 0.1);
  height: 80px;
  line-height: 50px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
}

.sidebar-nav > .sidebar-brand a {
  color: #fff;
}

.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}

#sidebar-wrapper.active {
  right: 250px;
  width: 250px;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

.menu-toggle {
  position: fixed;
  right: 15px;
  top: 15px;
  width: 50px;
  height: 50px;
  text-align: center;
  color: #fff;
  background: rgba(52, 58, 64, 0.5);
  line-height: 50px;
  z-index: 999;
}

.menu-toggle:focus, .menu-toggle:hover {
  color: #fff;
}

.menu-toggle:hover {
  background: #343a40;
}



@media (min-width: 992px) {
	.text-responsive{
		font-size: 1.6em;
		line-height:1.6;
	}
}


footer.footer {
	padding-top: 2rem;
	padding-bottom: 5rem;
	background:url(img/footer.jpg) no-repeat #1C1C1C;
	background-size:cover;
}
footer .genevo-logo H1{
	background-size:150px;
	width:150px;
}

/*
footer.footer .social-link {
  display: block;
  height: 4rem;
  width: 4rem;
  line-height: 4.3rem;
  font-size: 1.5rem;
  background-color: #1D809F;
  -webkit-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
}

footer.footer .social-link:hover {
  background-color: #155d74;
  text-decoration: none;
}
*/

a {
  color: #0056b3;
}

a:hover, a:focus, a:active {
  color: #002c5d;
}


.row > .btn{
    display: flex;
    align-items: center;
    justify-content: center;
}


.btn.btn-blue{
    color: #fff !important;
	background:#0056b3;
    border-color: #0056b3;
}
.btn-blue:hover {
    background:#3b7dc5;
}

.btn-default {
    background-color: transparent;
    border: 2px solid #fff !important;
    color: #fff !important;
}
.btn-default:hover, .btn-default:focus, .btn-default:active {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.btn-primary{
	background-color:#4F4F4E;
	border-color:#4F4F4E;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: #fff !important;
    background-color: #666 !important;
    border-color: #666 !important;
}
.btn-primary:active{
	box-shadow:0 0 0 0.2rem #444 !important;
}
.btn-primary:focus{
	box-shadow:0 0 0 0.2rem #444 !important;
}

.btn-secondary {
  background-color: #ecb807 !important;
  border-color: #ecb807 !important;
  color: #fff !important;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background-color: #ba9106 !important;
  border-color: #ba9106 !important;
}

.btn-dark {
  color: #fff !important;
}

.btn {
  -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
  font-weight: 700;
    border-radius: 50px;
}


.text-primary {
  color: #1D809F !important;
}

.text-secondary {
  color: #ecb807 !important;
}




button.img-tooltip {
	outline:none;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    position: absolute;
    z-index: 1;
    background: rgba(55, 130, 196, 0.75);
    border-radius: 100%;
    border: 0;
    clip-path: circle(30px);
}

/* The animation code */
@keyframes animatingCircle {
  0 {transform: scale(0.6);}
  30% {transform: scale(1);}
}

button.img-tooltip:hover:after {
    animation:none;
    transform: scale(1);
	opacity:0;
}
button.img-tooltip:hover:before {
opacity:0;
}

button.img-tooltip:after {
    background: rgba(55, 130, 196, 0.15);
    content: '';
    width: 60px;
    height: 60px;
    display: inline-block;
    border-radius: 100%;
    margin-top: -15px;
    margin-left: -15px;
    transform: scale(0.6);
    animation: animatingCircle 1.8s infinite ease-in-out;
}
button.img-tooltip:before {
  transition:all 0.5s;
    content: '+';
    color: #fff;
    display: flex;
    align-items: center;
    align-content: center;
    align-self: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: bold;
    position: absolute;
    font-size: 2em;
    z-index: 1;
}

.card-title svg {
    width: 0.8em;
    height: 0.8em;
    position: relative;
    top: -0.1em;
}