@font-face {
  font-family: koodak;
  src: url('fonts/koodak.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: RTNassim;
  src: url('fonts/rosettatype-nassim-regular.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: titr;
  src: url('fonts/titr.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
	font-family: 'Yekan';
	src: url('fonts/IranYekan.eot'); /* IE9 Compact Modes */
	src: url('fonts/IranYekan.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('fonts/IranYekan.woff') format('woff'), /* Pretty Modern Browsers */
	url('fonts/IranYekan.ttf') format('truetype'); /* Safari, Android, iOS */
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'YekanNum';
	src: url('fonts/YekanNumbers.eot'); /* IE9 Compact Modes */
	src: url('fonts/YekanNumbers.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('fonts/YekanNumbers.woff') format('woff'), /* Pretty Modern Browsers */
	url('fonts/YekanNumbers.ttf') format('truetype'); /* Legacy iOS */
	font-weight: normal;
	font-style: normal;
}

h1 { font-size: 50px; }
h2 { font-size: 40px; }
h3 { font-size: 32px; }
h4 { font-size: 22px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }

.farsi, .farsi * { direction: rtl; font-family: Yekan; }
.koodak, .koodak * { font-family: koodak; }
.titr, .titr * { line-height: 2rem; }

.icon { margin-left: 15px; min-width: 20px; }
.icon.fa-map-marker:before { padding-right: 5px; }
.ltr { direction: ltr !important; }
.yekan-num { font-family: YekanNum; }
::selection {
    background: transparent;
    color: #aaa;
}
.title {
  background: #283593;
  color: #fff;
  padding: 10px 16px;
  margin-top: 10px;
}

.title:before {
  content: ' ';
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  height: 46px;
  width: 3px;
  background: #3D5AFE;
  z-index: 999999;
}

.title:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 10px;
  right: 2px;
  height: 46px;
  width: 6px;
  background: #536DFE;
  z-index: 999999;
}

.sub-title {
  font-weight: bold;
  color: #0C2C65;
  margin-bottom: 15px;
  position: relative;
  border-right: 1px solid #3d5afe;
  border-bottom: 1px solid #3d5afe;  
  padding: 5px;
}

.works li:not(:first-child) {
  margin-top: 50px;
}

.works li{
  position: relative;
}

.works li .text-justify {
  padding: 0 15px 10px 30px;
}

.works > li:nth-child(odd):before {
  background: #E8EAF6;
  content: ' ';
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  right: -8px;
  bottom: 0px;
}
.works > li:nth-child(odd) .sub-title {
  color: #fff;
  background: #304FFE;
}

.sub-title:before {
  content: ' ';
  position: absolute;
  height: 30px;
  background: #3d5afe;
  top: 0px;
  right: -4px;
  width: 2px;
  display: block;
}

.sub-title:after {
  content: ' ';
  position: absolute;
  height: 30px;
  background: #3d5afe;
  top: 0px;
  right: -9px;
  width: 4px;
  display: block;
}

.orginal-color {
  background: #0C2C65;
  color: #ffffff;
}

.space { margin-bottom: 40px; }

.sidebar {
  height: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidebar a {
  color: #fff;
  text-decoration: none;
}

.sidebar a:not(.btn):hover {
  text-decoration: underline;
}

.avatar { width: 70%; }

.content-page {
  margin-right: 25%;
}

ol li { font-family: koodak !important; margin-top: 0 !important;}

.ul-checked {
  list-style: none;
}

.ul-checked li:before {
  content: '✓';
}

@media screen and (max-height: 450px) {
  .sidebar { padding-top: 15px; }
}

@media screen and (max-width: 770px) {
  .sidebar { position: unset !important; }
  .content-page { margin-right: 0 !important; }
}

.c100 > span { font-family: koodak; }
.c100 ~ p { font: bold 14px Tahoma; margin-top: 10px; }
.c100.red:hover ~ p { color: #ff002f; }
.c100.magenta:hover ~ p { color: #f311d7; }
.c100.blue:hover ~ p { color: #3d5afe; }
.c100.orange:hover ~ p { color: #e08833; }
.c100.green:hover ~ p { color: #4db53c; }
.c100.dark:hover ~ p { color: #c6ff00; }

.hit-the-floor {
  color: #0c2c65;
  font-size: 21px;
  font-weight: bold;
  text-shadow: 
    0 1px 0 #ccc, 
    0 2px 0 #c9c9c9, 
    0 3px 0 #bbb, 
    0 4px 0 #b9b9b9, 
    0 5px 0 #aaa, 
    0 6px 1px rgba(0,0,0,.1), 
    0 0 5px rgba(0,0,0,.1), 
    0 1px 3px rgba(0,0,0,.3), 
    0 3px 5px rgba(0,0,0,.2), 
    0 5px 10px rgba(0,0,0,.25), 
    0 10px 10px rgba(0,0,0,.2), 
    0 20px 20px rgba(0,0,0,.15);
    margin: 0 0 7px;
}