/* general styles */
:root {
	--zwart:#0F1A20;
}
.burgerMenu{
  display: none;
}
body {
  font-family: "Raleway", sans-serif;
  margin: 0;
  overflow-x: hidden;
}
input, textarea{
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
}
ul {
  list-style-type: none;
}

a {
  text-decoration: none !important;
}

h1{
  font-size: 24px;
  min-height: 30px;
  font-weight: 100;
  text-transform: uppercase;
}

h2 {
  font-family: 'Quicksand', sans-serif;
  font-weight: bold;
  font-size: 20px;
}

h1::before{
  content: '';
  display: block;
  height: 0.5px;
  width: 330px;
  background-color: #A61D31;
  transform: translateY(-20px);
}
.banner-title h1{
  font-weight: 100;
  padding-left: 30px;
  margin-bottom: 60px;
}

p {
  font-size: 20px;
  color: var(--zwart);
}

.center-main{
  width: 100vw;
  max-width: 1080px;
  margin: 0 auto;
}

.section {
  text-align: center;
}

.skillbar {
  cursor: pointer;
}

.hide {
  display: none;
}

.display {
  display: block;
}

/* TEAM PAGE */
.team-container {
  margin: 5px 5px 5px 5px;
  background-color: #fff;
  text-align: center;
	display: flex;
  flex-flow: column row;
  flex-wrap: wrap;
  overflow: auto;
	justify-content: center;	
  border: #A61D31;
  
}
.team_naam{
  text-transform: capitalize;
  text-align: center;
  font-weight: bold;
}
.team_titel{
  font-size: smaller ;
  text-align: center;
}

.team_pic{
  width:250px;
  border: 1px solid #A61D31;
}



/* flash alert styles */
.flash-container {
  width: 100%;
  position: fixed;
  z-index: 700;
  padding-top: 20px;
  font-weight: bold;
}

.alert {
  text-align: center !important;
  width: 500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: #0f1a20 !important;
}

/* header_container */
header{
  width: 100vw;
  padding: 10px 0;
  top: 0;
	display: flex;
  position: fixed;
  background-color: #fff;
  z-index: 1000;
	justify-content: center;
  -webkit-box-shadow: 0px 0px 11px 0px #0f1a201a;
  -moz-box-shadow: 0px 0px 11px 0px #0f1a201a;
  box-shadow: 0px 0px 11px 0px #0f1a201a;
}
#header_container{
  width: 90%;
  max-width: 1200px;
	display: flex;
	justify-content: space-between;	
}
.logo{
	display: flex;
  align-items: center;
}
.logo img{
  width: 70%; 
}

