/* Start css for Main area of INDEX.php  ****/
@import "normalize.css"; /* normalizes css across different  Browsers */
/********* Start at 280 px x 653px screen size **************/

/* NB all below required to make slide work - do not change!!!!  */

section .mainsection { /* don't remove Section it fucks up the format for some reason */
    margin-top: 122px;
    margin-left: 2px;
    margin-right: 0px;
    border-radius: 5px;
    
    width: 100%;
    padding: 0px;
    
    height:200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:rgb(242, 242, 240); /* color of Section */
}


.slidertext p {
    padding-top: 10px;
    margin-left: 0px;
    justify-content: center;
    font-size: 40px;
    font-family: 'Estonia', cursive;
}

.slider {
     margin-top: 33.3px; /*positions slider under header */
     margin-left: 0px;
     width: auto;
     height: auto;
     max-width: 280px;
     border-radius: 0px;
   
     overflow: none;
     /* background-color: chartreuse; */
}

.slides {
    width: 280px;
    height: auto; /* height of Slide images */
    display: flex;
    overflow: hidden;
}

.slides input {
    display: none;
}

.slide {
    width: auto;
    transition: 2s;
}

.slide img {
    width: 280px; /* sets  width of slides in slider to width of screen 320px wide  */
    height: 240px;/* sets height of slides in slider */
  
}

/* Css for Manual slide navigator  */

.navigation-manual {
    position: absolute;
    width: 100%;
    margin-top: -20px; /* positions manual button a */
    display: flex;
    justify-content: center;
   
}

.manual-btn {
  /*border: 1px solid #FFFF;*/
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.manual-btn:not(:last-child) {
    margin-right: 12px;
}

/*.manual-btn:hover {
    background: rgb(64, 247, 54);
}  turned of as hover color remained after selection  */

#radio1:checked ~ .first {
    margin-left: 0;
}
#radio2:checked ~ .first {
    margin-left: -100%; /* big scale use -20% */
}
#radio3:checked ~ .first {
    margin-left: -200%; /* big scale use  -40% */
}
#radio4:checked ~ .first {
    margin-left: -300%; /* big scale use -60% */
}

/* css for automatic navigation */
.navigation-auto {
    position: absolute;
    width: 100%;
    margin-top: -40px;
    display: flex;
    justify-content: center;
    margin-top: 224px;
}
.navigation-auto div {
    border: 1px solid #ffff;
    padding: 5px;
    border-radius: 10px;
    transition: 1s;
}
.navigation-auto div:not(:last-child) {
    margin-right: 12px;
}

#radio1:checked ~ .navigation-auto .auto-btn1 {
 background: rgb(8, 5, 95);
}

#radio2:checked ~ .navigation-auto .auto-btn2 {
    background: rgb(8, 5, 95);
}

#radio3:checked ~ .navigation-auto .auto-btn3 {
    background: rgb(8, 5, 95);
}

#radio4:checked ~ .navigation-auto .auto-btn4 {
    background: rgb(8, 5, 95);
}
/*** end of all required Slider css ****/

/***  Css for Main section middle of page  ***/
.TextUnderSlider {
    width: 100%;
    margin-top: 6px;
    margin-left: 0px;
    margin-right: 1px;
    padding-top: 6px;
   
    background-color: rgb(236, 236, 238);/* colour back to  rgb 206,206,173) */
    height: 180px;
    border-radius: 0px;
    text-align: justify;
   }

   .TUSH3 { /*header Text under Slider on main php */
    margin: 0 auto;
    padding: 5px;
    
    margin-right: 10px;
    line-height: 1;

    font-size: 38px;
    font-weight: bold;
    font-family: 'Estonia', cursive;
    color: black;
   text-align:center;
}

.TUSP {/* css for Text below header under slider */
    color: black;
    font-size: 30px;
    font-weight: bold;
    font-family: 'Estonia', cursive;
     text-align: center;
}

/***  Css for  section  below TextUnderSlider  ****/

.Mainbottom {
    margin-top: 9px;/* gap is  bigger than TextUnderSlider by 3px due to slider differences leaving gap above TextUnderSlider section */
    
    padding-top: 10px;
    padding-left: 2px;
    border-radius: 5px;
   
    height: 125px;
    max-width: 280px;
    background-color:rgb(242, 242, 240); /* color of Section rgb 242, 242, 240*/
    align-content: center;


}
 /******** link boxes at bottom of main.php  included in  Index.php page */
.mainbox1, .mainbox2, .mainbox3 {
    float: left;
    /*background-color: chartreuse;  used for solving only */
    width: 70px;
    height: auto; /* height of Slide images */
    display: flexbox;
    max-height: 90px;
    background-color: RGB(206,206,173);
     margin-top: 6px;
     margin-left: 10px;
     padding: 1px;
     
     text-align: center;
    
    border: 3px;
    border-style: double;
    border-color: black;
    border-radius: 10px;
}
.mainbox1 img,.mainbox2 img, .mainbox3 img {
    padding-top: 4px;
     width: 70px;
     height: auto;
     min-height: 65px;
}
.mainbox1 label, .mainbox2 label,.mainbox3 label {
    margin-top: 40px;
    font-size: 11px;
    text-decoration: none;
}
 .mainbox1 a, .mainbox2 a, .mainbox3 a{ /* removes underline from  main box labels **/    
        text-decoration: none;
 }

/***** End initial Css   - set for of 280 x 653px ****/

/********* end of start size  280px screen size  ****/

