/* Copyright © 2019+ Yiannis "The Voice of Wolves" Panakos.
Creation Date: 25/4/2019. Update Date: 24/6/2019. */

body {
    text-align: center;
    max-width: 910px;
    margin: auto;
    background: url(/PanosPanakos/Images/back.png) #191919;
    overflow-y: scroll;
    color: #cbcbd1; /* #c6c6cc */
    font-size: 62.5%;
}

a {
    background: none;
    color: #cd950c;
    text-shadow: 1px 1px 2px #291d02, 0 0 5px #664a06, 0 0 5px #523b04;
    text-decoration: none;
}

    a:hover {
        color: #cd950c;
        text-shadow: 1px 1px 2px #291d02, 0 0 15px #7b5907, 0 0 15px #664a06;
        text-decoration: none;
    }

    a:focus, a:active, a:visited {
        color: #cd950c;
        text-shadow: 1px 1px 2px #291d02, 0 0 5px #664a06, 0 0 5px #523b04;
        text-decoration: none;
    }

@media print {
    body {
        font-size: 1em
    }
}

@media screen {
    body {
        font-size: 1em
    }
}

@media screen, print {
    body {
        line-height: 1.2
    }
}

/* Menu
----------------------------------------------------------*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    div.Menu {
        font-size: 2.06em; /* Fix on font's small caps for webkit browsers (Chrome, Opera, etc) */
    }
}

.Menu {
    font-size: 1.8em;
    font-weight: 600;
    font-family: "Agency FB", "Californian FB", "Times New Roman", "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0 0 15px 0;
    font-variant: small-caps;
    font-variant-caps: small-caps;
    border-top: solid #332b00;
    border-bottom: solid #4c4000;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    font-size-adjust: 0.43; /* Fix with font in firefox */
}

    .Menu ul {
        outline: none; /* removes the blue selection border on menu in chrome */
        text-align: center;
    }

    .Menu li {
        display: inline-block;
        list-style: none;
        padding: 0 22px 0 22px;
    }

        .Menu li a {
            background: none;
            color: #cd950c;
            text-shadow: 1px 1px 2px #291d02, 0 0 5px #664a06, 0 0 5px #523b04;
            text-decoration: none;
        }

            .Menu li a:hover {
                color: #cd950c;
                text-shadow: 1px 1px 2px #291d02, 0 0 15px #7b5907, 0 0 15px #664a06;
                text-decoration: none;
            }

            .Menu li a:focus, .Menu li a:active {
                text-decoration: none;
                outline: none; /* removes the blue selection border on menu item in chrome */
            }

.selected {
    color: #cd950c !important;
    text-shadow: 1px 1px 2px #291d02, 0 0 15px #d29f24, 0 0 15px #e6ca85 !important;
    text-decoration: none;
    outline: none; /* removes the blue selection border on menu item in chrome */
}

/* Banner
----------------------------------------------------------*/
.Banner {
    display: table;
}

    .Banner .row {
        display: table-row;
    }

        .Banner .row .middle {
            display: table-cell;
        }

            .Banner .row .middle .heading {
                margin: 0px;
            }

            .Banner .row .middle .image {
                max-height: 100%;
                max-width: 100%;
                width: 95%;
            }

/* Page
----------------------------------------------------------*/
.Page {
    animation: fading 10s normal;
}

@keyframes fading {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 1
    }
}

