/** 
* #RESET & FORM
**/

select[multiple],textarea{vertical-align:top}a,hr{padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section{display:block}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}ins,mark{background-color:#ff9;color:#000}body{line-height:1}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;font-size:100%;vertical-align:baseline;background:0 0}ins{text-decoration:none}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}button,input,label,select,textarea{margin:0;border:0;padding:0;display:inline-block;vertical-align:middle;white-space:normal;background:0 0;line-height:1;font-size:19px;font-family:Arial}input:focus{outline:0}input,textarea{box-sizing: border-box;}button,input[type=button],input[type=checkbox],input[type=radio],input[type=reset],input[type=submit],select{box-sizing:border-box}input[type=checkbox],input[type=radio]{width:13px;height:13px}input[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box}::-webkit-search-decoration{display:none}button,input[type=reset],input[type=button],input[type=submit]{overflow:visible;width:auto}::-webkit-file-upload-button{padding:0;border:0;background:0 0}textarea{overflow:auto}

/**
* #GLOBAL
**/

*,
*::before,
*::after {
    box-sizing: border-box;
}
.clear::before,
.seccio::before,
.clear::after,
.seccio::after {
    content: ' ';
    display: table;
}
.clear::after,
.seccio::after {
    clear: both;
}
.clear,
.seccio {
    clear: both;
    *zoom: 1;
}

html,
body {
    height: 100%;
	color: var(--negre);
	background-color: var(--blanc);
	line-height: 1.4;
}
body {font-family: 'Montserrat', sans-serif;}
a {color: inherit}
a,
a:hover {
    transition: all 300ms ease-in-out;
}
li {list-style: none;}


/**
* #FONTS
**/
@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?10898584');
  src: url('../font/fontello.eot?10898584#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?10898584') format('woff2'),
       url('../font/fontello.woff?10898584') format('woff'),
       url('../font/fontello.ttf?10898584') format('truetype'),
       url('../font/fontello.svg?10898584#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?10898584#fontello') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-facebook:before { content: '\f301'; } /* '' */
.icon-instagram:before { content: '\f31f'; } /* '' */





/**
* #ESTRUCTURA
**/
.col-2 {}
.col-2 + .col-2 {
	margin-top: 4rem;
}
.marc {
	width: 100%;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	border: solid 1rem #FFF;
	box-shadow: 0 2px 30px rgba(0,0,0,0.1)
}

.full-w-1,
.full-w-2 {
	background-size: 100% auto;
	background-position: center top;
	background-repeat: no-repeat;
	padding-top: 100%
}
	.full-w-1 .container,
	.full-w-2 .container {
		padding: 4rem 2rem 4rem;
		margin: 0 auto;
		text-align: center;
		background: var(--blanc);
	}
		.full-w-1 .container .tit-1,
		.full-w-2 .container .tit-1 {margin-bottom: 2rem;}
		.full-w-1 .container .bt-1,
		.full-w-2 .container .bt-1 {margin-top: 2rem;}

.video-item {
	width: 100%;
	margin: 0 auto;
}
	.video-item video {
		display: block;
		width: 100%;
	}





/**
* #COLORS
**/
:root {
	--negre: rgba(25, 24, 23, 1);
	--marro: rgba(81, 80, 82, 1);
	--groc:  #00c999; /*RGB(250, 194, 43);*/
	--verd: RGB(160, 212, 133);
	--gris: rgba(200, 227, 222, 1);
	--blanc: rgba(235, 252, 253, 1);
}





/**
* #TITULARS
**/
.tit-1 {
	text-transform: uppercase;
	font-size: 2rem;
}
.tit-2 {
	text-transform: uppercase;
	letter-spacing: 1px;
	padding-bottom: 1.25rem;
}









/**
* #HEADER
**/
.site-header .container {
	background: var(--groc);
	padding: 4rem 2rem
}
	.site-header h2 {
		text-transform: uppercase;
		font-weight: 400;
		letter-spacing: 2px;
		margin-bottom: 4rem;
		color: #7CE3CB;
	}
		.site-header img {
			display: inline-block;
			
		}
	.site-header h1 {
		font-size: 2.6rem;
		text-transform: uppercase;
		line-height: 1.5;
		letter-spacing: 1px;
	}
		.site-header h1 span:last-child {
			color: var(--blanc);
		}
	.site-header p {
		line-height: 1.5;
		font-size: 1.2rem;
		margin-bottom: 4rem;
	}

/**
* #INTRO
**/

.intro {
	padding: 5rem 2rem;
}

/**
* #CENTRO CAPILAR BCN
**/

.centro-capilar {
	background: var(--groc);
	margin-top: 10rem;
}
	.centro-capilar .marc {
		margin-top: -10rem;
		margin-bottom: 6rem;
	}
		.centro-capilar .marc img {
			display: block;
			width: 100%;
		}
	.centro-capilar .container {
		padding: 0 2rem 4rem;
		margin: 0 auto;
		text-align: center;
	}
		.centro-capilar .container .tit-1 {margin-bottom: 2rem;}
		.centro-capilar .container .bt-1 {margin-top: 2rem;}


/**
* #BACKGROUNDS FULL-W
**/

.protesis-capilares {
	background-image: url(../img/protesis-capilares-barcelona-01.jpg);
}
.tratamientos-capilares {
	background-image: url(../img/tratamientos-capilares-barcelona.jpg);
}
.volumater {
	background-image: url(../img/volumater-barcelona.jpg);
}
.extensiones {
	background-image: url(../img/extensiones-barcelona.jpg);
}
.onco {
	background-image: url(../img/onco.jpg);
}
	
/**
* #GALERIA
**/
.galeria .container {
	padding: 8rem 2rem;
	text-align: center;
}
	.galeria .container .tit-1 {margin-bottom: 4rem;}
	.galeria .container img {
		display: inline-block;
		margin: 1%;
		width: 100%;
		max-width: 400px;
		border: solid 1rem #FFF;
		transition: all 600ms ease-in-out;
		box-shadow: 0 2px 30px rgba(0,0,0,0.1);
	}
	.galeria .container img:hover {
		box-shadow: 0 2px 40px rgba(0,0,0,0.3)
	}

/**
* #CITA
**/

.cita {

	padding: 4rem 2rem;
	text-align: center;
	line-height: 1.5;
	background: var(--groc)
}
	.cita li {
		font-size: 1.2rem;
		margin-bottom: 1rem;
	}
	.cita li:nth-child(1) {
		text-transform: uppercase;
		font-size: 2rem;
		font-weight: 700;
	}
	.cita li:last-child {
		text-transform: uppercase;
	}
		.cita li span {
			display: block;
			font-weight: 700;
		}

/**
* #SLOGAN
**/
.slogan {
	text-align: center;
	background: var(--gris);
	padding: 10% 2rem;
}
	.slogan p {
		text-transform: uppercase;
		line-height: 1.5;
		font-weight: 700;
		font-size: 2rem;
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
	}

/**
* #COLOFO
**/

.colofo {
	background-color: var(--groc);
	padding: 4rem 2rem;
	text-align: center;
}
	.colofo .container {
		width: 100%;
		max-width: 900px;
		margin: 0 auto;
	}
		.colofo .container .tit-1 {margin-bottom: 3rem}
		.colofo .container .tit-2 {margin-bottom: 1rem}
		.colofo .container p:nth-of-type(2) {
			line-height: 1.6;
			padding-bottom: 3rem
		}
		.colofo .container p:nth-of-type(3) {
			line-height: 1.6;
			padding-bottom: 2rem;
		}
			.colofo .container a span {
				font-size: 3rem;
				display: inline-block;
				color: var(--blanc);
			}


/**
* #FOOTER
**/

.site-footer {
	background-color: var(--negre);
	background-image: url(../img/logo-rueber-centro-capilar-barcelona.png);
	background-repeat: no-repeat;
	background-position: center 10px;
	color: var(--gris);
	text-align: center;
	padding: 4rem 2rem;
	font-size: 0.875rem;
	line-height: 1.5;
}
	.site-footer .col-2 ul {
		
	}
	.site-footer ul + .tit-2 {
		padding-top: 4rem
	}
	ul.social-foo li {
		display: inline-block;
	}
	
	.impressum {
		padding-top: 4rem;
	}






/**
* #MISC
**/

.break {
    display: block;
}
.skip {
    position: absolute;
    left: -10000em;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip:focus {
    position: static;
    width: auto;
    height: auto;
}

.bt-1 {
	text-decoration: none;
	display: inline-block;
	border: solid 2px;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
	padding: 0.8rem 1.5rem;
	letter-spacing: 1px;
}
.fosc {
	color: var(--negre);
	border-color: var(--negre)
}
.fosc:hover {
	color: var(--blanc);
	background: var(--negre)
}
.clar  {
	color: var(--blanc);
	border-color: var(--blanc);
}
.clar:hover {
	background: var(--blanc);
	color: var(--negre);
}

#mapa {
	width: 100%;
	height: 400px
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	z-index: 9999;
	background: var(--gris);
	transition: all 300ms linear;
	visibility: hidden;
	opacity: 0;
	overflow: hidden;
}
.modal.visible {
	visibility: visible;
	opacity: 1;
}
 .tancar {
 	position: absolute;
	right: 2rem;
	top: 2rem;
	font-size: 2rem;
	cursor: pointer;
 }
 	.container-modal {	
		padding: 4rem 2rem;
		height: 100%;
		overflow: scroll;
	}
 	.container-modal h5 {
		padding: 2rem 0;
		text-transform: uppercase;
	}
	.container-modal h6 {
		padding: 1rem 0;
	} 
	.pdf {display: inline-block;padding: 2rem 0}

	#ct-ultimate-gdpr-cookie-open {padding-bottom: 0!important;}