/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Nov 19, 2019, 10:35:44 AM
    Author     : Tim
*/

.main-content > div p {
    color: white;
    text-align: center;
    font-size: 18pt;
}

.drawing-winners {
    display: flex;
    flex-flow: row wrap;
    border-top: 2px solid gray;
    margin-top: 25px;
    padding-top: 10px;
    padding-bottom: 50px;
}

.drawing-winners h2 {
    color: white;
}

.drawing-winners img.winner {
    box-shadow: rgba(0,0,0,0.690196) 0px 26px 30px -10px,rgba(0,0,0,0.721412) 0px 16px 10px -10px;
    margin-right: 25px;
    border-radius: 4px;
    margin-top: 25px;
    min-height: 200px;
    height: 15vw;
    object-fit: contain;
}

.logo img {
    max-width: 797px;
    min-width: 400px;
    width: 20vw;
    object-fit: contain;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                          supported by Chrome and Opera */
}

.mci {
    /*max-width: 797px;
    min-width: 400px;
    width: 35vw;*/
    margin-top: 0px;
    padding: 100px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                          supported by Chrome and Opera */
}

@media screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px)
and (orientation: portrait)
{
    .logo img {
        width: 75vw;
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
    }

    .mci {
        max-width: 768px;
        width: 85vw;
        margin-top: -10px;
    }

    .drawing-winners > div {
        justify-content: space-between !important;
    }

    .main-content > div p {
        font-size: 16pt;
    } 
}

@media screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px)
and (orientation: landscape)
{
    .logo {
        height: 15vw;
    }

    .logo img {
        width: 75vw;
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
    }

    .mci {
        max-width: 768px;
        width: 85vw;
        margin-top: -10px;
        margin-left: auto;
        margin-right: auto;
    }

    .drawing-winners > div {
        justify-content: space-between !important;
    }

    .main-content > div p {
        font-size: 16pt;
    } 
}

@media screen 
and (min-device-width: 1024px) 
and (max-device-width: 1366px)
and (orientation: portrait)
{
    .logo img {
        width: 75vw;
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
    }

    .mci {
        max-width: 768px;
        width: 85vw;
        margin-top: -10px;
    }

    .drawing-winners > div {
        justify-content: space-between !important;
    }

    .main-content > div p {
        font-size: 16pt;
    } 
}

@media screen 
and (min-device-width: 1024px) 
and (max-device-width: 1366px)
and (orientation: landscape)
{
    .logo {
        height: 15vw;
    }

    .logo img {
        width: 75vw;
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
    }

    .mci {
        max-width: 768px;
        width: 85vw;
        margin-top: -10px;
        margin-left: auto;
        margin-right: auto;
    }

    .drawing-winners > div {
        justify-content: space-between !important;
    }

    .main-content > div p {
        font-size: 16pt;
    } 
}