@font-face { font-family: assis-b;
    src: url(Assistant/Assistant-Bold.ttf);
} @font-face { font-family: assis;
    src: url(Assistant/Assistant-Light.ttf);
}

html{text-align: right}
body{ background:#fbf7f5; direction:rtl;text-align: right; line-height: 1.42857; font-family:assis;}
/*background:url('../img/bg/bg.jpg') no-repeat center center fixed;background-size: cover; */

.container{direction:rtl;}
#box{width:80%; display:table;
display: block;
overflow: auto;
    padding-right: 15px;
    padding: 80px 0 20px 0;
    margin-left: auto;
    margin-right: auto;
}
#box a{color:#e7e7d9;}
.titlePage{width:100%; padding:12px; font-size:38px; text-align:center; color:#004682;}
.squre{position:relative;float:right;  margin:0 auto; width:33%; height:38vh;
 transition: all .2s ease-in-out; background-size:100%; background-size: 130px 240px;
        box-sizing: border-box;
    display: inline-block;
    /*padding: 16px;*/
}
.squre:hover{-webkit-filter: brightness(120%); cursor:pointer;  }/*border:inset 1px #ddd;*/
.squre_fullWidth{width:100%; height:52vh; padding:2% 30%;}
.txt{position:absolute; bottom:0; width:auto; z-index:-1; opacity:1;background:none; z-index:1; padding:15px; font-size:32px;  font-weight:bold; color:#e6bc53;}

@media screen and (max-width: 1440px) {
   #box {  width: 90%;   }}
   
@media screen and (max-width: 992px) {
             #box{margin:0 auto; width: 100%; }
       .squre {  width: 49.5%;  }
.squre_fullWidth{width:100%; height:52vh; padding:2% 15%;}
}  

@media screen and (max-width: 450px) {
       .squre {    width: 100%;   }
  .squre_fullWidth{width:100%; height:43vh; padding:2%;}
}