/*
Theme Name: amorces_first
Author: Maxime Vautier & Nicolas Balaine
Author URI: http://hemve.fr/
            http://www.nicolasbalaine.fr/
Description: Theme produced for amorces
Version: 1.0
License: All right reserved to amorces


/* Reset
-------------------------------------------------------------- */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font: inherit;
  font-size: 100%;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
html {
  margin: 0;
  padding: 0;
}

/* styles
-------------------------------------------------------------- */
body,
button,
input,
select {
  padding: 0 !important;
  margin: 0 !important;
}

/* typography
-------------------------------------------------------------- */

@font-face{ 
  font-family: 'ManifontGroteskBook';
  src: url('webfont/ManifontGroteskBook-webfonts/ManifontGroteskBook-webfont.eot');
  src: url('webfont/ManifontGroteskBook-webfonts/ManifontGroteskBook-webfont.eot?#iefix') format('embedded-opentype'),
       url('webfont/ManifontGroteskBook-webfonts/ManifontGroteskBook-webfont.woff') format('woff'),
       url('webfont/ManifontGroteskBook-webfonts/ManifontGroteskBook-webfont.ttf') format('truetype'),
       url('webfont/ManifontGroteskBook-webfonts/ManifontGroteskBook-webfont.svg#webfont') format('svg');
}

@font-face{ 
  font-family: 'ManifontGroteskBoldItalic';
  src: url('webfont/ManifontGroteskBoldItalic-webfonts/ManifontGroteskBoldItalic-webfont.eot');
  src: url('webfont/ManifontGroteskBoldItalic-webfonts/ManifontGroteskBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
       url('webfont/ManifontGroteskBoldItalic-webfonts/ManifontGroteskBoldItalic-webfont.woff') format('woff'),
       url('webfont/ManifontGroteskBoldItalic-webfonts/ManifontGroteskBoldItalic-webfont.ttf') format('truetype'),
       url('webfont/ManifontGroteskBoldItalic-webfonts/ManifontGroteskBoldItalic-webfont.svg#webfont') format('svg');
}

@font-face{ 
  font-family: 'ManifontGroteskBold';
  src: url('webfont/ManifontGroteskBold-webfonts/ManifontGroteskBold-webfont.eot');
  src: url('webfont/ManifontGroteskBold-webfonts/ManifontGroteskBold-webfont.eot?#iefix') format('embedded-opentype'),
       url('webfont/ManifontGroteskBold-webfonts/ManifontGroteskBold-webfont.woff') format('woff'),
       url('webfont/ManifontGroteskBold-webfonts/ManifontGroteskBold-webfont.ttf') format('truetype'),
       url('webfont/ManifontGroteskBold-webfonts/ManifontGroteskBold-webfont.svg#webfont') format('svg');
}

@font-face{ 
  font-family: 'ManifontGroteskBookItalic';
  src: url('webfont/ManifontGroteskBookItalic-webfonts/ManifontGroteskBookItalic-webfont.eot');
  src: url('webfont/ManifontGroteskBookItalic-webfonts/ManifontGroteskBookItalic-webfont.eot?#iefix') format('embedded-opentype'),
       url('webfont/ManifontGroteskBookItalic-webfonts/ManifontGroteskBookItalic-webfont.woff') format('woff'),
       url('webfont/ManifontGroteskBookItalic-webfonts/ManifontGroteskBookItalic-webfont.ttf') format('truetype'),
       url('webfont/ManifontGroteskBookItalic-webfonts/ManifontGroteskBookItalic-webfont.svg#webfont') format('svg');
}



/* General
-------------------------------------------------------------- */
body {
  background-color: #F9F9F9;
  font-family: 'ManifontGroteskBook', serif;
  font-size: 1em;
  line-height: 1.5em;
}

.float_left {
  display: inline-block;
  float: left;
}

.float_right {
  display: inline-block;
  float: right;
}

h1 {
  font-size: 1.1em;
  line-height: 1.65em;
  font-family: 'ManifontGroteskBold','Lato',sans-serif
}

a {
  font-family: 'ManifontGroteskBoldItalic';
  color: rgb(50, 50, 50 );
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: black;
}

i {
  font-family: 'ManifontGroteskBookItalic','Lato',sans-serif;
}

b {
  font-family: 'ManifontGroteskBold', 'Lato', sans-serif;
}

strong {
  font-family: 'ManifontGroteskBoldItalic', 'Lato', sans-serif;
}

video {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

.pointer_scroll {
  cursor: ns-resize;
}

.pointer {
  cursor: pointer;
}

.pointer_grab {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.pointer_grab:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

#menu {
  width: 79%;
  margin: 0 auto;
  margin-top: 3%;
  margin-bottom: 1.5%;
  text-align: center;
}

#menu li {
  list-style: none;
  display: inline-block;
  cursor: pointer;
  margin: 0 auto;
}

#menu li img {
  height: 2.5vh;
  width: auto;
  margin: 1.5vh;
  max-height: 25px;
}

