html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}

main {
    margin: 0 auto;
}

a {
    text-decoration: none;
    color: #000000;
}

a:hover {
    text-decoration: underline;
}

/* Homepage Banner */

#banner {
    padding: 0 50vw 0 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: url(../img/Digibrixx_Header.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-blend-mode: overlay;
    color: #ffffff;
}

#banner h1 {
    width: 50vh;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 1px;
    padding: 35px 80px 10px 80px;
    color: #3C5064;
    font-size: 59px;
    font-family: 'Nimbus Sans', Arial, Helvetica, sans-serif;
}

#banner p {
    width: 50vh;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 1px;
    padding: 10px 80px 10px 80px;
    color: #3C5064;
    font-size: 18px;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;
}

/* CTA from banner */

.cta-readmore {
    width: 50vh;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 1px;
    padding: 10px 80px 35px 80px;
    color: #3C5064;
    font-size: 18px;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;
    font-style: italic;
    text-decoration: none;
    text-align: right;
}

/* Logo Image  */

#logo-img {
    margin: 0 160px 80px 0px;
    width: 50vh;
}

#logo-img img {
    width: 60%;
}

/* Navigation */

nav {
    height: 72px;
    background: #3C5064;
    width: 100%;
    margin: 0 auto;
    position: fixed;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    padding: 5px 15px 5px 0px;
    box-sizing: border-box;
    z-index: 100;
    
}

nav a {
    padding: 0 25px;
    color:#ffffff;
    transition: 0.4s;
    font-size: 18px;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;
    
}

nav a:hover {
    text-decoration: none;
    color: #be1b70;
}

nav ul {
    display: flex;
    list-style: none;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    margin: 0 ;
}

/* Navigation Active Tab */

.active {
    color: #6ca47b;
}

/* Section */

section {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

/* Section Heading "Presentation" */

.pres-header {
    width: 100%;
    margin: 0px auto;
    background: #E5F1C2;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 300;
    transition: all 0.4s;
    display: flex;
    padding: 4px 32px;
}

.presentation {
    height: 90%;
    /*vertical-align: middle;*/
}

.presentation-left {
    height: 100%;
    display: inline-block;
    vertical-align: bottom;
}

.presentation-right {
    height: 80%;
    display: inline-block;
}

.presentation-left h2 {
    display: inline-block;
    font-family: 'Nimbus Sans', Arial, Helvetica, sans-serif;
    font-size: 49px;
}

.presentation-left p {
    display: inline-block;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;
    font-size: 24px;
}

section {
    background: #ffffff;
    display: flex;
}

section #presentation-left {
    flex: 1;
}

section #presentation-right {
    flex: 2;
}

/* Mobile Menu Icon */

#menu-icon {
    height: 100%;
    font-size: 28px;
    padding: 0 4px;
    color: #3C5064;
    visibility: hidden;
    align-items: center;
}

/* Media queries for homepage */

@media (max-width: 720px) {
    nav {
        display: none;
    }

    #menu-icon {
        visibility: visible;
    }

    #slideout-menu {
        display: flex;
    }
}

@media (max-width: 720px) {
    #banner {
        width: 100%;
        padding: 0 0;
        margin: 0 auto;
    }

    #logo-img {
        width: 50%;
        margin: 0 auto;
        align-items: center;
        display: block;
        padding-bottom: 300px;
    }

}

/* Slide out Menu for Mobile */

#slideout-menu {
    display: none;
    background: #E5F1C2;
    z-index: 100;
    position: fixed;
    transition: 0.4s;
    margin-top: 72px;
    width: 100%;
    text-align: center;
}

#slideout-menu ul {
    list-style: none;
    padding: 0 32px;
}

#slideout-menu ul li {
    padding: 8px;
}

#slideout-menu a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
}


/* END OF HOMEPAGE STYLING */

/* Presentation */

section {
    padding: 0 0 0 0;
    height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #3C5064;
}

