@import url('https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css');

@font-face {
    font-family: 'Coloplast';
    src: url('../fonts/Coloplast.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Coloplast.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/Coloplast.woff') format('woff'), /* Modern Browsers */
         url('../fonts/Coloplast.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/Coloplast.svg#Coloplast') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Coloplast';
    src: url('../fonts/Coloplast-Bold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Coloplast-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/Coloplast-Bold.woff') format('woff'), /* Modern Browsers */
         url('../fonts/Coloplast-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/Coloplast-Bold.svg#Coloplast-Bold') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}



/*<i class="fi fi-rr-menu-burger"></i>*/
:root {
    --lightgrey: #EDEDED;
    --darkgrey: #213D46;
    --blueplast: #26A2B7;
}

body, #app {
    font-family: 'Coloplast', sans-serif;
}

h1, h2, h3, h4 {
    font-family: 'Coloplast', sans-serif;
    color: #213d46;
}

h1 {
    font-size: 4.5rem;
}

h2 {
    font-size: 3.5rem;
}

h3 {
    font-size: 32px;
    margin-bottom: 20px!important;
}

h4 {
    font-size: 2rem;
}

/* Compliment Bootstrap */
.mh-100vh {
    min-height: 100vh;
}

.h-100vh {
    height: 100vh;
}

.mw-500 {
    max-width: 500px;
    margin: 0 auto;
}

.coloplast header .content .title {
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
}

.coloplast header .content .title span {
    font-size: 3rem;
    text-align: center;
    color: var(--darkgrey);
    font-family: 'Coloplast', sans-serif;
    font-weight: 600!important;
    display: block;
}

.coloplast header .content .title > span:last-child {
	font-weight: 100!important;
	margin-top: -10px;
}

.more-visited h3, .last-cases h3, .banner .content .texts h3 {
	font-size: 32px;
}

.coloplast nav#main_navigation {
    background: transparent;
    margin-bottom: -9vh;
    box-shadow: none;
    backdrop-filter: none;
}

.coloplast.solid-header nav#main_navigation {
    background: #fff;
    margin-bottom: 0;
}

/* Menu opened by label */
.coloplast #menu {
    position: fixed;
    right: -100%;
    background: #fff;
    flex-direction: column;
    height: 100vh;
    top: 0;
    gap: 30px;
    align-items: flex-start;
    padding: 40px 20px;
    transition: .3s right;
    display: flex;
    text-align: left;
}

.coloplast #open-menu {
    display: none;
}

.coloplast #open-menu:checked + #menu {
    right: 0;
}

.coloplast #menu .child {
    display: none;
}

.coloplast #menu .close {
    text-align: right;
    display: block;
    width: 100%;
    align-items: flex-end;
}

.coloplast #menu .close label {
    cursor: pointer;
    color: var(--darkgrey);
    font-size: 18px;
}

.coloplast #menu li {
    text-align: left;
}

.coloplast label[for="open-menu"] {
    cursor: pointer;
    font-size: 36px;
    color: #fff;
}

.coloplast.solid-header label[for="open-menu"] {
    color: #000;
}

.coloplast label[for="open-menu"] i {
    display: flex;
}

.coloplast #search-section .search {
    padding: 5px!important;
    background: white!important;
    border-radius: 32px;
}

.coloplast #search-section .search input#search {
    background: transparent;
    border: 0;
    color: var(--blueplast)!important;
    text-align: center;
    padding-top:15px;
    font-family: 'Coloplast';
}

.coloplast #search-section .search input#search + label {
    color: #fff!important;
    text-align: center;
    display: block;
    width: 100%;
    font-weight: 300;
    transition: .3s opacity;
    opacity: 1;
}

.coloplast #search-section .search .button {
    border-radius: 32px;
    background: var(--blueplast)!important;
    color: white;
}

.coloplast #search-section .search .input {
}

.coloplast #search-section .search .button .p-button-label {
    font-size: 18px!important;
    font-weight: 400;
}

.coloplast #search-section .search input#search::placeholder {
    color: var(--blueplast)!important
    display: block;
    opacity: 1;
    text-align: center;
    font-size: 18px!important;
    font-weight: 400;
}

.coloplast #search-section .search input#search:focus ~ label {
    opacity: 0;
    top: 50%;
    font-size: 1.5rem;
    left: 0.75rem;
}

