/* Vars */
:root {
    --default-font-size: 15px;
    --default-line-height: 18px;
	
    --default-small-font-size: 12px;
    --default-small-line-height: 14px;
	
    --default-title-font-size: 18px;
    --default-title-line-height: 21px;
    
    --default-font-family: 'Cosmica Regular';
    --strong-font-family: 'Cosmica Bold';
	--light-font-family: 'Cosmica Light';
    
    /* Misc */
    --site-max-width: 1200px;
    --header-height: 145px;
    --default-spacing: 15px;
    --small-spacing: 10px;
    --medium-spacing: 15px;
    --big-spacing: 40px;
    --vertical-spacing: 7px;
    --small-vertical-spacing: 4px;
    --big-vertical-spacing: 15px;
    --grid-gap: 20px;
    --line-size: 4px;

    --main-color: #482683;
    --green-color: #278057;
    --grey-color: #ccc;
    --light-green: #DDEDDB;
}
@media only screen and (min-width: 768px) {
    :root { 
        --header-height: 210px;
        --default-spacing: 20px;
        --big-spacing: 50px;
        --medium-spacing: 15px;
        --small-spacing: 10px;
        --vertical-spacing: 10px;
        --big-vertical-spacing: 15px;
    }
}
@media only screen and (min-width: 1024px) {
    :root {
        --default-font-size: 16px;
        --default-line-height: 19px;
        
        --default-title-font-size: 20px;
        --default-title-line-height: 23px;
        
        --header-height: 157px;
        --default-spacing: 30px;
        --small-spacing: 10px;
        --big-spacing: 60px;
        --negative-default-spacing: -50px;
        --vertical-spacing: 10px;
        --big-vertical-spacing: 20px;
    }
}

/*
/* Fonts
*/
h1, h2 {
    font-size: var(--default-title-font-size);
    line-height: var(--default-title-line-height);
    font-family: var(--strong-font-family);
}
h3, h4, h5 {
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-family: var(--strong-font-family);
}
textarea,
body,
a {
	color: #000;
	font-family: var(--default-font-family), Arial, Verdana, Sans-serif;
	font-size: var(--default-font-size);
	line-height: var(--default-line-height);
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
}
strong {
    font-family: 'Cosmica Bold';
}
.page_title {
    text-transform: uppercase;
}
.infos,
.introductory,
.title {
    margin-bottom: var(--vertical-spacing);
}
.notes,
.notes a {
    margin-top: var(--default-spacing);
    font-size: var(--default-small-font-size);
    line-height: var(--default-small-line-height);
}
.notes a {
    text-decoration: underline;
}
.button_alt {
    font-family: var(--default-font-family);
    font-size: var(--default-small-font-size);
    text-transform: uppercase;
    margin-top: var(--small-spacing);
    padding: 0;
    background: transparent;
    color: var(--main-color);
    text-decoration: underline;
}

/* Loading */
#loading {
    display: none;
    position: fixed;
    z-index: 200;
    left: 50%;
    top: 50vh;
    transform: translate(-50%,-50%);
    padding: 50px;
}
#loading img {
    width: 100px;
}


/* Medias */
.text img,
.text2 img {
    width: 100% !important;
    height: auto !important;
    display: block;
}
video {
    width: 100% !important;
    height: auto !important;
}

/* Frame */
.frame {
    background: url('../img/frame_bkg.jpg') no-repeat;
    background-size: cover;
    box-sizing: border-box;
    padding: var(--line-size);
}
.frame > .wrapper {
    background: white;
    box-sizing: border-box;
    padding: var(--default-spacing);
}

/* Message */
.cpnt_message {
    position: fixed;
    z-index: 10000;
    top: var(--small-spacing);
    left: 50%;
    transform: translateX(-50%);
    background: #deae1e;
    color: #fff;
    padding: 20px;
    width: 220px;
    text-align: center;
    font-family: 'SourceSerifPro-Bold';
}

@media only screen and (min-width: 768px) {
    .book .button_container {
        width: 100px;
        height: 110px;
    }
}
@media only screen and (min-width: 1024px) {
}