one-page_work in progress...

In this example below you will see how to do a one-page_work in progress... with some HTML / CSS and Javascript

one-page site, headerhero-cover menu-sticky przyklejace sie, paralax-with-pattern, hamburger, smooth scrolling, grid-bootstrap, glyph-bootstrap

Thumbnail
This awesome code was written by andrzejsebastianchmiel, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright andrzejsebastianchmiel ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>one-page_work in progress...</title>
  <meta content='author' name='Andrzej Chmiel' />
<meta name="viewport" content="width=device-width, initial-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  	<head>
   <!--js sticky start here-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <meta charset="UTF-8">
	<title>prosta strona one-page z header-cover, menu sticky</title>
	<!--rwd start here-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--internal style here start-->
	<style>
   
    
	</style>
	<!--external style here-->
	<link rel="stylesheet" href="style.css" >
  <!--external style devicon-->
  <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/master/devicon.min.css">
</head><!--/the end of head section-->


<body>
  <!-- bg canvas (de)activation-->
<canvas id="bgCanvas"></canvas>

<!--header section start-->
<header class="header" id="header">



<!--hamburger by Dronca Raul here start-->
<h1 class="info"></h1>
<div class="menu">
  <span class="menu-circle"></span>
  <a href="#" class="menu-link">
    <span class="menu-icon">
      <span class="menu-line menu-line-1"></span>
      <span class="menu-line menu-line-2"></span>
      <span class="menu-line menu-line-3"></span>
    </span>
  </a>
</div>

<div class="menu-overlay">
   
  <img src="http://i.giphy.com/l41YqNeoHIVsBHEnm.gif" alt="just a gif">  <h1 class="overlay-info">
    Hire me! <br>
    660.997.429
  </h1> 
</div>
  <!--/the end of hamburger-->
  <div class="container">
  
  
  
  <h3>EXTREME STUDIO_ <br/><hr></h3>
  
	<h2>WELCOME TO EXTREME studio</h2><hr />
	<p>creative webdesigner, junior front-end developer
</p><br/>
		<a href="#footer" class="btn">Call us: 660 997 429&#8594;</a><br/><br/><br/><br/><br/>
    
<!--scroll btn by https://codepen.io/svenschebaum/pen/IlABK-->
    <span class="scroll-btn">
	<a href="#about">
		<span class="mouse">
			<span>
			</span>
		</span>
	</a>
  

</span><!--/ .scroll btn-->
    
	</div>
</header>

<!--nav ul li a, nav section start-->
<nav class="nav">
<!--hamburger-->
<img src="https://www.google.pl/imgres?imgurl=https%3A%2F%2Fwww.lawson-weitzen.com%2Fimages%2Fmenu_stack-128.png&imgrefurl=https%3A%2F%2Fwww.lawson-weitzen.com%2Fprofile&docid=quUYhxz0DMejUM&tbnid=jxeVS8C5_4QkYM%3A&vet=1&w=128&h=118&bih=642&biw=1280&q=menu-icon.png&ved=0ahUKEwic2aH5_ezQAhVqJMAKHbhPAxoQMwhsKEUwRQ&iact=mrc&uact=8" class="chamburger" alt="chamburger menu icon">
<div class="container">
	<ul>
    <li><a href="#header"><img src="http://goleszow.luteranie.pl/logo_.png" style="height: auto;
    vertical-align: middle;"/>andrzej chmiel</a></li>
		<li><a href="#about">about</a></li>
		<li><a href="#offer">offer</a></li>
		<li><a href="#skills">skills</a></li>
		<li><a href="#contact">contact</a></li>
	</ul>
	</div>
</nav>

<!--section about here start-->
<section class="section" id="about">
<div class="container"><!-- bg canvas deactivation
<canvas id="bgCanvas"></canvas>-->
<h2 class="page-heading" data-lang="about">about</h2><div class="circular">
<img src="http://www.topcount.co/wp-content/uploads/2015/11/11426193_1622564071322643_534603640_n-300x300.jpg" width="200" height="200"></div>
<div class="row">
  <div class="col-md-6"><p>I'm so happy that you are here, I'm a new media designer, graphic designer and junior front-end developer, Early-on in my coding experience I built websites for myself.   </p></div>
  <div class="col-md-6"><p>I'm always open to new technologies, and am always interested in learning new things.</p></div>
</div>  
<p></p>
</div>
</section>

<!--section paralax here start-->
  <div id="bg3" class="fixedbg">
<h2></h2>
	<p></p><br/>
		<a href="#footer" class="btn2" style="text-align: center;">You can do what you want to do</a>
	</div>
</div>

  <!--section offer here start-->
<section class="section" id="offer">
<div class="container">
<h2 class="page-heading" data-lang="about">offer</h2>
 
<!-- [de]activation grid z bootstrapa-->  
<div class="row">
  
  <div class="col-md-4"><h2>prototyping</h2><p>lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem  lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem,</p></div>
  
  <div class="col-md-4"><h2>webdesign</h2><p>lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem  lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem,</p></div>
  
  
  <div class="col-md-4"><h2>front-end</h2><p>lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem  lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem,</p></div>
</div>  
<p>lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem  lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum doloremipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem</p>
</div>
  
  
  
</section>





<!--section paralax here start-->
  <div id="bg2" class="fixedbg">
<h2>Nothing is
impossible
</h2>
	<p></p><br/>
		<a href="#footer" class="btn" style="text-align: center;">more&#8594;</a>
	</div>
</div>


<!-- FOLIO section start -->

<section class="section" id="folio">
<div class="container">
<h2 class="page-heading" data-lang="about">folio</h2>
 



  
  
  
</section>





<!--section paralax here start-->
  <div id="bg2" class="fixedbg">
