body {direction: ltr;}
.fbody {direction:rtl;}
body{font-family: arial;font-size: 12px;}.tbl{border-spacing: 0;border-collapse: collapse;}
.picbx{text-align:center;width:120px;height:130px;overflow:hidden;border:1px solid gray;float:right;margin:5px;}
.mpic{max-width:100px;max-height:100px;border:2px solid #e8e8e8;}
.tprmtrb{font-weight: bold;white-space: nowrap;vertical-align:top;}
.ltr{direction:ltr;}
.rtl{direction:rtl;}
.top{vertical-align:top;}
.vcenter{vertical-align:middle;}
.vbtm{vertical-align:bottom;}
.tcenter{text-align:center;}
.tright{text-align:right;}
.tleft{text-align:left;}
.cntr{text-align:center;margin: 0 auto;}
.right{text-align:right;}
.left{text-align:left;}
.gr{color:green;}
.rd{color:red;}
.bld{font-weight: bold;}
.brd{border:0;}.br1{border:1px solid black;}
.frm{margin: 0 auto;text-align:left;direction:ltr;width:300px;}
.scmsg {color:black;text-align:center;background-color:#2be395;-webkit-animation: 500ms oneproperty 4s forwards 1;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
.ermsg {color:black;text-align:center;background-color:#fa5f56;-webkit-animation: 500ms oneproperty 4s forwards 1;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
@-webkit-keyframes oneproperty {0% { opacity: 1;}100% { opacity: 0; }}
.sitem{border:0px solid black;width:85%;margin:0 auto;}
.itemnm{font-size:18px;font-weight: bold;}
.itemdsc, .iteminfo{width:280px;}
.infcontainer{float:right;display:block;}
.ItmDtl{border:0px solid black;float:left;margin:15px auto;}
.ItmPic{float:none;display:block;min-height:550px;margin:15px auto;}
.bitembx{width:500px;height:500px;}
.bitempic{max-width:500px;max-height:500px;}
.dtltbl{border-collapse: collapse;width:90%;margin:0 auto;}
.admnu{clear:both;}
.inf{margin-right:15%;margin-bottom:28px;}
.cninp{padding:14px;width:95%;border:1px solid;}
.cntnm{text-align:right;width:100%;}
.cntcont{width:95%;max-width:450px;margin:0 auto;float:right;margin-right:5%;margin-top:35px;}
.cntvl{text-align:right;}
.cntbnt{text-align:center;}
.cntsbmt{padding:14px;width:60px;}
.cnbdf{padding-left:85px;float:right;clear:both;}
.cnbdf:before{clear:both;}
.cntn{clear:both;}
.cncontainer{margin:0 auto;}
a:link    {color:black;}
a:visited {color:black;}
a:hover   {color:#434343;}
a:active  {color:red;}
input,textarea{
margin-bottom:4px;
border:1px solid #EAEAEA;
margin-top:10px;padding:5px;
width:280px;
border:1px solid gray;
}
input[type=submit] {width:100px;padding:10px; background:white; border:0 none; cursor:pointer; }
.fbody{margin:0px auto;margin-top:0px;width:960px;text-align:center}
.upr{height:200px;background-color:#FF3333;border-bottom:inset 5px #000000;top:0;left:0;width:100%;position:absolute;animation:mymove 5s;-webkit-animation:mymove 5s;animation:rmove 2s infinite;-webkit-animation:rmove 2s infinite;}
.logo{left:100px;position:absolute;text-align:center;border:0px solid black;top:35px;width:360px;animation:lmove 1s;-webkit-animation:lmove 1s;}
.sbody{background-color:white;text-align:center;}
body{background-color:white;font-family: arial;font-size: 13px;}
.img{border:inset 5px #EAE7E7;}
.pgbody{min-height:400px;}
.footer{background-color:#000000;color:white;border-top:5px solid #FF3333;line-height:120%;min-height:50px;}
.footer a{color:white;}
#menu ul{margin:0;width:930px;}
#menu a{float:right;width:90px;text-decoration:none;color:white;background-color:#FF3333;padding: 11px;margin-right:6px ;text-align:center;font-size:14px;font-weight: bold;}
#menu a:hover,#menu li.selected {background-color:#000000;}
#menu li {display:inline;}  
#dmenu ul{margin:0;}
#dmenu a{float:left;width:90px;text-decoration:none;color:white;background-color:#1A657C;padding: 11px;margin-top:6px ;text-align:center;font-size:14px;font-weight: bold;}
#dmenu a:hover{background-color:#4C98CD;}
#dmenu li {display:block;}
#dmenu li.select a{display:block;background-color:#4C98CD;}
#hid{display:none;}
.tmnu ul{margin:0;}
.tmnu a{float:right;width:90px;text-decoration:none;color:white;background-color:#1A657C;padding: 11px;margin-right:6px ;text-align:center;font-size:14px;font-weight: bold;}
.tmnu a:hover {background-color:#4C98CD;}
.tmnu li {display:inline;}  
.theme-default #slider {margin:0px auto 0 auto;width:930px;height:400px;}
.circle {
    background: rgb(255,255,255);
    border-radius: 100%;
    cursor: pointer;
    position: relative;
    margin: 0 auto;
    width: 15em; 
    height: 15em;
    text-decoration:none;
    overflow: hidden;
    transform: translateZ(0);
}
 
.circle h1 {
    color: rgba(189, 185, 199,0);
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 1.6em;
    line-height: 8.2em;
    text-align: center;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    user-select: none;
    transition: color 0.8s ease-in-out;
}
 
.circle:before,
.circle:after {
    border-radius: 100%;
    content:"";
    position: absolute;
    top: 0; 
    left: 0;
    width: inherit; 
    height: inherit;            
    box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), 
                inset 0 10.6em 0 rgba(30, 140, 209, 0.2), 
                inset -10.6em 0 0 rgba(30, 140, 209, 0.2), 
                inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);
    transition: box-shadow 0.75s;
}
 
/* We rotate the :after pseudo-element to get the edge from the corner, we could also just do that with box-shadows. */
 
.circle:after  {
    transform: rotate(45deg);
}
 
/* There is no problem using "pseudo-class + pseudo-element" :) */
 
.circle:hover:before,
.circle:hover:after  {
    box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), 
                inset 0 0.86em 0 rgba(252, 150, 0, 0.5), 
                inset -0.86em 0 0 rgba(0, 255, 0, 0.5), 
                inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
}
 
.circle:hover > h1  {
    color: rgba(185, 185, 185,1);
}
@keyframes mymove{from {background-color:red;}to {background-color:blue;}}
@-webkit-keyframes mymove{from {background-color:#B40901;}to {background-color:#FF3333;}}
@keyframes lmove{from {left:-450px;}to {left:100px;}}
@-webkit-keyframes lmove{from {left:-450px;}to {left:100px;}}
@keyframes rmove{from {border-bottom:inset 5px #434343;}to {border-bottom:inset 5px #000000;}}
@-webkit-keyframes rmove{from {border-bottom:inset 5px #434343;}to {border-bottom:inset 5px #000000;}}