.oldbr-new{
    background-color: white;
    display: none;
}  

.oldbr-old{
    background-color: white;
    display: flex;
    flex-direction: row;
    padding: 50px;
        max-width: 1600px;
    margin: auto;
} 
.oldbr-old1{
    width: 40%;
    overflow: auto;
    padding-right: 20px;
}
.oldbr-old2{
        width: 50%;
    margin-left: 50px;
}
.oldbr-old img {
        width: 100%;
}

.firefox_only_show{display: none;}

@-moz-document url-prefix() {
    .firefox_hide{display: none;}
    .firefox_only_show{display: block;}
}





@media screen and (min-width: 0px) and (max-width: 600px) {
 .oldbr-old{
     flex-direction: column;
     padding: 15px;
} 
.oldbr-old1{
    width: 100%;
    padding-right: 0px;
 }
.oldbr-old2{
        width: 100%;
    margin-left: 0px;
}
    
}
@supports (display: grid) {
  .oldbr-new{
    display: block;
}  
    .oldbr-old{
    display: none;
} 
    
}

body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    line-height: 1.5;
    }

    a{
        color:inherit;
        text-decoration: none
}
    
    html{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;   
    }




.res-padd-1{
    padding-top:100px;
        padding-bottom: 100px;
    }
.res-padd-2{
    padding:20px;
}
.res-padd-3{
        padding-top: 35px;
        padding-bottom: 0px;
}
.res-padd-4{
        padding-bottom: 60px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
 
    .res-padd-1{
    padding-top:30px;
        padding-bottom: 30px;
    }
    .res-padd-2{
        padding: 0px;
}
    .res-padd-3{
        padding-top: 20px;
        padding-bottom: 20px;
}
    .res-padd-4{
        padding-bottom: 0px;
}
    
    .title0x2{
        text-align: left !important;
    }
    
    .title0x1{
        text-align: left !important;
    }
    
}

  
.timeline p {
        color: white;
}
.timeline ul {
        list-style-type: circle;
        padding-left: 20px;
}

.sheeap{
            border-bottom: solid #87d8ed;
    border-bottom-width: calc(100vh - 65px);
    width: 61%;
    position: absolute;
    border-left: solid 45vh white;
    z-index: -1;
    right: 0px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
   .sheeap{
    
    }
}
.ralelw{
    font-family: raleway;
}
.top h1{
    margin:0px !important;
        color: #33334f!important;
}
.top span{
     margin:0px !important;
        color: #33334f!important;
        margin-left: 7px !important;
}

.butonf{
    text-align: center;
}
.butonf button{
        border-radius: 30px;
    background-color: #009ddc;
    background: linear-gradient(90deg, rgba(119,200,238,1) 0%, rgba(153,150,253,1) 100%);
    border: none;
    padding: 17px;
    color: white;
    outline: none;
    width: 225px;
    font-size: 20px;
    margin-top: 50px;
    cursor: pointer;
        transition: 0.6s;
}
@media screen and (min-width: 601px) and (max-width: 1060px) {
    .butonf button{
        margin-bottom: 2vw;
        margin-right: 1vw;
        width: 18vw;
        font-size: 16px;
    }
}
@media screen and (min-width: 0px) and (max-width: 600px) { .butonf button{ width: 38vw; } }

.butonf_inner{
    background-color: white;
    color: #33334f;
    border-radius: 44px;
    padding: 11px;
    margin: -12px;
    transition: 0.6s;
}
.butonf_inner:hover{
    background-color: transparent;
    color: white;
}

.butonf_inner2{
    background-color: transparent;
    color: white;
    border-radius: 44px;
    padding: 11px;
    margin: -12px;
    transition: 0.6s;
}
.butonf_inner2:hover{
    background-color: white;
    color: #33334f;
}
.butonf button:hover{
    /*background-color: #2ec3ff;
    font-size: 21px;*/
        background: linear-gradient(270deg, rgba(119,200,238,1) 0%, rgba(153,150,253,1) 100%);
    transition: 0.6s;
    /*box-shadow: 0 19px 39px rgba(51,48,91,.1), 0 9px 13px rgba(0,0,0,.05);*/
  
}
    
    /*BOUNCING ARROW*/
    @-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
    i23 {
  display: block;
  color: #fff;
}
.arrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 60px; /*change with size of arrow to make sit on bottom */
/*   background-image: url(); */
/*   background-size: contain; */
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
    
    /*BOUNCING ARROW END*/

 
    .shape {
  position: relative;
  overflow: hidden;
  height: 80px;
}