/* navigatie */
nav{
  display: flex;
  align-items: center;
}
.nav-line{
  margin-left: 20px;
  position: relative;
}
.nav-line::before{
  content: '';
  display: block;
  width: 1px;
  height: 80%;
  transform: translateX(-20px) translateY(10%);
  background-color: #0F1A20;
  position: absolute;
}
.nav-contact div{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-contact a{
  color: #0F1A20;
}
.navbar{
  list-style-type: none;
  margin: 0px;
  padding: 0;
}
.navbar li{
  float: left;
  margin-right:20px;
}
li:last-child{
  margin-right: 0;
}
.nav-item{
  position: relative;
}
.nav-contact a::after,
.nav-link::after, .nav-link::before, 
.nav-item .active::after, .nav-item .active::before{
  content: '';
  display: block;
  transform-origin: bottom right;
  position: absolute;
  width: 100%;
  transform: scaleX(0) translateY(10px);
  height: 0.5px;
  background-color: #A61D31;
  transition: transform 0.25s ease-out;
}
.nav-item .active::after, .nav-item .active::before{
  transform: scaleX(1) translateY(10px);;
}
.nav-item .active::before{
  transform: scaleX(1) translateY(-10px);;
}
.nav-link::before{
  transform: scaleX(0) translateY(-10px);
}
.nav-link-icon{
  font-size: smaller;
  padding: 10px;
}
.nav-link-icon:hover{
  color: #A61D31;
} 
.nav-link-icon::after, .nav-link-icon::before{
  display: none !important;
}
.nav-contact a:hover::after,
.nav-link:hover::after, .nav-link:hover::before {
  transform: scaleX(1) translateY(10px);;
  transform-origin: bottom left;
}
.nav-link:hover::before{
  transform: scaleX(1) translateY(-10px);;
}
.nav-link{
  color: #0F1A20;
  text-decoration: none;
  margin: 10px 0;
  display: block;
  padding: 10px 0;
}

/* main header section */
#carousel{
  width: 100%;
  overflow: hidden;
  position: relative;
}
#carousel-inner{
  display: flex;
  height: 100vh;
  transition: 500ms ease-in-out;
}
.carousel-item {
  position: relative;
  width: 100%;
  
}
.carousel-item img{
  object-fit: cover;
  width: 100%;
  height: 100%;
  
}
.carousel-caption{
  display: block;
  position: absolute;
  padding-bottom: 100px;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: #0f1a2086;

}
.carousel-caption h2{
  color: white;
  font-size: 35px;
  font-weight: 100;
}
.carousel-caption h2::after{
  content: '';
  display: block;
  width: 40%;
  margin: auto;
  border-top: 1px solid white;
  transform: translateY(7px);
}
.carousel-caption p{
  color: white;
  
}
#carousel-overlay{
  position: absolute;
  bottom: 3.5%;
  width: 9.0909%;

  display: flex;
  justify-content: center;
  align-items: center;
}
.carousel-previous, .carousel-next{
  margin: 0 20px;
  color: white;
  background-color: transparent;
  width:40px;
  height: 40px;
  border: none;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;

  transition: 300ms ease-in-out;
}
.carousel-previous:hover, .carousel-next:hover{
  transform: scale(1.2);
  color: #A61D31;
}
.carousel-btn{
  background-color: #fff;
  border: none;
  border-radius: 10px;
  width: 40px;
  height: 4px;
  margin: 3px;
}
#carousel-overlay .active{
  background-color: #A61D31 !important;
}
.carousel-btn:hover{
  background-color: #D38E98;
}

/* FOOTER  section */
footer{
  display:flex;
  justify-content: center;
  background-color: var(--zwart);
  margin-top: auto;
}
#footer{
  padding: 20px 30px 30px 30px ;
  width: 700px;
  font-size: 12px;
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#footer i{
  color: #A61D31;
  padding-right: 5px;
}

#footer p{
  line-height: 1.5;
  font-size: 10px;
  color: inherit;

}

#footer a{
  color: #fff;
  text-decoration: none;

}

#footer h3{
  font-size: 13px;

}


#topBtn{
  position: fixed;
  right: 100px;
  bottom: 100px;
  z-index: 1000;
  width: 60px;
  aspect-ratio: 1/1;
  border-radius: 50%; 
  border: none;
  background-color: #ffffff79;
  box-shadow: 0px 0px 5px 0px #0f1a2073; 
  transition: 200ms ease-in-out;
}
#topBtn:hover{
  animation:  forwards topBtn ease-in-out 300ms;
}
@keyframes topBtn {
  from {
    transform: scale(1);
  }
  40% {
    transform: scale(0.9);
  }
  to {
    transform: scale(1.1);
  }
}

.topBtn-text{
  position: relative;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}
.topBtn-text span{
  position: absolute;
  color: #A61D31;
  font-weight: bold;
  transform: rotate(-200deg) translate(0px, -40px) scale(.3);
  opacity: 0;
  transition: 350ms;
  text-shadow: 0px 0px 4px #0f1a208a;
}
.topBtn-text i{
  font-size: 20px;
  color: #0f1a2044;
  transition: 300ms ease-in;
}
#topBtn:hover .topBtn-text i{
  color: #A61D31;
}
#topBtn:hover .topBtn-text #topBtn-c-1{
  transform: rotate(0deg) translate(-10px, -40px) scale(1);
  opacity: 1;
}
#topBtn:hover .topBtn-text #topBtn-c-2{
  transform: rotate(0deg) translate(0px, -40px) scale(1);
  opacity: 1;
}
#topBtn:hover .topBtn-text #topBtn-c-3{
  transform: rotate(0deg) translate(10px, -40px) scale(1);
  opacity: 1;
}







