@import url(https://fonts.googleapis.com/css?family=Noto+Sans);

*, *:after, *:before {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

*, html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, pre, code {
padding: 0;
margin: 0;
border:0;
}

/*
*, html, body {
font-size:100%;
padding:0;
margin:0;
}

html, body {
height:100%
}
*/

body {
/*font-family: 'Noto Sans', Arial, sans-serif;*/
font-family: 'Noto Sans', Arial, sans-serif;
/*font-size:1.3em;*/
/*estava font-size: 20px; inicialmente*/
font-size:18px;
color:#333;

}

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

p, code {
line-height:1.7em;
text-align:justify;
margin-bottom:0.5em;
}

code {
font-family: 'Noto Sans', Arial, sans-serif;
background:#EFF0F1;
display: block;
white-space: pre;
padding:5px 10px;
margin:0.6em 0;
font-size:0.8rem;
}

ul {
list-style-image:url(../images/arrow.gif);
list-style-position:inside;
}

ul li {
padding:4px 0;
text-indent:-1em;
padding-left:1em;
}

pre {
font-family: inherit;
text-align:left;
white-space:pre-wrap; /* CSS3 browsers  */
white-space:-moz-pre-wrap !important; /* 1999+ Mozilla  */
white-space:-pre-wrap; /* Opera 4 thru 6 */
white-space:-o-pre-wrap; /* Opera 7 and up */
word-wrap:break-word; /* IE 5.5+ and up */
}

a {
/*color: #EAB974;*/
/*color: #41B7D8*/
/*color:#0099CC;*/
/*color:#4D8CF4;*/
/*color:#1C466E;*/
/*color:#3D5B99;*/
/*color:#607D8B;*/
color:#ff0206;
text-decoration:none;
text-shadow:1px 0px 0px #333;
}

a:hover {
color:#CF6E4A;
text-decoration:underline;
/*background:#ff0206;*/
color:#000000;
}

h1 {
font-size: 1.3em;
background:rgba(255,165,0,0.6);
line-height:1.6em;
display:inline-block;
text-align:left;
color:black;
text-shadow:0px 1px 2px #fff;
margin:20px 0px 15px 0px;
}

.posts h1 {
margin:0px;
line-height:1.6em;
display:inline;
}

h2 {
color: #47a3da;
font-size: 1.3em;
margin:30px 0px 15px 0px;
}

.no_margin_top {
margin-top:0px;
}

h3 {

}

h4 {
font-size: 0.6em;
font-weight:normal;
text-transform:uppercase;
padding:0px 5px;
color:gray;
line-height:1.6em;
text-align:right;
}

img {
/*max-width and height is for responsive images, so they shrink with lower screen resolutions if needed*/
max-width:100%;
height:auto;
border:0;
}

img.hover-img:hover {
opacity:0.5;
}

.ellipsis {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.icon-box {
border:2px solid #333;
border-radius:50px;
padding:3px;
margin-bottom:35px;
}

.icon-box > * {
vertical-align: middle;
}

.icon-box span {
margin-left:15px;
}

#top  {
position:relative;
}

#header {
width:100%;
position:fixed;
top:0;
left:0:
/*box-shadow: 0px 1px 1px 0px #888888;*/
}

#header:hover {
cursor:crosshair;
}

#head {
width:100%;
height:300px;
position:relative;
border-bottom:5px solid #754C24;
box-shadow: 0px 1px 5px 0px #333;
background-color:#ffffff;
transition: background-color 2s;
}

#head:hover {
background-color:#000713;
transition: background-color 5s;
}

#head-clouds {
position:absolute;
top:0;
left:0;
z-index:1;
width:100%;
height:100%;
background: url(../images/header_clouds.png) repeat;
}

#header-birds-box {
overflow:hidden;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}

#head-birds {
position:absolute;
top:0px;
left:-140px;
z-index:3;
width:140px;
height:127px;
background:url(../images/header_birds.gif) no-repeat;
}

#head-flag {
position:absolute;
bottom:41px;
right:842px;
z-index:4;
width:96px;
height:120px;
background: url(../images/header_flag.gif) no-repeat;
transform: rotate(-10deg);
}

#head-right {
position:absolute;
top:0;
right:0;
z-index:5;
width:1054px;
height:100%;
background:url(../images/header_right.png) no-repeat;
}

#head-left {
position:absolute;
top:0;
left:0;
z-index:2;
width:846px;
height:100%;
background:url(../images/header_left.png) no-repeat;
}

