/*
Theme Name: POLCOMELLA
Theme URI: www.polcomella.com
Author: David Oliveras
Version: 2013
*/

/******************************************
*   HEADER                     
******************************************/
* {margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); }
:focus, * {outline: none;}
input, textarea, select {-webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; filter: none;}
select::-ms-expand {display: none;}
button::-moz-focus-inner {border: 0;}
html {font-size: 100%;  -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body {background-color: #fff; font-family: 'Archivo Narrow', sans-serif; font-weight: 400; font-size: 20px; text-align: justify; color: #000; line-height: 28px; background-image: url(images/fons.jpg); background-position: top center; background-repeat: no-repeat; background-attachment: fixed; padding-top: 50px; padding-bottom: 55px; overflow-x: hidden;}
body img {border: 0px;}
p {margin-bottom: 15px;}
a:link {color: #4e6a90; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: All 0.3s ease;}
a:visited {color: #4e6a90; text-decoration: none;}
a:active {color: #4e6a90; text-decoration: none; background-color: transparent;}
a:hover {color: #4e6a90; text-decoration: none;}
h1 {font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 34px; line-height: 34px; text-align: center; text-transform: uppercase; margin-bottom: 45px;}
#post9 h1 br {display: none;}
h1 + h2 {margin-top: -5px;}
p + h1 {padding-top: 25px;}
p + h2 {padding-top: 25px;}
p > iframe {padding-top: 15px;}
h1 span {font-size: 24px; display: block; text-transform: uppercase; padding-top: 10px;}
h2 {font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 24px; line-height: 34px; margin-bottom: 10px;}
h3 {font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 20px; color: #000; line-height: 21px; margin-bottom: 40px;}

/* CLEAR FIX */
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }

/* HEADER */
header {width: auto; height: inherit; position: relative; text-align: center;}
.logo {color: #000 !important; font-size: 40px; text-transform: uppercase; text-decoration: none !important; font-family: 'Oswald', sans-serif; font-weight: 300;}
.logo img {display: inline-block; vertical-align: middle; width: 50px; height: 50px; padding: 0; margin-top: -7px;}

/* MENU */
.menusuperior {width: auto; display: flex; margin: 40px 0 45px 0;}
.menusuperior ul {width: auto; margin: 0 auto; letter-spacing: 0px; word-spacing: 0px; font-size: 0px;}
.menusuperior ul li {list-style: none;	font-size: 20px; text-transform: uppercase; display: inline-block;}
.menusuperior ul li a {display: block; padding-top: 8px; padding-bottom: 8px; padding-left: 10px; padding-right: 10px; border-top: 1px solid #a4a4a4; cursor: pointer; border-bottom: 1px solid #a4a4a4; font-family: 'Oswald', sans-serif; font-weight: 300;}
.menusuperior ul li a:hover {text-decoration: none; border-top: 1px solid #4e6a90; border-bottom: 1px solid #4e6a90;}
.menusuperior .current_page_item a, .menusuperior .current-page-ancestor a, .menusuperior .current-menu-item a {text-decoration: none; border-top: 1px solid #4e6a90; border-bottom: 1px solid #4e6a90;}

/** Submenu **/ 
.menusuperior li ul {display:none; overflow: hidden;}
.menusuperior li:hover ul {display:none;}
	
/******************************************
*   CONTINGUT                     
******************************************/
#page {width: 680px; padding-left: 10px; padding-right: 10px; margin-left: auto; margin-right: auto; background: rgb(255, 255, 255); background: rgba(255, 255, 255, .6); padding-top: 5px; box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.6); }
.foto {width: 700px; margin-left: -10px; position: relative; margin-bottom: 45px;}
.foto article {width: 462px; font-size: 20px; animation: fadein 2s; -moz-animation: fadein 2s; -webkit-animation: fadein 2s; -o-animation: fadein 2s; margin-left: auto; margin-right: auto;}
.foto2 {width: 700px; height: 280px; margin-left: -10px; position: relative; margin-bottom: 48px; padding-top: 5px;}
.video {width: 700px; height: 390px; margin-left: -10px; position: relative; margin-bottom: 48px;}
.video video {position: absolute; top: 0; left: 0; object-fit: cover; object-position: center; width: 100%; height: 100%; border-radius: 3px;}
.foto img, .foto2 img, .foto2 iframe {border-radius: 3px;}

.navigation .alignleft {width: 300px; float: left;}
.navigation .alignright {width: 300px; float: right;}
.aligncenter, div.aligncenter {display: block !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; padding-top: 10px !important;}
.alignleft, div.alignleft {float: left; width: auto; margin-right: 20px; margin-bottom: 10px; margin-top: 5px; text-align: left;}
.alignright, div.alignright {float: right; width: auto;	margin-left: 20px; margin-bottom: 10px;	margin-top: 5px; text-align: right;}

/******************************************
*   LLISTAT TERAPIAS                        
******************************************/
.terapias .terapias_content {margin-right: -20px; margin-bottom: -15px; overflow: hidden;}
.terapias h3 {font-size: 24px; text-align: center; text-transform: uppercase;}
.terapias article {float: left; width: 330px; margin-right: 20px; margin-bottom: 20px;}
.terapias article:nth-child(2n+1) {clear: both;}
.terapias figure {position: relative; overflow: hidden; margin-bottom: 10px; width: 100%; height: 120px; display: block;}
.terapias img {margin-bottom: 10px; border-radius: 3px; object-fit: cover; background-position: center; width: 100%; height: 100%; transform-origin: center; transition: transform 0.4s ease-in-out;}
.terapias article h2 {position: absolute; top: calc(100% - 21.5px); left: 50%; transform: translate(-50%, -50%); width: max-content; text-align: center; background-color: #fff; background-color:rgba(255, 255, 255, 0.8); padding: 5px;  border-radius: 3px 3px 0 0; transition: All 0.3s ease;}
.terapias article a {color: #000;}
.terapias article a:hover {text-decoration: none;}
.terapias article p {line-height: 22px; text-align: left; font-size: 18px; margin-bottom: 0; padding: 0 5px;}
.terapias {animation: fadein 2s; -moz-animation: fadein 2s; -webkit-animation: fadein 2s; -o-animation: fadein 2s;}
.terapias article a:hover h2, .terapias article a:focus h2 {background-color:rgba(255, 255, 255, 1);}
.terapias article a:hover img, .terapias article a:focus img {transform: scale(1.1);}

/******************************************
*   DETALL                        
******************************************/
.post {animation: fadein 2s;}
.post2 {animation: fadein 2s; margin-bottom: -15px;}
.post h2, .post2 h2 {margin-bottom: 20px;}
.post ul, .post2 ul {margin: 25px 30px 30px 30px; width: auto;}
.post li, .post2 li {margin-bottom: 10px; list-style: none;}
.post li:before, .post2 li:before {content: "• "; color: #4e6a90; font-weight: bold; font-size: 20px; padding-right: 5px; margin-left: -15px;}
.myButton {margin-bottom: 50px; margin-top: 20px; text-transform: uppercase; box-shadow:inset 0px 1px 0px 0px #5f82b0; background:linear-gradient(to bottom, #4e6990 5%, #5d82b3 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e6990', endColorstr='#5d82b3',GradientType=0); background-color:#4e6990; border-radius:3px; border:1px solid #124d77; display:inline-block; color:#FFF !important; font-size:20px; font-weight:normal; padding:6px 24px; text-decoration:none; text-shadow:0px 1px 0px #4e6990;}
.myButton:hover {background:linear-gradient(to bottom, #5d82b3 5%, #4e6990 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5d82b3', endColorstr='#4e6990',GradientType=0); background-color:#5d82b3; text-decoration: none;}
#post9 {margin-bottom: -15px !important;}
#post9 h2 {text-transform: uppercase;}

/** FORMULARI **/
.wpcf7 {margin: 1.5em auto 20px auto; width: 75%; text-align: center;}
.wpcf7 p:last-child {margin-bottom: 0;}
.wpcf7 input {font-family: 'Archivo Narrow', sans-serif; font-size: 1em; width: calc(100% - 1.1em); border: 1px solid #000; background-color: transparent; margin-top: 1em; padding: 0.5em; margin-bottom: 1em; transition: All 0.3s ease; border-radius: 3px;}
.wpcf7 textarea {font-family: 'Archivo Narrow', sans-serif; font-size: 1em; width: calc(100% - 1.1em); height: 10em; border: 1px solid #000; overflow: auto; background-color: transparent; margin-top: 1em; padding: 0.5em; margin-bottom: 1em; transition: All 0.3s ease; resize: none; border-radius: 3px;}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {-webkit-text-fill-color: inherit !important; -webkit-box-shadow: 0 0 0 0 transparent inset; transition: background-color 5000s ease-in-out 0s;}
span.wpcf7-list-item {margin: 0 0 0 0 !important;}
.wpcf7 input[type="checkbox"] {appearance: none; line-height: inherit; width: 18px !important; height: 18px !important; margin-top: -3px; margin-bottom: 0px; padding: 0px; margin-right: 10px; float: inherit; display: inline-block; vertical-align: middle; background-color: transparent !important; border: 1px solid #000 !important;}
.wpcf7 input[type="checkbox"]:checked {background: url(images/check.svg) no-repeat; background-size: cover;}
.wpcf7-form-control-wrap + span {font-size: 1em;}
.wpcf7-form ul {margin: 0 2.3em !important; text-align: left;}
.wpcf7-form li {font-size: 14px; line-height: 16px; color: #333;}
.wpcf7 input[type="submit"] {width: auto; cursor: pointer; margin-bottom: 0; margin-top: 35px; margin-left: 3.5em; text-transform: uppercase; box-shadow:inset 0px 1px 0px 0px #5f82b0; background:linear-gradient(to bottom, #4e6990 5%, #5d82b3 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e6990', endColorstr='#5d82b3',GradientType=0); background-color:#4e6990; border-radius:3px; border:1px solid #124d77; display:inline-block; color:#FFF !important; font-size:20px; font-weight:normal; padding: 6px 24px; text-decoration:none; text-shadow:0px 1px 0px #4e6990;}
.wpcf7 input[type="submit"]:hover {background:linear-gradient(to bottom, #5d82b3 5%, #4e6990 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5d82b3', endColorstr='#4e6990',GradientType=0); background-color:#5d82b3; text-decoration: none;}
.wpcf7 .wpcf7-submit:disabled {opacity: 0.5;}
.wpcf7 .wpcf7-submit:disabled:hover {box-shadow:inset 0px 1px 0px 0px #5f82b0; background:linear-gradient(to bottom, #4e6990 5%, #5d82b3 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e6990', endColorstr='#5d82b3',GradientType=0); background-color:#4e6990; border-radius:3px; border:1px solid #124d77; display:inline-block; color:#FFF !important; font-size:20px; font-weight:normal; padding: 6px 24px; text-decoration:none; text-shadow:0px 1px 0px #4e6990;}
.wpcf7 .wpcf7-spinner {top: 4px !important; background-color: #4e6990 !important; opacity: 1 !important;}
.wpcf7-not-valid-tip {display: none !important;}
.wpcf7-response-output {width: 75%; margin: 2.1em auto 0.8em auto !important; padding: 1em !important; border-radius: 3px;}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {border: 1px solid #e54461 !important; background-color: #e54461; color: #fff;}
.wpcf7 form.sent .wpcf7-response-output {border: 1px solid #4e6a90 !important; background-color: #4e6a90 !important; color: #fff;}
.acceptar {text-align: left !important;}
.wpcf7 .cf-turnstile {margin: 40px auto 0 auto !important; max-width: 422px !important;}

/******************************************
*  FOOTER                       
******************************************/
footer {width: 100%; padding-top: 20px; margin-top: 60px; overflow: hidden; color: #686868; font-size: 20px; font-family: 'Oswald', sans-serif; font-weight: 300; position: relative;}
footer a:link {color: #686868;}
.footer_info {float: left; width: auto; margin-top: -1px;}
.mail {padding-bottom: 10px; display: block;}
.privacitat {float: right; width: auto; line-height: 14px; font-size: 14px; font-family: 'Archivo Narrow', sans-serif; font-weight: 400; margin-top: 20px; color: #333;}
.privacitat a {color: #333;}
.copy {font-size: 0px; width: 0px; height: 0px; overflow: hidden; display: none;}

/** menu **/ 
.menuinferior ul {float: right; width: auto; line-height: 16px; margin-right: -10px; padding-top: 5px;}
.menuinferior ul li {list-style: none; font-size: 18px; text-transform: uppercase; display: inline-block;}
.menuinferior ul li:first-child:before {content: ""; color: #686868; font-size: 20px; padding-right: 5px !important;}
.menuinferior ul li:before {content: "• "; color: #686868; font-size: 20px; padding-right: 5px !important;}
.menuinferior ul li a {padding-left: 5px !important; padding-right: 10px !important; cursor: pointer; color: #686868 !important;}	
.menuinferior ul li a:hover {text-decoration: none;}
.menuinferior li:hover ul {display:none;}

/******************************************
*   MOBIL                
******************************************/	
@media only screen and (max-width: 720px) {
body {padding-top: 0px; padding-bottom: 0; text-align: inherit;}
h1 {font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 30px; line-height: 40px; text-align: center; text-transform: uppercase; margin-bottom: 40px;}
#post9 h1 br {display: block;}
p + h1 {padding-top: 30px;}
p + h2 {padding-top: 30px;}
.post {padding-bottom: 0px; margin-bottom: 0px;}
.post2 {padding-bottom: 0px; margin-bottom: 35px;}
.post h2, .post2 h2 {margin-bottom: 15px;}
.post li, .post2 li {margin-bottom: 10px;}
h3 {font-size: 18px;}
header {width: calc(100% + 40px); margin-bottom: 10px; margin-left: -20px;}
header h3  {padding-top: 20px; margin-bottom: 35px;}
#page {width: auto; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; background: rgb(255, 255, 255); background: rgba(255, 255, 255, .8); padding-top: 5px; box-shadow: 0px 0px 0px 0px}
.foto {width: auto; height: auto; background-image: none !important; margin-left: 0px; position: relative; margin-bottom: 35px; overflow: hidden; text-align: left;}
.foto article {width: auto; position: relative; top: inherit; left: inherit; margin-bottom: 5px;}
.foto2 {width: calc(100% + 40px); height: auto; margin-left: -20px; position: relative; margin-bottom: 35px;}
.foto2 img {width: 100%; height: auto; border-radius: 0;}
.video {width: calc(100% + 40px); height: 188px; margin-left: -20px; margin-bottom: 50px; margin-top: 40px;}
.video video {border-radius: 0;}
iframe {max-width: 100% !important; height: auto !important; width: 100% !important; min-width: 100% !important;}
.menusuperior {width: calc(100% + 40px); position: sticky; top: 0; z-index: 1000; margin: 40px auto 45px auto; margin: 0 0 30px -20px; transition: All 0.3s ease;}
.menusuperior ul {width: 100%; text-align: center; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; scrollbar-width: none;}
.menusuperior::-webkit-scrollbar {display: none;}
.menusuperior ul li {list-style: none; font-size: 16px; text-align: center !important;}
.menusuperior ul li:before {content: "•"; font-size: 16px; color: #4e6a90;}
.menusuperior ul li:nth-child(2):before {content: ""; margin-left: 0;}
.menusuperior.shrink {background-color: rgba(78, 106, 144, 0.9); box-shadow: 0 6px 6px -6px #4e6a90; padding-bottom: 1px;}
.menusuperior.shrink ul li a {color: #fff; border: 0 !important;}
.menusuperior.shrink ul li:before {color: #fff;}
.menusuperior ul li a {border: 0; font-weight: 400; display: inline-block;}
.menusuperior ul li a:hover {border: 0;}
.menusuperior .current_page_item a, .menusuperior .current-page-ancestor a, .menusuperior .current-menu-item a {border: 0;}
.menuinici {display: none !important;}
.wpcf7 {width: 100%; margin-bottom: 40px;}
.wpcf7-response-output {width: calc(100% - 2.2em);}

/******************************************
*   LLISTAT TERAPIAS                        
******************************************/
.terapias .terapias_content {margin-right: 0px; margin-bottom: 0;}
.terapias article {width: auto; margin-right: 0px; height: auto;}
.terapias article:last-child {margin-bottom: 20px !important}

/******************************************
*  FOOTER                       
******************************************/
footer {width: calc(100% + 40px); padding: 30px 0; margin-top: 60px; margin-left: -20px; color: #686868; font-size: 20px; font-family: 'Oswald', sans-serif; font-weight: 300; text-align: center; background-color: #e7edf1;}
footer a:link {color: #686868;}
.menuinferior ul {float: inherit; margin-right: 0; padding-top: 20px;}
.menuinferior ul li {font-size: 16px;}
.menuinferior ul li:nth-child(2):before {content: "";}
.menuinferior ul li:before {font-size: 16px; padding-right: 2px !important;}
.menuinferior ul li a {padding-left: 5px !important; padding-right: 5px !important;}		
.footer_info {float: inherit; width: auto; line-height: 20px;}
.mail {padding-bottom: 10px; clear: both; display: block;}
.privacitat {float: none; width: auto; margin-top: 22px; text-align: center;}
}

/******************************************
*  ANIMACIO                       
******************************************/
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}