@media screen and (max-width: 320px) /* Phone Portrait */
{
    /* HTML Styles */
    html                {font-size: 96%; line-height: 1.5;}
    h1, h2, h3, h4      {width: 100%; text-align: left; font-size: 17pt;}
        
    .header             {position: absolute; top: -2px; left: -2px; padding: 0; background-color: transparent; height: 140px; width: 100%; z-index: 4000;}
    .header_scrl        {position: absolute; top: -2px; left: -2px; padding: 0; background-color: transparent; height: 100px; width: 100%; z-index: 4000;}
   
    .navigation         {background: rgba(0,0,0, 0.0); width: 96%; top: 0px;}
    .navigation_scrl    {background: rgba(0,0,0, 0.0); width: 96%;}
    
    nav ul li a         {font-size:12px; padding:1em 1.4em;}
          
    .btn-open:after     {color:white;}   
    
    .content .holder    {margin: 0 4% 0 4% !important;}
    
    .footer .T1 .C30    {padding: 10px 0 10px 0;}
    .footer             {text-align: center !important;}
    
    .T2                 {min-height: 90px;}
    .T3 .holder_tmp     {padding: 4px;}
    .T3 .holder         {margin: 0px;}
    .T3 .C31 .holder    {min-height: 5px;}
    .T3 .holder         {min-height: 5px;}
    .T3 .C40            {width: 100% !important;}
    .T3 .C41            {width: 100% !important;}
    .T4 .holder         {min-height: 50px;}
    .T4 .holder_tmp     {padding: 4px;}
    .T4 .holder         {margin: 0px;}
    .T20 .holder_tmp    {padding: 4px;}
    .T20 .holder        {margin: 0px;}   
    .T20                {background: rgba(255,255,255, 0.9); padding: 10% 0 10% 0;}    
    .T20 .cnt_align     {margin-left: 0 !important;}
    .T20 .C32 .clck     {margin: 2% !important; padding: 2% !important; float: left; width: 25% !important;}    
    .T21                {background: rgba(255,255,255, 0.4);}
    .T21                {display: none;} 
    .T21 .div100        {padding: 1% !important;}
    .T22                {display: none;} 
       
    #sequence           {display: none;}
    
    .slides img         {width: auto; height: 100%; overflow: hidden;}
    
    .title              {font-size: 12pt; left: 0%; width: 90%; top: 0%; text-align: center;}
    .subtitle           {font-size: 9pt; left: 0%; width: 90%; top: 10%; text-align: center;}
    
    .mobile .div10      {width: 20%!important; cursor: pointer;}
    .mobile .div70      {width: 40%!important; cursor: pointer;}
    .mobile .div20      {width: 40%!important; cursor: pointer;}
    
    .photo_2 .clck      {width: 20% !important; height: auto;}
    .photo_3            {margin: 20px 20% 2px 20%; width: 60%;}
    .photo_3_hide       {display: none;}
    
    .fancybox img       {width: 100% !important; height: auto; float: left;}
    .div25 img          {height: auto; width: 100%;}
        
    .a_btn              {width: 99%; margin: 5px 0 20px 0; padding: 10px 0px 10px 0px;}    
    .b_btn              {width: 100%; margin: 1px; padding: 10px 0px 10px 0px;}
    .c_btn              {margin: 1px; padding: 2px 0px 2px 0px;}

    .social             {width: 80% !important; margin: 0 10% 5% 5%; text-align: center;}    
    #social .sm         {background: rgba(255,255,255, 0.2); margin: 2px; padding: 5px;}    
    .back-to-top img    {width: 30px; height: auto;}
    .back-to-top        {position: fixed; bottom: 0px!important; right: 0px!important; padding: 0px!important; margin: 0!important; display: none; z-index: 5000; opacity: 0.9;}
    .anchor             {cursor: pointer; z-index: 7000; width: 12%; height: 35px; opacity: 0.9; position: fixed; bottom: 2px; padding: 0px; margin: 0 49% 0 49%;  background-image: url('../../../app_themes/admin/ico_down.png'); background-repeat: no-repeat; background-size: 100%;}
    .anchor:hover       {opacity: 1.0;}
    
}