.title {
  font-size: 1em;
  text-align: center;
  margin: 0 auto;
}

.inverted {
  filter: invert(100%);
  -webkit-filter :invert(100%);
}

.control {
  position: absolute;
  height: 2%;
  width: 2%;
  opacity: 0.7;
  top: 25%;
}

.control img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

#play-pause {
  left: 47%;
}

#replay {
  right: 47%;

}

.control:hover {
  opacity: 1;
}

.title {
  text-align: center;
  margin: 0 auto;
  margin-top: 5vh;
}

.abso {
  position: absolute;
}

.fix {
  position: fixed;
}

.legend {
  font-family: 'ManifontGroteskBookItalic';
  font-size: 0.9em;
  line-height: 1.35em;
}

#down_box_control {
  position: absolute;
  display: none;
  bottom: 0;
  height: 10%;
  width: 100%;
}

#seek-bar {
margin-top: 50%;
}

#seek-bar_container {
  position: absolute;
  overflow: hidden;
  left: 5%;
  top: 10%;
  height: 40%;
  width: 60%;
}

#full_screen {
  margin-right: 5%;
}

#down_box_control .float_right {
  width: 5%;
  height: 40%;
}

#down_box_control .float_right img {
  height: 100%;
  width: auto;
}

#down_box_control .pointer {
  opacity: 0.6;
}

#down_box_control .pointer:hover {
  opacity: 1;
}


/* Input aspects
-------------------------------------------------------------- */
  
  /* THUMB */
  
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 6.5px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: #ffffff;
}
input[type=range]::-webkit-slider-thumb {
  height: 18px;
  width: 17px;
  border-radius: 0;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ffffff;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: #ffffff;
}
input[type=range]::-moz-range-thumb {
  height: 18px;
  width: 17px;
  border-radius: 0;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #f2f2f2;
}
input[type=range]::-ms-fill-upper {
  background: #ffffff;
}
input[type=range]::-ms-thumb {
  height: 18px;
  width: 17px;
  background: #ffffff;
  border-radius: 0;
  cursor: pointer;
  height: 5px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ffffff;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ffffff;
}
 
/* Index
-------------------------------------------------------------- */

#enter {
  background-image: url(img/sys_img/amorces3.gif);
  background-size: contain;
  background-repeat: no-repeat;
  height: 30%;
  width: 40%;
  position: fixed;
  left: 30%;
  top: 35%;
  cursor: pointer;
}
  
.project {
  list-style: none;
  float: left;
  display: inline-block;
  display: none;
  cursor: pointer;
}

.project a {
  height: 100%;
  width: 100%;
}

.project a img {
  width: 100%;
  height: auto;
}

/* Alain Taner
-------------------------------------------------------------- */

.slides_container_at {
  position: absolute;
  width: 89%;
  height: 75%;
  overflow: hidden;
  z-index: 99;
}

.slideshower_at {
  width: 105%;
  height: 100%;
  margin: 0 auto;
  overflow: scroll; 
  overflow-x :hidden;
}

