*{
	padding: 0;
	margin: 0;  
  	scroll-padding-top: calc(47px + 3vw);
  	
}


.body {
  overflow: auto;
  background-image: url(img/background.png);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  height: 100vh;  
    background-repeat: repeat;
}


.banner{
	
	display: grid;
	grid-template-columns: 350px 50px 800px;
	grid-template-rows: 51px 54px;
	transform-origin: top left;
    	z-index: 1;
}



.szymon{
user-scalable=no
	grid-column: 1/1;
	grid-row: 1/-1;
	
   	text-decoration: none;
	color: white;
	font-size: 52px;
	font-family: 'TechnicalFont';
	text-align: left;
	margin-left: 15px;
	padding: 15px 0;
    	z-index: 1;
	    

}


.contact{
	display: grid;
	grid-template-columns: .6fr .7fr .3fr 1fr;
	grid-row: 1/2;
	grid-column: 3/-1;
	align-items: center;
	color: #333333;
	font-size: 22px;
	font-family: 'TechnicalFont';

}

.contwh{
  background-image:  #333333;
	border-left: 55px solid transparent;
	border-right: 55px solid white;
	border-bottom: 55px solid white;

}

.contwh, .contact{
	grid-row: 1/2;
	grid-column: 3/-1;
}



.navbar{
grid-column: span 5;

}

.menuback{
  	border-left: 55px solid transparent;
  	border-right: 55px solid #ffcc00;
	border-bottom: 54px solid #ffcc00;
	margin-left: -45px;

}

.navbar, .menuback{

	
	grid-row: 2/3;
	grid-column: 3/-1;
}

.navbar	ul{
text-align: justify;
    padding: 0;

    margin-left: 20px;
    margin-right: 20px;
}

ul::after {
    content: '';
    display: inline-block;
    width: 100%;
}

.navbar	ul li{
    list-style: none;
    display: inline-block;
    font-family: 'TechnicalFont';
    margin-top: 0px;
    margin-bottom: 0px;
    position: relative;
    top: 10px;
}


.navbar	ul li a{
    text-decoration: none;
    color: black;
    font-size: 32px;
    transition: .4s;
}


.header{
	display:grid;
  	grid-template-columns: 70px 230px auto 500px;
	grid-template-rows: 50px auto 50px;
	
	height: 400px;
	width: 1200px;
	position: relative;
	transform-origin: top left;
  background-image: url(img/header1.png);
  
  

}

.picture{
	background-color:rgba(0, 0, 0, 0.5);
	grid-row: 2/3;
	grid-column: 2/3;
	vertical-align: center;
}

.headexp{
	grid-row: 2/2;
	grid-column: 4/-1;
	text-align: right;
	text-decoration: none;
	margin-top: 20px;
	color: white;
	font-size: 32px;
    	font-family: 'TechnicalFont';
    	margin-right: 20px;
}

.resume{
	text-align: center;
	font-size: 32px;
    	font-family: 'TechnicalFont';
    	position: absolute; 
    	bottom: 20px; right: 0;
    	display: table-cell;
   	vertical-align: middle;
}

.resumetxt{
    	text-decoration: none;
    	color: black;
	padding: 7px 20px 7px 20px;
	background-color: #ffcc00;
	height: 70%;
  	text-decoration: none;
   	transition: .4s;

}

.headline{
	grid-row: 2/2;
	grid-column: 4/-1;
	text-align: left;
	margin-top: 0px;
	
	border-left: 300px solid transparent;
	border-right: 1px solid transparent;
	border-bottom: 1px solid transparent;
	border-top: 1px solid #cccccc;
	opacity: 85%;
}

.headline, .headexp{
	
	
	
}


.szymon, .szbar{

	grid-column: 1/1;
	grid-row: 1/-1;
}

.szbar{
	height: 0px;
	border-top: 90px solid #333333;
	border-bottom: 15px solid white;
    	z-index: 1;
}

.triwh{
	border-bottom: 105px solid white;
	border-left: 105px solid  #333333;
	width: 50px;
	margin-left: -15px;
	
}

@font-face{
	font-family: "TechnicalFont";
	src: url("src/ShareTech-Regular.ttf");
}

.navbar ul li a.active,
.navbar ul li a:hover{
	color:white;
	/background: white;
	/border-radius: 4px;
 
}

.resumetxt:hover{
	color:white;
	/background: white;
	/border-radius: 4px;
 
}


.content{
	position: relative;

}

.whatido{
	background-color: white;
	align-items: center;
	text-align: center;
    font-family: 'TechnicalFont';
  padding: 2vw 0;
    
	
}

.breakline{
	
  border: 2px solid transparent;
  border-top: 1px solid #ffcc00;
	width: 7vw;
  margin: auto;
  
	
}

.heading{
   	 color: #333333;
	
}

.projectsgallery{
	display: flex;
	margin: auto;
	width: 100%;
	flex-wrap: wrap;
	align-items: center;
 	justify-content: center;
}

.projects{
 	padding: 0.5vw 0.5vw;
  transition: .8s;  
  
  position: relative; 
  top: 2px;
  
}

