@media (min-width: 2560px) {
   #modalColor {
        transform: translate(-50%, 7.5%);
    }
}

@media (min-width: 1441px) and (max-width: 2559px) {
    #modalColor {
        transform: translate(-50%, 7.5%);
    }
}

/* 
  ##Device = Desktops (14')
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) and (max-width: 1440px)  {
    #modalZen{
        transform: translate(-50%, 1%);
    }
    
    /*t.o.p programme flow*/
    .timeline ul li.in-view div{
        line-height: 24px;
    }
     /* useful resources */
    .arrowbox
    {
        font-size: 19px !important;
    }
    .resources ul li a span {
        font-size: 13px !important;
        line-height: 13px !important;
    }
    .titleLink {
        font-size: 13px !important;
        margin: 0.5% 3% 0 6.5% !important;
    }
    
    .second {
        margin: 1% 3% 0 5.5% !important;
    }
    
    /*Important dates*/
    .Idatebox{
        font-size:29px;
        margin: 2.95% 0 0 2%;
        width:10%;
    }
    
    .Inamebox {
        margin: 16% 1% 0 2%;
    }
    
    .column {
      float: left;
      width: 25%;
      height: 320px;
    }
    #imgBox1,
    #imgBox2,
    #imgBox3,
    #imgBox4,
    #imgBox5,
    #imgBox6,
    #imgBox7,
    #imgBox8,
    #imgBox9,
    #imgBox10{
        height: 320px;
    }
}

/* 
  ##Device = Laptops, Desktops(Mac)
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
    #modalZen{
        transform: translate(-50%, 1%);
    }
   
     /* Our NBS Legacies*/
    .legacyTitleDiv{
        padding: 2.5% 0 1% !important;
    }
    #legacy2,
    #legacy5 {
        margin-right: 7.7% !important;
    }
     /*t.o.p programme flow*/
    .timeline ul li{
        padding-top: 5.5% !important;
    }
    .timeline ul li::after{
        font-size: 23px;
    }
    
    .titleEvent {
        font-size: 22px;
        line-height:23px;
    }
    
    /*Important dates*/
    .Idatebox{
        font-size:28px;
        margin:3.5% 0 0 2%;
        width:10%;
    }
    
    .Inamebox {
        margin: 16.5% 1% 0 2%;
    }
    
    .Inamebox h {
        line-height: 24px !important;
    }
    
    .Iname {
        font-size: 22px;
    }
    
    .Icontact {
        position:absolute;
        width:6%;
        height:6%;
        margin-left:19%;
        margin-top:3%;
        cursor:pointer;
    }
    .column {
      height: 320px;
    }
    
    #imgBox1,
    #imgBox2,
    #imgBox3,
    #imgBox4,
    #imgBox5,
    #imgBox6,
    #imgBox7,
    #imgBox8,
    #imgBox9,
    #imgBox10{
        height: 320px;
    }
    
    .fourline{
        margin-top: 2.2% !important;
    }
    
    .sec{
        margin-top:2% !important;
    }
    
    /* useful resources */
    .arrowbox {
        font-size: 23px !important;
    }
    
    .arrowbox > span{
        top: 31%;
    }
    
    .resources ul li a span {
        font-size: 13px !important;
        line-height: 13px !important;
    }
    #titleNBS{
        width: 28% !important;
    }
    
    #titleCourse{
        width: 42% !important;
    }
    
    #titleOther{
        width: 25% !important;
    }
    
    .resources ul {
        margin-left: 8.5% !important;    
    }
    
    .titleLink {
        margin: 0.9% 3% 0 8.5% !important;
        font-size: 13px !important;
    }
    
    .second {
        margin: 1.5% 3% 0 7% !important;
    }
}