.shape::before {
  border-radius: 100%;
  position: absolute;
      background-color: #f2f5ff;
  right: -200px;
  left: -200px;
  top: -200px;
  content: '';
  bottom: 0;
}

    .shapexc {
  position: relative;
  overflow: hidden;
  height: 80px;
  box-shadow: 0 -8px 0px rgb(255, 255, 255);
}

.shapexc::before {
  border-radius: 100%;
  position: absolute;
      background-color: white;
  right: -200px;
  left: -200px;
  top: -200px;
  content: '';
  bottom: 0;
}

    
       .shape2 {
  position: relative;
  overflow: hidden;
  height: 80px;
  box-shadow: 0 -8px 0px rgb(153, 150, 253);
}

.shape2::before {
  border-radius: 100%;
  position: absolute;
      background: rgb(153, 150, 253);
  right: -200px;
  left: -200px;
  top: -200px;
  content: '';
  bottom: 0;
}
    
    
    
    ul{
        list-style: none;
        padding-left: 0px;
    }
    .border1{
            border-top: solid 12px #92a0fa3d;
            /*border-top-color: rgba(207, 215, 223, 0.25);*/
            /*border-top-color: #92a0fa3d;*/
            width: 29%;
            float: left;
            margin-left: 25px;
    }
    
    .border12{
            border-top: solid 12px #92a0fa3d;
            /*border-top-color: rgba(207, 215, 223, 0.25);*/
            /*border-top-color: #92a0fa3d;*/
            width: 29%;
            float: left;
            
    }
    
    
	.bezozd {
		text-decoration:none !important;
	}
	

h1,h2,h3,h4,h5,h6 {font-family: Quicksand-Medium}
body {font-family: Quicksand-Regular}

.boldt{font-family: Quicksand-Medium}
    
