*{
    font-family: "Times New Roman";
}

@font-face {
    font-family: "Trajan Pro";
    src: url('TrajanPro-Regular.ttf');
}
@font-face {
    font-family: 'Roboto-Light';
    font-style: normal;
    font-weight: 500;
    src: url('Roboto-Light.ttf');
}
#content span.before{
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    content:'';
    z-index: 2;
    position: absolute;
    padding: 0 !important;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 17px 16px 0 16px;
    border-color: #262626 transparent transparent;
    cursor: pointer;
}
@font-face {
    font-family: 'Roboto-Medium';
    font-style: normal;
    font-weight: 500;
    src: url('Roboto-Medium.ttf');
}

h1{
    letter-spacing: -2px;
}

h1 strong{
    color: #404040;
}

@font-face {
    font-family: 'Roboto-Regular';
    font-style: normal;
    font-weight: 500;
    src: url('Roboto-Regular.ttf');
}
.menu-button{
    vertical-align: text-bottom;
    cursor: pointer;
    position: fixed !important;
    z-index: 101;
    right: 2%;
    top: 20px;
    width: 80px;
    height: 30px;
    padding: 5px 5px 20px;
    box-sizing: content-box;
}

.menu-button .icon{
    width: 30px;
    display: inline-block;
}

.icon span {
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 4px;
    background-color: #FFF;
    -webkit-box-shadow: 0 0 1px #000;
    -moz-box-shadow: 0 0 1px #000 ;
    box-shadow: 0 0 1px #000;
}

.icon span.sec.rotated{
    transform: rotate(405deg);
}

.icon span.rotated{
    transform: rotate(495deg);
}

.icon span.rotated{
    transition-delay: 0s,0s;
    transition-property: transform;
    transition-duration: 0.5s,0.5s;
    transition-timing-function: ease-in-out;
    background-color: #f1f1f1;
}

.upper{
    text-transform: uppercase;
}

.columns.plats{
    max-height:440px;
    height:440px;
    overflow-y: scroll;
    overflow-x: hidden;
    line-height:9px;
}

h4{
    font-family: "Times New Roman";
}

.price{
    padding-top: 5px;
    text-align: right;
}

header .txt-center {
    color: #868686;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 3;
    background-color: rgba(0,0,0,0.5);
    padding: 10px;
}

.trajan{
    font-family: "Trajan Pro";
}

.roboto-regular{
    font-family: 'Roboto-Regular';
}

.roboto-light{
    font-family: 'Roboto-Light';
}

.roboto-condensed{
    font-family: 'Roboto-Condensed';
}

.roboto-condensed-bold{
    font-family: 'Roboto-Condensed-Bold';
}

.roboto-thin{
    font-family: 'Roboto-Thin';
}

.impact{
    font-family: Impact ;
}

.enchanted{
    font-family: "Enchanted-Land";
}

header{
    max-height:100vh;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:  0 0 5px     rgba(0, 0, 0, 0.5);
    box-shadow:  0 0 5px     rgba(0, 0, 0, 0.5);
    position: relative;
}

header .background{
    position: relative;
    z-index:0;
    max-height:100vh;
    top:-100px;
    width:100%;
    overflow: hidden;
}

header .top{
    position: relative;
    z-index:1;
    height:100px;
}

header .left{
    font-size: 200%;
    padding-top: 0px !important;
    width:20%;
}

header .left img{
    margin-top: 5px;
}


.parent .dropdown-pane{
    width: auto;
    border-radius: 5px;
    padding:5px;
}

.parent .is-submenu-item a:hover{
    color: #0060A9 !important;
    text-decoration: underline;
}

.parent .is-submenu-item{
    border-bottom: 1px solid #e9e9e9;
    margin-left: 0;
    margin-right: 0;
    font-size: 90%;
    text-align: center;
}
.parent .is-submenu-item a{
    color:darkgray !important;
}
.parent .is-submenu-item:before{
    content:'';
    z-index: 2;
    position: absolute;
    padding: 0 !important;
    height: 0;
    width: 0;
    top: -10px;
    left: 0;
    right: 0;
    margin:auto;
    transform: rotate(180deg);
    border-style: solid;
    border-width: 10px 9px 0 10px;
    border-color: #A7A7A7 transparent transparent;
}

.header-menu{
    background-color: transparent;
    padding-top: 10px;
    padding-bottom: 10px;
}

.header-menu .left{
    font-family: "Trajan pro";
    position: absolute;
    color: #FFF;
}

.header-menu .middle{
    font-family: "Trajan pro";
    padding-top: 1%;
}

.header-menu a{
    color:white;
}

.parent .reveal a{
    color:white;
}

#menu .parent{
    margin: auto;
    position: relative;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
}
header .left,header .right{
    padding-top:35px;
    padding-left: 50px;
    position: relative;
    display: flex;
    float: left;
}
header .right{
    width:80%;
}

header a {
    color:white;
}

header sup{
    top:-0.5em;
}

header .right .menu-item{
    padding-left: 20px;
    padding-right: 20px;
    flex-direction: row;
    align-content: space-between;
}