/* 
  ##Device = Mobile Phones, Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px){
    
    .modal-content{
       width: 75% !important; 
    }
    
    #modalZen{
        transform: translate(-50%, 1%);
    }
    
    #modalColor {
        transform: translate(-50%, 50%);
    }
    
    #modalFop{
        transform: translate(-50%, 30%);
    }
    
     #modalRush{
        transform: translate(-50%, 20%);
    }
    
    /*importantdate*/
    
    .Idatebox{
        margin:6.5% 0 0 3%;
        width:15%;
    }
    
    .Inamebox {
        position:absolute;
        margin: 29% 1% 0 3%;
        width:30.2%;
        line-height:1;
    }
    
    .Icontact {
        position:absolute;
        width:8%;
        height:5%;
        margin-left:29%;
        margin-top:3%;
        cursor:pointer;
    }
    
    .column,
    .fifthCol{
      width: 41%;
      margin:2% 18% 2% 0;
    }
    
    #imgBox1,
    #imgBox2,
    #imgBox3,
    #imgBox4,
    #imgBox5,
    #imgBox6,
    #imgBox7,
    #imgBox8,
    #imgBox9,
    #imgBox10{
        width: 34.5%;
    }
    
    .sec{
        margin-top:4% !important;
    }
    
    .fourline{
        margin-top:3.7% !important;
    }
    .row{
        margin: 0 8% !important;
    }
    
    .secondCol,
    .forthCol,
    .sixthCol{
        margin-right: 0 !important;
    }
    .thirdCol{
        margin-right: 18% !important;
    }
    
    .tcell ul,
    .tcell2 ul {
        margin-left: 11.5% !important;
    }
    
    #titleNBS{
        width: 43% !important;
    }

    #titleCourse{
        width: 65% !important;
    }
    
    #titleOther{
        width: 39% !important;
    }
}