.projimg{
  position: relative;
  text-align: center;
  color: white;
  padding: 0 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.centered {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  
}

.readbutton{
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space:nowrap;
  background-color: #ffcc00;
  border: none;
  color: black;
  font-size: 22px;
  margin: auto;
  border: 0.5em solid #ffcc00;
  border-radius: 20px;
  opacity: 0;
  transition: .8s;
  text-decoration: none;
}



.about{

	background-color: #ececec;
	align-items: center;
	text-align: center;
    font-size: 1vw;
    font-family: 'TechnicalFont';
    padding: 0 0;
    
	
}

.work{
	background-color: white;
	align-items: center;
	text-align: center;
    font-size: 22px;
    font-family: 'TechnicalFont';
  padding: 2vw 0;

	
}

.worktime{
	display: grid;
	grid-template-columns: .2fr .06fr 1fr;
	grid-template-rows: .3fr 2.4fr .3fr 1.4fr .3fr 4.7fr .3fr 2fr .3fr 2.7fr;
	grid-row: 1/2;
	grid-column: 3/-1;
	align-items: left;
  	padding: 2vw 0 0 0;
  	width: 90%;
  	margin: auto;
    	font-size: 28px;
}


.education{
	background-color: #333333;
	align-items: center;
	text-align: center;
    font-size: 22px;
    font-family: 'TechnicalFont';
    padding: 0px 0;
color: white;	
}


.edutime{
	display: grid;
	grid-template-columns: .2fr .06fr 1fr;
	grid-template-rows: .5fr 3fr .5fr 3fr;
	grid-row: 1/2;
	grid-column: 3/-1;
	align-items: left;
  	padding: 2vw 0 0 0;
  	width: 90%;
  	margin: auto;
    	font-size: 28px;
}

.verticalline{
  position: relative;
  left: 50%;
  border-left: 2px solid #ffcc00;
  
}

.horizontalline{
  position: relative;
  top: 25%;
  width: 25%;
  left: 50%;
  border-top: 2px solid #ffcc00;

	
}


.contactmain{

	background-color: white;
	align-items: center;
	text-align: center;
   	 font-size: 22px;
    	font-family: 'TechnicalFont';

	
}



.prdiv{
 	padding: 13px 13px;
	background-repeat: no-repeat;
	background-position: center;
	width: 225px;
	height: 275px;
	margin: auto;
}



.text{

  padding: 1.2vw 0;
  width: 90%;
  text-align: justify;
  margin: auto;
  
}
.textcontact{

    font-size: 2vw;
  width: 80%;
  margin: auto;
  
}


.textabout{
  text-indent: 5%;
  text-align: justify;
  padding: 1.5vw 0;
  width: 90%;
  margin: auto;
}

.skills{
	background-color: white;
	align-items: center;
	text-align: center;
    font-size: 22px;
    font-family: 'TechnicalFont';
  padding: 2vw 0;
}

ul.a{

text-align: left;
text-size: 22px;
margin-left: 5em;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
	list-style-type: none;
	
}

ul.b{
text-align: left;
text-size: 22px;
margin-left: 6em;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
	
}

.sticky {
	
  	position: fixed;
  	top: 0px;
	width: 100%;
	max-width:1200px;
	height: 54.9px;
}

.stickyH{

	margin-top: 105px;

}



.fa-star-half-o{
color: #ffcc00;
size:15px
}

.fa-star-o{
color: #333333;
size:15px
}

.fa-star{
color: #ffcc00;
}

.copyright{
	background-color: #333333;
	color: white;
	font-size: 12px;
	font-family: 'TechnicalFont';

}

.static:hover {
  opacity:0;
}

.article{
	position: relative;
	background-color: white;
}


.art-text{
	width: 90%;
	margin: auto;
	font-size: 22px;
	font-family: 'TechnicalFont';
	text-align: left;
 	text-indent: 1em;
	text-align: justify;
 	
	
}

.art-title{
	font-size: 66px;
	padding: 1em 0 0.2em 0;
	text-indent: 0;
}

.tag{
    background-color: #ffcc00;
    margin-left: 0.2em;
    border: 0.2em solid;
    border-color: #ffcc00;
    border-radius: 0.5em;
     text-indent: 0;
}

.art-paragraph{
	padding: 0.5em 0;
	text-decoration: none;
	color: black;

}

.art-head{
	padding: 0.5em 0 0 0;
	text-decoration: none;
	color: black;
	font-size: 36px

}

.art-fig{
	text-align: center;
	font-style: italic;
}

.art-img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.art-vid{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.canv{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	display: block;

}

.art-gallery{
	display: grid;
	grid-template-columns: 10% 80% 10%;
	grid-template-rows: .2fr .6fr .2fr;
	width: 90%;
	margin: auto;
	
	
}

.art-button{
	
	display: flex;
	align-items: center;
	background-color: #333333;
	position: relative;
	color:#ffcc00;
 
	
}

.CADmodel{
	  margin-left: auto;
	  margin-right: auto;

}




.basicstyle{
background-color:#333333;
color:#ffcc00;
}

.art-button.active,
.art-button:hover{
	background-color:#ffcc00;
	color:#333333;
 
}