/*  General CSS*/
body{
    background: #f3f3f3;
		font-family: arial;
}

.wrapper{
    width: 92.72727272727273%;
    margin: 0 auto;
}

header ul.social li a,
.main .work a .caption,
header nav ul li a{
    transition:all .1s linear;
    -webkit-transition:all .1s linear;
    -moz-transition:all .1s linear;
    -o-transition:all .1s linear;
}

h1, h2, h3, h4, h5 ,h6, h7{
    color: #cccccc;
    font-family: arial, verdana;
    letter-spacing: 0px;
    font-weight:bold;
}

p               {text-transform: uppercase;
                    font-weight:bold;}
h1              { font-size: 2em; margin: .67em 0; 
                    text-decoration: underline;
                    font-weight:bold;}
h2              { font-size: 2em; margin: .67em 0;
                    font-weight:bold;}
h3              { font-size: 1.17em; margin: .83em 0 }
h5              { font-size: .83em;                 
                    margin: 1.5em 0;
                    text-transform: uppercase;}

h6              { font-size: .75em; margin: 1.67em 0;
                    text-transform: uppercase }
h1, h2, h3, h4,
h5, h6          { font-weight: bold }


h7              { font-weight:bold; 
                  font-size:11px; 
                  text-decoration: none; 
                  text-transform: uppercase;
                  color: #cccccc; }

a               {color: #cccccc; }

h8               { font-weight: normal;
                    color: #cccccc;
                    font-size:11px;}


#contato-form{
	position: relative;
	width:80%;
	max-width:320px;
	padding: 20px 30px;
	margin:0 auto;
	border:3px solid #999;
	font-family:arial, verdana, Helvetica, sans-serif;
	font-size:12px;
	color:#555;
}
#contato-form p{
	margin:0 0 10px 0;
}
#contato-form ul li{
	list-style-type:none;
	border-bottom:1px solid #999;
	margin:10px 0;
}
#contato-form ul li:last-child {
	border-bottom:0;
}
#contato-form ul li input{
	border:0;
	background-color:#f3f3f3;
	width:80%;
}
#contato-form ul li textarea{
	border:1px solid #999;
	background-color:#f3f3f3;
	width:100%;
	margin:5px 0;
}
#contato-form input{
	border:1px solid #999;
	background-color:#f3f3f3;
	color:#555;
}



/*  Header  */
@media (min-width:1022px){
    header{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 290px;
        min-height: 100%;
        padding: 0 0 0 15px;
        background: #f3f3f3; 
        float: left;
        overflow: hidden;
        z-index: 1000;
    }

    header .logo{
        margin-top: 37px;
				font-size:25px;
				color:#cccccc;
				padding:0px 0 18px 10px;
    }
    header .logo a{
				text-decoration:underline;
				font-weight:bold;
                color: hsl(0, 0%, 80%);
    }

    header nav ul{
        display: block;
        overflow: hidden;
        list-style: none;
    }

    header nav ul li{
        display: block;
				padding:10px 0 0 10px;
    }

    header nav ul li a{
        color: #cccccc;
        font-family: arial, verdana;
        font-size: 22px;
        text-decoration: none;
            font-weight:bold;
        
    }

    header nav ul li a:hover,
    header nav ul li a.selected{
        color: #e6e6e6;
    }

    header nav ul li.submenuParent{
        padding-top:10px;
    }
   header nav ul.submenu{
        display: block;
        overflow: hidden;
        list-style: none;
    }

    header nav ul.submenu li{
        display: block;
				padding: 5px 0 0 0;
				text-align:right;
    }

    header nav ul.submenu li a{
        color: #555;
        font-family: arial, verdana;
        font-size: 11px;
        text-decoration: none;
				font-weight:bold;
    }

    header nav ul.submenu li a:hover,
    header nav ul.submenu li a.selected{
        color:#bbb;
    }



    header ul.obs li{
        display: block;
				margin-top:10px;
				padding:137px 5px 20px 15px;
        color: #cccccc;
        font-family: arial, ;
        font-size: 13px;
        text-decoration: none;
				text-align:right;
				line-height:21px;
                font-weight:bold;
    }


    header .footer{
        position: absolute;
        bottom: 20px;
    }


    header .rights p{
        color: #cccccc;
        font-family: arial, verdana ;
        font-size: 9px;
        line-height: 12px;
        font-weight: normal;
    }

    header .rights a{
        font-family: arial, verdana ;
        font-weight: normal;
        text-decoration: none;
    }
    #menu_icon,
    .close_menu{
        display: none;
    }

}