.coloplast .intro-video {
    background: #eee;
    
}

.coloplast .intro-video video {
    border-radius: 24px;
}

.coloplast .video {
    text-align: center;
}

.coloplast .img-compo {
    text-align: center;
}

.coloplast .img-compo > img:first-child {
    max-width: 500px;
}

.coloplast .img-compo > img:last-child {
}

.coloplast .section-title {
    background: #fff;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 32px;
    color: var(--blueplast);
}

.coloplast .section-title-inverted {
    background: var(--blueplast);
    display: inline-block;
    padding: 10px 30px;
    border-radius: 32px;
    color: #fff;
}

.coloplast .case-container .case {
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.coloplast .banner .content {
    padding: 0;
}

.coloplast .banner {
    padding-top: 10rem;
    padding-bottom: 4rem;
    margin-bottom: 0;
    margin-top: 0;
}

.coloplast .banner .content .texts h3 {
    line-height: 4rem;
}

.coloplast .banner .content .texts .escribenos {
    border-radius: 32px;
}

.coloplast .banner .content .texts .escribenos .p-button-label {
    font-weight: 400;
}

/* Cases */
.coloplast .case-details .tabs-content {
    border: 0;
    overflow: hidden;
    overflow-y: scroll;
}

.coloplast #case-details h1 {
    color: var(--darkgrey)!important;
    font-size: 3rem;
    font-weight: 400;
}

.coloplast img.case_image {
    border: 0;
    border-radius: 32px;
}

.coloplast #case-details p, .coloplast #case-details span, .coloplast #case-details li {
    font-size: 1rem;
    font-weight: 300;
}

.coloplast .p-tabmenu {
    border-radius: 32px;
}

.coloplast .case-details .custom-btn.custom-border-top {
    border-width: 2px;
    border-radius: 0;
}

.coloplast .case-details .custom-btn {
    padding: 10px 0;
    border: 0;
}

.coloplast .case-details .custom-btn:enabled:hover {
    border: 0;
    background: var(--blueplast);
}

.coloplast #case-details .p-tabmenu-nav span {
    font-size: 14px;
}

.coloplast .case-details .tabs-content > .header img {
    border-radius: 32px;
    padding: 10px;
}

.coloplast #case_buttons a, .coloplast #case_buttons button {
    border-radius: 32px;
    background: var(--lightgrey);
    color: var(--darkgrey);
}

.coloplast .case-details .p-button.p-component {
    border-radius: 32px;
}

.coloplast .case-details .custom-swiper-prev {
    margin-left: -30px;
}

.coloplast .case-details .custom-swiper-next {
    margin-right: -30px;
}

.coloplast .case-details .header {
    margin-left: -4rem;
    margin-right: -4rem;
}

.coloplast .case_image_product {
    border: 0;
    border-radius: 32px;
    margin-bottom: 10px;
}

.coloplast .evaluaciones, .coloplast .objetivos {
    border: 0;
}

.coloplast footer {
    margin-top: 0;
    background-color: #77787c;
}

.coloplast #case-details {
    margin-bottom: 3rem;
}

.coloplast .case-details .custom-swiper-next, .coloplast .case-details .custom-swiper-prev {
    z-index: 1;
}

.coloplast .results {
    margin-top: 3rem;
}

.coloplast .search-filters {
    padding: 20px;
    background: #eeee;
    box-sizing: content-box;
    margin: 0;
    margin-top: 1rem;
    border-radius: 8px;
}

.coloplast .search-filters select {
    border-radius: 32px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .coloplast #search-section .search .button {
        display: block;
        width: 100%;
    }

        .coloplast header .content .title span {
    	font-size: 1.85rem;
    }
    
    .intro, .intro-video, .more-visited, .last-cases {
    	padding: 20px;
    }
    
    .mh-100vh {
    	min-height: auto;
    	padding: 50px 20px;
    }

}

.policy-page ul {
    line-height: inherit;
    padding: inherit;
    min-width: inherit; 
    list-style: disc;
}

.policy-page ol {
    line-height: inherit;
    padding: inherit;
    min-width: inherit; 
}

.intro p, .intro-video p {
    font-size: 1.3rem;
}

button.selected_case {
	background-color:#13869a !important;
}