html{
    font-size: 10px;
    font-weight: 300;
    font-family: Roboto, sans-serif
    
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
*{box-sizing: border-box;}



/*Navigation*/


header{ position: fixed; top:0; left: 0; width: 100%; display:flex; justify-content: space-between; align-items: center; padding:0.75rem 5rem;
     height: 8rem;background-color: rgb(186, 206, 211);z-index: 2;}
    header + * {margin-top: 8rem; }
       .personal-foto{display: inline-block;}
    .personal-foto > img{width: 7.5rem;height: 7.5rem; border-radius: 50%;margin-right: 2rem;}
    .logo{display: inline-block;}
        .logo > img {width: 7.5rem;height: 7.5rem; border-radius: 50%;}      
    .nav-right{display:flex; justify-content: space-between; align-items: center; }
        .navigation > a {font-size: 1.8rem; margin-right: 1rem; color: black;text-decoration: none;}
        .navigation > a:hover{text-decoration: underline;} 
        .navigation{padding:0.75rem 5rem}
    .nav-left{display:block; justify-content: space-between; align-items: center;}
    .name{display:flexbox; float: left; position: absolute;top: 2rem; left: 15rem;}
        p.bold{font-weight: 700;font-size: 2.8rem;margin-bottom: 1rem;letter-spacing: 0.5rem; text-shadow: 2px 2px 8px #023d8a;}
        p.normal{font-style: normal;font-size: 1.8rem;font-weight: 500;}
      
        
 

@media(max-width: 1200px) {
    header{padding:0.75rem 5rem; height: 14rem; align-items:baseline;padding-top: 3rem;}
        .logo>img {margin-bottom: 4rem; margin-right: 3rem;}
}

@media(max-width: 720px) {
    header{padding:0.1rem 1rem; height: 18rem; align-items:baseline;padding-top: 5rem;line-height: 2rem;}
        .logo>img {margin-bottom: 4rem; }
}

@media only screen and (max-width: 638px) and (orientantion:landscape) {
    header{padding:0.1rem 1rem; height: 22rem; align-items:baseline;padding-top: 5rem;line-height: 2rem;}
        .logo>img {margin-bottom: 4rem;margin-bottom: 0rem;}
}

@media only screen and (max-width: 568px) and (orientantion:landscape) {
    header{padding:0.1rem 1rem; height: 15rem; align-items:baseline;padding-top: 1rem;line-height: 1rem;}
        .logo>img {margin-top: -3rem; margin-bottom: 0rem;}    
}


@media(max-width: 530px) {
    header{padding:0.1rem 1rem; height: 22rem; align-items:baseline;padding-top: 5rem;line-height: 2rem;}
        .logo>img {margin-bottom: 4rem;}
        .nav-left{margin-top: -3rem;}
}
@media(max-width: 423px) {
    header{padding:0.1rem 1rem; height: 25rem; align-items:baseline;}
    .navigation{margin-top: 10rem;}
    .logo>img {display: none;}
    p.bold{font-size: 1.8rem;}
    .nav-left{margin-top: 2rem; margin-left: 2rem;}
    .personal-foto > img{margin-left: 2rem;}
    p.bold{margin-right: 2rem;}
    p.normal{margin-right: 2rem;}
}

/*Navigation*/

/*Hero*/

.hero { position:relative; display:flex; align-items: center; height:calc(100vh - 8rem); color: rgb(255, 255, 255); 
    background-image:url(Assets/Banner.jpg); background-position:right; background-size: cover; 
    background-repeat: no-repeat;width: 100vw; max-width: 100%}
    .hero h1{display:block; position: relative; color:rgb(7, 215, 252);font-size: 4.8rem; 
        font-weight: 700; margin: -9rem 15rem 20rem;text-shadow: 2px 2px 4px #1607e4; }
    .hero p{position: absolute; color:rgb(7, 215, 252);font-size: 3rem;font-weight: 400; line-height: 3.4rem;margin: -5rem 15rem 20rem;
        text-shadow: 2px 2px 8px #020014;}
    .social{ position:fixed; top: 18rem; left: 1rem; padding: 2rem; font-size: 3rem; width: 5rem;
             text-align: center; text-decoration: none;margin: 0.5rem 0.2rem;}
        .fa{width: 4rem;height: 4rem;  margin-bottom: 2rem;line-height: 4rem;}
                
    #strava-button{background:rgb(226, 89, 9); padding: 1rem; margin: 0.2rem -0.2rem; width: 4.2rem;}

 
  .fa:hover {
      opacity: 0.7;
  }
  
  .fa-facebook {
    background: #3B5998;
    color: white;
  }
           
  .fa-linkedin {
    background: #007bb5;
    color: white;
  }
  
  .fa-youtube {
    background: #bb0000;
    color: white;
  }
  
  .fa-instagram {
    background: #125688;
    color: white;
  }
  
  .fa-pinterest {
    background: #cb2027;
    color: white;
  }

  
    
  .buttons{display:flex;justify-content:center; position:absolute; margin-left: 20vw; margin-right: auto; bottom: 0; }
  

  .button {
    border: none;
    width: 20rem;
    height: 8rem;
    color:black;
    padding: 1rem 2rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 2rem;
    margin: 4rem 2rem;
    cursor: pointer;
  }

  .buttonsPr{display:flexbox; position:absolute; margin-right: auto; transform:translateX(4vw);; bottom: -8rem;
     }


  .despre {background-color: #e7e7e7; color: black; margin-right: 28vw;} /* Gray */ 
  .solicita {background-color: #e7e7e7; color: black;} /* Gray */ 
 

  .button::after {
    content: "";
    clear: both;
    display: table;
}
@media(max-width: 975px) {
    .hero h1{font-size: 3.7rem;}
    .hero p{font-size: 2.5rem; line-height: 2.5rem;}
    .despre{margin-right: 20vw;}
    .buttons{margin-left: 20vw;}
}
@media(max-width: 860px) {
    .hero{padding: 0rem 5rem 30vh;}
    .hero h1{font-size: 3.2rem; margin: 12rem 3rem;}
    .hero p{font-size: 2.2rem; line-height: 2.2rem;margin: -2rem 3rem}
    .social{display:flex;position:absolute; justify-content:left; top: 4.5rem; left:25vw;}
    .fa{display: block;padding: 0.5rem 1rem; width: 4rem;height: 5rem; margin-right: 2rem;}
    .despre{margin-right: 16vw;}
    .buttons{margin-left: 15vw;}
    #strava-button{background:rgb(226, 89, 9); padding: 1rem; margin: 0rem -0.2rem; width: 4.2rem;height: 5rem;}  
}
@media only screen and (max-width: 824px)   {
    .hero{padding: 0rem 5rem 30vh;}
    .hero h1{font-size: 3.8rem; padding: 19vh 8vw  0;}
    .hero p{display: none; font-size:  2.2rem; line-height: 2.2rem; margin-top: -10rem;}
    .social{ position:absolute; top: 15vh; left: 25vw;}
    .fa{display: block;padding: 0.5rem 1rem; width: 4rem;height: 5rem; margin-right: 2rem;}
    .despre{margin-right: 16vw;}
    .buttons{margin-left: 15vw; bottom:10vh;}
 
}
@media only screen and (max-width: 812px) and (orientation:landscape) {
  
    .hero h1{font-size: 2.8rem;padding-top: 12rem; padding-left: 18vw}
    .buttons{display:flex; justify-content:space-evenly; position: absolute; margin-left: 15vw; margin-bottom: -2rem;}
    .social{left: 25vw;}
}
@media(max-width: 720px)  {
    .hero{padding: 0rem 5rem 30vh;}
    .hero h1{font-size: 2.5rem;top:10vh; padding-right: 3rem;}
    .hero p{display:none;font-size:  2.2rem; line-height: 2.2rem;}
    .social{top: 8.5rem; left: 20vw;}
    .fa{display: block;padding: 0.5rem 1rem; width: 4rem;height: 5rem; margin-right: 2rem;}
    .despre{margin-right: 16vw;}
   
}
@media only screen and (max-width: 668px) and (orientation:landscape) {
  
    .hero h1{font-size: 2.8rem;padding-top: 12rem; padding-left: 18vw}
    .buttons{display:flex; justify-content:space-evenly; position: absolute; margin-left: 15vw; margin-bottom: -6rem;}
    .social{left: 27vw;}
}
@media(max-width: 638px)  {
    .hero{padding: 0rem 5rem 40vh;}
    .hero h1{font-size: 2.5rem;padding-top: 8vh; padding-left: 5vw}
    .hero p{margin-top: -5rem; font-size: 1.8rem; line-height: 1.8rem;}
    .social{top: 15rem; left: 12vw;}
    .buttons{display:grid; justify-content:space-evenly; position: absolute; margin-left: 15vw; margin-bottom: -8rem;} 
    
}
@media only screen and (max-width: 568px) and (orientation:landscape) {
    .hero{padding: 0rem 5rem 40vh;}
    .hero h1{display: none; font-size: 2.8rem;padding-top: 3vh; padding-left: 5vw}
    .hero p{margin-top: -5rem; font-size: 1.8rem; line-height: 1.8rem;}
    .social{display: none; top: 5rem; left: 15vw;}
    .buttons {display:flex; justify-content:space-evenly; position: relative;  margin-top: 95vh; margin-left: 10vw;} 
    
}


@media(max-width: 423px) {
    .hero{padding: 0rem 2rem 0vh;max-width: 100%;}
    .hero h1{font-size: 2.5rem; margin-top: -35vh; text-align: center; padding-left: 10vw}
    .hero p{font-size: 1.2rem; line-height: 1.2rem;}
    .social{display:none;position:absolute; justify-content:left; top: 20.5rem; margin-left: -5rem;}
    .buttons {display:grid;padding-left: 10vw; }
}

@media only screen and (max-width: 376px) {
    .hero{width: 130%; max-width: 130%;}
    .social{display: none;}
    .hero h1{font-size: 2.5rem; padding-top: 10vh; text-align: center; padding-left: 10vw;}
    .buttons {display:flexbox;padding-left: 20vw; padding-top: 30vh} 
}

@media only screen and (max-width: 321px) {
    .hero{width: 130%; max-width: 130%;}
    .social{display: none;}
    .hero h1{margin-top: -10rem; text-align: center;}
    .buttons {display:grid; position: absolute; bottom: 0; padding-left: 15vw;margin-bottom: 5vh } 
    .button{margin:1rem; }
}

/*Hero*/




/*Sections*/

.section-block{overflow: hidden;height:calc(100vh );width: 100%; display: block; }
.section-block.not-fullscreen{height: auto; min-height:none;}
.section-block.blue{background-color: rgb(186, 206, 211);}
    .section-block.blue h1{display:block; position: relative; color:rgb(0, 0, 0);font-size: 4.8rem;; 
    font-weight: 700;text-align: center; text-shadow: 2px 2px 4px #000000; padding: 10rem 0 5rem; margin-top: -1rem;}
    .section-block.blue h2{display:block; position: relative; color:rgb(0, 0, 0);font-size: 2.8rem; 
        font-weight: 300; padding:  3rem ;text-align: center; text-shadow: 2px 2px 4px #000000; }
    .section-block.blue p{position: relative; text-align:justify; color:fff;font-size: 2rem;line-height: 3.4rem; }
.section-block.grey{background-color: rgb(98, 105, 105)}
    .section-block.grey h1{display:block; position: relative; color:rgb(255, 255, 255);font-size: 4.8rem;;
    font-weight: 700; text-align: center; text-shadow: 2px 2px 4px #000000;padding: 10rem 0 5rem; margin-top: -1rem;}
    .section-block.grey h2{display:block; position: relative; color:rgb(255, 255, 255);font-size: 2.8rem; 
        font-weight: 300; padding:  3rem ;text-align: center; text-shadow: 2px 2px 4px #000000; }
    .section-block.grey p{position: relative; text-align:justify; color:rgb(255, 255, 255);font-size: 2rem;line-height: 3.4rem;  }
    

@media(max-width: 376px)  {
.section-block{width: 130%; max-width: 130%; padding-right: 2rem;  }
    
        
        }

/*Sections*/


/*proiecte*/

.proiecte {overflow: hidden; height:auto; width: 100%; display: block; }
.repartizare{margin: 2rem;}
.reconfigurare{margin: -12rem 2rem 2rem}
.reconfigurare > img {width: 75%;height: auto; margin-left: 12vw;} 
#Date_finale_1{margin-bottom: 5rem;}
.container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  }
.grid-box.box-third.projects-container-box{height: 50rem;}

@media only screen and (max-width: 1399px){
   
    .box-third{width:calc(50% - 4rem); height : 60rem ;}
    .box-third:nth-child(3){margin: -1rem 0rem 0rem; }
    .grid-box.box-third.projects-container-box:nth-child(3){height: 50rem; margin-left: 1vw; margin-right: 30vw;}
    .buttonsPr{bottom: 1rem;top:35rem; transform:translateX(2vw);
            }   
}

@media only screen and (max-width: 975px) {
    .grid-box.box-third.projects-container-box{height: 40rem;}
    .buttonsPr{top:25rem; bottom: 5rem; transform:translateX(25vw);}
}

@media only screen and (max-width: 721px)  {
    .grid-box.box-third.projects-container-box{height: 35rem; margin-bottom: 8rem;}
    .buttonsPr{top:30rem; bottom: 5rem; transform:translateX(20vw);}
}

@media only screen and (max-width: 570px)  {
    .grid-box.box-third.projects-container-box{height: 30rem; margin-bottom: 20rem;}
    .grid-box.box-third.projects-container-box:nth-child(3){height: 28rem; }
    .buttonsPr{top:40vh; bottom: 5rem; transform:translateX(18vw);}
}

@media only screen and (max-width: 361px)  {
    .grid-box.box-third.projects-container-box{height: 50rem; margin-bottom: 30rem;}
    .grid-box.box-third.projects-container-box:nth-child(1){margin-bottom: 10rem }
    .grid-box.box-third.projects-container-box:nth-child(2){margin-bottom: 10rem }
    .buttonsPr{top:50vh; bottom: 2rem; transform:translateX(14vw); }
}

.responsive-iframe {          /* Then style the iframe to fit in the container div with full height and width */
    position: absolute;
    top: 2rem;
    left: 12vw;
    bottom: 2rem;
    right: auto;
    width: 75%;
    height: 75%;
  }

 #magazin{color: #ffff;}    
 .timp{width: 50%;height: 505; margin-left: 22vw; margin-top: 2rem;} 
 .cv{width: 80%;height: 505; margin-left: 10vw; margin-top: 2rem;} 

/*proiecte*/




/*recomandations section*/
.rec-section {height: auto; text-align: left;}

.rec-section-box{display: flex;align-items: center ; height: auto;}
    .rec-section-box > img {width: 10rem;height: 10rem; border-radius: 50% ; margin-right: 2rem;} 
    .rec-section-box h3 {text-align: left; font-size: 2rem; font-weight: 600; margin-top: 8rem; }
    .rec-section-box p { font-size: 3rem;}
.function{font-size: 8rem; font-weight: 400; margin-bottom: 2rem;}
#hey{font-size: 1.5rem; font-weight: 400;}
#rec-title{display:inline-flex; align-items: center; padding-left: 40vw;}

@media(max-width: 720px)  {
#rec-title{padding-left: 20vw;  }
.rec-section-box{display: block;} 
.rec-section-box > img {margin-left: 20vw; }  
.rec-section-box h3 { margin-top: 2rem; }

}


/*recomandations section*/

/*about*/

.about-me{color: rgb(255, 255, 255);}
    .about-me-inner-container{display: flex; justify-content:space-around; align-items:flex-start; width:calc(100vw - 4rem) }
    .about-me-inner-container > img{width: 30rem; height: 30rem; border-radius: 50%; margin-right: 5rem; margin-left: 10rem;}
    .about-me-inner-container h3 { font-size: 3rem;margin-bottom: 2rem;}
.button3{display:flex; position: relative; justify-content: center; transform:translateX(30vw); 
    border: none;
    width: 20rem;
    height: 8rem;
    color:black;
    padding: 1rem 2rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.6rem;
    margin: 4rem 2rem;
    cursor: pointer;
  }


@media only screen and (max-width: 1399px){
.button3{width: 16rem; height: 6.4rem;transform:translateX(20vw);font-size: 1.2rem; }    
  }
@media only screen and (max-width: 1024px) {
.button3{display:inline-block ;transform:translateX(10vw);}
}
@media only screen and (max-width: 975px) {

.about-me-inner-container > img{width: 15rem; height: 15rem; border-radius: 50%; margin-right: 5rem; margin-left: 10rem;}
}
    
@media only screen and (max-width: 860px) {
.button3{display:inline-block ;transform:translateX(10vw);}
}

@media only screen and (max-width: 720px)  {
.about-me-inner-container{display:block;}
.about-me-inner-container > img{display: block; margin-right: auto; margin-left: auto;}
.about-me-inner-container h3 {text-align: center;}
.about-me-inner-container p {margin-left: 5rem; margin-right: 5rem;}
}

@media only screen and (max-width: 415px) {
.about-me-inner-container{display:block; width:100%}
}
@media only screen and (max-width: 321px) {
.button3{margin-left: 12rem;}
}
    

/*about*/

/* Footer */
.contact{display: flex; justify-content:space-between; align-items:initial; }
.copyright{text-align: right; padding : 4rem 4rem 2rem 0;font-size: 1.6rem;font-weight: 400; line-height: 2rem;}
.footer{text-align: left; padding : 2rem 2rem 2rem 4rem; font-size: 1.6rem;font-weight: 400; line-height: 2rem;}
.footer h3{font-size: 2.5rem;font-weight: 600; margin-bottom: 2rem;}

@media only screen and (max-width: 720px)  {
.contact{display: block;}
}
/* Footer */


/*Grid*/

.grid {width: calc(100% + 0rem); margin:0 2rem;}
    .grid-box {float:left; ;margin: -4rem 0.5rem 0.8rem 0rem;   padding-left: 12rem ; position: relative;}
        .box-full{width:calc(100% - 12rem);}
        .box-half{width:calc(50% - 4rem);}
        .box-third{width:calc(33.33% - 4rem); }
        .box-third:nth-child(2){margin: -4rem -1rem 0rem}
        .box-quarter{width:calc(25% - 4rem);
    }

@media only screen and (min-width: 1399px){   
   
    .box-third:nth-child(3){height: 51rem;}  
    }
@media only screen and (max-width: 1399px){
        .section-block{overflow: hidden;height:auto;  display: block; }
        .grid {width: calc(100%); margin:0 -2rem;}
            .grid-box { height: auto; margin: -1rem 1rem 2rem 1rem;   padding-left: 10rem ; position: relative; align-content: flex-start;}
                .box-full{width:calc(100% - 4rem);}
                .box-third{width:calc(50% - 4rem); ;}
                .box-third:nth-child(2){margin: -1rem 0rem 0rem}
               
              
    
    .button{width: 20rem; height: 8rem; font-size: 2rem; padding: 0.1rem 0.5rem;} 
                
    .section-block.blue h1{font-size: 3.8rem; font-weight: 500;  }
        .section-block.blue h2{font-size: 2.1rem; 
            font-weight: 200;  }
        .section-block.blue p{font-size: 1.6rem;line-height: 3.4rem; }

        .section-block.grey h1{font-size: 3.8rem; 
        font-weight: 500;  }
        .section-block.grey h2{font-size: 2.1rem; 
            font-weight: 200; }
        .section-block.grey p{font-size: 1.6rem;line-height: 3.4rem;  }
        
    .buttons2{display:block;justify-content:center; position:relative; margin-left: auto; margin-right: auto;}    

@media (max-width :975px) {
    .section-block{overflow: hidden;height:auto;  display: block;}
        .section-block.blue h1{font-size: 3.8rem; font-weight: 500;  }
        .section-block.blue h2{font-size: 2.1rem; font-weight: 200;  }
        .section-block.blue p{font-size: 1.6rem;line-height: 3.4rem; }

        .section-block.grey h1{font-size: 3.8rem; font-weight: 500;  }
        .section-block.grey h2{font-size: 2.1rem;  font-weight: 200; }
        .section-block.grey p{font-size: 1.6rem;line-height: 3.4rem;  }
    .grid {width: calc(100%); margin:0 -2rem;min-height: none;}
    .grid-box { height: auto; margin: -1rem 1rem 2rem 1rem; padding-left: 12rem ; position: relative; align-content: flex-start;}
        .box-third{width:calc(100% - 4rem); }
        .box-third:nth-child(2){margin: -1rem 0rem 0rem
        }         
.buttons2{display:block; margin-left: auto; margin-right: auto;}
.button{width: 14rem; height: 6rem; font-size: 1.2rem; padding: 0.1rem 0.5rem; }
    }
@media only screen and (max-width: 812px) and (orientation:landscape)  {
    .section-block.blue h2{text-align: center; }
    .section-block.grey h2{text-align: center; }
    .buttons2{display:block; margin-left: auto; margin-right: auto;}
    .box-third:nth-child(2){margin:  0rem}
    }
@media only screen and (max-width: 480px){
    .grid-box{padding-left: 8rem;}
    .buttons2{display:block; margin-left: auto; margin-right: auto;} 
    .box-third{width:calc(100% - 4rem); }
    .box-third:nth-child(2){margin:  0rem}
    .section-block.blue h2{font-size: 2.1rem; font-weight: 200; margin-top: -1rem; }
    .section-block.grey h2{font-size: 2.1rem;  font-weight: 200;margin-top: -1rem; }
    .section-block.grey h1{font-size: 2.8rem;}
    .section-block.blue h1{font-size: 2.8rem;}
/*Grid*/