.pubs-carousel {
/*background:#333;
height:auto;*/
padding:0;
border:0 !important;
}

.carousel-cell {
width:100%;
height:212px;
overflow:hidden !important;
background-size:cover;
text-align:center;
position:relative;
}

.music-player {
position:relative;
background: -webkit-linear-gradient(left, #ffffff, transparent);
background: -o-linear-gradient(left, #ffffff, transparent);
background: -moz-linear-gradient(left, #ffffff, transparent);
background: linear-gradient(left, #ffffff, transparent);
display:inline-block;
height:23px;
z-index:6;
}

.playlist {
display:none;
position:fixed;
top:23px;
left:0px;
/*background: -webkit-linear-gradient(left, #ffffff, transparent);
background: -o-linear-gradient(left, #ffffff, transparent);
background: -moz-linear-gradient(left, #ffffff, transparent);
background: linear-gradient(left, #ffffff, transparent);
color:#000;*/
color:#ffffff;
text-shadow:1px 1px 0px #000000;
padding:5px 5px;
font-size:11px;
opacity:0.6;
}

.music-player .music-controls {
height:23px;
display:inline-block;
}

.music-player .music-controls a {
width:23px;
height:23px;
display:inline-block;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

.music-controls .music-back {
background:#333333 url(../images/backward.png);
}

.music-controls .music-play {
background:#333333 url(../images/play.png);
}

.music-controls .music-pause {
background:#333333 url(../images/pause.png);
}

.music-controls .music-forward {
background:#333333 url(../images/forward.png);
}

.music-controls a:hover {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

.music-player .music-title {
font-size:12px;
height:23px;
line-height:23px;
overflow:hidden;
display:inline-block;
text-shadow:1px 1px 2px #ffffff;
}

.music-player .music-title a {
color:#000000;
text-decoration:none;
text-shadow:1px 1px 2px #ffffff;
}

.music-player .music-title a:hover {
/*text-decoration:underline;*/
}

#body-wrapper {
position:relative;
width:100%;
z-index:20;
background:#ffffff;
margin-top:300px;
padding-top:80px;
-webkit-box-shadow: inset 0px 5px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 5px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset 0px 5px 10px -8px rgba(0,0,0,0.75);
padding-bottom:69px;
}

#nav {
width:100%;
position:absolute;
top:0;
z-index:25;
background:#2B373B url(../images/bg_menu.png) repeat;
/*border-bottom:1px solid #333;*/
text-align:center;
}

.fixed-menu {
position: fixed !important;
top: 0px !important;
left: 0px !important;
}

#menu {
z-index:30;
position:relative;
display:inline-block;
}

#nav #menu-left {
position:absolute;
top:0;
left:0;
z-index:26;
width:100%;
text-align:left;
}

#nav #menu-left ul {
display:inline-block;
}

#nav #menu-left ul.menu-nav-right {
float:right;
}

/*#nav #menu-right {
position:absolute;
top:0;
right:0;
z-index:26;
width:100%;
text-align:right;
}*/

#nav #menu-left ul, #nav #menu-right ul {
/*position:relative;*/
}

#nav #menu-left a, #nav #menu-right a {
color:#999999;
padding: 3px 15px;
margin:0;
}

#nav #menu-left a:hover, #nav #menu-right a:hover {
color:#ffffff;
}

#nav #menu-left a:hover::after {
content:attr(data-text);
color:#ffffff;
background:#744D2C;
padding: 5px 15px;
display:inline-block;
text-transform:uppercase;
width:auto;
text-align:center;
font-size:14px;
}

#nav #menu-left ul.menu-nav-left a:hover::after {
position:absolute;
top:30px;
left:0px;
}

#nav #menu-left ul.menu-nav-right a:hover::after {
position:absolute;
top:30px;
right:0px;
}

#nav #menu-right a:hover::after {
content:attr(data-text);
position:absolute;
top:30px;
right:0px;
color:#ffffff;
background:#744D2C;
padding: 3px 15px;
display:inline-block;
text-transform:uppercase;
width:100%;
}

#nav ul {
/*position:relative;
height:100%;*/
list-style-type:none;
list-style-image:none;
}

#nav ul li {
display:inline-block;
padding:3px 0;
text-indent:0;
}

#nav a {
color:#ffffff;
margin:0px 10px;
padding:3px 5px;
}

#nav a:hover {
text-decoration:none;
background:#754C24;
}

#content {
background:#ffffff;
position:relative;
width:84%;
height:100%;
margin:25px auto;
min-height:800px;
}

#left {
/*margin-right:370px;*/
margin-right:390px;
}