/* Slider css  reset for 320 px screen */
/* all below required to make slide work */
/***********************/
@media only screen and (min-width: 320px) {
section .mainsection { /* don't remove Section it fucks up the format for some reason */
    margin-top: 122px;
    margin-left: 2px;
    margin-right: 0px;
    border-radius: 5px;
    
    width: 100%;
    padding: 0px;
    
    height:200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:rgb(242, 242, 240); /* color of Section */
}


.slidertext p {
    padding-top: 10px;
    margin-left: px;
    justify-content: center;
    font-size: 40px;
    font-family: 'Estonia', cursive;
}

.slider {
     margin-top: 33.3px; /*positions slider under header */
     margin-left: 0px;
     width: auto;
     height: auto;
     max-width: 320px;
     border-radius: 0px;
    
     overflow: none;
     /* background-color: chartreuse; */
}

.slides {
    width: 320px;
    height: auto; /* height of Slide images */
    display: flex;
    overflow: hidden;
}

.slides input {
    display: none;
}

.slide {
    width: auto;
    transition: 2s;
}

.slide img {
    width: 320px; /* sets  width of slides in slider to width of screen 320px wide  */
    height: 240px;/* sets height of slides in slider */
  
}

/* Css for Manual slide navigator  */

.navigation-manual {
    position: absolute;
    width: 100%;
    margin-top: -20px; /* positions manual button a */
    display: flex;
    justify-content: center;
   
}

.manual-btn {
    /*border: 1px solid #FFFF;*/
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.manual-btn:not(:last-child) {
    margin-right: 12px;
}

/*.manual-btn:hover {
    background: rgb(64, 247, 54);
}  turned off as hover remained after selection*/

#radio1:checked ~ .first {
    margin-left: 0;
}
#radio2:checked ~ .first {
    margin-left: -100%; /* big scale use -20% */
}
#radio3:checked ~ .first {
    margin-left: -200%; /* big scale use  -40% */
}
#radio4:checked ~ .first {
    margin-left: -300%; /* big scale use -60% */
}

/* css for automatic navigation */
.navigation-auto {
    position: absolute;
    width: 100%;
    
    display: flex;
    justify-content: center;
    margin-top: 224px;
}
.navigation-auto div {
    border: 1px solid #ffff;
    padding: 5px;
    border-radius: 10px;
    transition: 1s;
}
.navigation-auto div:not(:last-child) {
    margin-right: 12px;
}

#radio1:checked ~ .navigation-auto .auto-btn1 {
 background: rgb(8, 5, 95);
}

#radio2:checked ~ .navigation-auto .auto-btn2 {
    background: rgb(8, 5, 95);
}

#radio3:checked ~ .navigation-auto .auto-btn3 {
    background: rgb(8, 5, 95);
}

#radio4:checked ~ .navigation-auto .auto-btn4 {
    background: rgb(8, 5, 95);
}


.TextUnderSlider {
    width: 100%;
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 6px;
    padding-top: 12px;
   
     background-color: rgb(236, 236, 238);/* colour back to  rgb 206,206,173) */
    height: 190px;
    border-radius: 0px;
    text-align: justify;
   }

   .TUSH3 { /*header Text under Slider on main php */
    margin: 0 auto;
    padding: 2px;
    
    margin-right: 10px;
    line-height: 1;

    font-size: 40px;
    font-weight: bold;
    font-family: 'Estonia', cursive;
    color: black;
   text-align: center;
}

.TUSP {/* css for Text below header under slider */
    color: black;
    font-size: 27px;
    font-weight: bold;
    font-family: 'Estonia', cursive;
     text-align: center;
}


.Mainbottom {
    margin-top: 20px;
    
    padding-top: 10px;
    padding-left: 2px;
    border-radius: 5px;
   
    height: 125px;
    max-width: 320px;
    background-color:rgb(242, 242, 240); /* color of Section rgb 242, 242, 240*/
    align-content: center;
    
  
     

}
 /******** link boxes at bottom of main.php  included in  Index.php page */
.mainbox1, .mainbox2, .mainbox3 {
    float: left;
    /*background-color: chartreuse;  used for solving only */
    width: 90px;
    height: auto; /* height of Slide images */
    display: flexbox;
    max-height: 90px;
    background-color: RGB(206,206,173);
     margin-top: 6px;
     margin-left: 6px;
     padding: 1px;
     
     text-align: center;
    
    border: 3px;
    border-style: double;
    border-color: black;
    border-radius: 10px;
}
.mainbox1 img,.mainbox2 img, .mainbox3 img {
    padding-top: 4px;
     width: 90px;
     height: auto;
     min-height: 65px;
}
.mainbox1 label, .mainbox2 label,.mainbox3 label {
    margin-top: 40px;
    font-size: 14px;
    
}
}
/* End 320 PX screen */







/*** css  variation of Min 360 px screen *****/
@media only screen and (min-width: 360px) {

    .slider {
        max-width: 360px;
    }

    .slides {
        width: 360px;
    }

    .slide img {
        width:360px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 270px;/* sets height of slides in slider */
      
    }

    .navigation-auto {
        margin-top: 254px;
    }

    .TextUnderSlider {

        height: 180px;
    }



    .TUSH3 { /*header Text under Slider on main php */
        font-size: 50px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 40px;
    }

    .Mainbottom {
        max-width: 360px;
     text-align: center;
    }

    .mainbox1, .mainbox2, .mainbox3 {
        width: 95px;
        margin-left: 12px;
    }

}/* end of media only screen and using min width of 360px */

