/*****************************************************************************

					BASICS

*****************************************************************************/
/* line 9, ../scss/layout.scss */
body {
    min-height: 100%;
    position: relative;
}

/* line 14, ../scss/layout.scss */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    /*background: #1F2527;*/
    z-index: 1;
}

/* line 24, ../scss/layout.scss */
.header {
    position: absolute;
    height: 100%;
    width: 100%;
    background: url(../img/Location-riad-marakesh.png) center;
    -webkit-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    z-index: 1;
}

/* line 34, ../scss/layout.scss */
.title--overlay {
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
}

/* line 42, ../scss/layout.scss */
.footer {
    position: relative;
    top: 100%;
    padding-top: 70px;
    padding-bottom: 70px;
    background: #fff;
    text-align: center;
    z-index: 2;
}

/*****************************************************************************
  
                      INDEX
  
  *****************************************************************************/
/* line 58, ../scss/layout.scss */
.index--content {
    position: relative;
    top: 100%;
    background: #FFF;
    z-index: 4;
}

/* line 65, ../scss/layout.scss */
.home {
    position: relative;
    padding-top: 80px;
    padding-bottom: 80px;
    background: #fff;
    z-index: 4;
}

/* line 73, ../scss/layout.scss */
.about {
    position: relative;
}

/* line 77, ../scss/layout.scss */
.about--left {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    background: url(../img/Location-riad-evenement-marakesh-façade.png) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

/* line 86, ../scss/layout.scss */
.about--right {
    position: relative;
    top: 0;
    bottom: 0;
    margin-left: 45%;
    width: 55%;
    padding-top: 90px;
    padding-bottom: 60px;
    background: #f5f5f5;
}


/* line 118, ../scss/layout.scss */
.illustration {
    height: 350px;
}

/* line 121, ../scss/layout.scss */
.illustration .item {
    height: 100%;
    width: 33.333%;
    float: left;
    -moz-transition: all, 0.3s, ease;
    -o-transition: all, 0.3s, ease;
    -webkit-transition: all, 0.3s, ease;
    transition: all, 0.3s, ease;
    opacity: 0.6;
}

/* line 127, ../scss/layout.scss */
.illustration .item:hover {
    opacity: 1;
}

/* line 130, ../scss/layout.scss */
.illustration .item--1 {
    background: url(../img/Rental-riad-marakesh-évent.png) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

/* line 131, ../scss/layout.scss */
.illustration .item--2 {
    background: url(../img/Riad-privatisation-marakesh\ .png) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

/* line 132, ../scss/layout.scss */
.illustration .item--3 {
    background: url(../img/Location-riad-maroc.png) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}


/* line 141, ../scss/layout.scss */
.seventy {
    position: relative;
    float: left;
    width: 70%;
    min-height: 450px;
    text-align: center;
}

/* line 148, ../scss/layout.scss */
.thirty {
    position: relative;
    float: left;
    width: 30%;
    min-height: 450px;
    padding-top: 30px;
    height: auto;
}

/* line 156, ../scss/layout.scss */
.thirty--darker {
    background: #f5f5f5;
}

/* line 160, ../scss/layout.scss */
.contact {
    background: #f5f5f5;
    -webkit-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    padding-top: 100px;
    padding-bottom: 30px;
}

/*****************************************************************************
  
                             RESPONSIVE
  
  *****************************************************************************/
@media screen and (max-width: 1024px) {

    /* line 187, ../scss/layout.scss */
    .seventy {
        width: 100%;
        float: none;
        min-height: auto;
    }

    /* line 192, ../scss/layout.scss */
    .thirty {
        width: 100%;
        float: none;
        min-height: auto;
        padding-bottom: 30px;
    }
}

@media screen and (max-width: 785px) {

    /* line 203, ../scss/layout.scss */
    .header {
        position: relative;
        background-attachment: scroll;
    }

    /* line 204, ../scss/layout.scss */
    .title--overlay {
        position: relative;
    }

    /* line 205, ../scss/layout.scss */
    .index--content {
        top: 0;
    }

    /* line 208, ../scss/layout.scss */
    .contact {
        background-attachment: scroll;
    }

    /* line 210, ../scss/layout.scss */
    .about--left {
        position: relative;
        width: 100%;
        height: 250px;
    }

    /* line 215, ../scss/layout.scss */
    .about--right {
        width: 100%;
        margin-left: 0;
    }

    /* line 220, ../scss/layout.scss */
    .illustration {
        height: 200px;
        float: none;
    }
}

@media screen and (max-width: 640px) {

    /* line 239, ../scss/layout.scss */
    .illustration {
        height: 250px;
    }

    /* line 242, ../scss/layout.scss */
    .plateau {
        padding-top: 80px;
        padding-bottom: 0px;
    }

    /* line 246, ../scss/layout.scss */
    .seventy {
        min-height: none;
    }

    /* line 247, ../scss/layout.scss */
    .thirty {
        min-height: auto;
    }
    
    iframe{
        width: 380px;
        height: 400px;
    }
}

@media screen and (max-width: 380px) {
    iframe{
        width: 250px;
        height: 350px;
    }
}