/*Set rows and columns; 
set a div as a row then have seperate divs for each column- putting the contents of that div inside
column specifies how large you want a div to be
think of it as this being a grid layout that is invisible
*/
.row::after {
    content: "";
    clear: both;
    display: block;
  }

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 15px;
}

  * {
    box-sizing: border-box;
  }

/*            Above is needed for basic responsiveness          */

/* Used to centre the logo and add padding */
.centered{
    max-width: 35%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*sizes icons for desktop*/
.icond
{
    max-width: 40%;
    height:auto;
    top: 50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*background image must be written like this otherwise grey boxes around divs may appear*/
body{
    background: url("../img/newpage/back.png");
  }


/*Desktop*/
/*Media query hides phone icons*/
@media only screen and (min-width: 951px) {
    #row1_mob {display: none;}
    #row2_mob {display: none;}
    #row3_mob {display: none;}
    #row1_tab {display: none;}
    #row2_tab {display: none;}
    #row3_tab {display: none;}
}

/*Tablet*/
/*Media query hides desktop icons and makes the logo and icons bigger*/
@media only screen  and (min-width:451px) and (max-width: 950px){
  #row1 {display: none;}
  #row2 {display: none;}
  #row3 {display: none;}
  #row1_mob {display: none;}
  #row2_mob {display: none;}
  #row3_mob {display: none;}
  .centered{
    max-width: 65%;
}
  .icond{
    max-width: 40%;
}
}


/*Phone*/
/*Media query hides desktop icons and makes the logo and icons bigger*/
@media only screen and (max-width: 450px) {
    #row1 {display: none;}
    #row2 {display: none;}
    #row1_tab {display: none;}
    #row2_tab {display: none;}
    #row3_tab {display: none;}
    .centered{
        max-width: 90%;
    }
    .icond{
        max-width: 80%;
    }
}