@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
body html {overflow-x: hidden}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#000;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}
.container {text-align: left}

/* Custom CSS
 * --------------------------------------- */
body{
	font-family: 'Montserrat', sans-serif;
	color: #000;
}
.wrap{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	position: relative;
}
h1{
	font-size: 6em;
}
h2{
	font-size: 3em; font-weight: 700; width: 100%; position: relative; display: block;margin-top:10px; margin-bottom: 30px;
}
h2.small {font-size: 2em; font-weight: 600;}
h2.small small {color: #4285f4;font-size: 1em;}
h2 i {color: #4285f4; background: #fff; width: 80px; height: 80px; float: left; text-align: center; line-height: 80px !important; font-size: 42px; border:1px solid #20d67d; margin:-10px 20px 0 0; border-radius: 40px;} 
/* h2 span {display: inline-block;float: left; width: 85%; margin-left: 20px; padding-top: 10px;} */

h3 {color: #4285f4; font-weight: 700; font-size: 2.2rem; padding: 10px 0 20px 0; margin:0 0 0 0} 
h4 {color: #4285f4; font-weight: 700; font-size: 1.8rem; padding: 10px 0 20px 0; margin:0 0 0 0}
p{
	    font-size: 1rem;
    font-weight: 400;
    padding: 10px 0;
  line-height: 160%;
}

article{
	    font-size: 1.1rem;
    font-weight: 200;
    padding: 10px 5px;
}

article img {float: left; margin-right: 15px;}
.person {display: block; overflow: hidden; width: 100%; color: #666;}
.person strong {color: #000; font-size: 1.3em}
article .cnt {font-size: 0.8em;}

#section0 {background: #20d67d; color: #fff; padding-bottom:40px;
background: -moz-linear-gradient(45deg, #20d67d 0%, #4285f4 100%);
background: -webkit-linear-gradient(45deg, #20d67d 0%,#4285f4 100%);
background: linear-gradient(45deg, #20d67d 0%,#4285f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20d67d', endColorstr='#4285f4',GradientType=1 );


}
#section0 h2 {color:#fff;}
#section0 footer:after {display:none}
#section0 p a {background: rgba(255, 255, 255, 0.6);
    padding: 5px 10px;
    border-radius: 0; font-size: 1rem}
#section0 p a:hover {background: rgba(255, 255, 255, 1); text-decoration: none}
#section0 .wyimek {text-align: center; margin:30px auto 30px auto; padding-top:30px; border-top:1px solid #fff; max-width:600px}
#section10 footer:after {display:none}
#section3 .col-md-3 {padding:0;}

#section3, #section5, section7 {background:#f7f8f9}

#section7 .news h4 {font-size: 18px; height:50px;}
#section7 .news figure {max-height:200px; overflow: hidden;}
.news .date {display: block; margin: 15px 0; font-size: 14px; color: #ccc;}
.section ol {list-style: none; counter-reset: li; margin-bottom: 30px;}
.section ol li {margin-bottom: 0; font-size: 1.1rem; font-weight: 200; display: block; overflow: hidden; padding-left: 34px; margin-bottom:20px;}
.section ol li::before {content: counter(li); color: #fff; text-align: center; font-weight: 700; margin-right: 10px; padding-bottom: 8px;
  display: inline-block; width: 1em; background: #20d67d; padding: 0 4px; width: 34px;
  margin-left:-34px; margin-bottom: 10px; float: left}
.section ol li {counter-increment: li}
.breadcrumb {padding: 0.75rem 0; margin: 0 auto;
    background: none; font-size: 12px;} 

.w800 {max-width: 700px;}
.container.news-list {max-width:900px; margin-top:40px;}
.news-list figure {margin-bottom: 30px;}


.intro p{
	width: 50%;
	margin: 0 auto;
	font-size: 1.5em;
}
.section{
	text-align:center; position: relative; padding: 40px 0;
}
.left-box {float: right; text-align: left; max-width: 540px; padding-right: 0;
margin: 0;
  position: relative;
  right: 0;
}
.right-box {float: left; text-align: left; max-width: 540px; padding-left: 20px;}
.right-box .text-left {margin-top:30px;}
.col-ziel {background: none; position: relative; border-right:1px solid #ccc; padding-right:30px;}

.pricing-header {margin-top:0 !important;}
.card-title {
    /* margin-bottom: 1.75rem; */
    font-size: 2rem;
      margin-top: 0.75rem;
    font-weight: 600; color: #20d67d;
  
} 

.card-header h4 {font-size: 1.2rem;
    padding: 0;}

.card-body li {padding: 15px 0; border-bottom: 1px solid #ccc;}
.personal-info {margin: 50px auto 0 auto; padding: 15px 0;  font-weight:200; position: relative; max-width:790px; border-radius: 20px; border:2px solid #b2b2b2; max-height: 260px;}
.personal-info img {position: relative; top: -40px; left:-30px; height: 160%;}
.personal-info h5 {
font-size: 2em;
    margin: 30px 0 20px 0; font-weight: 600;
}
.social {    position: absolute;
    border-radius: 20px;
    background: #f1f1f1;
    padding: 0 12px;
    right: 30px;
    font-size: 1.6em;}
.social i {margin: 2px 5px;}
.social a {color: #4285f4}
header img {position: relative; margin: 0 auto; z-index: 3}
.navbar {background: #fff; padding: 0; max-width: 1140px; margin: 0 auto;}
.navbar-collapse.in {display: block !important}
.navbar-light .navbar-toggler {border: 0;}
#menu:after {width: 100%; content: ''; display:block; background: #20d67d; display: block;
background: -moz-linear-gradient(left, #20d67d 0%, #4285f4 100%);
background: -webkit-linear-gradient(left, #20d67d 0%,#4285f4 100%);
background: linear-gradient(to right, #20d67d 0%,#4285f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20d67d', endColorstr='#4285f4',GradientType=1 );
height:3px; overflow: hidden; bottom:0; 
}
header h2 {color:#4285f4; font-size: 3em; font-weight: 200;}
#pytanie p {font-size: 1.8em;}
#pytanie li {font-size: 1.1em;}
.section footer {width: 100%; text-align: right; padding-right: 10px 0; font-size: 1.8rem; font-weight: 200;  bottom: 0; position: absolute}
footer .container {color: #4285f4; text-align:right; padding: 0 20px 10px 0;}
.section footer:after {width: 100%; background: #20d67d; content: ''; display: block;
background: -moz-linear-gradient(left, #20d67d 0%, #4285f4 100%);
background: -webkit-linear-gradient(left, #20d67d 0%,#4285f4 100%);
background: linear-gradient(to right, #20d67d 0%,#4285f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20d67d', endColorstr='#4285f4',GradientType=1 );
height:1px; overflow: hidden;
}
.myinfo {width:360px;}
#menu li {
	display:inline-block;
	margin: 10px 5px;
	color: #000;
	background:#fff;
	background: rgba(255,255,255, 0.5);
	-webkit-border-radius: 10px;
            border-radius: 10px;
}
#menu li.active{
	

	color: #005479;
}
#menu li a{
	text-decoration:none;
	color: #000; font-size: 0.9em;
  font-weight: 500;
}
#menu li.active a:hover{
	color: #000;
}
#menu li:hover{
color:#005479
}
#menu li a,
#menu li.active a{
	padding: 9px 6px;
	display:block;     white-space: nowrap;
}
#menu li.active a{
	color: #005479;
}
#menu{
	
	top:0;
	left:0;
	
	z-index: 70;
	width: 100%;
	padding: 0;
	margin:0;
}
.twitter-share-button{
	position: fixed;
	z-index: 99;
	right: 149px;
	top: 9px;
}
#download{
	margin: 10px 0 0 0;
	padding: 15px 10px;
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #49afcd;
	background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: -webkit-gradient(linear,0 0,0 100%,from( #5bc0de),to( #2f96b4));
	background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: linear-gradient(top, #5bc0de, #2f96b4);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
	border-color: #2f96b4 #2f96b4 #1f6377;
	border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	vertical-align: middle;
	cursor: pointer;
	display: inline-block;
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
#download a{
	text-decoration:none;
	color:#fff;
}
#download:hover{
	text-shadow: 0 -1px 0 rgba(0,0,0,.25);
	background-color: #2F96B4;
	background-position: 0 -15px;
	-webkit-transition: background-position .1s linear;
	-moz-transition: background-position .1s linear;
	-ms-transition: background-position .1s linear;
	-o-transition: background-position .1s linear;
	transition: background-position .1s linear;
}
#infoMenu{
	height: 20px;
	color: #f2f2f2;
	position:fixed;
	z-index:70;
	bottom:0;
	width:100%;
	text-align:right;
	font-size:0.9em;
	padding:8px 0 8px 0;
}
#infoMenu ul{
	padding: 0 40px;
}
#infoMenu li a{
	display: block;
	margin: 0 22px 0 0;
	color: #333;
}
#infoMenu li a:hover{
	text-decoration:underline;
}
#infoMenu li{
	display:inline-block;
	position:relative;
}
#examplesList{
	display:none;
	background: #282828;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	padding: 20px;
	float: left;
	position: absolute;
	bottom: 29px;
	right: 0;
	width:638px;
	text-align:left;
}
#examplesList ul{
	padding:0;
}
#examplesList ul li{
	display:block;
	margin: 5px 0;
}
#examplesList ul li a{
	color: #BDBDBD;
	margin:0;
}
#examplesList ul li a:hover{
	color: #f2f2f2;
}
#examplesList .column{
	float: left;
	margin: 0 20px 0 0;
}
#examplesList h3{
	color: #f2f2f2;
	font-size: 1.2em;
	margin: 0 0 15px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	padding: 0 0 5px 0;
}

.carousel { width:100%; margin-top: 50px;}
.carousel .row {max-width:900px; margin:0 auto;}
.carousel-control-prev-icon, .carousel-control-next-icon {padding:10px 20px; display:inline-block}

.carousel-control-next-icon {background-image:url("../img/right-arrow.svg");}
.carousel-control-prev-icon {background-image:url("../img/left-arrow.svg");}

.carousel .subtitle {font-size:11px;}
.carousel-item {min-height: 280px;}
.carousel-indicators {margin: 0}
.carousel-indicators li {background-color:#4285f4}
.carousel-indicators .active {background-color:#20d67d}
.carousel-control-prev, .carousel-control-next {width: 50px}

.news h3 a {color:#000;}
.news figure {margin:0 0 30px 0;}
.news .more {display:block; margin-top:20px; clear: both}

.text-center {margin: 30px auto; text-align:center;}
.btn {
    display: inline-block;
    height: 58px;

    position: relative;
    padding: 18px 35px 22px 35px;
    background: #20d67d;
    border: none;
    color: #fff !important;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,.29);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,.29);
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,.29);
    font-weight: 700;
    overflow: hidden;
  border-radius: 0;
}

.btn-light {background: #fff; color: #20d67d !important;

-webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow: none;
}

    .btn:before {
        content: "";
        position: absolute;
        height: 65px;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: -100%;
        right: 0;
        background: #1FC172;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 50%;
        transform-origin: 50%;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
      border-radius: 0; color:#fff !important;
    }

    .btn:hover {
        color: #fff !important;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        }
        .btn:hover:before {
            -webkit-transform: scaleX(2);
            transform: scaleX(2);
        
    }


.btn-blue {
    display: inline-block;
    height: 58px;

    position: relative;
    padding: 18px 35px 22px 35px;
    background: #4285f4;
    border: none;
    color: #fff !important;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,.29);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,.29);
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,.29);
    font-weight: 700;
    overflow: hidden;
  border-radius: 0;
}
    .btn-blue:before {
        content: "";
        position: absolute;
        height: 65px;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: -100%;
        right: 0;
        background: #1e68e2;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 50%;
        transform-origin: 50%;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
      border-radius: 0; color:#fff !important;
    }

    .btn-blue:hover {
        color: #fff !important;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        }
        .btn-blue:hover:before {
            -webkit-transform: scaleX(2);
            transform: scaleX(2);
        
    }


/* --------------------------------------- */
 #demosMenu{
	position:fixed;
	bottom: 10px;
	right:10px;
	z-index: 999;
 }

@media (max-width: 480px) {
  
  .navbar-brand {margin-left: 10px;}
  
	h2 {
    font-size: 2em;
    margin-top: 10px;
}
	h2 span {width: 70%;}
	.left-box {padding: 10px 30px;}
	header img {width: 90%;}
	.section footer {position: relative}
	body {overflow:auto !important; overflow-x: hidden !important}
	html {overflow:auto !important; overflow-x: hidden !important}
	h2 i { width: 40px; height: 40px; float: left; text-align: center; line-height: 40px !important; font-size: 22px; margin-top:0; margin-right: 10px;}
  .container.news-list {padding: 0 20px; margin:20px; max-width:350px;}
  .container.news-list img {max-width: 100%; height: auto !important;}
  .container.news-list p {overflow: hidden}
	h4 {font-size: 1.6rem; margin-top: 20px;}
	.right-box {padding-bottom:30px;}
	.personal-info { margin:30px 10px 0 10px; max-height: 100%;}
	.personal-info img {position: relative; left:-15px;}
	.social {right: 10px; z-index: 3;}
	.personal-info .row {margin-left: 0; width:100%;}
	.personal-info .col-6 {padding-right:5px; padding-left: 10px;}
	.personal-info h5 {margin-left: 10px; margin-top: 0;}
	.myinfo {width:100%; }
	.right-box ol {padding-right: 10px;}
}

col1 {
  background-color: red;
}
.col2 {
  background-color: green;
}
.col3 {
  background-color: blue;
}
.col4 {
  background-color: orange;
}
.col5 {
  background-color: brown;
}