@charset "utf-8";
@import url("fontawesome-4.6.3.min.css");
@import url("framework.css");

/* Rows
--------------------------------------------------------------------------------------------------------------- */
.row0, .row0 a{}
.row1, .row1 a{}
.row2, .row2 a{}
.row3, .row3 a{}
.row4, .row4 a{}
.row5, .row5 a{}
.rowmenu, .rowmenu a{}


/* Top Bar
--------------------------------------------------------------------------------------------------------------- */
#topbar0{padding:4px 0;}
#topbar{padding:5px 0; font-size:.8rem; text-transform:none;}

#topbar *{margin:0;}
#topbar ul li{display:inline-block; margin-right:10px; padding-right:15px; border-right:1px solid;}
#topbar ul li:last-child{margin-right:0; padding-right:0; border-right:none;}
#topbar i{margin:0 5px 0 0; line-height:normal;text-transform:none;}


/* Header
--------------------------------------------------------------------------------------------------------------- */
#header{}

#header #logo{margin-top:10px;}
#header #logo *{margin:0; padding:0; line-height:1;}
#header #logo_img{width:110px; float:left; padding-bottom: 10px;}
#header #logo_txt {margin-top:15px;float:left;}
#header #logo h1{font-size:20px;text-transform: none; font-family:'Century Gothic', CenturyGothic,sans-serif; padding-top:10px;padding-left:18px; text-shadow: #8b7793 2px 2px 2px !important;}
#header #logo h4{font-size:20px;text-transform: none; font-family:'Century Gothic', CenturyGothic,sans-serif; padding-top:10px;padding-left:18px; text-shadow: #8b7793 2px 2px 2px !important;}
#header #logo h2{font-size:14px;text-transform:none; font-family:'Century Gothic', CenturyGothic,sans-serif;padding-top:10px;padding-left:18px;}
#header #logo .h2seccions{font-size:20px;text-transform: none; font-family:'Century Gothic', CenturyGothic,sans-serif; padding-top:10px;padding-left:18px; text-shadow: #8b7793 2px 2px 2px !important;}
#header #logo h3{font-size:11px;text-transform:none; font-family:'Century Gothic', CenturyGothic,sans-serif;padding-top:8px;padding-left:18px;}

/* Page Intro
--------------------------------------------------------------------------------------------------------------- */
#pageintro{padding:90px 0;}

#pageintro article *{text-transform:uppercase;}
#pageintro article .heading{margin:0 0 30px 0; padding:0; line-height:1.4; font-size:36px;text-shadow: #000000 2px 2px 2px !important;}
#pageintro article p:first-of-type{margin-bottom:20px; font-size:26px;}
#pageintro article footer{margin-top:60px;}
#pageintro article footer a{padding-bottom:5px; border-bottom:2px solid;}


/* Services
--------------------------------------------------------------------------------------------------------------- */
#services{position:relative;}

#services .table{}
#services .table-cell{margin-top:-1px; padding:3%; border:1px solid; border-top:none;}

#services article{text-align:center; font-family:'Century Gothic', CenturyGothic;}
#services article *{margin:0; line-height:1;}
#services article i{display:inline-block; width:50px; height:50px; line-height:48px; margin-top:8px; border:1px solid; text-align:center; font-size:24px;}
#services article .heading{margin-top:15px;margin-bottom:6px; font-size:1.1rem; font-family:'Century Gothic', CenturyGothic;text-transform: uppercase;}
#services article h2{margin-top:15px;margin-bottom:6px; font-size:1.1rem; line-height:1.3rem; font-family:'Century Gothic', CenturyGothic;text-transform: uppercase;}
#services article p{margin-bottom:10px; line-height:1.4;}
#services article footer a{font-size:10px;}

/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container{padding:60px 0;}

.container ul li{ padding-top: 4px;}


/* Content */
.container .content{}

.cta > li:last-child{margin-bottom:0;}/* Used when elements stack in small viewports */
.cta article{display:block; position:relative; min-height:80px; padding:0 0 0 70px;}
.cta article::before, .cta article::after{display:table; content:"";}
.cta article::after{clear:both;}
.cta article *{margin:0; line-height:1;}
.cta article i{display:block; position:absolute; top:0; left:0; width:50px; height:50px; line-height:48px; border:1px solid; border-radius: 25px; text-align:center; font-size:24px;}
.cta article .heading{margin-bottom:10px; font-size:1.2rem;}
.cta article p{margin-bottom:10px; line-height:1.4;}


