body {
    margin: 0px;
    padding: 0px;
    font-family: "industry", sans-serif;
    font-size: 13.5px;
    line-height: 1.5em;
}
.videoContainer 
{
    position:relative;
    height:115vh;
    width:100%;
    overflow: hidden;
    background-color: black;
    background-image: url(../video.jpg);
    background-size: cover;
}
.videoContainer video 
{
    position:fixed;
    min-width: 100%;
    min-height: 100%;
    opacity: 1;
}
.intro {
    position: fixed;
    z-index: 9;
    width: 100%;
    height: 100vh;
    text-align: center;
    background-color: hsla(212, 47%, 7%, 0.49);
    color: white;
}

.vcenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%);
}
.vcenter:after {
    position: absolute;
    bottom: -5rem;
    left: 50%;
    content: "";
    display: block;
    /* By using an em scale, the arrows will size with the font */
    width: 1em;
    height: 1em;
    transform-origin: center bottom;
    border-right: 0.33em solid white;
    border-bottom: 0.33em solid white;
    transform: translate3d(-50%, 0, 0) rotate(45deg);
    margin-left: -0.5rem;
    animation-name: bounce;
    animation-duration: 1s;
    animation-delay: 3s;
    animation-iteration-count: 2;
}
.name {
    font-size: 2rem;
    font-weight: 200;
}
a img {
    border-width: 0px;
}
.skills {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1em;
    margin-top: 1rem;
    text-shadow: 1px 1px 3px #1E4046;
}
.content {
   position: absolute;
   margin-bottom: 0px;     
   margin-top: 0vh;
   background-color: white;
   padding: 0;
   width: 100%;
   z-index: 11;
    font-size: 1em;
}
.lukasz {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 0;
    left: 50%;
}
.lukasz img {
    border: 10px solid white;
    max-width: 10rem;
    height: auto;
    border-radius: 100%;
}
.introduction {
    max-width: 60rem;
    margin: 6rem auto 3rem auto;
    text-align: center;
    font-size: 1.66rem;
    line-height: 1.5em;
    font-weight: 200;
    font-style: italic;
    padding: 0 2.33%;
}
.offer, .skillset, .experience  {
    max-width: 80rem;
    margin: 7rem auto;
    text-align: center;
    border-top: 1px solid lightgray;
    padding-top: 7rem;
}

.offer-areas, .skillset-skills {
    list-style: none;
    margin: 0;
    padding: 0;
}
.skillset-conceptual, .skillset-technical {
	vertical-align: top; 
    display: inline-block;
    width: 95%;
    margin: 0 2.33%;
} 
.offer-areas li {
	display: inline-block;
    width: 95%;
    margin: 0 2.33%;
    vertical-align: top;
}

.skillset-skills li:after {
    content: " •";
    color: #B4E060;
}
.skillset-skills li:before {
    content: "• ";
    color: #B4E060;
}
h2 {
   font-size: 3rem;
    font-weight: 200;
}

h2+p {
    margin-top: -1rem;
    margin-bottom: 3rem;
}

.experience-entry:after {
    content: "•";
    color: #FF7800;
    font-size: 2rem;
}
.experience-entry:last-child:after {
    display: none;
}
.experience-entry h3 {
    margin-bottom: 0;
}
.experience-entry {
    max-width: 60rem;
    margin: 0 auto;
}
.experience-entry h4 {
    font-size: 1rem;
    color: #FF7800;
    font-weight: 200;
    margin:  0;;
}
date {
    font-size: 1rem;
    margin: 0;
    font-weight: 200;
    font-style: italic;
    display: block;
    color: #FF7800;
}
footer {
    background-color: #1E4046;
    width: 100%;
    padding: 4rem 0;
    color: white;
    text-align: center;
}
.contact {
    margin: 0 auto;
    list-style: none;
    padding: 0;
    max-width: 30rem;
    margin-top: 4rem;
}
.contact li {
   width: 20.5%;
    margin: 0 6%;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    opacity: 0.7;
    transition-duration: .5s;
}
.contact li:hover {
        opacity: 1;
}
.contact li:nth-child(2) {
    margin-top: 3rem;
}
.contact img {
    max-width: 100%;
    height: auto;
}
.small {
    font-size: 0.66em;
}
a {
    color: #03A9F4;
}
.button {
    border: 1px solid #03A9F4;
    padding: 1em 2em;
    text-decoration: none;
    margin: 3em 1rem;
    display: inline-block;
    transition-duration: .5s;
    min-width: 8rem;
    border-radius: 3px;
    font-size: 1rem;
    text-decoration: none;
    font-style: normal;
}
.button:hover {
    background-color: #eaf5fa;
    
}

video {
	display: none;
}
.videoautoplay video {
    display: block;
}
@media screen and (min-width: 480px) {
    body {
       font-size: 18px;
    }
    .skillset-conceptual, .skillset-technical {
	vertical-align: top; 
    display: inline-block;
    width: 45%;
    margin: 0 2.33%;
} 
.offer-areas li {
	display: inline-block;
    width: 45%;
    margin: 0 2.33%;
    vertical-align: top;
}
.name {
    font-size: 2rem;
    font-weight: 200;
}
.skills {
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1em;
    margin-top: 1rem;
    text-shadow: 1px 1px 3px #1E4046;
}
}
@media screen and (min-width: 960px) { 
.offer-areas li {
    width: 20%;
    margin: 0 2.33%;
}
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(-50%,0,0) rotate(45deg);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(-50%, -30px, 0) rotate(45deg);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(-50%, -15px, 0) rotate(45deg);
  }

  90% {
    transform: translate3d(-50%,-4px,0) rotate(45deg);
  }
}