.small-margin{
    margin-top: 15px;
}

.margin{
    margin-top: 30px;
}


#menu{
    height: auto;
    width: 100%;
    position: fixed;
    z-index: 100;
    display: none;
    top: 0;
    background:rgba(0,0, 0,0.85);
    padding-bottom: 20px;
}


#menu .item a {
    color: #FFF;
    font-weight: normal;
    font-family: 'Roboto-Regular';
}

#menu div.item{
    font-weight: bolder;
    font-family: "Arial Black";
    position: relative;
    display: inline-block;
    height: 110%;
    overflow: hidden;
    opacity: 0;
    margin-left: 15px;
    margin-top: 2rem;
    margin-bottom: 2rem;
    cursor: pointer;
}

div.menu-ico{
    vertical-align: text-bottom;
    cursor:pointer;
    position: fixed !important;
    z-index: 101;
    right: 2%;
    top: 20px;
    width: 80px;
    height: 30px;
    padding: 5px 5px 20px;
    box-sizing: content-box;
}

div.menu-ico .icon{
    width:30px;
    display: inline-block;
}

div.menu-ico .text{
    margin-left: -2px;

}

#menu div.item:hover h3{
    text-shadow: 0 0 3px #000;
    cursor:pointer;
    color:white;
}
.item:hover .background img{
    transform: scale(1.1);
    transition-delay: 0s,0s;
    transition-property: transform;
    transition-duration: 0.5s,0.5s;
    transition-timing-function: ease-in-out;
}

.item:hover .dark{
    opacity: 1;
    display: block;
    transition-delay: 0s,0s;
    transition-property: all;
    transition-duration: 0.5s,0.5s;
    transition-timing-function: ease-in-out;
}

.item .logo{
    text-align: center;
    bottom: 120px;
    position: absolute;
    z-index: 4;
    margin: auto;
    right: 150px;
    width: 25%;
}

#menu div.item h3{
    font-weight: bold;
}

div.middle{
    height: 100%;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    z-index:4;
}

.middle h3{
    color: #FFF;
    text-shadow: 0 0 3px #000;
    font-size: 140%;
    font-family: Roboto-Light;
}
.line{
    margin:auto;
    height: 2px;
    width: 10%;
    background-color: #FFF;
}

.item .background img{
    position: absolute;
    width: 100%;
    height: 100%;
}

.item .background{
    z-index: 2
}

.item .dark{
    background-color: rgba(0,0,0,0.3);
    z-index: 3;
    position:absolute;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0;
    display: none;
}

#slidesContent{
    box-sizing: border-box;
    margin:0;padding: 0;
    min-width: 100%;
}

#slidesContent button, #slidesContent a.button{
    z-index: 15;
    background: transparent;
    border-top: 1px solid #5A3668;
    /*border-bottom: 1px solid #5A3668;*/
    font-style: italic;

}
#slidesContent button:hover,#slidesContent a.button:hover{
    background-color: #5A3668;
    opacity: 0.7;
    border-color: transparent;
}

#slides{
    width: 100%;
    z-index: 1;
}

#slides .img{
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
}

.img .text{
    z-index: 10;
    position: absolute;
    color: white;
    margin-top: 40%;
    text-align: center;
    width: 100%;
    font-size: 150%;
    letter-spacing: -1px;
    text-shadow: 0 0 1px #000;
    background-color: rgba(0,0,0,0.5);
}

.img .text .big{
    font-family: "Trajan Pro";
    font-size: 100%;
}

#content .video img{
    cursor: pointer;
}

.article .header{
    min-height: 300px;
    background-size: cover;
    border-radius: 5px 5px 0 0;
}

.article{
    padding:0;
    background-color: #efefef;
    border-radius: 5px 5px 0 0;
    border:1px solid #d9d9d9;
}

.article .descriptif{
    padding:10px;
    font-family: Roboto-Light;
}
.separator{
    padding-top: 100px;
    padding-bottom: 100px;
    font-size: 200%;
    background-color: #e7e7e7;
}

#lacarte .category h4{
    margin-top: 10px;
}

#actu.back{
    background-repeat: no-repeat;
    background-size: cover;
}

#actu.back .callout{
    border:1px solid #000;
    background-color: rgba(255,255,255,0.8);
}

.search-item{
    background-color: #FFF;
    color: #000;
    text-align: left;
    font-size: 120%;
    border-bottom: 1px solid #afafaf;
    font-family: "Roboto-Regular";
    cursor: pointer;
}

footer:before{
    position: absolute;
    left:0;
    right:0;
    margin:auto;
    content: '';
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 15px 15px 0px;
    border-color: white transparent transparent;
    margin-top: 0px;
}

footer{
    width:100%;
    min-height:40px;
    border-top:1px solid #868686;
    background-color: rgba(0,0,0,0.85);;
    color: #FFF;
    padding-bottom: 30px;
    font-size: 12px;
}

footer a{
    color: #FFF;
    font-family: 'Roboto-Light';
}

footer a:hover{
    color: #6a594e;
    text-decoration: underline;
}

footer .row{
    margin-top: 20px;
}

