/* CSS par Isabelle Zezima */
/* 2016 */
/* site Vet'Eq, vétérinaire équin itinérant*/
/* version 1*/




/*************** GENERAL *****************/
/*****************************************/

*
	{
		box-sizing: border-box;
	}
html
	{
		width: 100%;
		margin: 0;
		padding: 0;
	}
body
	{
		width: 100%;
		margin: 0;
		padding: 0;
		font-family: "JosefinSans-Regular";
		color: white;
		background-color: #e8e8dc;
	}

/* TYPOS */ 

/*h1*/
@font-face {
      font-family: "Steinerlight";
      src: url('fonts/Steinerlight.ttf');
  	}
/* h2*/
@font-face {
	font-family: "Matchbook";
	src:url('fonts/Matchbook.otf');
	}
/* font générale */ 
@font-face {
	font-family: "JosefinSans-Regular";
	src:url('fonts/JosefinSans-Regular.ttf');
	}
@font-face {
	font-family: "JosefinSans-Light";
	src:url('fonts/JosefinSans-Light.ttf');
	}
@font-face {
	font-family: "JosefinSans-Bold";
	src:url('fonts/JosefinSans-Bold.ttf');
	}
@font-face {
	font-family: "JosefinSans-SemiBold";
	src:url('fonts/JosefinSans-SemiBold.ttf');
	}

h1,h2,h3
	{
		display: block;
		vertical-align: top;
		margin: 0; 
	}
h1
	{
		text-transform: uppercase;
		font-size: 2em;
		font-family:"Steinerlight";
		letter-spacing: 0.2em;
	}
h2
	{
		font-family:"Matchbook";
		font-size: 2.5em;
		letter-spacing: 0.15em;
	}
h3
	{
		font-weight: bold;
		text-transform: uppercase;
		font-size: 1.3em;
		color: #333333;
	
text-align: center;
		color : #1b7d8c;
	}
strong 
	{
		font-family: "JosefinSans-SemiBold";
	}
p, ul
	{
		font-size: 1.0em;
		line-height: 1.5em;
		vertical-align: top;
		text-align: left;

	}
ul
	{
    	list-style-type: none;
	}
li
	{
		list-style: none;
		text-align: left;
	}
a
	{
		text-decoration: none;
		color: white;
	}
div
	{
		vertical-align: top;
	}


/*************** MEDIAS ******************/
/******************************************/
img, iframe
	{
		max-width: 100%;				
	}
#conteneur-video
	{
		display: block;
		max-height:75vh; /*important : permet de voir toujours ce qui se passe sous la video*/
	}
video
	{
		display: block;
		margin : auto;
		max-width: 100%;
	}


/* fond pour pictos */
.cercle 
	{
		display: inline-block;
		background-color: #1b7d8c; 
		width: 80px;
		height: 80px;
		border-radius: 50%;
		position: relative;
		top: -45px;
	}
.cercle img
	{
		display: inline-block;
		width: 75%;
		margin: 10px; /*centre l'image dans le picto */
	}

/* SLIDER OWL CAROUSEL */
#conteneur-slider img
{
	display: block;
	max-height:65vh; /*important : permet de voir toujours ce qui se passe sous le slider*/
}	
.owl-carousel
	{
		display: block;
		position: relative;
	}
.owl-carousel img
	{
		display: block;
		margin: 0 auto;
	}




/*************** HEADER ******************/
/*****************************************/
header
	{
		width: 100%;
		height: 120px;
		background-color: #584944;
	}
header img /* logo */
	{
		vertical-align: top;
		width: 120px; 
		margin: 0px;
	}
.conteneur-titre /*titre et sous titre du site*/
	{
		display: inline-block;
		vertical-align: top;
		margin: 20px;
	}

/*************** NAV *********************/
/*****************************************/
nav
	{
		display: block;
		width: 100%;
		text-align: right;
		position: absolute;
		top: 20px;
		right: 25px;
	}
nav img
	{
		height: 30px;
		vertical-align: top;
	}
nav ul
	{

		font-size: 1.2em;
	}
nav a
	{
		display: inline-block;
		vertical-align: top;
		text-align: center;
	}
