/*
 * Globals
 */
@media (min-width: 63em){
	.videocontainer {
		padding-top: 8rem;
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
}

.proiecte {
	text-align: center !important;
}

.crane-image {
  position: absolute;
  left: 3%;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/cranes-b.png');
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 50%;
  pointer-events: none;
}

.crane-div {
	display: none;
}

@media (max-width: 63em) {
	.crane-image {
		background-image: none;
	}
	.crane-div {
		display: block;
	}
}

/* Links */
a,
a:focus,
a:hover {
    color: #20aa4d; /* #93BCD8; */
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
    color: #333;
    text-shadow: none; /* Prevent inheritance from `body` */
    background-color: #fff;
    border: .05rem solid #fff;
}

/*
 * Base structure
 */
html,
body {
    height: 100%;
    /* background: linear-gradient(to bottom, #EFFBEF 0%, #EFFBEF 70%, #93BCD8 100%);*/
}

body {
    color: #3c7b4f; /* albastru #10254E; */
    /* text-align: center; */
    text-shadow: 0 .05rem .1rem rgba(0,0,0,.5);
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
    display: table;
    width: 100%;
    height: 100%; /* For at least Firefox */
    min-height: 100%;
    -webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
    box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
}

.site-wrapper-inner {
    display: table-cell;
    vertical-align: top;
}

.cover-container, .about-container {
    margin-right: auto;
    margin-left: auto;
}

.about-container {
	text-align: left !important;
}

/* Padding for spacing */
.inner {
    padding: 2rem;
}

/*
 * Header
 */
.masthead {
    text-shadow: none !important;
    margin-bottom: 2rem;
}

.masthead-brand {
    margin-bottom: 10;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

.nav-masthead .nav-link {
    padding: .25rem 0;
    font-weight: bold;
    color: #3c7b4f; /* #10254E; */
    background-color: transparent;
    border-bottom: .25rem solid transparent;
	text-decoration: none;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
    /* border-bottom-color: #93BCD8; */
}

.nav-masthead .nav-link + .nav-link {
    margin-left: 1rem;
}

.nav-masthead .active {
    color: #20aa4d; /* #93BCD8; */
    border-bottom-color: #20aa4d; /* #93BCD8; */
}

.active {
    color: #20aa4d; /* #93BCD8; */
    border-bottom-color: #20aa4d; /*#93BCD8;*/
}

.nav-item {
	display: flex;
	justify-content: space-between;
	padding: 1em 0.5em 0 0.1em;
}

@media (min-width: 63em) {
.nav-item {
	font-size: 1.2rem;
	padding: 0 1em;
}
}

/* Nav slidey effect */
.nav-link {
  position: relative;
}

.nav-link:after {
  content: '';
  position: absolute;
  bottom: -.25rem;
  left: 0;
  width: 100%;
  height: .25rem;
  background-color: #3c7b4f; /* #10254E; */
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.nav-link:hover:after {
  transform: scaleX(1);
}
/* End Nav slidey effect */

.masthead-brand.full-brand {
    display: none;
}

.center-text {
	text-align: center;
}

@media (min-width: 63em) {
    .masthead-brand.full-brand {
        display: block;
        float: left;
        font-size: 3em;
        margin-left: 3em;
    }

    .masthead-brand.full-brand > img {
        max-width: 50vw;
    }

    .masthead-brand.mini-brand, .masthead-brand.mini-logo {
        display: none;
    }

    .nav-masthead {
        float: right;
    }
}

    .masthead-brand.mini-logo > img {
		padding-top: 2em;
        max-width: 75vw;
    }

/*
 * Cover
 */
.cover {
    padding: 0 1.5rem;
}

.cover .btn-lg {
    padding: .75rem 1.25rem;
    font-weight: bold;
}

/*
 * Footer
 */
.mastfoot {
    
}

/*
 * Affix and center
 */
@media (min-width: 63em) {
    /* Pull out the header and footer */
    .masthead {
        position: fixed;
        top: 0;
    }

    .mastfoot {
        position: fixed;
        bottom: 0;
    }

    /* Start the vertical centering */
    .site-wrapper-inner {
        vertical-align: middle;
    }

    /* Handle the widths */
    .masthead,
    .mastfoot,
    .cover-container, .about-container {
        width: 100%; /* Must be percentage or pixels for horizontal alignment */
    }
}

@media (min-width: 63em) {
    .masthead {
        padding-right: 2em;
    }

    .mastfoot {
    }

    .cover-container {
        width: 42rem;
        float: right !important;
        margin-right: 2em;
        max-width: 50%;
    }
	
	.about-container {
		max-width: 80%;
	}
	
    .cover-container h1.cover-heading,
    .cover-container p.lead {
        text-align: right;
    }
	.cover-heading {
		margin-left: auto;
		margin-right: auto;
		
	}
}

.lead {
    color: #10254E;
}

/* Here be Angular shenanigans*/

.myAnimation { }
      .myAnimation.ng-enter { animation-duration: .3s; animation-name: fadeIn; animation-timing-function: cubic-bezier(.71,.55,.62,1.57); }
      .myAnimation.ng-leave { animation-duration: 0s; animation-name: fadeOut; animation-timing-function: cubic-bezier(.71,.55,.62,1.57); }

      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
      }


  .thumbnails {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	width: 100;
  }
@media (max-width: 63em) {
	.thumbnails {
		width: 85vw;
	}
}
.thumbnail {
  margin: 10px;
  cursor: pointer;
  height: 150px; /* Fixed height for all thumbnails */
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbnail img {
  height: 100%; /* Ensure the image fills the height of the thumbnail */
  width: auto; /* Allow the width to adjust according to the aspect ratio */
  border: 1px solid black;
  transition: all 0.3s ease;
}
  .thumbnail img.active {
    width: 80%; /* Scaled up size */
    border-color: #333;
  }
  #overlay {
    /* display: none; */
	visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent black */
    z-index: 999;
    justify-content: center;
    align-items: center;
	opacity: 0; /* Initial opacity */
    transition: opacity 0.3s ease; /* Smooth transition effect */
  }
    #overlay.show {
	visibility: visible;
    display: flex;
	transition: opacity 0.3s ease;
    opacity: 1; /* Show overlay with smooth transition */
  }
  #overlay img {
    max-width: 80%;
    max-height: 80%;
  }
