/*----------------------------------------------------------
/* Webbu Tile CSS v.1
/*
-----------------------------------------------------------*/

/* General tile settings */
.videotile{width:100%; height:100%; margin:0px; border:0px;}
.maptile{width:100%; height:100%; margin:0px; border:0px;}
.tile{ display:block;  float:left;  background-color:#525252;  width:150px;  height:150px;  cursor:pointer;  box-shadow:inset 0px 0px 1px #FFC;  text-decoration:none;  color:#fff;  overflow:hidden;  position:relative;  font-weight:300;  font-size:11pt;  letter-spacing:0.02em;  line-height:20px;  margin:0 10px 10px 0;  overflow:hidden}
.tile:hover{ outline:3px #3a3a3a solid}
.tile .boxContent{ width:100%;  height:100%;  padding:0;  padding-bottom:30px;  vertical-align:top;  padding:10px 15px;  overflow:hidden;  text-overflow:ellipsis;  position:relative;  font-weight:400;  font-size:9pt;  color:#000;  color:#fff;  line-height:16px}
.tile .boxContent:hover{ color:rgba(0,0,0,0.8)}
.tile .boxContent:active{ color:rgba(0,0,0,0.4)}
.tile .boxContent:hover{ color:#fff}
.tile.icon .boxContent{ padding:0}
.tile.icon .boxContent img{ position:absolute;  width:64px;  height:64px;  top:50%;  left:50%;  margin-left:-32px;  margin-top:-32px}
.tile.image .boxContent, 
.tile.islider .boxContent{ padding:0}
.tile.image .boxContent img, 
.tile.islider .boxContent img{ width:100%;  height:auto;  min-height:100%;  max-width:100%}
.tile .tilename{ position:absolute;  bottom:0;  left:0;  right:0;  min-height:22px;  *zoom:1}
.tile .tilename:before, 
.tile .tilename:after{ display:table;  content:""}
.tile .tilename:after{ clear:both}
.tile .tilename .name{ position:absolute;  bottom:0;  left:0;  margin-bottom:5px;  margin-left:15px;  font-weight:400;  font-size:9pt;  color:#fff}
.tile .tilename .name:hover{ color:#fff}
.tile .tilename .icon{ margin:5px 15px;  width:32px;  height:32px}
.tile .tilename .icon img{ width:100%;  height:100%}
.tile .tilename .text{ position:absolute;  left:60px;  top:5px;  right:50px;  font-weight:400;  font-size:9pt;  color:#000;  color:#fff;  line-height:14px}
.tile .tilename .text:hover{ color:rgba(0,0,0,0.8)}
.tile .tilename .text:active{ color:rgba(0,0,0,0.4)}
.tile .tilename .text:hover{ color:#fff}

/* Tile responsive setting. */
@media (min-width:1025px){ 
 
 .wrapper{width:1024px; margin-left:auto; margin-right:auto}
}
 .resimgicon {max-width:68px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 3em; margin-top: 2em;}
 .tile{ width:157px;  height:157px}
 .tile.t2x{ width:324px}
 .tile.t2x .boxContent{ width:324px}
 .tile.t3x{ width:491px}
 .tile.t3x .boxContent{ width:491px}
 .tile.t4x{ width:658px}
 .tile.t4x .boxContent{ width:658px}
 .tile.t2x-v{ height:324px}
 .tile.t2x-v .boxContent{ height:284px}
 .tile.t3x-v{ height:491px}
 .tile.t3x-v .boxContent{ height:451px}
 .tile.t4x-v{ height:658px}
 .tile.t4x-v .boxContent{ height:658px}
 .tile.t2x-b{ height:324px; width:324px}
 .tile.t2x-b .boxContent{ height:324px; width:324px}
 .tile.t3x-b{ height:491px; width:491px}
 .tile.t3x-b .boxContent{ height:491px; width:491px}
 .tile.t3x-t2x-b{ width:503px; height:332px}
 .tile.t3x-t2x-b .boxContent{ width:491px; height:332px}
 .tile.t4x-b{ height:658px; width:658px}
 .tile.t4x-b .boxContent{ height:658px; width:658px}
 .tile.t4x-t2x-b{ height:658px; width:324px}
 .tile.t4x-t2x-b .boxContent{ height:658px; width:324px}
 .tile.t4x-t2x22-b{ height:324px; width:658px}
 .tile.t4x-t2x22-b .boxContent{ height:324px; width:658px}
 .tile.t4x-t1x-b{ height:157px; width:658px}
 .tile.t4x-t1x-b .boxContent{ height:157px; width:658px}
 
 .tile .tilename { min-height: 30px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{ font-size:72px;  margin-left:35px;  margin-top:27px;  display:inline-block;  text-decoration:inherit}
 .tile .tilename .name{ margin-left:10px; margin-bottom:8px; font-size:12pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:5px; margin-right:5px; margin-bottom:3px; margin-left:10px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}

@media (max-width:1024px){ 
 .resimgicon {max-width:68px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 3.28em; margin-top: 2.5em;}
 .tile{ width:159px;  height:159px}
 .tile.t2x{ width:328px}
 .tile.t2x .boxContent{ width:328px}
 .tile.t3x{ width:497px}
 .tile.t3x .boxContent{ width:497px}
 .tile.t4x{ width:666px}
 .tile.t4x .boxContent{ width:666px}
 .tile.t2x-v{ height:328px}
 .tile.t2x-v .boxContent{ height:288px}
 .tile.t3x-v{ height:497px}
 .tile.t3x-v .boxContent{ height:457px}
 .tile.t4x-v{ height:666px}
 .tile.t4x-v .boxContent{ height:626px}
 .tile.t2x-b{ height:328px; width:328px}
 .tile.t2x-b .boxContent{ height:328px; width:328px}
 .tile.t3x-b{ height:497px; width:497px}
 .tile.t3x-b .boxContent{ height:497px; width:497px}
 .tile.t3x-t2x-b{ width:497px; height:328px}
 .tile.t3x-t2x-b .boxContent{ width:497px; height:328px}
 .tile.t4x-b{ height:666px; width:666px}
 .tile.t4x-b .boxContent{ height:666px; width:666px}
 .tile.t4x-t2x-b{ height:666px; width:328px}
 .tile.t4x-t2x-b .boxContent{ height:666px; width:328px}
 .tile.t4x-t2x22-b{ height:328px; width:666px}
 .tile.t4x-t2x22-b .boxContent{ height:328px; width:666px}
 .tile.t4x-t1x-b{ height:159px; width:666px}
 .tile.t4x-t1x-b .boxContent{ height:159px; width:666px}
 
 .tile .tilename { min-height: 30px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{ font-size:72px;  margin-left:37px;  margin-top:27px;  display:inline-block;  text-decoration:inherit}
 .tile .tilename .name{ margin-left:10px; margin-bottom:5px; font-size:12pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:12px; margin-right:5px; margin-bottom:5px; margin-left:5px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}

@media (max-width:980px){ 
 .resimgicon {max-width:72px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 4em; margin-top: 2.5em;}
 .tile{ width:180px;  height:180px}
 .tile.t2x{ width:370px}
 .tile.t2x .boxContent{ width:370px}
 .tile.t3x{ width:560px}
 .tile.t3x .boxContent{ width:560px}
 .tile.t4x{ width:750px}
 .tile.t4x .boxContent{ width:750px}
 .tile.t2x-v{ height:370px}
 .tile.t2x-v .boxContent{ height:330px}
 .tile.t3x-v{ height:560px}
 .tile.t3x-v .boxContent{ height:520px}
 .tile.t4x-v{ height:750px}
 .tile.t4x-v .boxContent{ height:710px}
 .tile.t2x-b{ height:370px; width:370px}
 .tile.t2x-b .boxContent{ height:370px; width:370px}
 .tile.t3x-b{ height:560px; width:560px}
 .tile.t3x-b .boxContent{ height:560px; width:560px}
 .tile.t3x-t2x-b{ width:560px; height:370px}
 .tile.t3x-t2x-b .boxContent{ width:560px; height:370px}
 .tile.t4x-b{ height:750px; width:750px}
 .tile.t4x-b .boxContent{ height:750px; width:750px}
 .tile.t4x-t2x-b{ height:750px; width:370px}
 .tile.t4x-t2x-b .boxContent{ height:750px; width:370px}
 .tile.t4x-t2x22-b{ height:370px; width:750px}
 .tile.t4x-t2x22-b .boxContent{ height:370px; width:750px}
 .tile.t4x-t1x-b{ height:180px; width:750px}
 .tile.t4x-t1x-b .boxContent{ height:180px; width:750px}
 
 .tile .tilename { min-height: 30px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{ font-size:72px;  margin-left:48px;  margin-top:27px;  display:inline-block;  text-decoration:inherit}
 .tile .tilename .name{ margin-left:10px; margin-bottom:5px; font-size:12pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:12px; margin-right:5px; margin-bottom:5px; margin-left:5px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}


@media (max-width:962px){ 
.resimgicon{ max-width:70px;  height:auto}
.tile .boxContent .resimgicon{ margin-left:3.6em;  margin-top:2.5em}
.tile{ width:150px;  height:150px}
.tile.t2x{ width:310px}
.tile.t2x .boxContent{ width:310px}
.tile.t3x{ width:470px}
.tile.t3x .boxContent{ width:470px}
.tile.t4x{ width:630px}
.tile.t4x .boxContent{ width:630px}
.tile.t2x-v{ height:310px}
.tile.t2x-v .boxContent{ height:310px}
.tile.t3x-v{ height:470px}
.tile.t3x-v .boxContent{ height:470px}
.tile.t4x-v{ height:630px}
.tile.t4x-v .boxContent{ height:630px}
.tile.t2x-b{ height:310px;  width:310px}
.tile.t2x-b .boxContent{ height:310px;  width:310px}
.tile.t3x-b{ height:470px;  width:470px}
.tile.t3x-b .boxContent{ height:470px;  width:470px}
.tile.t3x-t2x-b{ height:470px;  width:310px}
.tile.t3x-t2x-b .boxContent{ height:470px;  width:310px}
.tile.t4x-b{ height:630px;  width:630px}
.tile.t4x-b .boxContent{ height:630px;  width:630px}
.tile.t4x-t2x-b{ height:630px;  width:310px}
.tile.t4x-t2x-b .boxContent{ height:630px;  width:310px}
.tile.t4x-t2x22-b{ height:310px;  width:630px}
.tile.t4x-t2x22-b .boxContent{ height:310px;  width:630px}
.tile.t4x-t1x-b{ height:150px;  width:630px}
.tile.t4x-t1x-b .boxContent{ height:150px;  width:630px}
 
 .tile .tilename { min-height: 30px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{ font-size:72px;  margin-left:30px;  margin-top:27px; display:inline-block;  text-decoration:inherit}
 .tile .tilename .name{ margin-left:10px; margin-bottom:5px; font-size:12pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:12px; margin-right:5px; margin-bottom:5px; margin-left:5px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
 .tile-group{ max-width:400px;  float:none}
}

/* For ipad landscape */
@media (max-width:768px){ 
 .resimgicon {max-width:70px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 3.85em; margin-top: 2.5em;}
 .tile{ width:177px;  height:177px}
 .tile.t2x{ width:364px}
 .tile.t2x .boxContent{ width:364px}
 .tile.t3x{ width:551px}
 .tile.t3x .boxContent{ width:551px}
 .tile.t4x{ width:738px}
 .tile.t4x .boxContent{ width:738px}
 .tile.t2x-v{ height:364px}
 .tile.t2x-v .boxContent{ height:278px}
 .tile.t3x-v{ height:551px}
 .tile.t3x-v .boxContent{ height:442px}
 .tile.t4x-v{ height:738px}
 .tile.t4x-v .boxContent{ height:738px}
 .tile.t2x-b{ height:364px; width:364px}
 .tile.t2x-b .boxContent{ height:364px; width:364px}
 .tile.t3x-b{ height:551px; width:551px}
 .tile.t3x-b .boxContent{ height:551px; width:551px}
 .tile.t3x-t2x-b{ width:551px; height:364px}
 .tile.t3x-t2x-b .boxContent{ width:551px; height:364px}
 .tile.t4x-b{ height:738px; width:738px}
 .tile.t4x-b .boxContent{ height:738px; width:738px}
 .tile.t4x-t2x-b{ height:738px; width:364px}
 .tile.t4x-t2x-b .boxContent{ height:738px; width:364px}
 .tile.t4x-t2x22-b{ height:364px; width:738px}
 .tile.t4x-t2x22-b .boxContent{ height:364px; width:738px}
 .tile.t4x-t1x-b{ height:177px; width:738px}
 .tile.t4x-t1x-b .boxContent{ height:177px; width:738px}
 
 .tile .tilename { min-height: 30px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{ font-size:72px;  margin-left:47px;  margin-top:27px; display:inline-block;  text-decoration:inherit}
 .tile .tilename .name{ margin-left:10px; margin-bottom:5px; font-size:12pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:12px; margin-right:5px; margin-bottom:5px; margin-left:5px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
 .tile-group{ max-width:400px;  float:none}
}



/*For iphone 6 + landscape*/
@media (max-width:736px){  
  .resimgicon{ max-width:70px;  height:auto}
.tile .boxContent .resimgicon{ margin-left:3.6em;  margin-top:2.5em}
.tile{ width:110px;  height:110px}
.tile.t2x{ width:230px}
.tile.t2x .boxContent{ width:230px}
.tile.t3x{ width:350px}
.tile.t3x .boxContent{ width:350px}
.tile.t4x{ width:470px}
.tile.t4x .boxContent{ width:470px}
.tile.t2x-v{ height:230px}
.tile.t2x-v .boxContent{ height:230px}
.tile.t3x-v{ height:350px}
.tile.t3x-v .boxContent{ height:350px}
.tile.t4x-v{ height:470px}
.tile.t4x-v .boxContent{ height:470px}
.tile.t2x-b{ height:230px;  width:230px}
.tile.t2x-b .boxContent{ height:230px;  width:230px}
.tile.t3x-b{ height:350px;  width:350px}
.tile.t3x-b .boxContent{ height:350px;  width:350px}
.tile.t3x-t2x-b{ height:350px;  width:230px}
.tile.t3x-t2x-b .boxContent{ height:350px;  width:230px}
.tile.t4x-b{ height:470px;  width:470px}
.tile.t4x-b .boxContent{ height:470px;  width:470px}
.tile.t4x-t2x-b{ height:470px;  width:230px}
.tile.t4x-t2x-b .boxContent{ height:470px;  width:230px}
.tile.t4x-t2x22-b{ height:230px;  width:470px}
.tile.t4x-t2x22-b .boxContent{ height:230px;  width:470px}
.tile.t4x-t1x-b{ height:110px;  width:470px}
.tile.t4x-t1x-b .boxContent{ height:110px;  width:470px}
.tile .tilename{ min-height:30px}
.tile .boxContent{ padding:5px 10px}
.tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
.tile.iconmain .boxContent i{ font-size:45px;  margin-left:25px;  margin-top:17px;  display:inline-block;  text-decoration:inherit}
.tile .tilename .name{ margin-left:9px;  margin-bottom:3px;  font-size:11pt}
.tile .tilename .icon{ width:12px;  height:12px;  margin-top:12px;  margin-right:5px;  margin-bottom:5px;  margin-left:5px}
.tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
.tile-group{ max-width:400px;  float:none}
}


@media (max-width:720px){ 
 .resimgicon {max-width:70px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 3.6em; margin-top: 2.5em;}
 .tile{ width:165px;  height:165px}
 .tile.t2x{ width:340px}
 .tile.t2x .boxContent{ width:340px}
 .tile.t3x{ width:515px}
 .tile.t3x .boxContent{ width:515px}
 .tile.t4x{ width:690px}
 .tile.t4x .boxContent{ width:690px}
 .tile.t2x-v{ height:340px}
 .tile.t2x-v .boxContent{ height:300px}
 .tile.t3x-v{ height:515px}
 .tile.t3x-v .boxContent{ height:475px}
 .tile.t4x-v{ height:690px}
 .tile.t4x-v .boxContent{ height:650px}
 .tile.t2x-b{ height:340px; width:340px}
 .tile.t2x-b .boxContent{ height:340px; width:340px}
 .tile.t3x-b{ height:515px; width:515px}
 .tile.t3x-b .boxContent{ height:515px; width:515px}
 .tile.t3x-t2x-b{ width:515px; height:340px}
 .tile.t3x-t2x-b .boxContent{ width:515px; height:340px}
 .tile.t4x-b{ height:690px; width:690px}
 .tile.t4x-b .boxContent{ height:690px; width:690px}
 .tile.t4x-t2x-b{ height:690px; width:340px}
 .tile.t4x-t2x-b .boxContent{ height:690px; width:340px}
 .tile.t4x-t2x22-b{ height:340px; width:690px}
 .tile.t4x-t2x22-b .boxContent{ height:340px; width:690px}
 .tile.t4x-t1x-b{ height:165px; width:690px}
 .tile.t4x-t1x-b .boxContent{ height:165px; width:690px}
 
 .tile .tilename { min-height: 30px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{ font-size:62px;  margin-left:47px;  margin-top:27px; display:inline-block;  text-decoration:inherit}
 .tile .tilename .name{ margin-left:10px; margin-bottom:5px; font-size:12pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:12px; margin-right:5px; margin-bottom:5px; margin-left:5px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
 .tile-group{ max-width:400px;  float:none}
}


/*iphone 6 landscape*/

@media (max-width:667px){  .resimgicon{ max-width:70px;  height:auto}
.tile .boxContent .resimgicon{ margin-left:3.6em;  margin-top:2.5em}
.tile{ width:155px;  height:155px}
.tile.t2x{ width:320px}
.tile.t2x .boxContent{ width:320px}
.tile.t3x{ width:485px}
.tile.t3x .boxContent{ width:485px}
.tile.t4x{ width:650px}
.tile.t4x .boxContent{ width:650px}
.tile.t2x-v{ height:320px}
.tile.t2x-v .boxContent{ height:320px}
.tile.t3x-v{ height:485px}
.tile.t3x-v .boxContent{ height:485px}
.tile.t4x-v{ height:650px}
.tile.t4x-v .boxContent{ height:650px}
.tile.t2x-b{ height:320px;  width:320px}
.tile.t2x-b .boxContent{ height:320px;  width:320px}
.tile.t3x-b{ height:485px;  width:485px}
.tile.t3x-b .boxContent{ height:485px;  width:485px}
.tile.t3x-t2x-b{ height:485px;  width:320px}
.tile.t3x-t2x-b .boxContent{ height:485px;  width:320px}
.tile.t4x-b{ height:650px;  width:650px}
.tile.t4x-b .boxContent{ height:650px;  width:650px}
.tile.t4x-t2x-b{ height:650px;  width:320px}
.tile.t4x-t2x-b .boxContent{ height:650px;  width:320px}
.tile.t4x-t2x22-b{ height:320px;  width:650px}
.tile.t4x-t2x22-b .boxContent{ height:320px;  width:650px}
.tile.t4x-t1x-b{ height:155px;  width:650px}
.tile.t4x-t1x-b .boxContent{ height:155px;  width:650px}
.tile .tilename{ min-height:30px}
.tile .boxContent{ padding:5px 10px}
.tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
.tile.iconmain .boxContent i{ font-size:67.5px;  margin-left:47.5px;  margin-top:22.5px;  display:inline-block;  text-decoration:inherit}
.tile .tilename .name{ margin-left:10px;  margin-bottom:5px;  font-size:12pt}
.tile .tilename .icon{ width:12px;  height:12px;  margin-top:12px;  margin-right:5px;  margin-bottom:5px;  margin-left:5px}
.tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
.tile-group{ max-width:400px;  float:none}
}



/* For Samsung galaxy s3 landscape */
@media (max-width:640px){ 
 .resimgicon {max-width:70px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 2.7em; margin-top: 2em;}
 .tile{ width:147px;  height:147px}
 .tile.t2x{ width:304px}
 .tile.t2x .boxContent{ width:304px}
 .tile.t3x{ width:461px}
 .tile.t3x .boxContent{ width:461px}
 .tile.t4x{ width:618px}
 .tile.t4x .boxContent{ width:618px}
 .tile.t2x-v{ height:304px}
 .tile.t2x-v .boxContent{ height:264px}
 .tile.t3x-v{ height:461px}
 .tile.t3x-v .boxContent{ height:421px}
 .tile.t4x-v{ height:618px}
 .tile.t4x-v .boxContent{ height:578px}
 .tile.t2x-b{ height:304px; width:304px}
 .tile.t2x-b .boxContent{ height:304px; width:304px}
 .tile.t3x-b{ height:461px; width:461px}
 .tile.t3x-b .boxContent{ height:461px; width:461px}
 .tile.t3x-t2x-b{ width:461px; height:304px}
 .tile.t3x-t2x-b .boxContent{ width:461px; height:304px}
 .tile.t4x-b{ height:618px; width:618px}
 .tile.t4x-b .boxContent{ height:618px; width:618px}
 .tile.t4x-t2x-b{ height:618px; width:304px}
 .tile.t4x-t2x-b .boxContent{ height:618px; width:304px}
 .tile.t4x-t2x22-b{ height:304px; width:618px}
 .tile.t4x-t2x22-b .boxContent{ height:304px; width:618px}
 .tile.t4x-t1x-b{ height:147px; width:618px}
 .tile.t4x-t1x-b .boxContent{ height:147px; width:618px}
 
 .tile .tilename { min-height: 30px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{ font-size:62px;  margin-left:30px;  margin-top:27px; display:inline-block;  text-decoration:inherit}
 .tile .tilename .name{ margin-left:10px; margin-bottom:5px; font-size:12pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:12px; margin-right:5px; margin-bottom:5px; margin-left:5px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
 .tile-group{ max-width:400px;  float:none}
}


@media (max-width:601px){ 
 .resimgicon{ max-width:35px;  height:auto}
.tile .boxContent .resimgicon{ margin-left:14px;  margin-top:14px}
.tile{ width:89px;  height:89px}
.tile.t2x{ width:188px}
.tile.t2x .boxContent{ width:188px}
.tile.t3x{ width:287px}
.tile.t3x .boxContent{ width:287px}.tile.t4x{ width:386px}.tile.t4x .boxContent{ width:386px}.tile.t2x-v{ height:188px}
.tile.t2x-v .boxContent{ height:188px}
.tile.t3x-v{ height:287px}
.tile.t3x-v .boxContent{ height:287px}
.tile.t4x-v{ height:386px}
.tile.t4x-v .boxContent{ height:386px}
.tile.t2x-b{ height:188px;  width:188px}
.tile.t2x-b .boxContent{ height:188px;  width:188px}
.tile.t3x-b{ height:287px;  width:287px}
.tile.t3x-b .boxContent{ height:287px;  width:287px}
.tile.t3x-t2x-b{ height:287px;  width:188px}
.tile.t3x-t2x-b .boxContent{ height:287px;  width:188px}
.tile.t4x-b{ height:386px;  width:386px}
.tile.t4x-b .boxContent{ height:386px;  width:386px}
.tile.t4x-t2x-b{ height:386px;  width:188px}
.tile.t4x-t2x-b .boxContent{ height:386px;  width:188px}
.tile.t4x-t2x22-b{ height:188px;  width:386px}
.tile.t4x-t2x22-b .boxContent{ height:188px;  width:386px}
.tile.t4x-t1x-b{ height:89px;  width:386px}
.tile.t4x-t1x-b .boxContent{ height:89px;  width:386px}
.tile .tilename{ min-height:30px}
.tile .boxContent{ padding:5px 10px}
.tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
.tile.iconmain .boxContent i{ font-size:34.5px;  margin-left:14.5px;  margin-top:14.5px;  display:inline-block;  text-decoration:inherit}
.tile .tilename .name{ margin-left:8px;  margin-bottom:3px;  font-size:10pt;line-height: 10pt;}
.tile .tilename .icon{ width:12px;  height:12px;  margin-top:12px;  margin-right:5px;  margin-bottom:5px;  margin-left:5px}
.tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
.tile-group{ max-width:400px;  float:none}
}


@media (max-width:598px){ 
 .resimgicon {max-width:42px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 1.26em; margin-top: 0.6em;}
 .tile{ width:88px;  height:88px}
 .tile.t2x{ width:186px}
 .tile.t2x .boxContent{ width:186px}
 .tile.t3x{ width:284px}
 .tile.t3x .boxContent{ width:284px}
 .tile.t4x{ width:382px}
 .tile.t4x .boxContent{ width:382px}
 .tile.t2x-v{ height:186px}
 .tile.t2x-v .boxContent{ height:146px}
 .tile.t3x-v{ height:284px}
 .tile.t3x-v .boxContent{ height:244px}
 .tile.t4x-v{ height:382px}
 .tile.t4x-v .boxContent{ height:342px}
 .tile.t2x-b{ height:186px; width:186px}
 .tile.t2x-b .boxContent{ height:186px; width:186px}
 .tile.t3x-b{ height:284px; width:284px}
 .tile.t3x-b .boxContent{ height:284px; width:284px}
 .tile.t3x-t2x-b{ width:284px; height:186px}
 .tile.t3x-t2x-b .boxContent{ width:284px; height:186px}
 .tile.t4x-b{ height:382px; width:382px}
 .tile.t4x-b .boxContent{ height:382px; width:382px}
 .tile.t4x-t2x-b{ height:382px; width:186px}
 .tile.t4x-t2x-b .boxContent{ height:382px; width:186px}
 .tile.t4x-t2x22-b{ height:186px; width:382px}
 .tile.t4x-t2x22-b .boxContent{ height:186px; width:382px}
 .tile.t4x-t1x-b{ height:88px; width:382px}
 .tile.t4x-t1x-b .boxContent{ height:88px; width:382px}
 
 .tile .tilename { min-height: 20px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{font-size:36px; margin-left:.46em; margin-top:13px; display:inline-block; text-decoration:inherit}
 .tile .tilename .name{ margin-left:5px; margin-bottom:5px; font-size:8pt;line-height: 1;}
 .tile .tilename .icon{width:12px; height:12px; margin-top:2px; margin-right:5px; margin-bottom:5px; margin-left:5px; font-size:12px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}

@media (max-width:592px){
 .resimgicon {max-width:42px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 1.25em; margin-top: 0.6em;}
 .tile{ width:87px;  height:87px}
 .tile.t2x{ width:184px}
 .tile.t2x .boxContent{ width:184px}
 .tile.t3x{ width:281px}
 .tile.t3x .boxContent{ width:281px}
 .tile.t4x{ width:378px}
 .tile.t4x .boxContent{ width:378px}
 .tile.t2x-v{ height:184px}
 .tile.t2x-v .boxContent{ height:144px}
 .tile.t3x-v{ height:281px}
 .tile.t3x-v .boxContent{ height:241px}
 .tile.t4x-v{ height:378px}
 .tile.t4x-v .boxContent{ height:348px}
 .tile.t2x-b{ height:184px; width:184px}
 .tile.t2x-b .boxContent{ height:184px; width:184px}
 .tile.t3x-b{ height:281px; width:281px}
 .tile.t3x-b .boxContent{ height:281px; width:281px}
 .tile.t3x-t2x-b{ width:281px; height:184px}
 .tile.t3x-t2x-b .boxContent{ width:281px; height:184px}
 .tile.t4x-b{ height:378px; width:378px}
 .tile.t4x-b .boxContent{ height:378px; width:378px}
 .tile.t4x-t2x-b{ height:378px; width:184px}
 .tile.t4x-t2x-b .boxContent{ height:378px; width:184px}
 .tile.t4x-t2x22-b{ height:184px; width:378px}
 .tile.t4x-t2x22-b .boxContent{ height:184px; width:378px}
 .tile.t4x-t1x-b{ height:87px; width:378px}
 .tile.t4x-t1x-b .boxContent{ height:87px; width:378px}
 
 .tile .tilename { min-height: 20px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{font-size:36px; margin-left:.48em; margin-top:13px; display:inline-block; text-decoration:inherit}
 .tile .tilename .name{ margin-left:5px; margin-bottom:3px; font-size:7pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:2px; margin-right:5px; margin-bottom:5px; margin-left:5px; font-size:12px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}
/* For iphone 5 landscape */
@media (max-width:568px){ 
 .resimgicon {max-width:42px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: .99em; margin-top: 0.6em;}
 .tile{ width:83px;  height:83px}
 .tile.t2x{ width:176px}
 .tile.t2x .boxContent{ width:176px}
 .tile.t3x{ width:269px}
 .tile.t3x .boxContent{ width:269px}
 .tile.t4x{ width:362px}
 .tile.t4x .boxContent{ width:362px}
 .tile.t2x-v{ height:176px}
 .tile.t2x-v .boxContent{ height:136px}
 .tile.t3x-v{ height:269px}
 .tile.t3x-v .boxContent{ height:229px}
 .tile.t4x-v{ height:362px}
 .tile.t4x-v .boxContent{ height:342px}
 .tile.t2x-b{ height:176px; width:176px}
 .tile.t2x-b .boxContent{ height:176px; width:176px}
 .tile.t3x-b{ height:269px; width:269px}
 .tile.t3x-b .boxContent{ height:269px; width:269px}
 .tile.t3x-t2x-b{ width:269px; height:176px}
 .tile.t3x-t2x-b .boxContent{ width:269px; height:176px}
 .tile.t4x-b{ height:362px; width:362px}
 .tile.t4x-b .boxContent{ height:362px; width:362px}
 .tile.t4x-t2x-b{ height:362px; width:176px}
 .tile.t4x-t2x-b .boxContent{ height:362px; width:176px}
 .tile.t4x-t2x22-b{ height:176px; width:362px}
 .tile.t4x-t2x22-b .boxContent{ height:176px; width:362px}
 .tile.t4x-t1x-b{ height:83px; width:362px}
 .tile.t4x-t1x-b .boxContent{ height:83px; width:362px}
 
 .tile .tilename { min-height: 25px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{ font-size:36px;  margin-left:.46em;  margin-top:13px; display:inline-block;  text-decoration:inherit}
 .tile .tilename .name{ margin-left:5px; margin-bottom:3px; font-size:9pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:12px; margin-right:5px; margin-bottom:5px; margin-left:5px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
 .tile-group{ max-width:400px;  float:none}
}

/* galaxy s2 landscape */
@media (max-width:533px){ 
 .resimgicon {max-width:44px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: .74em; margin-top: 0.6em;}
 .tile{ width:77px;  height:77px}
 .tile.t2x{ width:164px}
 .tile.t2x .boxContent{ width:164px}
 .tile.t3x{ width:251px}
 .tile.t3x .boxContent{ width:251px}
 .tile.t4x{ width:338px}
 .tile.t4x .boxContent{ width:338px}
 .tile.t2x-v{ height:164px}
 .tile.t2x-v .boxContent{ height:124px}
 .tile.t3x-v{ height:251px}
 .tile.t3x-v .boxContent{ height:211px}
 .tile.t4x-v{ height:338px}
 .tile.t4x-v .boxContent{ height:298px}
 .tile.t2x-b{ height:164px; width:164px}
 .tile.t2x-b .boxContent{ height:164px; width:164px}
 .tile.t3x-b{ height:251px; width:251px}
 .tile.t3x-b .boxContent{ height:251px; width:251px}
 .tile.t3x-t2x-b{ width:251px; height:164px}
 .tile.t3x-t2x-b .boxContent{ width:251px; height:164px}
 .tile.t4x-b{ height:338px; width:338px}
 .tile.t4x-b .boxContent{ height:338px; width:338px}
 .tile.t4x-t2x-b{ height:338px; width:164px}
 .tile.t4x-t2x-b .boxContent{ height:338px; width:164px}
 .tile.t4x-t2x22-b{ height:164px; width:338px}
 .tile.t4x-t2x22-b .boxContent{ height:164px; width:338px}
 .tile.t4x-t1x-b{ height:77px; width:338px}
 .tile.t4x-t1x-b .boxContent{ height:77px; width:338px}
 
 .tile .tilename { min-height: 20px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{font-size:36px; margin-left:.35em; margin-top:13px; display:inline-block; text-decoration:inherit}
 .tile .tilename .name{ margin-left:5px; margin-bottom:3px; font-size:7pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:2px; margin-right:5px; margin-bottom:5px; margin-left:5px; font-size:12px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}


@media (max-width:520px){ 
 .resimgicon {max-width:54px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 2em; margin-top: 2em;}
 .tile{ width:117px;  height:117px}
 .tile.t2x{ width:244px}
 .tile.t2x .boxContent{ width:244px}
 .tile.t3x{ width:371px}
 .tile.t3x .boxContent{ width:371px}
 .tile.t4x{ width:498px}
 .tile.t4x .boxContent{ width:498px}
 .tile.t2x-v{ height:244px}
 .tile.t2x-v .boxContent{ height:204px}
 .tile.t3x-v{ height:371px}
 .tile.t3x-v .boxContent{ height:341px}
 .tile.t4x-v{ height:498px}
 .tile.t4x-v .boxContent{ height:458px}
 .tile.t2x-b{ height:244px; width:244px}
 .tile.t2x-b .boxContent{ height:244px; width:244px}
 .tile.t3x-b{ height:371px; width:371px}
 .tile.t3x-b .boxContent{ height:371px; width:371px}
 .tile.t3x-t2x-b{ width:371px; height:244px}
 .tile.t3x-t2x-b .boxContent{ width:371px; height:244px}
 .tile.t4x-b{ height:498px; width:498px}
 .tile.t4x-b .boxContent{ height:498px; width:498px}
 .tile.t4x-t2x-b{ height:498px; width:244px}
 .tile.t4x-t2x-b .boxContent{ height:498px; width:244px}
 .tile.t4x-t2x22-b{ height:244px; width:498px}
 .tile.t4x-t2x22-b .boxContent{ height:244px; width:498px}
 .tile.t4x-t1x-b{ height:117px; width:498px}
 .tile.t4x-t1x-b .boxContent{ height:117px; width:498px}
 
 .tile .tilename { min-height: 25px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{ font-size:50px;  margin-left:.48em;  margin-top:21px; display:inline-block;  text-decoration:inherit}
 .tile .tilename .name{ margin-left:10px; margin-bottom:5px; font-size:12pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:12px; margin-right:5px; margin-bottom:5px; margin-left:5px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
 .tile-group{ max-width:400px;  float:none}
}

@media (max-width:480px){
 .resimgicon {max-width:40px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: .48em; margin-top: 0.6em;}
 .tile{ width:68px;  height:68px}
 .tile.t2x{ width:146px}
 .tile.t2x .boxContent{ width:146px}
 .tile.t3x{ width:224px}
 .tile.t3x .boxContent{ width:224px}
 .tile.t4x{ width:302px}
 .tile.t4x .boxContent{ width:302px}
 .tile.t2x-v{ height:146px}
 .tile.t2x-v .boxContent{ height:106px}
 .tile.t3x-v{ height:224px}
 .tile.t3x-v .boxContent{ height:184px}
 .tile.t4x-v{ height:302px}
 .tile.t4x-v .boxContent{ height:382px}
 .tile.t2x-b{ height:146px; width:146px}
 .tile.t2x-b .boxContent{ height:146px; width:146px}
 .tile.t3x-b{ height:224px; width:224px}
 .tile.t3x-b .boxContent{ height:224px; width:224px}
 .tile.t3x-t2x-b{ width:224px; height:146px}
 .tile.t3x-t2x-b .boxContent{ width:224px; height:146px}
 .tile.t4x-b{ height:302px; width:302px}
 .tile.t4x-b .boxContent{ height:302px; width:302px}
 .tile.t4x-t2x-b{ height:302px; width:146px}
 .tile.t4x-t2x-b .boxContent{ height:302px; width:146px}
 .tile.t4x-t2x22-b{ height:146px; width:302px}
 .tile.t4x-t2x22-b .boxContent{ height:146px; width:302px}
 .tile.t4x-t1x-b{ height:68px; width:302px}
 .tile.t4x-t1x-b .boxContent{ height:68px; width:302px}
 
 .tile .tilename { min-height: 20px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{font-size:32px; margin-left:.24em; margin-top:7px; display:inline-block; text-decoration:inherit}
 .tile .tilename .name{ margin-left:3px; margin-bottom:3px; font-size:6pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:2px; margin-right:5px; margin-bottom:5px; margin-left:5px; font-size:12px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}



/*iphone 6 plus portrait*/
@media (max-width:414px){  .resimgicon{ max-width:35px;  height:auto}
.tile .boxContent .resimgicon{ margin-left:15px;  margin-top:13px}
.tile{ width:90px;  height:90px}
.tile.t2x{ width:190px}
.tile.t2x .boxContent{ width:190px}
.tile.t3x{ width:290px}
.tile.t3x .boxContent{ width:290px}
.tile.t4x{ width:390px}
.tile.t4x .boxContent{ width:390px}
.tile.t2x-v{ height:190px}
.tile.t2x-v .boxContent{ height:190px}
.tile.t3x-v{ height:290px}
.tile.t3x-v .boxContent{ height:290px}
.tile.t4x-v{ height:390px}
.tile.t4x-v .boxContent{ height:390px}
.tile.t2x-b{ height:190px;  width:190px}
.tile.t2x-b .boxContent{ height:190px;  width:190px}
.tile.t3x-b{ height:290px;  width:290px}
.tile.t3x-b .boxContent{ height:290px;  width:290px}
.tile.t3x-t2x-b{ height:290px;  width:190px}
.tile.t3x-t2x-b .boxContent{ height:290px;  width:190px}
.tile.t4x-b{ height:390px;  width:390px}
.tile.t4x-b .boxContent{ height:390px;  width:390px}
.tile.t4x-t2x-b{ height:390px;  width:190px}
.tile.t4x-t2x-b .boxContent{ height:390px;  width:190px}
.tile.t4x-t2x22-b{ height:190px;  width:390px}
.tile.t4x-t2x22-b .boxContent{ height:190px;  width:390px}
.tile.t4x-t1x-b{ height:90px;  width:390px}
.tile.t4x-t1x-b .boxContent{ height:90px;  width:390px}
.tile .tilename{ min-height:30px}
.tile .boxContent{ padding:5px 10px}
.tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
.tile.iconmain .boxContent i{ font-size:35px;  margin-left:15px;  margin-top:13px;  display:inline-block;  text-decoration:inherit}
.tile .tilename .name{ margin-left:5px;  margin-bottom:3px;  font-size:7pt}
.tile .tilename .icon{ width:12px;  height:12px;  margin-top:12px;  margin-right:5px;  margin-bottom:5px;  margin-left:5px}
.tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
.tile-group{ max-width:400px;  float:none}
}

/*Galaxy Note */
@media (max-width:400px){
 .resimgicon {max-width:42px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 1.25em; margin-top: 0.6em;}
 .tile{ width:87px;  height:87px}
 .tile.t2x{ width:184px}
 .tile.t2x .boxContent{ width:184px}
 .tile.t3x{ width:281px}
 .tile.t3x .boxContent{ width:281px}
 .tile.t4x{ width:378px}
 .tile.t4x .boxContent{ width:378px}
 .tile.t2x-v{ height:184px}
 .tile.t2x-v .boxContent{ height:144px}
 .tile.t3x-v{ height:281px}
 .tile.t3x-v .boxContent{ height:241px}
 .tile.t4x-v{ height:378px}
 .tile.t4x-v .boxContent{ height:348px}
 .tile.t2x-b{ height:184px; width:184px}
 .tile.t2x-b .boxContent{ height:184px; width:184px}
 .tile.t3x-b{ height:281px; width:281px}
 .tile.t3x-b .boxContent{ height:281px; width:281px}
 .tile.t3x-t2x-b{ width:281px; height:184px}
 .tile.t3x-t2x-b .boxContent{ width:281px; height:184px}
 .tile.t4x-b{ height:378px; width:378px}
 .tile.t4x-b .boxContent{ height:378px; width:378px}
 .tile.t4x-t2x-b{ height:378px; width:184px}
 .tile.t4x-t2x-b .boxContent{ height:378px; width:184px}
 .tile.t4x-t2x22-b{ height:184px; width:378px}
 .tile.t4x-t2x22-b .boxContent{ height:184px; width:378px}
 .tile.t4x-t1x-b{ height:87px; width:378px}
 .tile.t4x-t1x-b .boxContent{ height:87px; width:378px}
 
 .tile .tilename { min-height: 20px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{font-size:36px; margin-left:.48em; margin-top:13px; display:inline-block; text-decoration:inherit}
 .tile .tilename .name{ margin-left:3px; margin-bottom:3px; font-size:8pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:2px; margin-right:5px; margin-bottom:5px; margin-left:5px; font-size:12px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}



/*iphone6 portrait*/
@media (max-width:375px){  .resimgicon{ max-width:29px;  height:auto}
.tile .boxContent .resimgicon{ margin-left:14px;  margin-top:11x}
.tile{ width:82px;  height:82px}
.tile.t2x{ width:174px}
.tile.t2x .boxContent{ width:174px}
.tile.t3x{ width:266px}
.tile.t3x .boxContent{ width:266px}
.tile.t4x{ width:358px}
.tile.t4x .boxContent{ width:358px}
.tile.t2x-v{ height:174px}
.tile.t2x-v .boxContent{ height:174px}
.tile.t3x-v{ height:266px}
.tile.t3x-v .boxContent{ height:266px}
.tile.t4x-v{ height:358px}
.tile.t4x-v .boxContent{ height:358px}
.tile.t2x-b{ height:174px;  width:174px}
.tile.t2x-b .boxContent{ height:174px;  width:174px}
.tile.t3x-b{ height:266px;  width:266px}
.tile.t3x-b .boxContent{ height:266px;  width:266px}
.tile.t3x-t2x-b{ height:266px;  width:174px}
.tile.t3x-t2x-b .boxContent{ height:266px;  width:174px}
.tile.t4x-b{ height:358px;  width:358px}
.tile.t4x-b .boxContent{ height:358px;  width:358px}
.tile.t4x-t2x-b{ height:358px;  width:174px}
.tile.t4x-t2x-b .boxContent{ height:358px;  width:174px}
.tile.t4x-t2x22-b{ height:174px;  width:358px}
.tile.t4x-t2x22-b .boxContent{ height:174px;  width:358px}
.tile.t4x-t1x-b{ height:82px;  width:358px}
.tile.t4x-t1x-b .boxContent{ height:82px;  width:358px}
.tile .tilename{ min-height:30px}
.tile .boxContent{ padding:5px 10px}
.tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
.tile.iconmain .boxContent i{ font-size:29px;  margin-left:14px;  margin-top:11px;  display:inline-block;  text-decoration:inherit}
.tile .tilename .name{ margin-left:3px;  margin-bottom:3px;  font-size:7pt}
.tile .tilename .icon{ width:12px;  height:12px;  margin-top:12px;  margin-right:5px;  margin-bottom:5px;  margin-left:5px}
.tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
.tile-group{ max-width:400px;  float:none}
}



@media (max-width:360px){ 
 .resimgicon {max-width:38px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: .74em; margin-top: 0.6em;}
 .tile{ width:77px;  height:77px}
 .tile.t2x{ width:164px}
 .tile.t2x .boxContent{ width:164px}
 .tile.t3x{ width:251px}
 .tile.t3x .boxContent{ width:251px}
 .tile.t4x{ width:338px}
 .tile.t4x .boxContent{ width:338px}
 .tile.t2x-v{ height:164px}
 .tile.t2x-v .boxContent{ height:124px}
 .tile.t3x-v{ height:251px}
 .tile.t3x-v .boxContent{ height:211px}
 .tile.t4x-v{ height:338px}
 .tile.t4x-v .boxContent{ height:298px}
 .tile.t2x-b{ height:164px; width:164px}
 .tile.t2x-b .boxContent{ height:164px; width:164px}
 .tile.t3x-b{ height:251px; width:251px}
 .tile.t3x-b .boxContent{ height:251px; width:251px}
 .tile.t3x-t2x-b{ height:164px; width:251px}
 .tile.t3x-t2x-b .boxContent{ height:164px; width:251px}
 .tile.t4x-b{ height:338px; width:338px}
 .tile.t4x-b .boxContent{ height:338px; width:338px}
 .tile.t4x-t2x-b{ height:338px; width:164px}
 .tile.t4x-t2x-b .boxContent{ height:338px; width:164px}
 .tile.t4x-t2x22-b{ height:164px; width:338px}
 .tile.t4x-t2x22-b .boxContent{ height:164px; width:338px}
 .tile.t4x-t1x-b{ height:77px; width:338px}
 .tile.t4x-t1x-b .boxContent{ height:77px; width:338px}
 
 .tile .tilename { min-height: 20px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{font-size:36px; margin-left:.35em; margin-top:13px; display:inline-block; text-decoration:inherit}
 .tile .tilename .name{ margin-left:5px; margin-bottom:3px; font-size:8pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:2px; margin-right:5px; margin-bottom:5px; margin-left:5px; font-size:12px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}

@media (max-width:320px){ 
 .resimgicon {max-width:38px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: .56em; margin-top: 0.6em;}
 .tile .tilename, .tile .tilestatus{height:12px}
 .tile{ width:67px;  height:67px}
 .tile.t2x{ width:144px}
 .tile.t2x .boxContent{ width:144px}
 .tile.t3x{ width:221px}
 .tile.t3x .boxContent{ width:221px}
 .tile.t4x{ width:298px}
 .tile.t4x .boxContent{ width:298px}
 .tile.t2x-v{ height:144px}
 .tile.t2x-v .boxContent{ height:104px}
 .tile.t3x-v{ height:221px}
 .tile.t3x-v .boxContent{ height:181px}
 .tile.t4x-v{ height:298px}
 .tile.t4x-v .boxContent{ height:258px}
 .tile.t2x-b{ height:144px; width:144px}
 .tile.t2x-b .boxContent{ height:144px; width:144px}
 .tile.t3x-b{ height:221px; width:221px}
 .tile.t3x-b .boxContent{ height:221px; width:221px}
 .tile.t3x-t2x-b{ height:144px; width:221px}
 .tile.t3x-t2x-b .boxContent{ height:144px; width:221px}
 .tile.t4x-b{ height:298px; width:298px}
 .tile.t4x-b .boxContent{ height:298px; width:298px}
 .tile.t4x-t2x-b{ height:298px; width:144px}
 .tile.t4x-t2x-b .boxContent{ height:298px; width:144px}
 .tile.t4x-t2x22-b{ height:144px; width:298px}
 .tile.t4x-t2x22-b .boxContent{ height:144px; width:298px}
 .tile.t4x-t1x-b{ height:67px; width:298px}
 .tile.t4x-t1x-b .boxContent{ height:67px; width:298px}
 
 .tile .tilename { min-height: 20px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{font-size:30px; margin-left:.22em; margin-top:10px; display:inline-block; text-decoration:inherit}
 .tile .tilename .name{ margin-left:3px; margin-bottom:3px; font-size:6pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:2px; margin-right:5px; margin-bottom:5px; margin-left:5px; font-size:12px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}

/*Colors*/
.TLightRed{background-color:#E51400}
.TLightOrange{background-color:#FE8300}
.TOrange{background-color:#FD5C04}
.TRed{background-color:#BD0000}
.TBrown{background-color:#7D6058}
.TLightPurple{background-color:#E86EB2}
.TDarkPurple{background-color:#8D0196}
.TLightBlue{background-color:#5FCDCB}
.TBlue{background-color:#1673D2}
.TDarkBlue{background-color:#0849B1}
.TFacebookBlue{background-color:#3B5D9C}
.TTwitterBlue{background-color:#59D5E6}
.TThumblrBlue{background-color:#2A4866}
.TLinkedinBlue{background-color:#1477AC}
.TDribbblePink{background-color:#F26097}
.TTurquise{background-color:#5FCDCB}
.TLightGrey{background-color:#E0E0E0}
.TGrey{background-color:#BBB}
.TDarkGrey{background-color:#666}
.TLightGreen{background-color:#74E800}
.TGreen{background-color:#99bd0c}
.TDarkGreen{background-color:#008A00}
.TBlack{background-color:#000}
.TWhite{background-color:#fff}