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

@font-face {
  font-family: 'Roboto';
  font-weight: normal;
  font-style: italic;
  src: url("fonts/Roboto-Italic.ttf") format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-weight: bold;
  font-style: normal;
  src: url("fonts/Roboto-Bold.ttf") format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-weight: bold;
  font-style: italic;
  src: url("fonts/Roboto-BoldItalic.ttf") format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  font-style: normal;
  src: url("fonts/Roboto-Medium.ttf") format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  font-style: italic;
  src: url("fonts/Roboto-MediumItalic.ttf") format("truetype"); }

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

@font-face {
  font-family: 'Cousine';
  font-weight: normal;
  font-style: italic;
  src: url("fonts/Cousine-Italic.ttf") format("truetype"); }

@font-face {
  font-family: 'Cousine';
  font-weight: bold;
  font-style: normal;
  src: url("fonts/Cousine-Bold.ttf") format("truetype"); }

@font-face {
  font-family: 'Cousine';
  font-weight: bold;
  font-style: italic;
  src: url("fonts/Cousine-BoldItalic.ttf") format("truetype"); }


* {
  box-sizing: border-box;
}

body {font-family: Roboto, sans-serif; color: black; background-color: white; padding: 0; margin: 0;}
sub, sup {font-size:0.75rem;}
.cf::after {content: "";clear: both;display: table;}

