/*CSS TOKINOMICHI JAN24*/

/**********************************************************************/
/*                           TYPO DIV STYLES                          */
/**********************************************************************/

html 
{font-family: ABeeZee, Kosugi Maru}

.titre_section
{color:#71130B ;font-size:200%}

.sous-titre_section
{color:#A30000 ;font-size:150%}

.txt
{color:#555555 ;font-size:90%; line-height:2.2;}

.txt_nav
{color:#555555 ;font-size:90%;}

.txt_small
{color:#555555 ;font-size:80%; line-height:2.2;}

.txt_small_singleline
{color:#555555 ;font-size:80%;}

.txt_note
{color:#555555 ;font-size:75%; font-style: italic; margin-bottom: 1em ;}

.txt_red{
  color:#A30000; 
  font-size:90%; 
  line-height:2.2;
  text-decoration: none;
}

.txt_red_nav{
  color:#A30000; 
  font-size:90%; 
}

table 
{
  font-family: ABeeZee, Kosugi Maru;
  font-size:90%;
  color:#555555; 
  border-collapse: collapse;
}

tr 
{
  border-bottom: 1px solid #DDDDDD;
}

th 
{
  text-align: left;
  font-weight:bold;
  background-color: #EEEEEE;
}

.boldtxt
{ color:#555555 ;font-size:75%; line-height:1.2; font-weight:bold}

.pageSelect
{ color:#FF0000 ;font-size:75%; font-weight:bold}

.path
{ color:#555555 ;font-size:70%; letter-spacing:0.07em}

.copyright
{ color:#71130B ;font-size:90%}

.error
{ color:#71130B ;font-size:80%}


.defaultContentArea{
	background: #FEFEFE;
	padding-right:30px;
	padding-left:20px;
}

.defaultMarginTxt{
	padding-right:30px;
	padding-left:10px;
	padding-bottom: 20px;

}

.article_title{
  color:#555555 ;
  font-size:200%;
  padding-bottom: 8px;
}

.article_subtitle{
  color:#555555 ;
  font-size:120%;
  padding-bottom: 8px;
}

.article_date{
  color:#555555 ;
  font-size:90%;
  padding-bottom: 20px;
}

.article_content{
  color:#555555 ;
  font-size:100%;
  text-align: justify;
}

.article_detail{
  color:#555555 ;
  font-size:90%;
  text-align: justify;
  line-height: 150%;
  padding-bottom: 20px;
}

A:link{
	color:#A30000;
	text-decoration:none;
}

A:visited{
	color:#A30000;
	text-decoration:none;
}

A:hover{
	text-decoration: underline;
}

A.fa:link{
	color:#FFFFFF;
	text-decoration:none;
}

A.fa:visited{
	color:#FFFFFF;
	text-decoration:none;
}



/**********************************************************************/
/*                          BLOC DEFINITIONS                          */
/**********************************************************************/


#pageHeader {
  grid-area: header;
}

#pageFooter {
  grid-area: footer;
}

#mainArticle { 
  grid-area: article;      
}

#bio { 
  grid-area: bio;  
  padding-right:20px;    
}

#contactForm { 
  grid-area: contactForm; 
  padding-left:20px;
  border-left: 1px solid #A30000;     
}

#nav { 
  grid-area: nav; 
  white-space: nowrap;
  text-align:center;

} 

#contact { 
  grid-area: contact; 
  text-align: center;
} 

#articleTxt { 
  grid-area: articleTxt; 
  margin-left:10px;
  margin-right:10px;
} 

#articleInfo { 
  grid-area: articleInfo; 
  margin-left:10px;
  margin-right:10px;
} 

#articleNote { 
  grid-area: articleNote; 
  margin-left:10px;
  margin-right:10px;
  padding-top:20px;
  border-top: 1px solid #CCCCCC; 
} 

#articleImgGallery { 
  grid-area: articleImgGallery; 
  margin-left:10px;
  margin-right:10px;
  padding-bottom:10px;
  text-align: center;
} 

#articleImg { 
  grid-area: articleImg; 
  margin-right:10px;
  margin-left:10px;
  margin-top:30px;
} 