nav h2
	{
		color: #55b0be; 
		padding-left: 10px;
		padding-right: 10px;
		border-right: 2px solid white;
		font-size: 1.8em;
	}


/*************** PAGE ********************/
/*****************************************/

/**** général sections ****/
section
	{
		width: 100%;
		max-width: 2000px;
		margin: 0 auto;
		text-align: center;
		color: black;
		padding: 25px;
	}
section a 
	{
		color: black;
	}
article
	{
		display: inline-block;
		vertical-align: top;
		width: 90%;
	}
aside
	{
		display: block;
		vertical-align: top;
		width: 24%;
		padding: 0;	
		margin: 0;
	}



.conteneur
	{
		background-color: white;
		width: 100%;
		padding: 20px;
	}





#accueil .conteneur
	{
		display: inline-block;
	 	width: 320px;
	 	height: 320px;
	 	text-align: center;
	 	margin: 10px;
	}
#accueil aside
	{
	 	margin: 0 auto;
	}
#accueil h3
	{
	 	margin: 15px;
	}

#equipe .conteneur
	{
		padding: 20px;
	}




/* page equipe : texte et image de présentation de Vet'eq, sous le slider */
.bloctitre
	{
	    display: inline-block;
	    width: 100%;
	    vertical-align: top;
	}
.blocimage
	{
	    display: inline-block;
	    width: 20%;
	    vertical-align: top;
	}
.blocimage img
	{
		max-width: 100%;
	}
.bloctexte
	{
	    display: inline-block;  
	    width: 75%;  
	    vertical-align: top;
	}
.bloctexte p
	{
	    padding: 20px;
	}



#prestations .conteneur
	{
		display: block;
		width: 350px;
		height: 750px; /* indispensable pour bon fonctionnement du plugin masonry*/
		margin: 25px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.19);
	}





#fiches .conteneur /* fiches santé */
	{
		width: 500px;
	}
#fiches .conteneur strong
	{
		display: inline-block;
		background-color: #0c363c;
		color: white;
		width: 100%;
	}
#fiches h3
	{
		text-align: center;
		background-color: #0c363c;
		color: white;
		width: 100%;
	}
#fiches article
	{
		width: 100%;	
	}
#fiches aside
	{
	 	max-width: 200px;
	}
#fiches span /* lien vers article */
	{
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 20px;
	}
#fiches span a
	{
		color: #55b0be;
	}

/*** Page contact ***/

form
	{
		background-color: white;
		margin: 0 auto;
		text-align: center;
		width: 80%;
		padding: 10%;
	}


.container 
{
  max-width: 40rem;
  margin: 5rem auto;
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 3rem 5rem 0;
  border-radius: 1px;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: box-shadow 0.28s ease, -webkit-transform 0.28s ease;
  transition: box-shadow 0.28s ease, -webkit-transform 0.28s ease;
  transition: box-shadow 0.28s ease, transform 0.28s ease;
  transition: box-shadow 0.28s ease, transform 0.28s ease, -webkit-transform 0.28s ease;
}
.container:hover {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
  -webkit-transform: scale(1.005);
  transform: scale(1.005);
}

.button-container {
  text-align: center;
}

fieldset {
  margin: 0 0 3rem;
  padding: 0;
  border: none;
}

.form-radio,
.form-group {
  position: relative;
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
}

.form-inline > .form-group,
.form-inline > .btn {
  display: inline-block;
  margin-bottom: 0;
}

.form-help {
  margin-top: 0.125rem;
  margin-left: 0.125rem;
  color: #b3b3b3;
  font-size: 0.8rem;
}
.checkbox .form-help, .form-radio .form-help, .form-group .form-help {
  position: absolute;
  width: 100%;
}
.checkbox .form-help {
  position: relative;
  margin-bottom: 1rem;
}
.form-radio .form-help {
  padding-top: 0.25rem;
  margin-top: -1rem;
}

