.c1 { color:#f28e0f;}
.bckg-c1 {background-color:#FFF0DB;}
.bg-gray {
    background-color:#fafafa;
}
.paski {
    background: url(https://forumlogopedy.pl/media/cache/resolve/origin/uploads/66a/b2f/66ab2fe4a4f0b176502864.png) #ffffff;
}
.paski-c1 {
    background: url(https://forumlogopedy.pl/media/cache/resolve/origin/uploads/66a/b2f/66ab2fe4a4f0b176502864.png) #FFF0DB;
}

.box-shadow {
	box-shadow: 0px 2px 16px rgba(70, 70, 70, 0.3);
}

a.c1 {
	color:#f28e0f !important;
		transition:all 0.3s linear;
		text-decoration:none;
		&:hover {
			color:darken(#f28e0f,10%);
			text-decoration:none;
		}
}

.fs20 {
	font-size:20px;
}
.fs24 {
	font-size:24px;
}
.fw400 {
	font-weight:400;
}

.fw500 {
	font-weight:500;
}

.navbar-brand img {
	max-width: 100%;
}

.text-left {
    text-align: left !important;
}

.block-section .container-lg{
  max-width: 100%!important
}

/*
.container-sm,
.container-md,
.container-lg,
.container-xl {
      max-width: 100% !important;
      position: relative;
      z-index: 1;
}

@media (min-width: 1200px){
	header.container-lg, .navbar .container-lg, footer .container-lg {max-width: 1300px !important;}
}
*/

.block-section {
	margin-bottom: 0px !important;
}

.lp {
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #111;
  width: 100%;

  @media (min-width: 1200px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
      max-width: 1300px;
      position: relative;
      z-index: 1;
    }
  }


  .container-fluid {
    position: relative;
    z-index: 1;
  }

  h1,
  h3,
  h4,
  h5,
  h6 {
    text-transform: none !important;
    color: #111;
  }
  a:link,
  a:visited,
  a:hover,
  input {
    outline: none;
    img {
      border: none;
    }
  }

  h3 {
    color: #f28e0f;
    font-size: 32px;
  }
}

/* INTRO */

#intro {
  padding: 40px 0px 50px 0px;

  h1 {
    color: #f28e0f;
  }
  h2 {
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
  }
}

.dsw {
  display: block;
  text-align: center;
  border: 1px solid #f28e0f;
  color: #f28e0f;
  padding: 10px;
  transition: all 0.3s linear;
  border-radius: 10px;
  text-decoration: none;

  &:hover {
    background-color: #f28e0f;
    color: #fff;
  }
}

#autorzy {
  position: relative;
  padding-bottom: 50px;

  .autorzy-container {
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
    margin: auto;

    .owl-dots {
      padding-top: 10px;
      .owl-dot {
        outline: none;
        border: none;
        span {
          background: #d7deed;
        }
      }
      .owl-dot.active {
        span {
          background: #f28e0f;
        }
      }
    }

    .ow-jot-prevBtn2,
    .ow-jot-nextBtn2 {
      position: absolute;
      transform: translateY(-50%);
      top: 50%;
      cursor: pointer;
      z-index: 99;
      path {
        fill: #f28e0f;
      }
      opacity: 0.6;
    }

    .ow-jot-prevBtn2 {
      left: -10px;
    }
    .ow-jot-nextBtn2 {
      right: -10px;
    }
    .ow-jot-prevBtn2:hover,
    .ow-jot-nextBtn2:hover {
      opacity: 1;
      svg {
        transition: all 0.2s ease-in-out;
        transform: scale(1.4);
      }
      path {
        transition: all 0.4s ease-in-out;
        opacity: 1;
        fill: #f28e0f;
      }
    }
  }

  .autor {
    padding: 0px 20px;
  }
  .autor-image {
    max-width: 295px;
    margin: auto;
    margin-bottom: 20px;
    border-radius: 18px;
    overflow: hidden;
  }
  .autor-name {
    color: #111;
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .autor-bio {
    font-size: 14px;
    font-weight: 300;
  }
}

.wiecejhidden {
  display: none;
}
.wiecej-l {
  a {
    .c1;
    .fw500;
  }
}

#numbers {
  border-top: 1px solid #f3f3f3;
  .icon-bckg {
    background-color: #ffffff;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 50%;

    img {
      max-width: 32px;
    }
  }
  .number-value {
    font-weight: 500;
    padding-bottom: 5px;
  }
  .number-side {
    padding-top: 5px;
	text-align: left;
  }
}
#numbers .material-symbols-outlined {
  top: 4px;
  position: relative;
}

.basic-course-info {
  border: 1px solid #333;
  padding: 10px 5px 5px 20px;
  border-radius: 8px;
  display: inline-block;
}

.basic-course-item {
  font-size: 15px;
  position: relative;
  padding-left: 28px;
  margin-bottom: 5px;
  display: inline-block;
  margin-right: 15px;
}
.basic-course-item span {
  font-size: 20px;
  position: absolute;
  left: 0px;
  top: 1px;
}
.basic-course-includes-title {
  font-size: 17px;
  margin-bottom: 5px;
}

#cennik-section {
  background: linear-gradient(#f28e0f 0%, #ffffff 60%, #ffffff 60%);

  .produkt {
    background-color: #fff;
    border: 3px solid #ddd;
    border-radius: 16px;
    padding: 30px;

    &.premium {
      border: 3px solid #f28e0f;
      background: linear-gradient(lighten(#f28e0f, 60%), lighten(#f28e0f, 90%));
      .box-shadow;
      position: relative;

      .premium-badge {
        position: absolute;
        top: 20px;
        right: 20px;
        background-color: #fff;
        color: #f28e0f;
        padding: 10px 20px;
        border-radius: 7px;
        border: 1px solid #f28e0f;
        font-size: 14px;
        line-height: 17px;
        font-weight: bold;
        text-transform: uppercase;
        box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
      }

      .premium-badge span {
        color: #000;
      }
    }
  }

  .cena-cont {
    font-size: 40px;
    font-weight: 500;
  }

  .included-list {
    margin: 0;
    padding: 0;
    list-style-type: none;

    li {
      position: relative;
      padding-left: 30px;
      font-size: 14px;
      margin-bottom: 5px;

      .material-symbols-outlined {
        position: absolute;
        left: 0px;
        color: #bbb;
        &.c1 {
          color: #f28e0f !important;
        }
      }
    }
  }
}

.kup-teraz {
  display: block;
  text-align: center;
  border: 1px solid #6F097A;
  padding: 10px;
  background-color: #6F097A;
  color: #fff;
  transition: all 0.3s linear;
  text-decoration: none !important;
  border-radius: 10px;

  &:hover {
    background-color: transparent;
    color: #6F097A;
  }
}

.mw200,
.mw300 {
  max-width: 300px;
  margin: auto;
}

.ah3 {
  text-transform: uppercase;
  color: #f28e0f;
  font-size: 20px;
}

.mw800 {
  max-width: 800px;
  margin: auto;
}

/* PROGRAM */

.program-cykl {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #f28e0f;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-bottom: 5px;
  text-align: left;
}

.cykl-active {
  color: #fff;
  background-color: #f28e0f;
}

.cykl-inside {
  padding: 30px;
  border: 1px solid #f28e0f;
  padding: 30px;
  -webkit-border-radius: 10px;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius: 10px;
  -moz-border-radius-topleft: 0;
  border-radius: 10px;
  border-top-left-radius: 0;
  text-align: left;

  ul {
    li {
      margin-bottom: 10px;
    }
  }
}

.cykl-title {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 20px;
  .c1;
}

.video-wrapper {
  position: relative;
  overflow: hidden;

  /* Apply 'padding-top' for correct aspect ratio */
  padding-top: 56.25%; /* 16:9 aspect ratio */
  /* padding-top: 42.85%;  */ /* 21:9  aspect ratio */
  /* padding-top: 75%;     */ /*  4:3  aspect ratio */
  /* padding-top: 100%;    */ /*  1:1  aspect ratio */
  /* padding-top: 66.67%;  */ /*  3:2  aspect ratio */
  /* padding-top: 177.78%; */ /*  9:16 aspect ratio */
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border: 0;
}

#faq {
  .question {
    .c1;
    cursor: pointer;
    position: relative;
    margin-right: 30px;
    font-size: 18px;
  }
  .faq-mark {
    position: absolute;
    right: -30px;
    top: -2px;
    font-weight: 400;
    font-size: 40px;
    .c1;
  }
  .question:hover .faq-mark {
    color: darken(#f28e0f, 5%);
  }
  .answer {
    display: none;
    padding-top: 10px;
    color: #777;
  }
  .faq {
    padding: 20px 30px;
    border: 1px solid #f28e0f;
    background-color: #fff;
    border-radius: 12px;
    text-align: left;
    margin-bottom: 15px;
  }
}

#stopka {
  .links {
    a {
      display: block;
      margin-bottom: 10px;
    }
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0px 30px;
  }
  #intro {
    padding-bottom: 40px;

    h1 {
      font-size: 28px;
      line-height: 34px;
      padding-top: 20px;
    }
  }

  h3 {
    font-size: 26px !important;
    line-height: 30px;
  }

  .program-cykl {
    border-radius: 10px;
  }
}

.zobacz-ol a {
  display: inline-block;
  .c1;
  text-decoration: none;
  position: relative;
  padding-right: 25px;

  span {
    position: absolute;
    right: 0px;
  }
}

.dlaczego-part {
  padding: 20px;
  border-bottom: 1px solid #edeff2;
  border-radius: 3px;
  border-top: 6px solid transparent;

  &.dlaczego-here {
    box-shadow: 0px 1px 7px #d9d9d9;
    border-bottom: 0px;
    border-top: 6px solid #f28e0f;
  }

  .dlaczego-title {
    position: relative;
    padding-right: 30px;
    color: #f28e0f;
    margin-bottom: 5px;
    font-weight: bold;
    cursor: pointer;
    .dlaczego-arrow {
      position: absolute;
      right: 0px;
      -moz-transition: transform 0.5s;
      -webkit-transition: transform 0.5s;
      transition: transform 0.5s;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      span {
        display: flex;
        justify-content: center;
        line-height: 20px;
      }
    }

    .flip {
      transform: rotate(-180deg);
    }
  }
}

.img-rounded {
  border-radius: 12px;
}
.recenzja-autor {
  img {
    max-width: 60px;
    border-radius: 50%;
    oveflow: hidden;
  }
}
.autor-name {
  font-size: 15px;
  line-height: 20px;
  span {
    color: #777;
  }
}

#stopka {
  .stopka-links a {
    color: #111;
    text-decoration: none;
    margin: 10px;
    &:hover {
      color: #f28e0f;
    }
  }
  .icons-links a {
    color: #777;
    text-decoration: none;
    margin: 5px;
    font-size: 20px;
    &:hover {
      color: #f28e0f;
    }
  }
}

