@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500;600;700;800;900&display=swap');

/*
	Title # BuyProsoria
	Date #  29 March 2022
*/


html {
  scroll-behavior: smooth;
}


*{ padding: 0px; margin: 0px; }

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{ padding: 0px; margin: 0px; background: #333333; font-family: 'helveticaneueregular'; font-family:"Helvetica Neue"; font-weight: 400; font-style: normal; line-height:24px; }


.body-full{ width: 100%; float: left; position: relative; background: #FFF; }
.body-full2{ width: 100%; float: left; position: relative; background: #F5F5F5; }


img{ max-width:100%; height:auto; }


.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  /*width: 70%;*/
  margin: auto;
}

a{ text-decoration:none;outline: 0; }
a:hover{ text-decoration:none;outline: 0; }
:focus {
outline: 0;
}
button:focus {
    outline: 0 !important;
}

.table > thead > tr > th{ border:none; font-size:12px; font-weight:normal; color:#666666; } 
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th{ border:none; font-size:12px; font-weight:normal; color:#000; line-height:20px; } 



@font-face {
    font-family: 'helveticaneueregular';
    src: url('../font/HelveticaNeue-Regular/helveticaneue_regular-webfont.eot');
    src: url('../font/HelveticaNeue-Regular/helveticaneue_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/HelveticaNeue-Regular/helveticaneue_regular-webfont.woff') format('woff'),
         url('../font/HelveticaNeue-Regular/helveticaneue_regular-webfont.ttf') format('truetype'),
         url('../font/HelveticaNeue-Regular/helveticaneue_regular-webfont.svg#helveticaneueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'helveticaneuebold';
    src: url('../font/HelveticaNeueBold/helvetica_neu_bold-webfont.woff2') format('woff2'),
         url('../font/HelveticaNeueBold/helvetica_neu_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* --------------- Start Text ------------------- */


	
/* ================================================== Start Header ========================================================== */

header{
		width:100%;
		padding:45px 0px;
		position:relative;
		}

.logo{
	  width:auto;
	  float:left;
	  position:relative;
	}
	
	.logo img{ width:258px; height:auto; }
	
.header-phone{
			  width:auto;
			  float:right;
			  position:relative;
			  font-size:30px; font-weight:400; line-height:35px; color:#3CC1C0;
			}
		
	.header-phone a{ color:#3CC1C0; }
	
	.header-phone img{ width: 43px; margin-right:8px; }


@media (max-width: 767px) {
	
header{
		width:100%;
		padding:15px 0px;
		}
	
.header-phone{ padding: 7px 0px 0px; font-size:20px; line-height:25px; }
	.header-phone img{ width: 24px; }

}

/* =============================================================== End Header ================================================================== */


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Start Top <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

.top-full{ width:100%; float:left; position:relative; background-image: url(../img/bp-top-bg.jpg); background-position: right bottom; background-repeat: no-repeat; background-size:cover; }

.top{
	 width:540px;
	 padding:20px 0px 350px;
	 float:left;
	 position:relative;
	}
	
	.top h1{ font-family: 'Maven Pro', sans-serif; font-size:55px; line-height:60px; font-weight:700; color:#333333; margin-bottom:25px; }
	.top h3{ font-family: 'Maven Pro', sans-serif; font-size:28px; line-height:50px; font-weight:700; color:#622C95; margin-bottom:20px; }
		.top h3 strong{ font-size:72px; font-weight:700; }

	.top p{ font-size:32px; font-weight:400; color:#333333; line-height:35px; margin-bottom:20px; }
		.top p a{ color:#3CC1C0; font-family: 'helveticaneuebold'; font-weight: 400; }
			.top p a:hover{ color:#333333; }		
	.top p span{ color:#3CC1C0; font-family: 'helveticaneuebold'; font-weight: 400; }
	.top p br{ display: none; }

.top-text{ font-size:18px; font-weight:400; color:#333333; line-height:40px; margin-bottom:0px; }
	.top-text a{ color:#333333; }
	.top-text span{ font-weight:400; }
	.top-text img{ width: 157px; height: auto; margin-right: 30px; }
	
	
	
	.top .btn-primary{
					width:auto;
					padding:5px 20px;
					background:#622C95;
					border:0px;
					border-radius:30px;
					font-family: 'Maven Pro', sans-serif; font-size:18px; font-weight: 500; color: #FFF; line-height:28px; text-align:center; display:inline-block; cursor:pointer;
					display: none;
					}
					

@media (max-width: 1850px) {

.top{
	 padding:20px 0px 270px;
	}

}

@media (max-width: 1700px) {

.top{
	 padding:20px 0px 220px;
	}

}

@media (max-width: 1500px) {

.top{
	 padding:20px 0px 145px;
	}

}

@media (max-width: 1400px) {

.top{
	 padding:20px 0px 95px;
	}

}


@media (max-width: 1299px) {
	
.top-full{ background-image: url(../img/bp-top-bg-1024.jpg); background-position: left bottom; }

.top{
	 padding:20px 0px 110px;
	}

}


@media (max-width: 767px) {
	
.top-full{ background-image: url(../img/bp-top-bg-mobile.jpg); background-position:bottom right; background-size:cover; }
	
.logo img {
    width: 142px;
}
			
.top{
	 width: 100%;
	 padding:10px 0px 260px;	 
	 text-align: center;
	}
	
	.top h1{ font-size:30px; line-height:35px; text-align:center; }
	.top h3{ font-size:20px; line-height:40px; margin-bottom: 15px; }
	.top h3 strong{ font-size:50px; }
	.top p{ font-size:22px; line-height:28px; text-align:center; display: none; }
		.top p br{ display: inline-block; }
	
	.top-text{ text-align: left; width:150px; line-height: 35px; }
	.top-text span{ display: none; }
	.top-text img{ width:98px; height: auto; margin-right:0px; margin-bottom: 20px; }
	
	
	.top .btn-primary {
					display:inline-block;
					}
					

}


@media (max-width: 599px) {
			
.top{
	 padding:10px 0px 150px;	 
	}
	
}

@media (max-width: 479px) {
			
.top{
	 padding:10px 0px 90px;	 
	}
	
}

@media (max-width: 350px) {
			
.top{
	 padding:10px 0px 30px;	 
	}
	
	.top h3{ font-size: 18px; }
	.top h3 strong{ font-size: 48px; }

	
}
				
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> End Top <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Start Find Store <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

.find-store{
			width:100%;
			padding:40px 0px 20px;
			float:left;
			position:relative;
			text-align:center;
			}

	.find-store .img{ width: 157px; height: auto; margin-bottom:30px; display: inline-block; }
				
	.find-store h2{ font-family: 'Maven Pro', sans-serif; font-size:22px; font-weight:700; color:#333333; line-height:28px; margin-bottom:10px; }
		.find-store h2 a{ color:#333333; }

	.find-store h3{ font-family: 'Maven Pro', sans-serif; font-size:22px; font-weight:700; color:#3CC1C0; line-height:28px; margin-bottom:25px; }
		.find-store h3 a{ color:#3CC1C0; }	

	.find-store p{ font-size:28px; font-weight:400; color:#333333; line-height:35px; margin-bottom:15px; }
		.find-store p a{ color:#333333; }	
		.find-store p strong{ font-weight:700; color:#FF0000; }	

	.find-text{ font-size:18px; font-weight:400; color:#FF0000; line-height:24px; }
		.find-text a{ color:#FF0000; }

	.find-store ul{ padding: 0px; margin: 0px; margin-top: 25px; }
	.find-store li{ padding: 0px; margin: 0px; list-style: none; display: inline-block; font-size:18px; font-weight:400; color:#333333; line-height:28px; margin:0px 25px 10px; }
		.find-store li a{ color:#3CC1C0; font-weight:700; text-decoration: underline; }	
			.find-store li a:hover{ color:#3CC1C0; text-decoration: none; }	
		.find-store li strong{ font-weight:700; }	
	.find-store li img{ width: 85px; height: auto; display: inline-block; vertical-align: sub; }
	
		
	.find-store .btn-primary{
							width:240px;
							padding:15px 15px;
							background:#622C95;
							border:0px;
							border-radius:30px;
							font-family: 'Maven Pro', sans-serif; font-size:20px; font-weight: 500; color: #FFF; line-height:25px; text-align:center; display:inline-block; cursor:pointer;
							margin: 0px 0px 25px;
							}

	.find-store .form-control{
							  font-family: 'helveticaneuebold';
							  font-style: italic;
							  font-size: 16px;
							  font-weight: 300;
							  color: #767676;
							  width: 354px;
							  border: 1px solid #767676;
							  height:54px;
							  border-radius:3px;
							  line-height: 21px;
							  padding: 10px 20px;
							  display: inline-block;
							  margin-bottom: 30px;
							}

		.find-store .form-control::-webkit-input-placeholder{ color:#767676; opacity:1; }
		.find-store .form-control:-moz-placeholder{ /* Firefox 18- */ color:#767676; opacity:1; }
		.find-store .form-control::-moz-placeholder{ /* Firefox 19+ */ color:#767676;opacity:1; }
		.find-store .form-control:-ms-input-placeholder{ color:#767676; opacity:1; }



@media (max-width: 767px) {

.find-store{
			padding:25px 0px;
			}
	
	.find-store .form-control{							 
							  width: 80%;
							}
	
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> End Find Store <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Start Shop Now <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

.shop-now{
		width:100%;
		padding:20px 0px 10px;
		float:left;
		position:relative;
		text-align:center;
		}
				
	.shop-now h2{ font-family: 'Maven Pro', sans-serif; font-size:45px; font-weight:700; color:#333333; line-height:50px; margin-bottom:30px; }
		.shop-now h2 a{ color:#333333; }

	.shop-now h3{ font-family: 'Maven Pro', sans-serif; font-size:22px; font-weight:700; color:#333333; line-height:30px; margin-bottom:20px; }
		.shop-now h3 a{ color:#333333; }

	.shop-now h3 img{ width: 102px; height: auto; margin: 0px 10px; vertical-align: sub; }

	.shop-now p{ font-size:16px; font-weight:400; color:#333333; line-height:24px; margin-bottom:25px; }
		.shop-now p a{ color:#333333; }	
	
		
	.shop-now .btn-primary{
						width:240px;
						padding:15px 15px;
						background:#622C95;
						border:0px;
						border-radius:30px;
						font-family: 'Maven Pro', sans-serif; font-size:20px; font-weight: 500; color: #FFF; line-height:25px; text-align:center; display:inline-block; cursor:pointer;
						margin: 0px 25px 20px;
						}

@media (max-width: 767px) {

.shop-now{
		padding:25px 0px;
		}
	
	.shop-now h2{ font-size:30px; line-height:35px; }
	.shop-now h3{ font-size:20px; line-height:25px; }
	
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> End Shop Now <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Start Benefits of Prosoria <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

.benefits-prosoria{
				 width:100%;
				 padding:40px 0px 20px;
				 float: left;
				 position: relative;			
				}
				
				
	.benefits-prosoria h2{ font-family: 'Maven Pro', sans-serif; font-size:50px; font-weight:700; color:#333333; line-height:55px; margin-bottom:25px; text-align: center; }

	.benefits-prosoria-left{
						 width:46%;
						 padding: 50px 0px 0px 90px;
						 float: left;
						 position: relative;			
						}
	
	.benefits-prosoria-left ul{ padding: 0px; margin: 0px; }
	.benefits-prosoria-left li{ padding: 0px; margin: 0px; list-style: none; font-size:21px; font-weight:400; color:#333333; line-height:28px; margin-bottom:30px;  position: relative; }
		.benefits-prosoria-left li a{ color:#3CC1C0; text-decoration: underline; }
			.benefits-prosoria-left li a:hover{ color:#333333; text-decoration: none; }

	.benefits-prosoria-left li .img{ width: 58px; position: absolute; left:-85px; top:-5px; z-index: 1; text-align:right; }
		.benefits-prosoria-left li .img img{ height: 36px; }

	.benefits-prosoria-right{
						 width:50%;
						 padding: 20px 0px 0px;
						 float: right;
						 position: relative;
						 text-align: center;
						}
		


@media (max-width: 1199px) {
				
.benefits-prosoria h2{ font-size:45px; line-height:50px; }
	
}


@media (max-width: 767px) {
	
.benefits-prosoria{
				 padding:30px 0px;		
				}
				
				
	.benefits-prosoria h2{ font-size:30px; line-height:35px; }

	.benefits-prosoria-left{
						 width:100%;
						 padding:20px 0px 0px 90px;
						}
	

	.benefits-prosoria-right{
						 width:100%;
						 padding: 20px 0px 0px;
						}

}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> End Benefits of Prosoria <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */



/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Start Footer <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

.footer-full{ width: 100%; float: left; position: relative; background: #333333; }

footer{
	 width: 100%;
	 padding: 35px 0px;
	 float: left;
	 position: relative;
	 text-align:center;
	}
	
	footer img{ width: 258px; margin-bottom: 20px; }
	
	footer p{ font-size:12px; font-weight:300; color:#FFF; line-height:20px; margin-bottom:0px; }
		footer p a{ color:#FFF; }
		
@media (max-width: 767px) {

footer img{ width: 142px; }
	
}
				
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> End Footer <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */





/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Start Popup <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */


.modal-lg, .modal-xl{
    max-width: 640px;
}

.popup-block{
			width:100%;
			float:left;
			position:absolute;
			left: 0px;
			top: 0px;
			z-index: 999;
			}

	.popup-title{
				width:100%;
				padding: 20px 10px;
				background: #16A1A5;
				float:left;
				position:relative;
				text-align: center;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				}
				
	.popup-title h2{ font-size:35px; font-weight:400; color:#FFF; line-height:35px; margin-bottom:0px; }
		.popup-title h2 a{ color:#FFF; }
	
	
	.popup-body{
				width:100%;
				padding: 20px 12% 40px;
				background: #FFF;
				float:left;
				position:relative;
				text-align: center;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
				}
				
		.popup-body h2{ font-family: 'Maven Pro', sans-serif; font-size:45px; font-weight:700; color:#333333; line-height:50px; margin-bottom:25px; }
			.popup-body h2 a{ color:#333333; }
		.popup-body h2 span{ color:#FC6A51; }

		.popup-body p{ font-size:20px; font-weight:400; color:#333333; line-height:25px; margin-bottom:20px; }
			.popup-body p a{ color:#333333; }

		.popup-body ul{ padding: 0px; margin: 0px; margin-top: 30px; }
		.popup-body li{ padding: 0px; margin: 0px; list-style: none; width: 50%; float: left; line-height:normal; }

		.popup-body li img{ width: 105px; margin-bottom: 20px; }

			.popup-body li h3{ font-family: 'helveticaneuebold'; font-size:18px; font-weight:400; color:#333333; line-height:20px; margin-bottom:20px; }

			.popup-body li h4{ font-family: 'Maven Pro', sans-serif; font-size:32px; font-weight:500; color:#A2A2A2; line-height:35px; margin-bottom:20px; text-decoration: line-through; }
			
			.popup-body li h5{ font-family: 'Maven Pro', sans-serif; font-size:40px; font-weight:700; color:#01A1DD; line-height:45px; margin-bottom:20px; }
			.popup-body li:nth-child(2) h5{ color: #FC6A51; }
	

			.popup-body li .btn-primary{
										width:auto;
										padding:10px 30px;
										background:#01A1DD;
										border:0px;
										border-radius:30px;
										font-family: 'Maven Pro', sans-serif; font-size:20px; font-weight: 500; color: #FFF; line-height:25px; text-align:center; display:inline-block; cursor:pointer;	
										}

			.popup-body li .btn-primary2{
										width:auto;
										padding:10px 30px;
										background:#FC6A51;
										border:0px;
										border-radius:30px;
										font-family: 'Maven Pro', sans-serif; font-size:20px; font-weight: 500; color: #FFF; line-height:25px; text-align:center; display:inline-block; cursor:pointer;	
										}


		.ingredients-popup{
							width:100%;
							padding: 20px 20px 10px;
							background: #FFF;
							float:left;
							position:relative;
							}
				
		.ingredients-popup h3{ font-family: 'Maven Pro', sans-serif; font-size:25px; font-weight:700; color:#01A1DD; line-height:30px; margin-bottom:20px; }
			.ingredients-popup h2 a{ color:#01A1DD; }

		.ingredients-popup p{ font-size:18px; font-weight:400; color:#333333; line-height:24px; margin-bottom:20px; }
			.ingredients-popup p a{ color:#333333; }
		.ingredients-popup p strong{ font-weight: 600; }

.popup-close{
			width: auto;
			padding: 2px 5px;
			background: #fff;
			border-radius: 5px;
			float: right;
			position: absolute;
			right: 10px;
			top: 10px;
			z-index: 1;
			}

	.popup-close .fa{ font-size: 20px; line-height: 20px; color: #000; cursor: pointer; }


@media (max-width: 479px) {

.popup-body{
			padding: 20px 30px 30px;
			}

	.popup-body h2{ font-size:35px; line-height:40px; }

	.popup-body ul{ margin-top:30px; }
	.popup-body li{ width:100%; }
	.popup-body li:nth-child(2){ margin-top:40px; }
	
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> End Popup <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */