/*==============================================
[Main stylesheet style.css]

Author:	SINDEVO.COM - Smart Interface Development
Version:	1.0
Created:	17 October 2018
Last updated:	17 October 2018
Template:	Mobili - Mobile HTML Template
================================================*/
/*
[Table of Contents]

1. RESET
2. GENERAL
3. H TITLES
4. HEADER AND HEADER NAVIGATION
5. CUSTOM BUTTONS
6. LEFT AND RIGHT SLIDE PANELS
    6-1. USER ACCOUNT SIDEBAR RIGHT
    6-2. MAIN NAVIGATION SIDEBAR LEFT
7. PAGES LAYOUT GENERAL
    7-1. SWIPE SLIDER
    7-2. FEATURED LISTS
    7-3. TEAM DESIGN LAYOUT
    7-4. MUSIC LIST DESIGN LAYOUT
8. POPUPS
9. SHOP LAYOUT
     9-1. SHOP ITEM PAGE 
     9-2. SHOPPING CART - CECKOUT
     9-3. SUCCESS PAGE
10. PHOTO GALLERY
11. BLOG LAYOUT
12. FORMS
      12.1 LOGIN FORM
      12.2 CONTACT FORM
13. TABS / ACCORDION / TABLES
14. MEDIA QUERIES
*/
/*===============================================*/
/* 1. RESET		 						 */
/*===============================================*/

/*===============================================*/
/* 2. GENERAL		 						 */
/*===============================================*/	
html,
body {
position: absolute;
height: 100%;
width: 100%;
min-width: 250px;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
color: #232323;
font-size: 18px;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
font-weight:300;
}
input, textarea {
font-family: 'Roboto', sans-serif;
color: #232323;
font-size: 14px;
}
.clear{ 
clear:both; 
display:block;
}
.clearleft{ 
clear:both; 
float:left; 
display:block;
}
a {
text-decoration: none;
color: #484848;
}
p{
padding:0px;
margin:0px;
line-height:20px;
}
#mobile_wrap{
width:100%;
margin:auto;
}

/*===============================================*/
/* 3. H TITLES		 						 */
/*===============================================*/	
.a1tag:after {
  content: 'Durum';
}
.a2tag:after {
  content: 'Aidatlar';
}
.a3tag:after {
  content: 'Giderler';
}
.a4tag:after {
  content: 'İş Listesi';
}
.a5tag:after {
  content: 'Kasa';
}
/*===============================================*/
/* 4. HEADER AND HEADER NAVIGATION */
/*===============================================*/
.navbar{
width:94%;
min-width: 250px;
padding:0px 3% 0px 3%;
height:70px;
display:flex;
position: fixed;
float: left;
align-items:center;
background-color: whitesmoke;
box-shadow: 0 0px 3px 0px #333;
}
.navbar--bg{
background-color: #86d6ed;
}
.navbar--fixed{
left:0;
z-index:999999;
}
.navbar--fixed-top{
top:0px;
}
.navbar--fixed-bottom{
bottom:0;
}
.navbar__col{
flex-grow:1;
}
.navbar__col--title{ 
font-size:28px;
font-weight:900;
}
.navbar__col-subtitle{
display:block;
font-size:10px;
font-weight:300;
}
.navbar__col--title-sm{ 
font-size:22px;
}
.navbar__col--title-centered{ 
text-align:center;
}
.navbar__col--title a{
color: #fff;
}
.navbar__col--title a span{ 
color:#060043;
}
.navbar__col--icon{
width:auto;	
position: relative;
}
.navbar__col--icon img{
  height: 50px;
  display:block;
  max-width:auto;
}
.navbar__col--icon-left{
margin-right:25px;
}
.navbar__col--icon-right{
margin-left:25px;
}
.navbar__col--icon-right a{
float: right;
font-size: 18px;
font-weight: 500;
width: auto;
}