main{
  display: flex;
  flex-direction: column;
  min-height: 90vh;
  margin-top: 10vh;
}
.mainContainer{
  margin: 50px auto;
  width: 1080px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cat-container{
  margin-top: 100px;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
}
.category-btn{
  margin: 0 10px;
  color: #0F1A20;
}
.cat-container .active{
  color: #A61D31;
}

#exampleToggle{
  background-color: #0F1A20;
  color: white;
  font-size: 14px;
  width: 200px;
  text-align: center;
  border: none;
  outline: none;
  margin: 30px auto 100px;
  font-weight: 300;
  padding: 10px;
  font-family: 'Quicksand', sans-serif;
  letter-spacing: 0.2em;
  transition: 200ms ease-in-out;

}
#exampleToggle:hover{
  cursor: pointer;
}
.toggleInverse{
  background-color: rgba(166,29,50,1) !important;
}

#projectpreview-container{
  display: flex;
}
.goBackButton{
  margin-top: 30px;
  margin-bottom: 40px;
  font-size:12px;
  font-weight: bold;
  color: #0f1a205d;
  transition: 200ms;

}
.goBackButton:hover{
  color: #0f1a20;
}

#projects-container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 5px;
  padding: 5px;
  /* animation: loadContainer 2s forwards ; */
}
@keyframes loadContainer {
  from {
    opacity: 0;
    display: none;
  }
  95% {
    opacity: 0;
    display: none;
  }
  to {
    opacity: 1;
    display: flex;
  }
}

#projects{
  display: flex;
  align-items: center;
  flex-direction: column;

}
.projPrev{
  
  width: 100%;
  margin-bottom: 5px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.prevRec{
  width: 40%;
  margin-bottom: 0;
  aspect-ratio: 1/1;
}
.projOverlay{
  width: 100%;
  height: 100%;
  -webkit-box-shadow: inset 0px 0px 75px -100px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 75px -100px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 75px -100px rgba(0,0,0,0.75);
  transition: 300ms;
  display: flex;
  position: absolute;
}
.projPrev:hover .projOverlay{
  -webkit-box-shadow: inset 0px -500px 75px 100px rgba(0,0,0,0.28);
  -moz-box-shadow: inset 0px -500px 75px 100px rgba(0,0,0,0.28);
  box-shadow: inset 0px -500px 75px 0px rgba(0,0,0,0.28);
}

.projPrev:hover .projOverlay h3{
   transform: translateY(0%);
}
.projPrev:hover .projOverlay h3::before{
  opacity: 1;
}
.projPrev:hover .projOverlay .searchIconContainer{
  opacity: 100;
  
}

.projOverlay h3{
  height: 40px;
  color: white;
  text-align: right;
  padding-right: 20px;
  width: 100%;
  margin-top: auto;
  transform: translateY(100px);
  transition: 400ms ease-out;
}
.projOverlay h3 span{
  font-weight: 100;
}
.projOverlay h3::before{
  content: '';
  display: block;
  width: 40%;
  margin-right: -10px;
  margin-left: auto;
  transform: translateY(-10px);
  border-top: 1px solid white;
  opacity: 0;
}

.projOverlay .searchIconContainer{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  opacity: 0;
  justify-content: center;
  align-items: center;
  transition: 500ms ease-in;
}
.searchIconContainer img{
  height: 30px;
  color: #fff;
}


.projPrevImg{
  width: 100%;
  object-fit: cover;
  transition: 600ms;
  
}

#image-fullsize-overlay{
 position: fixed;
 z-index: 2000;
 top: 0;
 left: 0;
 height: 100vh;
 width: 100vw;
 display: none;
 justify-content: center;
 align-items: center;
 background-color: #0f1a2067;
 flex-direction: column;
}
#image-fullsize-overlay img{
  width: 65%;
  padding: 20px;
  background-color: white;
}
#image-fullsize-overlay button{
  position: absolute;
  top: 22%;
  right: 19%;
  width: 20px;
  aspect-ratio: 1/1;
  padding: 20px;
  appearance: none;
  border: none;
  outline: none;
}
#image-fullsize-overlay button::after{
  content: '';
  display: block;
  width: 4px;
  border-radius: 3px;
  height: 20px;
  position: absolute;
  background-color: #b4b7b9;
  transform: translate(-50%, -50%) rotate(45deg);
}
#image-fullsize-overlay button::before{
  content: '';
  display: block;
  width: 4px;
  border-radius: 3px;
  height: 20px;
  position: absolute;
  background-color: #b4b7b9;
  transform:  translate(-50%, -50%) rotate(-45deg);
}
#image-fullsize-overlay button:hover:after,  #image-fullsize-overlay button:hover::before{
  background-color: #A61D31;
}
#image-fullsize-overlay span{
  color: #0F1A20;
  width: 65%;
  background-color: white;
  padding: 20px;
  padding-top: 0;
  text-align: center;
}
.projPrev:hover .projPrevImg{
  transform: scale(1.1);
}
.prevImg{
  width: 100%;
  object-fit: cover;
  margin-bottom: 20px;
}
.prevImg:last-child{
  margin-bottom: 0px;
}
.containerRight{
  padding: 40px 20px;
  margin: 0 20px;
  
  width: 30%;
}
.containerRight span{
  font-weight: bold;
}
.containerLeft{
  width: 70%;
  margin-bottom: 150px;
}
.containerLeft::-webkit-scrollbar {
  display: none;
}
#projects-recommended{
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}



