/*   
Theme Name: Direct Method V2
Description: Szablon strony WWW
Version: 2.0
*/

body {
font-family: 'Roboto', Arial, Verdana, Helvetica, sans-serif;
font-size: 15px;
line-height: 150%;
color: #ffffff;

font-weight: 300;

padding-bottom: 40px;
background: #468ec1 url('images/tlo_01.jpg') no-repeat top center;
}

@media (max-width: 991px) {
body {
font-size: 13px;
line-height: 150%;
}
}

/*FONTY - POMOC
--------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
margin: 10px 0;
font-family: 'Roboto', Arial, Verdana, Helvetica, sans-serif;
font-weight: 300;
line-height: 120%;
color: #ffffff;
}

h1 {font-size: 38px;}
h2 {font-size: 36px;}
h3 {font-size: 32px;}
h4 {font-size: 17.5px;}
h5 {font-size: 14px;}
h6 {font-size: 11.9px;}

@media (min-width: 768px) and (max-width: 1199px) {
h1 {font-size: 32px;}
h2 {font-size: 28px;}
h3 {font-size: 24px;}
}
/*END:MEDIA-------------------------*/

@media (max-width: 767px) {
h1 {font-size: 24px;}
h2 {font-size: 22px;}
h3 {font-size: 20px;}
}
/*END:MEDIA-------------------------*/

@media (max-width: 480px) {
h1 {font-size: 18px;}
h2 {font-size: 18px;}
h3 {font-size: 18px;}
}
/*END:MEDIA-------------------------*/

.tooltip {
font-family: 'Roboto', Arial, Verdana, Helvetica, sans-serif;
font-size: 17px;
font-weight: 300;
line-height: 150%;
}

.popover {
font-family: 'Roboto', Arial, Verdana, Helvetica, sans-serif;
font-size: 17px;
font-weight: 300;
line-height: 150%;
}

/* TLO
--------------------------------------------------*/

.background-container {
overflow: hidden;
}

.background-container.bgc-00 {
background: transparent;
}

.background-container.bgc-01 {
background: #468ec1 url('images/tlo_03.png') no-repeat top center;
}

.background-container.bgc-02 {
background: #2c73ab url('images/tlo_04_2025.jpg') no-repeat top center;
}