@media screen and (min-width: 321px) and (max-width: 600px) /* Phone Landscape */
{
    html                {font-size: 10px; line-height: 1.4;}
    h1, h2, h3, h4      {width: 100%; text-align: left; font-size: 18pt !important;}
    
    .holder             {margin: 0; padding: 5px !important;}  
    h1, h2, h3, h4      {width: 100%; text-align: left; font-size: 18pt;}    
   
    .header             {position: absolute; top: 0px; left: 0px; padding: 0; background-color: transparent; height: 140px; width: 100%; z-index: 4000;}
    .header_scrl        {position: absolute; top: 0px; left: 0px; padding: 0; background-color: transparent; height: 100px; width: 100%; z-index: 4000;}
   
    .navigation         {background: rgba(0,0,0, 0.0) !important; width: 97%; top: 0px;}
    .navigation_scrl    {width: 97%;}
    
    nav ul li a         {font-size:12px; padding:1em 1.4em;}
    .btn-open:after     {color:white;}   
    
    .content .holder    {margin: 0 4% 0 4% !important;}
    
    .footer .T1 .C30    {padding: 10px 0 10px 0;}
    .footer             {text-align: center !important;}
    
    .T2                 {min-height: 100px;}
    .T3 .holder_tmp     {padding: 4px;}
    .T3 .holder         {margin: 0px;}
    .T3 .C31 .holder    {min-height: 5px;}
    .T3 .holder         {min-height: 5px;}
    .T3 .C40            {width: 100% !important;}
    .T3 .C41            {width: 100% !important;}
    .T4 .holder         {min-height: 50px;}
    .T4 .holder_tmp     {padding: 4px;}
    .T4 .holder         {margin: 0px;}
    .T20 .holder_tmp    {padding: 4px;}
    .T20 .holder        {margin: 0px;}
    .T20                {background: rgba(255,255,255, 0.9); padding: 10% 0 10% 0;}
    .T20 .cnt_align     {margin-left: 0px !important;}
    .T20 .C32 .photo_3  {margin: 20px 3% 2px 3%; width: 26%;}
    .T21                {background: rgba(255,255,255, 0.4);}
    .T21                {display: none;} 
    .T21 .div100        {padding: 1% !important;}
    .T22                {display: none;}  
    .slides img         {width: auto; height: 100%; overflow: hidden;}
    
    .title              {font-size: 12pt; left: 0%; width: 90%; top: 0%; text-align: center;}
    .subtitle           {font-size: 9pt; left: 0%; width: 90%; top: 10%; text-align: center;}
    
    .mobile .div10      {width: 20%!important; cursor: pointer;}
    .mobile .div70      {width: 40%!important; cursor: pointer;}
    .mobile .div20      {width: 40%!important; cursor: pointer;}
    
    .photo_2 .clck      {width: 20% !important; height: auto;}
    .photo_3            {margin: 20px 20% 2px 20%; width: 60%;}
    .photo_3_hide       {display: none;}
    
    .fancybox img       {width: 100% !important; height: auto; float: left;}
    .div25 img          {height: auto; width: 100%;}
        
    .a_btn              {width: 99%; margin: 5px 0 20px 0; padding: 10px 0px 10px 0px;}
    .b_btn              {width: 100%; margin: 1px; padding: 10px 0px 10px 0px;}
    .c_btn              {margin: 1px; padding: 2px 0px 2px 0px;}  
      
    .back-to-top        {position: fixed; bottom: 0px!important; right: 0px!important; padding: 0px!important; margin: 0!important; display: none; z-index: 5000; opacity: 0.9;}
    .anchor             {cursor: pointer; z-index: 20000; width: 12%; height: 55px; opacity: 0.9; position: fixed; bottom: 2px; padding: 0px; margin: 0 49% 0 49%;  background-image: url('../../app_themes/admin/ico_down.png'); background-repeat: no-repeat; background-size: 100%;}
    .anchor:hover       {opacity: 1.0;}
    .social             {width: 80% !important; margin: 0 10% 5% 5%; text-align: center;}    
    #social .sm         {background: rgba(255,255,255, 0.2); margin: 2px; padding: 5px;}
    .back-to-top img    {width: 30px; height: auto;}
}

