* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

html
{
    width: 100%;
    height: 100%;
}

body 
{
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    height:100% !important;
    margin:0px;
    padding:0px;
    width:100% !important;
    text-align:center;
}

#allContent
{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.leftContent
{
    float: left;
    padding: 0;
    margin: 0;
    width: 40%;
    height: 70%;
}

#emailLeftContent
{
    display: none;
    color:black;
}

#backgroundLogo
{
    padding: 1% 3%;
    height: 98%;
    width: 94%;
}

#logoSrcDiv
{
    background: url("../img/MacsolvingLogo7Med.jpg") no-repeat scroll center center  transparent;
    background-size: contain;
    height: 100%;
    width: 100%;
}

a:link { text-decoration:none; }

.remoteContent
{
    margin: 0 3% ;
    top: 0;
    right: 0;
    width:54%;
    height: 70%;
    position: absolute;
    overflow:hidden;
}

.leftColumn
{
    position: absolute;
    left: 0;
    top:0;
    top:30%;
    width: 48%;
    height: 100%;
}

.rightColumn
{
    right: 0;
    top:30%;
    position: absolute;
    width: 48%;
}

#emailContent
{
    margin:  0;
    clear: both;
    text-align: center;
    width: 94%;
    padding: 0 3%;
}

#testimonialContent
{
    color: black;
    font-style: italic;
    padding: 0 10%;
    clear: both;
}

div > h2    { margin-top: 0;}
.remoteContent div h2   { margin-top: 8px;}

h2
{   clear: both;
    border: none; 
    border-radius: 12px !important;
    margin: 0 0 0 0px;
    text-align: left;
    padding: 0 0 0 30px;
}

.remoteContent h1
{
    background-color: #91fc35;
    border: solid 4px black !important;
}

h1
{
    font-size:250%;
    font-weight:normal;
    color:white;
    margin-bottom: 25px;
    background-color:#23e1fd;
    border: solid 4px #fb22a6 !important;
    border-radius: 15px !important;
    padding:8px;
    color: black;
}

@media only screen and (max-width:1050px) {
    h1 { font-size: 180%; }
    h2 { font-size: 130%; }
}

@media only screen and (max-width:980px) {
    h2 { padding-left: 15px; } 
}

@media only screen and (min-aspect-ratio: 2/1) {
  
    .leftColumn { top:5%; }
    .rightColumn    { top:5%; }
}

/*narrow layout*/
@media only screen and (max-width:800px) {
   
   #logoSrcDiv
    {
        background: url("../img/MacsolvingLogo7Small.jpg") no-repeat scroll center center  transparent;
        background-size: contain;
    }

    h1 { font-size: 180%; }
    
    .leftContent
    {  
        width:  50%;
        height: 45%;
    }
       
    .remoteContent
    {
        width: 48%; 
    }

    .leftColumn
    {   
        width:98%;
        right: 0;
        top: 0;
    }
    
    .rightColumn
    {
        width:98%;
        left: 0;
        bottom: 5%;
    }
}

/*narrow layout*/
@media only screen and (min-aspect-ratio: 1/1)   and (max-width:800px) {
 
    .remoteContent h1
    {
        border: solid 2px black !important;
    }

    .leftContent
    {  
        width:  50%;
        height: 90%;
    }
    
    .remoteContent
    {          
        margin-top:10px;
        width: 44%;
        height: 90%;
    }

    .leftColumn
    {   
        width:100%;
        right: 0;
        top: 0;
    }
    
    .rightColumn
    {
        width:100%;
        right: 0;
        top: 50%;
    }
    
    #emailLeftContent
    {
        display: block;
        margin:  0;
        clear: both;
        text-align: center;
        height: 10px;
        width: 94%;
        padding: 0 3%;
    }
    
    #emailContent
    {
        display: none;
    }
    
    #backgroundLogo
    {
        margin-top:15px;
        height: 48%;
    }
    
    #logoSrcDiv
    {
        background: url("../img/MacsolvingLogo7Small.jpg") no-repeat scroll top center  transparent;
        background-size: contain;
        height: 100%;
        width: 100%;
    } 
}

@media only screen and (min-aspect-ratio: 3/2) and (max-width:800px) {

    .remoteContent h1
    {   
        padding: 4px 0;
        margin: 2px 0 4px 0;
        font-size: 115%;
    }
    .remoteContent div h2
    {   
        padding: 1px 0;
        margin: 3px 0 1px 15px;
        font-size: 115%;
    }
}

/* Phone layout (with max-height)*/
@media only screen and (max-width:528px) {

    body
    {
        overflow-y: auto !important;
        overflow-x: auto !important;
    }

    .remoteContent h1
    {
        border: solid 2px black !important;
    }

    #allContent
    {
        height: auto;
        width:   auto;
        padding:  2%;
    }
    
    .leftContent
    {   width:  100%;
        position: static;
        display: block;
        height: 161px;
        float: none;
    }
    
    #backgroundLogo
    {   width:  100%;
        height: 161px;
        position: absolute;
        top: 10px;
        padding: 0;
        left: 0;
    }
    
    #logoSrcDiv
    {
        height: 100%;
        height: 100%;
    }
    
    #allContent div.remoteContent
    {
        margin: 8px 3%;
        top: 170px;
        font-size: 110%;
        width: 94%;
        height: auto;
        position: static;
    }
    
    .leftColumn
    {
        margin 4px 0 0 2%;
        padding: 1%;
        float: none;
        width: 98%;
        height: auto;
        position: static;
        
    }

    .rightColumn
    {
        margin 0 0 0 2%;
        padding: 1%;
        width: 98%;
        height: auto;
        position: static;
        
    }
    
   .rightColumn h1
    {
        margin: 2px 0 4px 0;
    }
    
    h1
    {   
        padding: 4px 0;
        margin: 2px 0 4px 0;
        font-size: 120%;
    }
    
    .remoteContent div h2
    {
        font-size: 110%;
        padding: 0 0 0 45px !important;
        margin: 0;
    }
    
    #emailLeftContent 
    {
        display: none;
    }

    #emailContent 
    {
        display: block;
        position: static;
        margin-top: 4px;
        height: 45px;
        padding: 0 2%;
    }
    
    #emailContent h1
    {
        color: black;
        padding: 5px 0; 
    }
}