@charset "utf-8";

/**
 * Parallax styles
 *
 * All aesthetic styles are at the bottom for the benefit of better understanding the demo.
 */

*{	box-sizing:border-box;
	margin: 0;
	padding: 0;

}


	
html {
  /* Give our document a fake height for demo purposes. */
	
  /* We must set out root `font-size` to 0 to prevent our parallax margins being calculated */
  	/*font-size: 0;*/
	
	}

body {
  /* Reset the `font-size` to 16px/1em/100% */
  	/*font-size: 16px;*/
	font-family: 'Raleway';
}


/* Fix our parallax elements in position */
.parallax {
	position: fixed;
	}

/**
 * Position our elements
 *
 * Firstly we set our element position using `top`, `right`, `bottom`, `left`, then set your parallax movement using `margin` and `rem`.
 *
 * In this demo our 'base factor' is 50 (see JavaScript). Our 'factor' calculation never exceeds this number (when the viewport is fully scrolled), which means our `rem` calculations are based on this number.
 *
 * Example:
 *
 * If I set my `top` to `200px` and want this element to shift up by `400px`, our `rem` value is 400/10, or `-40em` (using negative margins to shift upwards).
 */


#img {
	
	width: 10%;
	scroll-behavior: smooth;
}


.yvette1erafoto {
	
	position: absolute;
	width: 100%;
	margin-top: -30px;
	z-index: -1;
	
}

.logoenlineas {
	top: 745px;
	margin-top: -15rem;
	left: 20%;
	width: 60%;
}

.tipografia {
	top:1230px;
	margin-top: -20rem;
	left: 50%;
	width: 40%;
	z-index: -1;
	
}

.dispositivos {
	top:2100px;
	margin-top: -28rem;
	left: 15%;
	width: 70%;
	z-index: -10;
		
}

.afichesyvette {
	top: 2240px;
	margin-top: -15rem;
	left: 25%;
	z-index: 10;
	width: 50%;
}

.banderin {
	top: 3100px;
	margin-top: -20rem;
	left: 10%;
	width:80%;
	z-index: -10;

}

.totebag {
	top: 4600px;
	margin-top: -30rem;
	left: 15%;
	width: 50%;
	z-index: 1;
	
	
	
}

.sac {
	
	top: 3300px;
	margin-top: -10rem;
	left: 40%;
	width: 50%;
	
}

.afichepared {
	top: 3250px;
	margin-top: -5rem;
	margin-left: 0;
	width: 100%;
	z-index: -2;
	
	
	
	
}

.thefrenchtouch1erafoto {
	
	position: absolute;
	width: 100%;
	margin-top: -30px;
	z-index: -1;
	
}

.fotogrupo {
	
	top: 900px;
	margin-top: -20rem;
	left: 10%;
	width: 70%
	
	
}


.clothbag {
	
	top:1600px;
	margin-top: -30rem;
	left: 30%;
	width: 60%;
	z-index: 1;
	
}

.vinyl {
	top:2100px;
	margin-top: -25rem;
	left: 10%;
	z-index: -10;
	width: 70%
		
}

.instagif {
	top: 2440px;
	margin-top: -15rem;
	left: 25%;
	z-index: 10;
	
}

.pull {
	top: 4000px;
	margin-top: -30rem;
	left: 10%;
	z-index: 10;

}

.pendonthefrenchtouch{
	top:4100px;
	margin-top: -25rem;
	z-index: -2;

	
	
	
	
}


.fotoleo {
	
	position: absolute;
	width: 100%;
	top: 20;
	z-index: -9999;
	
	
}






.fichaintrahospitalaria1erafoto {
	
	position: absolute;
	width: 100%;
	/*margin-top: -30px;*/
	z-index: -1;
	min-width: 10%;
	min-height: 10%;
	
	
}


.lineascruzverde {
	
	top: 745px;
	margin-top: -15rem;
	left: 10%;
	width: 60%;
	min-width: 10%;
	min-height: 10%;
}


.dibujofarmacia {
	
	
	top:1350px;
	margin-top: -25rem;
	left: 50%;
	width: 40%;
	min-width: 10%;
	min-height: 10%;
	z-index: 20;
	
	}

.fichamockup {
	
	
	top:2150px;
	margin-top: -35rem;
	left: 8%;
	width: 70%;
	z-index: 20;
	min-width: 10%;
	min-height: 10%;
}



.sobremockup {
	
	top: 2240px;
	margin-top: -25rem;
	left: 40%;
	width: 50%;
	min-width: 10%;
	min-height: 10%;
	
}

.invitacionmockup {
	
	top: 3300px;
	margin-top: -35rem;
	left: 11%;
	width: 70%;
	z-index: -1;
}

.tarjetasmockup{
	
	top: 4500px;
	margin-top: -45rem;
	left: 30%;
	width: 60%;
	z-index: -2;
		
}

.pendonficha {
	
	top: 3000px;
	margin-top: -15rem;
	margin-left: 0;
	width: 100%;
	z-index: -20;
	
	
}