#navElement1 { 
  grid-area: navElement1; 
  padding-top:10px;
  padding-left:10px;
  /*border-right: 1px solid #999999;*/
  text-align: left;
  
} 

#navElement2 { 
  grid-area: navElement2; 
  padding-top:10px;
  border-right: 1px solid #999999;
} 

#navElement3 { 
  grid-area: navElement3; 
  padding-top:10px;
  border-right: 1px solid #999999;
} 

#navElement5 { 
  grid-area: navElement5; 
  border-right: 1px solid #999999;
  text-align: left;
  padding-top:10px;
  padding-left:20px;
  padding-bottom:10px;
} 

#navBio { 
  grid-area: navBio; 
  text-align: right;
  padding-top:10px;
  padding-right:20px;
/*   background: red;*/
} 

  
nav, article, contact, articleImg {
  background: #FEFEFE;
}





/**********************************************************************/
/*                             CONTAINERS                             */
/**********************************************************************/

body { 
  background-color: #4D4D4D;
  display: grid;
  grid-template-areas: 
    "header"
    "nav"
    "article"
    "contact"
    "footer";
  grid-template-rows: 80px 80px auto 40px 60px;  
  grid-template-columns: 1fr;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  height: 100vh;
  margin: 0px 15% 0px 15%;
}  


footer {
  background-image: url('/img/toki_footer.jpg');
  padding-left: 10px;
}


header {
  margin: 0px;
  position: relative;
  background-image: url('/img/toki_head.jpg');
}


.theArticleContainer {
  display: grid;
  grid-template-areas: 
    "articleTxt articleImg";
  grid-template-columns: 75% 25%;
  grid-column-gap: 5px;
  margin: 0px
}

.theArticleDetailContainer {
  display: grid;
  grid-template-areas: 
    "articleTxt articleNote"
     "articleImgGallery articleNote";
  grid-template-columns: 75% 25%;
  grid-column-gap: 5px;
  margin: 0px
}

.imgArticleDecoration{
  border-left: 5px solid #A30000;
  width: 90%;
  height: auto;
  max-width: 200px;
  bottom: 0px; 
  top: 5px; 
  left: 10px;
  margin: 0;
}

.imgArticleDetailDecoration{
  width: 100%;
  height: auto;
  bottom: 0px; 
  top: 5px; 
  left: 10px;
  margin: 0;
  border-radius: 10px;
}

.theNavContainer {
  display: grid;
  grid-template-areas: 
    "navElement1 navBio";
  grid-template-columns: 70% auto;
  grid-column-gap: 0px;
  margin: 0px;

}

.theNavBackContainer {
  display: grid;
  grid-template-areas: 
    "navElement5 navBio";
  grid-template-columns: 80px auto;
  grid-column-gap: 0px;
  margin: 0px;

}

.theBioContainer {
  display: grid;
  grid-template-areas: 
    "bio contactForm";
  grid-template-columns: 60% 40%;
  grid-column-gap: 5px;
  margin: 0px;
}






/**********************************************************************/
/*                             INPUT FORM                             */
/**********************************************************************/


.input_l {
  width:300px; 
  font-size:100%; 
  border:1px solid #999999; 
  padding:3px;
  padding-left:10px;
  border-radius: 7px;
  font-family:ABeeZee;
  color: #A30000;
}

.input_s {
  width:50px; 
  font-size:100%; 
  border:1px solid #999999; 
  padding:3px;
  padding-left:10px;
  border-radius: 7px;
  font-family:ABeeZee;
  color: #A30000;
}






/**********************************************************************/
/*                           RESPONSIVENESS                           */
/**********************************************************************/


.responsiveLogo { 
  width: 90%;
  height: auto;
  max-width: 567px;
  bottom: 0px; 
  top: 5px; 
  left: 10px;
  margin: 0;
  position: absolute;
}

