/* Amplient Specific Styles (Move to styles.css eventually)
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/*Open Sans Font Face Definitions */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v17-latin-300.eot');
  /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'), url('../fonts/open-sans-v17-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/open-sans-v17-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/open-sans-v17-latin-300.woff') format('woff'), /* Modern Browsers */
  url('../fonts/open-sans-v17-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/open-sans-v17-latin-300.svg#OpenSans') format('svg');
  /* Legacy iOS */
}

/* open-sans-300italic - latin */

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/open-sans-v17-latin-300italic.eot');
  /* IE9 Compat Modes */
  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url('../fonts/open-sans-v17-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/open-sans-v17-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/open-sans-v17-latin-300italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/open-sans-v17-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/open-sans-v17-latin-300italic.svg#OpenSans') format('svg');
  /* Legacy iOS */
}

/* open-sans-regular - latin */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v17-latin-regular.eot');
  /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/open-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/open-sans-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/open-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
  url('../fonts/open-sans-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/open-sans-v17-latin-regular.svg#OpenSans') format('svg');
  /* Legacy iOS */
}

/* open-sans-italic - latin */

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v17-latin-italic.eot');
  /* IE9 Compat Modes */
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url('../fonts/open-sans-v17-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/open-sans-v17-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/open-sans-v17-latin-italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/open-sans-v17-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/open-sans-v17-latin-italic.svg#OpenSans') format('svg');
  /* Legacy iOS */
}

/* open-sans-600 - latin */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v17-latin-600.eot');
  /* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url('../fonts/open-sans-v17-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/open-sans-v17-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/open-sans-v17-latin-600.woff') format('woff'), /* Modern Browsers */
  url('../fonts/open-sans-v17-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/open-sans-v17-latin-600.svg#OpenSans') format('svg');
  /* Legacy iOS */
}

/* open-sans-600italic - latin */

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/open-sans-v17-latin-600italic.eot');
  /* IE9 Compat Modes */
  src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'), url('../fonts/open-sans-v17-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/open-sans-v17-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/open-sans-v17-latin-600italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/open-sans-v17-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/open-sans-v17-latin-600italic.svg#OpenSans') format('svg');
  /* Legacy iOS */
}

/* open-sans-700 - latin */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v17-latin-700.eot');
  /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../fonts/open-sans-v17-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/open-sans-v17-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/open-sans-v17-latin-700.woff') format('woff'), /* Modern Browsers */
  url('../fonts/open-sans-v17-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/open-sans-v17-latin-700.svg#OpenSans') format('svg');
  /* Legacy iOS */
}

/* open-sans-800 - latin */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/open-sans-v17-latin-800.eot');
  /* IE9 Compat Modes */
  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url('../fonts/open-sans-v17-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/open-sans-v17-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/open-sans-v17-latin-800.woff') format('woff'), /* Modern Browsers */
  url('../fonts/open-sans-v17-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/open-sans-v17-latin-800.svg#OpenSans') format('svg');
  /* Legacy iOS */
}

/* open-sans-700italic - latin */

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/open-sans-v17-latin-700italic.eot');
  /* IE9 Compat Modes */
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('../fonts/open-sans-v17-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/open-sans-v17-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/open-sans-v17-latin-700italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/open-sans-v17-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/open-sans-v17-latin-700italic.svg#OpenSans') format('svg');
  /* Legacy iOS */
}

/* open-sans-800italic - latin */

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/open-sans-v17-latin-800italic.eot');
  /* IE9 Compat Modes */
  src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'), url('../fonts/open-sans-v17-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/open-sans-v17-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/open-sans-v17-latin-800italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/open-sans-v17-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/open-sans-v17-latin-800italic.svg#OpenSans') format('svg');
  /* Legacy iOS */
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

/* General border-box */

