/* General Styles */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid red;
}

.box1, .boxsecondpage1{
    background: purple
}
.box2, .boxsecondpage2{
    background: rgb(58, 94, 173)
}
.box3, .boxsecondpage3{
    background: cadetblue
}
.box4, .boxsecondpage4{
    background: green
}
.box5, .boxsecondpage5{
    background: yellowgreen
}
.box6, .boxsecondpage6{
    background: rgb(201, 183, 53)
}
.box7, .boxsecondpage7{
    background: yellow

}.box8, .boxsecondpage8{
    background: orange
}
.box9, .boxsecondpage9{
    background: orangered
}
.box10, .boxsecondpage10{
    background: rgb(226, 105, 156)
}
main{
    display: flex;
    flex-wrap: wrap;
}
.box, .boxsecondpage{
    width: 100%;
    padding: 5px;
}

.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{
    height: 100%;
}

.boxsecondpage1, .boxsecondpage2, .boxsecondpage3, .boxsecondpage4, .boxsecondpage5, .boxsecondpage6, .boxsecondpage7, .boxsecondpage8, .boxsecondpage-9, .boxsecondpage10{
    height: 100%;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
/* layout 1 & 2 */
.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{
    height: 100px;
}

.columnleft{
    width:100%;

}
.columnright{
    width:100%; 
}
.boxsecondpage1, .boxsecondpage2, .boxsecondpage3, .boxsecondpage4, .boxsecondpage5, .boxsecondpage6, .boxsecondpage7, .boxsecondpage8, .boxsecondpage9, .boxsecondpage10{
    height: 100px;
}
.group67{
    width:100%;
}
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

/* layout 1 & 2 */
.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{
    height: 100px;
}

.columnleft{
    width:100%;

}
.columnright{
    width:100%; 
}
.boxsecondpage1, .boxsecondpage2, .boxsecondpage3, .boxsecondpage4, .boxsecondpage5, .boxsecondpage6, .boxsecondpage7, .boxsecondpage8, .boxsecondpage9, .boxsecondpage10{
    height: 100px;
}
.group67{
    width:100%;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    /* layout 1 */

    .boxsecondpage1, .boxsecondpage2, .boxsecondpage3, .boxsecondpage4, .boxsecondpage5, .boxsecondpage6, .boxsecondpage7, .boxsecondpage8, .boxsecondpage9, .boxsecondpage10{
    height: 200px;
}

    .boxsecondpagelayout2, .boxsecondpagelayout3, .boxsecondpagelayout4, .boxsecondpagelayout5{
        width: 50%;
        flex-direction: row;
        
    }
       /* right column */

    .boxsecondpagelayout6{
        width: 100%;
        height: 50%
    }
        .box6, .box7{
        height: 100%;
    }
      .boxsecondpagelayout7, .boxsecondpagelayout8, .boxsecondpagelayout9{
        width: 33.3%;
      }

      /* layout 2 */
    .box2-1, .box5, .box10{
        height: 300px;
    }

    .boxlayout5{
        width: 66.66%;
    }
    .boxlayout2, .boxlayout3, .boxlayout4{
        width: 33.3%;
        flex-direction: row;
        
    }
       /* right column */

    .group67{
        width:33.33%;

    }
    .boxlayout6, .boxlayout7{
        width: 100%;
        height: 50%
    }
        .box6, .box7{
        height: 100%;
    }
      .boxlayout8, .boxlayout9{
        width: 50%;
      }


    }
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {


}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    
}