@import url('https://fonts.googleapis.com/css?Lato:400,900|Open+Sans:400,600|Source+Sans+Pro&display=swap');

html body {
    min-height: 100%;
    background: url(media/background.jpg);
    background-size: cover;
    font-size: 16px;
    background-attachment: fixed;
}

body * {
    font-family: 'Rubik', sans-serif;
}

.contest-element {
    background-color: #fff;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 36px !important;
    position: relative;
    height: auto;
	max-width: 600px !important;
	margin: auto !important;
}

.contest-element .contest-element-infos-bottom {
    display: flex;
    flex: auto;
    align-items: center;
    justify-content: center;
    padding: .85rem 2rem 1.3rem 2rem
}

.contest-element .contest-element-infos-bottom img {
    display: inline-block
}

.contest-element .btn {
    margin-top: 6px
}

.contest-element .bottle-flag {
    width: 43px;
    margin-left: auto;
}

.contest-element.last .bottle-infos-top {
    text-align: right;
    width: 100%
}

.contest-element.last .bottle-infos-top h3, .contest-element.last .bottle-infos-top h2 {
    text-align: right;
    padding-right: 0px !important
}

.bottle-infos-top h3 {
    color: #08c498;
}

#wrap-inputs-in-form {
    padding: 1.25rem 2rem;
}

.contest-element .contest-element-infos {
    align-items: center;
    display: flex;
    padding: 1.25rem 2rem
}

.contest-element 
.contest-element-infos 
.bottle-infos-top h2, 
.contest-element .contest-element-infos .bottle-infos-top h3 {
    margin: 0;
    line-height: 110%
}

.contest-element .contest-element-infos .bottle-infos-top h2 {
    font-size: 1.45rem;
    margin-bottom: 12px;
    padding-right: 20px
}

.contest-element .contest-element-infos .bottle-infos-top h3 {
    font-size: 1.1rem
}

.contest-element .bottle-image {
    text-align: center;
    padding: 15px 0
}

.back-to-start:hover i {
    color: #fff;
}

.back-to-start:hover li {
    background: #08c498 !important;
}

.contest-element .bottle-image img {
    display: inline-block
}

#steps {
    justify-content: center;
    display: flex;
    margin: 0;
    padding: 0;
}

#steps li {
    border-radius: 50%;
    padding: 7px 15px 7px 14px;
    margin: 0 15px;
    color: #0c9;
    list-style: none;
    border: 1px solid #0c9;
}

#steps li.active {
    background: #08c498;
    color: #fff;
}

h1 {
    font-size: 2.5rem;
}

p {
	font
}

input {
    background: #fff;
    outline: 0;
}

input:focus {
    outline: 0;
}

radio {

visibility: hidden !important;
}


.rating {
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    flex-direction: row-reverse;
    position: relative;
}

.rating-0 {
    filter: grayscale(100%);
}

.rating > input {
    width: 1px;
    height: 1px;
    position: absolute;
    left: 12px;
    margin-top: 15px;
}


.rating-headline {
    width: 200px;
    margin: 0 !important;
}

.wrap-rating {
    justify-content: center;
    margin: 20px 0;
    align-items: center;
}

.rating > label {
    cursor: pointer;
    width: 35px;
    height: 35px;
    margin: auto 5px 0px 5px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e5e5e5' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 76%;
    transition: .3s;
    color: #e3e3e3;
}

