@font-face {
    font-family: 'arimobold';
    src: url('Fonts/Arimo-Bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'arimoregular';
    src: url('Fonts/Arimo-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'arimoitalic';
    src: url('Fonts/Arimo-Italic-webfont.woff') format('woff');
    font-style: normal;
}
@font-face {
    font-family: 'introrustg-base2line';
    src: url('Fonts/introrustg-base2line-webfont.woff2') format('woff2'),
         url('Fonts/introrustg-base2line-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'cinematografica-extrabold';
    src: url('Fonts/cinematografica-extrabold-webfont.woff2') format('woff2'),
         url('Fonts/cinematografica-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



body{
  background-attachment: fixed;
    background-image:url('Images/SILIR3.jpg');
    background-repeat: repeat;
    background-position: 45px 155px;
    }



header
{
position: fixed;
  left: 0px;
  top: 0;
    background-image: linear-gradient(grey, lightgrey);
    width: 100%;
    height: 138px;
    border-bottom: 3px solid white;
	opacity: 0.8;
    z-index: 2;
}

nav
{
position: fixed;
top: 25px;
left: 25px;
font-family:'introrustg-base2line',"Arial",sans-serif;
font-size:27px;
letter-spacing: -2px;
text-shadow:4px 4px 3px white;
z-index:4;
}


#container {width: 290px;}
#navigation {height: 40px; margin-left: 0px;}
#button {height: 600px;width: 290px; margin: auto;}

ul, li {margin:0; padding:0; list-style:none;}

.menu_class {border:1px solid #1c1c1c;}
.the_menu {display:none; width:230px; margin-left: 0px; margin-top: 15px;border: 1px solid #1c1c1c;}
.the_menu li {background-color: white;}
.the_menu li a {color:#000000; text-decoration:none; padding:15px; 	display:block;}
.the_menu li a:hover {padding: 10px; color: white; text-shadow:4px 4px 3px black; background: grey}
		

article
{ float:left;
  width:45%;
  margin-top:0px;
  margin-left: 7%;
  margin-bottom: 55px;
  padding: 0px;
  text-align: justify;
  font-family: 'arimoregular', "Arial", Verdana, sans-serif;
  font-size: 20px;
  line-height: 40px;
  text-shadow: 3px 3px 3px grey;
  font-weight: normal;
    
}

aside{
  margin-left: 63%;
  margin-top: 235px;
  margin-bottom: 75px;
  padding: 0px;
  text-align: justify;
  line-height: 55px;
  font-family: 'arimobold', "Arial", Verdana, sans-serif;
  text-shadow: 3px 3px 3px grey;
  font-size: 20px;
  font-weight: normal;
  }


footer{
  position: fixed;
  left: 0px;
  bottom: 0;
  border-top: 2px solid grey;
    background-image: linear-gradient(lightgrey, grey);
	opacity: 0.8;
    width: 100%;
    height: 50px;
	
    z-index: 2;
}

#anim
{
  position: fixed;
  z-index: 5;
  opacity: 1;
  top:0px;
  left:0px;
  margin-left: 225px;
  margin-top: 0px;
  width:100%;
  text-align:center;
  color:#555;
 
  font-family:'cinematografica-extrabold', "Arial", Verdana, sans-serif;
  font-weight:550;
  font-size:4em;
  padding-top:0;
  height:300px;
  overflow:hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0,0,0);
}

div {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
}

#im1 {    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
  animation: showup 7s infinite;
    
}

#im3 {
  width:0px;
  animation: reveal 14s infinite;
    
}

#to {
  margin-left:-355px;
  animation: slidein 10s infinite;
   
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:300px;}
    80% {opacity:1;}
    100% {opacity:0;width:1000px;}
}

#welc
{color: blue;
  text-shadow: 3px 3px 3px grey;
}

#to
{color: white;
  text-shadow: 3px 3px 3px grey;
}

#Fran
{color: red;
  text-shadow: 3px 3px 3px grey;
}

#logo{
  display: block;
  position: fixed;
  left: 15;
  top: 0;
  width: 200px;
  height: 150px;
  box-shadow: 15px 15px 15px grey;
}


#contact
{
  position: fixed;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
width: 100%;
	
  bottom: 0;
  opacity: 1;
  z-index: 5;
  color: black;
  margin-top: 8px;
  text-shadow: 3px 3px 3px grey;
  font-family: 'arimobold',"Arial", Verdana, sans-serif;
  font-size: 20px;
  }

#ref{
  font-family:'arimoitalic',"Arial", Verdana, sans-serif;
}


#reliable img
{display: none;}
#reliable{
  display: block;
  width:150px;
  height:150px;
  margin: auto;
  border-width: 3px;
  border-radius: 50%;
  background-position: top -20px right -55px ;
  background-image:url(IMAGES/honfleur.jpg);
}
#reliable:hover
{
  display: block;
  width:350px;
  height:150px;
  margin: auto;
  border-style: 3px solid black;
  border-radius: 25px;
  background-position: center;
  background-position: top -20px right 0px ;
  background-image:url(IMAGES/honfleur.jpg);
}


#press img
{display: none;}
#press{
  display: block;
  width:150px;
  height:150px;
  margin: auto;
  background-position: left;
  border-style: 3px solid black;
  border-radius: 50%;
  background-image:url(IMAGES/pontdesarts.jpg);
}
#press:hover
{
  display: block;
  width:350px;
  height:150px;
  border-style: 3px solid black;
  background-position: top -90px right 10px ;
  border-radius: 25px;
  background-image:url(IMAGES/pontdesarts.jpg);
}


#crew img
{display: none;}
#crew{
  display: block;
  width:150px;
  height:150px;
  margin: auto;
  border-style: 3px solid black;
  border-radius: 50%;
  background-position: top -75px right 15px;
  background-image:url(IMAGES/ruedeparis.jpg);
}
#crew:hover
{
  display: block;
  width:350px;
  height:150px;
  margin: auto;
  border-style: 3px solid black;
  border-radius: 25px;
  background-position: top -65px right 0px ;
  background-image:url(IMAGES/ruedeparis.jpg);
}

img{
	box-shadow: 3px 7px 4px grey;
}