/*** css  variation of Min 375 px screen *****/
@media only screen and (min-width: 375px) and (orientation: portrait) {

    .slider {
        max-width: 375px;
    }

    .slides {
        width: 375px;
    }

    .slide img {
        width: 375px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 270px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }

    .navigation-auto {
        margin-top: 254px;
    }

    .TextUnderSlider {
        margin-top: 0;
        width: 375px;
        height: 198px;
    }



    .TUSH3 { /*header Text under Slider on main php */
        font-size: 40px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 32px;
    }

    .Mainbottom {
        max-width: 375px;
     text-align: center;
    }

    .mainbox1, .mainbox2, .mainbox3 {
        width: 85px;
        margin-left: 16px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 4px;
         width: 80px;
         height: auto;
         min-height: 65px;
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 14px;
   
    }

}/* end of media only screen and using min width of 375px */

/*** css  variation of Min 390 px screen *****/
@media only screen and (min-width: 390px) {

    .slider {
        max-width: 390px;
    }

    .slides {
        width: 390px;
    }

    .slide img {
        width: 390px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 295px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }

    .navigation-auto {
        margin-top: 279px; /* moved auto buttons over manual button */
    }

    .TextUnderSlider {
        width: 100%;
        height: 200px;
    }



    .TUSH3 { /*header Text under Slider on main php */
        font-size: 50px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 40px;
    }

    .Mainbottom {
        margin-top: 6px;
        max-width: 390px;
        text-align: center;
    }

    .mainbox1, .mainbox2, .mainbox3 {
        width: 95px;
        margin-left: 16px;
    }
    
}/* end of media only screen and using min width of 390px */


/*** css  variation of Min 393 px screen *****/
@media only screen and (min-width: 393px) {

    .slider {
        max-width: 393px;
    }

    .slides {
        width: 393px;
    }

    .slide img {
        width: 393px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 295px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }

    .navigation-auto {
        margin-top: 279px; /* moved auto buttons over manual button */
    }

    .TextUnderSlider {

        height: 180px;
        padding-top: 2px;
    }



    .TUSH3 { /*header Text under Slider on main php */
        font-size: 50px;
        margin-top: 0;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 36px;
    }

    .Mainbottom {
        max-width: 393px;
     text-align: center;
    }

    .mainbox1, .mainbox2, .mainbox3 {
        width: 95px;
        margin-left: 18px;
    }

}/* end of media only screen and using min width of 390px */

/*** css  variation of Min 411 ( and 412) px screen *****/
@media only screen and (min-width: 411px) {

    .slider {
        max-width: 412px;
    }

    .slides {
        width: 412px;
    }

    .slide img {
        width: 412px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 310px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }

    .navigation-auto {
        margin-top: 294px;
    }

    .TextUnderSlider {

        height: 200px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 50px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 40px;   
    }

    .Mainbottom {
        max-width: 412px;
     text-align: center;
    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 90px;
       
        margin-left: 27px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 4px;
         width: 90px;
         min-height: 65px;
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 14px;
    }

}/* end of media only screen and using min width of 412px */

/*** css  variation of Min 412 px screen *****/
@media only screen and (min-width: 412px) and (orientation: landscape){

    .slider {
        max-width: 412px;
    }

    .slides {
        width: 412px;
    }

    .slide img {
        width: 412px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 310px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }

    .navigation-auto {
        margin-top: 293px;
    }

    .TextUnderSlider {

        height: 200px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 50px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 40px;
    }

    .Mainbottom {
        max-width: 412px;
     text-align: center;
    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 90px;
       
        margin-left: 27px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 4px;
         width: 90px;
         min-height: 65px;
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 16px;
    }

}/* end of media only screen and using min width of 412px landscape */



/*** css  variation of Min 414 px screen *****/
@media only screen and (min-width: 414px) {

    .slider {
        max-width: 414px;
    }

    .slides {
        width: 414px;
    }

    .slide img {
        width: 414px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 310px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }

    .navigation-auto {
        margin-top: 294px;
    }

    .TextUnderSlider {
         margin-top: 6px;
        width: 100%;
        height: 200px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 50px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 40px;
    }

    .Mainbottom {
        max-width: 414px;
     text-align: center;
    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 90px;
        margin-left: 27px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 4px;
         width: 90px;
         min-height: 65px;
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 16px;
    }

}/* end of media only screen and using min width of 414px */



/*** css  variation of Min 480 px screen *****/
@media only screen and (min-width: 480px) {

    .slider {
        max-width: 480px;
    }

    .slides {
        width: 480px;
    }

    .slide img {
        width: 480px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 310px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }

    .navigation-auto {
        margin-top: 294px;
    }

    .TextUnderSlider {
        margin-top: 0;
        padding-top: 10px;
        height: 200px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        padding-top: 0;
        font-size: 50px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 40px;
    }

    .Mainbottom {
        max-width: 480px;
        text-align: center;
        margin-top: 2px;
    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 90px;
        margin-left: 27px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 4px;
         width: 85px;
         min-height: 65px;
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 14px;
        text-decoration: none;
    }

}/* end of media only screen and using min width of 420px */






/*** css  variation of Min 512 x 717 px screen *****/
@media only screen and (min-width: 512px) {

    .slider {
        max-width: 512px;
        margin-top: 33.3px;
    }

    .slides {
        width: 512px;
    }

    .slide img {
        width: 512px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 310px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }

    .navigation-auto {
        margin-top: 293px;
    }

    .TextUnderSlider {
        height: 200px;
    }

    .TUSH3 { /*header Text under Slider on main php */
        font-size: 50px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 40px;
    }

    .Mainbottom {
        max-width: 512px;
        text-align: center;
    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 100px;
        margin-left: 40px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 4px;
         width: 90px;
         min-height: 65px;
    }

    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 16px;
    }

}/* end of media only screen and using min width of 512 X 717px */

