/*#e5dd54; gelb -----background*/
/*#656561; ev #f5f5f5*/
/*#656561; grey*/


body {
font-family: 'Montserrat', sans-serif !important;
font-weight: 400;
background: #f5f5f5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
::-moz-selection { /* Code for Firefox */
background: #e5dd54;
}

::selection {
background: #e5dd54;
}

/*NAV MENU*/
nav {
width: 100vw;
padding: 13px 22px;
position: absolute;
position: fixed;
z-index: 2;
background: blur(3px);
}
nav ul {
float: right;
}
nav ul li {
display: inline-block;
float: left;
}
nav ul li:not(:first-child) {
margin-left: 25px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #f5f5f5;
font-size: 1.1em;
text-decoration: none;
letter-spacing: 0.04em;
}
nav ul li a:hover {
color: #f5f5f5;
text-decoration: none;
}

#nav:checked + .nav-open {
transform: rotate(45deg);
}
#nav:checked + .nav-open i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked + .nav-open i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-open i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-open i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-container {
z-index: 9990;
opacity: 1;
}
#nav:checked ~ .nav-container ul li a {
opacity: 1;
transform: translateY(0);
}
.hidden {
display: none;
}

/*HOME*/

header {
height: 100vh;
/*filter: grayscale(100%);*/
background-size: cover;
background-repeat: no-repeat;
-webkit-animation: changeBg 30s infinite;
}

@-webkit-keyframes changeBg
{
0%   {background-image: url("../img/zurichmain.jpg");}
25%  {background-image: url("../img/zurichmain.jpg");}
50%  {background-image: url("../img/zurichzwei.jpg");}
100% {background-image: url("../img/zurichdrei.jpg");}
}

.diagonal{
position: absolute;
bottom: -30px;
left: 0;
background: none;
z-index: 1;
transform-origin: 50% 50% 0px;
}

path {
fill: #f5f5f5;
stroke: #f5f5f5;
stroke-width: 4;
}

.title {
position: absolute;
top: 50%;
right: 20%;
color: #fff;
font-weight: bold;
letter-spacing: -3px;
margin-bottom: 20px;
}

.title h1 {
font-size: 4em;
line-height: 1.5em;
}
.title h3, .social-media a{
font-size: 2em;
color: #f5f5f5;
}
.social-media {
letter-spacing: 1px;
}
.social-media ul li {
float: left;
}