#right {
width:320px;
position:absolute;
top:0;
right:0;
z-index:21;
}

#footer {
position:relative;/*needed to apply the z-index and be above the head div*/
z-index:19; /*nav fixed is z-index:20, so here it's 19*/
font-size:16px;
text-align:center;
padding:30px;
background:#000000 url(../images/bg_menu.png) repeat;
color:#ffffff;
border-top:5px solid gray;
}

.footer-logo {
margin-bottom:30px;
}

.footer-block {
position:relative;
display:table;
margin:0 auto;
}

.footer-list {
border-right:1px solid #333;
}

.footer-list:first-child {
border-left:1px solid #333;
}

.footer-list li {
list-style-position:outside;/*otherwise will break line in lower screen resolutions*/
position:relative;
width:100%;
text-indent: 0;
padding-left: 0;
}

.footer-list a {
color:#ff0206;
}

.footer-col {
display:inline-block;
padding:0px 50px;
text-align:left;
vertical-align:top;
height:100%;
position:relative;
display:table-cell;
}

.footer-list a:hover {
text-decoration:none;
background:#FFC966;
color:#333;
}

.footer-credits {
display:inline-block;
padding-right:10px;
font-size:13px;
line-height:14px;
}

.footer-credits ul {
list-style:none;
}

.footer-credits ul li {
text-indent: 0;
padding-left:0;
}

/*Inicialmente meti ".footer-col a:hover" para afetar também os links dos menus da esquerda, mas o opacity no hover interfere com os widths e move no mouse-hover, por isso retirei*/
.footer-credits a:hover {
opacity:0.5;
-webkit-transition:opacity 0.2s;
transition:opacity 0.2s;
}

.join-newsletter {
margin:15px 0;
display:inline-block;
background:#222222;
padding-left:5px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
box-shadow: 2px 2px 0px 2px rgba(0,0,0,1);*/

}

.join-newsletter span {
color:#b7b7b7;
}

.join-newsletter input[type="text"] {
padding:4px 5px;
width:250px;
min-width:50px;
}

.join-newsletter input[type="submit"] {
border-radius:0px;

background:#000;
box-shadow:none;
}

.join-newsletter input[type="submit"]:hover {
background:#333;
}

ul.posts {
list-style:none;
list-style-image:none;
}

ul.posts>li {
padding:0;
text-indent:0;
display:inline-block;
width:100%;
vertical-align: top;
text-align:left;
margin-top:50px;

/*
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
box-shadow: 0px 1px 3px rgba(0,0,0,0.2);*/

/*border:1px solid #C0C0C0;

-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;*/
}

ul.posts>li:first-child {
margin-top:0px;
}

.posts .post-text>p {
/*margin-top:15px;
color:red;*/
}

.posts .post-text {
/*white-space: pre-wrap;*/
}

.posts .post-text p:first-child {
margin-top:0px;
}

.posts h1 a {
color:inherit;
text-decoration:none;
text-shadow:none;
}

.posts h1 a:hover {
color: inherit;
}

.posts .date {
display:block;
font-size:0.75em;
text-align:right;
color:gray;
margin:10px 0 0 0;
}

.posts .post-bar {
text-align:right;
margin-top:50px;
position:relative;
vertical-align: top;
}

.posts .post-bar .comments_count {
float:left;
}

.posts .post-bar span {
font-size: 10px;
font-weight:normal;
color:gray;
/*line-height:1.6em;*/
display:inline-block;
text-transform: uppercase;
}

.tags a, .tags .red-box {
font-size: 0.8em;
font-weight:normal;
padding:0px 5px;
background:rgba(255,2,6,1);
color:#fff;
line-height:1.6em;
display:inline-block;
margin-left:5px;
}

.tags a:hover, .tags a.tag-active {
color:rgba(255,2,6,1);
background:#ffffff;
-webkit-box-shadow: inset 0px 0px 3px 0px rgba(255,2,6,1);
-moz-box-shadow: inset 0px 0px 2px 0px rgba(255,2,6,1);
box-shadow: inset 0px 0px 3px 0px rgba(255,2,6,1);
text-decoration:none;
text-shadow:none;
}

a.tags-black {
background:#333333;
}

a.tags-black:hover {
color:#333333;
box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,1);
}

.albums-tags a {
background:#333333;
margin-left:10px;
}

.albums-tags a:first-child {
margin-left:0px;
}