.background-container.bgc-03 {
background: #e9e9e7;
/*background: #e9e9e7 url('images/tlo_03.jpg') no-repeat top center;*/
}
@media (max-width: 767px) {
.background-container.bgc-03 {background: #e9e9e7;}
}
/*END:MEDIA-------------------------*/

.background-container.bgc-05 {
background: #e9e9e7;
}

.background-container.bgc-04 {
padding-top: 230px;
background: #468ec1 url('images/cyborgi.png') no-repeat top center;
}

.background-container.bgc-06 {
background: #fff;
}

/*ZDEJCIA - KRAJE
--------------------------------------------------*/

.container.region-01-app {
background: url('images/tlo_01__01.png') no-repeat top left;
/*background-size: 65% auto;*/
}

.container.region-02-app {
background: url('images/tlo_02__01.png') no-repeat top left;
}

.container.region-03-app {
background: url('images/tlo_03__01.png') no-repeat top left;
}

.container.region-04-app {
background: url('images/tlo_04__01.png') no-repeat top left;
}

.container.region-05-app {
background: url('images/tlo_05__01.png') no-repeat top left;
}

.container.region-01-hub {
background: url('images/tlo_01__02.png') no-repeat top right;
}

.container.region-02-hub {
background: url('images/tlo_02__02.png') no-repeat top right;
}

.container.region-03-hub {
background: url('images/tlo_03__02.png') no-repeat top right;
}

.container.region-04-hub {
background: url('images/tlo_04__02.png') no-repeat top right;
}

.container.region-05-hub {
background: url('images/tlo_05__02.png') no-repeat top right;
}

@media (max-width: 1199px) {
.container.region-01-app {
background-size: 50% auto;

}

.container.region-02-app {
background-size: 50% auto;

}

.container.region-03-app {
background-size: 50% auto;

}

.container.region-04-app {
background-size: 50% auto;

}

.container.region-05-app {
background-size: 50% auto;

}

.container.region-01-hub {
background-size: 80% auto;

}

.container.region-02-hub {
background-size: 80% auto;

}

.container.region-03-hub {
background-size: 80% auto;

}

.container.region-04-hub {
background-size: 80% auto;

}

.container.region-05-hub {
background-size: 80% auto;

}
}
/*END:MEDIA-------------------------*/

@media (max-width: 991px) {
.container.region-01-app,
.container.region-02-app,
.container.region-03-app,
.container.region-04-app,
.container.region-05-app,
.container.region-01-hub,
.container.region-02-hub,
.container.region-03-hub,
.container.region-04-hub,
.container.region-05-hub {background: transparent;}
}
/*END:MEDIA-------------------------*/


/*ZDEJCIA - KRAJE
--------------------------------------------------*/

.container.region-01-pro {
background: url('images/tlo_dlpro.jpg') no-repeat top left;
/*background-size: 65% auto;*/
}

/* WERSJE JEZYKOWE
--------------------------------------------------*/
.wersje-jezykowe {
text-align: center;
padding: 20px 0 4px 0;
margin: 0 0 5px 0;
background: url('images/kropka.png') repeat-x bottom;
}

.wersje-jezykowe a.kraj {
display: inline-block;
margin: 5px 2px;
min-width: 70px;
min-height: 28px;
line-height: 12px;
font-size: 12px;
padding: 40px 0 0 0;
color: #ffffff;
text-align: center;
}

.wersje-jezykowe a.kraj:hover {
color: #5798c6;
text-decoration: none;
}

.wersje-jezykowe a.kraj.flaga-01 {background: url('images/flagi/flaga_01.png') no-repeat top center;}
.wersje-jezykowe a.kraj.flaga-02 {background: url('images/flagi/flaga_02.png') no-repeat top center;}
.wersje-jezykowe a.kraj.flaga-03 {background: url('images/flagi/flaga_03.png') no-repeat top center;}
.wersje-jezykowe a.kraj.flaga-04 {background: url('images/flagi/flaga_04.png') no-repeat top center;}
.wersje-jezykowe a.kraj.flaga-05 {background: url('images/flagi/flaga_05.png') no-repeat top center;}
.wersje-jezykowe a.kraj.flaga-06 {background: url('images/flagi/flaga_06.png') no-repeat top center;}
.wersje-jezykowe a.kraj.flaga-07 {background: url('images/flagi/flaga_07.png') no-repeat top center;}
.wersje-jezykowe a.kraj.flaga-08 {background: url('images/flagi/flaga_08.png') no-repeat top center;}
.wersje-jezykowe a.kraj.flaga-09 {background: url('images/flagi/flaga_09.png') no-repeat top center;}
.wersje-jezykowe a.kraj.flaga-10 {background: url('images/flagi/flaga_10.png') no-repeat top center;}
.wersje-jezykowe a.kraj.flaga-11 {background: url('images/flagi/flaga_11.png') no-repeat top center;}
.wersje-jezykowe a.kraj.flaga-12 {background: url('images/flagi/flaga_12.png') no-repeat top center;}
.wersje-jezykowe a.kraj.flaga-13 {background: url('images/flagi/flaga_13.png') no-repeat top center;}
.wersje-jezykowe a.kraj.flaga-14 {background: url('images/flagi/flaga_14.png') no-repeat top center;}
.wersje-jezykowe a.kraj.flaga-15 {background: url('images/flagi/flaga_15.png') no-repeat top center;}

@media (max-width: 991px) {
.wersje-jezykowe a.kraj {
margin: 6px;
}
}

/*NAGLOWEK
--------------------------------------------------*/

.page-title a {
color: #ffffff;
text-decoration: underline;
}

.obrazek-logo {margin-right: 20px;}
.obrazek-logo-mobile {margin: 0 auto;}


@media (min-width: 992px) {
.page-title-container {padding-right: 220px;}
.cyborg {width: 100%; background: url('images/cyborg.png') no-repeat right center;}
}
/*END:MEDIA-------------------------*/

@media (max-width: 991px) {
.page-title-container h1 {text-align: center;}
.cyborg {padding: 0; background: transparent;}
}
/*END:MEDIA-------------------------*/


/*FILM
--------------------------------------------------*/

.top-film-bg {padding: 20px 0 50px 0;}

.top-film {
position: relative;
display: block;
margin: 0 auto;
max-width: 853px;
max-height: 480px;
overflow: hidden;
}

.top-film-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
}