#pres-header {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;
    font-weight: 200;
    background: #E5F1C2;
    margin-top: 10%;
    color: #3C5064;
}

#pres-header h1 {
    font-size: 36px;
}

#presentation {
    display: block;
    /*border: #6ca47b solid 5px;*/
    margin: 0 auto;
    width: 80%;
    
}

.presentation-left {
    float: left;  
    text-align: left;
}

.presentation-right {
    float: right;
    text-align: center;
}

.presentation-left, .presentation-right {
    width: 50%;
    margin: 0 auto;
    justify-content: center;
} 

.presentation-right img {
    width: 60%;
}

.presentation-left h2 {
    font-size: 49px;
}

.presentation-left p {
    font-size: 24px;
}

/* Media Queries */

@media (max-width: 720px) {
    .presentation-right {
        display: none;
    }
}

/* Video Player */

#video {
    width: 100%;
    padding: 0 0 0 0;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: url(../img/AdobeStock_286861218@2x.png);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-blend-mode: overlay;
    color: #ffffff;
    position: relative;
}

.video-icon {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 28px;
    color: #3C5064;
    margin: 0 auto;
    visibility: visible;
    align-items: center;
    z-index: 90;
}

.video-text {
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 10 0 0 0px;
    position: relative;
    font-size: 24px;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;
    font-weight: 300;
}

/* Projects Nav Bar */

#project-tab {
    background: #3C5064;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

#project-tab a {
    color: #ffffff;
    transition: 0.4s;
    font-size: 36px;
    font-family: 'PF Handbook Pro Thin', Arial, Helvetica, sans-serif;
    padding: 0 25px;
    text-align: center;
    text-transform: uppercase;
}

#project-tab ul {
    list-style: none;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

#project-tab a:hover {
    text-decoration: overline;
    color: #be1b70;
}

#project-tab li{
    float: left;

}

/* Navigation Active Tab */

.project-active {
    text-decoration: overline;
    text-decoration-color: #6ca47b;
    font-weight: 700;
}

/* Project Header */    
#project-header {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;
    font-weight: 200;
    background: #E5F1C2;
    margin-top: 10%;
    color: #3C5064;
}

#project-header h1 {
    font-size: 36px;
    text-transform: uppercase;
}

/*project description */

#project-section {
    /*border: #6ca47b solid 5px;*/
    width: 75%;
    padding-top: 5%;
    padding-left: 10%;
    padding-right: 0%;
    height: 200vh;
    margin: 0 auto;
}

#project-description {
    width: 60%;
    height: auto;
}

#project-section h2 {
    font-size: 49px;
    font-family: 'Nimbus Sans', Arial, Helvetica, sans-serif;
    color: #3C5064;
}

#project-section h3 {
    font-size: 24px;
    font-family: 'PF Handbook Pro Black', Arial, Helvetica, sans-serif;
    color: #3C5064;
}

#project-section p {
    font-size: 24px;
    font-family: 'PF Handbook Pro Thin', Arial, Helvetica, sans-serif;
    color: #3C5064;
}

/* content subdivision */
#project-content {
    display: block;
    margin: 0 auto;
    width: 100%;
    
}

.project-map {
    float: left;  
    text-align: left;
}

.project-info {
    float: right;
    text-align: right;
}

.project-map {
    width: 60%;
    margin: 0 auto;
    justify-content: center;
} 

.project-info {
    width: 40%;
    margin: 0 auto;
    justify-content: center;
} 

.project-map img {
    width: 100%;
}

#project-geo {
    width: 100%;
}

#project-geo h4 {
    color: #3C5064;
    font-family: 'PF Handbook Pro Thin', Arial, Helvetica, sans-serif;
    font-size: 36px;
}

.project-map h5 {
    color: #3C5064;
    font-family: 'PF Handbook Pro Black', Arial, Helvetica, sans-serif;
    font-size: 24px;
}

.bold {
    color: #3C5064;
    font-family: 'PF Handbook Pro Thin', Arial, Helvetica, sans-serif;
    font-size: 24px;
}