#menu_icon,
.close_menu{
    float: right;
    margin-right: 30px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: url('../img/men_icons.png') no-repeat;
}

#menu_icon{    
    background-position: 0 0;
}
.close_menu{
    background-position: -31px 0!important;
}


/*  Main  */
.main{
    width: 100%;
    height: 100%;
		padding-top: 140px;
    padding-left: 310px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 80;
    background: #f3f3f3;
    clear: both;
}
.galeria{padding-top: 110px;}
.sobreartista{padding-top: 150px;}

/*  Home/portfolio  */
.main .work{
    display: block;
    width: 25%;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
}

.main .work .media{
    width: 99%;
		height: 99%;
    vertical-align: middle;
		margin-bottom:1%;
}

.main .work .caption{
    position: absolute;
    display: block;
    width: 99%;
    height: 99%;
    top: 0; 
    left: 0;
    background: #f3f3f3;
    opacity: 0;
}


.main .work a:hover .caption{
    opacity: 1;
}


.work .caption .work_title{
    display: block;
    width: 99%;
    position: absolute;
    text-align: center;
    top:50%;
    margin-top: -30px;
}

.main .work .caption h1{
    position: relative;
    display: inline-block;
    max-width: 90%;
    padding: 20px 0;
    z-index: 77;
    color: #555;
    font-family: arial ,verdana ;
    font-size: 10px;
		font-weight:normal;
    letter-spacing: .5px;
    
}



/*  Inner Page  */
.top{
    width: 100%;
    height: 350px;
    overflow: hidden;
    display: block;
    position: relative;
	
}
.sobre{
    height: 150px;
}

.title{
    display: block;
	color: #cccccc;
    font-family: arial,verdana ;
    font-size: 14px;
    font-weight: bold;
    padding: 0 0 0 0;
    line-height: 15px;
    margin: 0!important;
    overflow: hidden;
    text-transform: uppercase;
}

.main h2{
	font-family: Arial,Verdana, Helvetica, sans-serif;
	font-size:13px;
    font-weight: normal;
	color:#cccccc;
    margin:10px 40% 10px 0;
	line-height:20px;
}

.main p{
	font-family: Arial,Verdana, Helvetica, sans-serif;
	font-size:12px;
	color:#cccccc ;
	margin:10px 40% 10px 0;
	line-height:20px;
}
.main h1.txtAssinatura{
	font-size:10px;
    font-family: Arial;
	font-weight:bold;
	margin:15px 70% 0 0;
	line-height:10px;
    text-transform: uppercase;
    text-decoration: none ;
	}

.main p.txtData{
	font-size:10px;
	margin:0 70% 5px 0;
	}

.main p.txtLegenda{
	font-size:10px;
	margin:0 70% 10px 0;
	line-height:12px;
	}
	
.main dl dt{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size:13px;
	color:#555;
	margin:10px 40% 0 0;
	line-height:20px;
}

.main dl dd{
	font-family:Arial, Verdana, Helvetica, sans-serif;
	font-size:12px;
	color:#555;
	margin:0 40% 10px 20px;
	line-height:20px;
}

/*  Tooltip  */
.tooltip{
    display: block;
    padding: 7px 10px;
    background: #454545;
    color: #fff;
    font-family: "raleway-regular", arial;
    font-size: 12px;
    position: absolute;
    white-space: nowrap;
    z-index: 999;
    opacity: 0;
    text-align: center;
    letter-spacing: .5px;

}