.top-film-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}


/*BANERY
--------------------------------------------------*/

.box-container {
display: block;
background: #ffffff;
padding: 5px 10px;
margin: 20px auto;
max-width: 300px;
min-height: 430px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align: center;
position: relative;
}

.box-container:hover,
.box-container:focus {
text-decoration: none;
}

@media (max-width: 767px) {
.box-container {max-width: 600px; min-height: 100px;}
}
/*END:MEDIA-------------------------*/

.nieaktywne {
/*opacity: 0.3 !important; */
cursor: default;
}

.box-image-container {margin-bottom: 50px; min-height: 170px;}
.box-image {margin: 0 auto; display: block;}
.box-animacja {position: absolute; top: 150px; left: 0; z-index: 10; width: 100%;}
.box-image.animacja {position: relative; margin: 0 auto; display: block;}

.box-title {color: #000;}
.box-link {color: #000;}
.box-text {color: #000;}

.box-container.bgc-00 {
background: transparent;
}

.box-container.bgc-00 .box-image {margin: 20px auto; display: block;}
.box-container.bgc-00 .box-title {color: #fff;}
.box-container.bgc-00 .box-text {color: #fff;}


/*TRESC
--------------------------------------------------*/
.background-container.bgc-03 .text-container h2 {color: #21579f;}
.background-container.bgc-03 .text-container p {color: #21579f;}
.background-container.bgc-03 .text-container p {color: #21579f;}

.background-container.bgc-06 .text-container h2 {color: #21579f;}
.background-container.bgc-06 .text-container p {color: #21579f;}
.background-container.bgc-06 .text-container p {color: #21579f;}

.text-container {
padding: 0;
}

.logo-mobile {
position: absolute; 
top: 10px; 
z-index: 10;
}

.region-01-app .logo-mobile {
left: 10px;
}

.region-02-app .logo-mobile {
left: 10px;
}

.region-03-app .logo-mobile {
left: 10px;
}

.region-04-app .logo-mobile {
right: 10px;
}

.region-05-app .logo-mobile {
left: 10px;
}


/*END:MEDIA-------------------------*/

@media (max-width: 767px) {
.text-container {padding: 0;}
.text-container, .text-table, .text-cell {display: block;}
.text-container.text-cell{padding: 5px;}
}
/*END:MEDIA-------------------------*/

@media (max-width: 480px) {
.logo-mobile {width: 70px;}
.text-container {padding: 0 5px;}
}
/*END:MEDIA-------------------------*/

.text-table {
display: table; 
border-spacing: 0px;
border: 0;
width: 100%;
}

.text-cell {
display: table-cell;
text-align:left;
vertical-align: middle;
}

@media (min-width: 992px) {
.text-table {min-height: 400px;}
.text-table.minimum {min-height: 200px;}
.text-container.text-table.minimum, 
.text-container.text-table.minimum .table-cell {padding: 0;}
} 
/*END:MEDIA-------------------------*/

@media (min-width: 1200px) {
.text-table {min-height: 680px;}
.text-table.minimum {min-height: 200px;}
.text-container.text-table.minimum, 
.text-container.text-table.minimum .table-cell {padding: 0;}
} 
/*END:MEDIA-------------------------*/



/*TRESC - TEKSTY
--------------------------------------------------*/
@media (min-width: 1200px) {
.image-container {padding: 0;}
.obrazek-okladki p img {}
.obrazek-telefon p img {}
.obrazek-tablet p img {}
} 
/*END:MEDIA-------------------------*/

@media (min-width: 768px) and (max-width: 1199px) {
.obrazek-okladki p img {}
.obrazek-telefon p img {}
.obrazek-tablet p img {margin-left: 30%;}
}
/*END:MEDIA-------------------------*/

@media (max-width: 767px) {
.image-container img {margin: 0 auto; display: block;}
.obrazek-okladki p img {}
.obrazek-telefon p img {}
.obrazek-tablet p img {margin-left: 30%;}
}
/*END:MEDIA-------------------------*/

@media (max-width: 480px) {
.image-container img {margin: 0 auto; display: block;}
.obrazek-okladki p img {}
.obrazek-telefon p img {}
.obrazek-tablet p img {margin-left: 0;}
}
/*END:MEDIA-------------------------*/


.scrollflow-slide-top {
padding: 5px;
}

.scrollflow-slide-top,
.scrollflow-slide-left {

}

.block {

}

.cyborgi {margin: 20px auto 5px auto; display: block;}

.captions, .captions a {
color: #98bede;
margin: 0;
}


/*FACEBOOK - OKNO
--------------------------------------------------*/

#social-media-box {
    display: flex;

    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;

}

#social-media-box {
	position: fixed;
	top: 60px;
	right: 0;
    flex-direction: column;
	
	background: #fafafa;
	box-shadow: 0 0 6px 1px rgb(32 33 36 / 28%);
}

.social-media-link-facebook,
.social-media-link-x,
.social-media-link-pinterest {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
	
text-decoration: none;
}



@media (min-width: 992px) {
#social-media-box .social-media-link-facebook, 
#social-media-box .social-media-link-x, 
#social-media-box .social-media-link-pinterest {
	width: 40px;
	height: 40px;
	background-size: auto 40px;
}
.social-media-link-facebook,
.social-media-link-x,
.social-media-link-pinterest {
	margin: 5px;
}
}

@media (max-width: 991.98px) {
#social-media-box .social-media-link-facebook, 
#social-media-box .social-media-link-x, 
#social-media-box .social-media-link-pinterest {
	width: 30px;
	height: 30px;
	background-size: auto 30px;
}
.social-media-link-facebook,
.social-media-link-x,
.social-media-link-pinterest {
	margin: 8px 4px;
}
}


/* kolor - fill i filter */

.social-media-link-facebook {
	background-image: url("images/ikonka-facebook.svg");
	background-repeat: no-repeat;
	background-position: center;
}

.social-media-link-x {
	background-image: url("images/ikonka-x.svg");
	background-repeat: no-repeat;
	background-position: center;
}

.social-media-link-pinterest {
	background-image: url("images/ikonka-pinterest.svg");
	background-repeat: no-repeat;
	background-position: center;
}

.social-media-link-facebook,
.social-media-link-x,
.social-media-link-pinterest {

}

.social-media-link-facebook:hover,
.social-media-link-x:hover,
.social-media-link-pinterest:hover, 
.social-media-link-facebook:focus,
.social-media-link-x:focus,
.social-media-link-pinterest:focus {
	opacity: 0.8;
text-decoration: none;
}





/*TOP
--------------------------------------------------*/

.scrollup {
font-size: 40px;
line-height: 100%;
color: #ffffff;
opacity: 0.8;
position: fixed;
bottom: 10px;
right: 20px;
display: none;
background: #2660a0;
padding: 2px 10px;
z-index: 10000;
}

.scrollup:hover {
color: #5d9bc8;
}

/*COOCIES
--------------------------------------------------*/

.about-cookies.ukryj:before {
font-family: 'FontAwesome', 'Open Sans';
content: " \f00d";
float: left;
color: #5e93cf;
margin-right: 10px;
font-size: 18px;
width: 20px;
line-height: 40px;
}

.about-cookies.pokaz:before {
font-family: 'FontAwesome', 'Open Sans';
content: " \f05a";
float: left;
color: #5e93cf;
margin-right: 10px;
font-size: 18px;
width: 20px;
line-height: 40px;
}

.about-cookies {
height: 40px;
font-size: 16px;
line-height: 20px;
color: #ffffff;
opacity: 0.7;
position: fixed;
bottom: 10px;
left: 20px;
cursor: pointer;
background: #2660a0;
padding: 2px 10px;
z-index: 10000;
}

.information-about-cookies a,
.about-cookies a {
color: #ffffff;
text-decoration: underline;
}

.about-cookies-text {
float: left;
height: 40px;
font-size: 16px;
line-height: 20px;
}

.information-about-cookies a:hover,
.about-cookies a:hover,
.about-cookies:hover {
color: #5d9bc8;
}

.information-about-cookies {
cursor: default;
max-width: 680px;
font-size: 16px;
line-height: 20px;
color: #ffffff;
opacity: 0.7;
position: fixed;
bottom: 54px;
left: 20px;
right: 20px;
background: #2660a0;
padding: 2px 10px;
z-index: 10000;
}