.slideshower_at li {
  list-style: none;
  width: 35%;
  margin-bottom: 3%;
}

.slideshower_at li:last-child {
  margin-bottom: 0;
}

.slideshower_at li img{
  width: 100%;
  height: auto;
}

#legend_at {
  position: absolute;
  bottom: 4.5%;
  left: 44%;
  height: 2.5%;
  background-color: #F9F9F9;
}

.texte_container_at {
  position: absolute;
  right: 10%;
  width: 45%;
  height: 52.5%;
  overflow: hidden;
}

.texte_at {
  overflow-y:hidden;
  height: 100%;
  padding-bottom: 10%;

  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count:2;
  -webkit-column-gap: 1.5%; /* Chrome, Safari, Opera */
  -moz-column-gap: 1.5%; /* Firefox */
  column-gap: 1.5%;
/*  -webkit-column-width: 20vw; /* Chrome, Safari, Opera */
/*  column-width: 20vw;*/
}

.texte_at h2 {
  font-family: 'ManifontGroteskBold';
}

.auteur {
  text-align: right;
}

.content_at {
  margin-left: 10%;
}

/* Elena Costelian
-------------------------------------------------------------- */
#con_txt_ec {
  position: absolute;
  left: 5%;
  width: 27.5%;
  height: 74%;
  overflow: hidden;
  cursor: s-resize;
}

#txt_ec {
  width: 95%;
  padding-right: 10%;
  height: 100%;
  float: left;
  overflow: scroll;
  overflow-x: hidden;
  text-align: justify;
}

#txt_ec p {
  width: 98%;
}

.draggable {
  list-style: none;
  position: fixed;
  height: 50%;
  width: 40%;
  min-width: 300px;
  min-height: 240px;
  z-index: 79;
}

.draggable img {
  width: 100%;
  height: auto;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
}

#img_two_ec {
  bottom: 27%;
  right: 27%;
}

#img_three_ec {
  bottom: 23%;
  right: 13%;
}

#img_four_ec {
  bottom: 5%;
  right: 17%;
}

.legende_ec {
  position: fixed;
  text-align: left;
  bottom: 8%;
  right: 5%;
  width: 10%;
  min-width: 200px;
  z-index: 99;
}

#reconstitution {
  display: none;
}

/* Eric Madeleine
-------------------------------------------------------------- */

#vision_em {
  position: relative;
  margin-left: 10%;
  width: 60%;
  margin-bottom: 2.5%;
}

#vid_em {
  position: relative;
  width: 100%;
}

#vid_em video {
  position: inherit;
  width: 100%;
  height: auto;
}

#title_em {
  margin-left: 50%;
  font-size: 1em;
  margin-bottom: 2.5%;
}



/* Heloise Rouard
-------------------------------------------------------------- */

#container_hr {
  position: absolute;
  top: 23%;
  left: 20.85%;
  width: 58.3%;
  height: 30%;
  cursor: pointer;
  list-style: none;
}

.contenu_hr {
  position: absolute;
  top: 0;
  display:none;
  width: 58.3vw;
  height: 37vw;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/* James Coleman
-------------------------------------------------------------- */

#body_jc {
  background-color: black;
  background-image: url(img/james_coleman_img/fe_jc.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  z-index: -99;
  width: 100%;
  height: 100%;
 }

#vision_jc {
  width: 60%;
  height: 100%;
  margin: 0 auto;
  list-style: none;
}

#vision_jc li {
  float: right;
  margin-left:1.5%;
  margin-bottom: 1.5%;
  width: 20%;
}

#vision_jc img {
  width: 100%;
  height: auto;
}

#vision_jc li:first-child {
  float: left;
  width: 57%;
  margin: 0;
  margin-bottom: 1%;
}

.white_txt {
  color: white;
}

#one_jc {
  width: 25%;
  margin-right: 20%;
}