.contactImagesContainer{
  display: flex;
  justify-content: center;
  position: relative;
  height: 500px;
  width: 100vw;
  max-width: 1080px;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
}
.contactImagesContainer img{
  box-shadow: 0 0 10px 0 #0f1a202c ;
}
.contactImagesContainer .centerImage{
  position: absolute;
  height: 70%;
  transform: translate(-13%, -5%);
}
.contactImagesContainer .leftImage{
  position: absolute;
  width: 39%;
  transform: translate(-64%,109%);
}
.contactImagesContainer .rightImage{
  position: absolute;
  width: 38%;
  transform: rotate(90deg) translate(30%,-100%);
}

#contact-form-container{
  position: relative;
  flex-direction: column-reverse;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
#contact-form-container h1{
  font-weight: 100;
  margin-top: 60px;
  margin-bottom: 60px;
}
#contact-form{
  width: 70%;
  border: 1px solid #A61D31;
  height: 320px;
  padding: 10px 30px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contactInput{
  background-color: white;
  border: none;
  outline: none;
  border-bottom: solid 1px #0F1A20;
  font-size: 14px;
  padding: 10px;
  margin-top: 20px;
  width: calc(100% - 20px);
}
.contactInput:focus{
  border-bottom: solid 1px #A61D31;
}
.contact-form-placeholder{
  font-size: 12px;
  color: #0f1a20a9;
  position: absolute;
  top: 32px;
  left: 12px;
  pointer-events: none;

  transition: 200ms ease-in-out;
}
#contact-form span.up{
  transform: translate(0px, -20px);
}

.contactButton{
  background-color: #0F1A20;
  color: white;
  font-size: 14px;
  width: 160px;
  border: none;
  outline: none;
  margin-top: 30px;
  font-weight: 300;
  padding: 10px;
  font-family: 'Quicksand', sans-serif;
  letter-spacing: 0.2em;
  transition: 700ms ease-in-out;
  -webkit-box-shadow: inset 0px 0px 0px 0px rgba(166,29,50,1);
  -moz-box-shadow: inset 0px 0px 0px 0px rgba(166,29,50,1);
  box-shadow: inset 0px 0px 0px 0px rgba(166,29,50,1);
}
.contactButton:hover{
  cursor: pointer;
  -webkit-box-shadow: inset 200px 0px 0px 0px rgba(166,29,50,1);
  -moz-box-shadow: inset 200px 0px 0px 0px rgba(166,29,50,1);
  box-shadow: inset 200px 0px 0px 0px rgba(166,29,50,1);
}
.contact-info{
  color: white;
  height: 400px;

  display: flex;
  justify-content: center;
  align-items: center;
}
#contact-form textarea{
  height: 60px;
  resize: none;
}