@media screen and (min-width: 601px) and (max-width: 768px) /* Tablet Portrait */
{
    html                {font-size: 98%; line-height: 1.6;}
    .holder             {margin: 0; padding: 5px !important;}   
   
    .header             {position: absolute; top: -2px; left: -2px; padding: 0; background-color: transparent; opacity: 1.0; height: 60px; width: 100%; z-index: 4000;}
    .header_scrl        {position: absolute; top: -2px; left: -2px; padding: 0; background-color: transparent; opacity: 1.0; height: 60px; width: 100%; z-index: 4000;}
      
    .navigation         {position: absolute; background-color: Transparent; width: 97%; top: 0px; left: 0px; z-index: 4200;}
    .navigation_scrl    {position: fixed; background-color: Transparent; width: 97%; top: 0px; left: 0px; z-index: 4200;}
    
    nav ul li a         {padding:1em 1.4em;}
    .btn-open:after     {color:white;}  
    
    .footer .T1 .C30    {padding: 10px 0 10px 0;}
    .footer             {text-align: center !important;}
    
    .T2                 {min-height: 640px;}
    .T3 .holder_tmp     {padding: 4px;}
    .T3 .holder         {margin: 0px;}
    .T3 .C33            {width: 100% !important;}
    .T3 .C31 .holder    {min-height: 5px;}
    .T3 .holder         {min-height: 5px;}
    .T3 .C40            {width: 100% !important;}
    .T3 .C41            {width: 100% !important;}
    .T4 .holder         {min-height: 50px;}
    .T4 .photo_1        {width: 30% !important; float: left!important;} 
    .T4 .holder_tmp     {padding: 4px;}
    .T4 .holder         {margin: 0px;}  
    .T4 .C38 .photo_1   {margin: 20px 3% 2px 3%; width: 26%; float: left; position: absolute; left: 0;}
    .T4 .C38            {padding-left: 35%; width: 65%!important;} 
    .T20 .holder_tmp    {padding: 4px;}
    .T20 .holder        {margin: 0px;}
    .T20                {background: rgba(255,255,255, 0.9); padding: 10% 0 10% 0;}
    .T20 .cnt_align     {margin-left: 17% !important;}
    .T20 .C32 .photo_3  {margin: 20px 3% 2px 3%; width: 26%;}
    .T21                {background: rgba(255,255,255, 0.4);}
    .T22                {display: none;}      
    .T21                {display: none;}    
    .T21 .div100        {padding: 1% !important;}
   
    .slides img         {width: auto; height: 100%; overflow: hidden;}
    
    .title              {font-size: 12pt; left: 0%; width: 90%; top: 0%; text-align: center;}
    .subtitle           {font-size: 9pt; left: 0%; width: 90%; top: 10%; text-align: center;}
    
    .mobile .div10      {width: 10%!important; cursor: pointer;}
    .mobile .div70      {width: 70%!important; cursor: pointer;}
    .mobile .div20      {width: 20%!important; cursor: pointer;}
    
    .photo_2 .clck      {width: 20% !important; height: auto;}
    .photo_3            {margin: 20px 20% 2px 20%; width: 60%;}
    .photo_3_hide       {display: none;}
    
    .div25 img          {height: 250px; width: 100%;}
    
    .a_btn              {width: 70%; margin: 5px 15% 20px 0%; padding: 10px 0px 10px 0px;}
    .b_btn              {width: 100%; margin: 1px; padding: 10px 0px 10px 0px;}
    .c_btn              {margin: 1px; padding: 2px 0px 2px 0px;}

    .back-to-top        {position: fixed; bottom: 0px!important; right: 0px!important; padding: 0px!important; margin: 0!important; display: none; z-index: 5000; opacity: 0.9;}
    .anchor             {cursor: pointer; z-index: 20000; width: 12%; height: 35px; opacity: 0.9; position: fixed; bottom: 2px; padding: 0px; margin: 0 49% 0 49%;  background-image: url('../../app_themes/admin/ico_down.png'); background-repeat: no-repeat; background-size: 100%;}
    .anchor:hover       {opacity: 1.0;}
    .social             {width: 80% !important; margin: 0 10% 5% 5%; text-align: center;}    
    #social .sm         {background: rgba(255,255,255, 0.2); margin: 2px; padding: 5px;}
    .back-to-top img    {width: 40px; height: auto;}
}