#two_jc {
  width: 25%;
  margin-right: 10%;
  margin-top: 1.5%;
  margin-bottom: 5%;
}

#legend_jc {
  margin-left: 20%;
}

#title_jc {

  width: 40%;
  margin-left: 10%;
  margin-top: 5%;
  height: 10%;
}

#title_jc h1 {
  font-size: 1.4em;
  line-height: 1.6em;
}

#title_jc h2 {
  font-size: 1.1em;
}

#vid_jc {
  width: 53.5%;
  margin-left: 10%;
  margin-top: 1.5%;
  margin-bottom: 5%;
  text-align: left;
}

#vid_jc img {
  width: 100%;
  height: auto;
  margin-bottom: 1%;
  cursor: pointer;
}

#hide_jc {
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  background-image: url(img/james_coleman_img/fs_jc.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 99;
}




/* Katrien de Blauwer
-------------------------------------------------------------- */
#kb_legend {
  position: absolute;
  bottom: 5%;
  left: 5%;
}

#body_kb {
  overflow: hidden;
}

#body_kb #box_menu_kb {
  position: fixed;
  width: 100%;
  z-index: 99;
  background-color: #F9F9F9;
}

.rank {
  position: absolute;
  width: 30%;
  height: 100%;
  top: 25%;
  overflow: hidden;
}

.inside {
  overflow: scroll;
  overflow-x : hidden;
  width: 110%;
  height: 100%;
}

.hideout {
  float: left;
  width: 90%;
  height: 100%;
  margin: 0 auto;
}

.hideout img{
  width: 100%;
  height: auto;
  margin-bottom: 10%;
}

/* RANK ONE */

#rank_one {
  left: 5%;
  width: 90%;
  z-index: 95;
}

#inside_one {

}

#inside_one .hideout {
  margin-right: 50%;
}
#kb_one {
  width: 25%;
  margin-left: 5%;
  margin-bottom: 90%;
}

#kb_two {
  width: 30%;
  margin-bottom: 400%;
}


/* RANK TWO */

#rank_two {
  z-index: 79;
  left: 5%;
  width: 55%;
}

#kb_three {
  margin-top: 100%;
}

#kb_four {
  margin-top: 90%;
  margin-bottom: 410%;
  width: 50%;
}

/* RANK THREE */

#rank_three {
  z-index: 1;
  right: 5%;
  width: 90%;
}

#kb_five {
  margin-top: 20%;
  width: 30%;
  margin-left: 60%;
}

#kb_six {
  margin-top: 140%;
  width: 50%;
  margin-bottom: 90%;
}

/* RANK FOUR */

#rank_four {
  left: 60%;
  z-index: 89;
}

#kb_seven {
  margin-top: 200%;
}

#kb_height {
  margin-top: 30%;
}

/* RANK FIVE */

#rank_five {
  left: 36%;
  width: 20%;
  z-index: 0;
}

#kb_txt_one {
  margin-top: 1%;
}

#kb_txt_two {
  margin-top: -40%;
  margin-bottom: 450%;
}

/* RANK SIX */

#rank_six {
  z-index: 0;
  left: 5%;
  width: 90%;
}

#kb_txt_three {
  width: 20%;
  float: right;
  margin-right: 24%;
  margin-top: 80%;
  margin-left: 50%;
}

#kb_txt_four {
  width: 18%;
  float: left;
  margin-top:  10%;
  margin-bottom: 200%;
  margin-left: 31.5%;
}

/* RANK SEVEN */

#rank_seven {
  left: 30%;
  width: 50%;
}

#kb_txt_five {
  margin-top: 40%;
  width: 35%;
  margin-left: 25%;
}

#kb_txt_six {
  margin-top: 250%;
  margin-bottom: 100%;
  margin-left: 47%;
  width: 34%;
}

/* RANK HEIGHT */

#rank_height {
  left: 40%;
  width: 20%;
}

#kb_txt_seven {
  margin-top: 400%;
  margin-bottom: 30%;
}

#kb_txt_height p {
  margin-top: 2.5%;
}