.contact-info h3{
  font-size: 14px;
}
.contact-info p{
  color: white;
  font-size: 12px;
  margin-bottom: 40px;
  line-height: 1.5em;
}
.contact-info .n-p{
  
  margin-bottom: 0px !important;
}
.contact-info-info{
  z-index: 10;
  padding: 25px;
  background-color: #0F1A20;
  width: 50%;
}
.contact-info-img{
  height: 100%;
  transform: translateX(20px);
}

.location-map{
  margin-top: 150px;
  height: 500px;
  width: 100%;
  filter: grayscale(100%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.upload-form{
  margin-top: 40px;
  border: #A61D31 1px solid;
}

.form-row{
  display: flex;
  margin-left: 20%;
  flex: 1 1 150px;
  padding: 20px 40px;

}
.form-row label{
  padding: 10px;
}
.form-row input[type="text"],.form-row textarea {
  width: 40%;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-bottom: 1px solid #0F1A20;
  outline: none;
}
.form-row input[type="text"]:focus{
  border-bottom: 1px solid #A61D31;
}
.form-row .radio-label{
  margin-left: 50px;
}
.form-row .input-label{
  width: 30%;
}

#team-card-container{
  display: flex;
  justify-content: center;
  gap: 20px;
}
.team-card{
  display: flex;
  flex-direction: column;
}
.team-card-img{
  z-index: 10;
  background-color: whitesmoke;
  width: 200px;
  aspect-ratio: 1/1;
}
.team-card-img img{
  width: 100%;
}
.team-card-info{
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 10px;
  width: 160px;
  height: 150px;
  color: white;
  background-color: #0F1A20;
}
/* FUNCTIE TEXT */
.team-card-info span{ 
  font-size: 11px;
  letter-spacing: 1.6px;
  font-weight: bold;
}

/* NAAM TEXT */
.team-card-info h2{ 
  font-size: 17px;
  font-weight: bold;
  color: #A61D31;
  margin-top: 10px;
  margin-bottom: 10px;
}
/* extra TEXT */
.team-card-info p{ 
  color: white;
  font-size: 12px;
  margin: 0;
}
.team-card-info-socials{
  margin: 10px;
  margin-top: auto;
}
.team-card-info-socials i{
  margin-right: 10px;
}
.team-card-info-socials i:hover{
  color: #A61D31;
}

.card-pos1{
  transform: translate(170px, -150px);
}

.card-pos2{
  transform: translate(10px, -40px);
}

/* .projectdata form{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.projectdata button,.projectdata form button {
  width: 140px;
  height: 40px;
  padding: 10px;
  appearance: none;
  border: 1px solid #A61D31;
  background-color: whitesmoke;
}
.projectdata button:hover,.projectdata form button:hover {
  background-color: #0F1A20;
  color: white;
}
.projectdata > form  *{
  padding: 10px;
  width: 350px;
} */

.projectdata{
  margin-top: 50px;
  background-color: #A61D3120;
  padding: 20px;
  display: flex;
}
.dataEdit{
  margin-top: 50px;
  background-color: #A61D3120;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.projectdata input[type="submit"],.editImagesButton{
  width: 140px;
  height: 40px;
  padding: 10px;
  font-size: 14px;
  appearance: none;
  border: none;
  background-color: #a61d31;
}
.projectdata input[type="submit"]:hover, .editImagesButton:hover{
  background-color: #0F1A20;
  color: white;
}
.editImagesButton{
  
  height: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  color: #0F1A20;
}
.data-images{
  width: 35%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 3%;
}
.editData-images{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2.5%;
}
.editDataImg{
  width: 20%;
  position: relative;
}
.data-image{
  width: 30%;
}
.data-image img,.editDataImg img{
  width: 100%;
}
.thumbEdit,.removeEdit{
  position: absolute;
  top: 0;
  right: 30px;
  background-color: rgba(255, 255, 255, 0.459);
  width: 30px;
  height: 30px;
  font-size: 20px;
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.removeEdit{
  right: 0px;
}
.thumbnail{
  box-shadow: 0px 0px 0px 2px #A61D31 ;
}
.thumbnail .thumbEdit, .thumbnail .removeEdit{
  display: none !important;
}
.remove img{
  transform: scale( .5);
  opacity: .5;
}
.projectdata .form-row{
  margin-left: 0;
  padding: 5px;
  gap: 10px;
}

.projectdata input{
  width: 50% !important;  
}
.projectdata select{
  width: 100%;  
  padding: 10px;
  font-size: 16px;
  border: none;
  border-bottom: 1px solid #0F1A20;
  outline: none;
  border:0px;
   outline:0px;
}
.projectdata textarea{
  width: 100%;
}
.showbtn{
  display: flex;
  width: 45px;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  background-color: #fff;
}
.showbtn *{
  padding: 10px;
}
.showbtn .eye-slash{
  padding: 10px 10px 8px 10px;
}
.updatebtn{
  margin-top: 50px;
}
.removeForm{
  transform: translate(400%, 555%);
  position: absolute;
}

.youneek-text{
  margin-bottom: 20px;
  display: flex ;
  flex-direction: row;
  justify-content: flex-end;
  /* align-items: center; */
}
.item-youneek {
  /* width: 150px;
  height: 150px; */
  text-align: left;
  margin-bottom: 50px;
}
.item-1-youneek{
  width: 33%;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}
.item-2-youneek {
 width: 66%;
}
.container-youneek .item-2-youneek {
  display: flex;
  gap: 10px;
}
.container-youneek{
  display: flex;
}
.container-youneek img{
  height: 450px;
  justify-self: flex-end;
}









/*/////////// resize ///////////////*/

@media (max-width: 992px) { 
  main{
    overflow: hidden;
  }
  nav{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: -400;
    background-color: white;
    justify-content: center;
    align-items: flex-start;
    margin-top: 95px;
    padding-bottom: 30px;
    -webkit-box-shadow: 0px 0px 11px 0px #0f1a201a;
    -moz-box-shadow: 0px 0px 11px 0px #0f1a201a;
    box-shadow: 0px 6px 5px 0px #0f1a201a;
  }
  .navbar li{
    float: none;
    margin: 0 10px;
  }
 
  .nav-link{
    text-align: center;
  }
  .nav-line{
    margin: 0;
  }
  .nav-line::before{
    display: none;
  }
  .nav-contact{
    float: left !important;
  }
  .nav-link-icon {
    font-size: 15px;
    padding: 3px;
  }
  .burgerMenu{
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 20px;
    margin-right: 30px;
  }
  #projectpreview-container{
    display: flex;
    flex-direction: column-reverse;
  }
  .containerLeft {
    width: 100vw;
  }
  a.goBackButton{
    font-size: 20px;
    margin-left: 30px;
  }
  .center-main {
    width: 100vw;
    margin: 0;
  }
  #projects-recommended{
    width: 100vw;
  }
  #projects-container{
    flex-direction: column;
  }
  .contact-info{
    height: 600px;
  }
  .contact-info-img{
    
    height: 400px;
    transform: unset;
    transform: translateX(25%) translateY(-25%);
  }
  .contact-info-info{
    
    transform: translateX(-25%) translateY(35%);
  }
  .contact-info-info > *{
    text-align: center;
  }
  
}
@media (min-width: 576px) { 
  
}


@media (min-width: 768px) {

}


@media (min-width: 992px) {
  
}


@media (min-width: 1200px) {
  
}


@media (min-width: 1400px) {
 
}