footer .roboto-regular{
    border-left: 3px solid white;
    padding-left: 10px;
}

a.preview {
    position: relative;
    min-height: 100px;
    width: 100%;
    top:15px;
}

.photo .preview img {
    position: relative;
    max-height: 75px;
    border: 2px solid #7b7b7b;
    opacity: 0.8;
    box-shadow: 0 0 2px #000;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: block;
    max-width: none;
    margin-top: -72px;
}

.photo .content {
    text-align: center;
    min-height: 200px;
    padding-top: 10px;
    padding-bottom: 10px;
    border:1px solid transparent;
}

.photo .content:hover{
    background-color: #f8f8f8;
    cursor: pointer;
}

.photo{
    margin-top: 20px;
}

.photo .flex-spaced {
    align-items: center;
    flex-direction: column !important;
    display: flex !important;
    justify-content: space-between;
}

.flex-spaced {
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: box;
    display: -webkit-flex;
    -webkit-flex-wrap: nowrap;
    flex-pack: center;
    display: flex;
}

.delete-image{
    position: relative;
    z-index: 1;
    margin-top: calc(-50% + 20px);
    margin-top: -webkit-calc(-50% + 20px);
    margin-top: -moz-calc(-50% + 20px);
    text-align: center;
}

.album{
    padding-bottom: 80px;
}

.square{
    border-left: 10px solid #464646;
    padding-left: 10px;
}

.video{
    cursor: pointer;
}

.close-button span{
    font-size: 300%;
    color: #ffffFF;
    margin-right: 20px;
}

.video .miniature{
    min-height:200px;
    width:100%;
}

.video .desc,.video .desc span,.video .desc p, .video .desc strong{
    font-family: "Roboto-Regular" !important;
}

.event{
    border-top: 1px solid #cacaca;
}

.dropdown.menu .is-dropdown-submenu-parent.is-down-arrow > a::after{
    border-color: #665450 transparent transparent;
}

#actu{
    position: relative;
    border-top: 1px solid #0a0a0a;
    padding-top: 20px;
    padding-bottom: 20px;
    background-position: center center;
    background-size: cover;
}

#mentions{
    text-align: justify;
}

#contactbox .close-button span,#mentions .close-button span{
    color: #000;
    font-size: 150%;
}

#imageSearch{
    width: 100%;
    height: 30px;
}

#fileSearch{
    width: 100%;
    height: 30px;
}

.btn{
    width:220px;
    position: absolute;
    right:20px;
    top:12px;
    color: #FFF;
}

.searchItem{
    height: 20px !important;
    width:100% !important;
    background-color: rgba(0,0,0,0.1) !important;;
    text-align: center !important;
    cursor: pointer !important;
}

#arrow-up{
    position: fixed;
    top:80vh;
    right:50px;
    height:60px;
    width:60px;
    background-color: rgba(255,255,255,0.5);
    border:1px solid rgba(0,0,0,0.5);
    border-radius: 50%;
    cursor: pointer;
    display: none;
}

#arrow-up img{
    height:40px;
    width:50px;
    position: absolute;
    top:0;
    right:0;
    left: 0;
    bottom: 0;
    margin:auto;
}

@media screen and (min-width: 63.9375em){
    .top .right{
        display: flex !important;
    }
}

@media screen and (max-width: 85em) {
    .img .text{
        margin-top:50% !important;
    }
}

@media screen and (max-width: 63.9375em) {

    .parent .is-submenu-item a {
        color: #FFF !important;
    }
    header .background{
        top:0 !important;
    }
    
    #slides .text{
        display: none !important;
    }

    .line{
        margin: auto;
        height: 2px;
        width: 10%;
        background-color: #FFF;
    }

    .row.plat{
        padding-left: 0;
        padding-right: 0;
    }

    .row .row{
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    header .right,header .left{
        width:100% !important;
        text-align: center !important;
        float: none !important;
        padding-left: 0;
    }

    header .left{
        display: block !important;
    }

    header .top{
        height:auto !important;
        position: fixed !important;
        width:100%;
    }

    header .top .menu-item{
        margin-top: 10px;
        display: block;
        width:auto;
    }

    header .right{
        display: none ;
        margin-bottom: 10px;
    }

    .menu-button{
        display: block !important;
    }

    #contactbox .close-button{
        top: 100px !important;
    }

    #contactbox{
        padding-top: 100px !important;
    }

    #mentions{
        padding-top: 100px !important;
    }

    #mentions .close-button{
        top: 70px !important;
    }

    .im img{
        height:100px !important;

    }
    .im{
        left:0 !important;
        right:0 !important;
        margin:auto !important;
        bottom:0 !important;
        top:0;
        position: absolute;
    }
}

@media screen and (max-width: 40em){

    .content p img{
        height:auto !important;
        width:auto !important;
    }

    .top .left{
        width:100px !important;
    }
}

.im img{
    position: absolute;
    top:-25%;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
}

.top-bar a{
    color: #494949;
}

.project{
    height:150px;
    width:100%;
    background-position: center;
    cursor: pointer;
    border: 1px solid #000;
}

.realisation p {
    line-height: 20px;
}