/* Seba Kurtis
-------------------------------------------------------------- */
#vision_sk {
  width: 100%;
  height: 60vh;
  background-color: black;
}

#vid_sk {
  position: relative;
  margin: 0 auto;
  width: 60%;
  height: 100%;
  overflow: hidden;

}

#box_control_sk {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: black;
  box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2);
}

/* Sachiko M
-------------------------------------------------------------- */
#body_sm {
  background-color: #f9f9f9;
}

#vision_sm {
  width: 100%;
  height: 60vh;
}

#vid_sm {
  position: relative;
  margin: 0 auto;
  width: 60vh;
  height: 60vh;
  overflow: hidden;

}

.video_sm {
  height: 102%;
  width: auto;
  margin-left: 50%;
  margin-top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform : translateY(-50%) translateX(-50%) ;
}

#box_control_sm {
  position: relative;
  height: 10%;
  width: 60%;
  margin: 0 auto;
  margin-top: 1%;
}

#box_control_sm .control {
  opacity: 0.3;
}

#box_control_sm .control:hover {
  opacity: 1;
}

/* Vides
-------------------------------------------------------------- */

.vides_img_left {
  float: left;
  width: 130%;
  margin-left: -140%;
  margin-bottom: 1%;
}

.vides_img_left img {
  width: 100%;
  margin-top: 1.5%;
}

.vides_img_right {
  float: right;
  width: 130%;
  margin-right: -140%;
  margin-bottom: 1%;
}

.vides_img_right img {
  width: 100%;
  margin-top: 1.5%;
}

#vides_contain {
  position: relative;
  margin-top: -75%;
  width: 100%;
}

#vides_contain video {
  position: inherit;
  width: 100%;
  height: auto;
}

#txt_vides {
  text-align: justify;
  width:25%;
  margin: 0 auto;
  margin-top: 1%;
  margin-bottom: 5%;
}

/* Contributions
-------------------------------------------------------------- */

#contributeur {
  font-size: 1.1em;
  width: 30%;
  margin: 0 auto;

}

/* Media Queries
================================================== */


  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 1040px) {
     body {
      font-size: 0.8em;
      line-height: 1.2em;
    }
    h1 {
      font-size: 0.9em;
      line-height: 1.35em;
    }
    .legend {
      font-size: 0.7em;
      line-height: 1.05em;
    }
  }

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 1039px) {
     body {
      font-size: 0.8em;
      line-height: 1.2em;
    }
    h1 {
      font-size: 0.9em;
      line-height: 1.35em;
    }

    .legend {
      font-size: 0.7em;
      line-height: 1.05em;
    }
  }

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {
    body {
      font-size: 0.6em;
      line-height: 0.9em;
    }
    h1 {
      font-size: 0.7em;
      line-height: 1.05em;.
    }

    .legend {
      font-size: 0.5em;
      line-height: 0.75em;
    }
  }

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    body {
      font-size: 0.6em;
      line-height: 0.9em;
    }
    h1 {
      font-size: 0.7em;
      line-height: 1.05em;.
    }

    #menu li img {
      max-height: 25px;
      margin: 5px;
    }
    .legend {
      font-size: 0.5em;
      line-height: 0.75em;
    }
  }

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {
     body {
      font-size: 0.6em;
      line-height: 0.9em;
    }
    h1 {
      font-size: 0.7em;
      line-height: 1.05em;.
    }

    .legend {
      font-size: 0.5em;
      line-height: 0.75em;
    }
  }

  #warning {
    position: fixed;
    z-index: 99;
    height: 100%;
    width: 100%;
    top: 0;
    background-color: #F9F9F9;
    opacity: 0.9;
    font-size: 150%;
    line-height: 150%;
    text-align: center;
  }

  #warning p {
    font-family: 'ManifontGroteskBoldItalic';
    margin-top: 20%;
    opacity: 1;
  }

  #warning a {
    font-family: 'ManifontGroteskBookItalic';
  }