html { overflow-y: scroll; overflow-x: auto;  }
body { font-family: 'hpRg', 'Arial Narrow', 'helvetica', sans-serif; font-size: 16px; width: 100%; min-width: 320px; height: 100%; padding: 30px; }


.right,	r, .r{ float: right !important; }
.left,	l, .l{ float: left !important; }
.center,	c, .c{ text-align: center !important; text-align: -webkit-center !important; }
.tL{ text-align: left !important; }
.tR{ text-align: right !important; }
.tC{ text-align: center !important; }
.clear{ clear: both; }
.fa:before { position: relative; z-index: 1; }

b{ color: #000; font-weight: 600; }

.animBg{ -webkit-transition: background-color 0.8s linear; -moz-transition: background-color 0.8s linear; -o-transition: background-color 0.8s linear; -ms-transition: background-color 0.8s linear; transition: background-color 0.8s linear; }
.animCl{ -webkit-transition: color 0.3s linear; -moz-transition: color 0.3s linear; -o-transition: color 0.3s linear; -ms-transition: color 0.3s linear; transition: color 0.3s linear; }

.no-select{ -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
.shadow{ box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); }

.blur,
.blurError{ filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); -webkit-filter: blur(3px); filter: blur(3px); }

.wrap{ display: table; width: 100%; min-width: 320px; max-width: 1000px; position: relative; margin: 0 auto; padding: 0 20px; }
.wrapBox{ display: block; position: relative;  margin-top: -100px; }

.page-content{ height: 832px; display: table; table-layout: fixed; width: 100%; }
.page-coll{ display: table-cell; vertical-align: middle; width: 100%; height: 100%; text-align: center; }

