/* main.css
             _                           _ 
            | |                         | |
__  ________| | _____  _ __ ___    _ __ | |
\ \/ /______| |/ / _ \| '_ ` _ \  | '_ \| |
 >  <       |   < (_) | | | | | |_| |_) | |
/_/\_\      |_|\_\___/|_| |_| |_(_) .__/|_|
                                  | |      
                                  |_|      
*/

html, body {
	scroll-behavior: smooth;
    font-size: 16px;
}

body {
	font-family: 'Nunito', sans-serif;
	color: #000;
	font-weight: 300;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.container {
	border-radius: 30px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
    max-width: 1140px;
}

.container-fluid {
	border-radius: 0!important;
	-moz-border-radius: 0!important;
	-webkit-border-radius: 0!important;
	-ms-border-radius: 0!important;
	-o-border-radius: 0!important;
}

.wrapper {
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 30px;
    overflow: hidden;
}

.content {
	max-width: 1600px;
	margin: auto;
	min-height: 1200px;
}

.disclaimer {
	padding: 30px 0;
	max-width: 620px;
	margin: auto;
	text-align: center;
	font-size: 14px;
}

/* 	wszystkie img responsywne dostosowują się do kontenera w jakim sa umieszczone nie ma potrzeby uzywania img-fluid w klasach */
img {
    max-width: 100%;
    max-height: auto;
}

/* ==========================================================================
   pozostałe style poniżej
   ========================================================================== */
    /* div { outline: 1px solid blue; } */


/* Resets
   ========================================================================== */

   ul {list-style: none; margin: 0; padding: 0;}


/* Typography
   ========================================================================== */

.small      {font-size: .85rem;}
.medium     {font-size: 1.35rem;}
.large      {font-size: 1.8rem;}
.xlarge     {font-size: 2.5rem;}

.thin       {font-weight: 300;}
.regular    {font-weight: 400;}
.semi       {font-weight: 600;}
.bold       {font-weight: 700;}

.nobr	    {white-space: nowrap;}


/* Backgrounds
   ========================================================================== */

.bg-1, .bg-2, .bg-3, .bg-4 {
    position: relative;
    z-index: 5;
    background-size: cover;
    background-repeat: no-repeat;}
.bg-1 {
    background-image: url("../img/content_bg.jpg");
    background-position: center center;}
.bg-2 {
    background-image: url("../img/content_1_bg_full.jpg");
    background-position: center top;}
.bg-3 {
    background-image: url("../img/content_2_bg_full.jpg");
    background-position: center top;}
.bg-4 {
    background-image: url("../img/content_3_bg_full.jpg");
    background-position: center top;}

/* Layout
   ========================================================================== */
   
   .hero-cta {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
    }
    header {
       margin: 14px 0;
       border-radius: 24px 24px 0 0;
    }
    .spec {
        position: relative;
    }
    img.spec-logos {
        max-width: 100px;
    }
    .spec-logos {
        position: absolute;
        right: 80px;
        top: 60px;
    }
    footer h2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .content-wrapper {
        padding: 0 15px;
        border-radius: 0 0 24px 24px;
    }
    .steps-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        text-align: center;
    }
    .steps-list div {
        padding: 0 15px;
    }
    .steps-list img {
        max-width: 80px;
        margin-bottom: 1rem;
    }
   
/* Colors
   ========================================================================== */

    header {
       background: #fff;
    }
    .white {
        color: #fff;
    }

    .video-overlay::before,
    .gradient::before {
        position: relative;
        z-index: 10;
        background: rgb(255,255,255);
        background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 10%);
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), color-stop(10%, rgba(255,255,255,0)));
        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 10%);
    }

    /* Animation
   ========================================================================== */

   .content-wrapper img, .steps-list div {
       -webkit-transition: .2s ease-in-out;
       -o-transition: .2s ease-in-out;
       transition: .2s ease-in-out;
   }
   
   .content-wrapper img:hover, .steps-list div:hover {
       -webkit-transform: translateY(-10px);
       -ms-transform: translateY(-10px);
           transform: translateY(-10px);
   }

   /* Media
   ========================================================================== */

   /* mobile */
   @media (max-width: 768px) {
       html, body {
            font-size: 13px;
        }

        .small      {font-size: .85rem;}
        .medium     {font-size: 1.4rem;}
        .large      {font-size: 1.7rem;}
        .xlarge     {font-size: 1.8rem;}

        .thin       {font-weight: 300;}
        .regular    {font-weight: 400;}
        .semi       {font-weight: 600;}
        .bold       {font-weight: 700;}

        footer h2 {
                -ms-flex-direction: column;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                        flex-direction: column;
        }

        .steps-list {
                -ms-flex-direction: column;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                        flex-direction: column;
                        display: block;

        }

        .content-wrapper div {
            text-align: center!important;
        }
   }