.albums-tags a:hover, .albums-tags a.tag-active {
color:#333333;
-webkit-box-shadow: inset 0px 0px 3px 0px #333333;
-moz-box-shadow: inset 0px 0px 2px 0px #333333;
box-shadow: inset 0px 0px 3px 0px #333333;
}

.table-form {
width:65%;
}

.table-form tr td {
padding-top:10px;
}

.table-form tr:first-child td {
padding-top:0px;
}

.table-form td {
vertical-align: top;
width:100%;
}

.table-form td:first-child {
width:auto;
padding-right:15px;
}


.table-form input[type=text], textarea {
font-size:16px;
width:100%;
border:1px dashed gray;
background:#eee;
padding:5px 7px;
display:inline-block;
}

.table-form textarea {
height:200px;
}

.table-form input[type=text]:focus, .table-form textarea:focus, .table-form input[type=text]:hover, .table-form textarea:hover {
border:1px orange solid !important;
background:#fff799;
}

.fb-comments span {

}

.comments-box {
font-size:16px;
margin-top:50px;
}

.new-comment {
margin:15px 0;
border-radius:3px;
padding:15px 25px;
-webkit-box-shadow: inset 0px 0px 3px 0px rgba(255,2,6,1);
-moz-box-shadow: inset 0px 0px 3px 0px rgba(255,2,6,1));
box-shadow: inset 0px 0px 2px 0px #333;
position:relative;
min-height:250px;
background:#F2F2F2 url(../images/anonimo.png) no-repeat right 20px top 20px;
/*opacity:0.1;*/
}



.new-comment-overlay {
opacity:1;
}

.new-comment form textarea, input[type=text] {
background:rgba(255,255,255,0.9);
}

.anonym-img {
/*width:220px;
height:221px;
background:url(../images/anonimo.png) no-repeat;
position:absolute;
top:15px;
right:15px;
z-index:555;
opacity:0.1;*/
}

.new-comment-overlay {
/*z-index:6;
position:absolute;
top:0;
left:0;
width:100%;*/
}

.new-comment-bar {
text-align:left;
font-size:0.9em;
color:gray;
}

a.active-form {
text-decoration:underline;
}

.new-comment table {
width:100%;
vertical-align:top;
font-weight:bold;
z-index:5;
position:relative;
}

.new-comment table td {
vertical-align:top;

}

.new-comment table td.w2p_fl {
width:200px;
padding-right:5px;
}

.new-comment textarea {
font-family:inherit;
width:100%;
height:100px;
word-wrap:break-word;
z-index:10;
}

.new-comment .textarea-mini {
height:27px;
}

.new-comment input[type=text] {
width:50%;
}

.new-comment input {
margin:3px 0;
padding:3px 5px;
border-bottom:1px solid #d7d7d7;
}

.new-comment input[type=checkbox] {
margin:3px 0;
/* All browsers except webkit*/
transform: scale(1.3);
/* Webkit browsers*/
-webkit-transform: scale(1.3);
}

.new-comment label {
text-shadow:2px 2px 2px #fff;
}

.body-comments {
border:1px solid gray;
margin:25px 0;
padding:10px 10px;
}

div.body-comments:first-child {
margin-top:10px;
}

.body-comments .comment-author {
background:#333;
color:white;
padding:1px 7px;
margin-bottom:10px;
font-size:0.9rem;
}

.body-comments .comment-author strong {
color:#FEC865;
}

#comments_password__row {
background:#FFC966;
}

.box {
width:100%;
margin-bottom:40px;
}

/*if image it has to be 318px widht max and apply style="padding:0;line-height:0;"*/
span.inner-box {
display:block;
border:1px solid #C0C0C0;
border-radius:2px;
padding:5px 10px;
}

#box-navigation, .box-li {
width:320px;
}

#box-navigation h4, .box-li h4 {
background:#ffffff;
}

#box-navigation span.inner-box, .box-li span.inner-box {
background:#ffffff;
}

#box-navigation ul, .box-li ul {
list-style-image: none;
list-style-type: none;
margin:0;
padding:0;
}

#box-navigation li, .box-li li {
border-bottom:1px solid #ccc;
padding-left:0;
text-indent:0;
line-height:1.4em;
}

#box-navigation li:last-child, .box-li li:last-child {
border:none;
}

#box-navigation li span, .box-li li span {
float:left;
font-weight:normal;
color:gray;
background:;
padding:2px 3px;
font-size:14px;
margin-right:10px;
}

