@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
@import url('https://fonts.googleapis.com/css?family=Baloo+Tammudu');

.backdrop-panel{z-index:0}
.overlay{background:#000;position:absolute;top:0;left:0;right:0;bottom:0; opacity: 0.3;
    filter: alpha(opacity=30);}
ul{margin-left:-40px}
.hidden{display:none}
.header-bar {background: #fff;}
.header-bar .title{color:#e51235;font-weight:bold;border-bottom:2px solid #e6e6e6}
.header-bar .btn{color:#000!important}
.img-responsive{width:100%;} 
.radius-5{border-radius:5px}
.radius-10{border-radius:10px}
.radius-15{border-radius:15px}
.card{position:relative;margin-top:20px; 
  /**    animation-name: gonder; 
  animation-duration: 500ms;**/ }
@keyframes gonder { 
0% {
    margin-top:150px;
    opacity:0.1;

}
50%{
    opacity:0.7;
}
100% {
     margin-top:20px;
      opacity:1;
  
}
}


.card h3{color:#000;margin-top:5px;}
.profile{margin-bottom:30px}
.profile img{height:30px;width:30px;border-radius:90px;border:2px solid #e51235;float:left}
.profile span{float:left;margin-top:5px;margin-left:10px;font-family:roboto;color:#555;font-weight:bold}
.category-box{position:absolute;top:7px;left:-5px;padding:7px 10px; background:#e51235;color:#fff;font-weight:bold;font-family:roboto;border-radius:5px}

.label{border-radius:5px ;padding:5px 7px;}
.lbl-red{background:#e51235;color:#fff}
.lbl-default{font-weight:bold;color:#e51235}
.btn-full{width:100%;}

.btn{border-radius:5px;font-weight:bold;background:#e51235;color:#fff!important;}
.padded-list{font-weight:bold;letter-spacing:1px}

.profile-header{text-align:center;position:relative;}
.profile-content{}
    .profile-content img{width:150px;border-radius:50%;border:4px solid #fff;margin-top:-100px}
    .profile-header-follow{position:absolute;top:10px;right:10px;font-family:roboto;color:#fff;background:#e51235;border-radius:5px;padding:7px 10px;font-weight:bold;letter-spacing:1px}
    .profile-header-message{position:absolute;top:50px;right:10px;font-family:roboto;color:#fff;background:#e51235;border-radius:5px;padding:7px 10px;font-weight:bold;letter-spacing:1px}
    .profile-header-takipci{position:absolute;left:10px;top:10px;color:#fff;text-shadow:#000 2px 2px;font-size:15px}
    .profile-social img{height:30px;width:30px;border:none;margin-top:-3px;margin-left:3px;margin-right:3px}
    .profile-contact{width:100%;color:#fff;background:#e51235;margin:0px;padding:10px;font-weight:bold;letter-spacing:1px;font-size:15px;border-radius:5px}

.mytab-menu{width:100%;min-height:40px;margin-bottom:-15px}
    .mytab-menu  a{background:#fff;color:#000;padding:10px;font-family:roboto;font-weight:bold;border:none;margin:5px}
    .mytab-menu  a:first-child{margin-left:0px}
    .mytab-menu  .myactive{border-bottom:2px solid #e51235;color:#e51235}
 .profile-top{padding:8px;position:relative;height:66px;border-bottom:1px solid #e6e6e6}
    .profile-top-img img{border-radius:90px;border:3px solid #e51235;height:50px;width:50px}
    .profile-top h4{color:#000;margin:0px}
    .profile-top span{color:#000;font-size:15px}
    .profile-top .pull-left{margin-top:7px;margin-left:3px}
    .profile-top .pull-left h4{margin-bottom:4px;font-weight:bold;letter-spacing:1px;font-size:17px}
    .profile-top .pull-right{margin-top:12px;margin-right:10px}
    .profile-top .pull-right a{font-size:17px;color:#fff;font-weight:bold;letter-spacing:1px}
    /***F9BF3B*/
    .profile-top-img{float:left;width:60px;height:60px}
.tarif-detay{}
    .tarif-detay h1{font-weight:bold;font-size:25px;margin:0px;line-height:35px;margin:10px}
    .tarif-detay p{}

    .bottom-menu{position:fixed;bottom:0;left:0;right:0;left:0;height:55px;padding-left:10px;padding-right:10px}
    .bottom-menu i{line-height:55px;font-size:30px;color:#fff;}
    .bottom-menu span{color:#fff;line-height:55px;font-size:23px;margin-left:7px;letter-spacing:2px}
.tarif-bilgi{border-bottom:1px solid #e6e6e6;margin-top:10px;margin-bottom:5px!important;}
.tarif-bilgi img{height:40px;}
.tarif-bilgi p{margin-top:5px;font-weight:bold}


.horizontal-list{}

    .horizontal-list table{margin:0px;border:none;padding:0px}
    .horizontal-list table  tr td{border:none;padding:0px;vertical-align:top}
    .horizontal-list table  tr td:first-child img{width:120px;height:80px;border-radius:5px}
    .horizontal-list table  tr td:last-child h1{margin:0px 0px 5px 0px;font-size:14px!important;font-weight:bold;letter-spacing:0.5px;line-height:20px;height:45px}
    .horizontal-list table  tr td:last-child p{font-size:13px;}
    .horizontal-list table  tr td:last-child {text-align:left;padding-left:10px}
    .horizontal-list table  tr td:last-child .profile span{font-weight:normal}
    .horizontal-list table  tr td:last-child .profile{padding-bottom:5px}
    .detay{margin-bottom:30px;float:left;margin-right:20px}
    .detay img{height:20px;width:20px;border-radius:90px;float:left}
    .detay span{float:left;margin-left:10px;font-family:roboto;color:#555;margin-top:0px}

     .hhh{
         background:url('http://medimoon.com/wp-content/uploads/2015/03/Vegetarian-Diet.jpg');padding:25px 10px 20px 10px;height:180px;position:relative;
              background-size: cover;
                background-position: center; 
     }
    .btn-select{width:100%;background:#fff;font-size:14px;border-radius:5px;color:#000;padding:13px 25px 13px 25px;position:relative}
.bg-red{ 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e51235+2,d31024+100 */
background: #e51235; /* Old browsers */
background: -moz-linear-gradient(top, #e51235 2%, #d31024 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e51235 2%,#d31024 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e51235 2%,#d31024 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e51235', endColorstr='#d31024',GradientType=0 ); /* IE6-9 */

}


.ripple{position:relative;overflow:hidden}
.ripple:after{content:"";
              display:block;position:absolute;width:100%;
              height:100%;top:0;left:0;pointer-events:none;
              background-image:radial-gradient(circle,#000 10%,transparent 10.01%);
              background-repeat:no-repeat;background-position:50%;
              transform:scale(10,10);opacity:0;transition:transform .5s,opacity 1s}
.ripple:active:after{transform:scale(0,0);opacity:.2;transition:0s}

.ripple2{position:relative;overflow:hidden}
.ripple2:after{content:"";
              display:block;position:absolute;width:100%;
              height:100%;top:0;left:0;pointer-events:none;             
              transform:scale(10,10);transition:transform .5s,opacity 1s}
.ripple2:active:after{transform:scale(0,0);transition:0s}


.holder{width:100%;    background-position: center!important;background-size: cover!important;border-radius:5px;margin:0px;padding:0px;background:url("/images/imgholder.png");}


/**Img Ratiolar ayarlanıyor **/

    .holder-ratio-4-3{width:100%;    background-position: center!important;background-size: cover!important;border-radius:5px;margin:0px;padding:0px;background:url("/images/imgholder.png");}
    .img-ratio-4-3{width:100%;height:250px;}

@media screen and (min-device-width: 0px) and (max-device-width: 250px) { 
    .img-ratio-4-3{width:100%;height:110px}
     .holder-ratio-4-3{width:100%;height:110px}
}
@media screen and (min-device-width: 250px) and (max-device-width: 300px) { 
    .img-ratio-4-3{width:100%;height:160px}
    .holder-ratio-4-3{width:100%;height:160px}
}
@media screen and (min-device-width: 300px) and (max-device-width: 350px) { 
     .img-ratio-4-3{width:100%;height:190px}
    .holder-ratio-4-3{width:100%;height:190px}
}
@media screen and (min-device-width: 350px) and (max-device-width: 400px) { 
     .img-ratio-4-3{width:100%;height:210px}
      .holder-ratio-4-3{width:100%;height:210px}
}
@media screen and (min-device-width: 400px) and (max-device-width: 450px) { 
    .img-ratio-4-3{width:100%;height:230px}
    .holder-ratio-4-3{width:100%;height:230px}
}
@media screen and (min-device-width: 450px) and (max-device-width: 500px) { 
    .img-ratio-4-3{width:100%;height:250px}
    .holder-ratio-4-3{width:100%;height:250px}
}
@media screen and (min-device-width: 500px) and (max-device-width: 550px) { 
    .img-ratio-4-3{width:100%;height:270px}
    .holder-ratio-4-3{width:100%;height:270px}
}
@media screen and (min-device-width: 550px) and (max-device-width: 600px) { 
    .img-ratio-4-3{width:100%;height:290px}
    .holder-ratio-4-3{width:100%;height:290px}
}
@media screen and (min-device-width: 600px) and (max-device-width: 650px) { 
    .img-ratio-4-3{width:100%;height:310px}
    .holder-ratio-4-3{width:100%;height:310px}
}
@media screen and (min-device-width: 650px) and (max-device-width: 700px) { 
    .img-ratio-4-3{width:100%;height:330px}
    .holder-ratio-4-3{width:100%;height:330px}
}