/* globální styly */
* {font-family: 'Roboto', sans-serif; font-weight: 300; font-size:16px; color:#666666;}

.nulovani  {margin:0; padding:0;}
.vetsi  {font-size: 1.2rem;}
.big  {font-size: 1.5rem;}
.mensi  {font-size: 0.8rem;}
.cervena {color:#c00418 !important;}
.cervena-bg {background-color:#c00418 !important;}
.cervena-bg-img {background-image: url(img/bg-cervena.jpg);}
.modra {color:#3477cf !important}
.modra-bg {background-color:#3477cf !important;}
.modra-bg-img {background-image: url(img/bg-modra.jpg);}
.oranzova {color:#d8811a !important;}
.oranzova-bg {background-color:#d8811a !important;}
.oranzova-bg-img {background-image: url(img/bg-oranzova.jpg);}
.zelena {color:#66a326 !important;}
.zelena-bg {background-color:#66a326 !important;}
.zelena-bg-img {background-image: url(img/bg-zelena.jpg);}
.zluta {color:#ffcc00 !important;}
.zluta-bg {background-color:#ffcc00 !important;}
.zluta-bg-img {background-image: url(img/bg-zluta.jpg);}
.cerna {color: Black !important;}
.cerna-bg {background-color: Black !important;}
.bila {color: White !important;}
.seda {color:#666666 !important;}
.seda-bg {background-color: #f2f2f2 !important;}
.black {font-weight:900;}
.cover {background-size: cover;}
.ctyrista {font-weight:400;}

/* top navigace */

#lista {text-align: right; height: 45px;}
#lista ul {display: inline-flex;}
#lista .fa-ul {margin-left:0;}
#lista li {padding-right: 20px; padding-top: 10px;}
#lista .fa-li {position: inherit;}
#lista a {font-size:14px; color: #999999; font-weight:400;}
#lista a:hover {color: White; text-decoration: none;}

.logo {width: 250px; height: 70px; background: url(/assets/img/graphica-www-stranky.png) no-repeat center center; background-size: contain;	-webkit-transition: all .3s ease;	-moz-transition: all .3s ease;	-o-transition: all .3s ease;	-ms-transition: all .3s ease;	transition: all .3s ease;}

#menu h1 {margin: 0; pading: 0; width: 0; height: 0; overflow: hidden;}
#menu.navbar {padding: 0; border-bottom: 1px solid #e7e7e7;}
#menu .navbar-nav {border-top: 1px solid #e7e7e7;}
#menu .navbar-brand {height: 70px; padding: 0px 0px; border-right: 1px solid #e7e7e7; margin-right: 0px;}
#menu .navbar-brand :hover { padding: 0px 0px; background-color: #e7e7e7;}
#menu .navbar-nav>li>a h2 {font-size:16px; font-weight:900; color: Black; margin-top: 0px; margin-bottom: 0px; padding: 29px 20px 24px 20px; background:White; border-right: 1px solid #e7e7e7;	-webkit-transition: all .3s ease;	-moz-transition: all .3s ease;	-o-transition: all .3s ease;	-ms-transition: all .3s ease;	transition: all .3s ease;}
@media (min-width: 576px) and (max-width: 768px){#menu .navbar-nav>li>a h2 {padding: 12px;}}
@media (max-width: 575px){#menu .navbar-nav>li>a h2  {padding: 17px 10px 13px 10px;}}
#menu .navbar-nav>li>a:hover {text-decoration: none !important;}
#menu .navbar-nav>li>a:hover h2 {background: #e7e7e7; text-decoration: none !important;}
#menu .navbar-toggler {margin-right: 15px;}

#menu.scrolled {position: fixed; top: 0; right: 0; left: 0; z-index: 1030;}
#menu.scrolled .navbar-brand {height: 45px;}
#menu.scrolled .navbar-nav>li>a h2 {font-size:14px; padding: 17px 10px 13px 10px;	-webkit-transition: all .3s ease;	-moz-transition: all .3s ease;	-o-transition: all .3s ease;	-ms-transition: all .3s ease;	transition: all .3s ease;}
#menu.scrolled .navbar-nav>li>a h2 span {font-size:14px;}
#menu.scrolled .logo {width: 160px; height: 45px;	-webkit-transition: all .3s ease;	-moz-transition: all .3s ease;	-o-transition: all .3s ease;	-ms-transition: all .3s ease;	transition: all .3s ease;}

/* carousel uvod */
.top-odskok {margin-top: 0px;}
#main-slider {}
#main-slider img:hover {}
#main-slider .velka-sipka {font-size: 60px; color:White;}
#main-slider .predstavujeme {font-weight:900; color:White; margin-top:15%;}
#main-slider .predstavujeme-text {font-size: 46px; line-height: 1.2; font-weight:100; color:White; margin-top:3%; margin-bottom:5%;}
#main-slider .predstavujeme-odkaz {font-weight:900; color:Black;}
#main-slider .predstavujeme-odkaz a {font-weight:900; color:White;}
#main-slider .predstavujeme-odkaz a:hover {color:Black; text-decoration: none;}
@media (max-width: 1200px)
{
#main-slider .predstavujeme-text {font-size: 30px; line-height: 1.2; font-weight:100; color:White; margin-top:3%;}
}
@media (max-width: 992px)
{
#main-slider .predstavujeme-text {font-size: 18px; line-height: 1.2; font-weight:100; color:White; margin-top:3%;}
#main-slider .velka-sipka {font-size: 40px; color:White;}
}


#main-slider .carousel-control-next,#main-slider .carousel-control-prev {width: 10%;}
#main-slider .carousel-indicators li {height: 6px;}
#main-slider .carousel-indicators {bottom: 0px; margin-left: 40%;}


/* wwww - sekce */
.sekce-odskok {padding-top: 140px;}
h3 {font-size:40px; font-weight:100;}
h3 .velke {font-size:40px;}
h4 {font-size:22px; font-weight:100;}
h4 .velke {font-size:22px;}
@media (max-width: 768px)
{
h3 {font-size:30px; font-weight:100;}
h3 .velke {font-size:30px;}
h4 {font-size:20px; font-weight:100;}
h4 .velke {font-size:20px;}
}

.piktogram {max-width: 50%; margin: 0px auto; padding: 15px 0px 10px 0;}
.piktogram:hover {opacity: 0.6; padding: 5px 0px 20px 0;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;}
.badge {padding: 3px 6px;}


/* tisk - sekce */
.seznam-praci {position: relative; border: 2px solid white; border-bottom:0;}
.seznam-praci img{width: 100%;}
/*.seznam-praci .seznam-praci-vnitrek {top: 0; background: transparent; opacity: .8; width: 100%; border-radius: 0; margin-bottom: 0;}
.seznam-praci .seznam-praci-vnitrek a {color: White !important; font-weight: 100; text-decoration: none; font-size: 36px; line-height: 1.0em;}
.seznam-praci .seznam-praci-vnitrek a:hover {color: #d8811a; text-decoration:none;}
.seznam-praci .seznam-praci-vnitrek a span {color: White; font-weight:600;} */
.seznam-praci .overlay {position: absolute; top: 0; left: 0; padding: 15px; width: 100%; height: 100%; opacity: 0; border-radius: 0; background: black; vertical-align: middle;
  -webkit-transition: opacity 2000ms;
  -moz-transition: opacity 2000ms;
  -o-transition: opacity 2000ms;
  transition: opacity 2000ms;
}
.seznam-praci:hover .overlay {opacity: 1;}
.seznam-praci .seznam-praci-vnitrek {height:100%;}
.seznam-praci-vnitrek-text {font-size: 26px; color: white; font-weight:100; line-height: 1.0em; }
.seznam-praci-popis {padding: 15px; border: 2px solid white; border-top:0; line-height: 1.2em; }
.seznam-praci-popis a {color: White;}
.seznam-praci-popis a:hover {color: Black; text-decoration:none;}




/* www seznam */
#main-wwww {}
#filter {padding: 10px 0px;}

#main-wwww .card {padding: 30px 30px 30px 30px; border: 0px; border-radius:0;}
@media (min-width: 1200px){#main-wwww .card {padding: 30px 60px 30px 60px;}}
#main-wwww .card-body {padding: 0.25rem;}
#main-wwww .card-text {line-height: 1.25; padding-top:5px;}
#main-wwww .nazev-projektu {font-weight: 900;}
#main-wwww .card-img-top {
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
}
#main-wwww .card-img-top:hover {opacity: 0.7; width:90%;}
@media (min-width: 992px){
#main-wwww .btn {border-radius: 0rem; border-bottom: 0px; border-right: 0px; margin: -2px !important;}
#main-wwww .btn-outline-secondary.active {color: #c00418; background-color: white; font-weight: 900;}
#filter button:first-child {border-left:0; padding-left:50px;}
#filter button:last-child {padding-right:50px;}
}

/* carousel wwww */
#carousel-obal {position: relative;}
#carousel-www {position: initial;}
#carousel-www .card {padding: 0px 10px 0px 10px; border: 0px; border-radius:0;}
#carousel-www .card-body {padding: 0.25rem;}
#carousel-www .card-text {line-height: 1.25; padding-top:5px;}
#carousel-www .nazev-projektu {font-weight: 900;}
#carousel-www .card-img-top { margin: 0 auto;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
}
#carousel-www .card-img-top:hover {opacity: 0.7; width:90%;}

#carousel-www .owl-prev {position: absolute; left: -150px; top: 0%;height: 100%; width: 10%; margin: 0; border:0; background: White url(img/carousel-www-left.png) no-repeat left center; opacity:0.3;}
#carousel-www .owl-prev:hover {opacity:1;}
#carousel-www .owl-prev span {display: none;}
#carousel-www .owl-next {position: absolute; right: -150px; top: 0%;height: 100%; width: 10%; margin: 0; border:0;  background: White url(img/carousel-www-right.png) no-repeat right center; opacity:0.3;}
#carousel-www .owl-next:hover {opacity:1;}
/* #carousel-www .owl-next:focus {opacity:0.3; border:0 !important; border-color: red; background-color: green;}
#carousel-www .owl-next:active {opacity:0.3; border:0 !important; border-color: red; background-color: red;}*/
#carousel-www .owl-next span {display: none;}
#carousel-www .owl-dots {margin-top:20px;}
.top-cara { border-top: 1px solid #ddd; padding: 10px 30px;}
#carousel-www .owl-dot.active span { background: #c00418;}
@media (max-width: 1460px){
#carousel-www .owl-prev {display: none;}
#carousel-www .owl-next {display: none;}
}


/* tiskoviny seznam */
#main-tiskoviny {}
#main-tiskoviny .card-img-top {border-radius: 0;}
@media (min-width: 992px){
#main-tiskoviny .btn {border-radius: 0rem; border-bottom: 0px; border-right: 0px; margin: -2px !important;}
#main-tiskoviny .btn-outline-secondary.active {color: #c00418; background-color: white; font-weight: 900;}
#filter button:first-child {border-left:0; padding-left:50px;}
#filter button:last-child {padding-right:50px;}
}


/*galerie uk dum */

.galerie .ramecek {
	overflow: hidden;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
}
.galerie > div img {
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
}
.galerie > div img:hover {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform:translateZ(0) scale(1.20);
	-moz-transform:scale(1.20);
	-ms-transform:scale(1.20);
	-o-transform:translatZ(0) scale(1.20);
	transform:translatZ(0) scale(1.20);
}

.ramecek .overlay {padding: 5px 10px; opacity: 0; border-radius: 0; background: black; vertical-align: middle;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}
.ramecek:hover .overlay {opacity: 1.0;}

.galerie .ramecek-vnitrek {
	color: White; font-weight:400; font-size:13px; text-transform: uppercasee;
}

.pozice1 {position: absolute; bottom: 2px; right: 2px;}
.pozice2 {position: absolute; bottom: 2px; left: 0;}
.pozice3 {position: absolute; top: 0; right: 2px;}
.pozice4 {position: absolute; top: 0; left: 0;}

.otoceni {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}















/* www detail */
#projekt-wwww {}
#projekt-wwww h3 {font-size: 35px;}
#projekt-wwww h3 .fas:hover {opacity:0.5;}
#projekt-wwww .velke {font-size: 35px;}
#projekt-wwww h4 {font-weight:300;}
#projekt-wwww h4 .black {font-size: 22px;}

.detail-piktogram {max-width: 55px;}

.nadpis {
  height: 75px;
  overflow: hidden;
	line-height: 1.1;
	margin-bottom: 4px;
	position: relative;
	padding-left: 90px;
	display: flex !important;
	align-items: center !important;
}

.nadpis.nadpis-sedivy {
	background-color: #f2f2f2;
}
.nadpis.nadpis-sedivy a {
	color: #666;
	display: block;
	padding: 30px 10px 30px 0px;
  font-size:18px;
}

.obal-piktogram {
	height: 100%;
	line-height: 55px;
	position: absolute;
	top: 0; left: 0;
  padding: 10px 15px;
}

.nadpis:hover .obal-piktogram {
	background-color: #c3c3c3;
}



/* paticka */
footer {}
footer a {color: White; opacity: 0.4;}
footer a:hover {color: White; text-decoration: none; opacity: 1;}
#paticka-design {background: url(img/paralaxa-001.jpg) top left no-repeat fixed; background-size: cover; min-height: 450px; height: 100vh; overflow: hidden;}
#bg-ramecek {margin: 0px auto 0px auto; overflow: visible; position: relative; padding: 0 0;}
#html-kod { background: url(img/paralaxa-002.png) center right no-repeat; background-size: contain; min-height: 450px; height:  100vh; width:100%; margin: 0 auto; padding: 0; position: absolute; overflow: visible;}
#meloun { background: url(img/paralaxa-003.png) center center no-repeat; background-size: contain; min-height: 450px; height:  100vh; width:100%; margin: 0 auto; padding: 0; position: absolute; overflow: visible;}
#pomeranc { background: url(img/paralaxa-004.png) center center no-repeat; background-size: contain; min-height: 450px; height:  100vh; width:100%; margin: 0 auto; padding: 0; position: absolute; overflow: visible;}
.paticka-nadpis {font-size: 90px; color: black; line-height: 0.8; font-weight: 900; letter-spacing: -3px; border-bottom: 1px solid Black; padding: 20vh 0 15px 0;}
.paticka-text {line-height: 1.1; font-weight: 900; padding: 15px 0 150px 0;}

#paticka-texty {background: Black; color: White;}
#paticka-texty .linky {border-top: 1px solid #4d4d4d; border-bottom: 1px solid #4d4d4d;  }
.piktogram-pata {max-height:60px;margin-right:10px; }
.paticka-odkaz a {font-size: 1.3rem; color: White; font-weight: 400; opacity: 0.5;}
@media (max-width: 980px){
.paticka-odkaz a {font-size: 1.0rem;}
}
@media (max-width: 768px){
.paticka-nadpis {font-size: 50px; padding: 20vh 0 15px 0;}
#paticka-design {height: 60vh;}
}
.paticka-odkaz a:hover {color: White; text-decoration: none; opacity: 1;}



/* modální okno */
.modal {background-color: black !important;}
.modal-modra-bg {background-color:#3477cf !important;}
.modal-seda-bg  {background-color:#666666 !important;}
.modal-cervena-bg {background-color:#c00418 !important;}
.modal-dialog {max-width: 100%; margin: 0 auto;}
.modal-content {background-color: black; border: 0px; border-radius: 0px; color: White;}
.modal .fas {font-size: 4.0rem; color: white; padding: 1.0rem;}
.modal .close {text-shadow: none; opacity: 1; }
.modal-header {border-bottom: 0px; padding-bottom: 0; }
.modal-body {padding-top: 0px; }
.modal-title {font-weight:100; color: White; font-size: 3.5rem; margin-bottom: 20px;}
@media (max-width: 576px){ .modal-title {font-size: 2.2rem; }}
.modal .piktogram-top {opacity: 0.6; float:left; max-width: 80px; margin: -90px 0px 0px 0px; }
.modal .piktogram {opacity: 0.6; max-width: 80px; margin: 20px 0px 0px 0px; }
.modal hr {border-top: White 1px solid;  opacity: 0.2;}
.modal .sloupecky { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3;}
@media (max-width: 992px){.modal .sloupecky { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;}}
@media (max-width: 768px){.modal .sloupecky { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1;}}


.piktogram-modal {max-height:60px; margin-left:-7px; margin-bottom: 15px; opacity:0.5;}
.modal-body .jmeno {font-size: 2.0rem; color: #93908f; font-weight: 300; }
@media (max-width: 1200px){.modal-body .jmeno {font-size: 1.4rem;} }
.modal-body a {color: Black; font-weight:600; }
.modal-body a:hover {color:#ffcc00; text-decoration:none;}
.modal-body em {color: White; font-size: 1.8rem;}
.modal-body .form-control {padding: 1rem 1rem; font-size: 3rem; line-height: 1.6; background: #2d2d2d; border: 1px solid #2d2d2d; font-weight: 100; border-radius: 0;}
.modal-body .vstup {border-radius: 0;}
.bila.vetsi a {color: White; font-size: 1.2rem; opacity: 0.4;}
.bila.vetsi a:hover {opacity: 1;}

.table-responsive {width: auto; border: 0;}
.table td {border-top: 1px solid #666666; color: White; font-size: 1.2rem; padding: .5rem 0; line-height: 1.2rem;}
.table .cena {text-align:right; padding-left: 30px; white-space: nowrap;}




.magnify > .magnify-lens { width: 600px; height: 600px;}
@media (max-width: 980px){.magnify > .magnify-lens {width: 300px; height: 300px;} }




@media (max-width: 992px){#projekt-wwww .velke::before {content: ""; display:block; margin-top:20px;}}
#projekt-wwww .offset-md-1 div:last-child a {font-weight: bold; color: #c00418 !important;  }


/* lightbox galerie */
.lb-data .lb-caption {color: white;}
.lightboxOverlay {
    background-color: #000;
    filter: alpha(Opacity=100);
    opacity: 1;}





/* definice stylů pro cookiebot */
#CybotCookiebotDialog {
  padding: 15px !important;
  color: #4e4e4e !important;
}
.CookiebotWidget-open,
.CybotCookiebotDialogContentWrapper {
  transform: scale(1);
}
#CookiebotWidget svg {
  fill: #d8811a !important;
}
.CookiebotWidget-show-consent-details,
#CybotCookiebotDialog a {
  color: #d8811a !important;
}
#CybotCookiebotDialogTabContent input:checked+.CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #d8811a !important;
}
#CybotCookiebotDialogTabContent input[type=checkbox][disabled]:checked+.CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #D6D6D6 !important;
}
#CookiebotWidget-btn-withdraw,
.CybotCookiebotDialogBodyButton {
  border-color: #d8811a !important;
}
#CookiebotWidget-btn-change,
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
  border-color: #d8811a !important;
  background-color: #d8811a !important;
}
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
	border-bottom-color: #d8811a !important;
}
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton:hover,
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab:hover,
#CybotCookiebotDialogDetailBodyContentCookieContainerTypes .CybotCookiebotDialogDetailBodyContentCookieProvider:not(.CybotCookiebotDialogDetailBodyContentCookieInfoCount):hover,
#CybotCookiebotDialogBodyLevelButtonsSelectPane label:not([for=CybotCookiebotDialogBodyLevelButtonNecessary]) .CybotCookiebotDialogBodyLevelButtonDescription:hover {
  color: #d8811a !important;
}
#myModal-cookies * {
	color: white !important;
}