#frame {margin: 0 auto; text-align: center; width:500px; height:370px; }
#framemaps {margin: 0 auto; width:99%; height:400px; display:block;}

/* Comments */
#comments ul{margin:0 0 40px 0; padding:0; list-style:none;}
#comments li{margin:0 0 10px 0; padding:15px;}
#comments .avatar{float:right; margin:0 0 10px 10px; padding:3px; border:1px solid;}
#comments address{font-weight:bold;}
#comments time{font-size:smaller;}
#comments .comcont{display:block; margin:0; padding:0;}
#comments .comcont p{margin:10px 5px 10px 0; padding:0;}

#comments form{display:block; width:100%;}
#comments input, #comments textarea{width:100%; padding:10px; border:1px solid;}
#comments textarea{overflow:auto;}
#comments div{margin-bottom:15px;}
#comments input[type="submit"], #comments input[type="reset"]{display:inline-block; width:auto; min-width:150px; margin:0; padding:8px 5px; cursor:pointer;}

#comments .contactar_select_psicos {width:180px; padding-top:10px; text-align: left;}
#comments .contactar_select_psicos label {padding:8px 0px 0px 30px; }

/* Sidebar */
.container .sidebar{}

.sidebar .sdb_holder{margin-bottom:50px;}
.sidebar .sdb_holder:last-child{margin-bottom:0;}


/* Pets - desplegable
--------------------------------------------------------------------------------------------------------------- */
.mypets{ /*header of 1st demo*/
cursor: pointer;
padding: 2px 5px;
background:  #f0f0f0;
border-bottom: 1px solid #e4e4e4;
color: #310b42;
font-weight:normal; 
font-family:calibri,sans-serif;
font-size: 14px; 
}

.openpet{ /*class added to contents of 1st demo when they are open*/
background: #f9f9f9;
border-bottom: 1px solid #999999;
font-weight: normal;
color: #000000;
}

.thepet{ /*class added to contents of 1st demo when they are open*/
padding-bottom: 15px;
}


/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{padding:20px 0 0px 0; text-align:center;  font-size: 12px;color:#dddddd;}

#footer .heading, #footer ul{margin-bottom:20px;}
#footer > ul:last-of-type{margin-bottom:20px;}
#footer .faico a{border-radius:50%;}

#footer p {-webkit-text-size-adjust:none; text-align: center;}

#footer #copyright{}
#footer #copyright *{margin:0; padding:0;}

#footer2 {padding:5px; text-align:center; line-height:15px; font-size: 9px;color:#888888;}
#footer2 p {-webkit-text-size-adjust:none; text-align: center;}
.footera p {padding:0px; margin: 0px;}

/* Transition Fade
--------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after{transition:all .3s ease-in-out;}
#mainav form *{transition:none !important;}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Navigation
--------------------------------------------------------------------------------------------------------------- */
nav ul, nav ol{margin:0; padding:0; list-style:none;}

#mainav, #breadcrumb, .sidebar nav{line-height:normal;}
#mainav .drop::after, #mainav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"FontAwesome"; font-size:10px; line-height:10px;}

/* Top Navigation */
#mainav{}
#mainav ul.clear{margin-top:0px;}
#mainav ul{text-transform:uppercase;}
#mainav ul ul{z-index:9999; position:absolute; width:210px;}
#mainav ul ul ul{left:180px; top:0;}
#mainav li{display:inline-block; position:relative; margin:0 15px 0 0; padding:0;}
#mainav li:last-child{margin-right:0;}
#mainav li li{width:100%; margin:0;}
#mainav li a{display:block; padding: 10px 0 10px 0;}
#mainav li li a{border:solid; border-width:0 0 1px 5px;}
#mainav .drop{padding-left:15px;}
#mainav li li a, #mainav li li .drop{display:block; margin:0; padding:10px 15px;}
#mainav .drop::after, #mainav li li .drop::after{content:"\f0d7"; color:#5e197c;} /* COLOR triangle desplegament*/
#mainav .drop::after{top:15px; left:5px;}
#mainav li li .drop::after{top:12px; left:5px;}
#mainav ul ul{visibility:hidden; opacity:0;text-transform:none;}
#mainav ul li:hover > ul{visibility:visible; opacity:1;}

#mainav form{display:none; margin:0; padding:0;}
#mainav form select, #mainav form select option{display:block; cursor:pointer; outline:none;}
#mainav form select{width:100%; padding:5px; border:none;}
#mainav form select option{margin:5px; padding:0; border:none;}

/* Breadcrumb */
#breadcrumb{padding:15px 0;}
#breadcrumb ul{margin:0; padding:0; list-style:none; text-transform:uppercase;}
#breadcrumb li{display:inline-block; margin:0 6px 0 0; padding:0;}
#breadcrumb li a{display:block; position:relative; margin:0; padding:0 12px 0 0; font-size:12px;}
#breadcrumb li a::after{top:3px; right:0; content:"\f101";}
#breadcrumb li:last-child a{margin:0; padding:0;}
#breadcrumb li:last-child a::after{display:none;}

/* Sidebar Navigation */
.sidebar nav{display:block; width:100%;}
.sidebar nav li{margin:0 0 3px 0; padding:0;}
.sidebar nav a{display:block; position:relative; margin:0; padding:5px 10px 5px 15px; text-decoration:none; border:solid; border-width:0 0 1px 0;}
.sidebar nav a::after{top:9px; left:5px; content:"\f101";}
.sidebar nav ul ul a{padding-left:35px;}
.sidebar nav ul ul a::after{left:25px;}
.sidebar nav ul ul ul a{padding-left:55px;}
.sidebar nav ul ul ul a::after{left:45px;}
.sidebar .segonivell a::after{content: "\f105";}
.sidebar .segonivell a:hover::after{content: "\f054";}

/* Pagination */
.pagination{display:block; width:100%; text-align:center; clear:both;}
.pagination li{display:inline-block; margin:0 2px 0 0;}
.pagination li:last-child{margin-right:0;}
.pagination a, .pagination strong{display:block; padding:8px 11px; border:1px solid; background-clip:padding-box; font-weight:normal;}

/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; font-size:16px; text-align:center; opacity:.2;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.5;}
#backtotop:hover{opacity:1;}