a {color:#1e56a6;}

/* menu, news */
.sitehead {height:80px;}
.sitehead .sh1 {padding: 0 0 0 2px; cursor:pointer; vertical-align:middle; width:181px;}
.sitehead .sh2 {color:#1e56a6; padding: 0 0 0 1rem; text-align:center; font-weight:500; vertical-align:middle; position:relative;}
.sitehead .sh2a {font-size: 2.25em; font-weight: bold; transform:scaleX(1.1); display:inline-block;}
.sitehead .sh3 {float:right;}
.sitehead img {display:block; height:80px;}
.sitehead .shbkg {
	background-image: url('images/sffianlogo2.png'); 
	background-repeat: no-repeat; 
	background-size: auto 100%; 
	height:100%;
	width:422px;
	position: absolute;
	top:0;
	right:0;
	opacity:0.25;
}

@media only screen and (min-width: 1220px) {
	.sitehead .shbkg {opacity:1;}
	.sitehead .sh2i{width:calc(100% - 400px); position:absolute; top:50%; transform:translate(0, -50%);}
	.sitehead .sh2 {padding-left:0};
}
@media only screen and (max-width: 1250px) {
	.sitehead .sh3 {display:none;}
}

.mbar { color:white; background-color:#66A1CB; padding: 0; margin: 0; font-family: Cousine; font-size: 15px; text-transform: uppercase; border-bottom: 1px solid white; border-top: 1px solid white; width:100%; white-space: nowrap;}
.sbar { color:white; background-color:#66A1CB; padding: 0; font-family: Cousine; font-size: 15px; text-transform: uppercase; border-bottom: 0px solid white; width: 100%;}
.abar { color:white; background-color:#66A1CB; text-decoration:none;}

.adrbar { color:white; background-color:#437EB9; padding: 0; margin: 0; font-family: Cousine; font-size: 15px; text-transform: uppercase; }
.adrbar a { color:white; text-decoration: none; }
.adrbar td { border-bottom: white solid 1px; padding: 0 2px 0 2px; }

.mitem { padding: 5px 10px 3px 10px; margin: 0; cursor:pointer; float:left;}
.mitem:not(:last-child) {border-right: white solid 1px;}
.mitem:last-child {padding-right: 0;}
.smenu {position:absolute; display:none; z-index:3000; border-top: white solid 1px;}
.smrow { border-bottom: 1px solid white; padding: 4px 10px; cursor:pointer;}

.bbox {background-color: black; width: 100%; height: 3px; margin: 0 0 2px 0; }

.fpd { /*font-family: Cousine;*/ font-size: 14px; width:225px; padding: 0.25rem 1rem; border-bottom: 2px solid #979FAD;border-right: 2px solid #979FAD; cursor:pointer;}
.fpd.bt { border-top: 2px solid #979FAD;}
a.fpa:link, a.fpa:hover, a.fpa:visited, a.fpa:active {text-decoration: none; color:black;}

.news .TextOsn {padding: .5rem 0;}
.ndate {background-color:#06439B; font-family: Cousine; font-size: 12px; color:white; padding: 2px 4px 1px 4px; float: left; margin-bottom:-1px;}
.ntext {padding-top: 0.5rem; text-align: justify;}

.dt {display:table;}
.dr {display:table-row;}
.dc {display:table-cell;}
.nw {white-space:nowrap;}
.dcenter {margin:0 auto;}

.TextOsn {padding: .5rem;}

/*info page*/
.fw {width: 100%;}
.ifw {width: 100%; height:auto;}
.rw {max-width: 55em;}
.rww {max-width: 80em;}
.pbody  {width: 96%; margin: 0 auto; padding-top: 0.75rem; padding-bottom: 1rem; text-align: justify;}
.pbody.head  {padding-top: 0.25rem; padding-bottom: 0;}
.phead {color: #7C828C; width:auto; font-size:2.25rem; text-align:left; font-family: Impact, Charcoal, sans-serif;}
.phs {font-size: 2rem;}
.phrow { border-bottom: 1px solid #7C828C; padding: 0; width:100%;}
.pad1 {padding: 1rem 0 1rem 1rem;}
.fleft {float: left; }
.fright {float: right; }
.lspan {font-weight:500; font-size:large;color:#7C828C;}
.shead {font-size:large; font-weight: bold;}
.tpers {padding-left: 2rem; text-align:left;}
.tpers td { /*padding: 0.25rem 0;*/ padding-right:1rem; vertical-align: top; font-size:smaller;}
.sbody li {padding-bottom: 0.25rem;}
.hly {background-color:yellow;}
.pdesc {padding:0.5rem 0; font-size:small; font-style:italic;}
.idesc {font-size:small; font-weight:bold;}

.abold {font-weight: bold;}
.ind {text-indent: 1rem;}

.col1, .col2, .col3, .col50 {width:100%;}
/* .col2 {padding-left: 1rem;} */

@media only screen and (min-width: 600px) {
	.col1.c70 {
		width: 70%;
		padding-right: 1.5rem;
		/* border-right: 1px solid #7C828C; */
	}

	.col2.c30 {
		width: 30%;
		padding-left: 1.5rem;
	}
}

@media only screen and (min-width: 600px) {
	.col1 {
		width: 35%;
		padding-right: 1.5rem;
	}

	.col2 {
		width: 65%;
		padding-left: 1.5rem;
	}
}

@media only screen and (min-width: 900px) {
	.col3.c33 {width: 33%;}
	.col50 {width: 50%;}
	:first-child.col50 {padding-right:1.5rem;}
	:last-child.col50 {padding-left:1.5rem;}
}

@media only screen and (max-width: 1000px) {
	:not(:first-child).dc.col50.c33 {padding-top:4rem;}
}

/*personal page*/
.fs2r {font-size: 2rem;}
.pers li {padding: 2px 0;}

.zoomed {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.8); 
}

.zoom-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 1024px;
  cursor: zoom-out;
  animation-name: zoomin;
  animation-duration: 0.5s;  
}
@media only screen and (max-width: 1024px){
  .zoom-content {
    width: 100%;
  }
}
@keyframes zoomin {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}
@keyframes zoomout {
  from {transform:scale(1)} 
  to {transform:scale(0)}
}

/* admin */
body.admin {margin:8px;}
.admin .dc {padding: 0.25rem; vertical-align:top;}
.admin .padtable{padding:0.5rem;}
.admin .savebtn{padding:0.5rem; margin: 0.5rem 0;}
.admin textarea{font-family:Roboto; font-size:1rem;}

/* */

.TextPart {font-size: 20pt; text-align: justify; background-color: #A0A0A0}
.TextHiper {font-family: Times New Roman, Times, serif; font-size: 12pt; font-style: italic; font-weight:normal; text-align: center; color: #222222;}
.ppreview{background-color: #60A0C8; color: white;}

.flat {font-family: Courier; font-size: 14pt; background-color: #e0FFFF; border-color: #808080; width: 400; }
/*.TextHip {color: red; cursor:hand}
.Text_Hip {color: red; cursor:hand}*/
.TextZag {font-family: Times New Roman; font-size: 14pt; font-style: italic; font-weight:normal; color: #808080;}

.formCell {text-align: justify; font-family: Arial; font-size: 12pt; fontsize:8pt; background-color:#E0ECF5}
.flat {font-family:Verdana; font-size:12pt; width:100%; border-style:none}