/* 
color1: #1b4554;
color2: #253a46;
color3: #006b74;
*/

/* 
Small Switch Palette
#1b4554
#d3eee8
#318a7b
*/
* {
    transition:all 0.3s linear;
}
html, body {
    max-width:100%;
    overflow-x:hidden;
}
body {
    color:#fff;
    font-family: 'Comfortaa', cursive;
    font-size:1.3rem;
    background-color:#1b4554;
}
.logo {
    font-weight:bold;
    color:#fff;
}
#page-wrapper {
    background-color:#1b4554;
    
    width:105%;
    max-width:105%;
    max-height:100vh;
    position:relative;
    overflow-y:scroll;
    overflow-x:hidden;
    
  
}
.page-home #page-wrapper {
    scroll-snap-type: both mandatory;
}
#page-wrapper article {
    min-width: 100%;
    min-height: 100vh;
    scroll-snap-align: center;
    position:relative;
    padding-left:1rem;
    padding-right:2rem;
}
.page-home #page-wrapper article {
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
    color:#fff;
    font-family: 'Comfortaa', cursive;
}
h2 {
    font-size:2.7rem;
    font-weight:bold;
    margin-top:12rem;
}

#header {
    background-color:#1b4554 !important;
    height:6rem;
    border-bottom:none;
    width: 100%;
    padding-left:20%;
    padding-right:20%;
}
#header .navbar-section {
    margin-right:0;
    width:50%;
    max-width:50%;
}
#header .logo {
    
}
#header .desktop-menu {
    max-width:100%;
    padding-left:1rem;
}
#header .dropmenu {
    max-width:100%; 
    width:100%;
    padding-top:1rem;
}
#header .dropmenu li {
    flex:1;
    padding-left:0;
    padding-right:0;
    margin-left:0;
    margin-right:0;
}
#header .dropmenu li a {
    padding-left:0;
    padding-right:0;
    margin-left:0;
    margin-right:0;
}
#header .logo img {
    height:90px;
    margin-top:1rem;
}
#header a, #header a.active, #header a:active, #header a:visited {
    color:#fff !important;
}
.langswitcher {
    width: 100%;
    text-align:right;
    padding-top:3rem;
    padding-right:4rem;
}
.page-contact #page-wrapper {

    background-image:url(../images/background-contact.svg);
    background-repeat: no-repeat;
    background-position: right 21rem bottom 5rem;
    background-size: 25%;

}
#article-form {
    margin-top:10rem;
    max-width:60%;
    margin-left:auto;
    margin-right:auto;
}
.page-contact p,
.page-contact label {

    font-size:1rem;
}
.page-contact hr {
    color:#1b4554;
}
.page-info #page-wrapper {
    background-image:url(../images/background-info.svg);
    background-repeat: no-repeat;
    background-position: right 21rem bottom 3rem;
    background-size: 25%;
}
.homepage .hidder {
    width:50%;
    height:160px;
    background-color:#1b4554;
    position:absolute;
    left:0%;
    z-index:500;
}
.navbar {
    padding-top:0.5rem;
}
.dropmenu > ul {
    justify-content:space-around;
}
article {
    position:relative;
    display:flex;
    align-items:center;
    flex-direction: column;
    
}
article > * {
    width:100%;
    
    
}
article .article-header {
    
}
article .article-body a {
    color:#318a7b;
    text-decoration:underline;
}
article .article-body a:hover {
    color:#318a7b;
    text-decoration:none;
    opacity:0.5;
}
#article-1 .article-body {
    margin-top:8rem;
}
#article-1 .article-body {
    text-align:center;
}
#article-1 img {
    width:75%;
}
article {
    background-size:60%;
    background-position:bottom 5rem right 4rem;
    background-repeat:no-repeat;
}
@media (min-width:800px) {
    article {
        background-size:30%;
        background-position:bottom 5rem right 14rem;
    }
}
@media (min-width:1440px) {
    article {
        background-size:20%;
        background-position:bottom 5rem right 24rem;
    }
}
#article-1 {
    /*background-image:url(../images/logo/realestatexpert-logo.svg);
    background-size:50%;
    background-position:center 33%;
    background-repeat:no-repeat;*/
}
#article-2 {
    background-image:url(../images/background-2.svg);
}
#article-3 {
    background-image:url(../images/background-3.svg);
}
#article-4 {
    background-image:url(../images/background-4.svg);
}
#article-5 {
    background-image:url(../images/background-5.svg);
}
#article-1 nav {
    text-align:center;
}
#article-1 nav a {
    display:inline-block;
    color:#fff;
    font-weight:bold;
    font-size:2.1rem;
    transition:all 0.3s linear;
    border:3px solid #1b4554;
    padding-top:0.3rem;
    padding-left:0.4rem;
    padding-right:0.4rem;
    border-radius:5px;
    margin-bottom:1rem;
}
#article-1 nav a:hover {
    text-decoration:none;
    color:#318a7b;
    border:3px solid #318a7b;
}
#article-footer {
    background-color:#d3eee8;
    position:relative;
    max-height:100%;
    height:100%;
    overflow:hidden;
}
#footer {
    position:relative;
    bottom:0;
    background-color:#318a7b !important;
    width:100%;
    height:3rem;
}
#footer p {
    color:#1b4554;
    font-size:0.7rem;
    font-style:italic;
    margin-bottom:0;
}
.dropmenu span {
    display:none;
}
.slug-home .icon-wrapper {
    background-image:url('../images/icon-home-sm.png');
    background-repeat:no-repeat;
}
.slug-info .icon-wrapper {
    background-image:url('../images/icon-info-sm.png');
    background-repeat:no-repeat;
}
.slug-contact .icon-wrapper {
    background-image:url('../images/icon-contact-sm.png');
    background-repeat:no-repeat;
}