/*** css  variation of Min 540 px screen *****/
@media only screen and (min-width: 540px) {

    .slider {
        max-width: 540px;
        margin-top: 33.3px;
    }

    .slides {
        width: 540px;
    }

    .slide img {
        width: 540px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 310px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }

    .navigation-auto {
        margin-top: 293px;
    }

    .TextUnderSlider {

        height: 200px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 50px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 40px;
    }

    .Mainbottom {
        max-width: 540px;
     text-align: center;
    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 100px;
        margin-left: 50px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 4px;
         width: 90px;
         min-height: 65px;
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 16px;
    }

}/* end of media only screen and using min width of 540px */

/*** css  variation for Min 653 x 280 px screen *****/
@media only screen and (min-width: 653px) {

    .slider {
        max-width: 100%;
        margin-top: 33.3px;
    }

    .slides {
        width: 653px;
    }

    .slide img {
        width: 653px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 462px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }

    /* Css for Manual slide navigator  */
    .navigation-manual {
        margin-top: -40px; /* positions manual button above bottom of slide */
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
    }

    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
    }

    .navigation-auto {
        margin-top: 425px;
    }
/***  Css for Main section middle of page  ***/
    .TextUnderSlider {
        margin-top: 10px;
        height: 260px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 75px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 60px;
    }
/***  Css for  section  below TextUnderSlider  ****/
    .Mainbottom {
     max-width: 100%;
     text-align: center;
     height: 208px;
     margin-top: 10px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 140px;
        height: 150px;
        margin-left: 60px;
        padding-top: 2px;
        margin-top: 6px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 3px;
         width: 100px;
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 18px;
    }

}/* end of media only screen and using min width of 653 x 280px */

/*** css  variation of Min 658 x 320 px screen *****/
@media only screen and (min-width: 658px) {

    .slider {
        max-width: 100%;
        margin-top: 33.3px;
    }

    .slides {
        width: 658px;
    }

    .slide img {
        width: 658px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 462px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }
    .navigation-manual {
        margin-top: -40px; /* positions manual button above bottom of slide */
    }

    .manual-btn {
       /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
    }

    .navigation-auto {
        margin-top: 425px;
    }

    .TextUnderSlider {
        margin-top: 10px;
        height: 260px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 75px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 60px;
    }

    .Mainbottom {
     max-width: 100%;
     text-align: center;
     height: 208px;
     margin-top: 10px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 140px;
        height: 150px;
        margin-left: 60px;
        padding-top: 2px;
        margin-top: 22px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 3px;
         width: 100px;
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 18px;
    }

}/* end of media only screen and using min width of 658 x 320px */

/*** css  variation of Min 667 x 375 px screen *****/
@media only screen and (min-width: 667px) and (orientation: landscape) {

   /* rest if css from 658px */
   .slider {
    max-width: 100%;
    margin-top: 33.3px;
}


    .slides {
        width: 667px;
    }

    .slide img {
        width: 667px; /* sets  width of slides in slider to width of screen 667px wide  */
        
    }


    .navigation-auto {
        margin-top: 426px;
    }

    .TextUnderSlider {
        margin-top: 0px;
        height: 260px;
    }

    .TUSH3 { /*header Text under Slider on main php */
        font-size: 60px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 50px;
    }

    .Mainbottom {
     max-width: 768px;
     text-align: center;
     height: 208px;
     margin-top: 2px;
    }

    .mainbox1, .mainbox2, .mainbox3 {
        width: 120px;
        height: 150px;
        margin-left: 70px;
        padding-top: 2px;
        margin-top: 22px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 3px;
         width: 100px;
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 14px;
         text-decoration: none;
    }

}

/*** css  variation of Min 717 X 512 px screen *****/
@media only screen and (min-width: 717px) {

    .slider {
        max-width: 717px;
        margin-top: 33.3px;
    }

    .slides {
        width: 717px;
    }

    .slide img {
        width: 717px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 462px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }
    .navigation-manual {
        margin-top: -40px; /* positions manual button above bottom of slide */
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
    }

    .navigation-auto {
        margin-top: 425px;
    }

    .TextUnderSlider {
        margin-top: 10px;
        height: 260px;
    }

    .TUSH3 { /*header Text under Slider on main php */
        font-size: 75px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 60px;
    }

    .Mainbottom {
     max-width: 768px;
     text-align: center;
     height: 208px;
     margin-top: 10px;
    }

    .mainbox1, .mainbox2, .mainbox3 {
        width: 140px;
        height: 150px;
        margin-left: 80px;
        padding-top: 2px;
        margin-top: 22px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 3px;
         width: 100px;   

    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 20px;
    }

}/* end of media only screen and using min width of 717 X 512px */

/*** css  variation of Min 720 X 540 px screen *****/
@media only screen and (min-width: 720px) {

    .slider {
        max-width: 720px;
        margin-top: 33.3px;
    }

    .slides {
        width: 720px;
    }

    .slide img {
        width: 720px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 462px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/ 
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 426px;
    }

    .TextUnderSlider {
        margin-top: 10px;
        height: 260px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 75px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 60px;
    }

    .Mainbottom {
     max-width: 768px;
     text-align: center;
     height: 208px;
   
        margin-top: 10px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 140px;
        height: 150px;
        margin-left: 80px;
        padding-top: 2px;
        margin-top: 20px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 3px;
         width: 100px;
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 20px;
    }

}/* end of media only screen and using min width of 720 X 540px */

