
form{
    grid-column: 2 / span 2;
    grid-row: 1 / span 9;
}

form *{
    margin-top: 20px;
}

.gridcontainer-middle{
    grid-template-rows: repeat(8,auto) 2fr;
}

.gridcontainer-middle div:first-of-type{
    grid-row: 1 / span 9;
    margin-top: 0px;
}

.item-cap1{
    grid-column: 2;
    grid-row: 1;
}
.item-cap2{
    grid-column: 2;
    grid-row: 2;
}
.item-cap3{
    grid-column: 2;
    grid-row: 3;
}
.item-cap4{
    grid-column: 2;
    grid-row: 4;
}
.item-cap5{
    grid-column: 2;
    grid-row: 5;
}
.item-cap6{
    grid-column: 2;
    grid-row: 6;
}
.item-cap7{
    grid-column: 2;
    grid-row: 7;
}
.item-cap8{
    grid-column: 2;
    grid-row: 8;
}

.item-form1{
    grid-column: 3;
    grid-row: 1;
    width: 90%;
}
.item-form2{
    grid-column: 3;
    grid-row: 2;
    width: 90%;
}
.item-form3{
    grid-column: 3;
    grid-row: 3;
    width: 90%;
}
.item-form4{
    grid-column: 3;
    grid-row: 4;
    width: 90%;
}
.item-form5{
    grid-column: 3;
    grid-row: 5;
    width: 90%;
}
.item-form6{
    grid-column: 3;
    grid-row: 6;
    width: 90%;
}
.item-form7{
    grid-column: 3;
    grid-row: 7;
    width: 90%;
}
.item-form8{
    grid-column: 3;
    grid-row: 8;
}

input[type="submit"]{
    grid-column: 3;
    grid-row: 9;
    background-color: #000000;
    color: #FFFFFF;
    width: 50%;
    height: 75%;
    margin-bottom: 40%;
}

.item-submit{
    grid-column: 3;
    grid-row: 9;
    background-color: #000000;
    color: #FFFFFF;
    width: 50%;
    height: 75%;
    margin-bottom: 40%;
}

@media screen and (min-width:481px)
{
    form{
        grid-column: 2 / span 4;
    }
    
    
    .item-form1{
        grid-column: 3 / span 3;

    }
    .item-form2{
        grid-column: 3 / span 3;

    }
    .item-form3{
        grid-column: 3 / span 3;

    }
    .item-form4{
        grid-column: 3 / span 3;

    }
    .item-form5{
        grid-column: 3 / span 3;

    }
    .item-form6{
        grid-column: 3 / span 3;

    }
    .item-form7{
        grid-column: 3 / span 3;

    }
    .item-form8{
        grid-column: 3 / span 3;

    }
    
    input[type="submit"]{
        grid-column: 3 / span 3;
        margin-bottom: 40%;
    }
    .item-submit{
        grid-column: 3 / span 3;
        margin-bottom: 40%;
    }
}

@media screen and (min-width:768px)
{
    form{
        grid-column: 2 / span 7;
        grid-row: 1 / span 5;
    }
    
    .gridcontainer-middle{
        grid-template-rows: repeat(4,auto) 10%;
    }
    
    .gridcontainer-middle div:first-of-type{
        grid-row: 1 / span 5;
    }
    
    .item-cap1{
        grid-column: 2;
        grid-row: 1;
    }
    .item-cap2{
        grid-column: 6;
        grid-row: 1;
    }
    .item-cap3{
        grid-column: 2;
        grid-row: 2;
    }
    .item-cap4{
        grid-column: 6;
        grid-row: 2;
    }
    .item-cap5{
        grid-column: 2;
        grid-row: 3;
    }
    .item-cap6{
        grid-column: 6;
        grid-row: 3;
    }
    .item-cap7{
        grid-column: 2;
        grid-row: 4;
    }
    .item-cap8{
        grid-column: 6;
        grid-row: 4;
    }
    
    .item-form1{
        grid-column: 3 / span 2;
        grid-row: 1;
       
    }
    .item-form2{
        grid-column: 7 / span 2;
        grid-row: 1;
    }
    .item-form3{
        grid-column: 3 / span 2;
        grid-row: 2;
        
    }
    .item-form4{
        grid-column: 7 / span 2;
        grid-row: 2;
    }
    .item-form5{
        grid-column: 3 / span 2;
        grid-row: 3;
        
        height: 60%;
        
    }
    .item-form6{
        grid-column: 7 / span 2;
        grid-row: 3;
        
        height: 60%;
    }
    .item-form7{
        grid-column: 3 / span 2;
        grid-row: 4;
        height: 15%;
        
    }
    .item-form8{
        grid-column: 7 / span 2;
        grid-row: 4;
    }
    
    input[type="submit"]{
        grid-column: 7 / span 2;
        grid-row: 5;
        margin-bottom: 80%;
    }
    .item-submit{
        grid-column: 7 / span 2;
        grid-row: 5;
        margin-bottom: 80%;
    }
}

@media screen and (min-width:1025px)
{
    form{
        grid-column: 3 / span 10;
        grid-row: 1 / span 5;
    }
    
    .item-cap1{
        grid-column: 3;
        grid-row: 1;
    }
    .item-cap2{
        grid-column: 7;
        grid-row: 1;
    }
    .item-cap3{
        grid-column: 3;
        grid-row: 2;
    }
    .item-cap4{
        grid-column: 7;
        grid-row: 2;
    }
    .item-cap5{
        grid-column: 3;
        grid-row: 3;
    }
    .item-cap6{
        grid-column: 7;
        grid-row: 3;
    }
    .item-cap7{
        grid-column: 3;
        grid-row: 4;
    }
    .item-cap8{
        grid-column: 7;
        grid-row: 4;
    }
    
    .item-form1{
        grid-column: 4 / span 3;
        grid-row: 1;
        height: 20%;
    }
    .item-form2{
        grid-column: 8 / span 3;
        grid-row: 1;
        height: 20%;
    }
    .item-form3{
        grid-column: 4 / span 3;
        grid-row: 2;
        height: 30%;
        
    }
    .item-form4{
        grid-column: 8 / span 3;
        grid-row: 2;
        height: 20%;
    }
    .item-form5{
        grid-column: 4 / span 3;
        grid-row: 3;
        height: 30%;
    }
    .item-form6{
        grid-column: 8 / span 3;
        grid-row: 3;
        height: 30%;

    }
    .item-form7{
        grid-column: 4 / span 3;
        grid-row: 4;
        height: 5%;
    }
    .item-form8{
        grid-column: 8 / span 3;
        grid-row: 4;
    }
    
    input[type="submit"]{
        grid-column: 8 / span 3;
        grid-row: 5;
    }
    .item-submit{
        grid-column: 8 / span 3;
        grid-row: 5;
    }
}