/* ----------- iPhone 5 and 5S and 6 plus----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  {
    
        /* For Ipads etc - MENUBAR TEXT */
        body 
        {
            font-family:Helvetica;
            font-size:14px;
            margin:0;
            padding:0;
        }

        a:selected
        {
            color: #ffffff;
            background-color: Red;
        }
        
        
        #header h1 
        {
            display:block !important;
            margin:0;
            padding:0;
            text-align:center;
            vertical-align:middle;      
        }

        #header h1 a
        {

            background-color: #ccc;
            border-bottom: 1px solid #666;
            color:#222;
            display:block;
            font-size:20px;
            font-weight:bold;
            padding: 10px 0;
            text-align:center;
            text-decoration:none;
            text-shadow: 0px 1px 0px #fff;
            background-image: -webkit-gradient(linear, left top, left bottom, 
                                               from(#ccc), to(#999));
        }

        #header ul
        {

            list-style: none;
            margin: 10px;
            padding: 0;
        }

        #header ul li a
        {

            background-color: #ffffff;
            border: 1px solid #999999;
            color: #222222;
            display: block;
            font-size: 35px !important;
            font-weight: bold;
            margin-bottom: -1px;
            padding: 32px 10px !important;
            text-decoration: none;   
        }




        #header ul li:first-child a
        {
            -webkit-border-top-left-radius: 8px;
            -webkit-border-top-right-radius: 8px;
        }

        #header ul li:last-child a
        {
            -webkit-border-bottom-left-radius: 8px;
            -webkit-border-bottom-right-radius: 8px;
        }

        #header div.leftButton
        {
            font-weight:bold;
            text-align:center;
            line-height:108px;
            color:White;
            text-shadow:rgba(0,0,0,0.6) 0px -1px 0px;
            position:absolute;
            top:7px;
            left:6px;
            max-width:250px;
            height:156px;
            width:156px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            border:none;
            -webkit-border-image: url(../images/back_button.png) 0 8 0 14;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }


        #content, #sidebar
        {
            padding:10px;   
        }
    

}


/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (orientation: portrait) 
  {
    
    .container { display:block !important; width:100% !important; font-family: Arial; border: 0 !important; background-color:#ffffff; vertical-align: top; margin: 0 auto; padding: 0; height:100%; text-align: center; }
    .container-bottom { display:block !important; width:100% !important; font-family: Arial; border: 0 !important; background-color:#ffffff; vertical-align: top; margin: 0 auto; padding: 0; height:100%; text-align: center; } 
    
    #iphone-only { display:block; margin:0 0 5% 0; font-weight:bold; font-size:18px; }
    .logo { float:left; text-align:center !important; margin:0; width:100% !important; max-width:100% !important; }
    .menubar { display:none !important;   }
    .greybit { float:left !important; background-color:#E9E9E9; z-index:999; width:100% !important; height:220px; text-align:center !important;  }
    
    #mobilephone { color:#404040; width:97%; font-family:Arial; height:26%; margin:5% 0 0 0 !important; font-size:22px !important; }
        
        
        /* Container Nav Bar - left and right */
            #container-ipad { display:none !important; vertical-align: top; border:solid 1px red; margin: 0 auto; padding:0 !important; text-align: center; width:100%; height:200px;  }
            #ipad {  display:block !important; float:left; vertical-align:top; width:100%; text-align:center;  }
            
            .container-nav {
                display: inline-block;
                cursor: pointer;
            }

            .bar1, .bar2, .bar3 {
                width: 35px;
                height: 5px;
                background-color: #333;
                margin: 6px 0;
                transition: 0.4s;
            }

            /* Rotate first bar */
            .change .bar1 {
                -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
                transform: rotate(-45deg) translate(-9px, 6px) ;
            }

            /* Fade out the second bar */
            .change .bar2 {
                opacity: 0;
            }

            /* Rotate last bar */
            .change .bar3 {
                -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
                transform: rotate(45deg) translate(-8px, -8px) ;
            }
            
        #content, #sidebar
        {
            padding:20px !important;   
        }
            
        
         /* End of Container Nav Bar */
        
    /* Large Red Banner */
    .middle_red { display:block; background-image:url(../images/middle_red.gif); background-repeat:no-repeat; color:#ffffff; width:100% !important; height:434px; z-index:1; vertical-align: middle; margin: 0 auto; padding: 0; text-align: center !important; }
    #middle_red_all { float:left; display:block; width:100%; background-color:#BC1C2B; height:234px; vertical-align:middle;  }
    #red_left { display:block; float:left; font-family:Garamond, Helvetica, Arial !important;  vertical-align: top middle; margin: 0 auto; padding: 0; font-size:22px; margin:5% 0 2% 0 !important; color: #ffffff; text-align: center !important;  width: 100% !important; vertical-align:middle;   }
    /*
    #red_right { display:block; float:left !important; width:100% !important; margin:0 !important; line-height:1.4; font-style:italic; font-size:13px; height:100%; vertical-align:top; text-align:left;  }
    */
    #red_right { display:none !important; height:0px !important; width:0px !important; margin:0 !important; }
    #jill_left { display:none !important; height:0px !important; width:0px !important; margin:0 !important;  }
    #jill_right { display:none !important; height:0px !important; width:0px !important; margin:0 !important; }
    
    /* Text inside Red Banner */
    #banner { display: none; float: left; font-family:Garamond, Helvetica, Arial !important; line-height:1.5 !important; vertical-align: top middle; margin: 0 auto; padding: 0; font-size:22px; color: #ffffff; margin:0 0 5% 5% !important; text-align: left !important;  width: 95% !important;    }
    #banner2 { display: none; float: left; width: 94% !important; margin:0 3% 0 3% !important; line-height:2.0 !important; font-size:16px; font-family:Helvetica, Arial, Garamond !important; text-align: center !important; color: #ffffff; }
    #professional_text { font-size:16px; width: 96% !important; margin:10% 4% 0 0 !important; line-height:2.0 !important; font-size:16px; font-family:Helvetica, Arial, Garamond !important; text-align: justify !important; color: #ffffff;   }
    #professional_text a hover { background-image:url(../images/button_red.gif); background-repeat:no-repeat; }


    /* Text after Red Banner - For Websites That */
     #for_websites_that { float:left; display:block; width:100% !important; text-align:center !important; color:#404040; font-size:22px; margin:1.5% 0 10% 0 !important;  }
    
 
    #line_of_services { float:left; color:#BC1C2B; width:100% !important; margin:0 !important; /*border:solid 1px black;*/ text-align:left !important; vertical-align:top; list-style-type:none; }
    .li_style { float:left !important; display:block; margin:0 !important; width:80% !important; display:block; text-align:left !important; height:530px !important; vertical-align:top; list-style-type:none; }
    .services_text { color:#404040; font-size:16px !important; line-height:1.3; vertical-align:top; text-align:justify !important; /*border:solid 1px black;*/  }
    .services_title { text-align:center; margin:0 0 10% 0 !important; font-size:20px !important;}



    .footer { float:left; width:100%; background-color:#E9E9E9; color:#ffffff; font-family:Century Gothic; vertical-align:middle; font-size:12px; color:#404040; height:52px; }
    #footer_text { width:100% !important; text-align:center !important; vertical-align: middle; margin:5% 0 0 0 !important; padding: 0;  }


    /* Website Design Page */
    .container_contact { dislay:block; font-family: Arial; width:100% !important; border: 1px; background-color:#ffffff; vertical-align: middle; margin: 0 auto; padding: 0;  height:100%; text-align: left; }
    #mobile_left { float:left; height:100% !important; margin:0 5% 0 5% !important; width:90% !important; line-height:1.5; font-size:18px !important; }
    #mobile_right { float:left !important; height:100% !important; margin:0 !important; width:100% !important; vertical-align:bottom middle; text-align:center; }

    /* SEO Page */
    #about_left { float:left; height:100% !important; margin:0 5% 0 5% !important; width:90% !important; line-height:1.5; font-size:18px !important; }

    /* Testimonials */
    .container_testimonials { font-family: Arial; width:99% !important; border: 1px; background-color:#ffffff; vertical-align: top; margin: 0 auto; padding: 0;  height:100% !important; text-align: left; }

    /* Contact Form */
    #contact_form_left { float:left; margin:0 5% 0 5% !important; font-size:18px !important; }
    #contact_form_right { float:left !important; margin:0 5% 0 5% !important; font-size:18px !important; vertical-align:middle; }

    /* Portfolio Page */
    .container_portfolio { font-family: Arial; width:100% !important; border:0 !important; background-color:#ffffff; vertical-align: middle; margin: 0 auto; padding: 0;  height:100%; text-align: left; }

    #portfolio { float:left; height:100%; margin: 0 !important; width:95% !important; margin:0 0 0 5% !important; line-height:1.5; font-size:16px; }
    
    .sample-website-work-left { float:left; width:94% !important; height:450px; padding:0 !important; text-align:center; margin:0 4% 0 0 !important;   }
    .sample-website-work-middle { float:left; width:94% !important; height:450px; padding:0 !important; text-align:center; margin:0 4% 0 0 !important;    }
    .sample-website-work-right { float:left; width:94% !important; height:450px; padding:0 !important; text-align:center; margin:0 4% 0 0 !important; /* border:solid 1px blue; */  }
    .more-info { float:left; width:95% !important; margin:0 0 0 5% !important; height:80px !important; }

    #portrait-ipad { display:none; }
    
  }
  
  
/* Landscape Iphone */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 1)
  and (orientation: landscape) 
  {
    .container { display:block !important; width:100% !important; font-family: Arial; border: 0 !important; background-color:#ffffff; vertical-align: top; margin: 0 auto; padding: 0; height:100%; text-align: center; }
    .container-bottom { display:block !important; width:100% !important; font-family: Arial; border: 0 !important; background-color:#ffffff; vertical-align: top; margin: 0 auto; padding: 0; height:100%; text-align: center; } 
    
    #iphone-only { display:block; margin:0 0 5% 0; font-weight:bold; font-size:20px; }
    .logo { float:left; text-align:center !important; margin:0; width:100% !important; max-width:100% !important; }
    .menubar { display:none !important;   }
    .greybit { float:left !important; background-color:#E9E9E9; z-index:999; width:100% !important; height:200px; text-align:center !important;  }
    
    #mobilephone { color:#404040; width:97%; font-family:Arial; height:26%; margin:1% 0 0 0 !important; font-size:25px !important; }

    /* Large Red Banner */
    .middle_red { display:block; background-image:url(../images/middle_red.gif); background-repeat:no-repeat; color:#ffffff; width:100% !important; height:434px; z-index:1; vertical-align: middle; margin: 0 auto; padding: 0; text-align: center !important; }
    #middle_red_all { float:left; display:block !important; width:100%; background-color:#BC1C2B; height:280px !important; vertical-align:middle;  }
    #red_left { display:block !important; float:left; font-family:Garamond, Helvetica, Arial !important;  vertical-align: top middle; margin: 0 auto; padding: 0; font-size:28px !important; margin:5% 0 5% 0; color: #ffffff; text-align: center !important;  width: 95% !important; vertical-align:middle;   }
    /*
    #red_right { display:block; float:left !important; width:100% !important; margin:0 !important; line-height:1.2; font-style:italic; font-size:13px; vertical-align:top; text-align:left;  }
    */
    #red_right { display:none !important; height:0px !important; width:0px !important; margin:0 !important; }
    #jill_left { display:none !important; height:0px !important; width:0px !important; margin:0 !important;  }
    #jill_right { display:none !important; height:0px !important; width:0px !important; margin:0 !important; }


    /* Text inside Red Banner */
    #banner { float: left; font-family:Garamond, Helvetica, Arial !important; line-height:1.5 !important; vertical-align: top middle; margin: 0 auto; padding: 0; font-size:28px; margin:2% 0 5% 0 !important; color: #ffffff; text-align: center !important;  width: 100% !important;   display: none; }
    #banner2 { float: left; width: 96% !important; margin:0 2% 0 2% !important; line-height:2.0 !important; font-size:22px !important; font-family:Helvetica, Arial, Garamond !important; text-align: left !important; color: #ffffff; display: none; }
    #professional_text { width: 95% !important; margin:0 !important; padding:0 !important; line-height:2.4 !important; font-size:20px !important; font-family:Helvetica, Arial, Garamond !important; text-align:justify !important; color: #ffffff; margin: 0 5% 0 0 !important;   }
    #professional_text a hover { background-image:url(../images/button_red.gif); background-repeat:no-repeat; }


    /* Text after Red Banner - For Websites That */
     #for_websites_that { float:left; display:block; width:100% !important; text-align:center !important; color:#404040; font-size:24px; margin:1.5% 0 10% 0 !important;  }
    
    #line_of_services { float:left; color:#BC1C2B; width:100% !important; margin:0 !important; /*border:solid 1px black;*/ text-align:left !important; vertical-align:top; list-style-type:none; }
    .li_style { float:left !important; display:block; margin:0 !important; width:80% !important; display:block; text-align:left !important; height:620px !important; vertical-align:top; list-style-type:none; }
    .services_text { color:#404040; font-size:20px !important; line-height:2.0; vertical-align:top; text-align:justify !important; /*border:solid 1px black;*/  }
    .services_title { text-align:center; margin:0 0 10% 0 !important; font-size:24px !important;}

    .footer { float:left; width:100%; background-color:#E9E9E9; color:#ffffff; font-family:Century Gothic; vertical-align:middle; font-size:18px !important; color:#404040; height:80px; }
    #footer_text { width:100% !important; text-align:center !important; vertical-align: middle; margin:4% 0 5% 0 !important; padding: 0;  }


    /* Website Design Page */
    .container_contact { dislay:block; font-family: Arial; width:100% !important; border: 1px; background-color:#ffffff; vertical-align: middle; margin: 0 auto; padding: 0;  height:100%; text-align: left; }
    #mobile_left { float:left; height:100% !important; margin:0 5% 0 5% !important; width:90% !important; line-height:1.5; font-size:18px !important; }
    #mobile_right { float:left !important; height:100% !important; margin:0 !important; width:100% !important; vertical-align:bottom middle; text-align:center; }

    /* SEO Page */
    #about_left { float:left; height:100% !important; margin:0 5% 0 5% !important; width:90% !important; line-height:1.5; font-size:18px !important; }

    /* Testimonials */
    .container_testimonials { font-family: Arial; width:99% !important; border: 1px; background-color:#ffffff; vertical-align: top; margin: 0 auto; padding: 0;  height:100% !important; text-align: left; }

    /* Contact Form */
    #contact_form_left { float:left; margin:0 5% 0 5% !important;  font-size:18px !important; }
    #contact_form_right { float:left !important; margin:0 5% 0 5% !important; font-size:18px !important; vertical-align:middle; }
    
    /* Portfolio Page */
    .container_portfolio { font-family: Arial; width:100% !important; border:0 !important; background-color:#ffffff; vertical-align: middle; margin: 0 auto; padding: 0;  height:100%; text-align: left; }

    #portfolio { float:left; height:100%; margin: 0 !important; width:95% !important; margin:0 0 0 5% !important; line-height:1.5; font-size:16px; }
    
    .sample-website-work-left { float:left; width:94% !important; height:450px; padding:0 !important; text-align:center; margin:0 4% 0 0 !important;   }
    .sample-website-work-middle { float:left; width:94% !important; height:450px; padding:0 !important; text-align:center; margin:0 4% 0 0 !important;    }
    .sample-website-work-right { float:left; width:94% !important; height:450px; padding:0 !important; text-align:center; margin:0 4% 0 0 !important; /* border:solid 1px blue; */  }
    .more-info { float:left; width:95% !important; margin:0 0 0 5% !important; height:80px !important; }

    #portrait-ipad { display:none; }

  }
  
  /* IPad 2 - Portrait View*/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  
and (orientation: portrait) {
 
    .container { display:block !important; width:100% !important; font-family: Arial; border: 0 !important; background-color:#ffffff; vertical-align: top; margin: 0 auto; padding: 0; height:100%; text-align: center; }
    .container-bottom { display:block !important; width:100% !important; font-family: Arial; border: 0 !important; background-color:#ffffff; vertical-align: top; margin: 0 auto; padding: 0; height:100%; text-align: center; } 

    .container_portfolio { display:block !important; width:100% !important; border: 0 !important; font-family: Arial; background-color:#ffffff; vertical-align: middle; margin: 0 auto; padding: 0;  height:100%; text-align: left; }

    .logo { float:left; text-align:left; margin:1% 1% 0 1%; /*border:solid 1px black;*/ }
    .greybit { float:right; margin:5% 0 0 0 !important; background-color:#ffffff !important; z-index:999; width:37% !important; height:130px; text-align:left;  }
    
    .menubar { display:block; float:left; display:block; height:4%; font-family:Kristen ITC, Calibri, Helvetica !important; font-size:22px !important; margin:1% 0 0 0 !important; vertical-align:bottom;   }

    /* Large Red Banner */
    .middle_red { display:block; background-image:url(../images/middle_red.gif); background-repeat:no-repeat; color:#ffffff; width:100% !important; height:404px !important; z-index:1; vertical-align: middle; margin: 0 auto; padding: 0; text-align: left !important; }
    #middle_red_all { float:left; display:block; width:100%; background-color:#BC1C2B; height:205px !important; vertical-align:middle;  }
    #red_left { display:block; float:left; font-family:Garamond, Helvetica, Arial !important;  vertical-align: top middle; margin: 0 auto; padding: 0; font-size:28px !important; margin:5% 0 1% 0; color: #ffffff; text-align: left !important;  width: 95% !important; vertical-align:middle;   }
    /*
    #red_right { display:block; float:left !important; width:100% !important; margin:0 !important; line-height:1.2; font-style:italic; font-size:13px; vertical-align:top; text-align:left;  }
    */
    #red_right { display:none !important; height:0px !important; width:0px !important; margin:0 !important; }
    #jill_left { display:none !important; height:0px !important; width:0px !important; margin:0 !important;  }
    #jill_right { display:none !important; height:0px !important; width:0px !important; margin:0 !important; }


    /* Text inside Red Banner */
    #banner { float: left; font-family:Garamond, Helvetica, Arial !important; line-height:1.5 !important; vertical-align: top middle; margin: 0 auto; padding: 0; font-size:28px; margin:1% 0 2% 0 !important; color: #ffffff; text-align: left !important;  width: 100% !important;   display: none; }
    #banner2 { float: left; width: 100% !important; margin:0 !important; line-height:1.6 !important; font-size:18px !important; font-family:Helvetica, Arial, Garamond !important; text-align: justify !important; color: #ffffff; display: none; }
    #professional_text { font-size:16px; width: 95% !important; margin:10% 4% 0 0 !important; line-height:2.0 !important; font-size:19px !important; font-family:Helvetica, Arial, Garamond !important; text-align: center !important; color: #ffffff;   }
    #professional_text a hover { background-image:url(../images/button_red.gif); background-repeat:no-repeat; }

    /* Text after Red Banner - For Websites That */
     #for_websites_that { float:left; display:block; width:100% !important; text-align:center !important; color:#404040; font-size:24px; margin:1.5% 0 10% 0 !important;  }

    /* Services - 4 images */
    #middle_bit { float:left; margin:0 !important;   }

    #line_of_services { float:left; color:#BC1C2B; width:100% !important; margin:0 !important; /*border:solid 1px black;*/ text-align:left !important; vertical-align:top; list-style-type:none; }
    .li_style { float:left !important; display:block; margin:0 !important; width:87% !important; display:block; text-align:left !important; height:620px !important; vertical-align:top; list-style-type:none; }
    .services_text { color:#404040; font-size:20px !important; line-height:2.0; vertical-align:top; text-align:justify !important; /*border:solid 1px black;*/  }
    .services_title { text-align:center; margin:0 0 5% 0 !important; font-size:24px !important;}

    /* Footer */
    .footer { float:left; width:100%; background-color:#E9E9E9; color:#ffffff; font-family:Century Gothic; vertical-align:middle; font-size:18px !important; color:#404040; height:80px !important; }
    #footer_text { width:100% !important; text-align:center !important; vertical-align: middle; margin:4% 0 5% 0 !important; padding: 0;  }


    /* Website Design Page */
    .container_contact { display:block; font-family: Arial; width:100% !important; border: 1px; background-color:#ffffff; vertical-align: middle; margin: 0 auto; padding: 0;  height:100%; text-align: left; }
    #mobile_left { float:left; height:100% !important; margin:0 5% 0 5% !important; width:90% !important; line-height:1.5; font-size:18px !important; }
    #mobile_right { float:left !important; height:100% !important; margin:0 !important; width:100% !important; vertical-align:bottom middle; text-align:center; }

    /* SEO Page */
    #about_left { float:left; height:100% !important; margin:0 5% 0 5% !important; width:90% !important; line-height:1.5; font-size:18px !important; }

    /* Testimonials */
    .container_testimonials { font-family: Arial; width:99% !important; border: 1px; background-color:#ffffff; vertical-align: top; margin: 0 auto; padding: 0;  height:100% !important; text-align: left; }

    /* Contact Form */
    #contact_form_left { float:left; margin:0 5% 0 5% !important;  font-size:18px !important; }
    #contact_form_right { float:left !important; margin:0 5% 0 5% !important; font-size:18px !important; vertical-align:middle; }

    /* Portfolio Page */
    #portfolio { float:left; height:100%; margin: 0 0 0 50px !important; width:95%; line-height:1.5; font-size:18px !important; }

    .sample-website-work-left { float:left; display:block !important; width:49% !important; height:500px; padding:0 !important; text-align:center; /* border:solid 1px red; */ }
    .sample-website-work-middle { display:none;    }
    .sample-website-work-right { float:left !important; display:block !important;  width:49% !important; height:500px; padding:0 !important; text-align:center;  /*border:solid 1px blue;*/   }
    
    .more-info  { display:block; font-family: Arial; border:solid 1px black; width:90% !important; border: 0 !important; background-color:#ffffff; vertical-align: top !important; margin:0 5% 0 5% !important; padding: 0 !important;  height:50px; text-align: justify !important; }

    #portrait-ipad { display:none; }
    
}

  /* IPad 2 - Landscape View*/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  
and (orientation: landscape) {
    
    .container { display:block !important; width:100% !important; font-family: Arial; border: 0 !important; background-color:#ffffff; vertical-align: top; margin: 0 auto; padding: 0; height:100%; text-align: center; }
    .container-bottom { display:block !important; border:solid 1px black; width:100% !important; font-family: Arial; border: 0 !important; background-color:#ffffff; vertical-align: top; margin: 0 auto; padding: 0; height:100%; text-align: center; } 

    .container_portfolio { display:block !important; width:100% !important; border: 0 !important; font-family: Arial; background-color:#ffffff; vertical-align: middle; margin: 0 auto; padding: 0;  height:100%; text-align: left; }

    .logo { float:left; text-align:left; margin:1% 1% 0 1%; /*border:solid 1px black;*/ }
    .greybit { float:right; margin:4% 0 0 0 !important; background-color:#ffffff !important; z-index:999; width:30% !important; height:130px; text-align:left;  }
    
    .menubar { display:block; float:left; display:block; height:4%; font-family:Kristen ITC, Calibri !important; font-size:18px !important; margin:1% 0 0 0 !important; vertical-align:bottom;   }


    /* Large Red Banner */
    .middle_red { display:block; background-image:url(../images/middle_red.gif); background-repeat:no-repeat; color:#ffffff; width:100% !important; height:404px !important; z-index:1; vertical-align: middle; margin: 0 auto; padding: 0; text-align: left !important; }
    #middle_red_all { float:left; display:block; width:100%; background-color:#BC1C2B; height:230px !important; vertical-align:middle;  }
    #red_left { display:block; float:left; font-family:Garamond, Helvetica, Arial !important; vertical-align: top middle; margin: 0 auto; padding: 0; font-size:28px !important; margin:5% 0 1% 0; color: #ffffff; text-align: left !important;  width: 95% !important; vertical-align:middle;   }
    #red_right { display:none !important; height:0px !important; width:0px !important; margin:0 !important; }
    
    #jill_left { display:none !important; height:0px !important; width:0px !important; margin:0 !important;  }
    #jill_right { display:none !important; height:0px !important; width:0px !important; margin:0 !important; }
    
    /* Text inside Red Banner */
    #banner { float: left; font-family:Garamond, Helvetica, Arial !important; line-height:1.5 !important; vertical-align: top middle; margin: 0 auto; padding: 0; font-size:28px; margin:0 0 2% 0 !important; color: #ffffff; text-align: left !important;  width: 100% !important;   display: none; }
    #banner2 { float: left; width: 100% !important; margin:0 !important; padding:0 !important; line-height:1.2 !important; font-size:19px !important; font-family:Helvetica, Arial, Garamond !important; text-align: left !important; color: #ffffff; display: none; }
    #professional_text { font-size:16px; width: 95% !important; margin:10% 4% 0 0 !important; line-height:2.0 !important; font-size:19px !important; font-family:Helvetica, Arial, Garamond !important; text-align: left !important; color: #ffffff;   }
    #professional_text a hover { background-image:url(../images/button_red.gif); background-repeat:no-repeat; }

    /* Text after Red Banner - For Websites That */
     #for_websites_that { float:left; display:block; width:100% !important; text-align:center !important; color:#404040; font-size:24px; margin:1.5% 0 5% 0 !important;  }

    #line_of_services { float:left; color:#BC1C2B; padding:0 !important; width:100% !important; margin:0 !important; /*border:solid 1px black;*/ text-align:left !important; vertical-align:top; list-style-type:none; }
    .li_style { display: inline-block; *zoom:1; *display:inline; height:450px !important; vertical-align:top; width:23% !important; margin:1% 0.5% 0 0.5% !important; list-style-type:none;  text-align:left !important; }
    .services_text { color:#404040; font-size:16px !important; line-height:1.2 !important; vertical-align:top; text-align:justify !important; /*border:solid 1px black;*/  }


    /* Footer */
    .footer { float:left; width:100%; background-color:#E9E9E9; color:#ffffff; font-family:Century Gothic; vertical-align:middle; font-size:18px !important; color:#404040; height:80px !important; }
    #footer_text { width:100% !important; text-align:center !important; vertical-align: middle; margin:2% 0 5% 0 !important; padding: 0;  }

    /* Website Design Page */
    .container_contact { dislay:block; font-family: Arial; width:100% !important; border: 1px; background-color:#ffffff; vertical-align: middle; margin: 0 auto; padding: 0;  height:100%; text-align: left; }
    #mobile_left { float:left; height:100% !important; margin:0 5% 0 5% !important; width:90% !important; line-height:1.5; font-size:18px !important; }
    #mobile_right { float:left !important; height:100% !important; margin:0 !important; width:100% !important; vertical-align:bottom middle; text-align:center; }

    /* SEO Page */
    #about_left { float:left; height:100% !important; margin:0 5% 0 5% !important; width:90% !important; line-height:1.5; font-size:18px !important; }


    /* Testimonials */
    .container_testimonials { font-family: Arial; width:99% !important; border: 1px; background-color:#ffffff; vertical-align: top; margin: 0 auto; padding: 0;  height:auto !important; text-align: left; }

    /* Contact Form */
    #contact_form_left { float:left; margin:0 5% 0 5% !important;  font-size:18px !important; }
    #contact_form_right { float:left !important; margin:0 5% 0 5% !important; font-size:18px !important; vertical-align:middle; }

    /* Portfolio Page */
    #portfolio { float:left; height:100%; margin: 0 0 0 25px !important; width:95%; line-height:1.5; font-size:16px; }

    .more-info  { display:block; width:90% !important; border: 0 !important; background-color:#ffffff; vertical-align: top !important; margin:0 5% 0 3% !important; padding: 0 !important;  height:50px; text-align: left !important; }

}

body { font-family: Arial; vertical-align: middle; margin: 0 auto; padding: 0; background-color: #ffffff; text-align: center; height:990px; height:960px\9; }

a { text-decoration:none; color:Black; }

/* setup links style */
a:link { }

a:visited { }

/*when someone hovers over the link */
a:hover { color:#B32028; background-color:inherit;}

h1 { font-family:Sans-Serif; font-size:26px; }
h2 { font-size:25px; font-weight:bold; }
h3 { font-family:Informal Roman; font-size:17px; padding:0; margin:0; font-weight:normal; }
h4 { font-size:15px; font-family:Arial, Helvetica, sans-serif; text-align:justify; color: #ffffff; margin:3% 0 0 0; line-height:2.0 !important; }

/**********************/
/* END OF HOVER IMAGE */
/**********************/ 

#container_all { width: 100%; background-color: #ffffff; }

.container { display:block; font-family: Arial; width:1200px; border: 1px; background-color:#ffffff; vertical-align: top; margin: 0 auto; padding: 0; height:100%; text-align: center; }
.container-bottom { display:block; font-family: Arial; width:1200px; border: 1px; background-color:#ffffff; vertical-align: top; margin: 0 auto; padding: 0; height:100%; text-align: center; }

.container_contact { font-family: Arial; width:1200px; border: 1px; background-color:#ffffff; vertical-align: middle; margin: 0 auto; padding: 0;  height:100%; text-align: left; }

.container_testimonials { font-family: Arial; width:1200px; border: 1px; /*border:solid 1px black;*/ background-color:#ffffff; vertical-align: top; margin: 0 auto; padding: 0;  height:1970px; text-align: left; }

.container_portfolio { font-family: Arial; width:1200px; border: 1px; background-color:#ffffff; vertical-align: middle; margin: 0 auto; padding: 0;  height:100%; text-align: left; }



/* IPad View - Keep this padding, otherwise knocks out whole IPad layout */
#header { padding: 10px 18px; background-color: black; display:none !important; }


#iphone-only { display:none; }
.logo { float:left; text-align:left; margin:1% 1% 0 1%; /*border:solid 1px black;*/ }
.menubar { float:left; display:block; height:4%;  font-family:Kristen ITC; font-size:14px; margin:12% 0 0 0; vertical-align:bottom;   }
.greybit { float:right; background-color:#E9E9E9; z-index:999; width:260px; height:200px;text-align:left;  }

#mobilephone { color:#404040; width:97%; font-family:Arial; height:26%; margin:15% 0 0 0.5%; font-size:18px; }

.middle_red { display:block; background-image:url(../images/middle_red.gif); background-repeat:no-repeat; color:#ffffff; width:1200px; height:234px; z-index:1; vertical-align: middle; margin: 0 auto; padding: 0; text-align: center; }
#middle_red_all { display:block; float:left; width:100%; background-color:#333333; /*background-color:#BC1C2B;*/ height:234px; vertical-align:middle;  }

#red_left { display:block; float:left; width:64%; text-align:left; line-height:1.0 !important; margin:4.5% 0 0 3%; height:100%; vertical-align:top !important;  font-size:29px; font-family:Tunga, Helvetica, Garamond;     }
#professional_text { font-size:16px;font-family:Century Gothic; text-align:justify; line-height:1.0 !important;   }
#professional_text a hover { background-image:url(../images/button_red.gif); background-repeat:no-repeat; }
#red_right { display:block; float:right; width:20.5%; margin:23px 0 0 0; line-height:1.4; font-style:italic; font-size:13px; vertical-align:top; text-align:left;  }


#for_websites_that { float:left; width:100%; text-align:right; color:#404040; font-size:22px; margin:1.5% 0 0 0;  }

#find { color:#BC1C2B; }

#middle_bit { float:left; margin:0.7% 0 0 1%; margin:0.7% 0 0 -2%\9; /*border:solid 1px black;*/   }

#line_of_services { float:left; color:#BC1C2B; width:1120px; margin:0 80px 0 0; width:1200px\9; margin:0 0 0 0\9; /*border:solid 1px black;*/ text-align:center; vertical-align:top; list-style-type:none; }
.services_text { color:#404040; font-size:13px; vertical-align:top; /*border:solid 1px black;*/  }
.services_title { text-align:center; margin:0 0 5px 0;}
.image_center { text-align:center; }

.li_style { display: inline-block; *zoom:1; *display:inline; height:450px; vertical-align:top; /*width:205px;*/ width:260px; margin:5.4% 7px 0 7px; margin:3.7% 15px 0 15px\9; list-style-type:none;  text-align:justify; }

.footer { float:left; width:100%; background-color:#E9E9E9; color:#ffffff; font-family:Century Gothic; vertical-align:middle; font-size:12px; color:#404040; height:52px; }
#footer_text { width:1100px; width:1138px\9; text-align:left; vertical-align: middle; margin: 1% auto; padding: 0;  }
#footer_text2 {  float:left; width:36%;  text-align:right; vertical-align: middle; margin: 1% auto; padding: 0;  }

#icons { float:right; vertical-align:top; text-align:left; width:64%; margin-top:4px; }
#icons2 { float:left; vertical-align:top; text-align:left; width:100%; margin:6px 0 8px -10px; }



#contact_form_left { float:left; margin: 10px 0 0 50px; margin: 12px 0 3px 50px\9; font-size:14px; }
#contact_form_right { float:right; margin: 40px 10px 0 0; font-size:13px; vertical-align:middle; vertical-align:top\9; }

#about_left { float:left; height:464px; height:446px\9; margin: 40px 0 0 50px; width:70%; line-height:1.5; font-size:14px; }

#mobile_left { float:left; height:464px; height:446px\9; margin: 40px 0 0 50px; width:60%; line-height:1.5; font-size:14px; }
#mobile_right { float:right; height:464px; height:446px\9; margin: 50px 0 0 0; vertical-align:bottom; }

.testimonial_quotes { font-style:italic; color:#000000; font-weight:300; }

#jill_left { float:left; line-height:1.4; font-style:normal; }
#jill_right { float:right; margin:4px 0 0 0; font-style:normal; }


#banner { display: none; float: left; vertical-align: top middle; margin: 0 auto; padding: 0; text-align: left; line-height:1.2 !important;  font-size:29px; font-family:Tunga, Helvetica, Garamond; color: #ffffff; text-align: justify;  width: 600px;    }

#banner2 { display: none; float: left; font-size:15px; font-family:Arial, Helvetica, sans-serif; text-align:justify; color: #ffffff; margin:2% 0 0 0; line-height:2.0 !important; width: 770px; }

#banner3 { float: left; vertical-align: top middle; margin: 0 auto; padding: 0; text-align: left; color: #ffffff; text-align: justify; font-family: Arial; font-size: 13px;  margin-left: 51px; width: 1000px;   display: none; }

#banner4 { float: left; vertical-align: top middle; margin: 0 auto; padding: 0; text-align: left; color: #ffffff; text-align: justify; font-family: Arial; font-size: 13px;  margin-left: 51px; width: 1000px;   display: none; }

#banner5 { float: left; vertical-align: top middle; margin: 0 auto; padding: 0; text-align: left; color: #ffffff; text-align: justify; font-family: Arial; font-size: 13px;   margin-left: 51px; width: 1000px;   display: none; }

#portfolio { float:left; height:100%; margin: 40px 0 0 50px; width:95%; line-height:1.5; font-size:16px; }


.sample-website-work-left { float:left; width:31.5%; height:450px; padding:0 2% 0 0; text-align:center; /* border:solid 1px red; */ }
.sample-website-work-middle { float:left; width:32%; height:450px; padding:0 2% 0 0; text-align:center;    }
.sample-website-work-right { float:right; width:32.5%; height:450px; text-align:center; /* border:solid 1px blue; */  }
.more-info { float:left; width:100%; height:50px; }

/****************/
/* HOVER IMAGE */
/***************/
.sample-website-work-left img:hover {
  animation: fadeout .5s ease forwards;
}

.sample-website-work-middle img:hover {
  animation: fadeout .5s ease forwards;
}

.sample-website-work-right img:hover {
  animation: fadeout .5s ease forwards;
}

@keyframes fadeout {
  to {
    opacity: 0.75;
  }