.form-group input {
  height: 1.9rem;
}
.form-group textarea {
  resize: none;
}
.form-group select {
  width: 100%;
  font-size: 1rem;
  height: 1.6rem;
  padding: 0.125rem 0.125rem 0.0625rem;
  background: none;
  border: none;
  line-height: 1.6;
  box-shadow: none;
}
.form-group .control-label {
  position: absolute;
  top: 0.25rem;
  pointer-events: none;
  padding-left: 0.125rem;
  z-index: 1;
  color: #b3b3b3;
  font-size: 1rem;
  font-weight: normal;
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
}
.form-group .bar {
  position: relative;
  border-bottom: 0.0625rem solid #999;
  display: block;
}
.form-group .bar::before {
  content: '';
  height: 0.125rem;
  width: 0;
  left: 50%;
  bottom: -0.0625rem;
  position: absolute;
  background: #337ab7;
  -webkit-transition: left 0.28s ease, width 0.28s ease;
  transition: left 0.28s ease, width 0.28s ease;
  z-index: 2;
}
.form-group input,
.form-group textarea {
  display: block;
  background: none;
  padding: 0.125rem 0.125rem 0.0625rem;
  font-size: 1rem;
  border-width: 0;
  border-color: transparent;
  line-height: 1.9;
  width: 100%;
  color: transparent;
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
  box-shadow: none;
}
.form-group input[type="file"] {
  line-height: 1;
}
.form-group input[type="file"] ~ .bar {
  display: none;
}
.form-group select,
.form-group input:focus,
.form-group input:valid,
.form-group input.form-file,
.form-group input.has-value,
.form-group textarea:focus,
.form-group textarea:valid,
.form-group textarea.form-file,
.form-group textarea.has-value {
  color: #333;
}
.form-group select ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group input:valid ~ .control-label,
.form-group input.form-file ~ .control-label,
.form-group input.has-value ~ .control-label,
.form-group textarea:focus ~ .control-label,
.form-group textarea:valid ~ .control-label,
.form-group textarea.form-file ~ .control-label,
.form-group textarea.has-value ~ .control-label {
  font-size: 0.8rem;
  color: gray;
  top: -1rem;
  left: 0;
}
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
}
.form-group select:focus ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group textarea:focus ~ .control-label {
  color: #337ab7;
}
.form-group select:focus ~ .bar::before,
.form-group input:focus ~ .bar::before,
.form-group textarea:focus ~ .bar::before {
  width: 100%;
  left: 0;
}

.checkbox label{
  position: relative;
  cursor: pointer;
  padding-left: 2rem;
  text-align: left;
  color: #333;
  display: block;
}
.checkbox input{
  width: auto;
  opacity: 0.00000001;
  position: absolute;
  left: 0;
}

