@charset "utf-8";
/* CSS Document */

* {padding: 0; margin: 0; border-collapse:collapse;}
/* {border: solid 1px pink;} */

/*============================================== Definició de FONTS */
@font-face {
  font-family: 'Charlevoix_t';
  font-style: normal;
  src: url('fonts/CharlevoixPro-Thin.woff2') format('woff2'), url('fonts/CharlevoixPro-Thin.woff') format('woff'),url('fonts/CharlevoixPro-Thin.otf') format('otf'), url('fonts/CharlevoixPro-Thin.eot') format('eot');}

@font-face {
  font-family: 'Charlevoix_r';
  font-style: normal;
  src: url('fonts/CharlevoixPro-Regular.woff2') format('woff2'), url('fonts/CharlevoixPro-Regular.woff') format('woff'), url('fonts/CharlevoixPro-Regular.otf') format('otf'), url('fonts/CharlevoixPro-Regular.eot') format('eot');}

@font-face {
  font-family: 'Charlevoix_b';
  font-style: bold;
  src: url('fonts/CharlevoixPro-Bold.woff2') format('woff2'), url('fonts/CharlevoixPro-Bold.woff') format('woff'), url('fonts/CharlevoixPro-Bold.otf') format('otf'), url('fonts/CharlevoixPro-Bold.eot') format('eot');}