#box-navigation li a, .box-li li a {
text-decoration:none;
color:#000;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
-webkit-transition: font-size 0.2s ease, background-color 0.2s ease;
-moz-transition: font-size 0.2s ease, background-color 0.2s ease;
-o-transition: font-size 0.2s ease, background-color 0.2s ease;
-ms-transition: font-size 0.2s ease, background-color 0.2s ease;
transition: font-size 0.2s ease, background-color 0.2s ease;
display:block;
text-shadow: 1px 1px 0px #F1F1F1;
}

#box-navigation li a:hover, .box-li li a:hover {
font-size:1.05em;
/*background-color:#f6f6f6;*/
background-color:#FFC966;
}

#box-navigation li.post-current a, .box-li li.post-current a {
background-color:#FFC966;
}

/* in the blog the nav box is a little different */
.blog-nav li:last-child {
border-bottom:1px solid #ccc !important;
}
.blog-nav li a {
font-size:14px;
}
.blog-nav li a:hover{
font-size:14.5px !important;
/*background-color:#f6f6f6;*/
background-color:#FFC966;
}

.box-navigation-bar {
margin-top:7px;
color:#333;
text-align:center;
padding:2px;
font-size:14px;
display:inline-block;
width:100%;

/*
position:relative;
height:auto;
vertical-align: middle;
*/
}

.box-navigation-bar a {
color:#ffffff;
background:#333;
padding:2px 5px;
}

.box-navigation-bar a:hover {
text-decoration:none;
color:#FFC966;
}

.box-navigation-bar a.nav-btn {
display:inline-block;
padding:2px 5px;
font-weight:bold;
background:#000000;
border:1px solid #000000;
text-shadow:none;
}

.box-navigation-bar a:hover.nav-btn {
background:#989898;
border:1px solid #000000;
color:#FFC966;
text-shadow: 1px 2px #000000;
}

.box-navigation-bar a.nav-first {
float:left;
}

.box-navigation-bar a.nav-number-first {
margin-left:3px;

background:#F2F2F2;
color:gray;
border:1px solid #F2F2F2;
font-weight:normal;
}

.box-navigation-bar a.nav-last {
float:right;
}

.box-navigation-bar a.nav-number-last {
margin-right:3px;

background:#F2F2F2;
color:gray;
border:1px solid #F2F2F2;
font-weight:normal;
}


.box-navigation-bar form {
display:inline-block;
font-size:14px;

/*Não centra verticalmente, por isso coloquei 3px padding para ficar no bottom alinhado com os botões de nav. Não é prioritário, mas quando tiver tempo melhorar*/
padding:3px 0;
}

.box-navigation-bar input[type="text"] {
width:60px;
text-align:center;
font-size:14px;
padding:2px 5px;

border:1px solid #333;
border-right:none;
/*
background:#FFC966;

-webkit-box-shadow:1px 1px 1px 1px #333 inset;
-moz-box-shadow:1px 1px 1px 1px #333 inset;
box-shadow:1px 0px 1px 1px #333 inset;
*/
}

.box-navigation-bar input[type="submit"] {
padding:2px 5px;
border-radius:0;
font-size:14px;
box-shadow:none;
background:#333;
border:1px solid #333;
font-weight:normal;
}


.box-nav-bottom-bg {
width:320px;
height:40px;
background:url(../images/box-nav-bottom-bg.png);
}

.fixed-box-navigation {
position: fixed !important;
top: 34px !important;
/*left: 0px !important;*/
}

.job-link {
position:relative;
display:inline-block;
text-shadow:none;
}

a.job-link:hover .job-text {
font-weight:bold;
}

.job-box {
width:150px;
/*height:77px;*/
height:97px;
display:inline-block;
margin:6px;
position:relative;
}

.job-text {
text-align:center;
width:150px;
display:inline-block;
/*margin:6px;*/


position:absolute;
bottom:0;

font-size:0.6em;
color:#492B0E;
text-transform:uppercase;
}

.job-text a {
font-size:0.6em;
color:#492B0E;
text-transform:uppercase;
text-shadow:none;
}

.job-web {
background:url(../images/job-web-effect.png) no-repeat 0px 0px;
}

.job-design {
background:url(../images/job-design-effect.png) no-repeat 0px 0px;
}

.job-programacao {
background:url(../images/job-programacao-effect.png) no-repeat 0px 0px;
}

.job-traducao {
background:url(../images/job-traducao-effect.png) no-repeat 0px 0px;
}

.job-hover {
background-position:-150px 0px;
}

ul.gallery-1 {
/*width:100%;*/
list-style-type:none;
list-style-image:none;
}