.gray-link {
  color: #777;
  text-decoration: none;
  &:hover {
    color: #111;
  }
}

#tematyka {
}
#tematyka .tematyka-col {
  border: 2px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
}
#tematyka .tematyka-col p {
  margin: 25px 20px;
}
#tematyka .tematyka-col-top {
  background-color: #f28e0f;
  color: #fff;
  font-weight: 500;
  padding: 25px 15px;
  text-align: center;
}
#tematyka .tematyka-col-top span.material-symbols-outlined {
  display: block;
  font-size: 30px;
  line-height: 30px;
  margin: 0 0 10px;
}

#nowoczesna-forma {
  border-top: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
}
.nowoczesna-forma-box {
  background-color: #fff;
  position: relative;
  padding: 15px 15px 15px 80px;
  margin: 0 0 20px;
}
.nowoczesna-forma-box p {
  margin: 0;
  font-weight: 300;
}
.nowoczesna-forma-box span.material-symbols-outlined {
  position: absolute;
  left: 15px;
  top: 19px;
  width: 50px;
  height: 50px;
  border: 1px solid #eeeeee;
  padding: 9px 0;
  font-weight: 300;
  font-size: 30px;
  line-height: 30px;
  text-align: center;
  color: #f28e0f;
}
.nowoczesna-forma-title {
  font-size: 19px;
  line-height: 25px;
  font-weight: 400;
  margin: 0 0 10px;
}