/*** css  variation of Min 740 X360 px screen *****/
@media only screen and (min-width: 740px) {

    .slider {
        max-width: 740px;
        margin-top: 33.3px;
    }

    .slides {
        width: 740px;
    }

    .slide img {
        width: 740px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 462px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }
    
}/* end of media only screen and using min width of 740 x 360 px */

/*** css  variation of Min 768 px screen *****/
@media only screen and (min-width: 768px) {

    .slider {
        max-width: 768px;
        margin-top: 33.3px;
    }

    .slides {
        width: 768px;
    }

    .slide img {
        width: 768px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 462px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 425px;
    }

    .TextUnderSlider {
        margin-top: 10px;
        height: 260px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 75px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 60px;
    }

    .Mainbottom {
     max-width: 768px;
     text-align: center;
     height: 208px;
   
        margin-top: 10px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 140px;
        height: 150px;
        margin-left: 80px;
        padding-top: 2px;
        margin-top: 2px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 3px;
         width: 100px;
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 20px;
    }

}/* end of media only screen and using min width of 768px */

/*** css  variation of Min 786 x 393px screen *****/
@media only screen and (min-width: 768px) {

    .slider {
        max-width: 786px;
        margin-top: 33.3px;
    }

    .slides {
        width: 786px;
    }

    .slide img {
        width: 786px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 462px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF; */
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 425px;
    }

    .TextUnderSlider {
        margin-top: 10px;
        height: 260px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 70px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 50px;
    }

    .Mainbottom {
     max-width: 786px;
     text-align: center;
     height: 208px;
   
        margin-top: 10px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 140px;
        height: 215px;
        margin-left: 80px;
        padding-top: 2px;
        margin-top: 2px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 3px;
         width: 120px;
         height: auto;
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 15px;
    }

}/* end of media only screen and using min width of 786px x 393 */




/*** css  variation of Min 812  X 375px screen *****/
@media only screen and (min-width: 812px) {

    .slider {
        max-width: 812px;
        margin-top: 33.3px;
    }

    .slides {
        width: 812px;
    }

    .slide img {
        width: 812px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 462px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
       /* border: 1px solid #FFFF; */
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 426px;
    }

    .TextUnderSlider {
        margin-top: 12px;
        height: 255px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 75px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 60px;
    }

    .Mainbottom {
     max-width: 820px;
     text-align: center;
     height: 228px;
   
        margin-top: 12px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 180px;
       
        max-height: 140px;
        margin-left: 70px;
        padding-top: 2px;
        margin-top: 2px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 155px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 24px;
    }

}/* end of media only screen and using min width of 812 X 375px */

/*** css  variation of Min 820 px screen *****/
@media only screen and (min-width: 820px) {

    .slider {
        max-width: 820px;
        margin-top: 33.3px;
    }

    .slides {
        width: 820px;
    }

    .slide img {
        width: 820px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 462px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF;8*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 426px;
    }

    .TextUnderSlider {
        margin-top: 12px;
        height: 255px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 75px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 60px;
    }

    .Mainbottom {
     max-width: 820px;
     text-align: center;
     height: 228px;
   
        margin-top: 12px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 180px;
       
        max-height: 140px;
        margin-left: 70px;
        padding-top: 2px;
        margin-top: 2px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 155px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 24px;
    }

}/* end of media only screen and using min width of 820px */

/*** css  variation of Min 844 x390px screen *****/
@media only screen and (min-width: 844px) {

    .slider {
        max-width: 844px;
        margin-top: 33.3px;
    }

    .slides {
        width: 844px;
    }

    .slide img {
        width: 844px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 462px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF; */
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 426px;
    }

    .TextUnderSlider {
        margin-top: 2px;
        height: 255px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 65px;
        padding-top: 6px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 50px;
    }

    .Mainbottom {
     max-width: 844px;
     text-align: center;
     height: 228px;
   
        margin-top: 12px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 180px;
       
        max-height: 140px;
        margin-left: 70px;
        padding-top: 2px;
        margin-top: 2px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 155px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 14px;
    }

}/* end of media only screen and using min width of 844 x 390px */

/*** css  variation of Min 851 x 393px screen *****/
@media only screen and (min-width: 851px) {

    .slider {
        max-width: 851px;
        
    }

    .slides {
        width: 851px;
    }

    .slide img {
        width: 851px; /* sets  width of slides in slider to width of screen 320px wide  */
       
    }
}/* end of media only screen and using min width of 851 x 393px */

/*** css  variation of Min 854 x 480px screen - nokia n9 *****/
@media only screen and (min-width: 854px) {

    .slider {
        max-width: 854px;
        
    }

    .slides {
        width: 854px;
    }

    .slide img {
        width: 854px; /* sets  width of slides in slider to width of screen 320px wide  */
       
    }
    .TextUnderSlider {
        margin-top: 2px;
        height: 255px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 65px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 45px;
    }

    .Mainbottom {
     max-width: 844px;
     text-align: center;
     height: 228px;
     margin-top: 2px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 180px;
       
        max-height: 140px;
        margin-left: 70px;
        padding-top: 2px;
        margin-top: 2px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 155px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 14px;
    }


}/* end of media only screen and using min width of 854 x 480px */





/*** css  variation of Min 892 x 412 px screen *****/
@media only screen and (min-width: 892px) {

    .slider {
        max-width: 892px;
        margin-top: 33.3px;
    }

    .slides {
        width: 892px;
    }

    .slide img {
        width: 892px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 462px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 426px;
    }

    .TextUnderSlider {
        margin-top: 12px;
        height: 255px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 75px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 60px;
    }

    .Mainbottom {
     max-width: 896px;
     text-align: center;
     height: 228px;
   
        margin-top: 12px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 180px;
       
        max-height: 140px;
        margin-left: 70px;
        padding-top: 2px;
        margin-top: 2px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 155px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 24px;
    }

}/* end of media only screen and using min width of 892 x 412px */