/* Contact page stuff */
    .faq {
      margin-bottom: 20px;
	  width: 100%;
    }
@media (max-width: 63em) {
	.faq, .buttons-container {
		width: 90vw;
	}
    .contact-button span {
		text-align: center;
      font-size: 14px;
      font-weight: bold;
    }
  .contact-button {
    flex-direction: column; /* Change layout to column */
    align-items: center; /* Center items vertically */
    text-align: center; /* Center text */
  }

  .contact-button i {
    margin-bottom: 5px; /* Add some space between icon and label */
    display: block; /* Ensure icon is centered horizontally */
    margin-left: 0 auto;
  }
}
    .faq summary {
      cursor: pointer;
      font-weight: bold;
      background-color: #ffffff;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      width: 100%;
    }
    .faq p {
      margin-top: 10px;
      background-color: #ffffff;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 18px;
    }
    .buttons-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
	  text-decoration: none !important;
	  color: #10254E;
    }
    .contact-button {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      text-align: center;
      cursor: pointer;
      background-color: #ffffff;
	  color: #10254E;
    }
    .contact-button:hover, .contact-button:active, .contact-button:focus {
      background-color: #f0f0f0;
	  text-decoration: none !important;
	  color: #10254E;
    }
    .contact-button i {
      font-size: 24px; /* Adjust the size of the icon */
      margin-right: 10px; /* Add some spacing between the icon and label */
    }
    .contact-button span {
      font-size: 18px;
      font-weight: bold;
    }
	#isos {
  text-align: right; /* Align images to the right by default */
}

@media (max-width: 63em) {
  #isos {
    text-align: center; /* Center-align images when screen width is less than 63em */
  }
}