@font-face {
    font-family: 'Ubuntu Light';
    src: url('../fonts/ubuntu-light-webfont.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu Bold';
    src: url('../fonts/ubuntu-bold-webfont.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu Medium';
    src: url('../fonts/ubuntu-medium-webfont.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.columns {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items:flex-start;
    align-content: flex-start;
    gap: 0px;
    column-gap: 0px;
    row-gap: 0px;
}

.columnsCol {
    display:flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content:space-between;
    justify-content: space-between;
    gap: 0px;
    column-gap: 0px;
    row-gap: 0px;
}

.columnCzy {

}

.columnPhone {
    display: inline-block;
    width: inherit;
    font-family: 'Ubuntu Light',Arial;
    font-weight: 300;
    font-size:1.3vw;
    position: absolute;
}

.phone1m {
    font-size:6.6vw;   
    font-family: 'Ubuntu Light',Arial;
    font-weight: 300;
    color:#72C5ED;
}

.columnText {
    position: relative;
}

.phone1 {
   color:#72C5ED;
}

.columnsMenu {
    justify-content: space-between;
}

.is-1 {
   width: 10%;
}

.is-10 {
    width: 80%;
 }

.o {
    opacity:0;
}


html,body {
    width:100%;
    margin: 0;
    padding:0;
    overflow-x:hidden;
}

h1,h2,p {
    font-family: 'Ubuntu Light',Arial;
    font-weight: 300;
    line-height: 150%;
}

h1.dlaczego {
   font-family: 'Ubuntu Light',Arial;
   font-size:7vw;
   font-weight: 300;
   color:#F8C34E;
   margin:2.5vw 0 0 -.6vw;
   padding:0px;
}

h2.wszystko {
    font-family: 'Ubuntu Bold';
   font-size:4.4vw;
   font-weight: bold;
   color:#241B1C;
   margin:-3.6vw 0 0 0;
}

.mvw25 {
    margin-bottom: 4vw !important;
}

h1.ale {
    font-family: 'Ubuntu Light',Arial;
    font-weight: 300;
    font-size:7vw;
    color:#72c5ed;
    margin:2.5vw 0 0 -.2vw;
    padding:0px;
 }

 h2.wszystko2 {
    font-family: 'Ubuntu Bold';
   font-size:4.4vw;
   font-weight: bold;
   color:#241B1C;
   margin:-3.2vw 0 0 0;
}

h1.jak {
    font-family: 'Ubuntu Light',Arial;
    font-size:5.5vw;
    font-weight: 300;
    color:#fff;
    margin:2.5vw 0 0 -.2vw;
    padding:0px;
 }

 h2.wszystkogra {
    font-family: 'Ubuntu Light',Arial;
   font-size:5.6vw;
   font-weight: 300;
   color:#241B1C;
   margin:-3.2vw 0 0 0;
}

h2.wszystkogra .bold {
    font-family: 'Ubuntu Bold';
   font-weight: bold;
}

.columnsCol {
    margin-left:6vw;
    margin-top:6.6vw;
}

h1.czy {
    font-family: 'Ubuntu Light',Arial;
    font-size:3.5vw;
    font-weight: 300;
    color:#72C5ED;
    margin:0 0 1.5vw -.1vw;
    padding:0px;
}

h1.czy2 {
    margin:5vw 0 0 -.1vw !important;
}

h2.wszystkoGra {
    font-family: 'Ubuntu Bold';
   font-size:4.4vw;
   font-weight: bold;
   color:#241B1C;
   margin:-4.9vw 0 0 0;
}

h2.wszystkoGra .gra {
    font-family: 'Ubuntu Bold';
   font-size:6.4vw;
   font-weight: bold;
   color:#F8C34E;
}

p.shapeX {
    text-align:right;
    margin-top:50px;
}


p.max60 {
    width:66%;
    margin-top:35px;
    margin-bottom:35px;
}

p.max62 {
    width:66%;
    margin-top:35px;
    margin-bottom:0px;
}

p.max63 {
    width:66%;
    margin-top:15px;
    margin-bottom:0px;
}

#header {
    background-color: #fff;
    margin-top:0px;
  }

#despencil {
    text-align: right;
}

#pencil {
    display: inline-block;
    margin-top:68px;
    right:10px;
    position:relative;
}

#colPencil {
    text-align: right;
}

#menuRightTop {
    background-color: #fff;
    width:400px;
    text-align: right;
}

#logoTop {
    width:494px;
    background-color: #72C5ED;
    height:137px;
}

#topMenu,.columnsSections {

}


.columns {
    margin:0px !important;
}

#section2 {
    padding:0px !important;
    margin:0px !important;
}

#logo {
    position:relative;
    margin-top: 4px;
}

#logoT {
    margin-top:66px;
    margin-left:45px;
}

h1.logo {
    color:#fff !important;
    font-size:20px;
    text-align: center;
}

.gray {
    color:#333;
}

#footer {
    background-color: #333 !important;
    padding-top:50px;
    padding-bottom:60px;
    font-family: 'Roboto', sans-serif;
}

#footerEls {
    display: flex;
    flex-direction: row;
    justify-content:flex-start;
}