#coeurvideo {
	
	
	height: auto;
    width:100%;
	z-index: -10;
   
}


.moodboardcoeur {
	top: 845px;
	margin-top: -10rem;
	left: 10%;
	width: 70%;
}

.tournage {
	top:1830px;
	margin-top: -20rem;
	left: 30%;
	width: 60%;
	z-index: 1;
	
}

.storyboard {
	top:2100px;
	margin-top: -10rem;
	left: 10%;
	width: 70%;
	
		
}

.gifcoeur {
	top: 3300px;
	margin-top: -15rem;
	z-index: 10;
	width:80%;
	left: 10%;
	
}


/*--------------------------------------------------textos----------------------------------------------*/


.yvette{
	
	color: #DF3B96;
	width: 40%;
	height: 20vh;
	margin-top: -35rem;
	top: 550px;
	font-family: 'Raleway thin', sans-serif;
	font-weight:100;
	font-size: 2vw;
	text-transform: inherit;
	margin-left: 3%;
	
}



.textoyvette {
	
	width: 30%;
	background-color: #DF3B96;
	margin-top: -30rem;
	min-width: 50px;
	min-height: 50px;
	top: 745px;
	left: 8%;
	
	

}


.textoyvette p {
	
	font-size: 0.8vw;
	line-height: 150%;
	font-family: 'Raleway', ;
	color:white;
	text-align: left;
	padding-left: 5vh;
	padding-right: 5vh;
	padding-bottom: 4vh;
	padding-top: 4vh;
	
	
	
}


.fichainstrahospitalaria{
	
	color: #1A6B3F;
	width: 40%;
	height: 20vh;
	margin-top: -35rem;
	top: 550px;
	font-family: 'Raleway';
	font-weight:100;
	font-size: 2vw;
	text-transform: inherit;
	margin-left: 63%;
	
}



.textoficha {
	
	width: 30%;
	background-color: #1A6B3F;
	margin-top: -30rem;
	min-width: 50px;
	min-height: 50px;
	top: 745px;
	left: 64%;
	
	

}


.textoficha p {
	
	font-size: 0.8vw;
	line-height: 150%;
	font-family: 'Raleway', ;
	color:white;
	text-align: left;
	padding-left: 5vh;
	padding-right: 5vh;
	padding-bottom: 4vh;
	padding-top: 4vh;
	
	
}

.thefrenchtouch{
	
	color: #0000FF;
	width: 40%;
	height: 20vh;
	margin-top: -35rem;
	top: 550px;
	font-family: 'Raleway';
	font-weight:100;
	font-size: 2vw;
	text-transform: inherit;
	margin-left:55%;
	
}



.textothefrenchtouch {
	
	width: 30%;
	background-color: #0000FF;
	margin-top: -30rem;
	min-width: 50px;
	min-height: 50px;
	top: 745px;
	left: 55%;
	
}


.textothefrenchtouch p {
	
	font-size: 0.8vw;
	line-height: 150%;
	font-family: 'Raleway', ;
	color:white;
	text-align: left;
	padding-left: 5vh;
	padding-right: 5vh;
	padding-bottom: 4vh;
	padding-top: 4vh;
	
	
}






.coeur {
	
	color: #3FA2EE;
	width: 30%;
	height: 20vh;
	margin-top: -35rem;
	top: 550px;
	font-family: 'Raleway', ;
	font-size: 4vh;
	text-transform: inherit;
	margin-left: 70%;
	
}



.textocoeur {
	
	width: 30%;
	background-color: #3FA2EE;
	margin-top: -35rem;
	min-width: 50px;
	min-height: 50px;
	margin-left: 60%;

}


.textocoeur p {
	
	font-size: 0.8vw;
	line-height: 150%;
	font-family: 'Raleway', ;
	color: white;
	text-align: left;
	padding-left: 5vh;
	padding-right: 5vh;
	padding-bottom: 4vh;
	padding-top: 4vh;
	
	
}


.leonaly {
	
	color: #42EAD3;
	width: 30%;
	height: 20vh;
	margin-top: -35rem;
	top: 560px;
	font-family: 'Raleway', ;
	font-size: 4vh;
	text-transform: inherit;
	margin-left: 8%;
	
}



.textoleonaly {
	
	width: 30%;
	background-color: #42EAD3;
	margin-top: -20rem;
	top: 1000px;
	margin-left: 15%;

}


.textoleonaly p {
	
	font-size: 2vh;
	font-family: 'Raleway', ;
	color: white;
	text-align: left;
	padding-left: 6vh;
	padding-right: 6vh;
	padding-bottom: 4vh;
	padding-top: 4vh;
	line-height: 3vh;
	
}


.textoleonaly2 {
	
	width: 30%;
	background-color: #39BCA6;
	margin-top: -10rem;
	top: 1000px;
	margin-left: 55%;

}


.textoleonaly2 p {
	
	font-size: 2vh;
	font-family: 'Raleway', ;
	color: white;
	text-align: left;
	padding-left: 6vh;
	padding-right: 6vh;
	padding-bottom: 4vh;
	padding-top: 4vh;
	line-height: 3vh;
	
}