/*** css  variation of Min 896 x 414 px screen *****/
@media only screen and (min-width: 896px) {

    .slider {
        max-width: 896px;
        margin-top: 33.3px;
    }

    .slides {
        width: 896px;
    }

    .slide img {
        width: 896px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 462px;/* sets height of slides in slider */
        /*max-height: 260px; */
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 426px;
    }

    .TextUnderSlider {
        margin-top: 12px;
        height: 255px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 75px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 60px;
    }

    .Mainbottom {
     max-width: 896px;
     text-align: center;
     height: 228px;
   
        margin-top: 12px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 180px;
       
        max-height: 140px;
        margin-left: 70px;
        padding-top: 2px;
        margin-top: 2px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 155px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 24px;
    }

}/* end of media only screen and using min width of 896 x 414px */

/*** css  variation of Min 912 px X 1368px screen *****/
@media only screen and (min-width:912px) {

    .slider {
        max-width: 912px;
       
    }

    .slides {
        width: 912px;
    }

    .slide img {
        width: 912px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 520px;/* sets height of slides in slider */
        
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 483px;
    }

    .TextUnderSlider {
        margin-top: 22px;
        height: 350px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 85px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 70px;
    }

    .Mainbottom {
     max-width: 912px;
     text-align: center;
     height: 258px;
   
        margin-top: 22px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 180px;
       
        max-height: 140px;
        margin-left: 85px;
        padding-top: 2px;
        margin-top: 22px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 155px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 24px;
    }

}/* end of media only screen and using min width of 912 X 412px */

/*** css  variation of Min 914 x 412 px screen *****/
@media only screen and (min-width: 914px) {

    .slider {
        max-width: 914px;
        margin-top: 33.3px;
    }

    .slides {
        width: 914px;
    }

    .slide img {
        width: 915px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 520px;/* sets height of slides in slider */
        
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
      /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 483px;
    }

    .TextUnderSlider {
        margin-top: 12px;
        height: 275px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 75px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 60px;
    }

    .Mainbottom {
     max-width: 915px;
     text-align: center;
     height: 228px;
   
        margin-top: 12px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 180px;
       
        max-height: 140px;
        margin-left: 85px;
        padding-top: 2px;
        margin-top: 2px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 155px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 24px;
    }

}/* end of media only screen and using min width of 912px */

/*** css  variation of Min 1024 px screen *****/
@media only screen and (min-width:1024px) {

    .slider {
        max-width: 1024px;
        margin-top: 34.3px;
    }

    .slides {
        width: 1024px;
    }

    .slide img {
        width: 1024px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 520px;/* sets height of slides in slider */
        
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 484.6px;
    }

    .TextUnderSlider {
        margin-top: 12px;
        height: 305px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 75px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 55px;
    }

    .Mainbottom {
     max-width: 1024px;
     text-align: center;
     height: 328px;
   
        margin-top: 12px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 200px;
       
        max-height: 140px;
        margin-left: 95px;
        padding-top: 2px;
        margin-top: 62px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 155px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 24px;
    }

}/* end of media only screen and using min width of 1024px */


/*** css  variation of Min 1080px  x 2412PX ( OPPO A96) screen *****/
@media only screen and (width: 1080px) AND (ORIENTATION: PORTRAIT){
    .slider {
        max-width: 1080px;
        margin-top: 34.3px;
    }

    .slides {
        width: 1080px;
    }

    .slide img {
        width: 1080px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 520px;/* sets height of slides in slider */
        
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 484px;
    }

    .TextUnderSlider {
        margin-top: 12px;
        height: 305px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 75px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 55px;
    }

    .Mainbottom {
     max-width: 1080px;
     text-align: center;
     height: 328px;
   
        margin-top: 12px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 200px;
       
        max-height: 140px;
        margin-left: 95px;
        padding-top: 2px;
        margin-top: 62px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 155px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 24px;
    }


}







/*** css  variation of Min 1180 X 820 px screen *****/
@media only screen and (min-width:1180px) {

    .slider {
        max-width: 1180px;
        margin-top: 33.3px;
    }

    .slides {
        width: 1180px;
    }

    .slide img {
        width: 1180px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 520px;/* sets height of slides in slider */
        
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 483px;
    }

    .TextUnderSlider {
        margin-top: 12px;
        height: 265px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 75px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 60px;
    }

    .Mainbottom {
     max-width: 1180px;
     text-align: center;
     height: 228px;
   
        margin-top: 12px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 200px;
       
        max-height: 140px;
        margin-left: 130px;
        padding-top: 2px;
        margin-top: 2px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 155px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 24px;
    }

}/* end of media only screen and using min width of 1180 X 820px */

/*** css  variation of Min 1180 X 820 px screen *****/
@media only screen and (min-width:1180px) {

    .slider {
        max-width: 1180px;
        margin-top: 33.3px;
    }

    .slides {
        width: 1180px;
    }

    .slide img {
        width: 1180px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 520px;/* sets height of slides in slider */
        
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 483px;
    }

    .TextUnderSlider {
        margin-top: 12px;
        height: 265px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 75px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 60px;
    }

    .Mainbottom {
     max-width: 1180px;
     text-align: center;
     height: 228px;
   
        margin-top: 12px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 200px;
       
        max-height: 140px;
        margin-left: 130px;
        padding-top: 2px;
        margin-top: 2px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 155px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 24px;
    }

}/* end of media only screen and using min width of 1180 X 820px */