/*============================================== Definició de l'ESTRUCTURA */
body {font-family: Charlevoix_r; color: #727176; background-image:url(imatges/fons.jpg); background-repeat:repeat;}
.principal {width: 1200px; margin: 0 auto; background-color: #white; box-shadow: 0px 0px 50px 10px rgba(64,64,64,0.9);}
.cap {width: 100%;}
.cos {width: 100%; background-color: white;  padding-bottom: 50px;}
.logo_rb {float:left; width: 387px; height: 664px; 
		background-image: url('imatges/logo_web_rbestilistes.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center center;}
.logo_trans {display:none;}
.cap_imatge {float:right; width: 813px; height: 664px;
		background-image: url('imatges/fons_cap.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center center;}
.sota_logo_rb{float:left; width: 387px; height: 371px; 
		background-image: url('imatges/sota_logo_web_rbestilistes.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center center;}
.cap_text {float:right; width: 743px; height: 371px; background-color: white; padding-right:70px;} /* 813-70=743*/
.lema {width: 100%; height: 352px; clear:both; text-align:center;
		background-repeat:no-repeat; background-size:cover; background-position: center center;}
.areas, .contacte  {clear:both; padding: 30px 20px 0;} /* adaptació per poder fer el responsive*/
.peu {color:black; font-size:0.8em;}
.peu a {text-decoration:none; color:black}

/*============================================== Definició estils GENERALS */
h1 {color: #efa891; font-family: Charlevoix_b; font-size:1.8em; font-weight:normal; margin: 25px 0 40px;}
h2 {display:inline; font-size:2.5em; font-weight:normal; color: black;}
h3 {color: #efa891; font-family: Charlevoix_b; font-size:1em; font-weight:normal; margin-bottom:5px;}
h4 {color: #efa891; font-family: Charlevoix_t; font-size: 2em; font-weight:normal;}

p {text-align:justify; line-height:1.6em;}

.tema p {text-align:left;}
.cap_text p {font-size:1.25em; margin: 15px 0 25px;}
.sub_text_principal {text-align:right; font-family: Charlevoix_b; color: black; }
.caixa_lema {display:inline-block; margin: 160px auto 0; text-align:right;}
.lema p {display:inline; font-size:1.8em; font-family: Charlevoix_t; color: black; line-height:1em;}
hr {height: 5px; background:url('imatges/punt.png') repeat left; border: none; margin: 15px 55px;}

.contacte a {text-decoration:none; color: #727176;}
a.enllac_contacte {text-decoration:none; color: white;}

td {vertical-align: top;}

.tema {float:left; width:313px; margin-left:55px;} /* adaptació per poder fer el responsive*/
.tema_txt {width:100%; height:150px; margin: 0; overflow:hidden;}
.tema_img {width:100%; height:318px; margin: 0;
				background-repeat:no-repeat; background-size:cover; background-position: center left;}
.contacte h4 {margin: 0 55px;}

/*============================================== Definició estils SLADE IMATGES */
.caixa_imatge {width: 671px; padding: 80px 70px 50px; text-align:right;}
.slade_img {height: 456px; margin: 5px 0 20px; overflow:hidden;}
.slade_botons {width: 671px; overflow:hidden;}
.slade_botons > img:hover {cursor:pointer;}
.slade_botons > img {margin-top: 5px;}
.slade_txt {width: 645px; height: 22px; overflow:hidden;}
.myImg {float:left; width: 0px; height: 456px; background-repeat:no-repeat;
		-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
		transition: width 2s;}
.myTxt {float:left; width:0px; overflow:hidden;}
.myTxt p {width: 100%; text-align:center; color: white;}
.slade_botons td {vertical-align: middle;}

@media only screen and (max-width: 480px) {
/*========================= Definició de l'ESTRUCTURA a 480*/
.principal {width: 100%; margin: 0 auto; box-shadow: none;}	
.logo_rb {float:left; width: 100%; height: 190px; 
		background-image: url('imatges/cap_sepia.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center center;}
.logo_trans {display:block; margin: 2% auto; height:90%; width: 90%;
		background-image: url('imatges/logoRB_trans.png'); background-repeat:no-repeat; background-size:contain; background-position: center center;}
.cap_imatge {float:left; width: 100%; height: 450px;}
.sota_logo_rb {display: none;}

p {text-align:left; line-height:1.6em;}
.peu {margin-left: 3%;}

.cap_text {float:right; width: 90%; height: auto; padding: 10px 5%;}
.sub_text_principal {text-align:left;}
.lema {width: 100%; height: 275px;}

.areas, .contacte  {clear:both; padding: 20px 0;} /* adaptació per poder fer el responsive*/

/*========================== Definició estils GENERALS a 480*/
.enllac_contacte {margin-right: 4%;}
h1 {font-size:1.35em; margin: 20px 0 25px;}
h2 {font-size:1.5em;}
h3 {font-size:1.2em;}
h4 {font-size:1.4em;}
.cap_text p {font-size:1.15em; margin: 15px 0;}
p.sub_text_principal {font-size: 1.20em}
.lema {display: table-cell; vertical-align:middle;}
.caixa_lema {margin: auto; text-align:center;}
.lema p {font-size:1.5em;}

.tema {float:left; width:90%; margin:15px 5%;} /* adaptació per poder fer el responsive*/
.tema_txt {width:100%; height:auto; margin: 0; padding-bottom:20px;}
.tema_img {width:100%; height:318px; margin: 0; background-size:cover;}
.contacte h4 {margin: 0 5%;}
hr {margin: 10px 5%;}

/*======================== Definició estils SLADE IMATGES a 460*/
.caixa_imatge {width: 100%; padding: 10px 0;}
.slade_img {width: 100%; height: 300px ; margin: 5px 0 20px; }
.slade_botons {width: 100%; overflow:hidden;}
.slade_botons img:hover {cursor:pointer;}
#f_e {margin: 5px 0 5px 10px;}
#f_d {margin: 5px 10px 5px 0;}
.slade_txt {height: 44px; overflow:hidden;}

.myImg {height: 240px; background-size:cover;}
.myTxt {}

.myTxt p {width: 86%; text-align:center; color: white; padding: 0 7%; line-height:1.4em; font-size:1.1em}

}
@media only screen and (max-width: 360px) {
.myTxt p {width: 88%; padding: 0 6%; font-size:0.85em}
h1 {font-size:1.1em;}
.cap_text p {font-size:1em; margin: 15px 0;}
p.sub_text_principal {font-size: 1.1em}
}