/* Stack the layout on small devices/viewports. */
@media all and (max-width: 800px) {
  body { 
    margin: 0;
 }
 
 #articleImg { 
  grid-area: articleImg; 
  margin-left:10px;
  margin-bottom:10px;
  background: #EEEEEE;
} 

 .theArticleContainer {
  grid-template-areas: 
    "articleImg"
    "articleTxt";
  	grid-template-columns: 1fr;
 }
 
 .theArticleDetailContainer {
  display: grid;
  grid-template-areas: 
    "articleInfo"
    "articleTxt"
    "articleImgGallery"
    "articleNote";
  grid-template-columns: 1fr;
  margin: 0px
}
 
 .responsiveLogo {
  width: 100%;
  height: auto;
  max-width: 400px;
  bottom: 0; 
  top: 20px; 
  position: absolute;
 }
 
 .imgArticleDecoration{
  border-left: 5px solid #A30000;
  width: 200px;
  }
  
  .theBioContainer {
  display: grid;
  grid-template-areas: 
    "bio" 
    "contactForm";
  grid-template-columns: 1fr;
  margin: 0px
  }
  
  .input_l {
  width:200px; 
  font-size:100%; 
  border:1px solid #999999; 
  padding:3px;
  padding-left:10px;
  border-radius: 7px;
  font-family:ABeeZee;
  color: #A30000;
  }
  
  .responsiveLogo { 
  width: 90%;
  height: auto;
  bottom: 0px; 
  top: 15px; 
  left: 10px;
  margin: 0;
  }
  

  
}



@media all and (max-width: 1150px) {

  
  .theBioContainer {
  display: grid;
  grid-template-areas: 
    "bio" 
    "contactForm";
  grid-template-columns: 1fr;
  margin: 0px
  }
  
  #contactForm { 
  grid-area: contactForm; 
  padding-left:0px;
  border-left: 0px; 
  }
  
}




/* Stack the layout on large screen. */
@media all and (min-width: 1400px) {
  body { 
    justify-content: center;
    grid-template-columns: 1000px;
    margin: 0px;
 }
}



/**********************************************************************/
/*                               BUTTONS                              */
/**********************************************************************/


.btn_readMore{
  display: inline-block;
  background-color: #FEFEFE;
  border: 1px solid #A30000;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  color: #A30000;
  margin: 4px 2px;
  cursor: pointer;
  float: right;
}

.btn_readMore:hover {
  background-color: #DDDDDD;
  text-decoration: none;
  cursor: pointer;
}


.btn_container {
  position: relative;
  height:100px;
}

.btn_contact{
  display: inline-block;
  background-color: #FEFEFE;
  border: 1px solid #A30000;
  padding: 3px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 100%;
  color: #A30000;
  cursor: pointer;
  border-radius: 7px;
}

.btn_contact:hover {
  background-color: #DDDDDD;
  text-decoration: none;
  cursor: pointer;
}

.btn_apply{
  display: inline-block;
  background-color: #FEFEFE;
  border: 1px solid #A30000;
  padding: 3px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  color: #A30000;
  margin: 4px 2px;
  cursor: pointer;
  float: left;
  border-radius: 7px;
}

.btn_apply:hover {
  background-color: #DDDDDD;
  text-decoration: none;
  cursor: pointer;
}


/* Social Button */
.fa {
  padding: 8px;
  font-size:50px;
  color: white;
  width: 17px;
  text-align: center;
  text-decoration: none;
  margin-left: 0px;
  margin-top: 15px;
  border-radius: 20%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #555555;
  color: white;
}

.fa-linkedin {
  background: #555555;
  color: white;
}







/**********************************************************************/
/*                   NAV SELECTOR MODAL - NOT USED                    */
/**********************************************************************/


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 150px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 2px solid #A30000;
  width: 330px;
  border-radius: 7px;
  text-align:left;
}

/* The Close Button */
.close {
  color: #A30000;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}