/** MUSIC 
	home-theme-education.html 
 ********************************************* **/
@import url(https://fonts.googleapis.com/css?family=Roboto);
.font-roboto {
	font-family: "Roboto" !important;
}


/* header, menu & topbar background color */
#header,
#topMain.nav-pills>li,
#topNav div.submenu-dark ul.dropdown-menu {
	background-color:#c10100;
}
#topBar {
	background-color:#179BD7 !important;
}
#topNav ul.dropdown-menu {
	border-top-color:#179BD7 !important;
}

#topNav button.btn-mobile {
	color:#fff;
}

/* menu & topbar links color */
#topBar ul.top-links li.text-welcome,
#topBar ul.top-links>li>a,
#header li.search i.fa,
#header ul.nav-second-main li>a,
#topMain.nav-pills>li>a {
	color:#eee !important;
}
#topBar ul.top-links>li.active>a,
#topMain.nav-pills>li.active>a {
	color:#fff !important;
}

/* footer */
#footer {
	background: #c10100;
	background: -moz-linear-gradient(top, #1a1d2b 0%, #2e3648 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1a1d2b), color-stop(100%, #2e3648));
	background: -webkit-linear-gradient(top, #1a1d2b 0%, #2e3648 100%);
	background: -o-linear-gradient(top, #1a1d2b 0%, #2e3648 100%);
	background: -ms-linear-gradient(top, #1a1d2b 0%, #2e3648 100%);
	background: linear-gradient(to bottom, #8a0100 0%,#b00100 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a1d2b', endColorstr='#2e3648',GradientType=0 );
}
@media (min-width: 768px){
  .eight-cols .col-md-1,
  .eight-cols .col-sm-1,
  .eight-cols .col-lg-1  {
    width: 25%;
    *width: 25%;
  }
}

@media (min-width: 992px) {
  .eight-cols .col-md-1,
  .eight-cols .col-sm-1,
  .eight-cols .col-lg-1 {
    width: 25%;
    *width: 25%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .eight-cols .col-md-1,
  .eight-cols .col-sm-1,
  .eight-cols .col-lg-1 {
    width: 12.5%;
    *width: 12.5%;
  }
}

.page-header {
    padding-bottom: 0px;
    margin: 10px 0px 0px 20px;
    border-bottom: 0px solid #eee;
}
@media print {
  body * 
		{
			visibility: hidden;
		}
		#section-to-print, #section-to-print * 
		{
			visibility: visible;
		}
		#section-to-print 
		{
			position: absolute;
			left: 0;
			top: 0;
			width:100%;
		}
}

.timeline .timeline-entry {
	color: #c10100 !important;
}
.timeline .timeline-item {
    min-height: 100px !important;
    margin-bottom: 20px !important;
}

.custom-counter {
  margin: 0;
  padding: 0;
  list-style-type: none;
	font-size: 15px;
}

.custom-counter li {
  counter-increment: step-counter;
  margin-bottom: 10px;
	background: #f5f5f5;
	padding: 5px;
	border-bottom: #dddddd 1px solid;
}

.custom-counter li::before {
  content: counter(step-counter);
  margin-right: 15px;
margin-left: 5px;
  color: black;
  font-weight: bold;
	font-size: 15px;
}
.custom-counter2 {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 15px;
}

.custom-counter2 li {
  counter-increment: step-counter;
  margin-bottom: 10px;
  padding: 5px;
	line-height: 12px !important;

}

.custom-counter2 li::before {
  content: counter(step-counter);
  margin-right: 15px;
  margin-left: 5px;
  color: black;
  font-weight: bold;
  font-size: 15px;
  
}

groupk a.plus {
    background: url(../Images/user_add.png) no-repeat scroll right 0 transparent;
    color: #bf0211;
    display: block;
    float: right;
    font-size: 10px;
    font-weight: bold;
    line-height: 23px;
    padding-right: 20px;
    background-size: 23px 23px;
}	
.box-kenan {
	border: #ccc dotted 1px !important;
	padding: 10px !important;
	background-color: rgba(0,0,0,0.03);
}
.box-kenan-zeminsiz {
	border: #ccc dotted 1px !important;
	padding: 10px !important;
}
#myDIV .btn-kenan {
    
    outline: none;
    padding: 5px 5px;
    background-color:#f9f9f9;
    cursor: pointer;
    font-size: 14px;
	color: #999;
	font-weight: bold;
}
/* Style the active class, and buttons on mouse-over */
#myDIV .active, .btn-kenan:hover {
    background-color: #f9f9f9;
    color: #c10100;
	border-bottom: 2px #c10100 solid;
}
#myDIV2 .btn-kenan {
    
    outline: none;
    padding: 4px 3px;
    background-color:#f9f9f9;
    cursor: pointer;
    font-size: 14px;
	color: #999;
	font-weight: bold;
}
/* Style the active class, and buttons on mouse-over */
#myDIV2 .active, .btn-kenan:hover {
    background-color: #f9f9f9;
    color: #c10100;
	border-bottom: 2px #c10100 solid;

}
#myDIV3 .btn-kenan {
    
    outline: none;
    padding: 4px 3px;
    background-color:#f9f9f9;
    cursor: pointer;
    font-size: 14px;
	color: #999;
	font-weight: bold;
}
/* Style the active class, and buttons on mouse-over */
#myDIV3 .active, .btn-kenan:hover {
    background-color: #f9f9f9;
    color: #c10100;
	border-bottom: 2px #c10100 solid;

}
#myDIV4 .btn-kenan {
    
    outline: none;
    padding: 5px 5px;
    background-color:#f9f9f9;
    cursor: pointer;
    font-size: 14px;
	color: #999;
	font-weight: bold;
}
/* Style the active class, and buttons on mouse-over */
#myDIV4 .active, .btn-kenan:hover {
    background-color: #f9f9f9;
    color: #c10100;
	border-bottom: 2px #c10100 solid;

}
.bg-kizilay {
    background-color: #c10100;
}

