/**
* CSS elements shared throughout the Davis Vision Public website interface.
* 1) Rewritten HTML
* 2) Header and Logo
* 3) Main Menu
* 4) Active (styles assocated with behavior of open/closed menu)
* 5) Form Elements
* 6) Footer
* 7) Bootstrap Overrides
* 8) Square Buttons
* 9) Media Queries
*/

/* 1) Rewritten HTML */
html, body{height:100%;}
.maincontainer {
	font-family: Helvetica, Arial, sans-serif;
	color: #343435;
	max-width: 100%;
	/*margin: 0 auto;*/
	overflow: hidden;
	width: 100%;
	min-width: 320px;
}
a:link, a:visited, a:hover, a:active {color: #172984;}
a:focus { outline: none; }
.content a.more-link {
	font-family: 'Roboto Condensed',sans-serif;
	font-size: 14px;
	text-transform: uppercase;
}
.breadcrumb { background-color: transparent; color: #7d7d7d; font-size: 12px; margin: 0 0 8px; padding: 0 15px; }
.breadcrumb li.active { background: none; color: #7d7d7d; }
.breadcrumb > li { background: url(../../img/article/breadcrumb-slash.png) no-repeat right 5px;height: 23px;margin-right:6px;padding-right:10px; }
.breadcrumb a { color: #9097d2; }
.breadcrumb a:hover { color: #172984; }
.breadcrumb > li + li:before {
    content: none;
}

h1 { color: #0d113f; font-family: 'Roboto Condensed', sans-serif; font-size: 34px; font-weight: 700; margin-bottom: 0; text-transform: uppercase; }
h2 { color: #0d113f; font-family: 'Roboto Condensed', sans-serif; font-size: 24px; font-weight: 400; text-transform: uppercase; }
h3 { color: #0d113f; font-family: 'Roboto Condensed', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.5em; text-transform: uppercase; }
h4 { color: #545454; font-family: 'Roboto Condensed', sans-serif; font-size: 20px; font-weight: 300; line-height: 1.5em; text-transform: uppercase; }
h5 { color: #7d7d7d; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5em;  }
h6 { color: #7d7d7d; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: italic; font-weight: 400; line-height: 1.5em; }


/* 2) Header and Logo */
.logo{
	display:block;
	text-align: center;
	width:197px;
	float:left;
}
.innerheader{
	max-width:960px;
	text-align: right;
	padding:30px 16px 15px 22px;
}
.innerheader .signin{
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 18px;
	font-weight: 300;
	text-transform: uppercase;
	color: #fff;
}
.innerheader form{display:inline;}
.languageButton{color:#fff; text-transform: uppercase; margin-right:4px;}

.fa-search{color:#fff;}

.mainheader{
	height:100px; 
	background:#000741;
}
.mobileheader{
	background:#000741;
	position:absolute;
	width:100%; 
	display:none;
}
#togglebutton{
	display: none; 
	color:#fff;
	font-size: 32px;
	text-decoration:none; 
	position:absolute; 
	background: none; 
	padding:0 10px 0 0; 
	margin:10px 15px 0 21px;
}
.utilnav{
	font-family:Helvetica, Arial, sans-serif; 
	font-weight: 300; 
	color:#fff; 
	text-transform:uppercase; 
	margin-top: 8px;
	position:relative; 
	text-align:right;
}
.utilnav a{cursor:pointer; color:#fff;}
.lock-icon{margin-top:-7px;padding-right:5px;}
.textsizelabel{display:inline-block; margin-left:4px;}
.smallfont{font-size: 11px; margin:0 10px 0 12px;}
.mediumfont{font-size: 14px; margin-right:10px;}
.largefont{font-size: 17px;}
.sizelink.activesize{font-weight:bold !important; text-decoration: underline;}

/* 3) Main Menu */
.skip-navigation
{ 
position:absolute; 
left:-10000px; 
top:auto; 
width:1px; 
height:1px; 
overflow:hidden;
} 
 
.skip-navigation a:focus 
{ 
position:absolute; 
width:auto; 
height:auto; 
}


.hidden {
    display: none;
}



.signinlink{
	display:block;
	width:240px;
	height:90px;
	background: #172984;
}
.signinlink:hover{
	background:#000741;
}
.mainmenu {
	font:500 18px/20px 'Roboto Condensed', sans-serif;
    color:#fff;
    padding: 0;
    margin: 20px auto 0;
    width: 90%;
}
.mainmenu i{
	text-indent: -999em;
}
.mainmenu ul{
	margin:0;
	padding:0;
}
.mainmenu a{color:#fff;}
.mainmenu > li{
	list-style: none;
}
.mainmenu > li > a {
	display: block;
	color: #000741;
	font-size: 24px;
	padding: 19px 12px 19px 13px;
	cursor: pointer;
	background-color: #f2f2f5;
	border-bottom:1px solid #cccdd9;
	border-left:1px solid #cccdd9;
	border-right:1px solid #cccdd9;
	text-decoration: none;
	text-transform: uppercase;
}
.mainmenu > li:first-child > a { border-top: 1px solid #cccdd9; }
.mainmenu .active li > a{
	color:#999;
}
.fa-chevron-right, .fa-chevron-down{float:right; color:#000741; font-size: 23px;}
.active{padding-bottom:10px;}
#mainnav .active li{list-style:none; margin-bottom:0;}

.mainnav-chevron-right, .mainnav-chevron-down {
	background: url('../../img/chevron-sprite.png') transparent no-repeat;
	float: right;
	height: 18px;
	margin-top: 2px;
	width: 18px;
}
.mainnav-chevron-right {
	background-position: 0 0;
}
.mainnav-chevron-down {
	background-position: 0 -18px;
}
.mainmenu li a:hover .mainnav-chevron-right {
	background-position: -18px 0;
}
.mainmenu li a:hover .mainnav-chevron-down, .mainmenu > li.active a .mainnav-chevron-down {
	background-position: -18px -18px;
}
.mainmenu li li > a{padding:5px;}
.mainmenu li li { border: none; font-size:13px; }
.mainmenu > li a:hover,
.mainmenu li.mainmenu-current a, .mainmenu > li.active > a {
	color:#fff;
	background: #000741;
	border-bottom:1px solid #cccdd9;
}
.mainmenu li li a:hover {
	background: transparent;
	color: #172984;
}
.mainmenu .active { border-bottom: 1px solid #cccdd9; }
.mainmenu ul{display:none;}
.mainmenu .active ul{display:block; padding-left: 0;}
.mainmenu .active ul li {padding: 0; width: 100%;}
.mainmenu .active ul li a { color: #172984; display: block; padding: 10px; width: 100%; }
.mainmenu .active ul li a:hover { background-color: #cdcdd9; border-bottom: none; text-decoration: none; }
.utilmenu {margin:20px auto -1px; padding:0; width: 90%; position: relative; }
.utilmenu a{ font:400 14px 'Roboto Condensed', sans-serif; text-decoration:none; color:#000741; display:inline-block; width:100%; padding:10px 10px 10px 15px;}
.es .vision-reference-list li a { padding-right: 35px; }

.utilmenu > li.active > a{
	color:#fff;
	background: #000741;
}
.utilmenu .active li a{
	color:#172984;
}
.utilmenu a:hover{
	color:#fff;
	background: #000741;
}
.utilmenu ul{
	margin:0;
	padding: 0;
}
.utilmenu > li{	border-bottom:1px solid #cccdd9; display:block; list-style:none; margin:0; padding:0; position: relative; }
.utilmenu li ul {display: none;}
.utilmenu li.active > ul {display: block;}
.utilmenu li { position: relative;}
.utilmenu i{
	background: url("../../img/chevron-sprite.png") no-repeat scroll -17px -36px transparent;
	display: block;
	height: 10px;
	width: 10px;
	position: absolute;
	right: 15px;
	text-indent: -999em;
	top: 15px;
}
.utilmenu li li i{
	background-position: -61px 0; 
}
.utilmenu li a:hover {background-color: #cdcdd9;}
.utilmenu li a:hover i{background-position: -26px -36px; }
.utilmenu li.active a:hover i{background-position: -61px 0; }
.utilmenu li.active > a i{background-position: -49px -36px;}
.utilmenu li.active > a:hover i{background-position: -49px -36px;}
.mainmenu .active .current a, .utilmenu li.current a { font-weight: 700;}
.utilmenu li ul {padding-left: 0;}
.utilmenu li li li a{padding:10px 10px 10px 30px;}

.utilmenu li.active li.active i{
	background-position: -36px -36px; 
}
.utilmenu li.active li.active a:hover i{
	background-position: -36px -36px; 
}

.nav{background-color: #e6e7eb; border-top: 15px solid #fff; margin-left: -140%; float: left; padding-bottom: 100px;}
.nav-gray-bg {background:#e6e7eb; position:fixed; left:0; top:0; height:100%; margin-left: -140%; z-index: -1;}
.main_content { margin-left: 0; float: left; }
.main_content{width: 100%;}
.main_content {position: relative; max-width: 70em; /*margin: 0 auto;*/}
.content{padding:15px 15px 36px;}
.content h1:first-child{margin-top:0;}

/* 4) Active */
body.active .main_content{
	width:75%;
	max-width:720px;
}
body.active .nav {margin-left: 0; width: 240px;}
body.active .main_content { margin-right: -100%; }
body.active .nav-gray-bg { margin-left: 0; width: 240px!important;}

body.active .main_content:before {
	content: " ";
	position: absolute;
	z-index: -1;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;	
}
/* 5) Form Elements */
#timezone{display:none;}
.old-style-frame { width: 100%; }
/* 6) Footer */
.mainfooter{
	background:#000741;
	font-size:12px;
	line-height: 19px;
	font-weight:bold;
	color:#fff;
    min-height:100px;
}
.mainfooter a:link, .mainfooter a:visited{
	color:#fff;
	padding:0 4px;
}
.innerfooter{
	max-width: 960px;
	padding:25px 25px 35px 25px;
	position: relative;
}
.innerfooter.row {
    margin-right:0;
}
.urac {
	width:135px;
	height:110px;
	position: absolute;
	top:-27px;
	left:25px;
}
.urac span{display:none;}
.footersearch{
	text-align:right;
	padding-top:5px;
}
#signin .form-group,  #signin .feedback, #signin p { width:60%; }

.design_content .design_textfield {
    width:100%!important;
}

.footerlinks{
	padding-left:4%;
}

.footerlinks a:first-child {
    padding-left: 0;
}

/* HOME AND LANDING */
.landing-h2 { border-bottom: 1px solid #b0b0b0; font-size: 20px; font-weight: 300; color: #b0b0b0; text-transform: uppercase; }	

/* 7) Bootstrap Overrides */
.btn, a.btn {
 	font-family:'Roboto Condensed', sans-serif;
 	border:0;
	border-radius:0;
	text-transform: uppercase;
	padding:6px 16px;
	color:#fff;
}
a.btn-lg {
    padding: 12px 16px;
}
.btn-primary {
    background-color: #172984;
}
.btn-primary:hover{
	background-color: #000741;
}
.form-control{padding: 4px; border-radius: 0;}
.input-group-addon{
	background: #b0b0b0;
	border:0;
	border-radius: 0;
	padding:6px 8px;
	cursor:pointer;
}

/* Square Buttons */
.box {
	background-color: #D0D1D9;
	display: block;
	margin-top: 15px;
	padding: 20px;
	text-align: center;
	text-transform: uppercase;
}
.box-sm:hover {
	background-color: #172984;
	color: #8c92d1;
	text-decoration: none;
}
.box-sm:active {
	text-decoration: none;
}
.box i {
	font-size: 32px;
	color: #172984;
}
.box-sm strong { display: block; }
.how-box, .clarity-box { background-color: #c5c8e8; }
.demyst-box, .pov-box { background-color: #e2e4f3; }

i.pov-glasses {
	background: url('../../img/pov-glasses.png') 0 0 no-repeat;
	display: block;
	height: 32px;
	margin: 0 auto;
	width: 55px;
}
i.how-play {
	background: url('../../img/how-play.png') 0 0 no-repeat;
	display: block;
	height: 32px;
	margin: 0 auto;
	width: 39px;
}
i.demyst-question {
	background: url('../../img/demyst-question.png') 0 0 no-repeat;
	display: block;
	height: 32px;
	margin: 0 auto;
	width: 32px;
}
i.eye-icon {
	background: url('../../img/eye.png') 0 0 no-repeat;
	display: block;
	height: 32px;
	margin: 0 auto;
	width: 34px;
}
.box-sm:hover i, .box-sm:hover h3, .box-sm:hover h2, .box-sm:hover strong, .box-sm:hover p {
	color: #fff!important;
}
.box-sm:hover i.pov-glasses, .box-sm:hover i.how-play, .box-sm:hover i.demyst-question, .box-sm:hover i.eye-icon {
	background-position: 100% 0;
	opacity: 0.5;
}
.box-sm.clarity-box:hover i { opacity: 0.5; }
.box-sm h3, .box-sm strong {
	font: 400 24px/26px 'Roboto Condensed',sans-serif;
	margin-bottom: 6px;
	margin-top: 0;
}
.box-sm p { color: #172984; font: 300 14px 'Roboto Condensed',sans-serif; }
.box-sm {
	height: 160px;
	padding: 25px;
}
.box-sm i {
	margin-bottom: 7px;
}
.box-md {
	height: 335px;
	margin-top: 15px;
}
.box-lg {
	height: 647px;
}
/* 9) Media Queries */

/* Content container width control to fix issues with resizing */
@media screen and (max-width: 920px) {.content { width: 98%; }}
@media screen and (max-width: 870px) {.content { width: 96%; }}
@media screen and (max-width: 820px) {.content { width: 94%; }}
@media screen and (max-width: 780px) {.content { width: 92%; }}

@media screen and (max-width:  767px){
	.featured-article{margin-bottom: 45px;}
}
@media screen and (max-width: 768px){
	body.active .main_content,
    .content{
        width: 100%;
    }
	.logo{
		float:none;
		margin: 20px auto 0;
		width: 100%;
	}
	.logo img{
		width:170px;
		height:auto;
	}
	.languageButton {
		padding: 0 10px 0 0;
		float: left;
	}
	.utilnav{
		padding: 0 15px 0 20px;
	}
	.utilmenu{
		font-size:11px;
	}
	.mobileheader{
		display:block;
		height:100px;
	}
	.sizelink{padding:10px;}
	.smallfont{margin:0}
	.mediumfont{margin-right:0;}

	.mainheader{display:none;}
	.innerheader{display:none;}
	.nav, .main_content, .btn-group, .nav-gray-bg { 
		-webkit-transition: .4s all ease;
		-moz-transition: .4s all ease;
		transition: .4s all ease;
	}
	#togglebutton{display:block;}

	.mobileheader .signin{
		font-size: 32px;
		color: #fff;
		padding:0 6px 0 10px;
		display:block; 
		position: absolute;
		right:15px; 
		top:0;
		margin-top:10px;
	}
	.content{padding:120px 20px 20px 20px;}

	.innerfooter{
		padding:0 25px 40px;
	}
    .innerfooter.row {margin-left:0; margin-right:0;}
	.footersearch .input-group{
		width:60%;
		margin:0 auto;
	}

	.urac img{display:none;}
	.urac span{display:block;}
	.urac {
		width:100%;
		height:40px;
		position: relative;
		text-align: center;
		top:0;
		left:0;
	}
	.footerlinks{
		line-height:25px;
		text-align: center;
	}
	.footersearch{
		padding-top:10px;
	}
	.signInButton{display:block; position: absolute; right:35px; top:45px;}
    #signin .form-group, #signin .feedback, #signin p {width:100%;}
	.nav {border-top: 0;}
}
@media screen and (max-width: 480px){
	.footersearch .input-group{
		width:100%;
		margin:0;
	}
}
iframe {
    width: 100%;
}
.form-group .alert-danger {
    display:none;
}