@media screen and (min-device-width: 1280px){
         .banner {
             width: 100%;
             padding-top: 45px;
         }
         .bannerText {
             padding-left: 6%;
             padding-bottom: 7.5%;
             padding-top: 3%;
             padding-right: 4%;
             width: 62.333333%;
             margin-left: -48px;
             height: 350px;
             background-color: #D8D9D8;
             margin-top: 5px;
         }
         
         .bannerImage 
         {
             
             height: 322px;
             line-height: 322px;
             padding-left: -1px;
         }
         
         .bannerT1 {
             width: 100%;
         }
         
         .bannerTextT1 {

            padding-left: 5%;
            padding-bottom: 6%;
            padding-top: 2%;
            padding-right: 5%;
            width: 61%;
            margin-left: -4%;
            height: 48%;
            background-color: #D8D9D8;
            margin-top: 2%;
            z-index:-5;
            /*position:absolute;*/
         } 
                            
         .bannerImageT1 {
             z-index: -1;
             position:relative;
             height: 322px;
             line-height: 322px;
             /*padding-left: 1%;*/
             margin-top: 2%;
         }
         
         .bottomText {
             margin-top: 2%;
             padding-left: 2%;
             padding-bottom: 2%;
             padding-top: 2%;
             padding-right: 2%;
             width: 98%;
             margin-left: auto;
             margin-right: auto;
         }
         .margin2 {
             margin-bottom: 35%;
         }
         .bottomtable {
             width: 50%;
         }
         .row1 {
             /*margin-bottom: 1%;*/
         }
         .myMainDiv {
             margin-right: 0%;
             margin-left: 0%;
         }
         
         /* This is where I stopped */
         .imageModifier
         {
            border-left-color:#D8D9D8;             
         }
         
         /* This is an extra added property 
            one property is actually missing that is length of the left width should be changes
        
            */
         .creditcards
         {
            background-color:#D8D9D8;
            /*margin-left:-20px;*/
            width:100%;
            /*padding-right:-100px;*/
            /* Reducing the image size for the project */
         }
     }
  
   
    @media screen and (max-width: 1198px) {
        .bannerText {
            padding-left: 4%;
            padding-bottom: 6%;
            padding-top: 2.75%;
            padding-right: 4%;
            width: 60.333333%;
            margin-left: -38px;
            height: 275px;
            
        }
        .bannerImage{
            z-index: 1;
            height: 322px;
            line-height: 322px;
            padding-left: -1px;
            padding-top: 20px;
        }
        .bottomText
        {
            margin-top: 2%;
            padding-left: 2%;
            padding-bottom: 2%;
            padding-top: 2%;
            padding-right: 2%;
            width: 100%;
             margin-left: auto;
            margin-right: auto;
        }
        .margin2 {
            margin-bottom: 35%;
        }
        
        .banner {
            margin-bottom: 14%;
            width: 100%;
        }
        .bottomtable {
             width: 50%;
         }
         .myMainDiv {
             margin-right: 0%;
             margin-left: 0%;
         }
        
        .creditcards
         {
            background-color:#D8D9D8;            
         }
    
    }
    
    
    
    @media screen and (max-width: 850px) {
        .bannerText {
            padding-left: 5%;
            padding-bottom: 5%;
            padding-top: 2.75%;
            padding-right: 4%;
            width: 62.333333%;
            margin-left: -38px;
        }
        .bannerImage {
            height: 280px;
            line-height: 280px;
        }
        .banner {
            margin-bottom: 1%;
            height: 80%;
        }
        .bottomtable {
             width: 55%;
         }
         .myMainDiv {
             margin-right: 0%;
             margin-left: 0%;
         }

    }

    @media screen and (max-width: 780px) {
        .bannerText {
            padding-left: 6%;
            padding-bottom: 2%;
            padding-top: 0%;
            padding-right: 4%;
            /*height: 215px;*/
            height: 240px;
        }
        .bannerImage {
            height: 240px;
            line-height: 195px;
        }
        h3 {
            font-size: 18px;
        }
        p {
            font-size: 12px;
        }
        .banner {
            height: 69%;
            /*margin-bottom: -7%;*/
            margin-bottom: -18%;
        }
        .bottomtable {
             width: 70%;
         }
         .myMainDiv {
             margin-right: 0%;
             margin-left: 0%;
         }
         
            .myPageTitleHeader2-h1
            {
                font-size: 18px;    
            }
    }

    /*@media screen and (max-width: 700px) {
        .bannerImage { 
            width: 100%;
            z-index: 0;
            float: left;
            margin-left: -3%;
            margin-right: 2%;
            height: 0px;
            line-height:0px;
            margin-top: 0%; 
        }
        .bannerText {
            width: 85%;
            margin-left: 9%;
            margin-right: 2%;
            margin-bottom: 5%;
            margin-top: 60%;
            font-size: 14px;
            padding: 6%;
            height: auto;
        }
        h3 {
            font-size: 18px;
        }
        .banner {
            height: auto;
            width: 100%;
            padding-right:0px;
            padding-left: 10%;
            margin-left: 0;
            
        }
    
        .bottomText .col-xs-12 {
            font-size: 14px;
            width: 85%;
            margin-left: 9%;
            margin-right: 2%;
            margin-bottom: 5%;
            margin-top: 0%;
            font-size: 14px; 
            padding: 6% 
      
        }
        .margin4 {
            margin-bottom: 100%;
        }
        .bottomtable {
             width: 100%;
         }
        
    }*/
    
    @media screen and (max-width: 700px) {
        .bannerImage { 
            width: 97%;
            z-index: 0;
            float: left;
            /*margin-left: -3%;
            margin-right: 2%;*/
            height: 0px;
            line-height:0px;
            margin-top: 0%;
            padding-left: 0px;
            padding-right: 0px;
            margin-bottom: 4%;
        }
        .bannerText {
            width: 94%;
            margin-left: 3%;
            margin-right: 2%;
            margin-bottom: 5%;
            margin-top: 60%;
            font-size: 14px;
            padding: 6%;
            height: auto;
        }
        h3 {
            font-size: 20px;
            /*font-weight: 700;*/
            color: #424345;
        }
        p {
            font-size: 14px;
            color: #424345;
        }
        .banner {
            height: auto;
            width: 100%;
            padding-right:0px;
            padding-left: 3%;
            margin-left: 0;
            
        }
    
        .bottomText .col-xs-12 {
            font-size: 14px;
            width: 85%;
            margin-left: 9%;
            margin-right: 2%;
            margin-bottom: 5%;
            margin-top: 0%;
            font-size: 14px; 
            padding: 6%;
            margin-left: auto;
            margin-right: auto;
      
        }
        .margin4 {
            margin-bottom: 100%;
        }
        .bottomtable {
             width: 100%;
         }
         .myMainDiv {
             margin-right: 3%;
             margin-left: 3%;
         }
         
         .noMargin {
             margin-right: 0px;
             margin-left: 0px;
         }

        .myPageTitleHeader2-h1
        {
            font-size: 20px;    
        }
        
    }
    
     
     @media only screen and (min-width : 320px) and (max-width : 779px) and (orientation: portrait) 
     {
        
        [class*="col-"]{
            width:100%;
        }
        
        .bannerImageT1
        {
            height:auto;
            width:100%;
            z-index:5;
        }    
        
        .bannerT1
        {
            height:auto;
            width:100%;
            z-index:5;
        }
         .bannerTextT1
         {
            height:auto;
            width:100%;
            z-index:3;
            max-width:100%;
            border-right:10px;
            left:30px;
            width:88%;
         }
         
         img.ulLogo{
            display: block;
            height: auto;
            max-width: 100%;
            position:inherit;
         }
        
        img.oneworldLogo{
            display: block;
            height: auto;
            max-width: 100%;
            position:relative;
            max-height:33px;
            max-width:33px;
            float:right;
            bottom: 40px;
            left:15px;
            /*padding-left:100px;*/  
        }
        
        
        div.social
        {
            padding-top:35px;
            position:relative;
            right:20px;
            /*special for big screen devices*/
            height: 50px;
            width: 170px;
            float:left;
        }
        
        div.nav-lang-country-selector{
           position:relative;
           bottom:30px;
           right:30px;
        }
        
        
       .creditcards
       {
            background-color:#D8D9D8;
            /*margin-left:18px;*/
            /*margin-right:40px;*/
            /*right:30px;*/
            /*border-left-color:#D8D9D8;
            border-right-color:#D8D9D8;*/
       }
     
        .imageModifier
        {
            
        }
     }