<h2>Nothing is
impossible
</h2>
	<p></p><br/>
		<a href="#footer" class="btn" style="text-align: center;">more&#8594;</a>
	</div>
</div>
<!--/ the and of section folio-->


<!--section skills here start-->
<section class="section" id="skills">
<div class="container">
<h2 class="page-heading" data-lang="about">skills</h2>
  <i class="devicon-html5-plain-wordmark colored"></i>
  <i class="devicon-css3-plain-wordmark colored"></i>
  <i class="devicon-javascript-plain"></i>
  <i class="devicon-jquery-plain"></i>
    <i class="devicon-wordpress-plain"></i>
  <i class="devicon-bootstrap-plain-wordmark colored"></i>
<p>lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem, lorem ipsum dolorem</p>
</div>
</section>

<!--section paralax here start-->
  <div id="bg5" class="fixedbg">
<h2>please feel free to contact</h2>
	<p></p><br/>
		<a href="#footer" class="btn" style="text-align: center;">more&#8594;</a>
	</div>
</div>



<!--section 'contact' here start-->
<section class="section" id="contact">
<div class="container">
<h2 class="page-heading" data-lang="about">contact</h2>
  <p>EXTREME STUDIO<br/>extremely good studio <br/> Andrzej Chmiel, creative webdesigner, junior front-end developer<br/>here adress</p>
  <span class="glyphicon glyphicon-earphone" aria-hidden="true">660997429</span>
<p>Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!,feel free to contact me </p>
  <div class="box">
        	<h1>Say Hello!</h1>
            <form>
                <input placeholder="Write your name">
                <input placeholder="Write your surename">
                <textarea placeholder="This is textarea element. You can write your message here!"></textarea>
            </form>
        </div>
</div>
</section>


<footer class="footer" id="footer">
<div class="container">
<p><a href="#header">&#8593;top</a></p><img src="http://goleszow.luteranie.pl/logo_.png" style="align:
  center;"/>2017 Andrzej Chmiel. All rights reserved.
</div>
</footer>

</div>

