/**** CSS BASICS ****/

/**** FONTS ****/
@font-face { font-family: 'myFontKit01'; src: url('../fonts/ma-font-webfont.eot'); src: url('../fonts/ma-font-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/ma-font-webfont.woff2') format('woff2'), url('../fonts/ma-font-webfont.woff') format('woff'), url('../fonts/ma-font-webfont.ttf') format('truetype'), url('../fonts/ma-font-webfont.svg#myFontKit01') format('svg'); font-weight: normal; font-style: normal; }


/**** TAGS ****/
a { text-decoration: none; }
body { font: 12pt myFontKit01; color: #666; position: relative; }


/**** CLASSES ****/
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; z-index: 20; }
.Cent { text-align: center; }
.NoFloat { clear: both; font-size: 1px; width: 100%; }


/**** ================================================================================================ ****/


/**** DESKTOP VIEW ****/

/**** TAGS ****/
footer { border-top: 1px solid #bbb; padding: 16px 0; text-align: center; width: 100%; }
header { background-color: #fff; height: 60px; position: fixed; top: 0px; width: 100%; }
nav { background-color: #ddd; border-bottom: 1px solid #bbb; position: fixed; top: 60px; width: 100%; z-index: 10; }
section { margin: 0 auto; min-height: 640px; padding: 130px 0 20px; width: 1024px; }


/**** CLASSES ****/
.mycatalog { list-style: none; margin: 0; padding: 0; }
.mycatalog li { background-color: #eee; margin-bottom: 10px; }
.mycatalog a { color: #333; display: block; padding: 10px 20px; }
.mycatalog a:hover { background-color: #ccc; color: #fff; }

.myitems { list-style: none; text-align: center; }
.myitems li { display: inline-table; font-size: 1em; height: 240px; margin: 0 20px 24px 0; width: 200px; }
.myitems a { color: #999; }
.myitems img { height: 200px; width: 200px; }

.mynavigate { list-style: none; margin: 0; padding: 0; }
.mynavigate li { background-color: #eee; display: inline-table; margin-bottom: 10px; margin-right: 8px; }
.mynavigate a { color: #333; display: block; padding: 8px 10px; }
.mynavigate a:hover { background-color: #ccc; color: #fff; }



/**** COMBINED ****/
footer p { padding-bottom: 10px; }
footer a { color: #999; font-weight: bold; }
footer a:hover { color: #222; text-decoration: underline; }

header div.header-content { margin: 0 auto; padding-top: 14px; width: 1024px; }
header div.header-languages { float: left; line-height: 2; width: 180px; }
header div.header-languages ul { list-style: none; }
header div.header-languages ul li { display: inline-table; width: 60px; }
header div.header-languages ul li a { color: #999; }
header div.header-languages ul li a:hover { color: #222; text-decoration: underline; }
header div.header-title { float: right; width: 340px; }
header div.header-title p { font-size: 2.3em; line-height: 0; margin-top: 16px; text-align: right; }
header div.header-title a { color: #666; }

nav ul { font-size: 1.4em; height: 40px; margin: 0 auto; padding: 0; padding-top: 1px; width: 600px; }
nav li { display: inline; float: left; }
nav li a { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-right: 1px solid #fff; box-sizing: border-box; }
nav li:last-child a { border-right: 0; }
nav a { color: #fff; display: inline-block; line-height: 42px; text-align: center; text-shadow: 1px 1px 0px #757584; width: 200px; }
nav a:hover, nav a:active { background-color: #bbb; color: #fff; }
nav a#pull { display: none; }

section h2 { font-size: 1.3em; padding: 10px 0; }
section p { padding-bottom: 10px; }


/**** ================================================================================================ ****/


/* Screen 1024px and Lower */
@media only screen and (max-width: 1024px) {
	
	/**** TAGS ****/
	section { min-height: 480px; width: 94%; }
	
	
	/**** COMBINED ****/
	header div.header-content { width: 94%; }
	
}


/**** ================================================================================================ ****/


/* Screen 768px and Lower */
@media only screen and (max-width: 768px) {
	
	/**** TAGS ****/
	section { min-height: 640px; }
	
}


/**** ================================================================================================ ****/


/* Screen 600px and Lower */
@media only screen and (max-width: 600px) {
	
	/**** COMBINED ****/
	header div.header-title { width: 260px; }
	header div.header-title p { font-size: 1.8em; }
	
	nav ul { width: 480px; }
	nav a { width: 160px; }
	
}


/**** ================================================================================================ ****/


/* Screen 480px and Lower */
@media only screen and (max-width: 480px) {
	
	/**** TAGS ****/
	footer { font-size: 0.8em }
	header { height: 40px; }
	nav { border-bottom: 0; height: auto; top: 40px; }
	section { font-size: 0.8em; min-height: 360px; padding-top: 100px; }
	
	
	/**** CLASSES ****/
	.myitems li { height: 200px; width: 160px; }
	.myitems img { height: 160px; width: 160px; }
	
	
	/**** COMBINED ****/
	header div.header-content { padding-top: 6px; }
	header div.header-languages { font-size: 0.8em; padding-top: 2px; width: 140px; }
	header div.header-languages ul li { display: inline-table; width: 60px; }
	
	nav ul { font-size: 1em; display: none; height: auto; width: 100%; }
	nav li { display: block; float: none; width: 100%; }
	nav li a { border-bottom: 1px solid #ccc; border-right: 0; }
	nav a { text-align: left; text-indent: 25px; width: 100%; }
	nav a#pull:before { content: "Menu" }
	nav a#pull { background-color: #ccc; display: block; position: relative; width: 100%; }
	nav a#pull:after { background: url('../images/nav-icon.png') no-repeat; content: ""; display: inline-block; height: 40px; position: absolute; right: 12px; top: 12px; width: 30px; }
	
}


/**** ================================================================================================ ****/


/* Screen 375px and Lower */
@media only screen and (max-width: 375px) {
	
	/**** TAGS ****/
	header { height: 34px; }
	nav { top: 34px; }
	section { min-height: 400px; padding-top: 90px; }
	
	
	/**** CLASSES ****/
	.myitems li { height: 170px; width: 130px; }
	.myitems img { height: 130px; width: 130px; }
	
	
	/**** COMBINED ****/
	header div.header-title { display: none; }
	header div.header-languages { padding-top: 0; }
	
	nav a { text-indent: 15px; }
	nav a#pull:before { content: "mariana alzamora" }
	
}


/**** ================================================================================================ ****/


/* Screen 320px and Lower */
@media only screen and (max-width: 320px) {
	
	/**** TAGS ****/
	section { min-height: 320px; }
	
	
	/**** CLASSES ****/
	.myitems li { height: 220px; width: 180px; }
	.myitems img { height: 180px; width: 180px; }
	
}

/**** ================================================================================================ ****/


/* Screen 240px and Lower */
@media only screen and (max-width: 240px) {
	
	/**** COMBINED ****/
	nav a { text-indent: 10px; }
	nav a#pull { font-size: 1em; }
	
}