/*--------------------------------------------------menu----------------------------------------------*/

#menu {
	
	/*margin-top: 3vh;*/
	width: 100%;
	font-size: 17px;
	height: 3%;
	position: fixed;
	top: 0;
	left: 0;
	text-align: center;
	align-items: center;
	z-index: 999999;
	background-color: white;
	padding-top:12px;
			
}


.snip1322 {

	font-family: 'Raleway light', Arial, sans-serif;
	text-align: center;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 2px;
	align-items: center;
	background-color: white;

}
.snip1322 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
align-items: center;
/*-webkit-transition: all 0.35s ease;*/
  transition: all 0.35s ease;
	background-color: white;
}
.snip1322 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0.5em 1.2em;
  padding: 0;
  align-items: center;
	background-color: white;
}
.snip1322 a {
  padding: 0 1em;
  color: #42EAD3;
  position: relative;
  text-decoration: none;
  align-items: center;
	background-color: white;
	
}
.snip1322 a:before,
.snip1322 a:after {
  width: 3px;
  height: 0;
  position: absolute;
  content: '';
 -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  background-color:  #41887E;
  align-items: center;
}
.snip1322 a:before {
  bottom: 0;
  right: 0;
align-items: center;
}
.snip1322 a:after {
  top: 0;
  left: 0;
  align-items: center;
}
.snip1322 a:hover,
.snip1322 .current a {
  color:#41887E;
  align-items: center;
}
.snip1322 a:hover:before,
.snip1322 .current a:before,
.snip1322 a:hover:after,
.snip1322 .current a:after {
  height: 100%;
  align-items: center;
}




/*--------------------------------------------------book----------------------------------------------*/


.container{
  padding: 75px 0;
  margin: 0 auto;
  width: 1140px;
  margin-top: 5vh;
}


.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 70vh;
}

.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.8s ease;
}



.item-1 { 
  background-image: url("../img/ivetteportada.jpg");
}

.item-2 { 
  background-image: url("../img/coeurportada.jpg");
}

.item-3 { 
  background-image: url("https://images.unsplash.com/photo-1492760864391-753aaae87234?auto=format&fit=crop&w=1336&q=80");
}

.item-4 { 
  background-image: url("../img/frenchtouchportada.jpg");
}

.item-5 { 
  background-image: url("../img/Fichaintrahospitalariaportada.jpg");
}



.bob {
	background: rgba(255,255,255,0);
	width: 80%;
	min-height: 50%;
	height: 100%;
}







#cajavideo

{
    width: 100%;
    height: 100vh;
    background-color: white;
   /* margin: 0 auto;*/
    text-align: center;
}


#Elvideo {
    height: auto;
    width: 50%;
    padding-top: 10%;
}

/*.mail a:hover {
	
	color: white;
	font-family: 'Raleway', Arial, sans-serif;
	font-size: 3rem;
	margin-left: 5%;
	z-index: 5;
	padding-bottom: 5vh;
	margin-bottom: 0;
	
}

.mail a {
	
	text-decoration: none;
	color: #42EAD3;
	font-family: 'Raleway', Arial, sans-serif;
	font-size: 3rem;
	margin-left: 5%;
	z-index: 5;
	padding-bottom: 5vh;
	margin-bottom: 0;
}*/


#cptext {
	
	color:#42EAD3;
	text-shadow: 0 1px rgba(255, 255, 255, 0.1);
	font-size: 1.5vh;
	text-align: center;
	bottom: 0;
	top: 100%;
	padding-bottom: 5vh;
	z-index: 9999;

	
}


#bloqueiconos {
	
	width: 100%;
	display: -webkit-flex; /*safari*/ /*para que uno al lado de los otros*/
	display: ms-flex; /*para que uno al lado de los otros*/
	display: flex; /*para que uno al lado de los otros*/
	bottom: 0px;
	position: absolute;
	margin: auto;
	align-items: center;
	align-content: center;
	text-align: center;
	justify-content: center;
	font-size: 1rem;
	}

.iconlinkdin, .iconinsta, .iconopdf, .iconbehance {
	
	width: 2%;
	min-width: 10%;
	z-index: -1;
	
}


#blockscroll {
	
	width: 100%;
	min-width: 30%;
	
	
}


.scroll {
	
	text-transform: inherit;
	width: 100%;
	color: white;
	position: absolute;
	margin-top: 640px;
	text-align: center;
	font-family: 'Raleway regular';
	font-weight:100;
	font-size: 1.2vw;
	margin-left: auto;
	margin-right: auto;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	
		
}



.lineascroll {
  position: absolute;
  width:3px;
  height:10px;
  background:white;
  border-radius:2px;
  left:50%;
  top:20px;
  margin:0 0 0 -2px;
  animation: scroll 1s ease-in-out infinite;
  margin-top: 650px;
}





@keyframes scroll{
  0%{height:7px;}
  50%{height:30px;}
  100%{height:7px;}
}



.siguiente {
	
	background-color: black;
	width: 20%;
	height: auto;
	z-index: 20;
	position: absolute;
	
}