/*===============================================*/
/* 5. CUSTOM BUTTONS */
/*===============================================*/

/*===============================================*/
/* 7. PAGES LAYOUT GENERAL */
/*===============================================*/	
/* === Views === */

/* === Pages === */

#pages_maincontent{
width:100%;
height: auto;
padding:0px 0 0px 0;
position: absolute;
top: 70px; 
left: 0; 
right: 0; 
bottom: 70px;
float: left;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
#pages_maincontent.pages_maincontent--conversation{
bottom: 60px;
}
#pages_maincontent p{
padding:0 0 15px 0;
margin:0px;
}
#pages_maincontent img{
display:block;
max-width:100%;
}
#kasa{
position:absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
width: 200px; 
height: 50px; 
margin:auto; 
text-align: center;
}
#kasa p{
font-size: 50px; 
font-weight: bold;
}
/* 7-1. SWIPE SLIDER */

.swiper-container-toolbar {
width:100%;
min-width: 250px;
background-color:whitesmoke;
padding:0px 0% 0px 0%;
max-height: 75px;
height: 50px;
height: auto;
margin:0px 0% 0 0;
position: fixed;
bottom:0px;
overflow: hidden;
z-index: 999999;
 box-shadow: 0 0px 3px 0px #333;
}
.toolbar-icon a{
font-size: 12px;
color: black;
display:block;
width:20%;
margin:0;
padding:7px 0 4.4px 0;
float:left;
text-align:center;
opacity: 60%;
}
.toolbar-icon a.active{
  font-weight: 500;
  opacity: 100%;
  /*filter: invert(12%) sepia(88%) saturate(7099%) hue-rotate(1deg) brightness(106%) contrast(113%);*/
}
.toolbar-icon a img{
display: block;
max-width: 20%;
max-height: 40px;
min-width: 20px;
margin:0 auto -15px auto;
}

/* 7-2. FEATURED LISTS */

ul.features_list{
padding:0 0 20px 0;
width:100%;
margin:0px;
list-style:none;
float:left;
clear:both;
}
ul.features_list li{
border-bottom:1px #e6e6e6 solid;
padding:0 2% 20px 2%;
margin:0 0 20px 0;
display:block;
width:43%;
float:left;
font-size:18px;
}
ul.features_list li:nth-child(even){
float:right;
}
ul.features_list li a{
color:#000;
padding:0px;
margin:0px;
}
ul.features_list li img{
display:inline-block;
width:10%;
float:left;
margin:0px;
padding:0px;
}
ul.features_list li span{
display:inline-block;
max-width:90%;
padding:2% 0 0 5%;
font-weight:400;
float:left;
}


ul.features_list_detailed{
padding:0 0 20px 0;
width:100%;
margin:0px;
list-style: none;
float:left;
clear:both;
overflow: hidden;
}
ul.features_list_detailed li{
padding:20px 2%;
margin:0;
display:block;
width:100%;
float:left;
border-bottom:1px #ddd solid;
}
ul.features_list_detailed li img{
  display:block;
  max-width:100%;
  float:left;
  margin:0px;
  padding:0px;
  }
ul.features_list_detailed li:nth-child(even){
float:left;
}
ul.features_list_detailed li .feat_small_icon{
width:10%;
float:left;
margin:2px 0 0 0;
}
ul.features_list_detailed li .feat_small_details{
width:85%;
float:left;
padding:0 0 0 5%;
}
ul.features_list_detailed li .feat_small_details p{
padding:0 0 10px 0;
}
ul.features_list_detailed li .feat_small_details a{
color:#232323;
}
ul.features_list_detailed li .feat_small_details h4{
font-weight:700;
font-size:20px;
padding:0 0 0px 0;
margin:0px;
}

