.iframeitem {
    width: 100%;
    height: 600px;

}
.gridform {
        display: grid;
        grid-gap: 1px;
        grid-template-columns: 30% 30% 30%;
        background-color: #f0ffff;
        border: 1px solid #a9a9a9;
        border-radius: 20px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #800000;
    }

.formbox {     
    padding: 10px;
}
    
.notes {
    font-size: 13px;
    color: #006400;
    font-style: italic;
    }

.head {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;
    color: #800000;    
    }

h4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;    
    color: #800000;    
    }

p, li {
    font-weight: normal;    
    }

.titleinput {
    width: 90%;
    }

.formselect {
    width: 90%;
    }
    
.title {
        grid-column: 1 / span 3 ; 
        grid-row: 1 ;
    }
    

.geography {
        grid-column: 1 / span 2;
        grid-row: 2 ;
    }
    
#geog, #year, #artefact, #fname, .modelabel {
            font-size: 11px;
}
    
.year {
        grid-column: 3;
        grid-row: 2;
    }
    
.year2 {
        grid-column: 3;
        grid-row: 3;
    }    
    
.type {
        grid-column: 1;
        grid-row: 3 / span 2 ;
    }

.mode {
        grid-column: 2 ;
        grid-row: 3 / span 2;
    }
      
.submit {
        grid-column: 3 ;
        grid-row: 4 ;
    }
    
    
/** Desktop **/
@media (min-width: 981px){
.gridform {
max-width : 600px;
clear: none;
}
}
 
/** Tablet **/
@media (max-width: 980px){
.gridform {
max-width : 500px;
clear: none;
}
}
 
/** Small Tablet and Large Phone **/
@media (max-width: 767px){
.gridform {
max-width : 500px;
clear: none;
}
}
 
/** Phone **/
@media (max-width: 479px){
.gridform {
zmax-width : 300px;
max-width : 100%;
clear: none;
}
}
    
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}

.box {
    width: 280px;
    height: 300px;
    background-color: #f0ffff;
    border: 1px solid #d3d3d3;
    border-radius: 5px;
    padding: 5px;
    display: grid;
    grid-gap: 2px;
    grid-template-columns: 40% 60%;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    color: #006400;
}
   
.titleinner {
        grid-column: 1 / span 2 ; 
        grid-row: 1 ;
        font-size: 12px;
        font-weight: bold;
        color: #800000;            
    }
    
.coverinner {
        grid-column: 1 ; 
        grid-row: 2  ;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
.metainner {
        grid-column: 1 ; 
        grid-row: 3  ;
        zbackground-color: #001200;
        zcolor: #800000; 
        font-style: italic;
    }
    
.descinner {
        grid-column: 2 ; 
        grid-row: 2 / span 2 ;
        padding: 2px;
        overflow: auto;
    }