@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: 'BabyBlocks';
  src: url('fonts/baby-blocks.ttf');
  font-style: normal;
  font-weight: 100;
}

@font-face {
  font-family: 'Pixel Block BB';
  src: url('fonts/pixel_block_bb.ttf');
  font-style: normal;
  font-weight: 100;
}

body {padding:0; margin:0 auto; background-color:#000000;}

div#main>div {
	width:100vw; 
	height:100vh; 
	-webkit-transition: all 1s ease-in;
  	-moz-transition: all 1s ease-in;
  	-o-transition: all 1s ease-in;
  	transition: all 1s ease-in;
	position:absolute;
	z-index:100;
	top:0; left:0;
	opacity:0;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	}
	
div#main>div.active {opacity:1;}

#main .bg1 {background-image:url('img/petrjanda-brainwork-bg1.jpg');}
#main .bg2 {background-image:url('img/petrjanda-brainwork-bg2.jpg');}
#main .bg3 {background-image:url('img/petrjanda-brainwork-bg3.jpg');}

.container, .container-text {
	width:100%; 
	max-width:86%;
	padding:0; 
	margin:0 auto; 
	position:fixed; 
	display: flex;
	left:7%;
    align-items: center;
	flex-direction: column;
	z-index: 300;}

.container {height: 100vh; justify-content: space-evenly; top: 0;}
.container-text {height: 40vh; justify-content: space-between; top: 50%;}

h1 {font-family: 'Pixel Block BB', sans-serif;
    margin: 0 auto;
    padding: 0; padding-top:150px;
    text-transform: lowercase;
    font-size: 7.4vw;
    text-align: center;
    color: #ffffff;}

img.img-responsive {max-width:100%;}

p {font-family:'Roboto', sans-serif; font-size:17px; line-height: 150%; color:#ffffff; font-weight:300; text-align:right; width:100%; margin:23px auto; padding:0;}
a {color:#ffffff; text-decoration:none;}
a:hover {text-decoration:underline;}

@media (min-width: 768px) {
	.container {top:45%; justify-content: flex-start;}
	h1 {font-size:5.7vw;}
}

@media (min-width: 992px) {
	p {font-size:20px;}
}

@media (min-width: 1200px) {
	h1 {font-size:4.8vw;}
}

/* version 2 */
.background-block>div {
	width:50vw; 
	height:50vh;
	position:absolute; 
	background-size:cover; 
	background-position:center; 
	z-index:100; 
	overflow:hidden; 
	opacity:0;
	-webkit-transition: all 1s ease-in;
  	-moz-transition: all 1s ease-in;
  	-o-transition: all 1s ease-in;
  	transition: all 1s ease-in;
	}
	
.background-block>div.active {opacity:1;}

#background-1>div {top:0; left:0;}
#background-2>div {top:0; right:0; }
#background-3>div {bottom:0; left:0;}
#background-4>div {bottom:0; right:0;}

@media (min-width: 768px) {
	.container-text {top: 60%;}
	.background-block>div {width:50vw; height:50vh;}
}

#background-1 .bg1 {background-image:url('img/petrjanda-brainwork-bg1-1.jpg');}
#background-1 .bg2 {background-image:url('img/petrjanda-brainwork-bg2-1.jpg');}
#background-1 .bg3 {background-image:url('img/petrjanda-brainwork-bg3-1.jpg');}

#background-2 .bg1 {background-image:url('img/petrjanda-brainwork-bg1-2.jpg');}
#background-2 .bg2 {background-image:url('img/petrjanda-brainwork-bg2-2.jpg');}
#background-2 .bg3 {background-image:url('img/petrjanda-brainwork-bg3-2.jpg');}

#background-3 .bg1 {background-image:url('img/petrjanda-brainwork-bg1-3.jpg');}
#background-3 .bg2 {background-image:url('img/petrjanda-brainwork-bg2-3.jpg');}
#background-3 .bg3 {background-image:url('img/petrjanda-brainwork-bg3-3.jpg');}

#background-4 .bg1 {background-image:url('img/petrjanda-brainwork-bg1-4.jpg');}
#background-4 .bg2 {background-image:url('img/petrjanda-brainwork-bg2-4.jpg');}
#background-4 .bg3 {background-image:url('img/petrjanda-brainwork-bg3-4.jpg');}