/* Theme Name: jedrzak-theme Version: 1.0 Author: RYBOXX DESIGN - Robert Ryba Author URI: https://www.ryboxxdesign.pl */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 20px; } body { color: #434a53; background: #fff; font-family: 'TT Norms'; font-weight: 300; } h1, h2, h3, h4, h5 { display: block; } p { margin-bottom: 30px; } strong { font-weight: bold; } .overflow { overflow-x: hidden; } a.button, section.offer-block a .imgLiquidFill, section.offer-block a .colorline, section.offer-block a .arrow, section.offer-block a, section.realizations-block .list .item .imgLiquidFill, .gallery .item .imgLiquidFill, main#subpage aside ul li a::before, header nav ul li a::before { -webkit-transition: all 300ms ease-in; -moz-transition: all 300ms ease-in; -ms-transition: all 300ms ease-in; -o-transition: all 300ms ease-in; transition: all 300ms ease-in; } header { position: relative; } header #topbar { display: flex; position: absolute; width: 100%; padding: 50px; z-index: 100; font-weight: bold; font-size: 0.95rem; text-transform: uppercase; } header #topbar .logo { flex-basis: 20%; } header #topbar nav { flex-basis: 65%; } header #topbar .phone { position: relative; flex-basis: 15%; } header #topbar .phone img { width: 35px; position: absolute; top: -5px; left: 3vw; } header a { color: #fff; text-decoration: none; } header nav, header .phone { text-align: right; } header nav ul { list-style: none; } header nav ul li { display: inline-block; margin-left: 70px; } header nav ul li a { display: block; padding-left: 18px; position: relative; padding-bottom: 25px; } header nav ul li a::before { content: ""; position: absolute; bottom: 0; left: 20px; width: 0%; height: 7px; background: #2d6fff; } header nav ul li a:hover::before, header nav ul li.current-menu-item a::before, header nav ul li.current-page-ancestor a::before { width: 50%; } header .scroll { display: block; position: absolute; right: -65px; bottom: 175px; font-weight: bold; color: #fff; font-size: 0.7rem; z-index: 100; -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); line-height: 30px; } header .scroll div.block { display: inline-block; width: 100px; height: 30px; border: 1px solid #fff; margin-right: 20px; } header .scroll div.block div { width: 15px; height: 15px; background: #2d6fff; margin-left: 10px; margin-top: 6px; } header .scroll span { position: relative; top: -10px; } .lines { display: flex; } .lines .l { width: 16.666666%; height: 150px; border-right: 1px solid #d7d7d7; } footer .lines div { border-right: none; height: auto; width: auto; } .imgLiquidFill { width: 100%; height: 100%; } .aboutus-block { display: flex; } .aboutus-block .info { flex-basis: 50%; margin-left: 16.666666%; padding-top: 70px; } .aboutus-block .img-box { position: relative; flex-basis: 33.333333%; border-left: 10px solid #2d6fff; height: 90vh; background: #d7d7d7; } .aboutus-block .img-box .year { position: absolute; left: -28vw; bottom: 0; font-size: 10rem; font-weight: 800; } .aboutus-block .img-box .year div:first-child { font-weight: 500; font-size: 5rem; margin-bottom: -30px; } .aboutus-block .colorline { width: 33.333333%; height: 10px; background: #2d6fff; margin-bottom: 70px; } .aboutus-block .info .txt { padding-right: 33.333333%; } .txt { line-height: 200%; } a.button { display: inline-block; padding: 15px 30px; font-size: 0.85rem; color: #2d6fff; border: 1px solid #2d6fff; text-decoration: none; } a.button:hover, main#subpage a.button:hover { background: #2d6fff; color: #fff; } main#subpage section.realizations-block a.button { color: #fff; } main#subpage section.realizations-block a.button:hover { background: #fff; color: #2d6fff; } h2 { font-size: 2.5rem; font-weight: 800; } span.color { color: #2d6fff; } section.offer-block { position: relative; } section.offer-block .insidee { position: relative; z-index: 50; } section.offer-block .lines { position: relative; margin-bottom: 75px; } section.offer-block .lines div:nth-child(1), section.offer-block .lines div:nth-child(2), section.offer-block .lines div:nth-child(3) { opacity: 0; } section.offer-block .lines h2 { position: absolute; left: 16.666666%; bottom: 0; } main#subpage section.offer-block h2 { position: relative; left: 33.3333%; top: 75px; } section.offer-block .list, section.offer-block .list-two { margin: 0 16.666666% 0 16.666666%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; max-height: 730px; margin-bottom: 10px; } section.offer-block a, main#subpage section.offer-block a { background: #434a54; position: relative; color: #fff; } section.offer-block a:hover, main#subpage section.offer-block a:hover { color: #2d70ff; } section.offer-block .list a.item1 { grid-area: 1 / 1 / 2 / 3; height: 420px; margin-bottom: 10px; margin-right: 10px; } section.offer-block .list a.item2 { grid-area: 1 / 3 / 3 / 4; height: 730px; } section.offer-block .list a.item3 { grid-area: 2 / 2 / 3 / 3; height: 300px; margin-right: 10px; } section.offer-block .list a.item4 { grid-area: 2 / 1 / 3 / 2; height: 300px; margin-right: 10px; } section.offer-block .list-two a.item1 { grid-area: 1 / 1 / 3 / 2; height: 730px; margin-right: 10px; } section.offer-block .list-two a.item2 { grid-area: 1 / 2 / 2 / 3; height: 300px; margin-bottom: 10px; margin-right: 10px; } section.offer-block .list-two a.item3 { grid-area: 1 / 3 / 2 / 4; height: 300px; margin-bottom: 10px; } section.offer-block .list-two a.item4 { grid-area: 2 / 2 / 3 / 4; height: 420px; } section.offer-block a .imgLiquidFill { opacity: 0.45; } section.offer-block a:hover .imgLiquidFill { opacity: 0.85; } section.offer-block a .name { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 10; } section.offer-block a h3 { font-weight: 500; padding-left: 50px; font-size: 1.5rem; margin-bottom: 50px; } section.offer-block a .colorline { width: 25%; height: 10px; background: #2d70ff; } section.offer-block a:hover .colorline { width: 100%; } section.offer-block a .arrow { display: flex; width: 75px; height: 75px; border: 1px solid #fff; position: absolute; right: 50px; top: 50px; z-index: 50; opacity: 0; text-align: center; line-height: 75px; justify-content: center; align-items: center; } section.offer-block a:hover .arrow { opacity: 1; } section.offer-block a .arrow img { flex-basis: 30px; width: 30px; } section.offer-block .dark-bg { position: absolute; top: 75px; left: 0; width: 30%; height: 420px; background: #434a54; } section.offer-block .color-bg { position: absolute; bottom: 0; right: 0; width: 30%; height: 420px; background: #2d6fff; } section.realizations-block .list { display: flex; } section.realizations-block .list .item { flex-basis: 33.333333%; height: 60vh; background: #434a54; } section.realizations-block .list .item:first-child { background: #2d70ff; color: #fff; } section.realizations-block .list .item .inside { padding-left: 50%; padding-right: 50px; padding-top: 50px; } section.realizations-block .list .item a.button { color: #fff; border-color: #fff; } section.realizations-block .list .item a.button:hover { background: #fff; color: #2d70ff; } section.realizations-block .list .item h2 { margin-bottom: 50px; } section.realizations-block .list .item .txt { margin-bottom: 30px; } section.realizations-block .list .item .imgLiquidFill, .gallery .item .imgLiquidFill { opacity: 0.45; } section.realizations-block .list .item:hover .imgLiquidFill, .gallery .item:hover .imgLiquidFill { opacity: 0.85; } .seo-block { padding: 0 16.666666%; } .seo-block img { display: block; width: 100%; margin-bottom: 50px; } .seo-block .list { display: flex; } .seo-block .list .column { flex-basis: 25%; padding-right: 50px; } .seo-block h2 { font-size: 1rem; margin-bottom: 30px; } .seo-block h2 a { color: #434a54; text-decoration: none; } .seo-block .txt { font-size: 0.75rem; text-align: justify; } .seo-block .list .column .box { margin-bottom: 50px; } footer { background: #434a54; color: #fff; position: relative; } footer .copyright { position: absolute; width: 100%; bottom: 50px; font-size: 0.75rem; text-align: center; opacity: 0.5; } footer .copyright a { color: #fff; text-decoration: none; } footer .lines .l { height: 400px; border-color: #696d76; } footer .lines .l:nth-child(2) { font-size: 2.5rem; font-weight: bold; padding-top: 75px; } footer .contact { padding-top: 75px; } footer .contact .name { font-weight: bold; font-size: 1.25rem; margin-bottom: 25px; } footer .contact a, main#subpage a { text-decoration: none; color: #fff; font-weight: 500; } main#subpage a { color: #2d6fff; } #subpageImage img { display: block; width: 100%; } main#subpage .aboutus-block { margin-bottom: 100px; } main#subpage .aboutus-block h2 { margin-bottom: 30px; } main#subpage .aboutus-block .info .txt { padding-right: 16.66%; } .txt ul { padding-left: 75px; margin-bottom: 30px; } .txt ul li { margin-bottom: 5px; } main#subpage .inside { padding: 100px 16.666666%; position: relative; } main#subpage h2 { margin-bottom: 50px; } .map { height: 600px; overflow: hidden; } .map iframe { width: 100%; height: 100%; } main#subpage .inside .word { position: absolute; width: 25vw; left: 60vw; top: 250px; } .gallery { padding: 0 16.666666%; display: flex; flex-wrap: wrap; } .gallery .item { display: block; flex-basis: 50%; height: 400px; background: #434a54; } main#subpage .offer-page { display: flex; } main#subpage .offer-page aside { flex-basis: 25%; } main#subpage .offer-page .content { flex-basis: 75%; padding-left: 100px; } main#subpage .offer-page .content .img-box { height: 450px; background: #434a54; margin-bottom: 50px; } aside ul { list-style: none; } main#subpage aside ul li a { display: block; padding: 30px 0; color: #434a53; position: relative; font-weight: 500; } main#subpage aside ul li a::before { content: ""; position: absolute; bottom: 0; left: 0; width: 20%; height: 7px; background: #2d6fff; } main#subpage aside ul li.current-menu-item a::before, main#subpage aside ul li a:hover::before { width: 100%; } .slideshow-mobile { display: none; } .navbar { display: none; position: absolute; top: 30px; right: 10vw; width: 45px; height: 45px; z-index: 40; cursor: pointer; z-index: 900; } .bar1, .bar2, .bar3 { width: 100%; height: 5px; margin-bottom: 7px; background-color: #fff; transition: all 0.3s ease-in-out; } .navbar-on .bar1, .navbar-on .bar2, .navbar-on .bar3 { background: #fff; } .navbar-on .bar1 { transform-origin: 3% 60%; transform: rotate(45deg); } .navbar-on .bar3 { transform-origin: 20% 80%; transform: rotate(-45deg); } .navbar-on .bar2 { background-color: transparent; } .navbar-content { position: fixed; background: rgba(67, 74, 83, 0.95); width: 100vw; height: 100vh; z-index: 800; display: none; } .navbar-content ul { display: flex; flex-direction: column; justify-content: center; height: 100vh; align-content: center; justify-content: center; list-style: none; text-transform: uppercase; } .navbar-content ul li { flex-basis: 10%; text-align: center; } .navbar-content ul li a { color: #fff; font-size: 1.50rem; font-weight: bold; text-decoration: none; } .navbar-content ul li.current-menu-item a, .navbar-content ul li.current-page-ancestor a { color: #2d6fff; }