@font-face {
    font-family: dinregular;
    src: url('../fonts/DINPro-Regular.otf');
}

@font-face {
    font-family: dinbold;
    src: url('../fonts/DINPro-Bold.otf');
}

body {
    /*background-image: url(http://dl9fvu4r30qs1.cloudfront.net/31/26/9ca5fa2b46239323657c0c0431e4/psycho-3.png);*/
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
body#index {
    background-image: url(http://i558.photobucket.com/albums/ss25/JelkaIda/femmes-exclus-de-soins_zpsq1s52rpd.jpg);
}
body#dna {
    background-image: url(http://i558.photobucket.com/albums/ss25/JelkaIda/France-Bidonville-Marseille-Olivier-Papegnies3_zpsluu7au3u.jpg);
}
body#phases {
    background-image: url(http://i558.photobucket.com/albums/ss25/JelkaIda/20160210-Neacutepal-nous-soutenir-OlivierPapegnies_zpsmqrxq3f5.jpg);
}
body#reports {
    background-image: url(http://i558.photobucket.com/albums/ss25/JelkaIda/Guillaume-Pinon-Irak-Migrant4-BD_zpspfkefikm.jpg);
}
body#meetings {
    background-image: url(http://i558.photobucket.com/albums/ss25/JelkaIda/femme-et-enfants-population2_zpssrapbyyv.jpg);
}
body#upload {
    background-image: url(http://i558.photobucket.com/albums/ss25/JelkaIda/migrants-et-depecaes_zpswjdjacmh.jpg);
}
body#login {
    background-image: url(http://i558.photobucket.com/albums/ss25/JelkaIda/migrants-et-depecaes_zpswjdjacmh.jpg);
}

p,
a,
div,
h2,
h3,
h4,
h5 {
    font-family: dinregular !important;
}

h1,
.ui.header {
    font-family: dinbold !important;
}

a {
    cursor: pointer !important;
}


/*header*/

header {
    height: 100px;
    width: 100%;
    background: #e1e2e1;
    text-align: center;
    float: left;
}

header img {
    margin-top: 25px;
    width: 60px;
    height: 60px;
}

header #language-select {
    position: absolute !important;
    right: 5px !important;
    top: 5px !important;
    min-width: 8em !important;
}

button#links {
    position: absolute !important;
    right: 5px !important;
    top: 5px !important;
    min-width: 8em !important;
    margin-right: 0 !important;
}

nav {
    width: 100%;
    float: left;
    /*background: #e1e2e1;*/
    font-size: 12px;
    font-weight: 800;
    height: 33px;
}

nav a {
    color: white !important;
    background: #e1e2e1;
}

a.nav-links:hover > div,
a.nav-links.active > div {
    color: black !important;
    position: absolute;
    text-align: center;
    top: -2px;
    background: #e1e2e1;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 140px;
    padding-left: 20px;
    height: 120px;
    padding-top: 55px;
    padding-right: 20px;
    border-radius: 0 0 50% 50%;
    z-index: 999999;
}

div#body-wrapper {
    min-height: 70vh;
    float: left;
    width: 100%;
}

div#links-menu {
    position: absolute;
    right: 0;
    width: 15vw;
    min-height: 85vh;
    background: #0066b3;
    z-index: 9999;
    padding-bottom: 10px;
}

div#links-menu a {
    width: 80%;
    margin: 0.4rem 10% 0 20%;
    float: left;
    text-align: left;
    font-size: 13px;
    color: #e1e2e1;
    text-decoration: underline;
}

div#links-menu span {
    width: 80%;
    margin: 5.5rem 10% 0.5rem;
    float: left;
    text-align: left;
    font-size: 20px;
    color: #e1e2e1;
    font-weight: 200;
}

div#links-menu a:hover {
    color: #0066b3;
}


/*body*/

section#body-cover {
    position: relative;
    background-image: url('http://dl9fvu4r30qs1.cloudfront.net/31/26/9ca5fa2b46239323657c0c0431e4/psycho-3.png');
    background-size: cover;
    min-height: 70vh !important;
    margin-top: 0px;
    float: left;
    width: 100%;
}

section#body {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    background: rgba(255, 255, 255, 0.6);
    background-size: cover;
    min-height: 70vh !important;
    margin-top: 0px;
    float: left;
    width: 70%;
    padding: 5% 7.5%;
    margin-left: auto;
    margin-right: auto;
}

#body-dna img,
video {
    width: 100%;
}

#body-phases img,
video {
    width: 100%;
}

#body-reports img{
    max-width: 100%;}
#body-reports #attachment-control{
    position: absolute;
    bottom: 25px;
    font-size: 20px;
}


/*footer*/

footer {
    float: left;
    width: 100%;
    position: fixed;
    bottom: 0;
    color: #0066b3;
    font-weight: 800;
}

.footer-links-container {
    min-width: 195px;
    padding-bottom: 0 !important;

}

.footer-links {
    min-width: 65px !important;
    cursor: pointer !important;
    text-align: center;
    font-size: 16px;

}

.footer-links p {
    width: 100%;
    height: 20px;
    margin: 0 0 5px 0;
    text-align: center;
    font-size: 18px;
}

.footer-c {
    height: 40px;
    width: 100%;
    border-radius: 40px 40px 0 0;
    -moz-border-radius: 40px 40px 0 0;
    -webkit-border-radius: 40px 40px 0 0;
    background: #0066b3;
}

#tab-content {
    width: 100vw;
    float: right;
    background: #0066b3;
    display: none;
}

.tab {
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    color: white !important;
    padding: 50px !important;
}

div.hide-vmv {
    font-size: 10px;
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    cursor: pointer !important;
}