@viewport {
   width: device-width; /* viewport's width */
   zoom: 1; /* initial zoom = 1.0 */
}

@font-face {
  font-family: 'Rockwell';
  src: url('http://thibaultpetit.fr/ressources/fonts/rockwell.ttf');
}

/*General*/
*{text-align: center;margin: 0px;font-family: Arial, Helvetica, sans-serif;/*width: 100%*/}
h1{font-size 2.5em;}
h2{font-size 1.75em;}
a{color: black;}
body{max-width:600px;margin:auto;background-image:url(../images/fondsitemobile.svg);background-opacity: 0.3;background-size: contain; background-repeat: no-repeat;}
nav {width: 100%; max-width: 600px; margin: auto;text-transform: uppercase;font-size: 1.5em;}


.lienSociaux {padding-top: 20px;}
.lienSociaux a{margin: 5px;}

/*Each Page*/
#goHome{height: 30px;}
header{max-width: 100%;background-color: rgba(255,255,255,0.8);padding: 20px auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
  word-wrap: break-word;
  -ms-word-break: break-all;
  /* word-break: break-all; */
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;}
header h1{padding-top: 20px;text-transform: uppercase;font-size: 3em;
}
nav h1{font-size: 2.2em;}
.lien{text-decoration: underline; color: #aaaaaa;}
.textNav{font-weight: bold;}
nav {font-size: 1.5em;}
footer,nav {color:rgba(0,0,0,0.9);background-color: rgba(255,255,255,0.9);}
footer a{display:block;text-decoration: underline;font-style: italic;font-weight: bold;padding-bottom: 20px;padding-top:25px;}

/* Home Page */
#homeHeader{height: 200px;padding: 20px;background-color: rgba(255,255,255,0.6);}
#logoHomePage{width:100%;max-width:300px;margin: auto;padding-top: 20px;}
#homeBody, #contactBody{background-size: cover; background-repeat: no-repeat;}
#homeNav h1{font-family: Rockwell;font-size: 2em;padding: 20px;}
/*#homeNav a{display:block;text-transform: uppercase;padding: 15px 0;background-color: rgba(255,255,255,0.6);border-top:1px solid rgba(0,0,0,0.6);}*/
#sorry {padding-top: 50px;font-style: italic;}

/*Gallery Book*/
#wrapperGallery{background-color: rgba(255,255,255,0.6);}
.miniatureGalleryBook{background: none; margin: 20px;display: inline-table;
-webkit-box-shadow: 3px 3px 21px 1px rgba(0, 0, 0, 0.33);-moz-box-shadow: 3px 3px 21px 1px rgba(0, 0, 0, 0.33);box-shadow: 3px 3px 21px 1px rgba(0, 0, 0, 0.33);}
.miniature_book{width: 175px;}

/*Article Book*/
#date {color: #333333;}
#imagearticle {width: 100%;height: 400px;background-position: center;background-size: contain;background-repeat: no-repeat;margin-top: 20px;}
#explicationArticle{font-style: italic; padding: 20px;}
.miniatureWindows {width: 150px;}
.miniatureWindows.actuelle{opacity: 0.5;}
#galerieMiniatureArticle {margin-top: 20px;}
#textExplicatif {padding: 20px;}
#navJuxtapose {padding: 10px 0;width: 100%}
#juxtaposeLikedLeft {width: 49%;float: left;margin-bottom: 10px;}
#juxtaposeLikedRight {width: 49%;float:right;border-left:2px solid black;margin-bottom: 10px;}
#goBackArticle {width: 45%;}
#goNextArticle {width: 45%;}
.miniatureArticleJuxtapose{width: 50%;}
#goBackGallery {width: 100%;font-weight: bold;background-color: rgba(255,255,255,0.75);  font-size: 1.5em;  color: rgba(0,0,0,0.9);text-transform: uppercase;padding: 5px 0;}
#goBackBook {height: 20px;}


/*CV*/
#mainCV{background-color: white;}
#photo_cv{max-width: 135px;margin: auto;display: block;}
#textCv {margin: 20px 0;text-align: left;padding-right: 34px;}
#textCv ul{text-align: left;}
#textCv ul li{text-align: left;}
#textCv ul li strong{text-decoration: underline;padding: 5px;display: inline-block;text-align: left;}
#textCv ul li ul {list-style-position: inside; padding: 0; margin: 0;}
.dateCv{padding: 3px;}
.dateCv span {font-weight: bold}
.titles_cv{font-size: 1.5em;font-weight: bold;text-transform: uppercase;text-align: left;padding: 7px 0;display: block;  margin-left: 10px;}

/*Contact*/
#contactMain {background-color: white;}
.libelle{padding: 5px 0;display: block;}
.libelle strong{font-weight: bold; font-size: 1.2em;}
#presentationForm {padding-top: 10px; display: block; padding-bottom: 5px;}
#formContact {width: 90%;margin: auto;  overflow-x: hidden;}
#nom_visiteur{width: 100%; padding: 2px 0;  display: block;font-size: 1.2em;margin: 3px 0;}
#email_visiteur{width: 100%; padding: 2px 0;  display: block;font-size: 1.2em;margin: 3px 0;}
#message_visiteur{width: 100%; padding: 2px 0;  display: block;font-size: 1.2em;margin: 3px 0;}
#envoyer {display: block;width: 38%; margin: 5px auto;}
.attentionContact{color: red; font-style: italic;}