@media screen and (min-width: 768px) and (max-width: 1024px) /* Tablet Landscape */
{
    html                {font-size: 98%; line-height: 1.7;}
         
    .header             {position: absolute; top: 0px; left: 0px;padding: 0; opacity: 1.0; height: 60px; width: 100%; z-index: 4100;}
    .header_scrl        {position: fixed; top: 0px; left: 0px; padding: 0; opacity: 1.0; height: 60px; width: 100%; z-index: 4100;}
                   
    .navigation         {position: absolute; background-color: Transparent; width: 96%; top: 0px; left: 0px; z-index: 4200;}
    .navigation_scrl    {position: fixed; background-color: Transparent; width: 96% ; top: 0px; left: 0px; z-index: 4200;}
    
    nav ul li a         {padding:1em 0.7em;}
    .btn-open:after     {display: none !important;}
    
    .footer .T1 .C30    {padding: 10px 0 10px 0; text-align: center!important;}                     
    .footer .T1 .holder_tmp
                        {margin: 0 5% 0 5%;}
    
    .T2                 {min-height: 620px;}
    .T3 .holder_tmp     {padding: 4px;}
    .T3 .holder         {margin: 0px; padding:0 6% 0 6%;}
    .T3 .C31 .holder    {min-height: 5px;}
    .T3 .holder         {min-height: 5px;}
    .T3 .C40            {width: 100% !important;}
    .T3 .C41            {width: 100% !important;}
    .T4 .holder         {min-height: 50px;}
    .T4 .holder_tmp     {padding: 4px;}
    .T4 .holder         {margin: 0px;}
    .T20 .holder_tmp    {padding: 4px;}
    .T20 .holder        {margin: 0px;}
    .T20 .cnt_align     {margin-left: 17% !important;} 
    .T20                {background: rgba(255,255,255, 0.7); padding: 10% 0 10% 0;}
    .T21                {background: rgba(255,255,255, 0.4);}
    .T21                {display: none;}
    .T21 .div100        {padding: 1% !important;}
    .T22                {top: 60px; position: absolute;}
   
    .title              {font-size: 12pt !important; left: 0%; width: 90%; top: 0%; text-align: center;}
    .subtitle           {font-size: 9pt; left: 0%; width: 90%; top: 10%; text-align: center;}
    
    .mobile .div10      {width: 10%!important; cursor: pointer;}
    .mobile .div70      {width: 70%!important; cursor: pointer;}
    .mobile .div20      {width: 20%!important; cursor: pointer;}
    
    .photo_2 .clck      {width: 20% !important; height: auto;}    
    .photo_3            {margin: 20px 5% 2px 25%; width: 70%;}
    .photo_3_hide       {margin: 20px 5% 2px 25%; width: 70%;}
    
    .div25 img          {height: 250px; width: 100%;}
    
    .a_btn              {width: 70%; margin: 5px 15% 20px 0%; padding: 10px 0px 10px 0px;}
    .b_btn              {width: 100%; margin: 1px; padding: 10px 0px 10px 0px;}
    .c_btn              {margin: 1px; padding: 2px 0px 2px 0px;}

    .back-to-top        {position: fixed; bottom: 0px!important; right: 0px!important; padding: 0px!important; margin: 0!important; display: none; z-index: 5000; opacity: 0.9;}
    .anchor             {cursor: pointer; z-index: 20000; width: 12%; height: 35px; opacity: 0.9; position: fixed; bottom: 2px; padding: 0px; margin: 0 49% 0 49%;  background-image: url('../../app_themes/admin/ico_down.png'); background-repeat: no-repeat; background-size: 100%;}
    .anchor:hover       {opacity: 1.0;}
    .social             {width: 80% !important; margin: 0 10% 5% 5%; text-align: center;}
    #social .sm         {background: rgba(255,255,255, 0.2); margin: 2px; padding: 5px;}    
    .back-to-top img    {width: 50px; height: auto;}
    .email .logo img    {width: auto; height: auto; border: none;}
}

