html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video 							{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section 			{ display: block; }
body 												{ line-height: 1; }
ol, ul 												{ list-style: none; }
blockquote, q 										{ quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after 									{ content: ''; content: none; }
table 												{ border-collapse: collapse; border-spacing: 0; }
a 													{ color: inherit; text-decoration: none; cursor: pointer; }
a:hover 											{ text-decoration: underline; }
:focus 												{ outline: 0; }
body 												{ font-family: Georgia, Century, Times, serif; font-size: 15px; line-height: 22px; color: #333; }
.clearfix:after 									{ content: ""; display: table; clear: both; } 

/* ### BASIC LAYOUT ### */
@-ms-viewport 	{ width: device-width; }
@-o-viewport 	{ width: device-width; }
@viewport 		{ width: device-width; }

html, body			{ width: 100%; overflow-x: hidden; }
.l-viewport 		{ position: relative; left: 0; margin: auto; width: 100%; background-color: #FFF; }
.l-header			{ position: absolute; top: 15px; left: 0; background-color: transparent; z-index: 1000; transition: .2s background-color linear; }
.l-header,
.l-footer,
.l-content			{ width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.l-content			{ /* min-height: 1000px; */ }
.l-footer			{ background-color: #333; padding-top: 40px; padding-bottom: 40px; }
.js-is-header-fixed { position: fixed; top: 0; background-color: #333; }

.bbn-sprite 	{ 
	background-image: url('../images/babynames_sprite.png');
	background-repeat: no-repeat;  
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {
	.bbn-sprite { 
		background-image: url('../images/babynames_sprite2x.png');
		background-size: 495px 720px; 
	}
}

body.widget-random	 				{ background-color: #333; }
.m-widget-button					{ cursor: pointer; color: #FFF; background-color: #EE7422; padding: 5px 12px 4px; border: 1px solid #EE7422; font-size: 12px; float: right; font-family: Arial, sans-serif; }

.m-widget-random 					{ width: 100%; display: block; text-align: center; position: relative; box-sizing: border-box; }
.m-widget-random a					{ transition: .1s all linear; }
.m-widget-random a:hover			{ text-decoration: none; border-bottom-color: #d1661f; } 					
.m-widget-random__img				{ display: block; margin: auto; width: 100%; max-width: 590px; }
.m-widget-random__content 			{ background-color: #333; color: #FFF; margin-top: -22px; padding: 20px; }
.m-widget-random__title 			{ font-size: 20px; font-family: 'Comfortaa', Arial, sans-serif; line-height: 26px; }
.m-widget-random__headline			{ font-size: 14px; font-family: 'Comfortaa', Arial, sans-serif; line-height: 20px; }
.m-widget-random__headline--logo	{ background-image: url('http://projects.huffingtonpost.co.uk/assets/images/intl/hp-logo-mini.png'); background-position: 0 0; background-repeat: no-repeat; display: inline-block; width: 16px; height: 16px; background-size: 16px; vertical-align: text-top; margin-right: 5px; border-right: 1px solid #FFF; padding-right: 4px; }
.m-widget-random__name 				{ font-family: georgia, sans-serif; font-size: 30px; font-weight: 600; line-height: 36px; font-style: italic; border-bottom: 2px solid #ee7422; margin-top: 10px; display: inline-block; }
.m-widget-random__meaning 			{ font-family: georgia, sans-serif; font-size: 16px; line-height: 24px; font-style: italic; margin: 10px 0; padding: 0 20px; }
.m-random__refresh__icon			{ background-position: -391px -277px; width: 20px; height: 20px; display: inline-block; vertical-align: bottom; margin-left: 5px; }
.m-widget-random__refresh 			{ cursor: pointer; background-color: transparent; font-family: 'Comfortaa', Arial, sans-serif; font-size: 18px; color: #FFF; position: relative; display: block; margin: auto; padding-right: 40px; border: 2px solid #ee7422; border-radius: 3px; padding: 7px 15px 7px 20px; margin: 10px auto 20px; transition: .1s all linear; }
.m-widget-random__refresh:hover 	{ background-color: #ee7422; }
.m-widget-random__refresh--active .m-random__refresh__icon { animation: refresh .3s; animation-iteration-count: 1; animation-fill-mode: forwards; }  

.m-widget-random__link 				{ font-size: 14px; border-bottom: 1px solid #ee7422; }

.m-widget-name 							{ padding: 15px 20px 24px; border: 2px solid #EE7422; }
.m-widget-name__title 					{ font-weight: bold; font-family: georgia, Arial,sans-serif; font-size: 15px; }
.m-widget-name__form 					{ margin-top: 10px; width: 100%; position: relative; }
.m-widget-name__form__input__wrapper 	{ position: absolute; left: 0; right: 72px; }
.m-widget-name__form__input 			{ width: 100%; padding: 4px; font-size: 13px; font-family: helvetica; margin: 0; float: left; border: 1px solid #CCC; border-right: 0; color: #787878; }

@-webkit-keyframes refresh {
    to {transform: rotate(360deg);}
}

@keyframes refresh {
    to {transform: rotate(360deg);}
}

@media only screen and (max-width: 320px) { 		/* Mobile Wide ( from 480px to 767px ) */							
	.m-widget-random__name 		{ font-size: 32px; }
}

@media only screen and (max-width: 480px) { 
	.m-widget-random__img 		{ max-width: 300px; }
	.m-widget-random__content	{ margin-top: -11px; }
}
@media only screen and (min-width: 481px) and (max-width: 590px) { 		
	.m-widget-random__img 		{ max-width: 500px; }
	.m-widget-random__content	{ margin-top: -19px; }
}


@media only screen and (max-width: 500px) {
	.m-widget-name__title 					{ font-family: Arial; }
	.m-widget-name__form__input__wrapper	{ right: 115px; }
	.m-widget-name__form__input 			{ border: 1px solid #C9C9C9; padding: 10px; border-radius: 5px; box-sizing: border-box; }
	.m-widget-name__form__submit			{ background-color: #FFF; color: #265D4D; border: 1px solid #265D4D; border-radius: 5px; padding: 10px 30px; font-size: 13px; }

}