/* Messages */
/*===============================================*/
/* 13. TABS & ACCORDION & TABLES */
/*===============================================*/	
/* Tabs
/*------------------------------------------*/
/* ------Accordion---------- */
.accordion{
	width:100%;
	margin:0 auto 40px auto;
}
.accordion__item {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-bottom:1px #dadada solid;
}
.accordion__input{
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.accordion__label {
  position: relative;
  display: block;
  cursor: pointer;
  padding:6px 10px;
  font-size:20px;
  font-weight:300;
      -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.accordion__content {
  max-height: 0;
  overflow: hidden;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.accordion__content p {
  padding:10px 0px !important;
}
.accordion__input:checked ~ .accordion__content {
  max-height: 500px;
}
.accordion__input:checked ~ .accordion__label,  .accordion__label:hover{
  background-color: #445cfd;
  color:#fff;
}
.accordion__label:hover span{
  background:url(images/drop-down-faq-selected.png) no-repeat center;
}
.accordion__label span {
  position: absolute;
  right: 5%;
  top: 45%;
  display: block;
  width: 11px;
  height: 6px;
  text-align: center;
  background:url(images/drop-down-faq.png) no-repeat center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.accordion__input[type=radio]:checked + .accordion__label span {
  transform: rotateX(180deg);
  background:url(images/drop-down-faq-selected.png) no-repeat center;
}

/* ------Toggle---------- */
.toggle{
	width:100%;
	margin:0 auto 40px auto;
}
.toggle__item {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-bottom:1px #dadada solid;
}
.toggle__input{
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.toggle__label {
  position: relative;
  display: block;
  cursor: pointer;
  padding:6px 10px;
  font-size:20px;
  font-weight:300;
      -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.toggle__content {
  max-height: 0;
  overflow: hidden;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.toggle__content p {
  padding:10px 10px !important;
}
.toggle__input:checked ~ .toggle__content {
  max-height: 500px;
}
.toggle__input:checked ~ .toggle__label,  .toggle__label:hover{
  background-color: #445cfd;
  color:#fff;
}
.toggle__label:hover span{
  background:url(images/drop-down-faq-selected.png) no-repeat center;
}
.toggle__label span {
  position: absolute;
  right: 5%;
  top: 45%;
  display: block;
  width: 11px;
  height: 6px;
  text-align: center;
  background:url(images/drop-down-faq.png) no-repeat center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.toggle__input[type=checkbox]:checked + .toggle__label span {
  transform: rotateX(180deg);
  background:url(images/drop-down-faq-selected.png) no-repeat center;
}

/* TABLES */
ul.responsive_table{ 
width:100%; 
float:left; 
clear:both; 
margin:0 0 10px 0; 
padding:0px; 
list-style:none;
}
li.table_row{
width:100%; 
float:left; 
clear:both; 
line-height:30px;
padding:0px; 
list-style:none;
margin:0 0 1px 0;
background-color:#f5f5f4;
}
.table_section_small{
width:15%; 
float:left; 
padding:0 0 0 2%;
font-weight: 500;
}
.table_section{ 
width:60%; 
float:left;
padding:0 0 0 2%;
}
.table_section_right{ 
width:17%; 
text-align: end;
float:left;
padding:0 2% 0 2%;
}
.accordion__content ul li .table_section_small{
width:25%; 
float:left; 
padding:0 0 0 2%;
font-weight: 500;
}
.accordion__content ul li .table_section{ 
width:50%; 
float:left;
padding:0 0 0 2%;
}
.accordion__content ul li .table_section_right{ 
width:17%; 
text-align: end;
float:left;
padding:0 2% 0 2%;
}
.table_section_14{ 
width:23%; 
float:left;
padding:0 0 0 2%;
text-align:center;
display:block;
}
.table_section_14 img{
display:inline-block;
text-align:center;
padding:10px 0 0 0;
margin:0px;
line-height:10px;
}
.table_section_14 strong{
font-size:18px;
}
.table_section_14 a.buy_now{
display:inline-block;
text-align:center;
padding:0 5px;
margin:5px 0;
background-color:#94cb01;
color:#FFFFFF;
font-size:12px;
-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
}  
ul.responsive_table li:first-child{
background-color:#86d7ec;
color:#222222;
}
.message-sent .message-text {
    background-color: #86d7ec;
}
/*===============================================*/
/* 14. MEDIA QUERIES */
/*===============================================*/	
/* -------------SMALL DESKTOP--------- */
@media screen and (max-width: 1200px) {
.bottombarpages{
height:70px;
}
.gallery_switch a{
width:8%;
padding:0px;
}
.gallery_switch a img{
max-width:60%;
}
.bottom_menu_open a img{
max-width:20%;
}

}
/* -------------TABLET PORTRAIT--------- */
@media screen and (max-width: 780px) {
.navbar{
height:50px;
}
.navbar__col--title{ 
font-size:22px;
}
.navbar__col--title-sm{ 
font-size:18px;
}
.navbar__col--icon img{
height:40px;
}
.navbar__col--icon-left{
margin-right:15px;
}
.navbar__col--icon-right{
margin-left:15px;
}
#pages_maincontent{
top: 50px; 
bottom: 50px;
}
blockquote{
font-size:15px;
line-height:22px;
}
blockquote span{
font-size:14px;
line-height:22px;
} 
ul.features_list li{
width:96%;
clear:both;
font-size:14px;
padding:0 2% 15px 2%;
margin:0 0 15px 0;
}
ul.features_list li:nth-child(even){
float:left;
}
ul.features_list li span{
padding:2% 0 0 5%;
font-weight:700;
}
ul.features_list_detailed li{
width:96%;
clear:both;
padding:10px 2%;
}
ul.features_list_detailed li .feat_small_details h4{
font-size:16px;
}

a.button_full{
padding:10px 0;
}
.bottombarpages{
height:60px;
}
.gallery_switch a{
width:8%;
padding:0px;
}
.gallery_switch a img{
max-width:60%;
}
.slidertoolbar > .swiper-pagination {
bottom: 13%;
}
.swiper-button-next{
	bottom:13%;
}
.swiper-button-prev{
	bottom:13%;
}
.slidertoolbar .slider-caption{
bottom:20%;	
}
.main_nav_underline ul li img{
max-width:8%;
}
.main_nav_underline ul li a{
font-size:13px;
}
.user-nav ul li img{
max-width:8%;
}
.user-nav ul li strong{
width:20px;
height:20px;
line-height:20px;
}
.user-nav ul li a{
font-size: 13px;
}
.user_thumb{
height:150px;
}

}
/* -----------------MOBILE---------------- */
@media screen and (max-width: 680px) {
.panel {
width: 85%;
}
h2.page_title{
font-size:16px;
line-height:25px;
font-weight:400;
padding:5px 0;
}
#pages_maincontent{
  bottom: 57px;
  }
.content-block {
padding:25px 5%;
}
.bottombarpages{
height:50px;
}
.gallery_switch a{
width:10%;
padding:0px;
}
.gallery_switch a img{
max-width:60%;
}
.bottom_menu_open a img{
max-width:40%;
}
}

@media screen and (max-width: 570px) {
#pages_maincontent{
bottom: 52px;
}
}
/* -----------------SMALL MOBILE---------------- */
@media screen and (max-width: 470px) {

.gallery_switch a{
width:8%;
padding:0px 5px;
}
.gallery_switch a img{
max-width:100%;
}
.bottom_menu_open a img{
max-width:45%;
padding:13px 0 0 0;
}
#pages_maincontent{
  bottom: 50px;
  }
}
/* -----------------SMALLER MOBILE---------------- */
@media screen and (max-width: 360px) {	
.gallery_switch a{
width:10%;
padding:0px 3px;
}
.bottom_menu_open a img{
max-width:50%;
padding:15px 0 0 0;
}
#pages_maincontent{
  bottom: 50px;
  }
}