/*
1) Extra Small Devices (e.g. cell phones) are the default, This covers devices smaller than 768px wide.

2) “Small Devices” (e.g. tablets) are targeted with @media (min-width: 768px) and (max-width: 991px) { ... }.

3) Medium Sized Devices (e.g. Desktops) have a screen size smaller than 1200px and greater than 991px, 
	using @media (min-width: 992px) and (max-width: 1199px) { ... }.
	
4)Larger Devices (e.g. wide-screen monitors) are greater than 1200px, 
	targeted using @media (min-width: 1200px) { ... }.
*/
@import url(https://fonts.googleapis.com/css?family=Merienda+One);
@import url(https://fonts.googleapis.com/css?family=Oleo+Script);
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Cookie);
@import url(https://fonts.googleapis.com/css?family=Imprima);
@import url(https://fonts.googleapis.com/css?family=Courgette);
@import url(https://fonts.googleapis.com/css?family=Lobster);
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
@import url(https://fonts.googleapis.com/css?family=Caveat);

@font-face {
	font-family: Shabnam-Medium;
	src: url('../fonts/Shabnam-Medium.ttf');
	font-weight: Normal;
}
@font-face {
	font-family: KurdishBold;
	src: url('../fonts/KurdishBold.ttf');
	font-weight: Bold;
}

body{
	font-family: Shabnam-Medium;
}

.row {
  margin-bottom: 5px !important;
}
.nav-wrapper .brand-logo{
	font-size:1.8em;
	font-family: 'Oleo Script', cursive;
	/*text-shadow: 2px 2px 5px white;*/
	letter-spacing:1px;
}

.info-email {
	color:orange;
	font-weight: bold;
	text-shadow: 2px 2px 5px white;
	letter-spacing:1px;
}

.table-container{
	width: 85%;
}

.navbar-fixed ,.sidenav {
	font-family: Shabnam-Medium;
	font-weight: bold;
	font-size:20px;
	/*letter-spacing:1px;*/
}

.nav-wrapper ul li :hover{
	border-bottom: 2px orange solid ;
}

.sidenav .user-view .circle {
  height: 96px !important;
  width:  96px !important;
}

.sidenav .sidenav-close {
  line-height: 40px !important;
  height: 40px !important;
}

.slide-texts{
	padding-left: 20px;
	padding-right: 20px;
	line-height:1.5em;	
}

.slider .slides li .caption {
  top: 10%;
}
	
.sidenav {
  width: 200px;
}  

.bg-image{
  background:url('../images/back.jpg') no-repeat center center;
  background-size:cover;
  margin-bottom:5px;
}
.container h3{ /* SECTION TITLES*/
	font-family: Shabnam-Medium;
	font-size:35px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.container h5{ /* SECTION TITLES*/
	font-family: Shabnam-Medium;
	font-size:25px;
	padding-top: 5px;
	padding-bottom: 5px;
} 

.img-circular{
	 width: 200px;
	 height: 200px;
	 background-image: url('../images/about.jpg');
	 background-size: cover;
	 display: block;
	 border-radius: 100px;
	 -webkit-border-radius: 100px;
	 -moz-border-radius: 100px;
}
/*
 circular images: 
 method 1:
 <div class="img-circular"></div>
 
 method 2:
<div class="image-cropper">
	<img src="images/about.jpg" alt="" class="profile-pic">
</div>*/
.image-cropper {
    width: 200px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    border-radius: 50%;
}
.profile-pic {
  display: block;
  margin: 0 auto;
  margin-left: -5%; 
  height: 100%;
  width: auto;
}

.title-font-latin{
	font-family: 'Merienda One', cursive;
	letter-spacing:2px;
	font-size:18px;
}

.title-font-farsi, .title-font-kurdi{
	font-family: Shabnam-Medium;
	text-align: justify;
    text-justify: inter-word;
	direction:rtl;
	font-size:17px;
}

.latinfont{
	font-family: 'Imprima', sans-serif;
	/*font-family: 'Merienda One', cursive;*/
	font-size:18px;
}

.farsifont, .kurdfont{
	font-family: Shabnam-Medium;
	text-align: justify;
    text-justify: inter-word;
	direction:rtl;
	font-size:18px;
}

.poem-space{
	white-space:pre-line;
} 

.modal-rtl {
  direction: rtl;
  will-change: top, opacity;
}

.section{
	margin-top: 4vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
}
 
.section-box{
	/*border: 0px  orange solid;
	border-top: 0px;
	border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;*/
 }
 
.tabs .indicator{
      background-color: orange !important;
}

.tabs .tab a:focus, .tabs .tab a:focus.active{
    background: #26a69a  !important; /* teal lighten-1*/
}

.cards button a {
    text-decoration: none !important;
    color: #f6f7f7;
}

/* Original materializeCSS halfway-fab*/
/*
.btn-floating.halfway-fab {
  position: absolute;
  right: 24px;
  bottom: -20px;
}
*/
.btn-floating.card-fab {
    position: relative;
    right: 15%;
    bottom: 1%;
}

.button-rounded{
	margin-bottom: 5px;
    width: 100%;
    background: teal;
	font-family: Shabnam-Medium;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.button-back{
	margin-bottom: 5px;
	margin-top: 15px;
	height: 50px;
    background: teal;
	font-family: Shabnam-Medium;
    border-radius: 10px;
}

.button-submit{
	margin-bottom: 5px;
	height: 50px;
    background: teal;
	font-family: Shabnam-Medium;
    border-radius: 10px;
}
.comment-button{
    width: 100%;
    background-color: #26a69a; /* teal lighten-1*/
	font-family: 'Merienda One', cursive;
    border-radius: 10px;
	font-size:14px;
}

.login-btn{
    width: 80%;
    background: teal;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.rounded {
    border-radius: 20px;
}

.bottom-rounded {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
	border: 1px teal solid;
}

.top-rounded {
	padding: 5px 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
	border: 2px solid teal;
	/*border-bottom: 0px;*/
	margin-bottom: 20px;
}

.tabs-top-rounded{
	border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#res-comment{
	color: white;
	text-align:center;
	font-size: 16px;
	padding: 5px;
	margin-top:10px;
}

#err-input{
	color: red;
	font-weight: bold;
	text-align:center;
	font-size: 18px;
	padding: 5px;
	margin-left: 10%;
	margin-right: 10%;
}
table.highlight>tbody>tr:hover {
    background-color: rgba(194, 206, 23, 0.5) !important;
}

table.highlight>tbody>tr {
    /*color: red !important;  you could ignore the !important here since materialize doesn't give a default color */
}

/* FORM COMPONENTS*/
 /* label color */
   .input-field label {
     color: #ccc;
   }
   /* label focus color */
   .input-field input[type=text]:focus + label {
     color: #ff4f81;
   }
   /* label underline focus color */
   .input-field input[type=text]:focus {
     border-bottom: 1px solid orange;
     box-shadow: 0 1px 0 0 #000;
   }
   /* valid color */
   .input-field input[type=text].valid {
     border-bottom: 2px solid green;
     box-shadow: 0 1px 0 0 #000;
   }
   /* invalid color */
   .input-field input[type=text].invalid {
     border-bottom: 2px solid red;
     box-shadow: 0 1px 0 0 #000;
   }
   /* icon prefix focus color */
   .input-field .prefix.active {
     color: #000;
   }

/*TOOLTIPS */   
.material-tooltip {
  padding: 10px 8px;
  font-size: 1.5rem;
  z-index: 2000;
  border-radius: 5px;
  
  min-height: 36px;
  line-height: 120%;
  opacity: 0;
  position: absolute;
  text-align: center;
  max-width: calc(100% - 4px);
  overflow: hidden;
  left: 0;
  top: 0;
  pointer-events: none;
  visibility: hidden;
  background-color: #fb8c00 ;
  color: #fff;
  font-family: Shabnam-Medium;
  font-size: 1em;
  font-weight: 700;
}	 

.section-follow{
	font-family: 'Merienda One', cursive;
	font-size:18px;
}

.section-follow .fa-4x {
  margin: 5px 10px;
  font-size: 50px;
}

.section-footer .flow-text{
	margin:0;
	padding:0;
	/*font-family: 'Merienda One', cursive;*/
	font-family: 'Oleo Script', cursive;
	font-size:22px;
	letter-spacing:2px;
}

.comment-help{
	color:orange; 
	text-align:center; 
	font-size:16px;
}
.captcha{
	width: 50%;
	float: right;
	box-sizing:border-box;
}
.display-captcha{
	white-space:pre-line;
	font-weight:bold;
	font-size:0.6em;
	color:teal;
	line-height: normal;
	direction:ltr;
	width: 50%;
	float: right;
	box-sizing:border-box;
	/*border: 1px black dotted;*/
	border-radius: 10px;
	padding: 5px;
	text-align:center;
}

.help-block{
	color: orange;
	font-size: 18px; 
	background: #f5f5f5;
	font-weight: bold;
	line-height:1em;
}

@media (max-width:992px){
	.comment-button{
		font-size:12px;
	}
	.section{
		margin-top: 50px;
	}
}

@media (max-width:768px){
	.comment-button{
		margin-bottom:5px;
	}
	.section{
		margin-top: 50px;
	}
}