.rating > input:checked ~ label,
.rating > input:checked ~ label ~ label {
    color: #08c498;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%2308c498' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}


.rating > input:not(:checked) ~ label:hover,
.rating > input:not(:checked) ~ label:hover ~ label {
    color: #08c498;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%2308c498' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}


/*!
 * Font Awesome Pro 5.12.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 */
@font-face {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    font-display: auto;
    src: url("webfonts/fa-regular-400.eot");
    src: url("webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-regular-400.woff2") format("woff2"), url("webfonts/fa-regular-400.woff") format("woff"), url("webfonts/fa-regular-400.ttf") format("truetype"), url("webfonts/fa-regular-400.svg#fontawesome") format("svg");
}

.far {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
}

@media (max-width: 1150px) {
    .fa-heart.fa-4x {
        display: none !important;
    }

    h1 {
        font-size: 28px !important;
    }

    #header {
        margin: 15px 0 !important;
    }

    p.mt-3.mb-5.font-weight-bold.text-white br {
        display: none !important;
    }

    p.mt-3.mb-5.font-weight-bold.text-white {
        margin: 0 0 20px 0 !important;
        font-size: 16px !important;
    }

    #qr-code-example {
        padding: 12px !important;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    #qr-code-example img {
        width: 300px !important;
    }

    #login-column {
        max-width: 100% !important;
        width: 500px !important;
    }

    #wrap-wine-images img:first-of-type {
        margin-right: 215px !important;
    }

    #wrap-wine-images img {
        width: 50px !important;
    }

}

@media (max-width: 900px) {
    #rate-wine-column {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

@media (max-width: 991px) {
    .col.order-lg-1.order-0.text-right {
        padding: 0px !important;
        margin-bottom: 25px;

    }

    .col.order-lg-1.order-0.text-right .btn {
        margin-right: -15px !important;
    }

    #wrap-select-rate-wine-btns {
        align-items: flex-end;
    }

    .bottle-image {
        padding: 0px !important;
        background: none !important;
    }

    .wrap-rating {
        margin: 1.5vw 0 !important;
    }

   	#image {
        height: 270px !important;
	}
	

    .container {
        max-width: 100% !important;
    }

    #header {
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    #header .col {
        flex: 0 0 100%;
    }

}

@media (max-width: 625px) {
    #wrap-select-rate-wine-btns {
        display: block !important;
    }

    #wrap-select-rate-wine-btns > div:first-of-type a {
        margin-bottom: 40px !important;
    }

    #wrap-select-rate-wine-btns a {
        max-width: 280px;
        margin-right: 0px !important;
    }

    #wrap-select-rate-wine-btns > div {
        padding: 0px !important;
        width: 100% !important;
    }
	
	#login-info .btn {
		margin-top: -30px !important;
		margin-right: -3px !important;

	}
	
}

@media (max-width: 675px) {
    #wrap-rating-elements {
        justify-content: flex-start !important;
    }

    .rating-headline {
        font-size: 0.85rem !important;
        text-transform: none !important;
        width: 85px !important;
		padding-top: 15px !important;
    }

    .rating > label {
        width: 10vw;
        margin: 5vw 0.25vw 0 0.25vw !important;
    }

    #smiley {
        margin-left: 20px !important;
        font-size: 35px !important;
        margin-top: -15px !important;
		display: none !important;
    }
}

@media (max-width: 575px) {
    #login-column button {
        margin-right: 0px !important;
        margin-bottom: 15px !important;
        width: 100%;
    }

    .mt-5 {
        margin-top: 1.25rem !important;
    }

    #login-btn,
    #nur-bewerten-btn {
        width: 100% !important;
        margin: 10px 0 !important;
    }


    #insert-number-form > div {
        display: block !important;
    }

    footer div a,
    footer div span {
        width: 100% !important;
        margin: 5px 0 !important;
        text-align: center !important;
        display: inline-block !important;
    }

    footer div a.ml-4 {
        margin-left: 0px !important;
    }
}

.footer-cont {
	position: fixed !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 30px;
	background: #f5f5f7;
}

.footer-cont a {
	font-size: 11px !important;
}
.disabled {
	
	color: #e6e6e6 !important;
	background: none !important;
	border-color: #e6e6e6 !important
} 

#insert-number-form input {
	width: 240px;
}

  #insert-number-form button {
	width: 240px;
}

.img-about {
	max-height: 120px!important;
	max-width: 120px !important;
}