body {    font-family: 'Open Sans', sans-serif;}
   /*  font-family: 'Noto Sans', sans-serif;

    font-family: 'Open Sans', sans-serif;

    font-family: 'Roboto', sans-serif; */
	
a {text-decoration:none}
	
.brand img {height:95px;margin-left:-40px}
.top-bar {background:#4eae3b}
.top-bar ul.nav li a {color:#fff;font-size:.9rem}

.navbar {padding-bottom:0;padding-top:0px}

.left-menu-open-close-button {font-size:24px}


#header-page h1 {font-size:2rem}
#breadcrumb-page {background:#ecf0f1}
#breadcrumb-page a {color:#6c757d}
#breadcrumb-page .active {font-weight:600}
#header-page {background:#7f8c8d;background-image:url("/foto/bg01.jpg");background-repeat:no-repeat;background-position:100% 100%;background-size:100% 100%}
#header-page  h1 {color:#ecf0f1}

#sidebarToggle img {width:45px}


.caption h3 {color:#2c3e50;font-size:1.4rem}
.caption p {color:#2c3e50}

.thumbnail {transition:all .3s ease}
.thumbnail:hover {box-shadow:1px 5px 15px #7f8c8d}

.ikon {
	width:40px;
	margin-top:5px;
	
}

.ikon-rotate-1 {
	animation:mymove 4s infinite;
}
.ikon-rotate-2 {
	animation:mymove2 4s infinite;
}
.ikon-rotate-3 {
	animation:mymove3 4s infinite;
}
.ikon-rotate-4 {
	animation:mymove4 4s infinite;
}


@keyframes mymove {
  50% {transform: rotate(360deg);}
}
@keyframes mymove2 {
  50% {transform: scale(1.2);}
}
@keyframes mymove3 {
  50% {margin-left:15px;}
}
@keyframes mymove4 {
  50% { transform: skewX(10deg);}
}

.navbar .nav-link {font-weight:600}

.main-page {background-image:url("/foto/bg02.jpg");background-attachment:fixed;background-position:60% 0%;height:450px;width:100%}
.footer-page {background:#2c3e50;color: #fff;padding:45px}

.footer-page h2 a {color: #bdc3c7;text-decoration:none}
.footer {list-style:none;padding:0}

.footer li {display:inline-block}
.footer li a {color: #bdc3c7;text-decoration:none;padding:10px 15px}

.copyright {font-size:.8rem;color:#bdc3c7}
.copyright a {color:#bdc3c7;text-decoration:none}

.center-slider h3 {font-size:1.2rem;padding-top:20px;padding-top:20px;color:#2c3e50}
.center-slider p {color:#2c3e50}

.slick-section h2 {font-family: 'Fascinate', cursive;font-size:2.4rem}

#sidebar-wrapper {
          width: 6%; 
          position: fixed;
 }
 
 #page-content-wrapper {
	 width:94%;
	 margin-left:6%
 }
 
 
#sidebar-wrapper .list-group {width:100%;}
 
 
 .tooltip{
   font-size: 1.1rem;
   font-weight:600;
   padding:15px 15px;
   
}

#sidebar-wrapper .list-group-item {padding:11px}


.whatsapp-share-boxes {position:fixed;bottom:0;z-index:99999}
.whatsapp-share-button .btn {padding: 8px 10px 6px 10px;font-size: 15px;border-radius: 14px 14px 0 0;box-shadow:1px 5px 15px #2e3131;transition:all 400ms ease}
.whatsapp-share-button .btn i {font-size: 32px;margin-right:4px}



.sosyal-medya div a .fa {
  font-size: 40px;
  color: #262626;
  line-height:80px;
  transition: .5s;
  padding-right: 14px;
}

.sosyal-medya div a span {
  padding:0;
  margin:0;
  position:absolute;
  top: 30px;
  color: #262626;
  letter-spacing: 4px;
  transition: .5s;
}

.sosyal-medya div a {
  text-decoration: none;
  display:absolute;
  display:block;
  width:210px;
  height:80px;
  background: #fff;
  text-align:left;
  padding-left: 20px;
  transform: rotate(-30deg) skew(25deg) translate(0,0);
  transition:.5s;
  box-shadow: -20px 20px 10px rgba(0,0,0,.5);
}
.sosyal-medya div a:before {
  content: '';
  position: absolute;
  top:10px;
  left:-20px;
  height:100%;
  width:20px;
  background: #b1b1b1;
  transform: .5s;
  transform: rotate(0deg) skewY(-45deg);
}
.sosyal-medya div a:after {
  content: '';
  position: absolute;
  bottom:-20px;
  left:-10px;
  height:20px;
  width:100%;
  background: #b1b1b1;
  transform: .5s;
  transform: rotate(0deg) skewX(-45deg);
}

.sosyal-medya div a:hover {
  transform: rotate(-30deg) skew(25deg) translate(20px,-15px);
  box-shadow: -50px 50px 50px rgba(0,0,0,.5);
}

.sosyal-medya div:hover .fa {
  color:#fff;
}

.sosyal-medya div:hover span {
  color:#fff;
}

.sosyal-medya div:hover:nth-child(1) a{
  background: #3b5998;
}
.sosyal-medya div:hover:nth-child(1) a:before{
  background: #365492;
}
.sosyal-medya div:hover:nth-child(1) a:after{
  background: #4a69ad;
}

.sosyal-medya div:hover:nth-child(2) a{
  background: #00aced;
}
.sosyal-medya div:hover:nth-child(2) a:before{
  background: #097aa5;
}
.sosyal-medya div:hover:nth-child(2) a:after{
  background: #53b9e0;
}

.sosyal-medya div:hover:nth-child(3) a{
  background: #dd4b39;
}
.sosyal-medya div:hover:nth-child(3) a:before{
  background: #b33a2b;
}
.sosyal-medya div:hover:nth-child(3) a:after{
  background: #e66a5a;
}

.sosyal-medya div:hover:nth-child(4) a{
  background: #e4405f;
}
.sosyal-medya div:hover:nth-child(4) a:before{
  background: #d81c3f;
}
.sosyal-medya div:hover:nth-child(4) a:after{
  background: #e46880;
}




.card{
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
      transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  padding: 14px 80px 18px 36px;
  cursor: pointer;
}

.card:hover{
     transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

.card h3{
  font-weight: 600;
  color:#212529;
}
.card p{
  font-weight: 600;
  color:#212529;
}

.card img{
  position: absolute;
  top: 20px;
  right: 15px;
  max-height: 120px;
}

.card-1{
  background-image: url(/assets/images/ionic-native-card.png);
      background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;
}

.card-2{
   background-image: url(/assets/images/components-card.png);
      background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;
}

.card-3{
   background-image: url(/assets/images/theming-card.png);
      background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;
}

.card-4{
   background-image: url(/assets/images/icon01.png);
      background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;
}

.card-5{
   background-image: url(/assets/images/icon02.png);
      background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;
}

.card-6{
   background-image: url(/assets/images/icon03.png);
      background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;
}

@media(max-width: 990px){
  .card{
    margin: 20px;
  }
} 







@media (max-width: 768px) {
	#sidebar-wrapper {
		width: 16%;
		position: fixed;
		background: #fff;
		background-color: rgb(255, 255, 255);
		z-index: 9999999999999999;
	}
	#page-content-wrapper {
		width:100%;
		margin-left:0%
	}
	.ikon {
		width:32px;
		margin-top:5px;
	}
	#sidebar-wrapper .list-group-item {padding:8px}
}