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

#sudafed {max-width: 790px; margin: 0 auto; box-sizing: border-box; font-family: Arial, "sans-serif"; color: #241F69;}

#sudafed p {font-size: 21px; line-height: 24px; padding: 0; margin: 0;}
#sudafed sup {line-height: 0px!important;}
#sudafed img {max-width: 100%; max-height: 100%; display: block;}

#sudafed .reverse {flex-direction:row-reverse;}

#sudafed .gradient-1 {
	background: rgb(231,244,250);
	background: -moz-linear-gradient(0deg, rgba(231,244,250,1) 0%, rgba(241,246,249,1) 50%, rgba(221,240,248,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(231,244,250,1) 0%, rgba(241,246,249,1) 50%, rgba(221,240,248,1) 100%);
	background: linear-gradient(0deg, rgba(231,244,250,1) 0%, rgba(241,246,249,1) 50%, rgba(221,240,248,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e7f4fa",endColorstr="#ddf0f8",GradientType=1);
}
#sudafed .gradient-2 {
	background: rgb(231,244,250);
	background: -moz-linear-gradient(0deg, rgba(231,244,250,1) 0%, rgba(241,246,249,1) 50%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(231,244,250,1) 0%, rgba(241,246,249,1) 50%, rgba(255,255,255,1) 100%);
	background: linear-gradient(0deg, rgba(231,244,250,1) 0%, rgba(241,246,249,1) 50%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e7f4fa",endColorstr="#ffffff",GradientType=1);
}
#sudafed .gradient-3 {
	background: rgb(221,240,248);
	background: -moz-linear-gradient(0deg, rgba(221,240,248,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 60%, rgba(231,244,250,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(221,240,248,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 60%, rgba(231,244,250,1) 100%);
	background: linear-gradient(0deg, rgba(221,240,248,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 60%, rgba(231,244,250,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ddf0f8",endColorstr="#e7f4fa",GradientType=1);
}
#sudafed .gradient-4 {
	background: rgb(255,255,255);
	background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(239,248,252,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(239,248,252,1) 100%);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(239,248,252,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#eff8fc",GradientType=1);
}

#sudafed.sud-ha strong,
#sudafed.sud-ha-kids strong,
#sudafed.sud-tabs strong
{color:#0E9AE7;}
#sudafed.sud-dex strong
{color:#7C3187;}
#sudafed.sud-dex-kids strong
{color:#A66DA8;}

/* coloring black icons: https://codepen.io/sosuke/pen/Pjoqqp */
#sudafed.sud-ha .ico img,
#sudafed.sud-ha-kids .ico img,
#sudafed.sud-tabs .ico img
{filter: invert(40%) sepia(16%) saturate(5635%) hue-rotate(174deg) brightness(110%) contrast(89%);}
#sudafed.sud-dex .ico img
{filter: invert(24%) sepia(25%) saturate(3445%) hue-rotate(262deg) brightness(93%) contrast(92%);}
#sudafed.sud-dex-kids .ico img
{filter: invert(51%) sepia(4%) saturate(4731%) hue-rotate(249deg) brightness(93%) contrast(79%);}


#sudafed .header {
    display: flex; justify-content: space-around; align-items: center; gap:0;
    margin-bottom: 35px; padding:35px 0; border-radius:30px;}
#sudafed .header .logo {margin: 0 0 0 -100px;}
#sudafed .header .logo img {}
#sudafed .header .logo h3 {font-size: 29px; line-height: 29px; font-weight: bold; text-align: center; margin:15px 0 0 0; padding:0;}
#sudafed .header .packshot {margin-left: -40px; margin-bottom: -80px;}
@media screen and (max-width: 720px) {
#sudafed .header {flex-direction: column; padding:35px; gap:30px;}
#sudafed .header .logo {margin: 0 0 0 0;}
#sudafed .header .packshot {margin-left:0; margin-bottom: -80px;}
}
#sudafed .tabs-header-bg {
    padding:0; border-radius:30px; margin-bottom: 30px;
    	background: rgb(231,244,250);
	background: -moz-linear-gradient(0deg, rgba(231,244,250,1) 0%, rgba(241,246,249,1) 50%, rgba(221,240,248,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(231,244,250,1) 0%, rgba(241,246,249,1) 50%, rgba(221,240,248,1) 100%);
	background: linear-gradient(0deg, rgba(231,244,250,1) 0%, rgba(241,246,249,1) 50%, rgba(221,240,248,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e7f4fa",endColorstr="#ddf0f8",GradientType=1);
}
#sudafed .tabs-header-bg .tabs-header {background: url("https://www.apteka-melissa.pl/css/images/rc/sudafed/assets/sudafed-header-bg.webp") no-repeat -5px -170px; background-size:110%; width: 100%;
display: flex; justify-content: space-around; align-items: center; gap:30px; flex-direction:column;}
#sudafed .tabs-header .logo {margin:35px 35px 0 35px;}
#sudafed .tabs-header .logo img {}
#sudafed .tabs-header .logo h3 {font-size: 29px; line-height: 29px; font-weight: bold; text-align: center; margin:15px 0 0 0; padding:0;}
#sudafed .tabs-header .packshot {margin-left:0; margin-bottom: -40px;}
@media screen and (max-width: 720px) {
#sudafed .tabs-header-bg .tabs-header {background:url("https://www.apteka-melissa.pl/css/images/rc/sudafed/assets/sudafed-header-bg.webp") no-repeat -50px -100px; background-size:150%; width: 100%;}
#sudafed .tabs-header-bg {flex-direction: column; padding:0; gap:30px;}
#sudafed .tabs-header .logo {margin:35px 35px 0 35px;}
#sudafed .tabs-header .packshot {margin:0 35px -45px 35px;}
}



#sudafed .bullets {
    display: flex; justify-content: space-around; align-items: center; margin-bottom: 30px; gap:30px; flex-direction:column;
    padding:35px; border-radius:30px;
}
#sudafed .bullets h2 {font-size: 32px; line-height: 32px; font-weight: bold; margin:0; padding:0;}
#sudafed .bullets .row {display: flex; align-items: center; gap: 30px;}
#sudafed .bullets .ico {display: flex; justify-content: flex-start; align-items: center; gap: 15px;}
#sudafed .bullets .ico div {min-width: 30px; display: flex; justify-content:center;}
#sudafed .bullets .foto {min-width: 298px;}
#sudafed .bullets .list {display: flex; flex-direction:column; gap:20px;}
@media screen and (max-width: 670px) {
#sudafed .bullets {align-items: flex-start;}
#sudafed .bullets h2 {margin:auto;}
#sudafed .bullets .row {flex-direction: column; align-content: center; align-items:stretch; gap:10px; width: 100%;}
#sudafed .bullets .list {margin-bottom: 20px;}
#sudafed .bullets .foto {min-width:inherit; margin: auto;}}


#sudafed .tabs-bullets-bg {
    padding:35px 0; margin-bottom: 30px;  border-radius:30px;
    background: rgb(231,244,250);
	background: -moz-linear-gradient(0deg, rgba(231,244,250,1) 0%, rgba(241,246,249,1) 50%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(231,244,250,1) 0%, rgba(241,246,249,1) 50%, rgba(255,255,255,1) 100%);
	background: linear-gradient(0deg, rgba(231,244,250,1) 0%, rgba(241,246,249,1) 50%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e7f4fa",endColorstr="#ffffff",GradientType=1);
}
#sudafed .tabs-bullets-bg .tabs-bullets {background: url("https://www.apteka-melissa.pl/css/images/rc/sudafed/assets/sudafed-bullets-bg.webp") no-repeat left center;
display: flex; flex-direction:column; gap:30px;}
#sudafed .tabs-bullets h2 {font-size: 32px; line-height: 32px; font-weight: bold; margin:0; padding:0;}
#sudafed .tabs-bullets .row {display: flex; justify-content: space-around; align-items: center; padding: 0 35px; gap:0 35px; box-sizing: border-box;}
#sudafed .tabs-bullets .ico {display: flex; justify-content: flex-start; align-items: center; gap: 15px;}
#sudafed .tabs-bullets .ico div {min-width: 30px; display: flex; justify-content:center;}
#sudafed .tabs-bullets .foto {min-width: 298px;}
#sudafed .tabs-bullets .list {display: flex; flex-direction:column; gap:20px;}
@media screen and (max-width: 670px) {
#sudafed .tabs-bullets-bg {align-items: flex-start;}
#sudafed .tabs-bullets h2 {margin:auto; text-align:center;}
#sudafed .tabs-bullets .row {flex-direction: column; align-content: center; align-items:stretch; gap:10px; width: 100%;}
#sudafed .tabs-bullets .list {margin-bottom: 20px;}
#sudafed .tabs-bullets .foto {min-width:inherit; margin: auto;}}



#sudafed .info {
    display: flex; justify-content: space-around; align-items: center; gap:30px; flex-direction:column;
    padding:0 35px 35px 35px; border-radius:30px;
}
#sudafed .info .row {text-align: center;}
/*#sudafed .info img {min-width: 720px;}  o co chodzi z tym obrazkiem??? */



#sudafed .logo-claim {display: flex; justify-content:center; padding:35px; border-radius:30px;} 



#sudafed .products {
    display: flex; justify-content: space-around; align-items: center; gap:30px; flex-direction:column;
    margin-bottom: 140px; padding:35px 0 0 0; border-radius:30px;
}
#sudafed .products .text {text-align: center; padding: 0 80px;}
#sudafed .products .text h3 {font-size: 36px; line-height: 43px; font-weight: bold; padding: 0; margin: 0 0 10px 0;}
#sudafed .products .row {display: flex; justify-content: flex-start; align-items: flex-end; gap: 30px;}
#sudafed .products .item {margin-bottom: -88px;}
/*
#sudafed .products .item:first-child {margin-left: -60px;}
#sudafed .products .item:last-child {margin-right: -30px;}
*/

@media screen and (max-width: 730px) {
#sudafed .products {margin-bottom: 30px !important;}
#sudafed .products .item {margin-bottom: 35px !important;}
#sudafed .products .item:first-child {margin-left: 0px;}
#sudafed .products .item:last-child {margin-right: 20px;}
}
@media screen and (max-width: 630px) {
#sudafed .products {padding:35px 0 35px 0;}
#sudafed .products .row {flex-direction: column;}
#sudafed .products .item {margin-bottom: 10px;}
#sudafed .products .item:last-child {margin-right:inherit;}
#sudafed .products .row .sud-ha {}
#sudafed .products .row .sud-ha-kids {margin-top:-80px; margin-right: 25px;}
#sudafed .products .row .sud-dex {margin-right: 40px;}
#sudafed .products .row .sud-dex-kids {margin-right: 20px;}
}



#sudafed .sil {
    display: flex; justify-content: space-around; align-items: center; margin-bottom: 30px; gap:30px; flex-direction:column;
}
#sudafed .sil .conteiner {padding:0 30px; border-radius:30px;}
#sudafed .sil .main {padding:30px 30px 0 30px; border-radius:30px;}
#sudafed .sil .main h3 {font-size: 16px; line-height: 18px; padding: 0; margin: 0 0 15px 0;}
#sudafed .sil .main p {font-size: 14px; line-height: 16px; margin-bottom: 10px;}
#sudafed .sil .main .desc p {font-size: 11px; line-height: 14px; margin-bottom: 1px;}
#sudafed .sil .main .desc p:last-child {text-align: right;}
#sudafed .sil .others {margin:10px 0;}
#sudafed .sil .others p {font-size: 10px; line-height: 12px; margin-bottom: 10px;}
#sudafed .sil .others h4 {font-size: 11px; line-height: 12px; color: inherit; padding: 0; margin: 0 10px 0 0; float: left;}
#sudafed .sil .others strong {color: inherit !important;}
#sudafed .sil .warning p {font-size: 14px; line-height: 16px; font-weight: bold; text-align: center;}