#smart {
}
#smart span {
  font-style: italic;
  border-left: 2px solid #f28e0f;
  padding: 0 0 0 20px;
  display: block;
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 25px;
  text-align: left;
}
#smart .smart-list {
  padding: 0 0 0 40px;
  text-align: left;
}
#smart .smart-list li {
  margin: 0 0 15px;
}

#dlaczego-warto {
}
.dlaczego-warto-list {
}
.dlaczego-warto-list ul {
  list-style-type: none;
}
.dlaczego-warto-list ul li {
  margin: 0 0 25px;
  position: relative;
  padding-left: 40px;
}
.dlaczego-warto-list ul li:before {
  content: "";
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  font-family: Material Symbols Outlined;
  font-size: 21px;
  line-height: 27px;
  color: #f28e0f;
}

#recenzje span.material-symbols-outlined {
  color: #f28e0f;
  top: 3px;
  position: relative;
}


.dlaczego-part {
    position:relative;
    overflow:hidden;
}

.wkrotce {
    display:inline-block;
    color:#999;
    font-size:10px;
    line-height: 10px;
    border:1px solid #999;
    padding:7px 10px 5px 10px;
    margin-bottom:5px;
    text-align: center;
    border-radius:4px;
}

.bottom-navbar {
	background-color: #FAFAFA !important;
  	padding: 0;
}

.footer {background-color: #fff0db !important;
  margin-top: 40px;
  padding-top: 64px;
  color: #111 !important;}

.footer .link {
  color: #111 !important;
  transition: color .3s ease;
  font-size: 14px;
  font-weight: 400;
  font-family: Poppins,sans-serif;
  margin-bottom: 16px;
}
.footer .footer-nav-box .header {
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
  font-family: Poppins,sans-serif;
  color: #111 !important;
}