/*** css  variation of Min 1114 x 720 px screen *****/
@media only screen and (min-width:1114px) {

    .slider {
        max-width: 1114px;
        margin-top: 45.3px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 12px;
    }

    .slides {
        width: 1114px;
        border-radius: 12px;
        
    }

    .slide img {
        width: 1114px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 520px;/* sets height of slides in slider */
        border-radius: 12px;
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
       /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 483px;
    }

    .TextUnderSlider {
        
        margin-top: 12px;
        height: 325px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 75px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 60px;
    }

    .Mainbottom {
     max-width: 1280px;
     text-align: center;
     height: 228px;
   
        margin-top: 22px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 200px;
       
        max-height: 160px;
        margin-left: 120px;
        padding-top: 2px;
        margin-top: 2px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 185px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 24px;
    }

}/* end of media only screen and using min width of 1114px */

/*** css  variation of Min 1280 px screen *****/
@media only screen and (min-width:1280px) {

    .slider {
        margin-left: auto;
        margin-right: auto;
        max-width: 1280px;
        margin-top: 33.3px;
    }

    .slides {
        width: 1280px;
    }

    .slide img {
        width: 1280px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 520px;/* sets height of slides in slider */
        
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 483px;
    }

    .TextUnderSlider {
        
        margin-top: 12px;
        height: 525px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 7rem;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 6rem;
    }

    .Mainbottom {
     max-width: 1280px;
     text-align: center;
     height: 228px;
   
        margin-top: 12px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 200px;
       
        max-height: 160px;
        margin-left: 160px;
        padding-top: 2px;
        margin-top: 2px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 185px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 24px;
    }

}/* end of media only screen and using min width of 1280px */

/*** css  variation of Min 1366 X 1024 px screen *****/
@media only screen and (min-width:1366px) {

    .slider {
        max-width: 1366px;
       
    }

    .slides {
        width: 1366px;
    }

    .slide img {
        width: 1366px; /* sets  width of slides in slider to width of screen 320px wide  */
    }
    .navigation-manual { 
        margin-top: -40px; /* positions manual button above bottom of slide */
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 483px;
    }

    .TextUnderSlider {
        margin-top: 12px;
        height: 275px;
    }

    .TUSH3 { /*header Text under Slider on main php */
        font-size: 75px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 60px;
    }

    .Mainbottom {
     max-width: 1366px;
     height: 300px
    }
    .mainbox1, .mainbox2, .mainbox3 {   
        margin-top: 52px;
    margin-left: 180px;  
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
    height: 100px;
    }

    .mainbox1 label, .mainbox2 label,.mainbox3 label {
    margin-top: 40px;
    }

}/* end of media only screen and using min width of 1366 X 1024 px */

/*** css  variation of Min 1368 X 912 px screen *****/
@media only screen and (min-width:1368px) {

    .slider {
        max-width: 1368px;
        margin-top: 33.3px;
    }

    .slides {
        width: 1368px;
    }

    .slide img {
        width: 1368px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 520px;/* sets height of slides in slider */
        
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
       /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 483px;
    }

    .TextUnderSlider {
        
        margin-top: 12px;
        height: 374px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 75px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 60px;
    }

    .Mainbottom {
     max-width: 1368px;
     text-align: center;
     height: 228px;
     margin-top: 12px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 200px;
       
        max-height: 160px;
        margin-left: 185px;
        padding-top: 2px;
        margin-top: 2px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 185px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 24px;
    }

}/* end of media only screen and using min width of 1368 X 912 px */

/*** css  variation of Min 1400px (15" macs) & samsung9+ Landscape screen *****/
@media only screen and (min-width: 1400px) and (orientation: landscape) {

    .slider {
        max-width: 1400px;
        margin-top: 53.3px;
    }

    .slides {
        width: 1400px;
    }

    .slide img {
        width: 1400px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 820px;/* sets height of slides in slider */
        
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
      /*border: 1px solid #FFFF;*/
        padding: 11px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 785px;
    }

    .TextUnderSlider {
        
        margin-top: 72px;
        height: 785px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 10rem;
        margin-top: .25rem;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 8rem;
        line-height: 145px;

    }

    .Mainbottom {
     max-width: 1600px;
     text-align: center;
     height: 448px;
   
        margin-top: 32px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 280px;
       
        max-height: 200px;
        margin-left: 160px;
        padding-top: 2px;
        margin-top: 140px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 250px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 32px;
    }

}/* end of media only screen and using min width of 1400 X 900 px */


/*** css  variation of Min 1440px 2960 px samsung9+ Landscape screen *****/
@media only screen and (min-width: 1440px) and (orientation: Portrait) {

    .slider {
        max-width: 1440px;
        margin-top: 63.3px;
    }

    .slides {
        width: 1440px;
    }

    .slide img {
        width: 1440px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 820px;/* sets height of slides in slider */
        
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 785px;
    }

    .TextUnderSlider {
        
        margin-top: 72px;
        height: 785px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 110px;
      
        margin-top: 60px;
    }
    
    .TUSP {/* css for Text below header under slider */
        margin-top: 50px;
        font-size: 85px;
       
        
    }

    .Mainbottom {
     max-width: 1440px;
     text-align: center;
     height: 448px;
   
        margin-top: 32px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 280px;
       
        max-height: 200px;
        margin-left: 160px;
        padding-top: 2px;
        margin-top: 140px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 250px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 32px;
    }

}/* end of media only screen and using min width of 1440 X 2960 px */





