/* -------------------------------------------------- */
/* Reset - http://purecss.io/base
/* -------------------------------------------------- */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section, main{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}.hide{display:none;}html{box-sizing: border-box;}*,*:before,*:after{box-sizing:inherit;}.clear{font-size:0px;clear: both;height: 0px;}*:focus{outline: none;}strong{font-weight:bold;}em{font-style:italic;}input:invalid{box-shadow: none;}button{border:none;background:none;padding:0;margin: 0;}button::-moz-focus-inner{border:0;}input,button{border-radius:0;border-radius:none;}

/* -------------------------------------------------- */
/* Common
/* -------------------------------------------------- */
@font-face {
    font-family: 'Circular Pro';
    src: url('/assets/fonts/lineto-circular-pro-book.woff') format('woff'), /* Modern Browsers */
    	url('/assets/fonts/lineto-circular-pro-book.ttf') format('truetype'); /* Safari, Android, iOS */
}
@font-face {
    font-family: 'Circular Pro';
    src: url('/assets/fonts/lineto-circular-pro-bold.woff') format('woff'), 
    	url('/assets/fonts/lineto-circular-pro-bold.ttf') format('truetype');
    font-weight: 700;
}

/* -------------------------------------------------- */
/* Common
/* -------------------------------------------------- */
body{
	background: #e4e4e4;
	font-family: 'Circular Pro', Arial, sans-serif;
	font-size: 16px;
	color: #484747;
}
a, a:visited{
	color: #22bcad;
	text-decoration: none;
}
a:hover, a:active{
	color: #522f91;
	text-decoration: underline;
}
strong{
	font-weight: 700;
}
sup{
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}
p{
	line-height: 1.6em;
	margin-bottom: 18px;
}

/* -------------------------------------------------- */
/* Headers
/* -------------------------------------------------- */
h1, h2, h3, h4{
	line-height: 1.2em;
	color: #522f91;
}
h1{
	font-size: 36px;
}
h2{
	font-size: 29px;
	margin-bottom: 18px;
}
h3{
	font-size: 21px;
	margin-bottom: 9px;
}
.pg-title{
	border-bottom: 2px solid #e6e6e6;
}
.pg-title h1{
	display: inline-block;
	border-bottom: 3px solid #522f91;
	margin-bottom: -3px;
	padding-bottom: 9px;
	font-weight: 700;
}

/* -------------------------------------------------- */
/* Containers
/* -------------------------------------------------- */
.container,
.container-sm{
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 18px;
}
.container-sm{
	max-width: 992px;
}
/* -------------------------------------------------- */
/* Header
/* -------------------------------------------------- */
header{
	background: #522f91;
	padding: 12px 0;
}
.logo{
	display: inline-block;
	background: url('/assets/images/dr-reddys.svg') no-repeat;
	width: 138px;
	height: 30px;
}

/* -------------------------------------------------- */
/* Main
/* -------------------------------------------------- */
main{
	background: #fffbf7;
	padding: 24px 0;
}
main.product-detail{
	background: #fff;
}
.main{
	padding: 24px 0;
}
hr{
	margin: 0 0 24px 0;
	padding: 24px 0 0 0;
	border: none;
	border-bottom: 2px solid #e6e6e6;

}

/* -------------------------------------------------- */
/* Figures/images
/* -------------------------------------------------- */
.img-w-dots{
	position: relative;
	padding: 18px;
}
.img-w-dots img{
	width: 100%;
	height: auto;
	border-radius: 50%;
}
.dot1,
.dot2,
.dot3,
.dot4{
	border-radius: 50%;
	position: absolute;
}
.dot1{
	top: -9px;
	right: -9px;
	width: 15%;
	height: 15%;
	background: #22bcad;
}
.dot2{
	bottom: -18px;
	left: 50%;
	width: 10%;
	height: 10%;
	background: #fabea6;
}
.dot3{
	bottom: -36px;
	left: -18px;
	width: 45%;
	height: 45%;
	background: #522f91;
}



/* -------------------------------------------------- */
/* Introduction
/* -------------------------------------------------- */
.summary{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 -18px;
	padding: 24px 0;
}
.summary-text{
	width: 60%;
	padding: 18px;
}
.summary-img{
	width: 40%;
	padding: 18px;
}


