@font-face {
    font-family: 'riviera';
    src: url('fonts/riviera.eot?#iefix') format('embedded-opentype'),
    url('fonts/riviera.woff') format('woff'),
    url('fonts/riviera.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'crack';
    src: url('fonts/newcrack.eot');
    src: url('fonts/newcrack.eot?#iefix') format('embedded-opentype'),
    url('fonts/newcrack.woff') format('woff'),
    url('fonts/newcrack.ttf') format('truetype');
}

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

.fancybox-container * {
    font-family: "Helvetica";
}

body, html {margin:0px; padding:0px; background-color: #000300; background-image:url('/images/bg.jpg'); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }


div.wrapper { width: 100%; height: 100%; margin: auto; text-align: center; }
div.menu { width: 800px; margin: auto; margin-top: 20px; background:url('/images/menu.png') 0px 0px; height: 58px; padding: 0 30px; }

div.menu div { float: left;  font-family: 'crack'; font-size: 24px;  line-height: 76px; padding: 0 12px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1); }
div.menu div a {
    color: #000;
    display: block;
    font-weight: bold;
}
div.menu div a:hover { color: #460000; }

div.responsive-menu { display: none; }

a { cursor: pointer; }

a:link { color: #6d0202; text-decoration: none; border:0; }
a:visited { color: #6d0202; text-decoration: none; border:0; }
a:hover { color: #6d0202; text-decoration: none; border:0;  }
a:active { color: #6d0202; text-decoration: none; border:0; }

a:focus { outline: none; }

.home div.content { width: 626px;  margin: auto; float: none; }

div.paper { float: left; width: 100%; margin-top: 40px; background-image: url('/images/content-background.jpg'); background-repeat: repeat-y; }
.home div.paper { background-image: url('/images/content-background-dark.jpg'); background-repeat: repeat-y; padding-top: 20px; padding-bottom: 20px; margin-bottom: 40px; margin-top: 30px; }

.home div.paper .story, .home div.paper .image { float: left; width: 100%; }

div.container { width: 763px; float: none; margin: auto; }

.bands div.container {
    width: 1024px;
}

div.content {
    width:100%;
    float: left;
    margin-top: 80px;
    margin-bottom: 20px;
    background-image: url('/images/content-background.jpg');
    font-size: 22px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    font-family: 'riviera';
}

body.skills div.content {
    padding-bottom: 30px;
}

div.top {
    background-image: url('/images/table-top.png');
    width: 745px;
    height: 32px;
    float:left;
}

div.bottom {
    background-image: url('/images/table-bottom.png');
    width: 745px;
    height: 32px;
    float:left;
}

div.row {
    background-image: url('/images/table-row.png');
    width: 745px;
    height: 50px;
    float:left;
}

div.first_column_header {
    float: left;
    width: 148px;
    height: 50px;
    padding-left: 10px;
}
div.second_column_header { float: left; width: 192px; height: 50px; }
div.first_column {
    float: left;
    width: 148px;
    height: 50px;
    padding-top: 10px;
    padding-left: 10px;
}

div.bar_column {
    float: left;
    width: 572px;
    text-align: left;
    padding-top: 6px;
    padding-left: 2px;
    height: 35px;
}

div.small_text {
    font-size: 16px;
    padding-left: 16px;
    padding-top: 12px;
}
div.bar_column_fix {
    padding-left: 0;
    margin-left: -4px;
}

.home div.content { background: none; }

div.story {
    font-family: 'crack';
    font-size: 36px;
    line-height: 8px;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
    font-weight: bold;
}
div.story p { margin-bottom: 20px; }
div.story p.red { color: #460000; }
div.story p.hard { text-shadow: 2px 3px 2px rgba(0, 0, 0, 1); }
div.margintop { margin-top: 10px; }

div.image img { cursor: pointer; }
div.image img:hover {  filter: invert(10%); }
div.image img.alt { display: none; }

div.image.techs { padding: 0 50px; box-sizing: border-box; }
div.image.techs div { float: left; width: 33%; padding: 0px 20px; box-sizing: border-box; }
div.image.techs div.left { padding-left: 0; }
div.image.techs div a { float: left; display: block; width: 100%; margin-top: 10px; }
div.image.techs div a img.fullwidth { width: 100%; }
div.image.techs div a.oracle { margin-top: 50px; }
div.image.techs div a.mysql { margin-top: 70px; }
div.image.techs div a.ruby { margin-top: 60px; }

div.image.work a:nth-child(1) {
    float: left;
    width: 50%;
    text-align: right;
    padding-right: 40px;
    padding-top: 30px;
    box-sizing: border-box;
}

div.image.work a:nth-child(2) {
    float: left;
    width: 50%;
    text-align: left;
    padding-left: 30px;
    box-sizing: border-box;
}

div.image.hungry a:nth-child(1) { float: left; width: 50%; text-align: right;  padding-right: 60px;  box-sizing: border-box; }
div.image.hungry a:nth-child(2) { float: left; width: 50%; text-align: left;  padding-left: 50px; padding-top: 10px; box-sizing: border-box; }

div.image.map { margin-top: -35px; }
div.image.map img:hover { filter: invert(0%); }
div.image.map a { position: relative; }
div.image.map span { position: absolute; font-family: 'crack'; top: -70px; left: 150px; color: #000; font-size: 24px; }
div.image.map a span:nth-child(3) { top: -43px; }
div.image.map:hover a span { color: #460000; }

div.image.devs a { margin: 0 30px; }

span.blue { color: #001246; }
span.red { color: #460000; }
span.green { color: #284600; }
span.yellow { color: #4f4c00; }
span.move { margin-left: 7px; }

div.bigger-padding { padding-left: 14px; width: 143px; }
div.smaller_padding { padding-top: 5px; }
div.magento-padding { padding-left: 21px; }

div.skill-legend {
    float: left;
    width: 100%;
    text-align: center;
    margin-left: 17px;
    margin-top: 5px;
    height: 40px;
}

span.skill-legend {
    margin-right: 30px;
}

div.skill-legend div {
    display: inline;
}

.skills .responsive {
    float: left;
    width: 100%;
    display: none;
}

.skills .responsive ul {
    float: left;
    width: 100%;
    padding-left: 0;
}

.skills .responsive li {
    list-style: none;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.skills .responsive li div {
    color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: auto;
}

.skills .responsive li div span {
    display: none;
}

.skills .responsive li.red div {
    background-color: #460000;
    border: 2px solid #460000;
}

.skills .responsive li.red div:hover {
    background-color: transparent;
}

.skills .responsive li.red div span {
    color: #460000;
}

.skills .responsive li div:hover span {
    display: inline;
    margin-left: 5px;
}

.skills .responsive li.blue div {
    background-color: #001246;
    border: 2px solid #001246;
}

.skills .responsive li.blue div span {
    color: #001246;
}

.skills .responsive li.blue div:hover {
    background-color: transparent;
}

.skills .responsive li.green div {
    background-color: #284600;
    border: 2px solid #284600;
}

.skills .responsive li.green div span {
    color: #284600;
}

.skills .responsive li.green div:hover {
    background-color: transparent;
}

.skills .responsive li.yellow div {
    background-color: #4f4c00;
    border: 2px solid #4f4c00;
}

.skills .responsive li.yellow div span {
    color: #4f4c00;
}

.skills .responsive li.yellow div:hover {
    background-color: transparent;
}


p.text {
    margin-left: 3px;
    margin-top: 0px;
    font-family: 'riviera';
    font-size: 24px;
    line-height: 28px;
}

div.bar_column div.col {
    float: left;
    width: 3%;
    height: 100%;
}

div.bar_column div.col span {
    float: left;
    width: 100%;
    height: 30%;
    margin-bottom: 3px;
    transition: 0.5s ease all;
    display: block;
    opacity: 0;
}

img.bar_skills { opacity: 1; }
div.certificate { margin-top: 5px; margin-bottom: 20px; float: left; width: 100%; }
div.second-star { margin-right: 22px; width: 20px; }
div.second-star_hover { margin-right: 22px; width: 20px; }


div.portfolio-main-div {
    float: left;
    width: 300px;
    position: relative;
    overflow: hidden;
}

div.portfolio-main-div img {
    width: 270px;
}

div.porftolio-vertical-bar { float: left; width: 15px; }
div.portfolio-info-div { float:left; margin-left: 10px; height: 210px; width: 385px; text-align: left; }
div.portfolio-headline-div { float:left; width: 100%; }
div.portfolio-headline-div h2 { margin-bottom: 0px; }
div.portfolio-headline-div h4 { margin-bottom: 0px; }
.no-margin-top { margin-top: 0px; }
.no-margin-bottom { margin-bottom: 0px; }
.small-margin-top { margin-top: 2px; }
.medium-margin-top { margin-top: 12px; }
div.portfolio-points { float:left; width: 100%; }
ul.portfolio-list { margin-top: 0px; margin-bottom: 0px; }
li.small-font { font-size: 12pt; }
div.portfolio-year-div { float:left; width: 100%; font-size: 9pt; }
span.small-font { font-size: 9pt; }
ul.portfolio-list-with-top { margin-top: 8px; margin-bottom: 0px; }

div.contact-box { width: 220px; float:left; margin-top:10px; margin-left: 54px; }
div.contact-box-middle { width: 220px; float:left; margin-top:10px; margin-bottom: 20px; }

.contact .content .text {
    float: left;
    width: 100%;
}

.contact .content .text ul {
    padding-left: 0;
}

.contact .content .text ul li {
    list-style: none;
}

div.about-me-container {
    width: 100%;
    float: left;
    text-align: left;
}

div.about-me-container h3 {
    text-align: center;
}

div.digging-first-col { width:100%; float:left; }
div.digging-second-col { width:260px; float:left; font-size: 12pt; }
div.digging-third-col { width:220px; float:left; font-size: 12pt; }
.font14 { font-size: 14pt; }
.font11 { font-size: 11pt; }
div.last-fm-box {
    width: 100%;
    height:60px;
    float: left;
    text-align: center;
}
div.page404 { margin-top: 60px; }

div.copyright {
    float: left;
    width: 100%;
    text-align: center;
    margin: 10px 0;
    font-family: 'riviera';
    color: #fff;
    clear: both;
}

.portfolio div.title h1 {
    margin-top: 0;
    font-size: 30px;
}

.caption-text {
    width: 270px;
    height: 175px;
    background: rgba(0,0,0,.7);
    display: block;
    z-index: 4;
    position: absolute;
    opacity: 0;
    bottom: 0;
    cursor: pointer;
    -webkit-transition: all cubic-bezier(.11,.72,.45,.93) 1s;
    -moz-transition: all cubic-bezier(.11,.72,.45,.93) 1s;
    transition: all cubic-bezier(.11,.72,.45,.93) 1s;
    padding: 20px;
    margin-left: 15px;
    -webkit-transform: translateY(175px);
    -moz-transform: translateY(175px);
    -ms-transform: translateY(175px);
    -o-transform: translateY(175px);
    transform: translateY(175px);
    box-sizing: border-box;

    color: #ffffff;
    font-weight: bold;
    font-size: 13px;
    font-family: arial;
    cursor: default;
    text-shadow: 1px 1px 0 #202020;
    text-align: left;
}

.caption2 {
    -webkit-transform: translateY(80px);
    -moz-transform: translateY(80px);
    -ms-transform: translateY(80px);
    -o-transform: translateY(80px);
    transform: translateY(80px);
    height: 80px;
}

.caption3, .caption4, .caption5, .caption6, .caption7, .caption8, .caption9, .caption10 {
    -webkit-transform: translateY(120px);
    -moz-transform: translateY(120px);
    -ms-transform: translateY(120px);
    -o-transform: translateY(120px);
    transform: translateY(120px);
    height: 120px;
}

.caption9 {
    height: 130px;
}

.caption8 {
    height: 90px;
}

.caption10 {
    height: 100px;
}

.caption11 {
    height: 150px;
}

.caption12 {
    height: 170px;
}


.portfolio-main-div:hover > div.caption-text {
    opacity: 1;
    bottom: 0;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
}

.portfolio-headline-div h2 span.small {
    font-size: 16px;
}

.tools-grid {
    float: left;
    width: 100%;
    padding: 0 20px;
}

.tools-grid .item {
    float: left;
    width: 30%;
    margin-right: 5%;
    position: relative;
    margin-bottom: 15px;
}

.bands .tools-grid .item {
    width: 24%;
    margin-right: 1%;
}

.tools-grid .item img {
    width: 100%;
}

.tools-grid .item:nth-child(3n) {
    margin-right: 0;
}

.bands .tools-grid .item:nth-child(4n) {
    margin-right: 0;
}

.bands .tools-grid .item:nth-child(3n) {
    margin-right: 1%;
}

.tools-grid .tools-text {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: 1s ease all;
}

.tools-grid .tools-text a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: "riviera";
    font-size: 30px;
    text-align: center;
}

.tools-grid .item:hover .tools-text {
    opacity: 1;
}

/* CAPTIFY caption styling */

.caption-top, .caption-bottom {
    color: #ffffff;
    padding: 1.2em;
    font-weight: bold;
    font-size: 13px;
    font-family: arial;
    cursor: default;
    background: #000;
    text-shadow: 1px 1px 0 #202020;
    text-align: left;
}
.caption-top {
}
.caption-bottom {
}
.caption a, .caption a {
    border: 0 none;
    text-decoration: none;
    background: #000000;
    padding: 0.3em;
}
.caption a:hover, .caption a:hover {
    background: #202020;
}
.caption-wrapper {
    float: left;
}
br.c { clear: both; }

/* END CAPTIFY */

/* IMG HOVER */

#center{ text-align:center; padding:auto auto auto auto;}
a.linkopacity img {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    -khtml-opacity: 0.5;}

a.linkopacity:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -khtml-opacity: 1.0; }

/* END IMG HOVER */


/* START LYRICS CLOUD */

#myCanvasContainer {
    width: 90%;
    height: 90%;
    display: block;
    margin: auto;
    text-align: center;
}

#tags a span {
    text-align: left;
    font-family: 'Special Elite', cursive;
}

/* END LYRICS CLOUD */

/* RESPONSIVE */

@media only screen and (max-width: 1024px) {
    .bands div.container {
        width: 100%;
    }

    .lyrics-cloud canvas {
        width: 100% !important;
    }
}

@media only screen and (max-width: 900px) {
    .bands .tools-grid .item {
        width: 48%;
        margin-right: 2%;
    }

    .bands .tools-grid .item:nth-child(3n) {
        margin-right: 2%;
    }
}

@media only screen and (min-width: 875px) {
    div.menu {
        display: block !important;
    }
}

@media only screen and (max-width: 875px) {
    div.responsive-menu {
        display: block;
        background: url('/images/menu.png') 0px 0px;
        height: 58px;
        width: 100%;
        width: calc(100% - 40px);
        margin: auto;
    }

    div.responsive-menu div a {
        font-family: 'crack';
        font-size: 26px;
        line-height: 62px;
        display: block;
        transform: scale(2.5,1) rotate(-90deg);
        color: #000;
        padding: 10px 30px 0px 40px;
        width: 30px;
        margin: auto;
        height: 59px;
    }

    div.menu {
        display: none;
    }

    div.menu.active {
        background: url('/images/content-background.jpg') 0px 0px;
        height: auto;
        float: left;
        padding: 0;
        margin-left: 20px;
        margin-right: 20px;
        width: 90%;
        width: calc(100% - 40px);
    }

    div.menu.active div {
        float: left;
        width: 100%;
        text-align: center;
        padding: 0;
        line-height: 60px;
    }

    div.content {
        width: 90%;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        float: left;
        margin-top: 50px;
        box-sizing: border-box;
    }

    .skills div.first_column_header,.skills div.first_column {
        width: 20%;
        box-sizing: border-box;
    }

    .skills div.first_column {
        font-size: 18px;
    }

    .skills div.first_column.small_text {
        font-size: 15px;
        padding-left: 25px;
    }

    .skills div.second_column_header,.skills div.second_column {
        width: 26%;
    }

    .skills div.top, .skills div.row, .skills div.bottom  {
        width: 100%;
    }

    .skills div.bar_column {
        width: 78%;
        box-sizing: border-box;
        margin-left: 2%;
        height: 42px;
    }

    div.container {
        width: 100%;
    }

    .tools-grid {
        box-sizing: border-box;
    }

    .certification div.container img {
        width: 100%;
    }

    .skills .skill-legend div {
        width: 380px;
        margin: auto;
        display: block;
    }

    .skills .skill-legend span.skill-legend.fw {
        margin-right: 5px;
    }

    .skills .skill-legend.cv {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .portfolio div.portfolio-main-div {
        width: 30%;
    }

    .portfolio div.porftolio-vertical-bar {
        width: 5%;
    }

    .portfolio div.portfolio-info-div {
        width: 65%;
        margin-left: 0;
    }

    .portfolio div.portfolio-main-div .caption-text {
        font-size: 11px;
        margin-left: 0;
        width: 100%;
        height: 180px;
    }
}

@media only screen and (max-width: 800px) {
    body.contact div.contact-box,
    body.contact div.contact-box-middle {
        width: 33%;
        margin-left: 0;
    }

    .four-oh-four img {
        width: 100%;
    }
}

@media only screen and (max-width: 780px) {
    ul.tunes {
        width: 440px;
    }
}

@media only screen and (max-width: 700px) {
    .skills div.first_column {
        font-size: 15px;
    }

    .portfolio div.portfolio-main-div .caption-text {
        font-size: 10px;
    }
}

@media only screen and (max-width: 666px) {

    .home div.content {
        width: 100%;
        box-sizing: border-box;
    }

    div.paper {
        width: 100%;
    }

    body.codernia img.codernia {
        width: 100%;
    }

    .skills div.main-table {
        display: none;
    }

    .skills div.responsive {
        display: block;
    }

    .skills div.responsive li div:hover div.star {
        filter: invert(0%);
    }

}

@media only screen and (max-width: 600px) {

    .home div.paper .story {
        font-size: 28px;
    }

    div.image.techs img {
        width: 100%;
    }

    div.image.devs {
        width: 310px;
        float: none;
        margin: auto;
    }

    div.image.devs a:nth-child(1) {
        margin-left: 0px;
    }

    div.image.techs div a.mysql, div.image.techs div a.ruby {
        margin-top: 40px;
    }

    div.image.techs div a.oracle {
        margin-top: 23px;
    }

    div.portfolio-info-div h2.text {
        font-size: 26px;
    }

    .tools-grid .item {
        width: 100%;
        margin-right: 0;
    }
}

@media only screen and (max-width: 570px) {
    .portfolio div.portfolio-main-div, .portfolio div.porftolio-vertical-bar, .portfolio div.portfolio-info-div {
        width: 100%;
    }

    .portfolio div.portfolio-main-div {
        margin-top: 40px;
    }

    .portfolio .first div.portfolio-main-div {
        margin-top: 0px;
    }

    .portfolio div.portfolio-main-div img {
        width: 100%;
    }

    .portfolio div.porftolio-vertical-bar {
        height: 40px;
    }

    .portfolio div.porftolio-vertical-bar img {
        transform: rotate(90deg);
        position: relative;
        top: -70px;
        left: 0px;
    }

    .portfolio div.portfolio-info-div div.portfolio-headline-div, .portfolio div.portfolio-info-div div.portfolio-year-div {
        text-align: center;
    }

    .portfolio div.portfolio-info-div div.portfolio-year-div {
        margin-top: 5px;
    }

    .portfolio div.portfolio-main-div .caption-text {
        font-size: 13px;
    }

    .portfolio div.skill-legend {
        height: auto;
        text-align: center;
        margin-left: 0;
    }

    div.image.work a:nth-child(1) {
        padding-right: 20px;
    }

    div.image.work a:nth-child(2) {
        padding-left: 10px;
    }

}

@media only screen and (max-width: 550px) {
    ul.tunes {
        width: 180px;
    }

    .aboutme div.content {
        padding-bottom: 40px;
    }

    .bands .tools-grid .item {
        width: 100%;
        margin-right: 0 !important;
    }

    body.contact div.contact-box,
    body.contact div.contact-box-middle {
        width: 50%;
        margin-left: 0;
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 480px) {
    div.image.techs div a.mysql {
        margin-top: 30px;
    }

    div.image.techs div a {
        margin-top: 20px;
    }

    div.image.work a:nth-child(1) {
        padding-right: 20px;
    }

    div.image.work a:nth-child(2) {
        padding-left: 0px;
    }

    div.image.hungry a:nth-child(1) {
        padding-right: 30px;
    }

    div.image.hungry a:nth-child(2) {
        padding-left: 20px;
    }
}

@media only screen and (max-width: 470px) {
    .home div.paper .story {
        font-size: 22px;
    }
}

@media only screen and (max-width: 465px) {
    .skills div.skill-legend {
        font-size: 18px;
        height: auto;
        margin-left: 10px;
    }

    .skills div.skill-legend img {
        float: left;
        clear: left;
        margin-bottom: 10px;
    }

    .skills div.skill-legend span {
        float: left;
        margin-left: 7px;
        margin-right: 0;
        line-height: 10px;
        margin-bottom: 10px;
    }

    .skills .skill-legend div {
        width: 250px;
    }

    .skills .skill-legend.cv {
        margin-top: 10px;
    }

    .portfolio .portrow .portfolio-headline-div a {
        font-size: 16px;
    }
}

@media only screen and (max-width: 440px) {

    div.image.work a:nth-child(1) img {
        width: 150px;
    }

    div.image.work a:nth-child(2) img {
        width: 150px;
    }
}

@media only screen and (max-width: 360px) {
    .home div.paper .story {
        font-size: 20px;
    }

    .home div.paper .story.codernia {
        font-size: 19px;
    }

    div.image.devs a {
        width: 200px;
        margin: auto !important;
        float: none;
        display: block;
    }

    div.image.techs div {
        width: 100%;
        padding: 0px;
    }

    div.image.techs div a, div.image.work.margintop a {
        width: 120px;
        margin: auto !important;
        float: none;
        display: block;
    }

    div.image.work.margintop a {
        padding: 0;
        padding-bottom: 10px;
    }

    div.image.techs div a img, div.image.work a img {
        width: 100% !important;
    }

    div.image a.codernia {
        width: 100%;
        float: left;
        display: block;
    }

    div.image a.codernia img {
        width: 90%;
    }
}

div.content {
    box-sizing: border-box;
    padding-bottom: 20px;
    background-size: cover;
}

div.content.contentlog {
    margin-top: 20px;
}

div.divider {
    background: transparent url('/images/horizontal-line.png') left top no-repeat;
    background-size: cover;
    display: block;
    float: left;
    width: 100%;
    height: 10px;
    margin-bottom: 5px;
}

div.fields {
    margin-top: 10px;
    float: left;
    width: 100%;
}

div.fields div.field {
    float: left;
    width: 50%;
    margin-bottom: 10px;
}

div.fields div.doublefield {
    width: 100%;
}

div.fields div.field label {
    width: 100px;
    float: left;
    text-align: left;
    line-height: 50px;
}

div.fields div.field input {
    width: calc(100% - 140px);
    height: 50px;
    font-size: 20px;
    padding: 5px 10px;
    font-family: 'riviera';
    border: 1px solid #000;
    float: left;
}

div.fields div.doublefield input {
    width: 100%;
    box-sizing: border-box;
}

div.fields div.field input.invalid {
    border: 2px solid #990000;
}

div.checkboxes {
    display: none;
}

.bands .tools-grid .item {
    background-image: url('/images/content-background.jpg');
    padding: 15px;
    box-sizing: border-box;
    cursor: pointer;
}

div.item {
    position: relative;
}

div.item h3 {
    font-family: 'riviera';
}

.tools-grid .item img.cross {
    width: 80%;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.5s ease all;
    opacity: 0;
}

.tools-grid .item:hover img.char {
    filter: brightness(70%);
}

.tools-grid .item:hover img.cross {
    opacity: 1;
}

.tools-grid .item.selected img.cross {
    opacity: 1 !important;
}

.tools-grid .item.selected {
    filter: brightness(70%);
}

.tools-grid .item.selected img {
    filter: brightness(100%) !important;
}

button.agota {
    display: block;
    padding: 10px 20px;
    font-size: 22px;
    font-family: 'riviera';
    width: 300px;
    background: rgba(0,0,0,0.7);
    border: none;
    color: #fff;
    margin: auto;
    cursor: pointer;
    transition: 0.5s ease all;
}

button.agota:hover {
    background: rgba(0,0,0,0.9);
}

button.agota.disabled {
    opacity: 0.3;
}

div.copyright.text {
    font-size: 8px;
    margin-top: 5px;
    margin-bottom: 20px;
}

div.wrapup img {
    width: 100%;
}

div.wrapup span.name {
    color: #990000;
    font-size: 26px;
}

div.wrapup ul li {
    list-style: none;
    float: left;
    width: 50%;
}

div.wrapup ul li span.dead {
    text-decoration: line-through;
    color: #990000;
}

p.validation {
    color: #990000;
    display: none;
}

.summary .warning {
    color: #990000;
    font-size: 30px;
}

.summary .tools-grid .item:hover img.char {
    filter: brightness(100%);
}

.summary .tools-grid .item:hover img.cross {
    opacity: 0;
}

.summary .tools-grid .item.dead img.cross {
    opacity: 1;
}

.summarytable,
.summarytable .entry {
    float: left;
    width: 100%;
}

.summarytable .rowno {
    width: 5%;
    float: left;
}

.summarytable .name {
    width: 25%;
    float: left;
    text-align: left;
}

.summarytable .name .house {
    color: #990000;
}

.summarytable .name .moto,
.summarytable .name .namespan {
    float: left;
    clear: left;
}

.summarytable .votes {
    width: 65%;
    float: left;
}

.summarytable .votes div {
    float: left;
    width: 7%;
    padding-right: 1%;
    box-sizing: border-box;
    position: relative;
}

.summarytable .votes div img.char {
    width: 100%;
}

.summarytable .votes div img.cross {
    width: 70%;
    position: absolute;
    top: 4px;
    left: 45%;
    transform: translateX(-50%);
}

.summarytable .score {
    width: 5%;
    float: left;
    font-size: 26px;
}

.summary div.item h3 {
    margin-bottom: 0;
}

.summary div.item p {
    font-family: 'riviera';
    margin-top: 3px;
}

div.disco-data {
    padding: 30px 0;
}

div.timer {
    width: 100%;
    height: 40px;
    background: #990000;
    opacity: 0.4;
}

div.gamebutton {
    text-align: center;
    margin-top: 30px;
}

div.gamebutton .game {
    width: 440px;
    margin: auto;
}

div.gamebutton .game button {
    float: left;
    width: 200px;
}

div.gamebutton .game button.save {
    margin-right: 20px;
    color: #00bb00;
}

div.gamebutton .game button.end {
    color: rgba(232, 0, 0, 0.70);
}

.team1 {
    color: #990000;
}

.team2 {
    color: #006600;
}

.team3 {
    color: #000033;
}

.team4 {
    color: #4f4c00;
}

body.pending div.disco-data,
div.timer,
div.gamebutton,
body.pending div.log,
body.pending div.teams,
div.gamebutton div.start,
div.player .term {
    display: none;
}

body.active div.pending-data {
    display: none;
}

body.playing div.timer,
body.playing div.gamebutton {
    display: block;
}

div.dummy {
    display: none;
}

body.playing div.observer {
    display: none;
}

body.prepareforplay div.gamebutton div.start,
body.playing h2.term {
    display: block;
}

body.prepareforplay div.gamebutton div.game {
    display: none;
}

div.reload button {
    display: none;
}

h2.end,
div.reload,
body.endgame div.observer h2.current,
body.endgame div.gamebutton div.game {
    display: none;
}

body.endgame h2.end,
body.endgame div.reload,
body.endgame div.gamebutton {
    display: block;
}

div.teams {
    width: 100%;
    float: left;
}

div.teams > div {
    float: left;
    width: 25%;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
}

div.teams > div img {
    width: 64px;
    height: auto;
    position: absolute;
    left: 0;
    display: none;
}

div.teams > div.lead img {
    display: block;
}

div.teams > div div.content {
    margin-top: 10px;
}

div.teams > div.team1 div.content {
    border: 2px solid #990000;
}

div.teams > div.team1.active div.content {
    background: rgba(153,0,0,0.3);
    color: #fff;
}

div.teams > div.team2 div.content {
    border: 2px solid #006600;
}

div.teams > div.team2.active div.content {
    background: rgba(0,102,0,0.3);
    color: #fff;
}

div.teams > div.team3 div.content {
    border: 2px solid #000033;
}

div.teams > div.team3.active div.content {
    background: rgba(0,0,51,0.3);
    color: #fff;
}

div.teams > div.team4 div.content {
    border: 2px solid #4f4c00;
}

div.teams > div.team4.active div.content {
    background: rgba(79,76,0,0.3);
    color: #fff;
}

div.log ul {
    padding: 0;
}

div.log ul li {
    list-style: none;
}

div.player {
    background: url("/images/trash.png") center bottom no-repeat;
    padding-bottom: 140px;
    background-size: 140px;
}

h2.grandtotal {
    border-top: 2px solid #000;
    padding-top: 7px;
    display: none;
}

body.endgame h2.grandtotal {
    display: block;
}

.clearLog {
    font-size: 13px;
    margin-left: 10px;
    color: #000 !important;
}

@media only screen and (max-width: 880px) {
    div.teams > div {
        width: 100%;
    }
}

@media only screen and (max-width: 850px) {
    .summarytable .name {
        width: 95%;
    }

    .summarytable .votes {
        width: 100%;
    }

    .summarytable .score {
        width: 100%;
        text-align: center;
        font-size: 40px;
    }
}

@media only screen and (max-width: 666px) {
    div.fields div.field {
        width: 100%;
    }
}

@media only screen and (max-width: 500px) {
    div.gamebutton .game {
        width: 100%;

    }

    div.gamebutton .game button {
        width: 100%;
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 400px) {
    div.fields div.field label {
        width: 100%;
    }

    div.fields div.field input {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (hover: none) {
    .tools-grid .item:hover img.cross {
        opacity: 0;
    }
}