ul.gallery-1 li {
position:relative;
display:inline-block;
width:50%;
min-width:300px; /*OPTIMIZAR ESTA PARTE!*/
margin-bottom:50px;
padding:0;
text-indent:0;
}

/*
ul.gallery-1 li:nth-child(even) {
margin-left:0px;
}
*/

ul.gallery-1 .gallery-1-img {
width:30%;
max-width:208px;
min-width:100px;
display:inline-block;
}

ul.gallery-1 .gallery-1-info {
width:70%;
display:inline-block;
text-align:left;
font-size:10px;
text-transform: uppercase;
padding:0px 10px 0px 10px;
vertical-align:top;
}

ul.gallery-1 .gallery-1-info p {
text-align:left;
line-height:;
}

ul.gallery-1 .gallery-1-info .gallery-1-website-url {
/*text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;*/
}

ul.gallery-1 .gallery-1-info .gallery-1-website-url a {
text-shadow:none;
}

ul.coding-tags li {

width:auto;
min-width:auto;
display:inline-block;
background:#333333;
padding:2px 3px;
margin:3px 3px 0px 0px;
color:#ffffff;
font-size:10px;
text-indent:0;
}

ul.gallery-2 {
width:100%;
list-style-type:none;
list-style-image:none;
}

ul.gallery-2 li {
display:inline-block;
width:22%;
min-width:150px;
max-width:195px;
/*margin:1%;*/
margin:8px;
padding:0;
text-indent:0;
vertical-align:top;
}

ul.gallery-2 li a:hover {
opacity: 0.5;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}

ul.gallery-2 li a img, ul.gallery-3 li a img {
-webkit-box-shadow:1px 1px 3px 1px #888888;
-moz-box-shadow:1px 1px 3px 1px #888888;
box-shadow:1px 1px 3px 1px #888888;
vertical-align:top;/*if background-color in <li> without this, it goes out borders*/
}

ul.gallery-3 {
/*width:100%;*/
list-style-type:none;
list-style-image:none;
}

ul.gallery-3 li {
display:inline-block;
width:46%;
vertical-align:top;
min-width:350px; /*OPTIMIZAR ESTA PARTE!*/
max-width:600px; /*OPTIMIZAR ESTA PARTE!*/
margin-right:2%;
margin-bottom:2%;
padding:0;
text-indent:0;
}

ul.gallery-3 li a img:hover {
opacity:0.5;
-webkit-transition:opacity 0.2s;
transition:opacity 0.2s;
}

ul.gallery-3 li a img {
-webkit-box-shadow:1px 1px 3px 1px #888888;
-moz-box-shadow:1px 1px 3px 1px #888888;
box-shadow:1px 1px 3px 0px #888888;
vertical-align:top;/*if background-color in <li> without this, it goes out borders*/
}

a.tooltip {
position:relative;
z-index:2;
}

a.tooltip:hover::after {
content:attr(title);
color:#ffffff;
background:#000000;
opacity:0.8;
padding: 5px 15px;
display:block;
width:100%;
text-align:center;
font-size:14px;
position:absolute;
top:0;
left:0;
z-index:3;
}

ul.gallery-4 {
/*width:100%;*/
list-style-type:none;
list-style-image:none;
font-size:14px;
line-height:normal;
}

ul.gallery-4 p {
line-height:normal;
}

ul.gallery-4>li {
position:relative;
display:block;
width:100%;
margin:15px 0;
padding:5px 10px;
border:2px solid #333;
text-indent:0;
}

.gray-tag {
background:#333;
display:inline-block;
color:#ffffff;
padding:1px 5px;
}

.photo-gallery {
border-left:1px solid #333;
margin-bottom:25px;
display:inline-block;
psotion:relative;
}

.gallery-title {
display:-webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display:-moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display:-ms-flexbox; /* TWEENER - IE 10 */
display:-webkit-flex; /* NEW - Chrome */
display:flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
font-size:0.6em;
}

.gallery-title p {
background:#000000;
color:#ffffff;
display:inline-block;
padding:1px 10px;
text-transform:uppercase;
margin:0;
}