/* -------------------------------------------------- */
/* Breadcrumb
/* -------------------------------------------------- */
.crumbs{
	margin-bottom: 18px;
}
.crumbs ul{
	display: flex;
	margin: -9px -6px;
}
.crumbs li::after{
	content: '/';
	color: #e6e6e6;
	vertical-align: middle;
}
.crumbs a{
	display: inline-block;
	padding: 9px 6px;
	font-size: 12px;
	color: #9d9d9d;
	vertical-align: middle;
}


/* -------------------------------------------------- */
/* Search section
/* -------------------------------------------------- */
section.search{
	padding: 24px 0;
}
.search-wrap{
	margin-bottom: 18px;
}
.search-fields{
	position: relative;
	display: flex;
	flex-wrap: wrap;
}
.search-fields input{
	background: #fff;
	font-family: 'Circular Pro', Arial, sans-serif;
	font-size: 16px;
	flex-grow: 1;
	height: 60px;
	padding: 0 18px;
	color: #484747;
	border: 2px solid #e6e6e6;
	border-right: none;
}
.search-fields button{
	background: #522f91 url('/assets/images/search.svg') no-repeat center;
	padding: 0;
	margin: 0;
	width: 60px;
	height: 60px;
	font-family: 'Circular Pro', Arial, sans-serif;
	font-size: 16px;
	color: #fff;
}
button:hover{
	cursor: pointer;
}

/* Custom select elements */

.custom-select {
  position: relative;
}
.custom-select select {
  display: none; 
}
.select-selected {
  background: #efefef url('/assets/images/arrow-down.svg') no-repeat right center;
  line-height: 56px;
  padding: 0 26px 0 18px;
  border: 2px solid #e6e6e6;
  border-right: none;
  color: #9d9d9d;
}
.select-items {
	position: absolute;
	background: #fff;
	top: 60px;
	z-index: 99;
	border: 2px solid #e6e6e6;
	border-top: none;
}
.show .select-items{
	display: block;
}
.select-items div{
	padding: 9px 18px;
	font-size: 15px;
}
.select-items a,
.select-items a:hover{
	display: block;
	color: #484747;
	text-decoration: none;
}
.select-items div:first-child{
	padding-top: 18px;
}
.select-items div:last-child{
	padding-bottom: 18px;
}
.select-hide {
  display: none;
}
.select-items div:hover,
.select-selected,
.same-as-selected{
	cursor: pointer;
	background-color: #efefef;
}  


/* Autocomplete div elements */
#autocomplete-items {
  width: 100%;
  margin-top: 20px;
}
.autocomplete-items {
  width: 100%;
  border: 2px solid #e6e6e6;
  background-color: #fff;
  max-height: 250px;
  overflow-y: scroll;
}
.autocomplete-items a {
  display: block;
  padding: 9px 18px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.2em;
}
.autocomplete-items li:first-child a{
	padding-top: 18px;
}
.autocomplete-items li:last-child a{
	padding-bottom: 18px;
}
.autocomplete-items a:hover,
.autocomplete-active{
	background: #efefef;
}

/* -------------------------------------------------- */
/* Results
/* -------------------------------------------------- */
.results{
	margin-bottom: 66px;
}
.results h2{
	margin-bottom: 9px;
}
.results ul{
	display: flex;
	flex-wrap: wrap;
	margin: -6px; 

}
.results li{
	position: relative;
	width: 20%;
	padding: 6px;
}
.results a{
	display: block;
	background: #fff;
	padding: 18px 18px 24px 18px;
	border: 2px solid #e6e6e6;
	height: 100%;
	text-align: center;
}
.results a:hover{
	border-color: #d1d1d1;
}
.results a span{
	display: block;
}
.results a .generic-name{
	margin-bottom: 6px;
}
.results a .brand-name,
.results a:hover .brand-name{
	text-transform: uppercase;
	font-size: 13px;
}
.results img{
	width: 70%;
	height: auto;
	margin-bottom: 9px;
}

