@import '../main.css'; /* MANDATORY */
@import '../elements/form.css';
@import '../elements/button.css';

main h1 { margin-top: 25px; }
main {
    max-width: 991px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

main > div {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    margin-left: 2px;
}

main > div > div, main .form-container { padding: 0; }
main > div > div:first-child { flex: initial; }
main > div > .form-container { flex: auto; }
main > div > div:first-child > iframe {
    width: 300px;
    height: 275px;
    margin-top: 20px;
}

main > div > .form-container { max-width: 415px; }
#productselection, label[for="productselection"] { display: none; }

@media (max-width: 260px) {
    .form-container > form > menu button { margin: 12px; }
    main > div > div:first-child > iframe { display: none; }
}

@media (max-width: 480px) {
    main > div > div:first-child, 
    main > div > .form-container { 
        width: 100%;
    }
    main > div > div:first-child { margin-right: 0px; }
    main > div > div:first-child > iframe { width: 100%; }
    main > div > .form-container > h2 { margin-bottom: 0; }
}

@media (min-width: 481px) and (max-width: 768px) {
    main > div > div:first-child { margin-right: 15px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    main > div > div:first-child { margin-right: 50px; }
    main > div > div:first-child, 
    main > div > .form-container { 
        min-width: 340px;
    }
}

@media (max-width: 768px) {
    main > div { flex-direction: column; }
}

@media (min-width: 991px) {
    main > div > div:first-child { margin-right: 100px; }
    main > div > div:first-child, 
    main > div > .form-container { 
        min-width: 380px;
    }
}