.gallery-title span {
background:gray;
display:inline-block;
-webkit-flex-grow:100; /* Safari 6.1+ */
flex-grow:100;
background:#ffffff; /* For browsers that do not support gradients */
background:-webkit-linear-gradient(left, #000000, gray, #aaaaaa, rgba(255, 255, 255, 0)); /* For Safari 5.1 to 6.0 */
background:-o-linear-gradient(left, #000000, gray, #aaaaaa, rgba(255, 255, 255, 0)); /* For Opera 11.1 to 12.0 */
background:-moz-linear-gradient(left, #000000, gray, #aaaaaa, rgba(255, 255, 255, 0)); /* For Firefox 3.6 to 15 */
background:linear-gradient(left, #000000, gray, #aaaaaa, rgba(255, 255, 255, 0)); /* Standard syntax */
}

.photo-gallery .gallery-2 {
overflow:hidden !important;
/*height:130px !important;*/
display:inline-block !important;
position:relative;
}

.photo-gallery .gallery-2 li {
/*Erases previous gallery values for masonry*/
/*width:176px;*/
width:23%;
margin-bottom:0;
min-width:10px;
max-width:195px;
}

.photo-gallery a {
display:inline-block;
position:relative;
}

.photo-gallery a:hover {
background-color:#000000;
-webkit-transition: background-color 0.2s ease;
-moz-transition: background-color 0.2s ease;
-o-transition: background-color 0.2s ease;
-ms-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
}

.etc-item {
position:absolute;
display:inline-block;
width:auto !important;
color:#ffffff;
background:#000000;
padding:1px 10px !important;
bottom:0px;
right:0px;
text-align:right;
border-top:2px solid white;
border-left:2px solid white;
font-size:14px;
}

.view-more-gallery {
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:10;
text-align:center;

}

.view-more-gallery-active {
display:inline-block;
-webkit-transition: display 0.4s ease;
-moz-transition: display 0.4s ease;
-o-transition: display 0.4s ease;
-ms-transition: display 0.4s ease;
transition: display 0.4s ease;
}

.view-more-gallery span {
position:absolute;
top:45%;
display:inline-block;
background:#000000;
border:3px solid #ffffff;
color:#ffffff;
font-size:18px;
font-weight:normal;
padding:3px 10px;
-webkit-box-shadow:0px 0px 20px 5px #333;
-moz-box-shadow:0px 0px 20px 5px #333;
box-shadow:0px 0px 20px 5px #333;
}

.view-more {
text-align:right;
}

.view-more span {
color:#ccc;
font-size:0.7em;
}

.view-more a {
/*display:block;*/
text-align:center;
background:rgba(255,2,6,1);
color:#fff;
font-size:0.7em;
font-weight:bold;
padding:2px 10px;
-webkit-box-shadow:1px 1px 1px 1px #888888;
-moz-box-shadow:1px 1px 1px 1px #888888;
box-shadow:1px 1px 1px 0px #888888;
}

.view-more a:hover {
background:rgba(255,165,0,1);
color:#fff;
-webkit-transition: background 0.1s, color 0.2s;
transition: background 0.1s, color 0.2s;
}

.error {
color:red;
}

.go-top {
/*bottom:-82px;*/
/* top = size of image + border of footer */
/* right = 100% - content width (83%) / 2. Divide by 2 because the content is centered, half for each side */
/*text-align:right;
position:absolute;
top:-67px;
right:8.5%;*/
position:fixed;
bottom:-7px;
right:8.5%;
display:none;
z-index:25;
}

.go-top a:hover {
opacity:0.4;
-webkit-transition: opacity 0.5s; /* Safari */
transition: opacity 0.5s;
}

input[type="submit"], .btn {
width:auto;
font-weight:bold;
border:1px solid #333;
/*background-color: #ddeef6;*/
background-color:#767676;
border-radius:4px;
box-shadow:inset 0 1px 3px #d7d7d7, inset 0 -15px #3d3d3d, 0 0 3px #555555;
-o-box-shadow:inset 0 1px 3px #d7d7d7, inset 0 -15px #3d3d3d, 0 0 3px #555555;
-webkit-box-shadow:inset 0 1px 3px #d7d7d7, inset 0 -15px #3d3d3d, 0 0 3px #555555;
-moz-box-shadow:inset 0 1px 3px #d7d7d7, inset 0 -15px #3d3d3d, 0 0 3px #555555;
color:#ffffff;
text-shadow:0 1px #000000;
padding:5px 30px;
}

input[type="submit"]:hover, .btn:hover {
background:#989898;
color:#FFC966;
cursor:hand;
cursor:pointer;
text-decoration:none;
text-shadow:1px 2px #000000;
}

form input:focus {
border:1px orange solid !important;
background:#fff799;
}

.shop-img {
float:left;
margin:0 35px 5px 0;
}

.index-photo {
float:left;
padding:0 30px 15px 0;
}

/*
.tooltipsy
{

padding: 4px 8px;
color: #333;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
*/

@media (max-width: 1680px) {
  body {
  font-size:16px;
  }

  p {

  }
  .websites-gallery ul.coding-tags  {
  position:absolute;
  left:0;
  bottom:-20px;
  }
  /*ul.gallery-1 .gallery-1-info {
	font-size:12px;
	}*/
  #nav #menu-left ul.menu-nav-right a:hover::after, #nav #menu-left ul.menu-nav-left a:hover::after {
  top:28px;
  }
  #content {
  width:85%;
  }
}

@media (max-width: 1440px) {
    body {

    }
    #content {
    width:86%;
    }
    .index-photo {
    width:200px;
    height:auto;
    }
    #nav #menu-left ul.menu-nav-right a:hover::after, #nav #menu-left ul.menu-nav-left a:hover::after {
    top:28px;
    }
    .photo-gallery ul.gallery-2 li {
    width:22%;
    margin:1%
    }
}

