html, body {
    min-width: 300px;
	height: 100%;
}

/*
body, nav {
  min-width: 300px;
}
*/

nav ul li {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 1em;
}

.navbar-toggle .icon-bar {
    width: 45px;
    height: 6px;
    margin-top: 8px;
}

.main-div {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width: 100%;
	/*margin-bottom: -15em; /* The height of the footer */
	padding-top: 6em;
	padding-bottom: 6em;
	padding-left: 4%;
}


.navbar-toggle {
    position: relative;
    float: right;
    /* padding: 9px 10px; */
    margin-top: 0px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

img#logo {
	width: 180px;
	height: auto;
	/*margin-top: 8px;*/
}

.artWork-logo h3 {
	position: absolute;
	color: #191E2E;
	font-size: 1.3em;
	top: 5px;
	left: 195px;
	padding-bottom: 0px;
}

/* The principal title of all pages*/
h1.main-title {
	text-align: center;
	font-size: 2.5em;
	padding-top: 1em;
	padding-bottom: .5em;
}


h1 span.subhead {
	display: block;
	font-size: 1.5rem;
}


/*
h1.title-heading {
	text-align: center;
	font-size: 3em;
	color: #0C2A41;
}
*/

h2 {
	font-size: 2em;
	padding-bottom: 1em;
}

p {
	font-size: 1.2em;
}

ul#allList {
	font-size: 1.3em;
}

img.myself {
	width: 70%;
	height: auto;
	display: block;
	margin: 0 auto;
  border-radius: 50%;
  box-shadow: 1px 3px 5px rgba(0,0,0);
}

.image-slide {
	width: 20%;
}

/* Gallery  */
/*
 .exibition {
	margin-left: 5%;
}
*/
.gallery {
  position: relative;
}
.gallery img {
		width: 100%;
		height: auto;
	}
/*  VER O EFEITO TREMBLE*************************************/
  .gallery img:hover {
     /* cursor: pointer;*/
  	}
/*  VER O EFEITO TREMBLE ************************************/

.gallery .exibition {
		margin-bottom: 2em;
	}

.gallery img {
	box-shadow: 5px 5px 10px;
}

.gallery figcaption {
	font-size: 1em;
	padding-top: 1em;
	text-align: left;
	padding-left: 10%
}

/* breadcrumbs */
ul.breadcrumbs {
	position: absolute;
}

ul.breadcrumbs li {
	display: inline-block;
}

ul.breadcrumbs li a {
	margin-left: 5px;
}

ul li.technique {
	font-weight: 700;
}

article, aside {
	padding-top: 2em;
	padding-left: 3%;
	padding-right: 1em;
}

article.imgArtist h2,
article.canvasDraw h2 {
	text-align: center;
}



.canvasDraw header,
#theArtist header,
.story header {
		/*background-color: #393B38;*/
		color: #393B38; /*#FCFDFB;*/
		padding-bottom: 2em;
	}

span.play, span.stop {
	font-size: 1em;
}

button#stopAni {
	margin-left: .5em;
}


.outside {
/* To hide unwanted headings from view, using clip tecnique*/
	 position: absolute !important;
 clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	 clip: rect(1px, 1px, 1px, 1px);
}


/* Aside */


aside header {
	text-align: center;
	margin-bottom: -40px;
}

aside {
	font-size: .8em;
}

aside span {
	/*font-size: normal;*/
	font-weight: none;
	color: #941428;
}

/* Footer */

footer {
	margin-bottom: 0px;
	background-color: #C3C3C3; /*#1D2025;*/
	height: auto;
	color: #393B38;
	padding: 15px 0 15px 30px;
	clear: both;
}

footer h4 {
	font-size: 1.5em;
}

footer ul li {
	list-style-type: none;
}

footer a {
	font-size: 1.2em;
	text-decoration: none;
	color: #4F4F4F;
}

footer a:hover {
	color: #767676;
}

/* Canvas slide show */
canvas#secondCanvas {
		display: none;
	}

	canvas#firstCanvas {
		display: block;
		margin: 0 auto;
	}

	div#center {
		width: 300px;
		margin: 0 auto;
	}

	.playStop{
		display: none;
	}

/* Preços */
span.price {
  font-size: 1.5rem;
  box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
}


@media screen and (min-width: 350px) {
		.gallery img {
			width: 100%;
			height: auto;
			display: block;
			margin: 0 auto;
	}

}


@media screen and (min-width: 700px) {
		.gallery img {
			width: 80%;
			height: auto;
			display: block;
			margin: 0 auto;
	}

}



@media screen and (min-width: 1350px) {
	canvas#firstCanvas {
		display: none;
	}


	canvas#secondCanvas {
		display: block;
		margin: 0 auto;
	}

	div#center {
		width: 520px;
		margin: 0 auto;
	}

	.gallery img {
		width: 70%;
		height: auto;
	}

	.playStop{
		display: inline;
	}

}


@media screen and (min-width: 1600px) {
	canvas#firstCanvas,
	canvas#secondCanvas  {
		display: inline;
		height: 300px;
		width: auto;
	}

	div#center {
	width: 600px;
	display: block;
	margin: 0 auto;
	}

	.gallery img {
		width: 80%;
		height: auto;
	}

	.playStop{
		display: inline;
	}

}