/* project info content subdivision */

#project-loading {
    display: flex;
    margin: 0 auto;
    width: 80%;
    /*border: #6ca47b solid 5px;*/
    justify-content: right;
    text-align: right;
    color: #3C5064;
}

.project-loading-left {
    float: left;  
    text-align: left;
}

.project-loading-right {
    float: right;
    text-align: right;

}

.project-loading-left, .project-loading-right {
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    font-family: 'Nimbus Sans', Arial, Helvetica, sans-serif;
    font-size: 34px;
} 

#project-loading h6{
    margin-top: 0px;
    margin-bottom: 0px;
}

#project-loading p{
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: 'PF Handbook Pro', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding-bottom: 5%;
}

#project-loading p span {
    background: #E5F1C2;
}

/* */

#project-information {
    display: flex;
    margin: 0 auto;
    width: 80%;
    /*border: #6ca47b solid 5px;*/
    justify-content: right;
    text-align: right;
    color: #3C5064;
}

.project-information-left {
    float: left;  
    text-align: left;
}

.project-information-right {
    float: right;
    text-align: right;

}

.project-information-left, .project-information-right {
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    font-family: 'Nimbus Sans', Arial, Helvetica, sans-serif;
    font-size: 34px;
} 

#project-information h6{
    margin-top: 0px;
    margin-bottom: 0px;
}

#project-information p{
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: 'PF Handbook Pro', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding-bottom: 25%;
}

#project-information p span {
    background: #E5F1C2;
}

/* Downloads */

#project-brochure {
    margin: 0 auto;
    width: 80%;
    justify-content: center;
    text-align: left;
    color: #3C5064;
    text-align: left;
    vertical-align: middle;
}

#project-brochure p {
    display: inline-block;
    font-size: 18px;
    font-family: 'PF Handbook Pro', Arial, Helvetica, sans-serif;
    text-align: center;
    vertical-align: middle;
}

#project-brochure img {
    width: 5%;
    height: auto;
    padding-right: 5%;
    text-align: center;
    vertical-align: middle;
}

/* buttons */

#project-cta {
    margin: 10% auto;
    width: 80%;
    justify-content: center;
    text-align: left;
    color: #ffffff;
    text-align: center;
    background: #3C5064;
    vertical-align: middle;
    border: #3C5064 solid 1px;
}

#project-cta p {
    display: inline-block;
    color: #ffffff;
    font-size: 18px;
    font-family: 'PF Handbook Pro', Arial, Helvetica, sans-serif;
    text-align: center;
    vertical-align: middle;
}

#project-cta img {
    width: 5%;
    height: auto;
    padding-right: 5%;
    text-align: center;
    vertical-align: middle;
}

#project-cta-b {
    margin: 10% auto;
    width: 80%;
    justify-content: center;
    text-align: left;
    color: #3C5064;
    text-align: center;
    background: #ffffff;
    vertical-align: middle;
    border: #3C5064 solid 1px;
}

#project-cta-b p {
    display: inline-block;
    color: #3C5064;
    font-size: 18px;
    font-family: 'PF Handbook Pro', Arial, Helvetica, sans-serif;
    text-align: center;
    vertical-align: middle;
}

/* Revue de presse */

#revue-header {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;
    font-weight: 200;
    background: #E5F1C2;
    margin-top: 10%;
    color: #3C5064;
}

#revue-header h1 {
    font-size: 36px;
}

#revue {
    display: block;
    height: 100vh;
    /*border: #6ca47b solid 5px;*/
    margin: 0 auto;
    width: 80%;
    padding-top: 15%;
    padding-left: 10%;
    padding-right: 0%;
    padding-bottom: 10%;
}

.revue-left {
    float: left;  
    text-align: left;
    margin-top: 5%;
}

.revue-right {
    float: right;
    text-align: center;
    margin-top: 5%;
}