* {
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

section:nth-child(odd) {
  background-color: #F7F7F7;
}


/* Custom ultilities */

/* Centered */

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.vertical-centered {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

/*Flex Navigation */

nav {
  padding-top: 30px;
  padding-bottom: 30px;
}

.menu ul {
  list-style-type: none;
  font-family: "Open Sans";
  font-size: 14px;
}

.menu a {
  color: white;
  text-decoration: none;
}

.menu a:hover {
  text-decoration: none;
  border-bottom: 3px solid #adaa35;
}

.menu li {
  /*padding: 15px 5px; */
  line-height: 1.4;
  list-style: none;
  white-space: nowrap;
}

.logo {
  font-family: "Open Sans";
  font-size: 18px;
  font-weight: 900;
  color: white;
  border-bottom: none;
  vertical-align: middle;
}

.toggle a, .toggle a:hover {
  font-size: 20px;
  border-bottom: none;
}

/* Mobile menu */

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.toggle {
  order: 1;
}

.item.button {
  order: 2;
}

.item {
  width: 100%;
  text-align: center;
  order: 3;
  display: none;
}

.item.active {
  display: block;
  background-color: #359186;
  font-family: "Rockwell";
}

.menu.active {
  background-color: #359186;
  max-width: 100%;
  box-sizing: border-box;
}

/*Overlay Mobile Menu*/

/* The Overlay (background) */

.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 0;
  width: 100%;
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(53, 145, 134);
  /* Solid fallback color */
  background-color: rgb(53, 145, 134, 0.9);
  /*  w/opacity */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */

.overlay-content {
  position: relative;
  top: 25%;
  /* 25% from the top */
  width: 100%;
  /* 100% width */
  text-align: center;
  /* Centered text/links */
  margin-top: 30px;
  /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 25px;
  line-height: 2.2;
  font-family: "Rockwell";
  color: white;
  display: block;
  /* Display block instead of inline */
  transition: 0.3s;
  /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */

.overlay a:hover, .overlay a:focus {
  color: #ADAA35;
  ;
}

/* Position the close button (top right corner) */

.overlay .closebtn {
  position: absolute;
  right: 5px; 
  top:5px;
  font-size: 36px;
}

.overlay .logo {
  position: absolute;
  top: 30px;
  left: 20px;
  font-size: 18px;
}


/* Banner */

.banner {
  padding: 0;
  min-height: 300px;
  text-align: center;
  position: relative;
  background-color: #35915b;
  /* layer fill content */
  color: white;
}

.banner-image {
  padding: 0;
  text-align: center;
  background-color: #35915b;
  color: white;
  background: url("../images/desktop_banner1x_compresse.png");
  background-size:cover;
  background-position: 50% 50%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.banner-caption {
  font-family: "Rockwell";
  line-height: 1.2;
  text-align: center;
  position:relative;
  margin:0; 
  min-height:100%;
  padding-top:30px;
}


/* Desktop menu */

@media all and (min-width: 1200px) {
  .banner-image{
    background: url("../images/desktop_banner2x_compresse.png");
    background-size:cover;
  }
  .item {
    display: block;
    width: auto;
  }
  .toggle {
    display: none;
  }
  .logo {
    order: 0;
  }
  .item {
    order: 1;
  }

  .menu li {
    padding: 15px 10px;
  }
  .menu li.button {
    padding-right: 0;
  }
  .menu.active {
    background-color: transparent;
  }
  .item.active {
    background-color: transparent;
  }
  .banner {
    min-height: 400px;
  }
  .banner-caption{
    margin-top: 30px;
  }
}

/*Back to top button*/

/* Sections*/

.about {
  padding-top: 72px;
  padding-bottom: 78px;
  text-align: center;
}

.section.title {
  color: #ADAA35;
  font-family: "Open Sans";
  font-weight: 900;
  line-height: 1.4;
  -webkit-margin-after: 0px;
  margin-block-end: 0px;
  padding-bottom: 14px;
  text-align: center;
}

.section.caption {
  color: #1F9191;
  font-family: "Rockwell-Bold";
  -webkit-margin-after: 0px;
  margin-block-end: 0px;
  padding-bottom: 14px;
  text-align: center;
}

.section.content {
  text-align: center;
  font-family: 'Open Sans';
  line-height: 1.4;
  color: #514C59;
}

.technology {
  padding-top: 55px;
  padding-bottom: 106px;
}

.technology-image {
  height: 64px;;
  width: 64px;
  flex-shrink: 0;
  flex-grow: 0;
  align-self:flex-start; 
  color:#eea5a5
}


.technology-name {
  font-weight: 900;
  color: #514C59;
  margin-bottom: 0.375rem;
}

.technology-list{
  padding-top: 31px;
  display: flex;
  flex-wrap:wrap;

}

.tech-para{
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
}

.technology-card{
  display: flex;
  }


.process {
  padding-top: 55px;
  padding-bottom: 95px;
}

.projects-list, .process-list, .partner-list, .email-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  flex-direction: column;
}

.process-title.active {
  color: #1F9191;
}

.process-seperator {
  transform: translateY(-24px);
}

.vr {
  width: 0.2px;
  height: 100px;
  background: white;
  align-self: flex-start;
  margin-top: 0rem;
  display: none;
}

.hr {
  height: 0.2px;
  width: 100%;
  background: #514c59;
}

.process-title {
  text-align: center;
  font-weight: 900;
  color: #BCB8C2;
}

.project-title {
  color: #514C59;
}

.project-title, .partner-title {
  font-family: "Open Sans";
  font-weight: bold;
  font-size: 18px;
  line-height: 1.3;
  display: block;
  padding-bottom: 9px;
}

.ideation-image, .validation-image, .consolidation-image, .transition-image, .process-image, .project-image {
  margin-right: 0;
  width: 80px;
  height: 80px;
  background-size: contain;
  cursor: pointer;
}

.project-image {cursor:auto;}

.ideation-image {
  background-image: url("../images/ideation icon_inactive@2x.png");
}

.ideation-image.active {
  background-image: url("../images/ideation icon@2x.png");
}

.validation-image {
  background-image: url("../images/validation icon_inactive@2x.png");
}

.validation-image.active {
  background-image: url("../images/validation icon@2x.png");
}

.consolidation-image {
  background-image: url("../images/consolidation icon_inactive@2x.png");
}

.consolidation-image.active {
  background-image: url("../images/consolidation icon@2x.png");
}

.transition-image {
  background-image: url("../images/transition icon_inactive@2x.png");
}

.transition-image.active {
  background-image: url("../images/transition icon@2x.png");
}

.process-desc {
  text-align: center;
  display: none;
}

.process-desc.active {
  display: block;
}

.project-desc, .partner-desc {
  line-height: normal;
  display: block;
  line-height: 1.4;
}

.success {
  color: #ADAA35;
  line-height: 1.4;
  font-weight: bold;
  display: block;
}

.partner-card {
  width: 80%
}

.project-card {
  width: 100%
}

.partner-card, .project-card {
  display: block;
  ;
  height: 100%;
  padding-bottom: 30px;
}

.partner {
  background: url("../images/work with us image@2x.png");
  background-size: cover;
  background-position: 50% 50%;
  font-family: "Open Sans";
  position: relative;
  opacity: .9;
  padding-top: 55px;
  background-repeat: no-repeat;
  background-color: #248d8f;
  text-align: center;
}

.partner, .partner .section.title, .partner .section.caption, .partner-desc, .partner-title {
  color: white;
}

#sendBtn {
  color: #FFFFFF;
  width: 50%;
  font-family: "Open Sans";
  font-weight: bold;
  line-height: 1.4;
  font-size: 14px;
  border-radius: 20px;
  border-color: #FFFFFF;
  margin-top: 26px;
  align-self: center;
}

#sendBtn:disabled{
  color: #ffffff4d;
}

#sendBtn:disabled:hover {
  background-color:transparent;
}

