.ui-header .ui-title, .ui-footer .ui-title 
{ margin-right: 0 !important; margin-left: 0 !important;
    }
     .header-gradient {
	      background-image:
	        -webkit-gradient(
	          linear, 
	          left top,
	          left bottom,
	          from( rgba( 068,213,254,0 )),
	          color-stop(.43, rgba( 068,213,254,0 )),
	          to( rgba( 068,213,254,1 ))),
	        -webkit-gradient(
			  radial,
	          50% 700, 690,
	          50% 700, 689,
	                from( rgba( 049,123,220,0 )),
	                  to( rgba( 049,123,220,1 ))),
	        -webkit-gradient(
	          radial,
	          20 -43, 60,
	          20 -43, 40,
	          from( rgba( 125,170,231,1 )),
	          to( rgba( 230,238,250,1 )));
	    }



.img {
    border-radius: 10px;
   /* width: 165px;*/
   height: 120px;
}

.businessLogo {
    border-radius: 10px;
    height: 70px;
}


.body {
    /*border-style: dashed;*/
    border-width: 2px;
    vertical-align: middle;
}         
   .gwf
{
    font-family: 'Terminal Dosis' , sans-serif;
    font-size: 20px;
    text-shadow: 3px 3px 3px #999;
    color: #CC3300;
    
}

.myFrame
{
    vertical-align: middle;
}

.box1 {
   
    width: 210px;
    height: 100%;
    padding: 2px 0;
    margin: 2px;
    text-align: center;
}
.box2 {
    width: 100%;
    height: 100%;
    padding: 1px 4px 1px 4px;
    /*margin: 0px 2px 0px 2px;*/
    text-align: center;
}
.box3 {
   
     width: 165px;
    height: 100%;
    padding: 0px 0 0px 0;
    margin: 0px;
    text-align: center;
}
.box4 {
    width: 165px;
    height: 80%;
    padding: 0px 0 0px 0;
    margin: 0px;
    text-align: center;
}


        @media all and (orientation: portrait)
        {
           .myFrame{}

            .box1 {
                flex-wrap: nowrap;
            }
            .box2 {
                flex-wrap: nowrap;
            }
            .box3 {
                
            }
            .box4 {
                margin-top: 10px;  /*MODIFY IF NECESSARY*/
            }
            .boxSocial
            {
                float: right;
                vertical-align: middle;
            }
        
        }
        @media all and (orientation: landscape)
        {
             .myFrame{}
            .box1
            {
                float: left;
                width: 190px;
            }
            .box2 {
                float: left;
                /*width: 190px;*/
                width: 250px;
               /* width: 100%;*/
            }
            .box3 {
                float: left;
                width: 165px;
                margin: 4px 0 0 5px;
            }
            .box4
            {
                float: left;
                width: 75px;
                height: 75px;
            }
            .boxSocial
            {
                float: right;
                vertical-align: middle;

        
            }
        
        }