/* = = = RESET CSS = = = */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* = = = CZCIONKI & TEKST = = = */
body {
font-family: 'Open Sans', sans-serif;
}
strong {
font-weight: bold;
}
.bodyOffset {
height: 3.53125rem;
}
.anchor:before {
content:"";
display:block;
height:8rem; /* fixed header height*/
margin:-6.70rem 0 0; /* negative fixed header height */
}
/* ### RWD ### */
/* Small devices (small phones) */
@media (min-width: 0px) {
h1 {
font-weight: 700;
margin: 0;
font-size: 1.25rem;
}
h2 {
font-weight: 700;
margin: 0rem .5rem .5rem 0rem;
font-size: 1rem;
}
h3 {
font-weight: 700;
margin: .5rem .5rem .5rem 0rem;
font-size: .8rem;
line-height: normal;
}
p {
line-height: normal;
margin-top: .5rem;
margin-bottom: .5rem;
font-size: .7rem;
}
.normalText {
font-size: .7rem;
}
a {
font-size: .7rem;
line-height: normal;
padding-top: .5rem;
padding-bottom: .5rem;
}
ul {
margin: 0;
}
li {
line-height: normal;
}
.footerCopyrightsRow a {
padding-top: 0rem;
padding-bottom: 0rem;
}
.shapeContainer h1 {
color: white;
}
.news h1, .join h1, .mission h1, .offer h1 {
display:inline-block;
padding: 0.25rem;
margin-top: 0rem;
margin-bottom: 0.5rem;
background-color: #F9AE0E;
}
.awards h1, .cooperation h1, .tools h1, .family h1 {
color: #FEC805;
text-shadow: 2px 2px black
}
.read-more-trigger {
font-size: .7rem;
}
/* = = = UPPER ELEMENT = = = */
.upperElement {
width: 100%;
height: auto;
}
/* --- menu --- */
.navbar-brand {
padding-top: 0;
padding-bottom: 0;
}
.navbar-light .navbar-nav .nav-link {
position: relative;
text-decoration: none;
}
.navbar-light .navbar-nav .nav-link:hover {
color: #D77B0F;
}
.navbar-light .navbar-nav .nav-link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #D77B0F;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar-light .navbar-nav .nav-link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar-light .navbar-nav .nav-link.active {
color: #D77B0F;
font-weight: bold;
}
.menuContainer {
background-color: white;
border-bottom: 1px solid lightgrey;
padding-top: 3px;
padding-bottom: 0px;
}
.menuBip, .menuLanguageIcon {
display: flex;
flex-direction: column;
}
.menuBip img {
height: 25px;
padding-left: 1rem;
padding-right: 1.5rem;
text-decoration: none;
}
.menuLanguageIcon img {
height: 25px;
margin-left: 3px;
text-decoration: none;
}
/* = = = SIDE PANEL = = = */
.sidePanel a {
position: fixed;
top: 50%;
left: -247px;
transition: 0.3s;
padding: 15px;
width: 285px;
text-decoration: none;
text-align: right;
color: #283164;
border-radius: 0 5px 5px 0;
font-weight: bold;
z-index: 10000;
}
.sidePanel a:hover {
left: 0;
}
/* = = = BANNER = = = */
.ichbpanBanner {
display: none;
}
/* = = = AWARDS = = = */
.awards {
padding-top: 0rem;
padding-bottom: 2rem;
background-color: #28316e;
border-top: 1px solid #28316e;
background-image: url(../../../media/backgrounds/dna_sekwencja_tlo_niebieskie.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.awardsBox {
text-align: center;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.awardsBox p.tekst {
margin: 0;
font-weight: bold;
font-size: 1rem;
color: #28316e;
}
.hexagon {
position: relative;
width: 100px;
height: 57.74px;
background-color: #ffffff;
margin: 28.87px 0;
box-shadow: 0 0 75px rgba(255,255,255,0.75);
margin-left: auto;
margin-right: auto;
transition: .35s ease;
}
.hexagon:before, .hexagon:after {
content: "";
position: absolute;
z-index: 1;
width: 70.71px;
height: 70.71px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 14.6447px;
box-shadow: 0 0 75px rgba(255,255,255,0.75);
transition: .35s ease;
}
.hexagon:before {
top: -35.3553px;
}
.hexagon:after {
bottom: -35.3553px;
}
.hexagon span {
display: block;
position: absolute;
top:0px;
left: 0;
width:100px;
height:57.7350px;
z-index: 2;
background: inherit;
display: flex;
align-items: center;
}
.hexagon a {
width: 100%;
}
.hexagon img {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
max-width: 70%;
}
#logoAplus {
max-width: 50%;
}
/*.hexagon:hover {
background-color: #FEC805;
box-shadow: 0 0 35px rgba(254,200,5,0.75);
}
.hexagon:hover:before, .hexagon:hover:after {
box-shadow: 0 0 35px rgba(254,200,5,0.75);
}*/
/* = = = NEWS = = = */
.news {
padding-top: 1rem;
padding-bottom: 2rem;
/*border-top: 1px solid grey;*/
background-color: #eeeeee;
background-image: url(../../../media/backgrounds/news_xs.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom;
}
.newsRow {
margin: 0;
padding: 0;
}
.newsBoxContainer {
padding: 0.5rem;
}
.newsBox {
padding: 0;
box-shadow: 1px 1px 5px grey;
background-color: rgba(255,255,255,0.85);
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.newsBoxContent {
padding: 1rem;
margin-bottom: 1rem;
}
.newsBoxMoreDetails {
padding: 0.5rem;
background-color: #FEC805;
color: white;
text-align: right;
}
div.newsBox:nth-child(1) > div:nth-child(1) > div:nth-child(3) > p:nth-child(2) {
margin: 0;
}
.read-more-state {
display: none;
}
.read-more-target {
opacity: 0;
max-height: 0;
font-size: 0;
margin: 0;
transition: .25s ease;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
font-size: .7rem;
max-height: 999em;
}
.read-more-state ~ .read-more-trigger:before {
content: 'Czytaj więcej ...';
}
.read-more-state:checked ~ .read-more-trigger:before {
content: '... zwiń';
}
.read-more-trigger {
cursor: pointer;
display: inline-block;
padding: 1rem 0 0 0;
color: blue;
}
/* = = = SHAPE = = = */
.shape {
padding-top: 0rem;
padding-bottom: 2rem;
background-color: #28316e;
border-top: 1px solid #28316e;
}
.shapeRowLinkArea:hover {
text-decoration: none;
}
.shapeBox {
text-align: center;
padding-top: 0rem;
padding-bottom: 0rem;
}
.shapeBox p.liczba {
margin-bottom: 0;
font-weight: bold;
font-size: 2rem;
color: #F9AE0E;
text-shadow: 3px 3px black;
}
.shapeBox p.tekst {
margin: 0;
font-weight: bold;
font-size: 1rem;
color: white;
}
/* = = = MISSION = = = */
.mission {
padding-top: 1rem;
padding-bottom: 2rem;
background-color: #eeeeee;
background-image: url(../../../media/backgrounds/mission_xs.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top;
}
.missionRow {
margin: 0;
padding: 0;
}
.missionBoxContainer {
padding: 1rem;
}
.missionBox {
margin: 0rem;
padding: 0rem;
height: 100%;
box-shadow: 3px 3px 5px grey;
background-color: rgba(255,255,255,0.85);
}
.missionBoxContent{
padding: 1rem;
}
/* = = = COOPERATION = = = */
.cooperation {
padding-top: 0rem;
padding-bottom: 2rem;
background-color: #28316e;
border-top: 1px solid #28316e;
border-bottom: 1px solid #28316e;
background-image: url(../../../media/backgrounds/dna_tlo_niebieskie.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.cooperationBox {
text-align: center;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.cooperationBox p.tekst {
margin: 0;
font-weight: bold;
font-size: 1rem;
color: #28316e;
}
/* = = = JOIN = = = */
.join {
padding-top: 1rem;
padding-bottom: 2rem;
background-image: url(../../../media/backgrounds/join_xs.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
.joinRow {
margin: 0;
padding: 0;
}
.joinBoxContainer {
padding: 1rem;
}
.joinBox {
padding: 0rem;
background-color: white;
box-shadow: 3px 3px 5px grey;
background-color: rgba(255,255,255,0.85);
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.joinBoxContent {
padding: 1rem;
margin-bottom: 1rem;
text-align: left;
width: 100%;
}
.joinBoxMoreDetails{
padding: 0.5rem;
background-color: #FEC805;
color: white;
text-align: right;
width: 100%;
position:
}
/* = = = TOOLS = = = */
.tools {
padding-top: 0rem;
padding-bottom: 2rem;
background-color: #28316e;
border-top: 1px solid #28316e;
border-bottom: 1px solid #28316e;
background-image: url(../../../media/backgrounds/hex_tlo_niebieskie.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.toolsBox {
text-align: center;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.toolsBox p.tekst {
margin: 0;
font-weight: bold;
font-size: 1rem;
color: #28316e;
}
/*.tools .hexagon:hover {
background-color: #8287C1;
box-shadow: 0 0 75px rgba(40,49,100,1);
box-shadow: 0 0 35px rgba(130,135,193,0.75);
}
.tools .hexagon:hover:before, .tools .hexagon:hover:after {
box-shadow: 0 0 75px rgba(40,49,100,1);
box-shadow: 0 0 35px rgba(130,135,193,0.75);
}*/
/* = = = OFFER = = = */
.offer {
padding-top: 1rem;
padding-bottom: 2rem;
background-color: #eeeeee;
background-image: url(../../../media/backgrounds/offer_xs.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right;
}
.offerRow {
margin: 0;
padding: 0;
}
.offerBoxContainer {
padding: 1rem;
}
.offerBox {
padding: 0rem;
box-shadow: 3px 3px 5px grey;
background-color: rgba(255,255,255,0.85);
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.offerBoxContent {
padding: 1rem;
margin-bottom: 1rem;
}
.offerBoxMoreDetails{
padding: 0.5rem;
background-color: #FEC805;
color: white;
text-align: right;
position: absolute;
bottom: 0;
width: 100%;
}
/* = = = FAMILY = = = */
.family {
padding-top: 0rem;
padding-bottom: 2rem;
background-color: #28316e;
border-top: 1px solid #28316e;
background-image: url(../../../media/backgrounds/siec_tlo_niebieskie.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: top;
}
.familyBox {
text-align: center;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.family p.tekst {
margin: 0;
font-weight: bold;
font-size: 1rem;
color: #28316e;
}
/* = = = CONTACT = = = */
.contact {
padding-top: 0;
}
.address {
padding-top: 1rem;
padding-bottom: 1rem;
background-image: url(../../../media/backgrounds/address_xs.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top;
position: relative;
display: flex;
align-items: center;
}
.addressContainer {
padding: 1rem;
margin: 0 1rem 0 1rem;
}
.addressRow {
background-color: rgba(255,255,255,0.85);
}
.addressBox {
display: flex;
align-items: center;
}
.addressBoxImg{
text-align: center;
}
.addressBoxImg img {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 50vw;
max-width: 90%;
}
.addressBoxText {
margin: auto;
opacity: 1;
text-align: center;
}
.map {
border-top: 1px solid grey;
border-bottom: 1px solid grey;
background-color: white;
}
.mapContainer {
position: relative;
width: 100%;
height: 15rem;
}
.mapContainer iframe {
width: 100%;
height: 100%;
}
/* = = = FOOTER = = = */
.footer{
padding-top: 0rem;
padding-bottom: 0rem;
}
.footerNavi {
background-color: #283164;
color: #FEC805;
}
.footerNaviRow {
margin: 0;
padding-top: 1rem;
padding-bottom: 2rem;
}
.footerNaviRow a{
color: white;
padding: 0;
}
.footerNaviBox {
text-align: center;
}
.footerNaviNaviRow,.footerNaviPortalRow,.footerNaviAddressRow {
text-align: center;
}
.footerNaviSocialRow {
padding: 0;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
}
.footerNaviSocialIcon {
padding: 0 1rem 0 0;
}
.footerNaviSocialIcon img {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
max-width: 30px;
display: flex;
align-items: center;
}
.footerNaviGospRow img{
padding: .5rem;
object-fit: contain;
}
.footerNaviAddress p{
color: white;
}
.footerCopyrights {
background-color: #FEC805;
color: rgb(90, 118, 155);
}
.footerCopyrightsRow {
margin: 0;
padding-top: 0.5rem;
}
}
/* Small devices (landscape phones) */
@media (min-width: 576px) {
h1 {
font-size: 1.3rem;
}
h2 {
font-size: 1.1rem;
}
h3 {
font-size: .85rem;
line-height: normal
}
p {
font-size: .75rem;
}
.normalText {
font-size: .75rem;
}
a {
font-size: .75rem;
}
.news {
background-image: url(../../../media/backgrounds/news_sm.jpg);
}
.mission {
background-image: url(../../../media/backgrounds/mission_sm.jpg);
}
.join {
background-image: url(../../../media/backgrounds/join_sm.jpg);
}
.offer {
background-image: url(../../../media/backgrounds/offer_sm.jpg);
}
.address {
background-image: url(../../../media/backgrounds/address_sm.jpg);
}
.read-more-trigger {
font-size: .75rem;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
font-size: .75rem;
}
}
/* Medium devices (tablets) */
@media (min-width: 768px) {
h1 {
margin: 1rem;
font-size: 1.75rem;
}
h2 {
margin: 1rem;
font-size: 1.35rem;
}
h3 {
margin: 1rem;
font-size: 1rem;
}
.news h1, .join h1, .mission h1, .offer h1 {
padding: 1rem;
}
p {
font-size: .85rem;
}
.normalText {
font-size: .85rem;
}
a {
font-size: .85rem;
}
/* = = = BANNER = = = */
.ichbpanBanner {
background-image: url(../../../media/backgrounds/banner_md.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom;
display: flex;
justify-content: center;
height: 40vw;
}
.ichbpanSideLogo {
position: absolute;
margin-top: 13%;
right: 0;
height: 7vw;
min-height: 5vw;
background-color: rgba(255,255,255,0.25);
}
.ichbpanSideLogo img {
padding: 0.5rem 1rem 0.5rem 0.5rem;
height: 100%;
}
.hexagon {
width: 150px;
height: 86.60px;
margin: 43.30px 0;
margin-left: auto;
margin-right: auto;
}
.hexagon:before, .hexagon:after {
width: 106.07px;
height: 106.07px;
left: 21.9670px;box-shadow: 0 0 75px rgba(0,0,0,0.75);
}
.hexagon:before {
top: -53.0330px;
}
.hexagon:after {
bottom: -53.0330px;
}
.hexagon span {
width:150px;
height:86.6025px;
}
.news {
background-image: url(../../../media/backgrounds/news_md.jpg);
}
.mission {
background-image: url(../../../media/backgrounds/mission_md.jpg);
}
.join {
background-image: url(../../../media/backgrounds/join_md.jpg);
}
.offer {
background-image: url(../../../media/backgrounds/offer_md.jpg);
}
.address {
background-image: url(../../../media/backgrounds/address_md.jpg);
}
.read-more-trigger {
font-size: .85rem;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
font-size: .85rem;
}
.mapContainer {
height: 30rem;
}
.footer h3 {
margin-left: 0;
}
.footerNaviBox {
text-align: left;
}
.footerNaviNaviRow,.footerNaviPortalRow,.footerNaviAddressRow {
text-align: left;
}
.footerNaviSocialRow {
justify-content: left;
}
.footerNaviGosp {
display: flex;
align-items: center;
justify-content: center;
}
}
/* Large devices (desktops) */
@media (min-width: 992px) {
/* = = = UPPER ELEMENT = = = */
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.75rem;
}
h3 {
font-size: 1.5rem;
}
p {
font-size: 1rem;
}
.normalText {
font-size: 1rem;
}
a {
font-size: 1rem;
}
.ichbpanBanner {
background-image: url(../../../media/backgrounds/banner_lg.jpg);
}
.news {
background-image: url(../../../media/backgrounds/news_lg.jpg);
}
.mission {
background-image: url(../../../media/backgrounds/mission_lg.jpg);
}
.join {
background-image: url(../../../media/backgrounds/join_lg.jpg);
}
.offer {
background-image: url(../../../media/backgrounds/offer_lg.jpg);
}
.address {
background-image: url(../../../media/backgrounds/address_lg.jpg);
}
.read-more-trigger {
font-size: 1rem;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
font-size: 1rem;
}
.hexagon {
width: 200px;
height: 115.47px;
margin: 57.74px 0;
margin-left: auto;
margin-right: auto;
}
.hexagon:before, .hexagon:after {
width: 141.42px;
height: 141.42px;
left: 29.2893px;
}
.hexagon:before {
top: -70.7107px;
}
.hexagon:after {
bottom: -70.7107px;
}
.hexagon span {
width:200px;
height:115.4701px;
}
/* --- MENU --- */
.menuContainer {
padding-left: 0;
padding-right: 0;
opacity: 1.0;
}
.mainElement {
width: 100%;
height: auto;
}
/* = = = SHAPE = = = */
.shape {
padding-bottom: 4rem;
}
.shapeBox p.liczba {
font-size: 3rem;
}
.shapeBox p.tekst {
font-size: 1.35rem;
}
/* = = = NEWS = = = */
.news {
min-height: 75vh;
padding-top: 3rem;
padding-bottom: 4rem;
}
.newsBox {
}
/* = = = MISSION = = = */
.mission {
min-height: 95vh;
padding-top: 3rem;
padding-bottom: 4rem;
}
/* = = = JOIN = = = */
.join {
min-height: 95vh;
padding-top: 3rem;
padding-bottom: 5rem;
}
/* = = = OFFER = = = */
.offer {
min-height: 95vh;
padding-top: 3rem;
padding-bottom: 5rem;
}
/* = = = CONTACT = = = */
.contact {
}
.address {
min-height: 70vh;
padding-top: 3rem;
padding-bottom: 4rem;
}
.mapContainer {
height: 35rem;
}
/* = = = FOOTER = = = */
.footerNaviRow {
padding-top: 2rem;
padding-bottom: 3rem;
}
.footerNaviSocialIcon {
padding-bottom: 1rem;
}
.footerNaviGosp {
display: flex;
justify-content: center;
}
.footerNaviGosp img{
max-height: 135px;
}
}
/* Extra large devices (large desktops) */
@media (min-width: 1200px) {
.ichbpanBanner {
background-image: url(../../../media/backgrounds/banner_xl.jpg);
}
.news {
background-image: url(../../../media/backgrounds/news_xl.jpg);
}
.mission {
background-image: url(../../../media/backgrounds/mission_xl.jpg);
}
.join {
background-image: url(../../../media/backgrounds/join_xl.jpg);
}
.offer {
background-image: url(../../../media/backgrounds/offer_xl.jpg);
}
.mapContainer {
height: 50rem;
}
.footerNaviGosp {
margin-top: 4rem;
display: inline-block;
justify-content: center;
}
.footerNaviGosp img{
max-width: 100%;
}
}