/* ////////////////////////////////////////////////////   SECTION   ////////////////////////////// */
/*
          ########  ########  ######   ##     ## ##          ###    ########
          ##     ## ##       ##    ##  ##     ## ##         ## ##   ##     ##
          ##     ## ##       ##        ##     ## ##        ##   ##  ##     ##
          ########  ######   ##   #### ##     ## ##       ##     ## ########
          ##   ##   ##       ##    ##  ##     ## ##       ######### ##   ##
          ##    ##  ##       ##    ##  ##     ## ##       ##     ## ##    ##
          ##     ## ########  ######    #######  ######## ##     ## ##     ##
*/

table {
  border-spacing: 1;
  border-collapse: collapse;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  margin: 2em auto 0 auto;
  position: relative;
}
table:first-child{
  margin-top: 0;
}
table * {
  position: relative;
}
table td, table th {
  padding: 0.8em 1.2em;
  text-align: left;
}
table td{
  overflow: hidden;
}
table thead th{
  border-bottom: 2px solid #00b9e9;
}
table thead tr {
  height: 60px;
  color: #134db2;
}
table tbody tr {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
table tbody tr:last-child {
  border: 0;
}
table tr > *:first-child{ padding-left:2em; }
table tr > *:last-child{ padding-right:2em; }
tbody tr {
  line-height: 1.2;
}

/* ---  column  --- */

table.column th{
  border-right: 2px solid #00b9e9;
  text-align: right;
  color: #134db2;
}

/* ---  style tabel  --- */

table.highlighting tbody tr:hover {
  color: #fff;
  background-color: #00b9e9;
  cursor: default;
}
table.highlighting thead tr:hover {
  cursor: default;
}
table.color-header.highlighting tbody tr:hover:nth-child(even) {
  background-color: #00b9e9;
}

/* ---  style tabel  --- */

table.color-header th{
  background: #134db2;
  color: #fff;
  font-size: 1.1em;
  line-height: 1.2;
  font-weight: 500;
}
table.color-header thead{
  border-bottom: 4px solid #00b9e9;
}
table.color-header tbody tr:nth-child(even) {
  background-color: rgba(0,0,0,0.02);
}
table.color-header.column th{
  border-bottom: 1px solid rgba(255,255,255,0.16);
  border-right: 2px solid #00b9e9;
  text-align: right;
}
table.color-header.column{
    border-spacing: 0;
    border-collapse: separate;
}
table.color-header.column th:last-child{
  border-bottom: none;
}

table.color-all {
  background: #134db2;
  color: #fff;
}
table.color-all tr{
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
table.color-all tr:last-child{
  border-bottom: none;
}
table.color-all th{
  font-size: 0.9em;
  text-transform: uppercase;
  color: #00b9e9;
  line-height: 1.2;
  font-weight: 500;
}
table.color-all thead{
  border-bottom: 2px solid #00b9e9;
}



/* ////////////////////////////////////////////////////   STYLING   ////////////////////////////// */
/*
           ######  ######## ##    ## ##       #### ##    ##  ######
          ##    ##    ##     ##  ##  ##        ##  ###   ## ##    ##
          ##          ##      ####   ##        ##  ####  ## ##
           ######     ##       ##    ##        ##  ## ## ## ##   ####
                ##    ##       ##    ##        ##  ##  #### ##    ##
          ##    ##    ##       ##    ##        ##  ##   ### ##    ##
           ######     ##       ##    ######## #### ##    ##  ######
*/

table[class*="bg-"] *  { border-color:rgba(255,255,255,0.25) !important; color: #fff !important; }
table[class*="bg-"] th { border-color:rgba(255,255,255,1) !important; }

table[class*="bg-"], thead[class*="bg-"], tbody[class*="bg-"],
    tr[class*="bg-"], th[class*="bg-"], td[class*="bg-"] { color:#fff; }



/* ////////////////////////////////////////////////////   SECTION   ////////////////////////////// */
/*
          #### ##    ## ########  #### ##     ## #### ########  ##     ##    ###    ##
           ##  ###   ## ##     ##  ##  ##     ##  ##  ##     ## ##     ##   ## ##   ##
           ##  ####  ## ##     ##  ##  ##     ##  ##  ##     ## ##     ##  ##   ##  ##
           ##  ## ## ## ##     ##  ##  ##     ##  ##  ##     ## ##     ## ##     ## ##
           ##  ##  #### ##     ##  ##   ##   ##   ##  ##     ## ##     ## ######### ##
           ##  ##   ### ##     ##  ##    ## ##    ##  ##     ## ##     ## ##     ## ##
          #### ##    ## ########  ####    ###    #### ########   #######  ##     ## ########
*/

/* ---  indywidualne treści tabel  --- */

table.offer img { width: 32px; }

table.offer td:nth-child(1), table.offer th:nth-child(1) { width: 25%; }
table.offer td:nth-child(2), table.offer th:nth-child(2) { width: 15%; }
table.offer td:nth-child(3), table.offer th:nth-child(3) { width: 30%; }
table.offer td:nth-child(4), table.offer th:nth-child(4) { width: 15%; text-align: center; }
table.offer td:nth-child(5), table.offer th:nth-child(5) { width: 15%; text-align: right; }

table.offer tbody tr td:nth-child(1):before { content: "Date"; }
table.offer tbody tr td:nth-child(2):before { content: "Order ID"; }
table.offer tbody tr td:nth-child(3):before { content: "Name"; }
table.offer tbody tr td:nth-child(4):before { content: "Available"; }
table.offer tbody tr td:nth-child(5):before { content: "Price"; }

table.offer tbody tr td:before{ display:block; position: absolute; left:2000px; }

/* --- */

table.o-firmie td:nth-child(1), table.o-firmie th:nth-child(1) { width: 30%; }
table.o-firmie td:nth-child(2), table.o-firmie th:nth-child(2) { width: 70%; }



/* ////////////////////////////////////////////////////   SECTION   ////////////////////////////// */
/*
          ########  ########  ######  ########   #######  ##    ##  ######  #### ##     ## ########
          ##     ## ##       ##    ## ##     ## ##     ## ###   ## ##    ##  ##  ##     ## ##
          ##     ## ##       ##       ##     ## ##     ## ####  ## ##        ##  ##     ## ##
          ########  ######    ######  ########  ##     ## ## ## ##  ######   ##  ##     ## ######
          ##   ##   ##             ## ##        ##     ## ##  ####       ##  ##   ##   ##  ##
          ##    ##  ##       ##    ## ##        ##     ## ##   ### ##    ##  ##    ## ##   ##
          ##     ## ########  ######  ##         #######  ##    ##  ######  ####    ###    ########
*/

/* ---  responsywna  --- */

@media screen and (max-width:768px) {
  table.responsive { display: block; }
  table.responsive > *, table.responsive tr, table.responsive td, table.responsive th { display: block; }
  table.responsive thead { display: none; }
  table.responsive tbody tr { height: auto; padding: 0; }
  table.responsive tbody tr td { padding: 0.4em 1.2em; padding-left: 40% !important; overflow: visible; text-align: left !important; }
  table.responsive tbody tr td{ display:block; text-align: left; width: 100% !important; }
  table.responsive tbody tr td:first-child { padding-top: 2em !important; }
  table.responsive tbody tr td:last-child { padding-bottom: 2em !important; }
  table.responsive tbody tr td:before {
    font-size: 0.7em;
    color: #134db2;
    line-height: 1.2;
    font-weight: 700;
    text-align: right;
    text-transform: uppercase;
    width: 40%;
    top: 50%;
    left: 1em;
    padding-right: 3em;
    transform: translate(0, -50%);
  }
  table.responsive tbody tr td:first-child:before { transform: translate(0, calc(-50% + 1.2em)); }
  table.responsive tbody tr td:last-child:before { transform: translate(0, calc(-50% - 1.2em)); }

  /* ---  kolumnowe  --- */
  table.responsive.column tr > * { text-align: center !important; padding: 0.2em 1.5em !important; border-right: none; }
  table.responsive.column tr > *:first-child { padding-top: 1em !important; }
  table.responsive.column tr > *:last-child { padding-bottom: 1em !important; }
  table.responsive.column.color-header tr > * { padding: 0.5em 1.5em !important; }

  /* ---  style tabel  --- */
  table.responsive.color-all tbody tr td:before{ color: #00b9e9; }
  table.responsive.color-all tbody tr:hover td:before{ color: #134db2; }
}



/* ////////////////////////////////////////////////////   SECTION   ////////////////////////////// */
/*
           ######  ########  ######  ######## ####  #######  ##    ##
          ##    ## ##       ##    ##    ##     ##  ##     ## ###   ##
          ##       ##       ##          ##     ##  ##     ## ####  ##
           ######  ######   ##          ##     ##  ##     ## ## ## ##
                ## ##       ##          ##     ##  ##     ## ##  ####
          ##    ## ##       ##    ##    ##     ##  ##     ## ##   ###
           ######  ########  ######     ##    ####  #######  ##    ##
*/

.title .section-title + .table {
  padding-top: 3% !important;
}

/* --------------------  TABLE (inner container)  ---------------------- */

.table{ padding:5% 1%; }
.table.w-full{ padding:2%; }


/* -------------------------  Table Section  -------------------------- */

.table > div{
  display: flex;
}
.table > div > div{
  position: relative;
  padding: 30px 4vw;
  flex: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.table > div > div > *{
  max-width: 100%;
}

/* -------------------------  Table Content  -------------------------- */

.table .header > span{
  background: rgba(39,46,72,0.75);
  padding: 0.4em 2em 0.5em 2em;
  border-radius: 100px;
  font-family: Roboto slab;
  font-weight: 500;
  font-size: 0.7em;
  margin-top: 0.6em;
  margin-right: auto;
  display: inline-block;
}
.table .header h1, .table .header h2, .table .header h3, .table .header h4{
  color:#272e48 !important;
}

.table > div > div.icon{
  background-size: 120px 120px;
  background-position: 3vw 50%;
  background-repeat: no-repeat;
  min-height: 200px;
}
.table > div > div.icon > *{
  margin-left: calc(120px + 2vw) !important;
  max-width: calc(100% - 120px)
}

.table ul{
  padding-left: 0;
  margin: 0;
}
.table li{
  margin-top: 0.6em !important;
}
.table li:first-of-type{
  margin-top: 0 !important;
}


/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 1280px) { /*----------  HD+  ----------------*/
  .table.w-full { padding:6% 4%; }
}
@media only screen and (max-width: 1250px) { /*----------  HD  -----------------*/
  .table { padding:6% 3%; }
}
@media only screen and (max-width: 1200px) { /*----------  DESKTOP  ------------*/
  .table, .table.w-full { padding:6% 4%; }
}
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .table, .table.w-full{ padding:8% 5%; }

  .table > div { flex-direction: column; margin-top: 40px; }
  .table > div > div { flex: auto; }
  .table .last{ border-right: none; border-bottom-width: 10px; border-bottom-style: solid;}
}
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
  .table, .table.w-full{ padding:10% 6%; }
}
@media only screen and (max-width: 480px)  { /*----------  XS  -----------------*/
  .table > div > div{ padding: 20px 30px; }
  .table > div > div.icon{
    background-size: 80px 80px;
    background-position: 20px 50%;
    min-height: 120px;
  }
  .table > div > div.icon > *{ margin-left: 80px !important; }
}



/* ////////////////////////////////////////////////////   SECTION   ////////////////////////////// */
/*
          ########  ########  ####  ######  ######## ##       ####  ######  ########
          ##     ## ##     ##  ##  ##    ## ##       ##        ##  ##    ##    ##
          ##     ## ##     ##  ##  ##       ##       ##        ##  ##          ##
          ########  ########   ##  ##       ######   ##        ##   ######     ##
          ##        ##   ##    ##  ##       ##       ##        ##        ##    ##
          ##        ##    ##   ##  ##    ## ##       ##        ##  ##    ##    ##
          ##        ##     ## ####  ######  ######## ######## ####  ######     ##
*/

/* -------------------------  Individual  -------------------------- */

.table > div:nth-of-type(5n+1) { background: #425c8e; }
.table > div:nth-of-type(5n+2) { background: #395283; }
.table > div:nth-of-type(5n+3) { background: #2d4573; }
.table > div:nth-of-type(5n+4) { background: #213762; }
.table > div:nth-of-type(5n+5) { background: #182e57; }

.table .last{ border-right: 10px solid white; }

.table > div:nth-of-type(5n+1) .last { border-color: #00b9e9; }
.table > div:nth-of-type(5n+2) .last { border-color: #3ef57c; }
.table > div:nth-of-type(5n+3) .last { border-color: #ffc25e; }
.table > div:nth-of-type(5n+4) .last { border-color: #05c193; }
.table > div:nth-of-type(5n+5) .last { border-color: #497efe; }

.pricelist p.price{
  font-family: Roboto slab;
  font-size: 2em;
  font-weight: 600;
  margin-top: 20px;
}
.pricelist p.price span{
  font-size: 0.4em;
  color: #272e48;
}



/* ////////////////////////////////////////////////////   SECTION   ////////////////////////////// */
/*
          ########     ###    ##    ## ######## ########
          ##     ##   ## ##   ###   ## ##       ##     ##
          ##     ##  ##   ##  ####  ## ##       ##     ##
          ########  ##     ## ## ## ## ######   ########
          ##     ## ######### ##  #### ##       ##   ##
          ##     ## ##     ## ##   ### ##       ##    ##
          ########  ##     ## ##    ## ######## ##     ##

                      ---------------------

          ######## #### ######## ##       ########   ######
          ##        ##  ##       ##       ##     ## ##    ##
          ##        ##  ##       ##       ##     ## ##
          ######    ##  ######   ##       ##     ##  ######
          ##        ##  ##       ##       ##     ##       ##
          ##        ##  ##       ##       ##     ## ##    ##
          ##       #### ######## ######## ########   ######
*/

/* -------------------------  Baner properties (fields)  -------------------------- */

.fields{
  margin-top:2em;
}
.fields > div{
  padding:0.8em;
  border-top:1px solid rgba(255,255,255,0.2);
}
.fields > div:last-of-type{
  border-bottom:1px solid rgba(255,255,255,0.2);
}
.fields span{
  color:#00b9e9;
  font-weight:bold;
}

/* --------------------  ikony: fields  ---------------------- */

*[class*="ico-field-"] {
	background-size: 2rem;
	background-repeat: no-repeat;
	background-position: 20px 50%;
	padding-left: calc(2rem + 40px) !important;
}

.ico-field-category{ background-image:url(../../img/icons/field/ico-category.png); }
.ico-field-price{ background-image:url(../../img/icons/field/ico-price.png); }
.ico-field-time{ background-image:url(../../img/icons/field/ico-time.png); }
.ico-field-exam{ background-image:url(../../img/icons/field/ico-exam.png); }
.ico-field-certificate{ background-image:url(../../img/icons/field/ico-certificate.png); }