.blink {
font-size: 1.2em;
font-weight: 400;
display: inline-block;
visibility: visible;
width: auto;
animation-name: flash;
animation-duration: 0.8s;
animation-timing-function: linear;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
@keyframes flash {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.underline-hover {
display: inline-block;
vertical-align: middle;
padding: 0.7em;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.underline-hover:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #e5dd54;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.underline-hover:hover:before {
left: 0;
right: 0;
}
.ourheader {
background: rgba(0,0,0, 0.8);
box-shadow: 0 4px 4px rgba(0,0,0,0.13);
z-index: 999;
transition:all 400ms ease-out;
}

/*ABOUT*/
.about-me {
margin: 100px 10px;
background: #f5f5f5;
display: grid;
grid-template-columns: 3fr 9fr;
grid-column-gap: 25px;

}
.titlehaupt h5 {
text-align: center;
padding-top: 90px;
padding-bottom: 90px;
}
.first-row {

padding: 20px;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
font-size: 3em;
line-height: 2em;
}
.first-row h2{

}
.first-row h3 {
line-height: 40px;
color: #b2d3e4;
font-size: 0.5em;
}


.first-row span {
color: #b2d3e4;
}
.second-row{

color: #656561;
padding: 20px;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

.second-row p {
font-size: 1.5em;
line-height: 1.5em;
}

.skills{
margin: 0px 10px;
background: #f5f5f5;
display: grid;
grid-template-columns: 4fr 3fr 5fr;
grid-column-gap: 25px;
}

.first-skill-row {
background-image: url(../img/andrepic.jpg);
background-repeat: repeat;
background-size: cover;
}
.first-skill-row {
  height: 600px;
  width: auto;

}
.first-skill-row, .second-skill-row, .third-skill-row {

box-shadow: 0 2px 15px rgba(0,0,0,0.1);
padding: 20px;
font-size: 0.5em;

}

.second-skill-row {
  font-size: 2.5em;
  color: #656561;
}
/*SKILL BAR*/

.wrapper{
width: 300px;
margin:0 auto;
}

.how-title{
  color: #656561;
  font-size: 2em;
  letter-spacing: 1px;
}
.skill {
margin-bottom: 35px;
position: relative;
overflow-x:hidden;

}
.skill > p {
font-size: 18px;
font-weight: 700;
color: #1a1716;
margin: 0;
}
.skill:before{
width: 100%;
height: 5px;
content: "";
display: block;
position: absolute;
background: #656561;
bottom: 0;
}
.skill-bar {
width: 100%;
height: 5px;
background:#b2d3e4;
display: block;
position: relative;
}

/* SKILL 1 */

.skill-bar span{
position: absolute;
border-top: 5px solid #b2d3e4;;
top: -30px;
padding: 0;
font-size: 18px;
padding: 3px 0;
font-weight: 500;
}
.skill-bar {
position: relative;

}
.skill1{
width: 80%;

}
.skill1 .skill-count1 {
right: 0;
}
/* SKILL 2 */
.skill2{
width: 85%;
}

.skill2 .skill-count2 {
right: 0;
}
/* SKILL 3 */
.skill3{
width: 75%;
}
.skill3 .skill-count3 {
right: 0;
}

/* SKILL 4 */
.skill4{
width: 50%
}

.skill4 .skill-count4 {
right: 0;
}

/* SKILL 5 */
.skill5{
width: 35%;
}

.skill5 .skill-count5 {
right: 0;
}

/* SKILL 6 */
.skill6{
width: 65%
}

.skill6 .skill-count6 {
right: 0;
}

/*PORTFOLIO*/

.trainers-section {
text-align: center;
padding: 90px 10px;


}

.trainers-section .container h2 {
font-size: 24px;
letter-spacing: 1px;
text-transform: uppercase;
position: relative;
font-weight: 900;
margin-bottom: 30px;

}

.trainers-section .container p {
font-style: italic;
margin-bottom: 1.5em;
font-size: 20px;
color: #848484;
}

.trainers-ctn {
position: relative;
background-size: cover;
margin-bottom: 30px;
overflow: hidden;
display: grid;
margin: auto;
/*display: flex;
justify-content: space-around;
flex-wrap: wrap;*/
grid-template-columns: 1fr 1fr  1fr;
grid-gap: 25px;
}

.trainers-ctn  .trainer {
margin-bottom: 30px;
position: relative;
overflow: hidden;
background: lightblue;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

.trainers-ctn .trainer1,
.trainers-ctn .trainer2,
.trainers-ctn .trainer3 {

background-size: cover;
background-repeat: no-repeat;
height: 450px;
}

.trainers-ctn .trainer1 {
background-image: url(../projects/blocher/bilder/st_2.jpg);
}

.trainers-ctn .trainer2 {
background-image: url(../img/ppictures/lockpick.jpg);
}

.trainers-ctn .trainer3 {
background-image: url(../img/ppictures/baliproject.jpg);
}


.trainer .overlay{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
transition: all 0.5s ease;
padding-top: 800px;
transition: all 0.5s ease;

}

.trainer .overlay:hover{
background-color: rgba(178, 211, 228, 1.0);
padding-top: 100px;

}

.overlay .trainer-details {
color: #fff;
padding-left: 20px;
padding-right: 20px;
}

.overlay .trainer-details h3  {
color: #fff;
font-size: 30px;
}


.overlay .trainer-details i {
padding: 10px;
margin-right: 5px;
background-color: #fff;
color: #000;
display: inline-block;
}

/*contact*/

.main {
display: grid;
justify-content: center;
margin-bottom: 90px;

}

.main h2 {
font-size: 24px;
letter-spacing: 1px;
text-transform: uppercase;
position: relative;
font-weight: 900;
margin: -20px;
}



.contact {
padding: 25px;
margin: 10px;
margin: 50px auto;
width: 250px;

}

.contact h3 {
display: block;
font-size: 30px;
font-weight: 300;
margin-bottom: 10px;
color: #787A79;
line-height: 3em;
}

.contact h4 {
margin: 5px 0 0 15px;
display: block;
font-size: 13px;
font-weight: 400;
}

fieldset {
border: none;
margin-right: 10px;
min-width: 100%;


}

.contact input[type="text"],
.contact input[type="email"],
.contact input[type="tel"],
.contact input[type="url"],
.contact textarea {
width: 100%;
border: none !important;
border-bottom: 1px solid #ccc !important;
background: #f5f5f5;
margin-bottom:  3px;
margin-right: 5px;
padding: 8px
}

.contact input[type="text"]:hover,
.contact input[type="email"]:hover,
.contact input[type="tel"]:hover,
.contact input[type="url"]:hover,
.contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: none;
border-bottom: 1px solid #aaa;
}

.contact textarea {
height: 100px;
max-width: 100%;
}

#contact-submit {
cursor: pointer;
width: 100%;
border: none;
background: #787A79;
color: #FFF;
margin: 0 0 0px;
padding: 10px;
font-size: 15px;
}

.contact button[type="submit"]:hover {
background: #2c3e50;
-webkit-transition: background 0.3s ease-in-out;
-webkit-transition: background-color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}

.contact button[type="submit"]:active {
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}


.contact input:focus,
.contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}

::-webkit-input-placeholder {
color: #888;
}

:-moz-placeholder {
color: #888;
}

::-moz-placeholder {
color: #888;
}

:-ms-input-placeholder {
color: #888;
}

.rotate {
transform: rotate(-90deg);
position: relative;
top: 17%;
right: 53%;
filter: blur(0.6px);

}

.decoration {
border: 1px solid #e5dd54;
top: 10px;
width: 83px;
margin: -8px 0px 0px -26px;
left: 2%;
}

/*FOOTER*/

footer {
background: rgba(0, 0, 0, 0.50);
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
width: 100vw;
}

footer p {
color: rgba(255,255,255,.3);
letter-spacing: 1px;
font-size: 14px;
color: rgba(255,255,255,.3);
letter-spacing: 1px;
font-size: 14px;
}

footer .container > div > i {
color: rgba(255,255,255,.5);
font-size: 26px !important;
display: inline-block;
margin-right: 10px;
}
footer .container > div > i:hover {
color: #e9e9e9;
}

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

footer a:visited {
color: #e9e9e9;
}



/*MEDIA QUERIES*/


@media screen and (max-width: 1400px) {

/*CONTAINER IN RESPONSIVE*/
.nav-container {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 99;
background: #1f2227;
opacity: 0;
transition: all 0.2s ease;
}
.nav-container ul {
position: absolute;
top: 30%;
transform: translateY(-50%);
width: 100%;
}
.nav-container ul li {
display: block;
float: none;
width: 100%;
text-align: right;
margin-bottom: 10px;
}
.nav-container ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-container ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-container ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-container ul li:nth-child(4) a {
transition-delay: 0.5s;
}

.nav-container ul li:not(:first-child) {
margin-left: 0;
}
.nav-container ul li a {
padding: 10px 25px;
opacity: 0;
color: #fff;
font-size: 2em;
font-weight: 600;
transform: translateY(-20px);
transition: all 0.2s ease;
}
.nav-open {
position: fixed;
right: 10px;
top: 10px;
display: block;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-open i {
display: block;
width: 20px;
height: 2px;
background: #1f2227;
border-radius: 2px;
margin-left: 14px;
}
.nav-open i:nth-child(1) {
margin-top: 16px;
}
.nav-open i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-open i:nth-child(3) {
margin-top: 4px;
}

.about-me {
grid-template-columns: 1fr;
}


.skills {
display: grid;
grid-template-columns: 1fr;
}
.trainers-section{

}
.trainers-ctn {
position: relative;
background-size: cover;
margin-bottom: 30px;
overflow: hidden;
display: grid;
margin: auto;
grid-template-columns: 1fr;
grid-gap: 25px;
}

.first-row {
padding: 20px;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
line-height: 1.4em;
}
.first-row h2{
font-size: 1em;
}
.first-row h3 {
line-height: 20px;
color: #b2d3e4;
font-size: 0.5em;
}

.title {
top: 40%;
right: 20%;
color: #fff;
letter-spacing: -1px;
margin-bottom: 20px;
}

.title h1 {
font-size: 2em;
line-height: 1.5em;
}
.title h3, .social-media a{
font-size: 2em;
}

.second-row{
  margin-top: 40px;
padding: 15px;
}

.second-row p {
font-size: 1.1em;
line-height: 1.5em;
}

/*ourhead fix*/
.ourheader {
  background: none;
  box-shadow: none;
}

.second-skill-row {
font-size: 1.1em;
line-height: 1.5em;
margin: 40px auto;
}


}

/*END OF QUERIS*/

/*OTHER QUERIES*/


}




/*END OF MEDIA QUERIES*/

ABOUT ME

FREELACER, 
 DESIGNER &
 FRONT END DEVELOPER





 I have a good amount of experience in web design & building and customization. I love to talk with you about our unique approach. Feel free to contact me writing an email with your project idea. I'm always looking for new opportunities
          for cooperation on projects around interesting topics, design or landing pages. Let’s create something awesome together!

Something more about me: I have a lots of skills, you can see here what I can do, when it comes to webdesign. Soon I will be able to create sites with Vue (JS-Frameworks), but until then I will master CSS/HTML and Javascript. Webdesign isn't
          easy, but if you invest your time, nothing is impossible! Besides these skills, I can also speak Russian, German, English, Ukranian and little bit French in my sparetime, I also like to play violin and learn new things.









Here you can see what kind of stuff I know and can do. I'm learning new things every day, so in the future
          I will master even more new things.





Here's a few of the tools I use





HTML5


80%



CSS3


85%



JQUERY


75%



JAVASCRIPT


50%



React


35%



WORDPRESS


65%








Latest Works.

Be free to check out my portfolio, new projects will come soon.






Blocher project



This site was my first real JavaScript project.
















Lockpick.ch

 My first personal Wordpress project. I've learned a lot about Wordpress!













Bali project

I was assigned by my mentor to create this site.

















Let's work together...


Contact me...