.col1x1{
    width:100%;
    box-sizing: border-box;
    position: relative;
    float:left;
    
}

.col1x2{
    width:50%;
    box-sizing: border-box;
    text-align:left;
    position: relative;
    float:left;
    width:50%;
    text-align:left
}

.col1x3{
    box-sizing: border-box;
    position: relative;
    float:left;
    width:33.3%;
    text-align:left
}

.col2x3{
    box-sizing: border-box;
    position: relative;
    float:left;
    width:66.6%;
    text-align:left
}

.col1x4{
    box-sizing: border-box;
    position: relative;
    float:left;
    width:25%;
    text-align:left
}

.col-container{
    
    width:100%;
    padding:15px;
    box-sizing: border-box;
}

.row-group-title{
    
    position:relative;
    float:left;
    margin-bottom:25px;
    width:100%;
    font-size:17px
}

.row-field-title{
    
    position:relative;
    float:left;
    margin-bottom:8px;
    margin-top:8px;
    width:100%;
}

.inner-space{
    padding:10px;
    box-sizing: border-box;
    
}

@media only screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
    
    .col1x1{
        width:100%;
        box-sizing: border-box;
        position: relative;
        float:left;
    
    }

    .col1x2{
        width:100%;
        box-sizing: border-box;
        text-align:left;
        position: relative;
        float:left;
        text-align:left
    }

    .col1x3{
        box-sizing: border-box;
        position: relative;
        float:left;
        width:100%;
        text-align:left
    }

    .col2x3{
        box-sizing: border-box;
        position: relative;
        float:left;
        width:100%;
        text-align:left
    }

    .col1x4{
        box-sizing: border-box;
        position: relative;
        float:left;
        width:100%;
        text-align:left
    } 
}

@media only screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
   .col1x1{
        width:100%;
        box-sizing: border-box;
        position: relative;
        float:left;
    
    }

    .col1x2{
        width:100%;
        box-sizing: border-box;
        text-align:left;
        position: relative;
        float:left;
        text-align:left
    }

    .col1x3{
        box-sizing: border-box;
        position: relative;
        float:left;
        width:100%;
        text-align:left
    }

    .col2x3{
        box-sizing: border-box;
        position: relative;
        float:left;
        width:100%;
        text-align:left
    }

    .col1x4{
        box-sizing: border-box;
        position: relative;
        float:left;
        width:100%;
        text-align:left
    } 
}

@media only screen
and (min-width : 320px)
and (max-width : 767px)
and (orientation : landscape){
    
    .col1x3{
        box-sizing: border-box;
        position: relative;
        float:left;
        width:100%;
        text-align:left
    }
}


/* iPads (landscape) ----------- */
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) 
    and (orientation : landscape) {
    
        
    .col1x2{
    width:50%;
    box-sizing: border-box;
    text-align:left;
    position: relative;
    float:left;
    text-align:left
        }
        
        .col1x3{
        box-sizing: border-box;
        position: relative;
        float:left;
        width:100%;
        text-align:left
    }
        
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) 
and (orientation : portrait) {
    
    .col1x2{
    width:50%;
    box-sizing: border-box;
    text-align:left;
    position: relative;
    float:left;
    width:50%;
    text-align:left
}
    
    .col1x3{
        box-sizing: border-box;
        position: relative;
        float:left;
        width:100%;
        text-align:left
    }
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1025px) {
    
    .col1x2{
    width:50%;
    box-sizing: border-box;
    text-align:left;
    position: relative;
    float:left;
    width:50%;
    text-align:left
}
    
    .col1x3{
        box-sizing: border-box;
        position: relative;
        float:left;
        width:33.3%;
        text-align:left
    }
}