<div class="">
</div>





	<!--js sticky here-->
	<script>

	$(document).ready(function() {
	var NavY = $('.nav').offset().top;
	 
	var stickyNav = function(){
	var ScrollY = $(window).scrollTop();
		  
	if (ScrollY > NavY) { 
		$('.nav').addClass('sticky');
	} else {
		$('.nav').removeClass('sticky'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
	});
	
</script>

<!--js smooth scrolling here-->
<script>$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>

<script>(function() {
  
  //open sidebar
  $('.burger').on('click', function() {
    $(this).css({
      'opacity': '0',
      'transition': 'all .2s ease-out'
    })
    $('.side-nav').css({
      'width': '200px'
    });
    $('.main').css({
      'margin-left': '200px'
    });
  })

  //close sidebar
  $('.close').on('click', function() {
    $('.side-nav').css({
      'width': '0'
    });
    $('.main').css({
      'margin-left': '0'
    });
    $('.burger').css({
      'opacity': '1',
      'transition': 'all .2s ease-in'
    })
  })
}());</script>

<!--bg canvas HERE-->
<script>
//Bg canvas
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

var windowWidth = $(window).width();
var windowHeight = $(window).height();
var docWidth = $(document).width();
var docHeight = $(document).height();

console.log('pageYOffset: ' + pageYOffset);

//Config
var linesCount = 10;

var firstRandom = [];
var secondRandom = [];

for (a = 1; a <= linesCount; a++) {
firstRandom[a] = getRandomInt(20, 500);
secondRandom[a] = getRandomInt(20, 50);
}

function drawBgCanvas() {
var pageYOffset = window.pageYOffset;

var canvas = document.getElementById('bgCanvas');
canvas.width = docWidth;
canvas.height = docHeight;

var ctx = canvas.getContext('2d');

for (i = 1; i <= linesCount; i++) {
if (i < linesCount) {
ctx.beginPath();
ctx.moveTo(windowWidth/linesCount * i, 0);
ctx.lineTo(windowWidth/linesCount * i, docHeight);
ctx.strokeStyle = '#C9C9C9';
ctx.lineWidth = 1;
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(windowWidth/linesCount * i, firstRandom[i] + pageYOffset);
ctx.lineTo(windowWidth/linesCount * i, firstRandom[i] + secondRandom[i] + pageYOffset);
ctx.strokeStyle = '#9824e5';
ctx.lineWidth = 3;
ctx.stroke();
ctx.closePath();
}
}
}

drawBgCanvas();
$(window).scroll(function (event) {
drawBgCanvas();
});
</script>





</body>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/andrzejsebastianchmiel/one-page_work-in-progress-YWmqQv */

/* one-page site, headerhero-cover menu-sticky przyklejace sie, paralax-with-pattern, hamburger, smooth scrolling, bg cover, grid-bootstrap, glyph-bootstrap
style css

work in pro...
*/

* {
margin: 0; /* wyzerowanie marginesów */
padding: 0;
box-sizing: border-box;
  cursor: crosshair;
}







/*circular img */
.circular img {
 border-radius: 50%;
}

.circular img:hover {
opacity: 0.9;
border: 1px; 
color: black; 
}


/* bg Canvas*/
#bgCanvas {
    top: 0;
    left: 0;
    position: absolute;
    overflow: hidden;
    z-index: -2;
  

  
}

body {
color: #333;
font-size: 18px;
font-family: lato; sans-serif;
}


/* container */
.container {
max-width: 900px;
margin-left: auto; /*wyśrodkowanie*/
margin-right: auto; /*wyśrodkowanie*/
padding-left: 15px; /*margines wewnętrzny*/
padding-right: 15px; /*margines wewnętrzny*/
  vertical-align: top;
}

/* header */
/* pattern do headera 
.header:after {
content: "";
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAa0lEQVQYV2NkgIKmQ37/6+w2MYK4xpnX/h9piWDgFL4E54MZhBSdna7FyEiMIpBhYBNxWQcyCWYjTjchKwK5nRGbw9EVga3+/lbvP7LvsCkCGYbiRlyKdtW2QDwD0oFPkbDUMogbCSkCGQYAka1/qtkEIQkAAAAASUVORK5CYII=) repeat;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
	Opacity: 0.5;
    z-index: -1;  
}	 */ 

.header {
min-height: 100vh;
padding-top: 250px;
padding-bottom: 250px;
background: url('http://kavaxtreme.radiantchristians.com/wp-content/uploads/2014/04/hero-1038x500.png') center/cover no-repeat;
text-align: center;
color: #fff;
text-shadow: 0 0 15px rgb(0, 0, 0, .3);
  
    
}


/* header h1*/
.header h1 {
font-size: 62px;
margin-bottom: 30px;
}



/* Scroll Down Button */
@-webkit-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@-moz-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
 .scroll-btn {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
}
.scroll-btn > * {
	display: inline-block;
	line-height: 18px;
	font-size: 13px;
	font-weight: normal;
	color: #7f8c8d;
	color: #ffffff;
	font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: 2px;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
	color: #ffffff;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.scroll-btn .mouse {
	position: relative;
	display: block;
	width: 35px;
	height: 55px;
	margin: 0 auto 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 3px solid white;
	border-radius: 23px;
}
.scroll-btn .mouse > * {
	position: absolute;
	display: block;
	top: 29%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: white;
	border-radius: 50%;
	-webkit-animation: ani-mouse 2.5s linear infinite;
	-moz-animation: ani-mouse 2.5s linear infinite;
	animation: ani-mouse 2.5s linear infinite;
}
/*end of scroll btn*/

/*rwd - hamburger */
.chamburger {
    display: none;
}

/* navigation */
.nav {
position: sticky;
top: 0; /*nav trzyam sie gornej krawedzi*/
line-height: 70px;
background: #C000D1;
  box-shadow: 0 2px 5px #444;
  transition: background .1s; /*aby kolor tła zmieniał się płynne*/
}

/* sticky, czyli menu przyklejajace sie do gornej krawedzi przy scrollowaniu w dol, w sticky mozna uaktywaniac zachowania i wlasciwosci nieobecne w normalnej navigacji, jak box-shadow czy opacity */
.sticky
{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
  opacity: 0.9;
}

.nav ul{
display: flex;
justify-content: space-between;  /*pozostała przestrzeń jest dzielona i wykorzystywana miedzy elementami,*/
list-style: none;
}

	.nav li {
	width: 100%;
	}
	
		/* a */
		.nav a {
		display: block;
		text-align: center;
		color: #fff;
		text-decoration: none;
		}
		
			/* zmiana zachowania w pseudo:classie */
			.nav a:hover, nav a:focus {
			background: #EA03FF;
			border-bottom: solid 2px #780078;
       color: #AB00AB; 
			}

			
			
/* section */
.section {
padding: 50px 0;
text-align: center;
vertical-align: top;
}			


	/*wszystkie parzyste sekcje*/
	.section:nth-of-type(even) {
	background: #;
	}

	.section *:not(:first-child) {
	margin-top: 0px;
	}

/* paralax -
pattern w paralax*/	
.fixedbg:after {
    content: "";
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAa0lEQVQYV2NkgIKmQ37/6+w2MYK4xpnX/h9piWDgFL4E54MZhBSdna7FyEiMIpBhYBNxWQcyCWYjTjchKwK5nRGbw9EVga3+/lbvP7LvsCkCGYbiRlyKdtW2QDwD0oFPkbDUMogbCSkCGQYAka1/qtkEIQkAAAAASUVORK5CYII=) repeat;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
	Opacity: 0.5;
    z-index: -1; /*nizej od h2, h3, btn, hr*/  
}	

.fixedbg {
    position: relative;
    width: 100%;
    height: calc(50px + 30vh);
        background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  text-align: center;
  z-index: -2; /*jeszcze nizej*/
}

.fixedbg h2 {
color: white;
font-family: lato; sans-serif;
text-align: center;
 padding: 15px;
}

#bg2 {
    background-image: url(https://scontent-frx5-1.xx.fbcdn.net/v/t1.0-9/30709454_10156401009922235_7854191902327832576_o.jpg?_nc_cat=0&oh=10bde0452fd7ee68e626bc6945148dc8&oe=5B62CBD5);
}

#bg3 {
    background-image: url(https://scontent-frx5-1.xx.fbcdn.net/v/t31.0-8/27912624_10156220702902235_8154258094229252303_o.jpg?_nc_cat=0&oh=ed8f24a579fd2a5f757e3cbc0c45b772&oe=5B58D78B);
}

#bg5 {
    background-image: url(https://scontent-frx5-1.xx.fbcdn.net/v/t31.0-8/27912624_10156220702902235_8154258094229252303_o.jpg?_nc_cat=0&oh=ed8f24a579fd2a5f757e3cbc0c45b772&oe=5B58D78B);
}

/* ABOUT
- stylowanie pierwszej litery w wybranym elemencie*/
#about::first-letter {
font-size: 25px; 
font-weight: bold;  
}

#about {
vertical-align: top;
color: #00ff2e;  
}

#offer {
color: #00ff2e;
}


/* devicon - skills*/
i {
font-size: 80px;  
padding: 5px;  
margin: 15px; 
text-align: center;   
}
  i:hover {
   cursor: crosshair;
   opacity: 0.9;
}
	