/* 
  ##Device = Mobile Phones,Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
    #modalColor {
        transform: translate(-50%, 5%);
    }
    
    #modalFop, 
    #modalRush{
        transform: translate(-50%, 3%);
    }
    
    .Inamebox {
        position:absolute;
        margin: 26.5% 1% 0 3%;
        width:30.2%;
        line-height:1;
    }
    
    .Idatebox{
        margin:5.5% 0 0 3%;
        width:15%;
    }
    .fourline{
        margin-top:3.6% !important;
    }
    
    .tcell ul,
    .tcell2 ul {
        margin-left: 11.5% !important;
    }
    
    #titleNBS{
        width: 43% !important;
    }

    #titleCourse{
        width: 65% !important;
    }
    
    #titleOther{
        width: 39% !important;
    }
}

@media (min-width: 300px) and (max-width: 767px){
    header{
        margin-top: 0px;
        width: 100%;
        height: 107px;
    }
    header img{
        margin-left:20px;
    }
    .mainnavhomevd,
    .header.mobile-only{
        display:none;
    }
    .divMainContent {
        height:auto;
        padding-top: 0 !important;
    }
    .banner {
        height: auto !important;
    }
    .banner2{
        height:150px;
        line-height:150px;
        font-size:24px;
    }
    
    .imageContainer {
        margin-top: 3% !important;
    }
    
    /* Our NBS Legacies*/
    .legacylogo > img{
        width:29% !important;
    }
    #legacy1,
    #legacy4{
      margin-left: 6% !important;  
    }
    #legacy2,
    #legacy5{
      margin-right: 6% !important;    
    }
    
    #myCarousel{
        width: 95% !important;
        margin: 4% auto !important;
    }
    
     #modalZen{
        transform: translate(-50%, 1%);
    }
    
    #flamdesc h1,
    #rushdesc h1,
    #fopdesc h1,
    #zendesc h1,
    #colordesc h1{
        font-size: 24px !important;
    }
    #flamdesc h1 a,
    #rushdesc h1 a,
    #fopdesc h1 a,
    #zendesc h1 a,
    #colordesc h1 a{
        font-size: 20px !important;
    }
    
    #flamdesc a > img,
    #rushdesc a > img,
    #fopdesc a > img,
    #zendesc a > img,
    #colordesc a > img{
        width: 20% !important;
    }
    
    .thumbImg {
        width: 32% !important;
    }
    .legacyTitleDiv{
        margin-bottom: 6% !important;
        padding: 4% 0 1% !important;
    }
    .legacyTitle{
        font-size:26px !important;
    }
    
    .tcel,.tcel2 {
        display:block !important;
        width: 100% !important;
        padding: 0 2% 3% 2% !important;
    }
    
    .modal-content{
        width: 90% !important;
    }
    
    /*t.o.p programme flow*/
    .timeline ul li{
        padding-top: 9% !important;
    }
    .timeline ul li::after{
        font-size: 11px;
        width: 88px;
        padding: 5px 10px 0;
        height: 20px;
    }
    
    .timeline ul li:nth-child(odd) div{
        left: 70px;
    }
    
    .titleEvent {
        font-size: 8px;
        line-height:10px;
    }
    /* homepage */
    .img-fluid {
        width: 24.7% !important;
    }
    
    /*importantdate*/
    
    .Idatebox{
        font-size:12px;
        margin:5.5% 0 0 3%;
        width:15%;
    }
    
    .Inamebox {
        position:absolute;
        margin: 24.5% 1% 0 3%;
        width:30.2%;
        line-height:1;
    }
    .Inamebox h {
        line-height:8px !important;
        font-size: 8px !important;
    }
    
    .Idate {
        font-size: 8px;
    }
    
    .Iname {
        font-size: 12px;
    }
    
    .Icontact {
        position:absolute;
        width:8%;
        height:5%;
        margin-left:29%;
        margin-top:3%;
        cursor:pointer;
    }
    
    #imgBox1,
    #imgBox2,
    #imgBox3,
    #imgBox4,
    #imgBox5,
    #imgBox6,
    #imgBox7,
    #imgBox8,
    #imgBox9,
    #imgBox10{
        width: 34.5%;
        height: 140px;
    }
    
    .columnTitle{
        font-size: 20px !important;
    }
    
    .sec{
        margin-top:4% !important;
    }
    
    .fourline{
        margin-top:3.3% !important;
    }
    .row{
        margin: 0 8% !important;
    }
    
    .column,
    .fifthCol{
      width: 41%;
      height: 140px;
      margin:2% 18% 2% 0;
    }
    
    .secondCol,
    .forthCol,
    .sixthCol{
        margin-right: 0 !important;
    }
    .thirdCol{
        margin-right: 18% !important;
    }
    
    
    /* useful resources */
    .arrowbox
    {
        font-size: 16px;
        width: 62%;
        height: 40px;
    }
    
    .arrowbox:after{
        border-width: 20px;
        margin-top:-20px;
    }
    .arrowbox > span{
        top: 30%;
    }
    
    .tcell,.tcell2 {
        display:block !important;
        width: 94% !important;
    }
    
    .tcell {
        padding: 0 1.5% 0 1.5% !important;
    }
    .tcellDiv {
        margin-bottom: 3% !important;
    }
    .resources,
    .resources ul li a {
        font-size:11px !important;
    }
    
    .resources ul li a span,
    .titleLink {
        font-size: 8px !important;
        line-height: 10px !important;
    }
    
    .resources ul {
        margin-left: 8.5% !important;    
    }
    
    .resources ul li {
        margin-top: 0 !important;
    }
    
    .resources ul li i {
        font-size: 8px !important;
    }
    
    .titleLink {
        margin: 0.9% 3% 0 12% !important;
    }
    
    .second {
        margin: 3.5% 3% 0 12% !important;
    }
    
    .titleCategory{
        line-height: 25px;
    }
    
    #titleNBS{
        width: 50% !important;
    }

    #titleCourse{
        width: 54% !important;
    }
    
    #titleOther{
        width: 31.5% !important;
    }
    
    #lastDiv {
        padding-bottom: 3% !important;
    }
    
    .et_pb_column .et_pb_module {
        margin-bottom: 30px;
    }
    
    .et_pb_text_0_tb_footer.et_pb_text p,
    .et_pb_text_1_tb_footer.et_pb_text p,
    .et_pb_text_2_tb_footer.et_pb_text p,
    .et_pb_text_3_tb_footer.et_pb_text p {
        line-height: 2em !important;
        font-size: 16px !important;
    }
    
    .et_pb_text_3_tb_footer.et_pb_text a{
         font-size: 16px !important;
    }
}

/* 
  Footer
*/
@media only screen and (min-width: 981px){
    .et_pb_gutters3 .et_pb_column_1_2,
    .et_pb_gutters3.et_pb_row .et_pb_column_1_2{
        width: 47.25%;
    }
    
    .et_pb_gutters3 .et_pb_column,
    .et_pb_gutters3.et_pb_row .et_pb_column{
        margin-right: 5.5%;
    }
    
    .et_pb_gutters3 .et_pb_column_1_2 .et_pb_module,
    .et_pb_gutters3.et_pb_row .et_pb_column_1_2 .et_pb_module{
        margin-bottom: 5.82%;
    }
    
    .et_pb_section .et_pb_row .et_pb_column .et_pb_module:last-child{
        margin-bottom: 0;
    }
    
    .et_pb_row .et_pb_column:last-child,
    .et_pb_row .et_pb_column.et-last-child{
        margin-right: 0 !important;
    }
}
