/* ====================================================================================================
	FONT IMPORTS
==================================================================================================== */

@import url('//fonts.googleapis.com/css?family=Roboto:300,300i,400,400i&subset=latin-ext');


/* ====================================================================================================
	NORMALIZE AND FINE TUNNING
==================================================================================================== */

* {
	box-sizing:border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-text-size-adjust: 100%;

}

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background-color:rgba(0,0,0,0.3); border-radius:2px; }
::-webkit-scrollbar-thumb { background-color:rgba(0,0,0,0.3); border-radius:2px; }


a, a:hover, a:active, a:visited { color:#222; text-decoration:none; }


/* ====================================================================================================
	TYPOGRAPHY
==================================================================================================== */

html,
body { height: 100%; }

html { font-size: 62.5%; }
body { font:1.6rem/2rem Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif; color:#222; font-weight:400; background-color:#FFF; cursor:default; }

h1 { font-family:Roboto; font-size:4.6rem; font-weight:300; /*font-style:italic;*/ line-height:5.0rem; padding:0; margin:0 0 1rem 0; }
h2 { font-family:Roboto; font-size:4.0rem; font-weight:300; /*font-style:italic;*/ line-height:4.4rem; padding:0; margin:0 0 1rem 0; }
h3 { font-family:Roboto; font-size:3.4rem; font-weight:300; /*font-style:italic;*/ line-height:3.8rem; padding:0; margin:0 0 1rem 0; }
h4 { font-family:Roboto; font-size:2.8rem; font-weight:300; /*font-style:italic;*/ line-height:3.2rem; padding:0; margin:0 0 1rem 0; }


/* ====================================================================================================
	MISC & GENERAL STYLES
==================================================================================================== */

.boxed-layout { width:980px; margin:0 auto;	padding:0 0 0 0; }
.boxed-layout:after { content:''; display:table; clear:both; }
.group:after { content:''; display:table; clear:both; }
.clearfix:after { content:''; display:table; clear:both; }


.animated {
	transition: all ease 200ms;
	-webkit-backface-visiblity: hidden;
	backface-visiblity: hidden;
	transform: translate3d(0,0,0);
	transform-style: preserve-3d;
}


#site-wrapper { min-width:360px; }


/* ====================================================================================================
	GENERAL VISUAL STYLES
==================================================================================================== */

.white-box { background-color:#FFF; box-shadow:0 3px 3px rgba(0,0,0,0.1); padding:20px; margin-bottom:20px; }


/* ====================================================================================================
	HEADER
==================================================================================================== */

#main-header {}

#main-header #top-bar { height:104px; padding:20px 20px; background-color:#A00; }

#main-header #top-bar #search-bar { position:relative; width:100%; z-index:1; }
#main-header #top-bar #search-bar i { position:absolute; top:0; left:50%; display:block; width:64px; height:64px; padding:8px; margin-left:-32px; background-color:#FFF; border-radius:5px; z-index:1; opacity:1; }
#main-header #top-bar #search-bar i svg { display:block; fill:#222; }
#main-header #top-bar #search-bar input { position:relative; display:block; font-family:Roboto; font-size:3rem; font-weight:400; font-style:italic; width:64px; height:64px; margin:0 auto; text-align:center; background-color:#FFF; border-radius:5px; border:none; z-index:0; opacity:0; }


#main-header #top-bar #search-bar.active { z-index:99; }
#main-header #top-bar #search-bar.active i { display:none; opacity:0; }
#main-header #top-bar #search-bar.active input { width:100%; opacity:1; }

#main-header #top-bar #user-menu { position:absolute; right:20px; top:20px; z-index:3; }
#main-header #top-bar #user-menu a { display:block; width:64px; height:64px; }
#main-header #top-bar #user-menu i { display:block; width:64px; height:64px; padding:8px; }
#main-header #top-bar #user-menu i svg { display:block; }

#main-header #top-bar #main-menu { position:absolute; left:20px; top:20px; z-index:2; }
#main-header #top-bar #main-menu a { display:block; width:64px; height:64px; }
#main-header #top-bar #main-menu i { display:block; width:64px; height:64px; padding:8px; }
#main-header #top-bar #main-menu i svg { display:block; fill:#FFF; }



#main-header #bottom-bar { font-size:1.6rem; height:40px; line-height:20px; padding:10px 20px; background-color:#272727; color:#BBB; text-shadow:0 1px 1px rgba(0,0,0,0.8); }
#main-header #bottom-bar #search-info span { color:#FFF; }


/* ====================================================================================================
	MAIN PAGE CONTENT
==================================================================================================== */

#page-content { padding:20px; }




/* ====================================================================================================
	RESPONSIVENESS
==================================================================================================== */


@media (max-width: 400px) {

}