#sendBtn:hover {
  background-color: #ADAA35;
}
#nameInput, #emailInput, #messageInput {
  color: #000;
  line-height: 1.4;
  width: 100%;
}

#messageInput {
  min-height: 200px;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #75707c;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #75707c;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #75707c;
}

input::-ms-input-placeholder, textarea::-ms-input-placeholder {
  color: #75707c;
}

input::placeholder, textarea::placeholder {
  color: #75707c;
}

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

.form-caption {
  font-family: "Rockwell";
  font-size: 42px;
  padding-bottom: 14px;
  width: 100%;
}

.mail-form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mail-form .error{
  color: #330909;
  display:inline-flex;
  text-align: left;
}

.confirmation{
  font-weight: 600;
  color:#ADAA35;
  padding:20px 20px 20px 20px;
}

#process-mobile {
  display: block;
}

#process-desktop {
  display: none;
}

@media all and (min-width: 940px) {

  .partner {
    background-size: contain;
  }
  .projects-list, .partner-list, .process-list, .email-form {
    flex-direction: row;
    align-content: flex-start;
  }

  #top-btn{
    display: block;
  }

  .inputwrap {
    display: flex;
    flex-direction: column;
  }
  .hr {
    display: none;
  }
  .vr {
    display: inline-block;
  }
  .projects-list, .partner-list {
    align-items: flex-start;
  }
  .technology-card{
    width:50%;
  }

  .project-card {
    width: 33%;
  }
  .partner-card {
    width: 28%;
  }

  .process-card {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .form-caption {
    font-size: 48px;
  }
  .form-title {
    align-self: flex-start;
    text-align: left;
    width: 45%;
  }
  .email-form {
    flex-wrap: wrap;
    align-content: flex-start;
  }
  .mail-form {
    align-self: flex-start;
    padding-left: 10px;
    margin-right: auto;
    width: 55%;
    padding-top: 20px;
  }
  #nameInput, #emailInput {
    width: 49%;
  }
  .inputwrap {
    flex-direction: row;
    justify-content: space-between;
  }
  #process-mobile {
    display: none;
  }
  #process-desktop {
    display: block;
  }
}


/* Slide Show Styles */

.slide-show {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

/* Hide the images by default */

.mySlides {
  display: none;
}

/* Next & previous buttons */

.prev, .next {
  cursor: pointer;
  position: relative;
  padding: 8px;
  background-color: #1F9191;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Position the "next button" to the right */

.prev {
  border-radius: 3px 0 0 3px;
  margin-right: 20px;
}

.next {
  border-radius: 0 3px 3px 0;
  margin-left: 20px;
}

/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */

.process-step {
  font-style: italic;
  padding-bottom: 10px;
}

/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot:hover {
  background-color: #717171;
}

/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

/* Back to Top Button*/

#top-btn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  text-decoration: none;
  bottom: 60px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  padding:0 15px;
  padding-bottom: 5px;
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #555; /* Add a dark-grey background on hover */
  opacity: 0.3;
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  border-radius: 5px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  transition: opacity 0.6s ease;
}

#top-btn:hover {
  opacity:1; /* Set a background color */
}