@charset "utf-8";
/* CSS Style Sheet
   C. Eddy Traductions */

@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Raleway:800);
@import url(/css/collapsible-text.css);
@import url(/css/menus-navigation.css);

#container {
          max-width: 1000px;
          background-color: #fff;
          margin: auto; /* value set as auto to center content */
 }

body {
         background-image: url("../images/triangle-bg-fallback.png");
         background-image: linear-gradient(transparent, transparent), url("../images/triangle-bg.svg");
		 background-color: #144374;
         background-size: 100%;
         background-attachment: fixed; 
         font-family: 'Open Sans', Verdana, DejaVu Sans, sans-serif;
         font-style: normal;
         font-size: normal;
         font-weight:400;
         color: #000;
         -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
         margin: 0;
         padding: 0;
         zoom: 100%;
}

p, ul {
	font-size: normal;
	text-align: justify;
	line-height: 150%;
}

h1, h2, h3, h4 {
		 text-shadow: 0px 1px 1px #828282;
}
h1 /* Used as the title text for each individual page (except contact, which has none). */ {
	 text-align:center; 
	 font-weight: bold;
	 font-variant: small-caps; 
	 font-size: 20px;
	 font-family: sans-serif;
	 margin-bottom: 4%;
 }

 h2 /* Used as the headings for the subsections of each page. Basically a left-aligned header for body text. */ {
    font-size: medium;
	font-stretch: expanded;
	 line-height: 150%;
  }
h4 /* (Mis)used as a specific style in the page traduction.shtml to give sub-sub headings. */ {
	font-size: normal;

}
td, th /* Tables appear in .traduction.shtml and .relecture.shtml */ {
	padding: 1px 1px 1px 5px;	
}
  /* Body Text - This div wraps around everything in the body after SSI header and footer. */
.body-text {
       margin: 4% 5% 0 5%;
  }
.body-text a:link, a:visited {
	color: #000;
	text-decoration: underline;
}
.centered {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}

hr {
	border: 0; 
	height: 1px; 
	background: #333; 
	background-image: linear-gradient(to right, #ccc, #333, #ccc);
	margin: 10px 0 10px 0;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
 /* Links */
 
 a:link, a:visited {
	color: #000;
	text-decoration: none;
}
a:hover, a:active, a:focus {
	text-decoration: none;
	color: #505050;
}

/* Image container for images used at the top of individual pages */

.square {
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: 150px;
  margin: 2% auto 0px auto;
  padding: 0;
  overflow: hidden;
  z-index: 1;
}

.square img {
  position: relative;
  width: 100%;
  vertical-align: middle;
  padding: 0;
}

.required {
	color: red;
}

/* Button (contact button) */

#button {
	width: 200px;
	margin-top: 40px;
	margin-right: auto;
	margin-bottom: 42px;
	margin-left: auto;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	text-align: center;
	vertical-align: middle;
	border-radius: 0px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
	border: 3px solid #144374;
	color: #144374;
	background: #fff;
	transition: all 0.1s linear;
}
#button:hover {
	background: #144374;
	color: #fff;
}
#button.hover:hover {
	background: #144374;
	color: #fff;
}

#button a {
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
	text-decoration: none;
	color: #88C693;
}

#button a:hover, a:active, a:focus {
	background-color: #144374;
	color: #fff;
	cursor: pointer;
}

/* For contact forms, limits size to 100% of page width (esp. important for mobile) */
input {
	max-width: 100% !important;
}
textarea {
	max-width: 100% !important;
}



/* Icon display: Rows/Columns for Accueil, Services and Traduction pages.
This creates a row with 5 columns spread centred across the screen, used to show the icons for different parts of the site.  */

.row {
	width: 100%;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 0;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	display: inline-block;
}
.row.blockDisplay {
	display: block;
}
.columns {
	width: 20%;
	float: left;
	padding-top: 2px;
	padding-bottom: 2px;
	margin: 0px auto 0px auto;
	padding-left: 0px;
	padding-right: 0px;

}
.row .columns p {
	padding: 0 10% 0 10%;
	font-family: 'Open Sans', Verdana, DejaVu Sans, sans-serif;
	font-weight: bold;
	color: #022d0b;
	hyphens: none;
	line-height: 20px;
	text-align: center;
}

.columns img {
	width:75px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/* Responsive code for small tablets/mobile */

@media (max-width: 767px) {
	.columns {
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
.columns p {
	padding-left: 10px;
	padding-right: 10px;
}
	.columns img {
		width: 75px;
	}
}



/* 


Slideshow on Testimonials page 


From here: http://thenewcode.com/871/CSS-Slidy-20-Captions--more
With live example here: https://codepen.io/dudleystorey/pen/AgtbD


*/


#slidy-container {
	width: 90%;
	max-width: 100%;
	margin: 0 auto;
	overflow: hidden;
}


#slidy-container img {
	max-width: 100%;
}

@media screen and (max-width: 600px) {
	#slidy-container figcaption { 
		font-size: 1rem !important; 
	}
}

data-caption {
	max-width:100%;
}


/* Encart entouré d'une bordure bleue arrondie, police bleue logo, avec effet hover (vert logo) - Utilisé sur la page "Nos Tarifs"  */

.encart {
  margin-left: 15%;
  margin-right:15%;
  margin-top: 3em;
  margin-bottom: 3em;
  border: 2px solid #345883;
  border-radius: 5px;
  font-size: medium;
  color: #345883;
  padding: 2em;
  }
.encart:hover {
  	background: #89c694;
	  color: #fff;
}

@media screen and (max-width: 600px) {
	.encart { 
		 margin-left: 2%;
  margin-right: 2%;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
	}
}