/* -------------------------------------------------- */
/* Quick Links
/* -------------------------------------------------- */
.quick-links{
	padding: 24px 0;
}
.quick-links ul{
	display: flex;
	flex-wrap: wrap;
	margin: -6px;
}
.quick-links li{
	position: relative;
	padding: 6px;
	width: 33.33%;
}
.quick-links a{
	padding: 36px 24px 48px 24px;
	display: block;
	text-align: center;
	height: 100%;
	background: #fff;
	border: 2px solid #e6e6e6;
}
.quick-links a:hover{
	border-color: #d1d1d1;
	text-decoration: none;
}
.quick-links h3{
	margin-bottom: 9px;
	font-weight: 600;
}
.quick-links a:hover h3{
	text-decoration: underline;
}
.quick-links p{
	color: #484747;
	line-height: 1.4em;
	margin-bottom: 0;
}
.bubble-icon{
	display: inline-block;
	background: #522f91 no-repeat center;
	width: 90px;
	height: 162px;
	border-radius: 45px;
	margin-bottom: 18px;
}
/* alternate some colors */
.bubble-icon.file{
	background-image: url('/assets/images/files.svg');
}
.quick-links li:nth-child(2) .bubble-icon{
	background-color: #f15a4e;
}
.quick-links li:nth-child(2) h3{
	color: #f15a4e;
}
.quick-links li:nth-child(3) .bubble-icon{
	background-color: #22bcad;
}
.quick-links li:nth-child(3) h3{
	color: #22bcad;
}

/* -------------------------------------------------- */
/* Product Detail 
/* -------------------------------------------------- */
.product-cols{
	display: flex;
	flex-wrap: wrap;
	padding: 24px 0;
	margin: -24px;
}
.product-col-1,
.product-col-2{
	width: 50%;
	padding: 24px;
}

/* -------------------------------------------------- */
/* Product Detail : Gallery
/* -------------------------------------------------- */
.gallery{
	display: flex;
	margin: -6px;
}
.gallery-thumbs{
	padding: 6px;
}
.gallery-thumbs li{
	border: 2px solid #e6e6e6;
	margin-bottom: 6px;
	line-height: 0;
}
.gallery-thumbs li:hover{
	border-color: #d1d1d1;
	cursor: pointer;
}
.gallery-thumbs img{
	width: 60px;
	height: auto;
}
.gallery-img{
	flex-grow: 1;
	padding: 6px;
	text-align: center;
}
.lrg-img{
	width: 100%;
	max-width: 600px;
	height: auto;
}

/* -------------------------------------------------- */
/* Product Detail : Definitions
/* -------------------------------------------------- */
.product-defs{
	display: flex;
	flex-wrap: wrap;
}
.product-defs dt,
.product-defs dd{
	padding: 6px 0;
	line-height: 1.4em;
}
.product-defs dt{
	width: 30%;
	padding-right: 12px;
	text-align: right;
	color: #522f91;
}
.product-defs dd{
	width: 70%;
}
.fig-list{
	display: flex;
	margin: -3px;
}
.fig-list li{
	padding: 3px;
	line-height: 0;
}
.fig-list img{
	display: inline-block;
	width: 36px;
	height: 36px;
}

.links-list li{
    display: block;
    background: url('../images/bullet.svg') no-repeat left .5em;
    padding-left: 14px;
    margin-bottom: 3px;

}

.links-list a{
    color: #484747;
    text-decoration: underline;
}


/* -------------------------------------------------- */
/* Product Detail : NDC Family
/* -------------------------------------------------- */
.ndc-fam{
	padding: 24px 0 72px 0;
}
.ndc-fam-headers,
.ndc-fam-items a{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 6px;
}
.ndc-fam-headers{
	background: #522f91;
	color: #fff;
	padding: 12px 0;
}
.ndc-fam-headers li,
.ndc-fam-items span{
	text-align: center;
	padding: 3px;
	width: 27%;
}
.ndc-fam-headers li:first-child,
.ndc-fam-items span:first-child{
	width: 19%;
}
.ndc-fam-items img{
	width: 60px;
	height: auto;
}
.ndc-fam-items a{
	border: 2px solid #e6e6e6;
}
.ndc-fam-items a:hover{
	border-color: #d1d1d1;
}
.ndc-fam-items .active a,
.ndc-fam-items .active a:hover{
	border-color: #522f91;
	color: #522f91;
	text-decoration: underline;
}