/* Tables
--------------------------------------------------------------------------------------------------------------- */
table, th, td{border:1px solid; border-collapse:collapse; vertical-align:top;}
table, th{table-layout:auto;}
table{width:100%; margin-bottom:15px;}
th, td{padding:5px 8px;}
td{border-width:0 1px;}


/* Gallery
--------------------------------------------------------------------------------------------------------------- */
#gallery{display:block; width:100%; margin-bottom:50px;}
#gallery figure figcaption{display:block; width:100%; clear:both;}
#gallery li{margin-bottom:30px;}


/* Font Awesome Social Icons
--------------------------------------------------------------------------------------------------------------- */
.faico{margin:0; padding:10px 0; list-style:none;}
.faico li{display:inline-block; margin:8px 5px 0 0; padding:0; line-height:normal;}
.faico li:last-child{margin-right:0;}
.faico a{display:inline-block; width:36px; height:36px; line-height:36px; font-size:18px; text-align:center;}

.faico a{color:#474747; background-color:#FFFFFF;}
.faico a:hover{color:#FFFFFF;}

.faicon-dribble:hover{background-color:#EA4C89;}
.faicon-facebook:hover{background-color:#3B5998;}
.faicon-google-plus:hover{background-color:#DB4A39;}
.faicon-linkedin:hover{background-color:#0E76A8;}
.faicon-twitter:hover{background-color:#00ACEE;}
.faicon-youtube:hover{background-color:#cc181e;}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Colours
--------------------------------------------------------------------------------------------------------------- */

/*  CANVI  	color:#5e197c; => color:#5e197c;
	&		color:#5e197c; => color:#39124a; desplegable fons */

body{color:#474747; background-color:#F7F7F7;}
a{color:#5e197c;}
a:active, a:focus{background:transparent;}/* IE10 + 11 Bugfix - prevents grey background */
a:hover{color:#5e197c;text-shadow: #888888 1px 1px 1px !important}

.sidebar .sdb_holder .contrashadow a{color:#5e197c;text-shadow: #888888 1px 1px 1px !important}
.sidebar .sdb_holder .contrashadow a:active, a:focus{background:transparent;}/* IE10 + 11 Bugfix - prevents grey background */
.sidebar .sdb_holder .contrashadow a:hover{color:black; text-shadow: #5e197c 1px 1px 1px !important}

.contactar a{color:RED;}
.contactar a:active, a:focus{background:transparent;color:#5e197c;text-shadow: #888888 1px 1px 1px !important}/* IE10 + 11 Bugfix - prevents grey background */
.contactar a:hover{color:#5e197c;text-shadow: #000000 1px 1px 1px !important}

hr, .borderedbox{border-color:#D7D7D7;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#5e197c;}
.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(0,0,0,.2);}

.der {text-transform: none; padding:0 0 2px 8px; border-left: 5px solid #657876; border-bottom: 1px solid #657876;
}

.btn, .btn.inverse:hover{color:#FFFFFF; background-color:#5e197c; border-color:#5e197c;}
.btn:hover, .btn.inverse{color:inherit; background-color:transparent; border-color:inherit;}

/* Rows */
.row00, .row00 a{color:#474747; background-color:#576da8;}
.row0, .row0 a{color:#474747; background-color:#F7F7F7;}
.row1{color:#474747; background-color:#FFFFFF;}
.rowmenu{color:#474747; background-color:#FFFFFF;}
.row2, .row2 a{}
.row3{color:#474747; background-color:#FFFFFF;}
.row4{color:#474747; background-color:#F7F7F7;}

/* Top Bar */
#topbar ul li{border-color:rgba(255,255,255,.2);}
#topbar > div:last-of-type li:first-child a{color:#5e197c;}

/* Header */
#header #logo h1 {color:#314441; background-color:inherit;}
#header #logo h4 {color:#314441; background-color:inherit;}
#header #logo h2 {color:#314441; background-color:inherit;}
#header #logo h3 {color:#777777; background-color:inherit;}


/* Page Intro */
#pageintro article footer a{color:inherit; border-color:inherit;}

/* Services */
#services .table-cell{border-color:#f0f0f0;}
#services article i{color:#474747; border-color:#D7D7D7;}
#services article:hover i{color:#FFFFFF; background-color:#536086; border-color:#536086;}


/* Content Area */
.cta article i{color:#5e197c; border-color:#D7D7D7;}
.cta article:hover i{color:#FFFFFF; background-color:#5e197c; border-color:#5e197c;}

/* Footer */
#footer #copyright a{color:#eeeeee; background-color:inherit;}
#footer #copyright a:hover{text-decoration: underline; background-color:inherit;}
.footera a{color:#eeeeee;}
.footera a:hover{color:#FFFFFF; text-decoration: underline; text-shadow: #000000 1px 1px 1px !important}
.footerproj a{color:#FFFFFF;}
.footerproj a:hover{text-decoration: underline}

/* Navigation */
#mainav li a{color:inherit;}
#mainav .active a > a{color:#5e197c; background-color:inherit;}
#mainav a:hover, #mainav li:hover > a{color:#5e197c; background-color:inherit;text-shadow: #657876 1px 1px 1px !important}   /* COLOR text TOP-menu when desplegat*/
/* #mainav li li a, #mainav .active li a{color:#000000; background-color:#ffffff; border-color:rgba(0,0,0,.6);}  /* COLOR desplegat no selected*/
#mainav li li a, #mainav .active li a{color:#ffffff; background-color:#3a4666; border-color:#aaaaaa #bbbbbb;}  /* COLOR desplegat no selected*/
/*#mainav li li:hover > a, #mainav .active .active > a{color:#FFFFFF; background-color:#39124a;}   COLOR desplegat selected*/
#mainav li li:hover > a, #mainav .active .active > a{color:#222222; background-color:#ffffff;}  /* COLOR desplegat selected*/
#mainav form select{color:#FFFFFF; background-color:#413E3D;}

#breadcrumb a{color:inherit; background-color:inherit;}
#breadcrumb li:last-child a{color:#5e197c;}

.container .sidebar nav a{color:inherit; border-color:#D7D7D7;}
.container .sidebar nav a:hover{color:#5e197c;text-shadow: #888888 1px 1px 1px !important}

.container .contrashadowMIG a{color:#5e197c;text-shadow: #888888 1px 1px 1px !important; text-decoration: underline;}
.container .contrashadowMIG a:active, a:focus{background:transparent;}/* IE10 + 11 Bugfix - prevents grey background */
.container .contrashadowMIG a:hover{color:black; text-shadow: #5e197c 1px 1px 1px !important; text-decoration: underline;}

.pagination a, .pagination strong{border-color:#D7D7D7;}
.pagination .current *{color:#FFFFFF; background-color:#5e197c;}

#backtotop{color:#FFFFFF; background-color:#5e197c;}


/* Tables + Comments */
table, th, td, #comments .avatar, #comments input, #comments textarea{border-color:#D7D7D7;}
#comments input:focus, #comments textarea:focus, #comments *:required:focus{border-color:RED;}
th{color:#FFFFFF; background-color:#373737;}
tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#FBFBFB;}
tr:nth-child(even), #comments li:nth-child(even){color:inherit; background-color:#F7F7F7;}
table a, #comments a{background-color:inherit;}

.divpresencial {float: left;}
.divpresencial img {}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1001px){
	.hoc{max-width:978px;}
}

@media screen and (max-width:1000px){
	.hoc{max-width:95%;}
}

/* Mobile Devices
	900 - 900 - 900
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:900px){
	.hoc{max-width:93%;}

	#topbar{}
	#header{padding:15px 0;}
	#header #logo{margin-top:5px;}
	#header #logo_img{padding-bottom: 5px;}
	#header #logo_txt {margin-top:5px; margin-left:10px;}

	#mainav{}
	#mainav ul{display:none;}
	#mainav form{display:block; margin-top:5px;}

	#breadcrumb{}

#pageintro{padding:70px 0;}
#pageintro article .heading{padding:0; line-height:1.3; font-size:32px;}
#pageintro article p:first-of-type{margin-bottom:10px; font-size:24px;}
#pageintro article footer{margin-top:40px;}

.table-cell .heading{padding:0; line-height:1.2; font-size:20px;}
article .imgpsics {width: 90%;}

	.container{}
	#comments input[type="reset"]{margin-top:10px;}
	.pagination li{display:inline-block; margin:0 5px 5px 0;}

	#footer{}

.divpresencial {float: none;clear: left;}
}

/* 750 - 750 -750
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:750px){
	.imgl, .imgr{display:block; float:none; margin:auto; text-align: center}
	.fl_left, .fl_right{display:block; float:none;}
	.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	#topbar{text-align:center;}

	#header{padding:15px 0;}
	#header #logo{margin:0 0 0px 0; padding-top: 0px; }
	#header #logo_img{padding-bottom: 0px;}
	#header #logo_txt {margin-top:5px; margin-left:10px;}
	
	#mainav form{margin-top:0;}

#pageintro{padding:70px 0;}
#pageintro article .heading{padding:0; line-height:1.3; font-size:32px;}
#pageintro article p:first-of-type{margin-bottom:10px; font-size:24px;}
#pageintro article footer{margin-top:40px;}

.table-cell .heading{padding:0; line-height:1.2; font-size:18px;}

	#services .table, #services .table-row, #services .table-cell{display:block; width:100%;}
	#services .table-cell{padding:5%;}
	
article .imgpsics {width: 80%;}

}

/* 650 - 650 -650
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.4rem;}
	.font-x3{font-size:1.6rem;}
	
	#header #logo_txt {margin-top:5px; margin-left:5px;}
	#header #logo h1{font-size:18px; font-variant:small-caps; font-family:'Century Gothic', CenturyGothic; padding-top:10px;padding-left:12px; }
	#header #logo h4{font-size:18px; font-variant:small-caps; font-family:'Century Gothic', CenturyGothic; padding-top:10px;padding-left:12px; }
	#header #logo h2{font-size:12px;text-transform:none; font-family:'Century Gothic', CenturyGothic;padding-top:8px;padding-left:12px;}
	#header #logo h3{font-size:9px;text-transform:none; font-family:'Century Gothic', CenturyGothic;padding-top:5px;padding-left:12px;}
	#frame {width:400px; height:300px; }
	
	.table-cell .heading{padding:0; line-height:1.2; font-size:16px;}
}

/* 450 - 450 -450
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:450px){

	#logo_img{margin:0 auto; padding:0px; text-align: center;}
	#header #logo_img{padding-bottom: 10px; width: 90px;}
	#header #logo_txt {margin-top:5px; margin-left:0px;  text-align: center;}
	#header #logo h1{font-size:16px; padding-top:10px;padding-left:12px; }
	#header #logo h4{font-size:16px; padding-top:10px;padding-left:12px; }
	#header #logo h2{font-size:10px;padding-top:8px;padding-left:12px;}
	#header #logo h3{font-size:8px;padding-top:5px;padding-left:12px;}

#mainav{font-size: 11px;font-family: arial;}

#pageintro{padding:50px 0;}
#pageintro article .heading{padding:0; line-height:1.3; font-size:22px;}
#pageintro article p:first-of-type{margin-bottom:10px; font-size:16px;}
#pageintro article a{font-size:12px;}
#pageintro article footer{margin-top:40px;}

.table-cell .heading{padding:0; line-height:1.2; font-size:14px;}
.table-cell p{margin-bottom:10px; font-size:12px;}

article .imgpsics {width: 70%;}
article .imgpsiqs {width: 80%;}

.container{padding:40px 0;}
h1{font-size:18px;}
h4{font-size:18px;}
#frame {width:300px; height:225px; }
.one_quarter p {display: block;text-align: center;}
}