[data-icon]:before {
  font-family: 'Roboto', sans-serif;
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
div>i.fix{
  position: relative;
    top: -15px;
}
.box{
    position: relative;
}
div>span{
  display: block;
  font-size: 25px;
  position: absolute;
  z-index: 100;
  color: #fff;
  width: 100%;
  line-height: 1.3;
  /* padding: 21px; */
  bottom: 20px;
  font-weight: bold;
}
.slidePageInFromLeft{
  animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards;
  }
.openpage{ 
  animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;
}
.slidePageBackLeft{
  opacity:1; 
  left:0;
  animation: slidePageBackLeft .8s ease-out 1 normal forwards;
}
.slidePageLeft{
  opacity:1;
  transform: rotateY(0) translateZ(0) ; 
  animation:slidePageLeft .8s ease-out 1 normal forwards;
}
.fadeOutback{
  animation: fadeOutBack 0.3s ease-out 1 normal forwards;
}
.fadeInForward-1, .fadeInForward-2, .fadeInForward-3 {
  opacity:0;
  transform: translateZ(-5em) scale(0.75);
  animation: fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards;
}
.fadeInForward-2{
  animation-delay: .55s;
}
.fadeInForward-3{
  animation-delay: .7s;
}


@keyframes fadeOutBack{
  0%{transform: translateX(-2em) scale(1); opacity:1;}
  70% {transform: translateZ(-5em) scale(0.6); opacity:0.5;}
  95% {transform: translateZ(-5em) scale(0.6); opacity:0.5;}
  100% {transform: translateZ(-5em) scale(0); opacity:0;}
}

@keyframes fadeInForward{
  0%{transform: translateZ(-5em) scale(0); opacity:0;}
  100% {transform: translateZ(0) scale(1); opacity:1;}
}

@keyframes rotatePageInFromRight{
  0% {transform:rotateY(-90deg) translateZ(5em);opacity:0}
  30%{opacity:1}
  100%{transform: rotateY(0deg) translateZ(0) ; opacity:1}
}

@keyframes slidePageLeft{
  0%{left:0; transform: rotateY(0deg) translateZ(0) ; opacity:1}
  70%{opacity:1;}
  100%{opacity:0; left:-150%; transform: rotateY(0deg)}
}

@keyframes slidePageInFromLeft{
  0%{opacity:0; }
  30%{opacity:1}
  100%{opacity:1; left:0;}
}

@keyframes slidePageBackLeft{
  0%{opacity:1; left:0; transform: scale(0.95);}
  10%{transform: scale(0.9);}
  70%{opacity:1;}
  100%{opacity:0; left:-150%;}
}

/*======================= media queries =======================*/

@media screen and (min-width: 64em){
  
  @keyframes fadeInForward{
    80%{opacity:0.9;}
    100% {transform: translateZ(0) scale(1) translateX(-2em); opacity:1;}
  }

}
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
*{
  box-sizing: border-box;
  margin:0;
  padding:0;
}
.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table; 
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

ul{
  list-style-type: none;
}
.body-wrapper{
  width:100%; 
  height: 100%;
  perspective:3300px;
  position:relative;
  overflow:hidden;
}
.dashboard{
  margin:0 auto; 
  width:100%;
  padding:1em;
}
.col1, .col2, .col3{
  width:99%; 
  margin:1em auto;
}

.page{
  width:0; 
  width:100%;
  height:100%;
  color:white;
  text-align:center;
  font-size:3em;
  font-weight:300;
  position:absolute;
  right:0;
  top:0;
  opacity:0;
  transform-origin: 100% 0%; 
  transform:rotateY(-90deg) translateZ(5em);
}

.page-title {
  margin-top:1em; 
  font-weight:100; 
  font-size:2.5em;
}
.close-button{
  font-size:1em;
  width:1em; 
  height:1em; 
  position:absolute; 
  top:1.25em; 
  right:1.25em; 
  cursor:pointer; 
  border:1px solid white;
  line-height:.8em;
  text-align:center;
}

.big, .small{ 
  float:left; 
  margin:0 auto 1%; 
  color:white;
  font-size:2em;
  text-align:center; 
  height:4.5em; 
  font-weight:300;
  overflow:hidden;
  padding:.75em 1em;
  cursor:pointer;
  transition:all 0.3s ease-out;
}
.big:hover, .small:hover{
  background:white;
}
.big{
  width:100%; 
}
.small{
  width:49%;
  margin-right:2%;
}
.big p {
  line-height:1.5;
  margin-top:.6em;
  padding:0 .3em;
  transition:all 0.3s ease-out;
}
.small.last{
  margin-right:0;
}

/*icon fonts styles*/

.icon-font{
  font-size:2em;
  line-height:1.6 !important;
}
.big .icon-font{
  float:left;
}
.lock-thumb .icon-font{
  margin-left:25%;
}

/*styling the boxes/thumbs*/

.weather-thumb {background:#F2854C;}
.weather-thumb:hover {color:#F2854C;}

.paint-thumb {background:#85A9C3;}
.paint-thumb:hover {color:#85A9C3;}

.cpanel-thumb {background:#83A8C3;}
.cpanel-thumb:hover {color:#83A8C3;}

.games-thumb {background:#04ACAD;}
.games-thumb:hover {color:#04ACAD;}

.news-thumb, .calculator-thumb {background:#EBB741;}
.news-thumb:hover, .calculator-thumb:hover {color:#EBB741;}

.videos-thumb, .code-thumb{background:#BEA881;}
.videos-thumb:hover, .code-thumb:hover{color:#BEA881;}

.lock-thumb, .alarm-thumb {background:#EF3A5B;}
.lock-thumb:hover, .alarm-thumb:hover {color:#EF3A5B;}

.git-thumb, .favorites-thumb, .notes-thumb {background:#385E82;}
.git-thumb:hover, .favorites-thumb:hover, .notes-thumb:hover {color:#385E82;}

.photos-thumb {background:#BEA881;}
.photos-thumb:hover {color:#BEA881;}

.calendar-thumb, .organizer-thumb {background:#8BBA30;}
.calendar-thumb:hover, .organizer-thumb:hover {color:#8BBA30;}

.todos-thumb {background:#2FB1BE;}
.todos-thumb:hover {color:#2FB1BE;}

.todos-thumb p{
  margin-top:.8em;
}
.todos-thumb-span{
  display:block;
  margin-top:1.5em;
}
.todos-thumb:hover p{
  margin-top:-2.7em;
}

/*styling log in screen*/

.login-screen{
  background:#EF3A5B;
  height:100%; 
  width:100%;
  position:absolute; 
  top:0;
  left:-150%;
  color:white;
  text-align:center;
  font-weight:300;
  z-index:1;
}
  .login-screen p{
    font-size:6em;
    margin-top:2em;
    font-weight:100;
  }
  .myform{
    margin:2em auto;
    width:300px;
  }

    input{
      display:block;
      line-height:40px;
      padding:0 10px; 
      width:260px;
      height:40px;
      float:left;
    }
    #unlock-button{
      background:black;
      color:white;
      font-size:1em;
      float:left;
      border:0;
      height:2.5em; 
      width:2.5em;
      padding:.3125em;
      text-align:center;
      cursor:pointer;
      border-radius:2px;
    }

/*styling the pages*/
.page.random-page{
  background:#DFD4C1;
}
.page.tel{
  background:#FAA61A;
}
.page.arabic,.page.hebraw,.page.english{
	background:none repeat scroll 0 0 #424242;
}

.page.todos{
  background:#2FB1BE;
}
  .todos ul{
    margin: 50px auto;
    width:60%;
    list-style-type: none;
  }
    .todos li{
      padding:5px 10px;
      text-align:left;
      background:white;
      border-left:5px solid #EF3A5B;
      color:#444;
      font-weight:300;
      font-size:0.5em;
      margin-bottom:15px;
    }
      .delete-button{
        font-size:0.7em;
        float:right;
        line-height:25px;
      }


/*================= loading blue wall ====================================*/
.body-overlay{
  width:100%; 
  height:100%;
  background:#385E82;
  color:white;
  text-align:center;
  font-size:300%;
  font-weight:300;
  position:absolute;
  right:0%;
  top:0%;
  transition:all 0.5s linear;
}
.slideDemoOverlayUp{
  top:-150%;
}
.body-overlay-title{
  font-weight:100;
  margin:1.35em auto .5em;
  font-size:1.25em;
}
.browser-logos{
  width:30%;
  height:1em;
  margin:.5em auto;
}
.browser-logos li{
  float:left;
  height:2em;
}
.body-overlay{
  z-index:3;
}


/*======================= media queries =======================*/


@media screen and (min-width: 43.75em){/*700px*/
  .col1,.col2,.col3{
    float:left;
    margin-right:1%;
    width:49%;
  }  
}
@media screen and (min-width: 64em){
  .col1,.col2,.col3{
    float:left;
    margin-right:.5%;
    width:32%;
  }
  .col3{margin-right: 0;}
  .col1{margin-left:2em;}
}


.time div ul li { list-style: none; padding: 0; }


@media all and (max-width: 480px) { /* Global Misc --- */
  .page-title {
    margin-top:2em; 
    font-weight:100; 
    font-size:1.5em;
  }
}

/**sanapix**/

.language{
	font-family: arial;
	font-weight: bold;
}

iframe {
    border: 20px solid #FCBA4B;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

/* -------------------[ Contact Form ]------------------- */


.uform {
	max-width: 800px;
	height: 160px;
	margin: 0px auto 0 auto;
	background: #FCBA4B;
	padding: 0 15px;
	position: relative;
  -webkit-border-radius: 15px;
  border-radius: 15px;
}

.uform h3 {
	text-align: center;
	color: #A02013;
	margin: 0 8px 4px 0;
}

.address,.uform{
  margin-bottom: 20px;
}

.form-fields {
	height: 130px;
	width: 100%;
	margin: 0 auto;
	padding: 0 40px;
}

.form-title {
    padding-top: 10px;
}

.forms-col {
	text-align:center;
	width: 30%;
	float:left;
	margin: 0;
}

.send{
  width: 10%!important;
}

.forms-col p{
	text-align: left;
	font-size: 18pt;
	font-weight: bold;
	line-height: 100%;
	color: #000000;
	margin: 16px 15px 6px 0;
	padding: 0;
}

.forms-col input[type=text]{
	color: #781351;
	background: #fff;
	border: 1px solid #781351;
	width: 90%;
  font: 21px arial;  
	height: 30px;	
}

.forms-col-submit{
	float: left;
    margin: 0 auto;
    width: 600px;
}

.submit {
    margin: 0 auto;
    width: 150px;
}

.forms-col .submit{
	margin: 35px 0 0;
}


input[type="submit"] {
    background: none repeat scroll 0 0 #3B3E45;
    border: 0 none;
    border-radius: 10px 10px 10px 10px;
    color: white;
    cursor: pointer;
    display: block;
    font:normal 21px arial;
    width: 50%;
	height: 30px;
	margin: 8px 0 0 0px;
}

.forms-col .note{
	text-align: left;
	font-size: 12px;
	font-weight: normal;
	font-family: tahoma;
	line-height: 90%;
	color: #fff;
	margin: 3px 20px 0 0;
	padding: 1px 0 1px 0;
}

.uform inpt{ line-height:0!important;}

/**** sanapix ***/
.info-content{
    direction: ltr !important;
    margin: 35px auto;
    text-align: right !important;
    width: 850px;
	height: 885px;
	overflow-y: scroll;
	padding-right: 50px;
}
.info-content-en{
    direction: ltr !important;
    margin: 35px auto;
    text-align: left !important;
    width: 850px;
	height: 885px;
	overflow-y: scroll;
	padding-right: 50px;
}

.info-content p,.info-content h2,.info-content h1,.info-content h3,.info-content h4 {
    direction: rtl !important;  
	font-family: "DroidKufiRegular";
}

.info-content-en h2,.info-content-en h3 ,.info-content-en strong{
	font-family: arial!important;
}

.info-content-en p{
	font-family: tahoma!important;
}



@font-face {
    font-family: "DroidKufiRegular";
    font-style: normal;
    font-weight: normal;
    src: local("DroidKufi-Regular"), url("fonts/DroidKufi-Regular.ttf") format("truetype"), url("fonts/DroidKufi-Regular.woff") format("woff"), url("fonts/DroidKufi-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/DroidKufi-Regular.svg#droidkufi-regular") format("svg");
}


.fright {
    float: right!important;
}

.logo-text {
    font-size: 64px;
    text-transform: uppercase;
    text-align: left; 
}

.text {
    font-size: 56px;
}