.height-190 {
	min-height: 190px !important;
}
.overlay.dark-6 {
    background-color: rgba(0,0,0,.01) !important;
}
.site-grisi {
    background-color: #f9f9f9;
}
.w-180 {
    width: 180px !important;
}
.border-1 {
	border: 1px #ccc solid !important;
}
.ortala {
	text-align: center !important;
}
.bg-uyari {
    background-color: #f2dede;
}
.w-220 {
    width: 220px !important;
}
@media (min-width: 768px) {
    .nine-cols .col-md-1,
    .nine-cols .col-sm-1,
    .nine-cols .col-lg-1 {
        width: 20%;
        *width: 20%;
    }
}

@media (min-width: 992px) {
    .nine-cols .col-md-1,
    .nine-cols .col-sm-1,
    .nine-cols .col-lg-1 {
        width: 20%;
        *width: 20%;
    }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */
@media (min-width: 1200px) {
    .nine-cols .col-md-1,
    .nine-cols .col-sm-1,
    .nine-cols .col-lg-1 {
        width: 11.11%;
        *width: 11.11%;
    }
}


@media (min-width: 768px) {
    .ten-cols .col-md-1,
    .ten-cols .col-sm-1,
    .ten-cols .col-lg-1 {
        width: 20%;
        *width: 20%;
    }
}

@media (min-width: 992px) {
    .ten-cols .col-md-1,
    .ten-cols .col-sm-1,
    .ten-cols .col-lg-1 {
        width: 20%;
        *width: 20%;
    }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */
@media (min-width: 1200px) {
    .ten-cols .col-md-1,
    .ten-cols .col-sm-1,
    .ten-cols .col-lg-1 {
        width: 10%;
        *width: 10%;
    }
}