.icon-wrapper {
    width:64px;
    height:64px;
    background-size:100%;
    transition:all 0.3s linear;
    margin-left:1rem;
    margin-right:1rem;
}
.icon-wrapper:hover {
    opacity:0.6;
    background-size:100%;
}
#contact-form {
    max-width:60%;
    margin-left:auto;
    margin-right:auto;
    margin-top:3rem;
    margin-bottom:6rem;
}
#contact-form input::placeholder,
#contact-form textarea::placeholder {
    color:#555;
}
.form-field {
    margin-bottom:1rem !important;
}
.form-input {
    border-radius:5px;
    background-color:rgba(255, 255, 255, 0.5);
    border-color:#318a7b;
    
}
.form-input:focus {
    border-color:#253a46;
    border-color:#318a7b;
    outline:#318a7b 3px solid;
}
button.btn {
    border-radius:5px;
    border:none;
    background-color:#318a7b;
    color:#fff;
    font-weight:bold;
}
button.btn:hover {
    outline:#318a7b 3px solid;
    background-color:#318a7b;
    border-color:#318a7b;
    color:#1b4554;
}
.toast.toast-success {
    border-color:#555;
    background-color:rgba(0, 0, 0, 0.3);
    text-align:center;
}
    #header .dropmenu {
        max-width:80%;
    }
@media (max-width:1900px) {
    #article-1 .article-header {
        margin-top:0;
    }
}
@media (max-width:1440px) {
    body {
        font-size:1.1rem;
    }
    #article-1 nav a {
        font-size:1.8rem;
    }
}
@media (max-width:1200px) {
    body {
        font-size:0.9rem;
    }
    #article-1 nav a {
        font-size:1.5rem
    }
    h2 {
        font-size:3rem;
    }

}
@media screen and (min-width:840px) {
   article .article-header {
       margin-left: auto;
       margin-right: auto;
       max-width:60%;
       margin-top:2rem;
       margin-bottom:3rem;
   }
   .page-info article .article-header {
       margin-top:0;
       margin-bottom:2rem;
   }
    article .article-body {
        margin-left: auto;
        margin-right: auto;
        max-width:60%;
   }
   #article-1 .article-header {
        text-align:center;
        max-width:100%;
        margin-top:2rem;
    }
     #article-1 h1 {
       
    }
}
@media (max-width: 840px) {
    #header {
        padding-left:6%;
        padding-right:6%;
    }
    #header .navbar-section.desktop-menu {
        display:flex !important;
    }
    .dropmenu {
        display:block !important;
    }
    .mobile-menu {
        display:none !important;
    }
    .homepage .hidder {
        height:120px;
    }
    #article-1 .article-header {
        margin-top:5rem;
    }
    #article-1 .article-body {
        margin-top:15rem;
        max-width:90%;
    }
    h2 {
        font-size:2.5rem;
    }
    .page-info article {
        padding-left:6% !important;
        padding-right:6% !important;
    }
    .hidder {
        height:180px;
    }
    #contact-form,
    #article-form {
        max-width:88%;
    }
    .page-info #page-wrapper,
    .page-contact #page-wrapper {
        background-position: right 12rem bottom 5rem;
        background-size: 50%;
    }
    #article-form {
        margin-top:0;
    }
}
@media (max-width: 600px) {
    .navbar-section {
        max-width:50%;
        min-width:50%;
    }
    .icon-wrapper {
        width:32px;
        height:32px;
    }
    .homepage .hidder {
        height:150px;
    }
    #article-1 nav a {
        font-size:1.2rem;
    }
    h2 {
        font-size:2rem;
    }
    .page-info #page-wrapper,
    .page-contact #page-wrapper {
        background-position: center bottom 5rem;
        background-size: 270px;
    }
    .page-info .article-header h2 {
        margin-top:2rem;
    }
    
}
.navbar {
    flex-wrap: nowrap ;
}