@charset "utf-8";
/* CSS Document */

body {
  margin: 0;
  font-family: 'Work Sans', sans-serif;
  }

.main-cont {
    min-height: 100%;
    /*position: relative;*/
    }

.cont_main_text {
    padding: 20px;
}

footer {
    margin-top: 60px;
    margin-bottom: 60px;
}
.topnav {
  overflow: hidden;
  /*background-color: #333;*/
}

.topnav.responsive{
    
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 17px;
  
}

.topnav a.logo {
    text-align: left;
    max-height: 100px;
}

img.logo {
    max-height: 60px;
}

img.main-banner {
    width: 100%;
}

.mobile-show {
    display:none;
}

.desktop-show {
    display:block;
}

.img-left {
    position: absolute;
    width: 35%;
    left: 25%;
    bottom: 20%;
    transform: translate(-50%, -50%);
    line-height: 140%;
    font-size: 26px;
}

.topnav a:not(:first-child) {
    float: right;
    margin-top: 20px;
    margin-right: 20px;
}

.topnav a.hamburger {
    color: black;
}

.topnav a:hover {
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
  font-size: 21px;
}
/* sekcje */
.section-title {
    font-size: 36px;
    height: 80px;
}

.section-title.offer {
    background: url(../img/logo_simple.jpg) no-repeat center left;
    background-size: contain;
    height: 40px;
}

.offer-border {
    border-left: solid #000;
    border-left: 0 5px;
}

.section-img {
    display: block;
    float: left;
}
.section-img img {
    display: block;
}

#kontakt {
    background-color: #162E52;
    color: white;
}
.section-map-img {
    float: left;
    width: 60%;
    height: 460px;
}

.section-text {
    display: block;
    padding: 0px 5% 20px 450px;
    font-size: 22px;
    line-height: 180%;
}

.section-map-text {
    padding: 0px 5% 20px 0;
    font-size: 22px;
    width: 30%;
    float: left;
}

/* o mnie */
.section {
    /*margin: 80px 7% 80px 7%;*/
    padding: 80px 7% 80px 7%;
    overflow: auto;
}

@media screen and (max-width: 700px) {
    #omnie .section-img {
        display: none;
    }
    
    #omnie .section-text {
        padding: 0;
        font-size: 18px;
        font-weight: 400;
    }
    
    .section-title.offer {
        height: 30px;
    }
    
}

/* Oferta */
.offer-section {
    background-color: #EEEEEE;
    //padding-top: 0;
}

.offer-section .section-content {
    background-color: white;
}

.offer-section .section-text {
    padding: 5% 10%;
}

/* Obszary praktyki*/

.section-icons {
    width: 100%;
    display: block;
    -webkit-columns: 4 350px;
    -moz-columns: 4 350px;
    columns: 4 350px;
    
    -webkit-column-gap: 5%; /* Chrome, Safari, Opera */
    -moz-column-gap: 5%; /* Firefox */
    column-gap: 5%;
}

/* LOGO */
@media screen and (max-width: 700px) {
  a.logo {
    max-width: 60%;
    max-height: 100%;
  }

  img.logo {
      max-width: 100%;
  }
}
.topnav a img.logo_white {
      display:none;
}

.bottom-logo {
    background: url(../img/logo_simple.jpg) no-repeat center center;
    height: 60px;
    width: 60px;
    background-size: contain;
    margin:auto;
    margin-bottom:20px;
}
.bottom-text {
    text-align:center;
    text-transform: uppercase;
    font-weight: 600;
}

.h3 {
    font-size: 21px;
}

.h4 {
    font-size: 15px;
}
@media screen and (max-width: 700px) {
   body {
        width: 100%;
        font-weight: 400;
    }
    
    .mobile-show {
        display: block;
    }
    
    .desktop-show {
        display: none;
    }
    
    .topnav a:not(:first-child) {
        display: none;
    }
    
    .section-text {
        font-weight: 400;
        line-height: 140%;
        font-size: 18px;
    }
    
    .section-title {
        font-size: 28px;
        height:auto;
    }
    
    .section {
        padding-top: 0;
        padding-bottom: 40px;
    }
    
    .offer-section .section-content {
        background-color: #EEEEEE;
    }
    
    .offer-section .section-text {
        padding: 0;
    }
    
    .section-map-text {
        width: 100%;
        font-size: 18px;
        font-weight: 400;
    }
    
  .topnav a img.logo {
      display: block;
  }
  
  .topnav a.icon {
    float: right;
    display: block;
    margin: 2% auto;
  }
  
  div.ham {
    width: 35px;
    height: 4px;
    background-color: #172F55;
    margin: 5px 0;    
  }
  .topnav.responsive div.ham {
    background-color: white;
  }
  div.cent {
    display: block;
    margin: auto;
  }
  
  .topnav.responsive {
    background-color: #162E52;
    position: relative;
    padding-bottom: 20px;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    color: white;  
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive a img.logo {
      display:none;
  }
  
  .topnav.responsive a img.logo_white {
      display: block;
      max-height: 43px;
  }
  .topnav.responsive a.li_menu {
    margin: 10px 0;
  }
  
  img.main-banner {
    width: 100%;
    top:0;left:0; right:0; bottom:0;
  }

  .img-left {
      display:none;
  }
  
    .section-map-img {
    width: 100%;
    }
 
}

@media screen and (max-width: 1200px) {
   .img-left {
      display:none;
  }
}

@media screen and (max-width: 1400px) {
   .img-left {
      font-size:22px;
      bottom: 25%;
  }
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

p.flip-title{
    font-size: 28px;
    text-align: center;
}
.flip-item {
  display: inline-block;  
  width: 350px;
  margin: 0 0 180px 0; 
}

.flip-card {
  background-color: transparent;
  width: 350px;
  height: 350px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #EEEEEE;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #EEEEEE;
  color: black;
  font-weight: 300;
  transform: rotateY(180deg);
  font-size: 22px;
  text-align: justify;
}

@media screen and (max-width: 700px) {
    .offer-section.practice {
        padding-right: 0;
    }
    .flip-item {
        width: 90%;
        margin: 50px 0 100px 0; 
    }
    .flip-item img{
        max-width:100%;
    }
 
    .flip-card {
        width: 100%;
    }
    
    .flip-card-back {
        font-size: 18px;
    }
}
ul.dashed {
    list-style: none;
    padding-top: 0;
    margin-top: 0;
    padding-left: 0;
}

ul.dashed > li {
    margin-left: 15px;  
}

/* Prevent nested li's from getting messed up */
ul.dashed > li::before {
    content: "-";
    margin-left: -15px;
}