#logo {
    width:200px;
    height: inherit;
}

#menuRight {
  color:#fff;
  width:500px;
  height: inherit;
  font-size:19px;
}

#menuRight #menuCopy {
  font-size:14px;
  color:#9B999E;
  font-weight: 400;
  width: 200px;
  position:relative;
  top:10px;
  left:27px;
}

#menuRight .fMenu {
   font-weight:900;
   color:#fff;
   font-size:19px;
   margin:0px 20px;
   text-decoration: none;
}

#section2 {
    background-color: #72C5ED;
}

#menuRightTop {
    margin-top:70px;
}

#menuTop {
   display: flex;
   flex-direction: row;
   position:relative;
   left:-20px;
}

.tMenu {
    font-family: 'Ubuntu Bold';
    font-weight: 900;
    font-size:18px;
    display: inline-block;
    color:#72C5ED;
    margin-left:50px;
    letter-spacing: 2px;
    text-decoration: none;
}

.active {
     color:#000;
}

.columnPencils {

}

.center-r {
    text-align: center;
    position:relative;
    left:18%;
}

.is-shown-mobile {
    display:none;
}

.mobileMenu {

}

.bluebg {
    background-color: #72C5ED;
}

#topMobileMenu {
    height:63vw;
    background-image: url('../images/p2.png');
    background-repeat: no-repeat;
    background-position: 0% 100%;
    background-size: contain;
}

.rowsFlex {
   display: flex;
   align-content:space-between;
   justify-content: space-between;
}

.row {
    width:50%;
    height: inherit;
    padding-top:6vw;
}

#row2 {
    text-align: right;
}

.tMenu2 {
    font-family: 'Ubuntu Bold';
    font-weight: 900;
    font-size:18px;
    display: inline-block;
    color:#fff;
    letter-spacing: 2px;
    text-decoration: none;
    margin-bottom:3vw;
}

.active2 {
    color:#000 !important;
}


@media (max-width: 1350px) {
    .columnsSections {
        padding:0% 5%;
    }

    #shape1 {
        width:35px;
        height:35px;
    }
}

@media (max-width: 1350px) {
    .is-1 {
        display:none;
    }

    .is-10 {
        width:100%;
        padding:0% 5%;
    }

    .columnPencils {
       width:40%;
    }    

    .columnText {
        width:60%;
    }

    .columnPencils img {
        width:100%;
        height: auto;
    }

    #logoTop {
        width:40%;
    }

    #menuRightTop {
    }
}

@media (max-width: 1000px) {
    #logoT {
        width:132px;
        height:auto;
    }
     .max62 {
        width:90% !important;
     }
     .center-r {
        left:-5%;
        text-align: right;
     }

}



@media only screen and (max-width: 800px) {
    h1.ale {
        font-size:13vw;
        margin:4vw 0 0 -.2vw;
        padding:0px;
     }
    
     h2.wszystko2 {
       font-size:8.4vw;
       margin:-6.4vw 0 0 0;
    }
    
    h1.jak {
        font-size:10.5vw;
        margin:4vw 0 0 -.2vw;
        padding:0px;
     }
    
     h2.wszystkogra {
       font-size:10.6vw;
       margin:-6.6vw 0 0 0;
    }

    .mvw25 {
        margin-bottom: 8vw !important;
    }    
    
    h1.czy {
        font-size:7vw;
        margin:0 0 0 -.1vw;
        padding:0px;
    }
    
    h1.czy2 {
        margin:5vw 0 2.2vw -.1vw !important;
    }
    
    h2.wszystkoGra {
       font-size:8.8vw;
       margin:-8.9vw 0 0 0;
    }
    
    h2.wszystkoGra .gra {
       font-size:12.4vw;
    }


    h1.dlaczego {
        font-size:13vw;
        margin:2.5vw 0 0 -.6vw;
        padding:0px;
     }
     
     h2.wszystko {
        font-size:8vw;
        margin:-6vw 0 0 0;
     }
     







    .is-hidden-mobile {
       display: none;
    }

    .is-shown-mobile {
        display: flex;
    }

    .columnsSections {
       margin:0px 15px !important;
    }

    p.max60 {
        width:95% !important;
    }

    #menuRight {
        width:100%;
    }

    #menuRight #menuFooter {
        width:100%;
        text-align: center;
    }

    #menuRight #menuCopy {
        width:100%;
        text-align: center;
        left:-72px;
        font-size:14px;
    }

    #menuRight {
        font-size:15px;
      }
      
      #menuRight .fMenu {
         font-weight:900;
         color:#fff;
         font-size:15px;
         margin:0px 20px;
         text-decoration: none;
      }
}

@media only screen and (max-width: 400px) {
    .tMenu2 {
        font-size:14px;
    }

    #logoT2 {
        transform: scale(.9);
        transform-origin: 0% 0%;
    }

    #menuRight .fMenu {
        font-size:12px;
        margin:0px 10px;
        text-decoration: none;
     }

    #menuRight #menuCopy {
        width:100%;
        text-align: center;
        left:-44px;
        font-size:12px;
    }
}