/*** css  variation of Min 1600X 2560 px screen *****/
@media only screen and (min-width:1600px) {

    .slider {
        max-width: 1600px;
        margin-top: 78.3px;
     
    }

    .slides {
        width: 1600px;
    }

    .slide img {
        width: 1600px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 820px;/* sets height of slides in slider */
        
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 783px;
    }

    .TextUnderSlider {
        
        margin-top: 72px;
        height: 775px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 120px;
        margin-top: 60px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 100px;
        line-height: 145px;
    }

    .Mainbottom {
     max-width: 1600px;
     text-align: center;
     height: 448px;
   
        margin-top: 32px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 280px;
       
        max-height: 200px;
        margin-left: 160px;
        padding-top: 2px;
        margin-top: 140px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 250px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 32px;
    }

}/* end of media only screen and using min width of 1600 X 2560 px */

/*** css  variation of Min 1920 x 1200 -  17" mac screen *****/
@media only screen and (min-width: 1920px){

    .slider {
        max-width: 1600px;
        margin-top: 102.3px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 50px;
  

    }

    .slides {
        width: 1600px;
    }

    .slide img {
        width: 1600px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 820px;/* sets height of slides in slider */
        border-radius: 20px;
    }
    .navigation-manual {
        
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
        margin-top: 783px;
    }

    .TextUnderSlider {
        
        margin-top: 72px;
        height: 775px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 120px;
        margin-top: 60px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 100px;
        line-height: 145px;
        
    }

   .Mainbottom {
     max-width: 1920px;
     text-align: center;
     height: 448px;
   
    margin-top: 32px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 280px;
       
        max-height: 200px;
        margin-left: 260px;
        padding-top: 2px;
        margin-top: 140px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 10px;
         width: 250px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 32px;
    }

}/* end of media only screen and using min width of 1920 px */

/*** css  variation of Min 2560 px screen *****/
@media only screen and (min-width: 2560px) {

    .slider {
      
    
        margin-right: auto;
        width: 1360px;
        margin-top: 66.3px;
      
        
    }

    .slides {
        
        margin-left: 600px; /* moves slider across when not full width */
        width: 1360px;
    }

    .slide img {
        width: 1360px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 520px;/* sets height of slides in slider */
        text-align: center;
        border-radius: 20px;
        

    }
    .navigation-manual {
       
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
   
     margin-left:-600px ;
        margin-top: 483px;
    }

    .TextUnderSlider {
        
        margin-top: 12px;
        height: 375px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 100px;
        line-height: 80px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 90px;
        line-height: 80px;
    }

    .Mainbottom {
    max-width: 2560px;
    height: 228px;
    margin-top: 12px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 200px;
       
        max-height: 140px;
        margin-left: 500px;
        padding-top: 22px;
        margin-top: 2px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 0px;
         width: 185px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 24px;
    }


}

/*** css  variation of Min 2880 X 5120 px screen *****/
@media only screen and (min-width: 2880px) {

    .slider {
      
    
        margin-right: auto;
        width: 1360px;
        margin-top: 408.3px;
      
        
    }

    .slides {
        
        margin-left: 760px; /* moves slider across when not full width */
        width: 1360px;
    }

    .slide img {
        width: 1360px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 520px;/* sets height of slides in slider */
        text-align: center;
        border-radius: 20px;
        

    }
    .navigation-manual {
       
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
   
     margin-left:-760px ;
        margin-top: 483px;
    }

    .TextUnderSlider {
        
        margin-top: 12px;
        height: 375px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 100px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 90px;
    }

    .Mainbottom {
    max-width: 2880px;
    height: 228px;
    margin-top: 12px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 200px;
       
        max-height: 140px;
        margin-left: 550px;
        padding-top: 22px;
        margin-top: 2px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 0px;
         width: 185px;
         height: 100px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 24px;
    }


} /****  End 2880 x 5120 px screen **/

/*** css  variation of Min 5120 px screen *****/
@media only screen and (min-width: 5120px) {

    .slider {
        
    
        margin-right: auto;
        width: 5160px;
        margin-top: 676.3px;
      
        
    }

    .slides {
        
        margin-left: 1060px; /* moves slider across when not full width */
        width: 3000px;
    }

    .slide img {
        width:3000px; /* sets  width of slides in slider to width of screen 320px wide  */
        height: 1120px;/* sets height of slides in slider */
        text-align: center;
        border-radius: 20px;
        

    }
    .navigation-manual {
       
        margin-top: -40px; /* positions manual button above bottom of slide */
        
       
    }

    .manual-btn {
        /*border: 1px solid #FFFF;*/
        padding: 10px;
        border-radius: 20px;
     
    }
    .navigation-auto div {
        border: 1px solid #FFFF;
        padding: 10px;
        border-radius: 10px;
        
    }

    .navigation-auto {
   
     margin-left:-1060px ;
        margin-top: 1083px;
    }

    .TextUnderSlider {
        
        margin-top: 12px;
        height: 480px;
    }


    .TUSH3 { /*header Text under Slider on main php */
        font-size: 150px;
    }
    
    .TUSP {/* css for Text below header under slider */
        font-size: 110px;
    }

    .Mainbottom {
    max-width: 5120px;
    height: 500px;
    margin-top: 12px;

    }
    .mainbox1, .mainbox2, .mainbox3 {
        width: 550px;
       height: 380px;
       max-height: 500px;
        margin-left: 800px;
        padding-top: 22px;
        margin-top: 22px;
    }

    .mainbox1 img,.mainbox2 img, .mainbox3 img {
        padding-top: 0px;
         width: 500px;
         height: 300px
         
    }
    .mainbox1 label, .mainbox2 label,.mainbox3 label {
        margin-top: 40px;
        font-size: 54px;
    }


}