.tooltip:after{
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 3px 3px 0 3px;
    border-color: #454545 transparent transparent transparent;
    display: block;
    text-align: center;
    position: absolute;
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
}



/*  Responsive code  */
@media (max-width:1022px){

    header{
        display: block;
        width: 100%;
        min-height: 100px;
        padding: 0;
        position: relative;
        
    }
    header .logo{
        margin: 20px 0 0 20px;
        float: left;
				font-size:24px;
				font-weight:bold;
				padding:20px 10px 20px 10px;
                color: #cccccc;

    }
    header .logo a{
				text-decoration:underline;
                    color:#cccccc;
    }
		header ul.obs{
				clear:both;
				padding:0 30px 10px 30px;
				display: block;
        color: #cccccc;
        font-family: arial, verdana ;
        font-size: 12px;
        text-decoration: none;
				text-align:left;
				line-height:14px;
				list-style-type:none;
                font-weight:bold;
		}
    header .footer{
        display: none;
    }
    header #menu_icon,
    header .close_menu{
        float: right;
        margin: 15px 20px 0 0;
    }
    
    header nav{
        width: 100%;
        position: absolute;
        top: 80px;
        left: 0;
        z-index: 1040;
    }

    header nav ul{
        list-style: none;
        display: none;
        position: relative;
    }
    header nav ul li a{
        display: block;
        width: 100%;
        padding: 10px 30px;
        text-align: left;
        color: #cccccc;
        font-family: arial, verdana;
				font-weight:bold;
        font-size: 20px;
				border-top:1px solid hsl(0, 0%, 80%);
        text-decoration: none;
				font-weight:bold;
        background: #f3f3f3;
    }
    header nav ul li a:active{
        background: #cccccc;
    }
    header nav ul li:last-child{ border-bottom:0px color: #cccccc solid;}
		header nav ul.submenu li a{
        color: #cccccc;
        font-family: arial,verdana;
        font-size: 12px;
        text-decoration: none;
				font-weight:bold;
				padding: 15px 40px;
    }
    header nav ul.submenu li:last-child{ border-bottom:0;}

    #menu_icon,
    .close_menu,
    .show_menu{
        display: block;
    }
    .show_menu{
        display: block;
    }
		.title{
				padding: 0 0 0px 30px;
		}
		.main h2{
				padding: 0 0 0 30px;
		}
		.main h1.txtAssinatura{
			margin:15px 70% 0 30px;
		}

		.main p.txtData{
			margin:0 70% 5px 30px;
		}
		.main p.txtLegenda{
			margin:0 70% 10px 30px;
		}

    .main .work{
        width: 33.333333%;
    }
    .main{
        width: 100%;
        position: relative;
        padding-left: 0;
				padding-top: 0;
    }
		.main p{
			margin:15px 30% 0 30px;
		}
    #map{
        margin: 0!important;
    }
}

@media (max-width:550px){
    header .logo{
        margin: 20px 0 0 20px;
        float: left;
				font-size:33px;
				font-weight:bold;
				padding:20px 10px 20px 10px;
                color: #cccccc;
                
        
    }
		.galeria{padding-left: 30px;}
			.title{
					font-size: 15px;
					font-weight: bold;
					padding: 10px 0 2px 0px;
					line-height: 18px;
					margin: 0!important;
					overflow: hidden;
			}
     .main .work{
        width: 33.3333%;
    }
		.main p{
			margin:15px 30px 0 30px;
			font-size:16px;
		}
		.main h1.txtAssinatura{
			font-size:10px;
			font-weight:bold;
			margin:15px 30px 0 30px;
			line-height:12px;
			}
		
		.main p.txtData{
			font-size:10px;
			margin:0 30px 5px 30px;
			}
		.main p.txtLegenda{
			margin:0 30px 20px 30px;
			font-size:12px;
			line-height:14px;
		}
		.main dl dt{
			font-size:16px;
			margin:10px 30px 0 30px;
			line-height:20px;
		}

		.main dl dd{
			font-size:14px;
			margin:0 30px 10px 30px;
			line-height:20px;
		}
}