/* Intro
----------------------------------------------------------*/
.Intro {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

    .Intro iframe {
        position: absolute;
        border: 0;
        height: 100%;
        left: 0;
        top: 0;
        width: 100%;
    }

/* Copyright
----------------------------------------------------------*/
.Copyright {
    font-size: 1.1em;
    font-family: Vijaya, "Times New Roman", "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin-top: 15px;
}

/* Biography
----------------------------------------------------------*/
.Biography {
    text-align: justify;
    font-family: "Times New Roman", "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0px 30px 0 30px;
    line-height: 130%;
}

    .Biography .portrait {
        float: left;
        width: 35%;
        margin-right: 40px;
    }

        .Biography .portrait .photograph {
            width: 100%;
            height: auto;
            border-radius: 5px;
        }

    .Biography .paragraph {
        text-indent: 30px;
        margin-bottom: 25px;
    }

/* Awards Laurel
----------------------------------------------------------*/
.AwardsLaurel {
    display: table;
    width: 100%;
}

    .AwardsLaurel .row {
        display: table-row;
    }

        .AwardsLaurel .row .column {
            display: inline-block;
            width: 200px;
        }

            .AwardsLaurel .row .column .image {
                width: 100%;
                height: auto;
            }


/* Awards
----------------------------------------------------------*/
.Awards {
    display: table;
    margin: 0px 30px 0 30px;
    line-height: 150%;
    font-variant: small-caps;
    border-spacing: 0px 15px;
    font-family: "Miriam", "Californian FB", "Times New Roman", "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

    .Awards .header {
        display: table-row;
        font-size: 1.25em;
        font-weight: 600;
    }

        .Awards .header .left {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            width: 26%;
            padding-left: 5px;
        }

        .Awards .header .middle_left {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            padding-left: 10px;
        }

        .Awards .header .middle {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            padding-left: 10px;
        }

        .Awards .header .middle_right {
            display: table-cell;
            text-align: left;
            padding-left: 5px;
        }

        .Awards .header .right {
            display: table-cell;
            text-align: left;
            width: 16%;
        }

    .Awards .row {
        display: table-row;
        font-size: 1.05em;
    }

        .Awards .row .left {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            font-weight: 600;
            padding-left: 5px;
        }

        .Awards .row .middle_left {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            font-weight: 400;
            padding-left: 10px;
        }

        .Awards .row .middle {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            font-weight: 400;
            padding-left: 10px;
        }

        .Awards .row .middle_right {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            font-weight: 400;
            padding-left: 5px;
        }

        .Awards .row .right {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
        }

            .Awards .row .right .image {
                width: 100%;
                height: auto;
            }

    .Awards .title {
        display: table-row;
    }

        .Awards .title .left {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            border-bottom: solid #C0C0C0;
            font-weight: 600;
            padding-left: 5px;
        }

        .Awards .title .middle_left {
            display: table-cell;
            border-bottom: solid #C0C0C0;
            padding-left: 10px;
        }

        .Awards .title .middle {
            display: table-cell;
            border-bottom: solid #C0C0C0;
            padding-left: 10px;
        }

        .Awards .title .middle_right {
            display: table-cell;
            border-bottom: solid #C0C0C0;
            padding-left: 5px;
        }

        .Awards .title .right {
            display: table-cell;
            border-bottom: solid #C0C0C0;
        }

    .Awards .line {
        padding-top: 8px;
    }

/* Theatre
----------------------------------------------------------*/
.Theatre {
    display: table;
    margin: 0px 30px 0 30px;
    line-height: 150%;
    font-variant: small-caps;
    border-spacing: 0px 15px;
    font-family: "Miriam", "Californian FB", "Times New Roman", "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

    .Theatre .header {
        display: table-row;
        font-size: 1.25em;
        font-weight: 600;
    }

        .Theatre .header .left {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            width: 45%;
            padding-left: 5px;
        }

        .Theatre .header .middle_left {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            width: 20%;
            padding-left: 5px;
        }

        .Theatre .header .middle_right {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            width: 20%;
            padding-left: 5px;
        }

        .Theatre .header .right {
            display: table-cell;
            text-align: left;
            width: 15%;
        }

    .Theatre .row {
        display: table-row;
        font-size: 1.05em;
    }

        .Theatre .row .left {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            font-weight: 600;
            padding-left: 5px;
        }

        .Theatre .row .middle_left {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            font-weight: 400;
            padding-left: 5px;
        }

        .Theatre .row .middle_right {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            font-weight: 400;
            padding-left: 5px;
        }

        .Theatre .row .right {
            display: table-cell;
            text-align: left;
        }

            .Theatre .row .right .image {
                width: 100%;
                height: auto;
            }

    .Theatre .title {
        display: table-row;
    }

        .Theatre .title .left {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            border-bottom: solid #C0C0C0;
            font-weight: 600;
            padding-left: 5px;
        }

        .Theatre .title .middle_left {
            display: table-cell;
            border-bottom: solid #C0C0C0;
            padding-left: 5px;
        }

        .Theatre .title .middle_right {
            display: table-cell;
            border-bottom: solid #C0C0C0;
            padding-left: 5px;
        }

        .Theatre .title .right {
            display: table-cell;
            border-bottom: solid #C0C0C0;
        }

    .Theatre .line {
        padding-top: 8px;
    }

/* Filmography
----------------------------------------------------------*/
.Filmography {
    display: table;
    margin: 0px 30px 0 30px;
    line-height: 150%;
    font-variant: small-caps;
    border-spacing: 0px 15px;
    font-family: "Miriam", "Californian FB", "Times New Roman", "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

    .Filmography .header {
        display: table-row;
        font-size: 1.25em;
        font-weight: 600;
    }

        .Filmography .header .left {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            width: 44%;
            padding-left: 5px;
        }

        .Filmography .header .middle {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            width: 36%;
            padding-left: 5px;
        }

        .Filmography .header .right {
            display: table-cell;
            text-align: left;
            width: 20%;
        }

    .Filmography .row {
        display: table-row;
        font-size: 1.05em;
    }

        .Filmography .row .left {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            font-weight: 600;
            padding-left: 5px;
        }

        .Filmography .row .middle {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            font-weight: 400;
            padding-left: 5px;
        }

        .Filmography .row .right {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
        }

            .Filmography .row .right .image {
                width: 100%;
                height: auto;
            }

    .Filmography .title {
        display: table-row;
    }

        .Filmography .title .left {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            border-bottom: solid #C0C0C0;
            font-weight: 600;
            padding-left: 5px;
        }

        .Filmography .title .middle {
            display: table-cell;
            border-bottom: solid #C0C0C0;
            padding-left: 5px;
        }

        .Filmography .title .right {
            display: table-cell;
            border-bottom: solid #C0C0C0;
        }

    .Filmography .line {
        padding-top: 8px;
    }

/* Music
----------------------------------------------------------*/
.Music {
    display: table;
    margin: auto;
    font-weight: 400;
    font-variant: small-caps;
    line-height: 200%;
    font-family: "Miriam", "Californian FB", "Times New Roman", "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

    .Music .row {
        display: table-row;
    }

        .Music .row .left {
            display: table-cell;
            text-align: right;
            font-size: 1.25em;
            font-weight: 500;
        }

        .Music .row .right {
            display: table-cell;
            text-align: left;
            font-size: 1.25em;
            padding-left: 10px;
        }

.MusicImageLink {
    display: table;
    padding: 10px;
    width: 100%;
}

    .MusicImageLink .row {
        display: table-row;
    }

        .MusicImageLink .row .column {
            display: inline-block;
            width: 150px;
        }

            .MusicImageLink .row .column .image {
                width: 80%;
                height: auto;
                border-radius: 5px;
            }


.MusicPlayer {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

    .MusicPlayer iframe {
        position: absolute;
        border: 0;
        height: 100%;
        left: 0;
        top: 0;
        width: 90%;
        padding-left: 5%;
        padding-right: 5%;
    }

/* Contact
----------------------------------------------------------*/
.Contact {
    display: table;
    margin: auto;
    font-weight: 400;
    font-variant: small-caps;
    line-height: 200%;
    font-family: "Miriam", "Californian FB", "Times New Roman", "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

    .Contact .row {
        display: table-row;
    }

        .Contact .row .left {
            display: table-cell;
            text-align: right;
            font-size: 1.25em;
            font-weight: 500;
        }

        .Contact .row .right {
            display: table-cell;
            text-align: left;
            font-size: 1.25em;
            padding-left: 10px;
        }

.ContactImageLink {
    display: table;
    width: 100%;
}

    .ContactImageLink .row {
        display: table-row;
    }

        .ContactImageLink .row .column {
            display: inline-block;
            width: 150px;
        }

            .ContactImageLink .row .column .image {
                width: 80%;
                height: auto;
                border-radius: 5px;
            }