.revue-left {
    width: 60%;
    margin: 0 auto;
    justify-content: center;
} 

.revue-right {
    width: 40%;
    margin: 0 auto;
    justify-content: center;
    vertical-align: top;
} 

.revue-left img {
    width: 80%;
}

.revue-right h2 {
    font-size: 49px;
    font-family: 'Nimbus Sans', Arial, Helvetica, sans-serif;
    margin-right: 15%;
    margin-left: -15%;
    text-align: left;
}

.revue-right h3 {
    margin-top: 0px;
    margin-right: 15%;
    margin-left: -15%;
    font-size: 31px;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;

    text-align: left;
}

.revue-right p {
    width: 80%;
    font-size: 24px;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;
    margin-right: 15%;
    margin-left: -15%;
    text-align: left;
}

/* Footer */

footer {
    display: block;
    height: 30vh;
    width: 100vw;
    width: 100%;
    background: #E5F1C2;
    /*border: #6ca47b solid 5px;*/
    margin: 0 auto;
    text-align: center;
    padding-top: 5%;
}
 
/*
footer a {
    padding: 0 0px;
    color:#ffffff;
    transition: 0.4s;
}

footer h3 {
    font-size: 24px;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;
    color: #3C5064;
}


footer ul {
    border: #6ca47b solid 5px;
    display: flex;
    list-style: none;
    vertical-align: middle;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

#footer-icons ul {
    display: block;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    list-style: none;
}

#footer-contact ul {
    display: block;
    align-items: center;
    width: 100%;
    list-style: none;
} */

#footer-contact a {
    font-size: 24px;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;
    color: #3C5064;
}

#footer-address h3 {
    font-size: 24px;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;
    color: #3C5064;
}

#footer-contact {
    display: table;
    margin: 0 auto;
}

#horizontal-list {
	min-width: 90%;
	list-style: none;
	padding-top: 10px;
	}

#horizontal-list li {
display: inline;
vertical-align: middle;
    }
    
#footer-address {
    padding-top: 20px;
} 

/* Copyright */


#copyright {
    display: block;
    height: 10vh;
    width: 100vw;
    background: #3C5064;
    /*border: #6ca47b solid 5px;*/
    margin: 10% auto;
    text-align: center;
    padding-top: 5%;

}

#copyright li{
    padding: 0 25px;
    color:#ffffff;
    transition: 0.4s;
    font-size: 18px;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;
}


#copyright ul {
    display: flex;
    list-style: none;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    margin: 0 ;
}

#copyright {
    display: table;
    margin: 0 auto;
}



#copyright-info {
    display: table;
    margin: 0 auto;
}

/* contact form and map */

#contact-form-map {
    height: 80vh;
    padding-top: 5%;
    display: block;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: url(../img/Groupe\ 592@2x.png);
    background-size: cover;
    background-attachment: fixed;
    background-position: left;
    background-blend-mode: overlay;
    color: #ffffff;

}

#form-header {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;
    font-weight: 200;
    background: #E5F1C2;
    margin-top: 2%;
    color: #3C5064;

}

#form-header h1 {
    font-size: 36px;
}


#contact-form {
    display: block;
    margin: 0 auto;
    width: 80%;
    
}

.contact-form-left {
    float: left;  
    text-align: left;
}

.contact-form-right {
    float: right;
    text-align: center;
}

.contact-form-left, .contact-form-right {
    width: 20%;
    margin: 0 auto;
    justify-content: center;
} 

.contact-form-left label {
    
    margin-top: 10%;
    display: flex;
    padding: 1% 1%;
    /*background: #ffffff;*/
    font-size: 18px;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;
    color: #3C5064;
}

.contact-form-left textarea {
    position: absolute;
    display: flex;
    padding: 1% 1%;
    /*background: #ffffff;*/
    font-size: 18px;
    font-family: 'PF Handbook Pro Light', Arial, Helvetica, sans-serif;
    color: #3C5064;
}


/* TESTING AREA */