.alert{ position: fixed; z-index: 20; background-color: #eceae9; top: 0px; left: 0px; width: 100%; height: 100%; color: rgba(0, 0, 0, 0.80); font-size: 40px; text-align: center; line-height: 400px; }

h1{ color: #fff; margin-bottom: 30px; font-size: 40px; margin-top: 40px;}
p{ color: #fff; padding-bottom: 30px; line-height: 22px; }

.bg{ background-color: #eceae9; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 30px solid #fff; z-index: 2; }
.hover .bg{ background-color: rgba(0, 0, 0, 0.80); }

.logo-avene,
.logo-WomensHealth,
.logo-title,
.logo-lead{ position: absolute; top: 70px; z-index: 3; }

.logo-avene{ background: url(../images/logo-Avena.png) center no-repeat; width: 170px; height: 145px; background-position: 0px 0px; left: 6%; }
.hover .logo-avene{ background-position: -188px 0px; }
.logo-WomensHealth{ background: url(../images/logo-WomensHealth.png) top center no-repeat; width: 160px; height: 35px; right: 6%; }
.hover .logo-WomensHealth{ background-position: 2px -47px; }

.logo-title{ font-family: 'SnellRoundhand'; color: #f08675; font-size: 50px; line-height: 24px; width: 600px; display: block; text-align: center; left: 50%; transform: translateX(-50%); position: absolute; top: 80px; }
.logo-lead{  font-family: 'alethiapro-regular'; color: #535353; font-size: 18px; line-height: 24px; width: 600px; display: block; text-align: center; left: 50%; transform: translateX(-50%); position: absolute; top: 150px; }

.mini .logo-lead{ top: 127px; }

.hover .logo-title{ color: #f08675; }
.hover .logo-lead{ color: #fff; }


.user1,
.user2,
.user3{ position: absolute; bottom: 30px; height: 602px; background: url(../images/users.png) no-repeat; z-index: 3; left: 50%; transform: translateX(-50%); }
.user1 .info,
.user2 .info,
.user3 .info{ display: none; opacity: 0; }
.user1{ width: 434px; z-index: 4; margin-left: -220px; }
.user2{ width: 442px; background-position: -452px 0; z-index: 5; margin-left: 34px; }
.user3{ width: 456px; background-position: -920px 0; z-index: 4; margin-left: 340px; }

.mini .user1,
.mini .user2,
.mini .user3{ background-size: 300%; height: 440px; }

.user .info{ position: absolute; width: 230px; top: 120px; }
.user .info h1{ color: #f08675; font-family: 'alethiapro-regular'; margin: 0px; font-size: 25px; font-weight: bold; margin-bottom: 5px; }
.user .info span{ color: #f08675; font-family: 'alethiapro-italic'; font-size: 12px; }
.user .info p{ padding-top: 20px; color: #fff; font-family: 'alethiapro-regular'; font-size: 14px; line-height: 18px; position: relative; }
.user .info p:before{ content: ''; z-index: 1; position: absolute; left: -35px; width: 30px; height: 30px; top: 15px; background: url(../images/quote.png) no-repeat; }
.user .info a{ display: table; background-color: #f08675; font-family: 'alethiapro-regular'; text-transform: uppercase; color: #fff; padding: 0 20px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; text-align: center; line-height: 40px; }

.user .info a{ -webkit-transition: line-height 0.05s linear, padding 0.05s linear, bottom 0.05s linear; -moz-transition: line-height 0.05s linear, padding 0.05s linear, bottom 0.05s linear; -o-transition: line-height 0.05s linear, padding 0.05s linear, bottom 0.05s linear; -ms-transition: line-height 0.05s linear, padding 0.05s linear, bottom 0.05s linear; transition: line-height 0.05s linear, padding 0.05s linear, bottom 0.05s linear; }
.user .info a:hover{ line-height: 44px; padding: 0 24px; }



.user1 .info{ left: 305px; }
.user2 .info{ left: 378px; }
.user3 .info{ left: -156px; }

.shares{ color: #fff; display: block; position: absolute; text-align: center; top: 90px; right: 6.5%; width: 140px; font-size: 14px; line-height: 25px; margin-top: 25px; z-index: 10; }
.shares span{ font-size: 12px; display: block;}
.shares .share{ display: inline-block; margin: 0 2px; width: 25px; height: 25px; }
.shares .share{ background: url(../images/share.png) center no-repeat; }
.shares .share.fb { background-position: 0px 0px; }
.shares .share.vk { background-position: -29px 0px; }
.shares .share.tw { background-position: -59px 0px; }
.shares .share.ok { background-position: -88px 0px; }

a.back{ width: 121px; height: 21px; left: 25%; top: 10%; display: block; position: absolute; background: url(../images/back.png) no-repeat; }

.videos video{ display: none; position: absolute; z-index: 1; top:0px; left:0px; width: 100%; height: 100%; }


.page{ position: relative; display: table; width: 100%; }

.main-user{ background-color: #eceae9; height: 610px; width: 100%; position: relative; margin-bottom: 30px; }
.main-user:before { content: ''; position: absolute; left: 0; bottom: 0px; height: 250px; width: 100%; background: -webkit-linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%); background: -moz-linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%); background: -o-linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%); background: -ms-linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%); background: linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%); }

.main-user .user-view-1,
.main-user .user-view-2,
.main-user .user-view-3{ position: absolute; bottom: 0px; height: 602px; background: url(../images/users.png) no-repeat; z-index: 3; left: 50%; transform: translateX(-50%); }

.main-user .user-view-1{ width: 434px; z-index: 4; margin-left: 70px; }
.main-user .user-view-2{ width: 442px; background-position: -452px 0; z-index: 5; margin-left: 34px; }
.main-user .user-view-3{ width: 456px; background-position: -920px 0; z-index: 4; margin-left: 62px; }

.main-user .logo-old{ font-family: 'SnellRoundhand'; color: #f08675; font-size: 40px; line-height: 24px; width: 60px; display: block; text-align: center; left: 50%; transform: translateX(-50%); position: absolute; bottom: 120px; z-index: 10; }
.main-user .logo-title{ font-family: 'alethiapro-regular'; top: auto; bottom: 74px; z-index: 10; }
.main-user .logo-lead{ color: #fff; top: auto; bottom: 30px; z-index: 10; font-size: 14px; }


.box{ display: table; position: relative; width: 80%; max-width: 1050px; margin: 0 auto 30px; }
.box .-l,
.box .-r{ width: 50%; float: left; position: relative; }
.box .-c.-text{ width: 60%;  margin: 0 auto; }
.box img{  max-width: 100%;  }
.box .-l img{ right: 60px;  position: relative; }
.box .-r img{ left: 60px;  position: relative; }
.box h1{ color: #f08675; font-family: 'alethiapro-regular'; margin: 0 0 30px 0; font-size: 20px; }
.box p{ color: #535353; font-family: 'alethiapro-regular'; }
.box a{ background-color: #f08675; color: #fff; text-transform: uppercase; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; line-height: 40px; display: table; padding: 0 20px; bottom: 50px; position: absolute; }
.box .-r a{ right: 0px; }

.box a{ -webkit-transition: line-height 0.05s linear, padding 0.05s linear, bottom 0.05s linear; -moz-transition: line-height 0.05s linear, padding 0.05s linear, bottom 0.05s linear; -o-transition: line-height 0.05s linear, padding 0.05s linear, bottom 0.05s linear; -ms-transition: line-height 0.05s linear, padding 0.05s linear, bottom 0.05s linear; transition: line-height 0.05s linear, padding 0.05s linear, bottom 0.05s linear; }
.box a:hover{ line-height: 44px; padding: 0 24px; bottom: 48px; }

.box video{ max-width: 100%; }

.related{ display: table; position: relative; width: 80%; max-width: 1050px; margin: 0 auto 30px; }
.related h2{ color: #000000; font-family: 'alethiapro-regular'; font-size: 40px; text-align: center; margin-bottom: 30px; }
.related .item,
.related .item{ width: 50%; float: left; text-align: center; }
.related .item img{ max-width: 100%; }
.related .item a{ display: block; position: relative; text-align: center; margin-bottom: 15px; }

.related .item a.old{ font-family: 'SnellRoundhand'; color: #f08675; font-size: 40px; line-height: 24px;   }
.related .item a.title{ color: #000000; font-family: 'alethiapro-regular';   font-size: 30px;  }
.related .item a.type{ color: #000000; font-size: 14px; }


@media screen and (max-width: 1000px){
	.mini .user1, 
	.mini .user2, 
	.mini .user3{ background-size: 300%; height: 300px; width: 230px; }
	
	.user1{ width: 434px; z-index: 4; margin-left: -120px; }
	.user2{ width: 442px; background-position: -217px 0; z-index: 4; margin-left: 34px; }
	.user3{ width: 442px; background-position: -452px 0; z-index: 4; margin-left: 200px; }
	
	.user .info{ top: 55px; }
	.user1 .info { left: 160px; }
	.user2 .info { left: 230px; }
	.user3 .info { left: -190px; }
	
}