/* Single-direction drop shadow */



/*----------btn button---------------*/

.btn {
  font-family: Arial;
  color: #9824e5;
  font-size: 15px;
  padding: 15px 15px 15px 15px;
  border: solid #9824e5 1px;
  text-decoration: none;
}

/*zmiana zachowania buttona w pseudo:klasie, hover,gdy klikniety*/
.btn:hover {
  text-decoration: none;
  border: solid #9824e5 1px;
  color: white;
background: #9824e5;
}


/*----------btn button 2---------------*/

.btn2 {
  font-family: Lato;
  color: #9824e5;
  font-size: 15px;
  padding: 15px 15px 15px 15px;
  border: solid #9824e5 2px;
  text-decoration: none;
}

/*zmiana zachowania buttona w pseudo:klasie, hover,gdy klikniety*/
.btn2:hover {
  text-decoration: none;
  border: solid #9824e5 2px;
  color: white;

}


/*contact section*/
#contact {
padding: 30px;
text-align: center;  
color: #00ff2e; 
font-size: 11px; 
}


/* footer section*/	
.footer {
padding: 30px;
text-align: center;  
color: #00ff2e; 
font-size: 14px; 
}

.footer a{
text-decoration: none;
color: #D9D9D9;
}

.footer a:hover {
color: #CCCCCC;  
}

/* formularz */


form input:focus {
		border: 1px solid EA03FF;
}

/* zmiana zachowania dla textarea */
textarea:hover {
			border: 1px solid #EA03FF;
}


/*.box {
    width: 80%;
    min-height: 200px;
    margin: 15px auto;
    padding: 20px;
	border-radius: 5px;
	box-shadow: 1px 1px 3px #000;
    background-color: white;
}*/
textarea {
	font-family: 'Open Sans', sans-serif;
	box-sizing: border-box;
	border-radius: 5px;
	width: 100%;
	resize: none;
	height: 200px;
	border: 1px solid #ccc;
	padding: 10px;
}
form input {
	border: 1px solid #EA03FF;
    display: block;
    box-sizing: border-box;
	width: 100%;
	margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
}



/*
hamburger style here
*/
/* ------------- */
.menu {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 46px;
  width: 46px;
}

.menu-link {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1002;
}

.menu-icon {
  position: absolute;
  width: 20px;
  height: 14px;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 1px;
}

