body {
    padding:0;
    margin:0;
}

a, a:link, a:visited, a:active {
    color: black;
}


h1, h2, h3, h4, h5, h6 {
    font-family: "Arial", sans-serif;
}

h1 {
    font-size: 36px;
    letter-spacing: 4px;
    font-weight: bold;
}

h2 {
    font-size: 18px;
}

h3 {
    font-size: 22px;
    letter-spacing: 2px;
    font-weight: bold;
}

h4 {
    font-size: 18px;
    font-weight: normal;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 12px;
}

header {
    background-color: black;
    height:60px;
}

footer {
    background-color: black;
    color: white;
}

.btn-primary, .btn-primary:hover {
    background-color: white;
    color: black;
    border-color: white;
    text-transform: uppercase;
    font-weight: 500;
}

.btn-primary a {
    color: black;
    text-decoration: none;
}


header img {
    height:30px;
    margin:15px;
}

.main-image {
    background-image: url("./headerlanding.jpg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    background-attachment: fixed;
}

.main-image img {
    width:30%;
}

.form-container {
    background-color: white;
}

.form-container textarea {
    height: 200px;
    resize: none;
}

.form-container .btn {
    width:100%;
    border: 1px solid gray;
}

.form-container .btn:hover {
    background-color: gray;
}

.collection-container {
    background-image: url("./sfondocollezioni.jpg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    padding:30px 80px;
    text-align: center;
}

.collection {
    overflow:hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: visibility 0.2s linear;

}

.collection-inner {
    opacity: 0;
    position: relative;
    left:0;
    top:0;
    text-align: center;
    padding:10px 30px 40px 30px;
    background-color: #b1c1d0;
    transition: opacity 0.2s linear;
}

.collection-inner h3 {
    padding-top:30%;
    line-height: 22px;
    height:50px;
}

.collection-inner h4 {
    padding-top:15%;
    height:120px;
}

.unexpected .collection-inner h3 {
    padding-top:30px;
}

.unexpected .collection-inner h4 {
    padding-top:50px;
}

.collection-inner:hover {
    opacity: 1;
}

.collection-inner button {
    display: none;
}

.scent-of-a-flower { background-image: url("./flower.jpg"); }
.temptation { background-image: url("./fire.jpg"); }
.gourmand-addiction { background-image: url("./gourmand.jpg"); }
.special { background-image: url("./special.jpg"); }
.summer-glow { background-image: url("./summer.jpg"); }
.winter-holidays { background-image: url("./xmas.jpg"); }
.impossible-garden { background-image: url("./garden.jpg"); }
.kosmeo { background-image: url("./kosmeo.jpg"); }
.unexpected { background-image: url("./unexpected.jpg"); }

#popup-open {
    z-index:1000;
    position:fixed;
    left:calc(50vw - 400px);
    top:calc(50vh - 400px);
    width:800px;
    height:800px;
    background-image: url("./unexpected-popup.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    padding:80px 80px;
    color: white;
    border:10px solid white;
    box-shadow: 0 0 10px 10px rgba(0,0,0,0.5);
    background-color:black;
}

#popup-open ul li {
    list-style: none;
}

@media screen and (max-width: 800px) {
    #popup-open {
        left:calc(50vw - 300px);
        top:calc(50vh - 300px);
        width:600px;
        height:600px;
        padding:5px;
    }
}

@media screen and (max-width: 600px) {
    #popup-open {
        left:calc(50vw - 200px);
        top:5vh;
        background-size: contain;
        background-position: bottom center;
        height:90vh;
        width:400px;
    }
}

#popup-button-close {
    position:absolute;
    left:calc(50% - 40px);
    width:80px;
    bottom:20px;
    border: 1px solid white;
    color:white;
    text-transform: uppercase;
    border-radius: 3px;
    font-weight: bold;
    box-shadow: 0 0 10px 10px rgba(0,0,0,0.3);
    background-color: #967388;
}

.icon-container img {
    width:60%;
}

.icon-container h5 {
    font-weight: bold;
}

.icon-container h5 + h5 {
    display:none;
}

@media screen and (max-width: 768px) {
    .main-image img {
        width:70%;
    }

    .main-image {
        background-position: right center;
    }

    .collection-container {
        padding: 60px 10px;
    }

    .collection {
        margin-bottom:30px;
    }

    .icon-container,
    footer {
        padding-left:25px;
        padding-right:25px;
    }

    /*
    .collection-inner {
        opacity:0.7;
    }

     */

}