/* -------------------------------------------------- */
/* footer
/* -------------------------------------------------- */
footer{
	padding: 72px 0;
	color: #939393;
	font-size: 14px;
}
footer p{
	margin-bottom: 9px;
}
.foot-content{
	display: flex;
	margin: -24px;
}
.foot-legal,
.foot-social{
	padding: 24px;
}
.foot-legal{
	flex-grow: 1;
}
.foot-social ul{
	display: flex;
	margin: -4px;
}
.foot-social li{
	padding: 2px;
}
.social-icon{
	display: inline-block;
	width: 26px;
	height: 43px;
	background: #939393 no-repeat center;
	border-radius: 13px;
}
.social-icon.fb{
	background-image: url('/assets/images/facebook.svg');
}
.social-icon.fb:hover{
	background-color: #3b5998;
}
.social-icon.tw{
	background-image: url('/assets/images/twitter.svg');
}
.social-icon.tw:hover{
	background-color: #55acee 
}
.social-icon.yt{
	background-image: url('/assets/images/youtube.svg');
}
.social-icon.yt:hover{
	background-color: #b31217  
}
.social-icon.in{
	background-image: url('/assets/images/linkedin.svg');
}
.social-icon.in:hover{
	background-color: #0077b5   
}

/* -------------------------------------------------- */
/* Breakpoints
/* -------------------------------------------------- */
@media screen and (max-width: 1278px) {
	.results li{
		width: 25%;
	}
}
@media screen and (max-width: 958px) {
	.results li{
		width: 33.33%;
	}
	.product-col-1,
	.product-col-2{
		width: 100%;
	}
	.product-defs dt,
	.product-defs dd{
		padding-top: 9px;
		padding-bottom: 9px;
		border-bottom: 1px solid #e6e6e6;
	}
	.product-defs dt:last-of-type,
	.product-defs dd:last-of-type{
		border-bottom: none;
	}
	.product-defs dt{
		text-align: left;
	}
}
@media screen and (max-width: 720px) {
	.results li{
		width: 120px;
	}
}
@media screen and (max-width: 700px) {
	.quick-links li{
		width: 100%;
	}
	.product-defs dt,
	.product-defs dd{
		width: 50%;
	}
}
@media screen and (max-width: 650px) {
	.summary{
		flex-direction: column-reverse;
	}
	.summary-text{
		width: 100%;
	}
	.summary-img{
		width: 60%;
		margin-bottom: 18px;
	}
}
@media screen and (max-width: 600px) {
	.custom-select,
	.search-fields button,
	.select-items{
		width: 100%;
	}
	.select-selected{
		border: 2px solid #e6e6e6;
		border-bottom: none;
	}
	.search-fields input{
		border: 2px solid #e6e6e6;
		margin-bottom: 9px;
	}

	.ndc-fam-headers{
		display: none;
	}
	.ndc-fam-items a{
		padding: 12px;
	}
	.ndc-fam-items span,
	.ndc-fam-items span:first-child{
		width: 100%;
	}
	.ndc-fam-items span:first-child{
		display: none;
	}
}
@media screen and (max-width: 520px) {
	.results li{
		width: 100%;
	}
}
@media screen and (max-width: 500px) {
	.summary-img{
		width: 70%;
	}
	.product-defs dt,
	.product-defs dd{
		width: 100%;
		padding: 0;
		border: none;
	}
	.product-defs dd{
		padding: 3px 0 9px 0;
		margin-bottom: 9px;
		border-bottom: 1px solid #e6e6e6;
	}
	.foot-content{
		flex-wrap: wrap;
		flex-direction: column-reverse;
		margin: -9px;
	}
	.foot-legal,
	.foot-social{
		width: 100%;
		padding: 9px;
		text-align: center;
	}
	.foot-social ul{
		justify-content: center;
	}
}
@media screen and (max-width: 380px) {
	.summary-img{
		width: 85%;
	}
}