.container {
    display: grid;
    /* grid-template-columns: 1fr; */
    /* align-items: center; */
    /* grid-template-columns: repeat(auto-fit, minmax(240px, 350px)); */
    /* grid-template-rows: [row-1] 1fr [row-2] 1fr [row-3] 1fr [row-4] 1fr [row-5]; */
    grid-auto-rows: auto; 
    grid-auto-columns: auto;
    gap: 16px; 
    align-items: auto;
    justify-content: center;
    padding: 20px; 
    max-width: 1200px;
    margin: 0 auto; 
}

.item {
    border-radius: 27px;
    background-color: #181818;
    text-align: center;
    padding: 8px; 
    
    text-decoration: none;

    border-width: 1px;
    border-color: #181818; 
    border-style: solid;
}

.item-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px; 
    align-items: auto;
}

a {
    color: white;
}

.item:hover, .item:active {
    color: white;
    border-width: 1px;
    border-color: #285a83; 
    border-style: solid;
}

.item-new {
    border-width: 1px;
    border-color: #FF9500;
    border-style: solid;
}

.item-main-app {
    grid-row-start: 1;
    height: 400px; 
    padding-top: 0px; 
}

.item-control {
    padding-left:2.5em; 
    padding-right:2.5em; 
    background-image: url("../images/SpeakerBackground.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    height: 150px; 
}

.item-control>img {
    object-fit: contain;
    max-width: 70%;
    max-height: 75%;
    overflow: hidden;
}

.item-watch-support {

    background-image: url("../images/Supported_versions.png");
    background-size: auto 90%;
    background-repeat: no-repeat;
    background-position: center;

    height: 300px; 
}

.item-complications {

    background-image: url("../images/ComplicationsBackground.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    height: 250px; 
}

.item-battery {
    width: auto;
    height: 150px;  
}

.item-fast {
    width: auto;
    height: 150px;  

    background-image: url("../images/fforward.png");
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
}

.item-sleep-timer {

    background-image: url("../images/CatBackground.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    vertical-align: middle;

    height: 150px; 
}

.sleep-timer-img {
    background-image: url("../images/sleeptimericon.png");
    background-size: auto 50%;
    background-repeat: no-repeat;
    background-position: center;
    height: 90%;
    width: 100%;
}

.item-group {

    vertical-align: middle;
    padding-bottom: 2.5em;
    height: 400px; 
    /* max-height: 80%; */
}

.item-image {
    padding-bottom: 2.5em;
    height: 400px;
}

.item-image>img {
    object-fit: contain;
    max-width: 100%;
    max-height: 350px;
    overflow: hidden;
}


.info-box {
    border-radius: 27px;
    background-color: #181818;
    padding-top: 1em;
    padding-bottom: 1em;
    
    padding-left: 3em;
    padding-right: 3em;

    position: relative;
    
    max-width: 500px;
}

.info-box-img{
    height: 300px;
    padding: 1em; 
}

.info-background {
    position: fixed;
    bottom: 0; 
    right: 0;
    left:0;
    top:0;

    background-color:rgba(0, 0, 0, 0.8);

    padding: 2em; 

    /* Animate visibility */
    animation: fadein 300ms;
    overflow-y: scroll;
}

.close-button {
    width: 35px;
    position: absolute; 
    left: 1em;  
    top: 2em; 
}

.new-feature-badge {
    position: absolute; 
    top: 0; 
    right: 0;
}

/* .item-main-app:hover .info-background {
    opacity: 1;
} */

.center-text {
     /* this is what centers your element in the fixed wrapper*/
     display: flex;
    flex-flow: column nowrap;
    justify-content: center; /* aligns on vertical for column */
    align-items: center; /* aligns on horizontal for column */
    height: 80%;
}

.footnote {
    font-size: 8pt; 
}

.appstore-link {
    position: fixed; 
    bottom: 0;
    right: 0; 
    /* width: 100%; 
    background-color: #181818; */
    padding: 1em; 
}

.info-banner {
    border-radius: 10px;
    background-color: #171930;
    padding-top: 1em;
    padding-bottom: 1em;
    
    padding-left: 3em;
    padding-right: 3em;
    margin-top: 2em; 

    max-width: 1200px;
}

body {
    background-color: black;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: white;
    min-height: 100%;
    text-align: center;
    align-content: center;
    padding-bottom: 5em;
}

html {
    height: 100%; 
}

h1 {
    margin-block-end: 0.2em;
    margin-block-start: 0;
    font-size: 2.5em;
}

.mainvideo {
    /* max-width: 350px; */
    max-height: 350px; 
    width: 100% !important;
    height:auto !important; 
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Contact info */

.contact-area {
    max-width: 500px; 
    /* this is what centers your element in the fixed wrapper*/
    display: flex;
    flex-flow: column nowrap;
    justify-content: center; /* aligns on vertical for column */
    align-items: center; /* aligns on horizontal for column */
    margin: 0 auto; 
}

.contact-info-single .icon {
    width: 25%;
    float: left;
    margin-right: 10px;
    text-align: center
}

.contact-info {
    padding: 0 0 0 15%;
}

.contact-info-single {
    margin: 0 0 30px;
    overflow: hidden
}

.contact-info-single .icon {
    width: 25%;
    float: left;
    margin-right: 10px;
    text-align: center
}

.contact-info-single .content {
    width: 70%;
    float: left;
}

.contact-info-single i {
    font-size: 30px;
    color: #285a83;
    border: 1.2px solid #285a83;
    border-radius: 4px;
    width: 55px;
    height: 55px;
    display: inline-block;
    line-height: 55px
}

.contact-info-single p {
    font-size: 15px;
    color: rgb(216, 216, 216)
}

@media only screen and (min-width: 768px) {
    body {
        font-size: 12pt;
    }

    .container {
        display: grid;
        grid-template-columns: [col-1] 1fr [col-2-1] 0.66fr [col-2-2] 0.66fr [col-3] 1fr [col-4];
        grid-template-rows: [row-1] 150px [row-2] 150px [row-3] 150px [row-4] 150px [row-5] 150px [row-6] 150px [row-7];
        gap: 16px; 
        align-items: auto;
        justify-content: center;
        padding: 20px; 
        max-width: 1200px;
        margin: 0 auto; 
    }

    .item-main-app {
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: row-2;
        grid-row-end: row-4; 
        height: auto; 
    }

    .item-main-app>img {
        object-fit: contain;
        max-width: 100%;
        max-height: 75%;
        overflow: hidden;
    }

    .item-control {
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: row-1;
        grid-row-end: row-2; 

        padding-left:2.5em; 
        padding-right:2.5em; 
        background-image: url("../images/SpeakerBackground.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: auto; 
    }

    .item-subgrid {
        grid-column-start: 2;
        grid-column-end: 4;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px; 
        align-items: auto;

        height: auto; 
    }

    .item-control>img {
        object-fit: contain;
        max-width: 70%;
        max-height: 75%;
        overflow: hidden;
    }

    .item-watch-support {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: row-1;
        grid-row-end: row-3;

        background-image: url("../images/Supported_versions.png");
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: center;
        height: auto; 
    }

    .item-complications {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: row-3;
        grid-row-end: row-5; 

        background-image: url("../images/ComplicationsBackground.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: auto; 
    }

    .item-battery {
        height: auto; 
        width: auto; 
    }

    .item-fast {
        height: auto; 
        width: auto; 

        background-image: url("../images/fforward.png");
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .item-sleep-timer {
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: row-1;
        grid-row-end: row-3; 

        background-image: url("../images/CatBackground.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        vertical-align: middle;
        height: auto; 
    }

    .item-group {
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: row-3;
        grid-row-end: row-5; 

        vertical-align: middle;
        padding-bottom: 2.5em;
        height: auto; 
        /* max-height: 80%; */
    }

    .item-audio-messages {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: row-5;
        grid-row-end: row-7; 

        vertical-align: middle;
        padding-bottom: 2.5em;
        height: auto; 
    }

    .item-music {
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: row-5;
        grid-row-end: row-7; 

        vertical-align: middle;
        padding-bottom: 2.5em;
        height: auto; 
    }

    .item-households {
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: row-5;
        grid-row-end: row-7; 

        vertical-align: middle;
        padding-bottom: 2.5em;
        height: auto; 
    }

    .item-image {
        height: auto; 
    }

    .item-image>img {
        object-fit: contain;
        max-width: 100%;
        max-height: 75%;
        overflow: hidden;
    }



    .info-background {
        /* this is what centers your element in the fixed wrapper*/
        display: flex;
        flex-flow: column nowrap;
        justify-content: center; /* aligns on vertical for column */
        align-items: center; /* aligns on horizontal for column */
    }

    .mainvideo {
        /* max-width: 350px; */
        max-height: 250px; 
        width: 100% !important;
        height:auto !important; 
    }
}