.checkbox {
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.checkbox .helper {
  color: #999;
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  z-index: 0;
  border: 0.125rem solid currentColor;
  border-radius: 0.0625rem;
  -webkit-transition: border-color 0.28s ease;
  transition: border-color 0.28s ease;
}
.checkbox .helper::before, .checkbox .helper::after {
  position: absolute;
  height: 0;
  width: 0.2rem;
  background-color: #337ab7;
  display: block;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  border-radius: 0.25rem;
  content: '';
  -webkit-transition: opacity 0.28s ease, height 0s linear 0.28s;
  transition: opacity 0.28s ease, height 0s linear 0.28s;
  opacity: 0;
}
.checkbox .helper::before {
  top: 0.65rem;
  left: 0.38rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
  box-shadow: 0 0 0 0.0625rem #fff;
}
.checkbox .helper::after {
  top: 0.3rem;
  left: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.checkbox label:hover .helper {
  color: #337ab7;
}
.checkbox input:checked ~ .helper {
  color: #337ab7;
}
.checkbox input:checked ~ .helper::after, .checkbox input:checked ~ .helper::before {
  opacity: 1;
  -webkit-transition: height 0.28s ease;
  transition: height 0.28s ease;
}
.checkbox input:checked ~ .helper::after {
  height: 0.5rem;
}
.checkbox input:checked ~ .helper::before {
  height: 1.2rem;
  -webkit-transition-delay: 0.28s;
          transition-delay: 0.28s;
}

.checkbox + .checkbox {
  margin-top: 1rem;
}

.has-error .legend.legend, .has-error.form-group .control-label.control-label {
  color: #d9534f;
}
.has-error.form-group .form-help,
.has-error.form-group .helper, .has-error.checkbox .form-help,
.has-error.checkbox .helper, .has-error.radio .form-help,
.has-error.radio .helper, .has-error.form-radio .form-help,
.has-error.form-radio .helper {
  color: #d9534f;
}
.has-error .bar::before {
  background: #d9534f;
  left: 0;
  width: 100%;
}

.button {
  position: relative;
  background: currentColor;
  border: 1px solid currentColor;
  font-size: 1.1rem;
  color: #4f93ce;
  margin: 3rem 0;
  padding: 0.75rem 3rem;
  cursor: pointer;
  -webkit-transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  overflow: hidden;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.button span {
  color: #fff;
  position: relative;
  z-index: 1;
}
.button::before {
  content: '';
  position: absolute;
  background: #071017;
  border: 50vh solid #1d4567;
  width: 30vh;
  height: 30vh;
  border-radius: 50%;
  display: block;
  top: 50%;
  left: 50%;
  z-index: 0;
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
.button:hover {
  color: #337ab7;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
}
.button:active::before, .button:focus::before {
  -webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}
.button:focus {
  outline: none;
}







/*************** FOOTER ******************/
/*****************************************/
footer
	{
		display: block;
		text-align: center;
		width: 100%;	
		bottom : 0;
		background-color: #584944;	 /*anciennement #2f2f2*/
	}
footer div
	{
		display: inline-block;
		padding: 10px;
		width: 49%;
		min-width: 300px;
	}
footer iframe /* carte zone d'activité des vétérinaires */ 
	{
		width: 100%;
		min-height: 400px;
	}
.urgence
	{
		color : orange;
		font-weight: bold;
	}
footer img
	{
		width: 35px;
		vertical-align: top;
	}
.imgcontact
	{
		width: 160px;
	}




/***************************   Menu hamburger********************/

.hamburger 
	{ 
		display: none;
		position: absolute;
		top: 20px;
		right: 20px;
	}
.hamburger-layer 
	{
		width: 30px;
		height: 2px;
		border-radius: 2px;
		margin-bottom: 4px;
		background-color: #fff;
	}
.btn {
	padding: 5px 15px;
	border-radius: 2px;
	color: #fff;
	font-size: 1rem;
	text-align: center;
	text-decoration: none;
	background-color: #7ba4da;
}

.btn:hover { background-color: #3674c4; }

input.btn { border: none; }





/*************** MEDIA QUERIES ***********/
/*****************************************/


@media screen and (min-width: 900px){
    video
	{
		max-width: 900px;
		padding-top: 30px;
	}
    .owl-carousel
	{
		padding-top: 30px;
	}
}



@media screen and (max-width: 632px){
    h1
	{
	 font-size: 1.5em;
	}
	h2
	{
	 font-size: 1.8em;
	}
	footer div
	{
		width: 100%;
	}
	footer iframe
	{
		padding: 30px;
	}
}



@media screen and (max-width: 480px){
    h1
	{
	 font-size: 1.5em;
	}
	h2
	{
	 font-size: 1.0em;
	}
	header 
	{
		height: 80px; 
	}
	header img
	{
		width: 80px; 
	}
	nav 
	{ 
		top: 80px; /*apparait juste sous le header*/
	}

}








@media (max-width: 900px) {

	.hamburger 
		{ 
			display: block; 
			transition: 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
		}
	.btn-open 
		{ 
			transform: rotate(90deg); 
		}
	.hamburger-layer 
		{ 
			transition: 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95); 
		}
			/*.btn-open .hamburger-layer:first-child { transform: rotate(45deg); }
			.btn-open .hamburger-layer:last-child { transform: rotate(-45deg); }*/
	nav { 
		/*display: none;*/ 
		position: fixed;
		left: 0;
		right: 0;
		top: 120px; /*apparait juste sous le header*/
		bottom: 0;
		z-index: 1;
		transform: translateX(120%);
		transition: 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
		background-color: #453935; 
		}
	nav.open 
		{ 
			transform: translateX(0); 
		}
	nav a 
		{
			display: block;
			font-size: 1.2rem;
			line-height: 2.0;
			margin-top: 25px;
			color: white;
		}
	nav a:hover
		{
			background-color: #91261f;
		}
	nav h2
		{
			color: white;
		}

}