@media (max-width: 1366px) {
    body {

    }
    #content {
    width:92%;
    }
    #left {
    margin-right:360px;
    }
    .index-photo {

    }
}

@media (max-width: 1200px) {
    body {
    font-size:15px;
    }
    #nav #menu-left ul.menu-nav-right a:hover::after, #nav #menu-left ul.menu-nav-left a:hover::after {
    top:26px;
    }
    .websites-gallery ul.coding-tags  {
    position:relative;
    left:auto;
    bottom:auto;
    }
    ul.websites-gallery>li {
    width:100%;
    }
    footer li {

    }
    footer input {
    display:block;
    }
    .join-newsletter {
    /*padding:0;
    display:inline;*/
    }
}

@media (max-width: 1024px) {
    body {

    }
    #content {
    width:95%;
    }
    #left {
    margin-right:350px;
    }
    .index-photo {
    width:160px;
    height:auto;
    padding:0 20px 5px 0;
    }
    footer, footer li {
    font-size:12px;
    }
    #head-flag {
    bottom:90px;
    right:700px;
    }
    .shop-img {
    display:block;
    float:none;
    }
}

@media (max-width: 850px) {
    body {

    }
    .websites-gallery ul.coding-tags  {
    position:absolute;
    left:0;
    bottom:-20px;
    }
    ul.websites-gallery>li {
    min-width:50px;
    }
    ul.websites-gallery .gallery-1-img {
    min-width:50px;
    }
    #right {
    width:160px;
    }
    #left {
    margin-right:190px;
    }
    .box-nav-bottom-bg {
    width:160px;
    }
    #box-navigation, .box-li {
    width:160px;
    }
    .carousel-cell {
    height:106px;
    }
    #head-flag {
    bottom:125px;
    right:470px;
    }
    .footer-secondary {
    display:none;
    }
    .join-newsletter input[type="text"] {
      width:100%;
    }
}

@media (max-width: 599px) {
  #nav a {
  color:#ffffff;
  margin:0px 0px;
  padding:3px 5px;
  }
  #header, #head, #body-wrapper, #footer {
    min-width:400px;
  }
  #header, #head {
    padding:0;
    margin:0;
    border:0;
  }
  .icon-box {
  border-radius:0px;
  }
  .websites-gallery li .gallery-1-img, .websites-gallery .gallery-1-img img {
  display:block;
  width:100%;
  max-width:none;
  min-width:none;
  }
  .websites-gallery li .gallery-1-info {
  display:block;
  width:100%;
  max-width:none;
  min-width:none;
  position:relative;
  }
  .websites-gallery ul.coding-tags  {
  position:relative;
  bottom:auto;
  left:auto;
  }
  .websites-gallery ul.coding-tags li  {
  font-size:8px;
  }
  .box-navigation-bar input[type="text"] {
  width:20px;
  }
  .box-navigation-bar a.nav-btn {
  padding-left:2px;
  padding-right:2px;
  font-size:12px;
  }
  .box-navigation-bar-space {
  display:none;
  }
  #content {

  }
  #head-flag {
  /*bottom:50px;
  right:0px;*/
  bottom:115px;
  right:260px;
  }
  .albums-tags a {
  display:block;
  margin:5px 0px;
  }
  div.fixed-menu {
  position: absolute !important;
  top: 0px !important;
  left: auto !important;
  }
  #nav #menu-left {
    top:25px;
  }
  #nav #menu-left a, #nav #menu-right a {
  text-shadow:none;
  }
  #nav #menu-left a:hover::after {
    display:none;
  }
  #head-left {
  display:none;
  }
  #head-right {
  right:-200px;
  }
}