#intro
{
    float: left;
    margin: 0 0 0 20px;
    text-align: right;
    width: 30%;
}

#intro h1
{
    margin-top: 0;
    font-size: 2.5em;    
}

#intro img:first-child
{
   padding-bottom: 1.2em; 
}

#Home-FPO
{
    position: absolute;
    top: -65px;
    right: 15px;
}

#Home-FPO img
{
   max-width:100%; 
}

.intro-icon
{
    margin: 0 0 0 20px;
    text-align: left;
    width: 30%;
}

/* Desktop  
* --------------------------------------------------------------- */

    /* Note:  Desktop width between 767px and full layout of 1024px  */
    
  @media only screen and (min-width: 768px) and (max-width: 1023px)
    {      
        #canvas
        {
	        width: 768px;
        }
	    
        /* #header ul.navigation
        {
            padding-left: 0px;
        }
        
        #header .nav-wrapper
        {
            border: 0;
            padding-left: 5px;
            line-height: normal;
        }
        */
        #body
        { 
            padding: 20px 25px 20px 25px;
        }
        
	    [class*='col-'] 
        {
	        width: 100%;
	        margin: 10px 0 0 0 ! important;
	    }   
	        
        #footer
        {
            padding: 20px 25px 20px 25px;
            
        }
        
        .right-footer
        {
            float: left;
            text-align: left;
        }  
        
        #Home-FPO
        {
            position: relative;
            float: left;
            width: 100%;
        }

        #Home-FPO img
        {
           max-width:100%; 
        }   
      
        #intro
        {
            float: left;
            margin: 0 50px 0 50px;
            text-align: left;
            width: 70%;
        }
    
        .intro-icon
        {
            margin: 0 0 0 20px;
            text-align: center;
            width: 70%;
        }   
    }


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

    #Home-FPO
    {
        position: relative;
        float: left;
        width: 100%;
    }
    #intro
    {
        float: left;
        margin: 0 50px 0 50px;
        text-align: left;
        width: 70%;
    }
    .intro-icon
    {
        margin: 0 0 0 20px;
        text-align: center;
        width: 70%;
    }
}
 @media only screen and (max-width: 767px) 
{
        body
        {
            font-size: 100%;
            
        }
        
        /* Layout */
        #canvas
        {
           
	        width: 100%;
	        box-shadow: none;
        }
        
        
        [class*='col-'] 
        {
	        width: 100%;
	        padding: 0;
	        margin: 10px 0 0 0 ! important;
	    }
	    #body
        {
           
            padding: 20px 50px;
        }
        #Home-FPO
        {
           /* position: relative;
            float: left;
            width: 100%;*/
            display: none;
        }
        
        #intro
        {
            float: left;
            margin: 0 10px 0 10px;
            text-align: left;
            width: 90%;
        }
        #intro img:first-child
        {
            width: 75%;
        }
        .intro-icon
        {
            margin: 0 0 0 20px;
            text-align: center;
            width: 90%;
        }
        /* Navigation */
        #header .nav-wrapper
        {
            border: 0;
            padding-left: 5px;
            line-height: normal;
        }
        
        
        #header ul.navigation
        {
            display: none;
            position: absolute;
            z-index: 999;
            float: none;
            width: 70%;
        }
        
        #header ul.navigation
        {
            top: 38px;
            left: 75px;
            background: #fff;
            border-left: solid 1px #B5B5B5;
            border-bottom: solid 1px #B5B5B5;
            border-right: solid 1px #B5B5B5;
        }
        
       #header ul.navigation li
        {
            float: none;
            width: 100%;
            min-height: 34px ! important;
            line-height: 34px ! important;
        }
        
        #header ul.navigation li
        {
            background-color: #fff;
            margin-right: 0;
            padding-left: 10px;
            color: #090909;
            border-top: solid 1px #B5B5B5;
        }
        
        #header ul.navigation li:before
        {
            content: ' ';
            padding: 0;
        }
        
        #header ul.navigation li a
        {
            color: #090909;
            font-weight: 300;
        }
        
        #header .toggle-wrapper
        { 
            display: none;
        }  
        #header .menu-toggle-mq
        {
            display: block;
            padding-left: 0;/*padding-left: 34px;*/
            height: 28px;
	        text-decoration: none ! important;
	        text-transform: uppercase;
	        font-size: 75%;
            line-height: 28px;
            outline: 0;
            /*background: transparent url('../Images/menu.png') no-repeat 0 3px;*/
        }
        
        #header .menu-toggle-mq
        {
            background-color: transparent;
            color: #090909;
        }
        
        #header .menu-toggle-mq  a:focus
        {
            border: 0;
        }
         #footer
        {     
            padding: 10px 50px;
            font-size: 75%;
        }
        .right-footer
        {
            float: left;
            text-align: left;
        }
}