/*NORMAL LARGE START*/
    
    .tytul1{
                color: #33334f;
            font-size: 26px;
    }
    
    .container2{
            text-align: left;
            padding-left: 25px;
        padding-right: 20px;
    }
    
    p{color: #49555f;}    
    
ul{font-size: 18px;}    
p{font-size: 16px;}
h1{font-size: 66px;}
h2{font-size: 72px;}
h3{font-size: 45px;}

 







    .flex-container {
      display: flex;
      flex-direction: row;

    }

    .flex-third {
        width: 33.333%;
        
    }

    .flex-half {
        width: 50%;
        
    }



    .res-image1{
        width:100%;
    }
 

    .res-padding1{
        padding-top:10vh;
    }

    
     .top {
      display: flex;
      flex-direction: row;
             height: 100vh;

    }
    
  .grid-container2 {
  display: grid;
  grid-template-columns: 50% 50%;
  padding: 20px;
  max-width:1600px;
  margin:auto;
      padding-top: 100px;
    padding-bottom: 100px;          
}
.grid-container2 > div {
  text-align: center;  
        padding: 20px;
}
.grid2c1 {
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;  
}
.grid2c2 {
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;
}
.grid2c3 {
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;
}
    
    .featurebox1{
         padding: 20px; /*background-color: white;  border-radius: 15px; width:45%;*/
        /*box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.1);*/
           /* box-shadow: 0px 0px 50px 3px rgba(0,0,0,0.1);*/
    }    

    .timep{
        
    padding-top: 18px;
    border-top: dotted 6px ghostwhite;
    color: white;   
        
    }
    



    
    f4:hover{
            transform: skewY(1Deg);
    }
    


    
/**** NORMAL LARGE END ****/   
    
    
 /* MEDIUM START */   
@media screen and (min-width: 601px) and (max-width: 1599px) {
    p{font-size: 16px;}
    h1{font-size: 4vw;}
    h2{font-size: 3.6vw;}
    h3{font-size: 45px;  font-weight: 400;  margin: 10px 0;}}

/*MEDIUM END*/ 
    
/* ***SMALL START*** */    
@media screen and (min-width: 0px) and (max-width: 600px) {
  
    p{ font-size: 18px; }
    h1{ font-size: 28px;}
    h2{ font-size: 38px;}
    h3{font-size: 35px;}
    

    


    
    .res-image1{
        
    object-fit: contain;
    width: 100%;

    }
    
    .res-padding1{
        padding-top:2vh;
    }
    
    .flex-container {
      display: flex;
      flex-direction: column;

    }

    .flex-third {
        width: 100%;
        text-align: center;
    }

    .flex-half {
        width: 100%;
        text-align: center;
    }
    .res-height1{
        max-height: 100vh;
    }
    .res-height2{
            height: 50%;
    }
    .res-padding{
        padding: 2em 1em;}
    
    .top {
    overflow: hidden;
    
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto ;
    padding: 10px;
    height:94vh;  
            padding-bottom: 0px;
    }
    .top > div {
  
    text-align: center;
    padding: 20px 0;
      
  
        
    }
    .topbt{
            align-self: self-end;
    }
        .grid-container2 {
  display: grid;
  grid-template-columns: 100%;
  padding: 10px;
                padding-top: 60px;
    padding-bottom: 60px;
}
.grid-container2 > div {
  text-align: center;  
}
.grid2c1 {
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;  
}
.grid2c2 {
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;
}
.grid2c3 {
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;
}
    
    
        .container2{
            text-align: center;
         
    }
    
    
    .featurebox1{
        text-align: left;
        padding: 20px;
        margin: 0px;
            padding-bottom: 70px;
        
        
    }
    

        .faq_box{
         padding-left:15px; padding-right:15px;  
    }
    
    }/* ***SMALL END*** */ 

    

    

    
    /*TIMELINE*/

    * {
    box-sizing: border-box;
}



/* The actual timeline (the vertical ruler) */
.timeline {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: #23bee2;
    top: 0;
    bottom: 0;
    left: 50.3%;
    margin-left: -3px;
}

/* Container around content */
.containerTABLE {
    padding: 0px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

/* The circles on the timeline */
.containerTABLE::after {
    content: '';
    position: absolute;
    width: 56px;
    height: 56px;
    right: -30px;
    background-color: white;
    border: 4px solid #23bee2;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
    background-image: url(/photo/logon22.png);
    background-size: contain;
        box-sizing: inherit;
}

/* Place the container to the left */
.leftTABLE {
    /*left: 0.3%;*/
}

/* Place the container to the right */
.rightTABLE {
    left: 50%;
}



    
/* Fix the circle for containers on the right side */
.rightTABLE::after {
        left: -24px;
}

/* The actual content */
.content {
    padding: 0px 30px;
    position: relative;
    /* border-radius: 6px; */
    /* box-shadow: 0px 0px 36px 8px rgba(0,0,0,0.1); */
    /* background-color: white; */
    color: whitesmoke;
       
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }
  
  /* Full-width containers */
  .containerTABLE {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
  


  /* Make sure all circles are at the same spot */
  .leftTABLE::after, .rightTABLE::after {
    left: 4px;
  }
  
  /* Make all right containers behave like the left ones */
  .rightTABLE {
    left: 0%;
  }
    
    
    .timeline .content{
            padding: 20px 0px;
    }
}
    
    /*TIMELINE END*/
    
    
    @-ms-viewport{
  width: device-width;
}
    /*
    background: #000 !important;
    color: #0f0 !important;
    outline: solid #f00 1px !important;*/


 /*FONTELLO ICONS strat*/
    @font-face {
      font-family: 'fontello';
      src: url('./font/fontello.eot?49840398');
      src: url('./font/fontello.eot?49840398#iefix') format('embedded-opentype'),
           url('./font/fontello.woff?49840398') format('woff'),
           url('./font/fontello.ttf?49840398') format('truetype'),
           url('./font/fontello.svg?49840398#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }
     
     
    .demo-icon
    {
      font-family: "fontello";
      font-style: normal;
      font-size: 18pxpx;
      speak: none;
            color: #656565;
     
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      /* opacity: .8; */
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .2em;
     
      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }
    
/*FONTELLO ICONS END*/
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #39394a;
    min-width: 129px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
        padding: 10px;
    padding-left: 14px;
    border-radius: 5px;
}
.dropdown-content a:hover {
    
    color: antiquewhite
}

.link_fade:hover{
    color: #bebebe;
}