/* ==========================================================================
   Start of custom Webflow CSS
   ========================================================================== */

.content-wrapper {
  position: static;
  overflow: visible;
  width: 60%;
  max-width: 1200px;
  margin-left: 0%;
  float: none;
  clear: none;
}


.sidebar-wrapper {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 0;
  width: 40%;
  height: 100%;
  padding: 75px 85px 50px;
  background-color: #fafafa;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#fafafa));
  background-image: linear-gradient(180deg, #fafafa, #fafafa);
}


.sidebar-wrapper.project {
    padding: 25px 65px 50px;
}


h1.global-header-logo {
    text-align: left;
    width: 108px;
    height: 103px;
    margin: 10px;
    position: relative;
}

h1.global-header-logo a {
    display: inline-block;
    height: 100%;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    background: url(../images/logo-grey.png) center;
    background-size: cover;
    position: relative;
    z-index: 999;
}

nav {font-size: .9rem;     text-align: center;}
nav a {color: #3c3e51}
a:hover {text-decoration: none}
img {
    max-width: 100%;
    height: auto;
}

.d-flex {
    align-items: flex-start;
}

/* Project Page*/
header.pageHeader {
    border-bottom: 2px solid #CCC;
    display: flex;
}
header.pageHeader h1.global-header-logo {
	width: 60px;
	height: 56px;
}
header.pageHeader h2 {
	font-family: 'Poppins', sans-serif;
	color: #3c3e51;
	font-size: 22px;
	margin-top: 24px;
}

header.pageHeader h2 a {
    color: #3c3e51;
    text-decoration: none;
}

.content-wrapper-middle {
    margin: 0 auto;
    width: 70%;
    max-width: 1600px;
}



header.pageHeader ul {display: none}


.title_sub {
    margin-top: -50px;
    margin-left: 0px;
    float: none;
    clear: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 100;
    color: #fff;
    font-size: 12px;
    line-height: 12px;
}

.title {
  margin-top: 5px;
  margin-left: 0px;
  float: left;
  font-family: 'Museosans 500', sans-serif;
  color: #fff;
}

.flex-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
}

.fatpudding_1 {
  width: 100%;
  height: auto;
  padding: 65px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e8aed0), to(#feedf7));
  background-image: linear-gradient(180deg, #e8aed0, #feedf7);
  position: relative;
}

.fatpudding_2 {
  width: 100%;
  height: auto;
  padding: 65px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#5a95f6), to(#aec5ec));
  background-image: linear-gradient(180deg, #5a95f6, #aec5ec);
}

.fatpudding_3 {
  width: 100%;
  height: auto;
  padding: 65px;
  background: #dfdfdf;
}



.image-01 {
  width: 64%;
  margin-left: 12%;
}

.image-02 {
  width: 90%;
  margin-left: 5%;
}

.fp_title {
           position: absolute; left: 0; top: 65px;     text-align: right;
           transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.fp_title span {
    display: block;
    font-weight: 700;
    font-size: 1.2em;
}

.fp_title span:first-child {    margin-right: 0px;}
.fp_title span:nth-child(2) {    margin-right: 20px;}
.fp_title span:nth-child(3) {     margin-right: 40px;}


.about {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: auto;
    height: auto;
    margin-top: 0px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #3c3e51;
    font-size: 36px;
    line-height: 42px;
    opacity: 1; transform: translateX(0px) translateY(0px) translateZ(0px); transition: opacity 500ms ease 0s, transform 500ms ease 0s;
}


.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.homepage .card:hover .overlay {
    opacity: 1;
}


.homepage .card-text {
    color: #FFF;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.homepage .card {
    border: none;
    border-radius: 0;
    min-height: 34rem;
}

.card-01 {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#bee3d4), to(#a6bfb4));
	background-image: linear-gradient(180deg, #bee3d4, #a6bfb4);
}
.card-01 .overlay:hover {
	background-color: #8fd1b6;
}
.card-02 {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eccedd), to(#e49abc));
	background-image: linear-gradient(180deg, #eccedd, #e49abc);
}
.card-02 .overlay:hover {
	background-color: #eaa7c7;
}
.card-03 {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffc73f), to(#f6cc79));
	background-image: linear-gradient(180deg, #ffc73f, #f6cc79);
}
.card-03 .overlay:hover {
	background-color: #ffc73f;
}
.card-04 {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#b9d2fc), to(#9ab7e5));
	background-image: linear-gradient(180deg, #b9d2fc, #9ab7e5);
}
.card-04 .overlay:hover {
	background-color: #7da3e2;
}
.card-05 {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#f0f0fa));
	background-image: linear-gradient(180deg, #f7f7f7, #f0f0fa);
}
.card-05 .overlay:hover {
	background-color: #7f808c;
}
.card-06 {
	background: #e2ffe1
}
.card-06 {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e2ffe1), to(#87ce84));
	background-image: linear-gradient(180deg, #e2ffe1f, #87ce84);
}
.card-06 .overlay:hover {
	background-color: #96ca94;
}

.card-07 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fae2e7), to(#f5d0d8));
    background-image: linear-gradient(180deg, #fae2e7, #f5d0d8);
}
.card-07 .overlay:hover {
	background-color: #f6b5c3;
}
.card-08 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ecdbc9), to(#dfc9b2));
    background-image: linear-gradient(180deg, #ecdbc9, #dfc9b2);
}

    .card-08 .overlay:hover {
        background-color: #b9a188;
    }


ul.list-socials {
    margin: 1rem 0;
    padding: 0;
    text-align: center
}
ul.list-socials li {list-style: none; display: inline-block; margin: 0.5rem }


path { transition: fill .5s ease; }

ul.list-socials li svg {
  width: 40px;
  height: 40px;
  fill: #b4bacf;
}
ul.list-socials li svg:hover {
  fill: #3c3e51;
}

#Project {
    background: #fafafa;
}
ul.project-info {
    margin: 1rem 0;
    padding: 0;
    text-align: justify
}
ul.project-info li {list-style: none; margin: 1rem 0}
.project-info ul {list-style: none; text-align: center; margin-bottom: 1em; padding: 0}
.project-info li span {
    text-transform: uppercase;
    display: block;
    font-size: 0.8rem;
    font-weight: bold;
}


#Project.Hera header {background: #5fcac6; padding: 1rem}
#Project.Athena header {background: #d8dff0; padding: 1rem}
#Project.Workflow header {background: #ede4d2; padding: 1rem}
#Project.Marketing header {background: #d5f1e5; padding: 1rem}


#Project header .project-logo img {
    max-height: 8rem;
}

.NextProject {
    background: #3c3e51;
    overflow: hidden;
    box-sizing: border-box;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.NextBtn {
    display: inline-flex;
    margin-top: 20px;
    text-decoration: none;
    color: #000;
    border-radius: 32px;
    font-weight: 400;
    padding: 18px 20px;
    background-color: rgba(255, 255, 255, 1);
    margin-top: 0px !important;
    transition: background-color 0.3s ease-out !important;
}

    .NextBtn:hover {
        background-color: #DEDEDE;
        color: #000
    }
.ArrowNext {
    width: 20px;
    margin-left: 10px;
}



@media (max-width: 991px) {
    .sidebar-wrapper {
    position: static;
    width: 100%;
    height: 750px;
    padding-right: 55px;
    padding-left: 55px;
  }
  .content-wrapper {
    width: 100%;
    margin-left: 0%;
    float: none;
    clear: none;
  }
  .about_container {
    position: static;
    width: 65%;
  }
    .homepage .card {
        min-height: 26rem;
    }
}

@media (max-width: 767px) {
  .sidebar-wrapper {
    position: static;
    width: 100%;
    padding-left: 65px;
  }
  .content-wrapper {
    width: 100%;
    margin-left: 0%;
  }
  .about_container {
    position: static;
    width: 85%;
  }
  .content-wrapper-middle {
        width: 100%;
  }

}

@media (max-width: 479px) {
  .sidebar-wrapper {
    position: static;
    width: 100%;
    height: auto;
    padding: 25px 45px 75px;
  }
  .content-wrapper {
    width: 100%;
    margin-left: 0%;
  }

    .homepage .card {
        min-height: 20rem;
    }
  .title_sub {
    margin-top: -10px;
  }
 
  .about_container {
    position: static;
    width: 100%;
  }

  .image-01 {
    width: 78%;
    margin-left: 18%;
  }
}

.Legacy .project {
    position: relative;
    width: 70%;
    margin: 0 auto
}

    .Legacy .project img {
        width: 100% !important;
        height: 100% !important;
    }

    .Legacy .project .carousel {
        margin: 0;
        position: absolute;
        top: 5.1%;
        left: 3.9%;
        right: 3.9%;
        bottom: 26.2%;
        height: auto;
        width: auto;
        overflow: hidden;
    }

.Legacy .project-copy {
    width: 100%;
}