@media screen and (min-width: 1025px) /* Website */
{   
    html                {font-size: 98%; line-height: 1.7;} 
     
    .header             {position: absolute; top: 0; left: 0px;padding: 0; opacity: 1.0; height: 60px; width: 100%; z-index: 4100;}
    .header_scrl        {position: fixed; top: 0; left: 0px; padding: 0; opacity: 1.0; height: 60px; width: 100%; z-index: 4100;}
       
    .navigation         {position: absolute; background-color: Transparent; width: 89%; top: 0px; left: 0px; z-index: 4200;}
    .navigation_scrl    {position: fixed; background-color: Transparent; width: 89%; top: 0px; left: 0px; z-index: 4200;}
    
    nav ul li a         {padding:1em 1.4em;}
    .btn-open:after     {display: none !important;}  
    
    .footer .T1 .C30    {padding: 10px 0 10px 0; text-align: center!important;}                     
    .footer .T1 .holder_tmp
                        {margin: 0 15% 0 15%;}
    
    .T2                 {min-height: 620px;}
    .T3 .holder_tmp     {margin: 5% 15% 5% 15%;}
    .T3 .holder         {margin: 5px;}
    .T3 .C31 .holder    {min-height: 410px;}
    .T3 .holder         {min-height: 230px;}
    .T4 .holder         {min-height: 250px;}
    .T4 .holder_tmp     {margin: 5% 15% 5% 15%;}
    .T4 .holder         {margin: 5px;}
    .T20 .holder_tmp    {margin: 5% 15% 5% 15%;}
    .T20 .holder        {margin: 5px;}
    .T20 .cnt_align     {margin-left: 25% !important;}
    .T20                {background: rgba(255,255,255, 0.7); padding: 5% 0 5% 0;}
    .T20 .C33           {}
    .T21                {min-height: 200px;}
    .T21 .photo_2       {margin: 0px 5px 10px 5px !important; width: auto; height: 170px !important; float: left; transition: all .2s ease-in-out;}
    .T21 .photo_2:hover {transform: scale(1.1);}   
    .T21                {background: rgba(255,255,255, 0.4);}
    .T21 .holder_tmp    {margin: 10px 15% 10px 15%;}
    .T21 .holder        {margin: 5px;}
    .T21 .div100        {padding: 0 15% 0 15% !important;}
       
    .title              {font-size: 4em; left: 30%; width: 70%; top: 35%; text-align: left;}
    .subtitle           {font-size: 9pt; left: 30%; width: 40%; top: 55%; text-align: left;}
    
    .div25 img          {height: 250px; width: 100%;}
   
    .a_btn              {width: 250px; margin: 40px 0 20px 0; padding: 10px;}
    .b_btn              {width: 100%; margin: 1px; padding: 10px 0px 10px 0px;}
    .c_btn              {margin: 1px; padding: 2px 0px 2px 0px;}

    .anchor             {cursor: pointer; z-index: 20000; width: 2%; height: 50px; opacity: 0.3; position: fixed; bottom: 20px; padding: 1em; margin: 0 49% 0 49%; background-image: url('../../app_themes/admin/ico_down.png'); background-repeat: no-repeat; background-size: 100%;}
    .anchor:hover       {opacity: 1.0;}
    .back-to-top img    {width: 50px; height: auto;}
    .email .logo img    {width: auto; height: auto; border: none;}
}  
/* ------------------------------- end screen styles */ 

/* any mobile device */
/* -------------------------------------- */
@media screen and (min-width: 10px) and (max-width: 768px) /* Phone and Tablet Sml */
{
    /* HTML Styles */ 
        
    /* Basic Page Styles */
    .div10, .div20, .div25, .div30, .div33, .div40, .div50, .div60, .div70, .div80, .div90, .div100, .divAuto, .T1, .T2, .T3, .T4, .T5, .T6, .T7, .T8, .T9, .T10, .T11, .T12, .T13, .T14, .T15, .T16, .T17, .T18, .T19, .C30, .C31, .C32, .C33, .C34, .C35, .C36, .C37, .C38, .C39 
                            {width: 100%;}
    
    .l                      {text-align: left;}
    .c                      {text-align: left;}
    .r                      {text-align: left;}
                          
    /* Form Values */
    .frm_100                {width: 94%; float: left; margin: 10px 0.5% 10px 0.5% !important;}
    .frm_50                 {width: 94%; float: left; margin: 10px 0.5% 10px 0.5% !important;}
    
    /* Overlay Navigation */
    .wrap ul.wrap-nav>li    {width:100%;padding:20px 0;border-bottom:1px solid #575757;}
	.wrap ul.wrap-nav       {padding:30px 0px 0px;}
	nav ul                  {opacity:0;visibility:hidden;}
	.social_mnu             {color:#c1c1c1;font-size:25px;padding:15px 0;}
	.social-icon            {width:100%;height:50px;background:#fff;color:#333;display:block;margin:5px 0;}
	
	/* General */
	.email .logo img        {width: 70%; height: auto; border: none;}    
    .ldn_bcgrd              {text-align: center;}
    .ldn_bcgrd h2           {text-align: center;}
    .ldn_bcgrd .div20       {width: auto !important; position: absolute; top: 25px; right: 25px;}
    .load_content_page      {padding-top: 40%;}
    .img_loading            {width: 100%;}
    .dstsi                  {padding-top: 17%;}
    #err_message            {top: 42%; font-size: 10pt;}
    
    /* Caption Styles */
	.cap {padding: 10px 10px 100px 10px;}
	.cap li {width: 100%; min-width: 300px;}
}
/* -------------------------------------- */