/* ------------- */
.menu-line {
  background-color: #333;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.25s ease-in-out;
}
.menu-line-2 {
  top: 0;
  bottom: 0;
  margin: auto;
}
.menu-line-3 {
  bottom: 0;
}
.menu.open .menu-line-1 {
  transform: translateY(7px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
  opacity: 0;
}
.menu.open .menu-line-3 {
  transform: translateY(-7px) translateY(50%) rotate(45deg);
}

/* ------------- */
.menu-circle {
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  transform: scale(1);
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
  transform: scale(1.5);
}
.menu.open .menu-circle {
  transform: scale(60);
}

/* ------------- */
.menu-overlay {
  background-color: #fff;
  color: #333;
  height: 100%;
  width: 100%;
  position: fixed;
  text-align: center;
  transition: opacity 0.2s ease-in-out;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ------------- */
.info {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.overlay-info {
  text-align: center;
  color: #111825;
}
/* .the end of burger style*/

/*container h3, czyli smith&co*/
.container h3 {
font-size: 10px;  
right: 0;
  top: 0;
  margin-right: 25px;
  margin-top: 20px;
  position: absolute;
}

.container h3:hover {
  opacity: 0.9;
}

.container h3 hr {
border: 0;
 display: block;
    width: 30px;
    height: 2px;
    background-color: #9824e5;
    margin: 0 auto; 
  margin-bottom: 15px;  
}

/*page-heading style start*/
h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
text-align: center;  
}

.page-heading::after {
    content: '';
    display: block;
    width: 70px;
    height: 3px;
    background-color: #780078;
    margin: 0 auto;
 
}
/*page-heading style end*/

header hr {
  border: 0;
 display: block;
    width: 70px;
    height: 6px;
    background-color: #9824e5;
    margin: 0 auto; 
  margin-bottom: 15px;
}


/*bootstrap only glyphicons system, u 
don't need all bootstrap, 
u can compile only glyphicons',
musisz miec jeszcze folder z fontami z bootstrapa...*/
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
  content: "\002a";
}
.glyphicon-plus:before {
  content: "\002b";
}
.glyphicon-euro:before,
.glyphicon-eur:before {
  content: "\20ac";
}
.glyphicon-minus:before {
  content: "\2212";
}
.glyphicon-cloud:before {
  content: "\2601";
}
.glyphicon-envelope:before {
  content: "\2709";
}
.glyphicon-pencil:before {
  content: "\270f";
}
.glyphicon-glass:before {
  content: "\e001";
}
.glyphicon-music:before {
  content: "\e002";
}
.glyphicon-search:before {
  content: "\e003";
}
.glyphicon-heart:before {
  content: "\e005";
}
.glyphicon-star:before {
  content: "\e006";
}
.glyphicon-star-empty:before {
  content: "\e007";
}
.glyphicon-user:before {
  content: "\e008";
}
.glyphicon-film:before {
  content: "\e009";
}
.glyphicon-th-large:before {
  content: "\e010";
}
.glyphicon-th:before {
  content: "\e011";
}
.glyphicon-th-list:before {
  content: "\e012";
}
.glyphicon-ok:before {
  content: "\e013";
}
.glyphicon-remove:before {
  content: "\e014";
}
.glyphicon-zoom-in:before {
  content: "\e015";
}
.glyphicon-zoom-out:before {
  content: "\e016";
}
.glyphicon-off:before {
  content: "\e017";
}
.glyphicon-signal:before {
  content: "\e018";
}
.glyphicon-cog:before {
  content: "\e019";
}
.glyphicon-trash:before {
  content: "\e020";
}
.glyphicon-home:before {
  content: "\e021";
}
.glyphicon-file:before {
  content: "\e022";
}
.glyphicon-time:before {
  content: "\e023";
}
.glyphicon-road:before {
  content: "\e024";
}
.glyphicon-download-alt:before {
  content: "\e025";
}
.glyphicon-download:before {
  content: "\e026";
}
.glyphicon-upload:before {
  content: "\e027";
}
.glyphicon-inbox:before {
  content: "\e028";
}
.glyphicon-play-circle:before {
  content: "\e029";
}
.glyphicon-repeat:before {
  content: "\e030";
}
.glyphicon-refresh:before {
  content: "\e031";
}
.glyphicon-list-alt:before {
  content: "\e032";
}
.glyphicon-lock:before {
  content: "\e033";
}
.glyphicon-flag:before {
  content: "\e034";
}
.glyphicon-headphones:before {
  content: "\e035";
}
.glyphicon-volume-off:before {
  content: "\e036";
}
.glyphicon-volume-down:before {
  content: "\e037";
}
.glyphicon-volume-up:before {
  content: "\e038";
}
.glyphicon-qrcode:before {
  content: "\e039";
}
.glyphicon-barcode:before {
  content: "\e040";
}
.glyphicon-tag:before {
  content: "\e041";
}
.glyphicon-tags:before {
  content: "\e042";
}
.glyphicon-book:before {
  content: "\e043";
}
.glyphicon-bookmark:before {
  content: "\e044";
}
.glyphicon-print:before {
  content: "\e045";
}
.glyphicon-camera:before {
  content: "\e046";
}
.glyphicon-font:before {
  content: "\e047";
}
.glyphicon-bold:before {
  content: "\e048";
}
.glyphicon-italic:before {
  content: "\e049";
}
.glyphicon-text-height:before {
  content: "\e050";
}
.glyphicon-text-width:before {
  content: "\e051";
}
.glyphicon-align-left:before {
  content: "\e052";
}
.glyphicon-align-center:before {
  content: "\e053";
}
.glyphicon-align-right:before {
  content: "\e054";
}
.glyphicon-align-justify:before {
  content: "\e055";
}
.glyphicon-list:before {
  content: "\e056";
}
.glyphicon-indent-left:before {
  content: "\e057";
}
.glyphicon-indent-right:before {
  content: "\e058";
}
.glyphicon-facetime-video:before {
  content: "\e059";
}
.glyphicon-picture:before {
  content: "\e060";
}
.glyphicon-map-marker:before {
  content: "\e062";
}
.glyphicon-adjust:before {
  content: "\e063";
}
.glyphicon-tint:before {
  content: "\e064";
}
.glyphicon-edit:before {
  content: "\e065";
}
.glyphicon-share:before {
  content: "\e066";
}
.glyphicon-check:before {
  content: "\e067";
}
.glyphicon-move:before {
  content: "\e068";
}
.glyphicon-step-backward:before {
  content: "\e069";
}
.glyphicon-fast-backward:before {
  content: "\e070";
}
.glyphicon-backward:before {
  content: "\e071";
}
.glyphicon-play:before {
  content: "\e072";
}
.glyphicon-pause:before {
  content: "\e073";
}
.glyphicon-stop:before {
  content: "\e074";
}
.glyphicon-forward:before {
  content: "\e075";
}
.glyphicon-fast-forward:before {
  content: "\e076";
}
.glyphicon-step-forward:before {
  content: "\e077";
}
.glyphicon-eject:before {
  content: "\e078";
}
.glyphicon-chevron-left:before {
  content: "\e079";
}
.glyphicon-chevron-right:before {
  content: "\e080";
}
.glyphicon-plus-sign:before {
  content: "\e081";
}
.glyphicon-minus-sign:before {
  content: "\e082";
}
.glyphicon-remove-sign:before {
  content: "\e083";
}
.glyphicon-ok-sign:before {
  content: "\e084";
}
.glyphicon-question-sign:before {
  content: "\e085";
}
.glyphicon-info-sign:before {
  content: "\e086";
}
.glyphicon-screenshot:before {
  content: "\e087";
}
.glyphicon-remove-circle:before {
  content: "\e088";
}
.glyphicon-ok-circle:before {
  content: "\e089";
}
.glyphicon-ban-circle:before {
  content: "\e090";
}
.glyphicon-arrow-left:before {
  content: "\e091";
}
.glyphicon-arrow-right:before {
  content: "\e092";
}
.glyphicon-arrow-up:before {
  content: "\e093";
}
.glyphicon-arrow-down:before {
  content: "\e094";
}
.glyphicon-share-alt:before {
  content: "\e095";
}
.glyphicon-resize-full:before {
  content: "\e096";
}
.glyphicon-resize-small:before {
  content: "\e097";
}
.glyphicon-exclamation-sign:before {
  content: "\e101";
}
.glyphicon-gift:before {
  content: "\e102";
}
.glyphicon-leaf:before {
  content: "\e103";
}
.glyphicon-fire:before {
  content: "\e104";
}
.glyphicon-eye-open:before {
  content: "\e105";
}
.glyphicon-eye-close:before {
  content: "\e106";
}
.glyphicon-warning-sign:before {
  content: "\e107";
}
.glyphicon-plane:before {
  content: "\e108";
}
.glyphicon-calendar:before {
  content: "\e109";
}
.glyphicon-random:before {
  content: "\e110";
}
.glyphicon-comment:before {
  content: "\e111";
}
.glyphicon-magnet:before {
  content: "\e112";
}
.glyphicon-chevron-up:before {
  content: "\e113";
}
.glyphicon-chevron-down:before {
  content: "\e114";
}
.glyphicon-retweet:before {
  content: "\e115";
}
.glyphicon-shopping-cart:before {
  content: "\e116";
}
.glyphicon-folder-close:before {
  content: "\e117";
}
.glyphicon-folder-open:before {
  content: "\e118";
}
.glyphicon-resize-vertical:before {
  content: "\e119";
}
.glyphicon-resize-horizontal:before {
  content: "\e120";
}
.glyphicon-hdd:before {
  content: "\e121";
}
.glyphicon-bullhorn:before {
  content: "\e122";
}
.glyphicon-bell:before {
  content: "\e123";
}
.glyphicon-certificate:before {
  content: "\e124";
}
.glyphicon-thumbs-up:before {
  content: "\e125";
}
.glyphicon-thumbs-down:before {
  content: "\e126";
}
.glyphicon-hand-right:before {
  content: "\e127";
}
.glyphicon-hand-left:before {
  content: "\e128";
}
.glyphicon-hand-up:before {
  content: "\e129";
}
.glyphicon-hand-down:before {
  content: "\e130";
}
.glyphicon-circle-arrow-right:before {
  content: "\e131";
}
.glyphicon-circle-arrow-left:before {
  content: "\e132";
}
.glyphicon-circle-arrow-up:before {
  content: "\e133";
}
.glyphicon-circle-arrow-down:before {
  content: "\e134";
}
.glyphicon-globe:before {
  content: "\e135";
}
.glyphicon-wrench:before {
  content: "\e136";
}
.glyphicon-tasks:before {
  content: "\e137";
}
.glyphicon-filter:before {
  content: "\e138";
}
.glyphicon-briefcase:before {
  content: "\e139";
}
.glyphicon-fullscreen:before {
  content: "\e140";
}
.glyphicon-dashboard:before {
  content: "\e141";
}
.glyphicon-paperclip:before {
  content: "\e142";
}
.glyphicon-heart-empty:before {
  content: "\e143";
}
.glyphicon-link:before {
  content: "\e144";
}
.glyphicon-phone:before {
  content: "\e145";
}
.glyphicon-pushpin:before {
  content: "\e146";
}
.glyphicon-usd:before {
  content: "\e148";
}
.glyphicon-gbp:before {
  content: "\e149";
}
.glyphicon-sort:before {
  content: "\e150";
}
.glyphicon-sort-by-alphabet:before {
  content: "\e151";
}
.glyphicon-sort-by-alphabet-alt:before {
  content: "\e152";
}
.glyphicon-sort-by-order:before {
  content: "\e153";
}
.glyphicon-sort-by-order-alt:before {
  content: "\e154";
}
.glyphicon-sort-by-attributes:before {
  content: "\e155";
}
.glyphicon-sort-by-attributes-alt:before {
  content: "\e156";
}
.glyphicon-unchecked:before {
  content: "\e157";
}
.glyphicon-expand:before {
  content: "\e158";
}
.glyphicon-collapse-down:before {
  content: "\e159";
}
.glyphicon-collapse-up:before {
  content: "\e160";
}
.glyphicon-log-in:before {
  content: "\e161";
}
.glyphicon-flash:before {
  content: "\e162";
}
.glyphicon-log-out:before {
  content: "\e163";
}
.glyphicon-new-window:before {
  content: "\e164";
}
.glyphicon-record:before {
  content: "\e165";
}
.glyphicon-save:before {
  content: "\e166";
}
.glyphicon-open:before {
  content: "\e167";
}
.glyphicon-saved:before {
  content: "\e168";
}
.glyphicon-import:before {
  content: "\e169";
}
.glyphicon-export:before {
  content: "\e170";
}
.glyphicon-send:before {
  content: "\e171";
}
.glyphicon-floppy-disk:before {
  content: "\e172";
}
.glyphicon-floppy-saved:before {
  content: "\e173";
}
.glyphicon-floppy-remove:before {
  content: "\e174";
}
.glyphicon-floppy-save:before {
  content: "\e175";
}
.glyphicon-floppy-open:before {
  content: "\e176";
}
.glyphicon-credit-card:before {
  content: "\e177";
}
.glyphicon-transfer:before {
  content: "\e178";
}
.glyphicon-cutlery:before {
  content: "\e179";
}
.glyphicon-header:before {
  content: "\e180";
}
.glyphicon-compressed:before {
  content: "\e181";
}
.glyphicon-earphone:before {
  content: "\e182";
}
.glyphicon-phone-alt:before {
  content: "\e183";
}
.glyphicon-tower:before {
  content: "\e184";
}
.glyphicon-stats:before {
  content: "\e185";
}
.glyphicon-sd-video:before {
  content: "\e186";
}
.glyphicon-hd-video:before {
  content: "\e187";
}
.glyphicon-subtitles:before {
  content: "\e188";
}
.glyphicon-sound-stereo:before {
  content: "\e189";
}
.glyphicon-sound-dolby:before {
  content: "\e190";
}
.glyphicon-sound-5-1:before {
  content: "\e191";
}
.glyphicon-sound-6-1:before {
  content: "\e192";
}
.glyphicon-sound-7-1:before {
  content: "\e193";
}
.glyphicon-copyright-mark:before {
  content: "\e194";
}
.glyphicon-registration-mark:before {
  content: "\e195";
}
.glyphicon-cloud-download:before {
  content: "\e197";
}
.glyphicon-cloud-upload:before {
  content: "\e198";
}
.glyphicon-tree-conifer:before {
  content: "\e199";
}
.glyphicon-tree-deciduous:before {
  content: "\e200";
}
.glyphicon-cd:before {
  content: "\e201";
}
.glyphicon-save-file:before {
  content: "\e202";
}
.glyphicon-open-file:before {
  content: "\e203";
}
.glyphicon-level-up:before {
  content: "\e204";
}
.glyphicon-copy:before {
  content: "\e205";
}
.glyphicon-paste:before {
  content: "\e206";
}
.glyphicon-alert:before {
  content: "\e209";
}
.glyphicon-equalizer:before {
  content: "\e210";
}
.glyphicon-king:before {
  content: "\e211";
}
.glyphicon-queen:before {
  content: "\e212";
}
.glyphicon-pawn:before {
  content: "\e213";
}
.glyphicon-bishop:before {
  content: "\e214";
}
.glyphicon-knight:before {
  content: "\e215";
}
.glyphicon-baby-formula:before {
  content: "\e216";
}
.glyphicon-tent:before {
  content: "\26fa";
}
.glyphicon-blackboard:before {
  content: "\e218";
}
.glyphicon-bed:before {
  content: "\e219";
}
.glyphicon-apple:before {
  content: "\f8ff";
}
.glyphicon-erase:before {
  content: "\e221";
}
.glyphicon-hourglass:before {
  content: "\231b";
}
.glyphicon-lamp:before {
  content: "\e223";
}
.glyphicon-duplicate:before {
  content: "\e224";
}
.glyphicon-piggy-bank:before {
  content: "\e225";
}
.glyphicon-scissors:before {
  content: "\e226";
}
.glyphicon-bitcoin:before {
  content: "\e227";
}
.glyphicon-btc:before {
  content: "\e227";
}
.glyphicon-xbt:before {
  content: "\e227";
}
.glyphicon-yen:before {
  content: "\00a5";
}
.glyphicon-jpy:before {
  content: "\00a5";
}
.glyphicon-ruble:before {
  content: "\20bd";
}
.glyphicon-rub:before {
  content: "\20bd";
}
.glyphicon-scale:before {
  content: "\e230";
}
.glyphicon-ice-lolly:before {
  content: "\e231";
}
.glyphicon-ice-lolly-tasted:before {
  content: "\e232";
}
.glyphicon-education:before {
  content: "\e233";
}
.glyphicon-option-horizontal:before {
  content: "\e234";
}
.glyphicon-option-vertical:before {
  content: "\e235";
}
.glyphicon-menu-hamburger:before {
  content: "\e236";
}
.glyphicon-modal-window:before {
  content: "\e237";
}
.glyphicon-oil:before {
  content: "\e238";
}
.glyphicon-grain:before {
  content: "\e239";
}
.glyphicon-sunglasses:before {
  content: "\e240";
}
.glyphicon-text-size:before {
  content: "\e241";
}
.glyphicon-text-color:before {
  content: "\e242";
}
.glyphicon-text-background:before {
  content: "\e243";
}
.glyphicon-object-align-top:before {
  content: "\e244";
}
.glyphicon-object-align-bottom:before {
  content: "\e245";
}
.glyphicon-object-align-horizontal:before {
  content: "\e246";
}
.glyphicon-object-align-left:before {
  content: "\e247";
}
.glyphicon-object-align-vertical:before {
  content: "\e248";
}
.glyphicon-object-align-right:before {
  content: "\e249";
}
.glyphicon-triangle-right:before {
  content: "\e250";
}
.glyphicon-triangle-left:before {
  content: "\e251";
}
.glyphicon-triangle-bottom:before {
  content: "\e252";
}
.glyphicon-triangle-top:before {
  content: "\e253";
}
.glyphicon-console:before {
  content: "\e254";
}
.glyphicon-superscript:before {
  content: "\e255";
}
.glyphicon-subscript:before {
  content: "\e256";
}
.glyphicon-menu-left:before {
  content: "\e257";
}
.glyphicon-menu-right:before {
  content: "\e258";
}
.glyphicon-menu-down:before {
  content: "\e259";
}
.glyphicon-menu-up:before {
  content: "\e260";
}





/*bootstrap grid system only
u don't need all bootstrap, u can compile only grid
*/
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.row {
  margin-left: -15px;
  margin-right: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}
.col-xs-pull-12 {
  right: 100%;
}
.col-xs-pull-11 {
  right: 91.66666667%;
}
.col-xs-pull-10 {
  right: 83.33333333%;
}
.col-xs-pull-9 {
  right: 75%;
}
.col-xs-pull-8 {
  right: 66.66666667%;
}
.col-xs-pull-7 {
  right: 58.33333333%;
}
.col-xs-pull-6 {
  right: 50%;
}
.col-xs-pull-5 {
  right: 41.66666667%;
}
.col-xs-pull-4 {
  right: 33.33333333%;
}
.col-xs-pull-3 {
  right: 25%;
}
.col-xs-pull-2 {
  right: 16.66666667%;
}
.col-xs-pull-1 {
  right: 8.33333333%;
}
.col-xs-pull-0 {
  right: auto;
}
.col-xs-push-12 {
  left: 100%;
}
.col-xs-push-11 {
  left: 91.66666667%;
}
.col-xs-push-10 {
  left: 83.33333333%;
}
.col-xs-push-9 {
  left: 75%;
}
.col-xs-push-8 {
  left: 66.66666667%;
}
.col-xs-push-7 {
  left: 58.33333333%;
}
.col-xs-push-6 {
  left: 50%;
}
.col-xs-push-5 {
  left: 41.66666667%;
}
.col-xs-push-4 {
  left: 33.33333333%;
}
.col-xs-push-3 {
  left: 25%;
}
.col-xs-push-2 {
  left: 16.66666667%;
}
.col-xs-push-1 {
  left: 8.33333333%;
}
.col-xs-push-0 {
  left: auto;
}
.col-xs-offset-12 {
  margin-left: 100%;
}
.col-xs-offset-11 {
  margin-left: 91.66666667%;
}
.col-xs-offset-10 {
  margin-left: 83.33333333%;
}
.col-xs-offset-9 {
  margin-left: 75%;
}
.col-xs-offset-8 {
  margin-left: 66.66666667%;
}
.col-xs-offset-7 {
  margin-left: 58.33333333%;
}
.col-xs-offset-6 {
  margin-left: 50%;
}
.col-xs-offset-5 {
  margin-left: 41.66666667%;
}
.col-xs-offset-4 {
  margin-left: 33.33333333%;
}
.col-xs-offset-3 {
  margin-left: 25%;
}
.col-xs-offset-2 {
  margin-left: 16.66666667%;
}
.col-xs-offset-1 {
  margin-left: 8.33333333%;
}
.col-xs-offset-0 {
  margin-left: 0%;
}
@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
  .col-md-pull-12 {
    right: 100%;
  }
  .col-md-pull-11 {
    right: 91.66666667%;
  }
  .col-md-pull-10 {
    right: 83.33333333%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-8 {
    right: 66.66666667%;
  }
  .col-md-pull-7 {
    right: 58.33333333%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-5 {
    right: 41.66666667%;
  }
  .col-md-pull-4 {
    right: 33.33333333%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-2 {
    right: 16.66666667%;
  }
  .col-md-pull-1 {
    right: 8.33333333%;
  }
  .col-md-pull-0 {
    right: auto;
  }
  .col-md-push-12 {
    left: 100%;
  }
  .col-md-push-11 {
    left: 91.66666667%;
  }
  .col-md-push-10 {
    left: 83.33333333%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-8 {
    left: 66.66666667%;
  }
  .col-md-push-7 {
    left: 58.33333333%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-5 {
    left: 41.66666667%;
  }
  .col-md-push-4 {
    left: 33.33333333%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-2 {
    left: 16.66666667%;
  }
  .col-md-push-1 {
    left: 8.33333333%;
  }
  .col-md-push-0 {
    left: auto;
  }
  .col-md-offset-12 {
    margin-left: 100%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-11 {
    width: 91.66666667%;
  }
  .col-lg-10 {
    width: 83.33333333%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-8 {
    width: 66.66666667%;
  }
  .col-lg-7 {
    width: 58.33333333%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-5 {
    width: 41.66666667%;
  }
  .col-lg-4 {
    width: 33.33333333%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-2 {
    width: 16.66666667%;
  }
  .col-lg-1 {
    width: 8.33333333%;
  }
  .col-lg-pull-12 {
    right: 100%;
  }
  .col-lg-pull-11 {
    right: 91.66666667%;
  }
  .col-lg-pull-10 {
    right: 83.33333333%;
  }
  .col-lg-pull-9 {
    right: 75%;
  }
  .col-lg-pull-8 {
    right: 66.66666667%;
  }
  .col-lg-pull-7 {
    right: 58.33333333%;
  }
  .col-lg-pull-6 {
    right: 50%;
  }
  .col-lg-pull-5 {
    right: 41.66666667%;
  }
  .col-lg-pull-4 {
    right: 33.33333333%;
  }
  .col-lg-pull-3 {
    right: 25%;
  }
  .col-lg-pull-2 {
    right: 16.66666667%;
  }
  .col-lg-pull-1 {
    right: 8.33333333%;
  }
  .col-lg-pull-0 {
    right: auto;
  }
  .col-lg-push-12 {
    left: 100%;
  }
  .col-lg-push-11 {
    left: 91.66666667%;
  }
  .col-lg-push-10 {
    left: 83.33333333%;
  }
  .col-lg-push-9 {
    left: 75%;
  }
  .col-lg-push-8 {
    left: 66.66666667%;
  }
  .col-lg-push-7 {
    left: 58.33333333%;
  }
  .col-lg-push-6 {
    left: 50%;
  }
  .col-lg-push-5 {
    left: 41.66666667%;
  }
  .col-lg-push-4 {
    left: 33.33333333%;
  }
  .col-lg-push-3 {
    left: 25%;
  }
  .col-lg-push-2 {
    left: 16.66666667%;
  }
  .col-lg-push-1 {
    left: 8.33333333%;
  }
  .col-lg-push-0 {
    left: auto;
  }
  .col-lg-offset-12 {
    margin-left: 100%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-0 {
    margin-left: 0%;
  }
}
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
  clear: both;
}
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}
.hide {
  display: none !important;
}
.show {
  display: block !important;
}
.invisible {
  visibility: hidden;
}
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.hidden {
  display: none !important;
}
.affix {
  position: fixed;
}

/*the end of bootstrap grid*/

/*Downloaded from https://www.codeseek.co/andrzejsebastianchmiel/one-page_work-in-progress-YWmqQv */
<!-- gallery js start-->
$(document).ready(function(){

    $(".filter-button").click(function(){
        var value = $(this).attr('data-filter');
        
        if(value == "all")
        {
            //$('.filter').removeClass('hidden');
            $('.filter').show('1000');
        }
        else
        {
//            $('.filter[filter-item="'+value+'"]').removeClass('hidden');
//            $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
            $(".filter").not('.'+value).hide('3000');
            $('.filter').filter('.'+value).show('3000');
            
        }
    });
    
    if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");

});
<!--gallery js end-->
<!--/ the and of "gallery bootstrap"-->


<!--burger js here-->
$(function() {
  
  $(".menu-link").click(function(e) {
    e.preventDefault();
    
    $(".menu-overlay").toggleClass("open");
    $(".menu").toggleClass("open");

  });
	
});

Comments