.newssl {
    height: 50px;
    margin-top: -58px;
    float: right;
    margin-right: 170px;
}

.multicurrencySel{
	height: 50px;
    margin-top: -50px;
    float: right;
    margin-right: 240px;
}

.footer-payment {
    color: black;
    background-color: white;
    max-width: 100%;
}
 
 .brand__copy{
	margin: 0;
	float:right;
	margin-top: -3%;
	margin-right: -20px;
	    width: 60%;
}

 .text-alignemnt-footer{
 text-align:left;
 }
 
 	.ziraat-card-input-error{
     	opacity: 1 !important;
	    color: #ff2525 !important;
	    border: 1px solid rgba(255, 37, 37, 0.35) !important;
	    -webkit-box-shadow: 0px 1px 0px rgba(255, 37, 37, 0.25), inset 0px 3px 6px rgba(255, 37, 37, 0.25) !important;
	    box-shadow: 0px 1px 0px rgba(255, 37, 37, 0.25), inset 0px 3px 6px rgba(255, 37, 37, 0.25) !important;
	}
 
 @media only screen 
  and (min-width: 280PX) 
  and (max-width: 1220px)
  and (orientation: portrait) {
  .brand__copy{
	margin: 0;   
	 width: 100%;
	 
}
.text-alignemnt-footer{
 text-align:center;
 }
   .footer-payment{
  
 padding-left: 15px !important;
 }
 }
 
 
 @media only screen 
  and (min-width: 280PX) 
  and (max-width: 1220px)
  and (orientation: landscape) {
  .text-alignemnt-footer{
 text-align:center;
 }
   .brand__copy{
	margin: 0;
	 width: 100%;
	 
}
    .footer-payment{
  
 padding-left: 15px !important;
 }
 }
 

.nav-border-none {
    border-bottom: none !important;
    margin-bottom: 0px !important;
}
 .personal-details {
    margin-left: 10px !important;
	margin-right: -18px !important;
} 
.bg-pink-400{
background-color:  #DB5A6B;
}
.img-sm {
    width: 45px !important;
    height: 25px !important;
}
.btn-group-wrap {
    text-align: center;
}

div.btn-group {
    margin: 0 auto; 
    text-align: center;
   width: 100%;
    display: inline-block;
    margin-bottom:10px;
}
 
.icon-align{
		margin-bottom: 6px !important;
	}
	.icon-align-bottom{
		margin-bottom: -20px !important;
margin-top: -63px !important;
right: -179px !important; 
	} 
 .panel-white > .panel-heading{
    background-color: #E8F5E9;
border-color: #4CAF50;
    
}
.cause-title {
    height: 25px;
   color: #205823 !important;
 }
 .input-group-btn {
    padding-right: 0px;
}
 .panel-body {
    padding: 20px;
}

.btn-group, .btn-group-vertical{
	width:100%;
}
 .donate-button{
	   text-transform:none;
	   
	   height: 70px;
  	}
  	
 .modal-dialog{
 margin: 0px auto;
 }
 .cart-button{
 	padding: 13px;
margin-top: -8% !important;
margin-right: 180px;
 	
 }
 .input-group-addon > i{
 left:5px;
 }
 .page-container{
 	padding: 75px 0px;
 	background: white !important;
 } 
 .page-title{
 padding-bottom:50px;     /*  changed for background clr padding-bottom:0px;   */
 }
  .footer-donationbox{
  	bottom: 0px !important;
background-color: white !important;
left: 0px !important;
right: 0px !important;
margin-top:5px;
  	
  }
  .btn-xlg, .btn-group-xlg > .btn {
    	width: 100%;
    	font-size: 20px !important;
	}
  .heading-elements{
  top: 64%;
  }
  .selectboxit-container{
  	border: 1px solid gainsboro;
border-radius: 6px;
  }
  .input-group{
  	 
  	border-radius: 6px;
  }
  .input-group-header{
  	border: 1px solid #ddd;
  	border-radius: 6px;
  	margin-top: -31px;
right: -18px;
  }
/*   .col-md-4{
  padding-right:0px;
  }
   .col-md-8{
  padding-right:0px !important;
  padding-left:0px !important;
  }
  .col-md-3{
width:30%;
  } */
  .alert-primary-body {
    background-color: #E8F5E9;
    
}
  
  .unlimited-input{
  border:1px solid #ddd;
  border-radius: 6px;
  width: 24%;
  }
 /*  .unlimited-input:focus{
  border:1px solid #ddd;
  border-radius: 6px;
  padding-left:10px;
  } */
  .contri-input{
  	border: 1px solid #ddd;
	border-radius: 6px;
	width: 100% !important;
	padding-left: 5px;
  	
  }
 /*   .form-horizontal .form-group{
    	 right:-35px  !important;  
   } */
 
.cause-row{
padding-right:17px;
padding-left: 6px !important;
padding-bottom: 7px !important;
}
 
.lang-flags  {
 margin-top: -7%;
 margin-right: 13px !important;
  } 
.grey{
    background-color: #808080;
     }
.white{
    background-color: #fdfcec;
    border: 1px solid #e3dfa7;
}
 
 
/* .form-control{
padding-left:10px;
} */
.spinner-row {
    margin-left: -9px !important;
}
textarea.form-control{
		resize: none;
		border: 1px solid #b6c9b6;
		background-color: #808080;
		border-radius:6px;
		width: 108% !important;
margin-left: -7px !important;
margin-top: 10px;
margin-bottom: -14px !important;
	}
	textarea.form-control:focus{
	border: 1px solid #b6c9b6;
	}
	.panel-heading {
    padding-top: 8px !important;
    padding-bottom: 10px;
    padding-left: 14px;
    border-radius: 4px;
}

.affix-top{
   top: 55px;
   right: 4%;
   width: 12%;
}

.affix{
    top: 10px;
   right: 0%;
    width: 6%;
}

@media (min-width: 768px) and (max-width: 1920px) {

.affix-top {
    top: 17px !important;
    right: 50% !important;
    width: 100% !important;
}

.affix {
    top: 30px !important;
    right: 10% !important;
    width: 11% !important;
}

}
/* .affix{
   top: 10px;
   right: 0%;
   width: 12%
} */

/* .fab-menu-top-left, .fab-menu-top-right {
    top: 22px;
    right: 18%; 
} */
.fab-menu-btn.btn-float {
  padding: 21px 42px !important;           /* padding: 21px 42px !important; */
}
 .cart-content{
background-color:#f3f395;
border-radius:6px;
  }
   .icons-list{
  	margin-left:35% !important;
  } 
  .btn-icon{
  padding-left: 5px;
padding-right: 0px;
  }
 .fab-menu-btn.btn-float > i{
 left: 20%;
 }
 .quizimgblock {
  text-align: center;
  margin-bottom: 2em;
}
 .btn-flat {
    border-width: 1px;
    padding: 13px 0px;
    }
.wrapper {
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.quizimgblock img.quizitems {
  width: 100%;
  height: auto;
}
.quizimgblock a:hover img{
  opacity: 0.5;
}
.quizimgblock .check {
  position: absolute;
  top: 9%;
left: 79%;
  -ms-transform:translate(-45%, -45%);
} 
.quizimgblock a .check {
  opacity: 0;
  z-index: 9;
  transition:opacity .5s ease
}
.quizimgblock .check img {
  border: 0px !important;
  width: 36px;
}
.quizimgblock a:hover .check {
  opacity: 1;
}
.quiz-answer.active .check {
  opacity: 1;
}
.quizimgblock a:hover .check img {
  opacity: 1 !important;
}


.txt-ara-notes {
    width: 96% !important;
    padding-bottom: 13px !important;
    padding-left: 17px;
}
.quizbutton {
  text-align: center;
  margin: 1.25em auto 3em;
}
 
.quizbutton .quizbtn {
  display: inline-block;
  vertical-align: middle;
  padding: 0.65em 1.75em;
  background-color: #f6700e;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 255, 255, 0.6);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 255, 255, 0.6);
  border: solid 1px #f06c0b;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 16px;
  text-transform: uppercase;
  color: white;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}
.quizbutton .quizbtn:hover {
  color: white;
  text-decoration: none;
  background-color: #f77f27;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f77f27), to(#f6700e));
  background-image: -webkit-linear-gradient(top, #f77f27, #f6700e);
  background-image: -moz-linear-gradient(top, #f77f27, #f6700e);
  background-image: -o-linear-gradient(top, #f77f27, #f6700e);
  background-image: linear-gradient(to bottom, #f77f27, #f6700e);
}
.quizbutton .quizbtn:active {
  color: white;
  text-decoration: none;
  background-color: #f6700e;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f6700e), to(#f77f27));
  background-image: -webkit-linear-gradient(top, #f6700e, #f77f27);
  background-image: -moz-linear-gradient(top, #f6700e, #f77f27);
  background-image: -o-linear-gradient(top, #f6700e, #f77f27);
  background-image: linear-gradient(to bottom, #f6700e, #f77f27);
  -webkit-box-shadow: 0 0 0 1px #f58029, inset 0 1px 1px #b14f07;
  box-shadow: 0 0 0 1px #f58029, inset 0 1px 1px #b14f07;
}

                        /* part 2 */

@media only screen and (max-width: 767px) {
  .check { 
    top:35%; 
    left:35%; 
    -ms-transform:translate(-35%, -35%);
  }

	.quizimgblock .check img { 
      max-width: 40px; 
      max-height: 40px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .quizimgblock a .check {
	  vertical-align: middle;
	}

	.check { 
    top:35%; 
    left:35%; 
    -ms-transform:translate(-35%, -35%);
  }

	.quizimgblock .check img { 
     max-width: 55px; 
    max-height: 55px;
  }
}

.helpline{ 
font-size: 16px !important;
letter-spacing: 0.021px;
margin-top: 15px;
}
 .input-group-addon{
 padding: 8px 0px;
 }
.header-calander {
    width: 130% !important;
    margin-top: 10%;
    margin-bottom: -16%;
}
	.heading-elements {
    top: 35%;
}
 
 .blue-border{
 border:1px solid #c9aae9;
 border-radius:6px;
 }
 .pink-border{
 border:1px solid #e3dfa7;
 border-radius:6px;
 }
 
 	/*  media Queries */
  @media only screen 
  and (min-width: 280PX) 
  and (max-width: 1220px)
  and (orientation: portrait) {
  .input-group-btn {
    padding: 0px;
}
  .img-sm {
    width: 50px !important;
    height: 30px !important;
}
  .helpline{ 
  font-size: 14px !important;
  }
  .modal-full {
    width:100%;
}
.page-header{
	margin-top: -25px;
}
h6.panel-title, .h6.panel-title  {
  /*   font-size: 13px !important; */
    margin-left: -4px !important;
/* width: 84%;
 */}
    .modal-dialog{
 margin: 30px auto;
 }
 .cart-button{
 margin-top: -9% !important;
 	
 }
  
 .input-mobile{
 	width: 55% !important;
right: -22% !important;
 } 	
 .lang-flags{
 	margin-top: -29%;
margin-right: -35px !important;
 }
 /* .fab-menu-top-left, .fab-menu-top-right{
 top: 72px;
right: 40%;
 } */
 textarea.form-control{
 width: 114% !important;
 margin-top: 15px;
 }
 .helpline{
 
 }
 .unlimited-input{
 right: -22% !important;
 width: 35%;
 }
 .input-group{
 	margin-bottom: 0px;
 }
 .txt-ara-notes{
 width: 94% !important;
 margin-top: -8px;
 }
 .header-calander {
  width: 113%;
margin-top: 5%;
margin-bottom: -9%;
 }
 .header-cal{
 right: -30px !important;
padding-right: 0px;
width: 187% !important;
  	}
  	.row-header{
  	width:100% !important;
  	}
  	.icons-list{
  	margin: 0px !important;
  	}
  	} 
 
 .unlimited-input-row{
 right: 0 !important;
 }

.labelStripe .spanStripe {
  float: left;
  font-weight: bold;
}

.field {
  background: white;
	box-sizing: border-box;
	font-weight: 400;
	border: 2px solid #8280d9e6 !important;
	color: #32315E;
	outline: none;
	height: 38px;
	line-height: 48px;
	padding: 0 4px;
	cursor: text;
	border-radius: 0px !important;
   /*  width: 85%;
    float: right; 
    margin-left: 33px;*/
}

.field::-webkit-input-placeholder { color: #979797; }
.field::-moz-placeholder { color: #979797; }
.field:-ms-input-placeholder { color: #979797; }

.field:focus,
.field.StripeElement--focus {
  border-color: #F99A52;
}

.buttonStripe {
  / float: left; /
  display: block;
  background-image: linear-gradient(-180deg, #F8B563 0%, #F99A52 100%);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10), inset 0 -1px 0 0 #E57C45;
  color: white;
  border-radius: 24px;
  border: 0;
  /* margin-top: -58px;
  margin-left: 385px; */
  font-size: 17px;
  font-weight: 500;
 /  width: 18%; /
  height: 46px;
  line-height: 48px;
  outline: none;}
 .labelStripe {
  position: relative;
  color: #6A7C94;
  font-weight: 400;
  height: 48px;
  line-height: 48px;
  margin-bottom: 10px;
  display: block;
  / margin-right: 63px; /
}

.buttonStripe:focus {
  background: #EF8C41;
}

.buttonStripe:active {
  background: #E17422;
}

.outcomeStripe {
  float: left;
  width: 100%;
  padding-top: 8px;
  min-height: 20px;
  text-align: left;
  margin-top: -25px;
  margin-left: 5px;
  margin-bottom: 5px;
}

.successStripe, .errorStripe {
  display: none;
  font-size: 13px;
}

.successStripe.visibleStripe, .errorStripe.visibleStripe {
  display: inline;
}

.errorStripe {
  color: #E4584C;
}

.successStripe {
  color: #F8B563;
}

.successStripe .tokenStripe {
  font-weight: 500;
  font-size: 13px;
}	

.disabledClass{
	cursor: not-allowed;
	opacity: 0.65;
	filter: alpha(opacity=65);
	-webkit-box-shadow: none;
	box-shadow: none;
}

.tab-content{
padding: 20px 2px;
}

.nav-tabs.nav-tabs-highlight > li.active > a, .nav-tabs.nav-tabs-highlight > li.active > a:hover, .nav-tabs.nav-tabs-highlight > li.active > a:focus {
    border: 2px solid #68AE6C;
}
.nav-tabs.nav-tabs-highlight > li > a, .nav-tabs.nav-tabs-highlight > li > a:hover, .nav-tabs.nav-tabs-highlight > li > a:focus {
    border: 1px solid #D4D4D4;
}

.pointingdirection{
cursor: default;
}

.border-primary-600 {  

top:12px !important;
}

/* .newssl{ 
width: 11% ;
} */


.toucheuro{ 
margin-top: -23px;
margin-right: -6px;
}

.table-changes{ 
font-size: 14px !important;
}

.panelchanges {
    margin-top: -25px;

}

.switchery-xs.checkbox-switchery {

   margin-bottom: 3px !important;
margin-top: -5px !important;

}

.widthchanges {
width: auto !important;
}


.resizepadding {
 padding: 0px 30px !important;
}

.bg-slate-800{ 
margin-right: -50px;
}

.paddingnewpanel{ 
padding-right: 100px !important;
padding-left: 100px !important;
margin-bottom: -75px !important;
}

.panelpage{ 
padding: 13px 112px !important;
}


.newpaddingadd{ 
padding-left: 55px !important;
}

/* @media only screen and (min-width : 280px) and (max-width : 600px) {
.switchery-xs.checkbox-switchery .switchery {
    margin-top: 8px !important;
}
} */



  @media only screen and (min-width : 768px) and (max-width : 2000px) and(-webkit-min-device-pixel-ratio:0) {

.switchery-xs.checkbox-switchery .switchery {
    margin-top: -18px !important;
}

}

@media only screen and (min-width : 768px) and (max-width : 2000px) (-webkit-min-device-pixel-ratio:0) {

.switchery-xs.checkbox-switchery .switchery {
    margin-top: -18px !important;
}

}

@media only screen and (min-width : 768px) and (max-width : 2000px) and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {

.switchery-xs.checkbox-switchery .switchery {
    margin-top: -18px !important;
}

}     

  @media only screen and (min-width : 300px) and (max-width : 767px) and(-webkit-min-device-pixel-ratio:0) {

.switchery-xs.checkbox-switchery .switchery {
    margin-top: -14px !important;
}

}

@media only screen and (min-width : 300px) and (max-width : 767px) (-webkit-min-device-pixel-ratio:0) {

.switchery-xs.checkbox-switchery .switchery {
    margin-top: -14px !important;
}

}

@media only screen and (min-width : 300px) and (max-width : 767px) and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {

.switchery-xs.checkbox-switchery .switchery {
    margin-top: -14px !important;
}

} 

.imgpos{ 
height: 62px !important;
margin-left: -4px;
margin-bottom: -15px;
}    

@media only screen and (min-width : 280px) and (max-width : 600px) {

.page-title {
    padding-bottom: 1px !important;          /* changes done for musaid image hearder issue. previous 0px */
}

.helpline{ 
margin-top: 15px !important;
}

.imgpos{ 
height: 50px !important;
margin-left: -4px;
margin-bottom: -15px;
}

.panelpage{ 
padding: 13px 17px !important;
}

.paddingnewpanel{ 
padding-right: 15px !important;
padding-left: 15px !important;
}

.paymentsummary{ 
font-size: 15px !important;
}

.bg-slate-800{ 
margin-right: auto !important;
}


.resizepadding {
 padding: 0px 0px !important;
}

.no-margin{
font-size: 14px !important;
}

.toucheuro{ 
margin-top: -9px !important;
}

.bootstrap-touchspin-down {

    padding: 0px 4px !important;
    margin-left: 4px !important;
}

.bootstrap-touchspin-up {

    padding: 0px 4px !important;
}

.touchspin-basic {
width: 15px !important;
}

.table-changes{ 

font-size: 11px !important;

}

.widthchanges {
width: 20% !important;
}

.switchery-xs .switchery {
    height: 12px !important;
    width: 22px !important;
}

.switchery-xs .switchery > small {
    height: 12px !important;
    width: 12px !important;
}

.table-responsive > .table > thead > tr > th, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td {

    white-space: normal !important;

}

/* .table-xxs > thead > tr > th, .table-xxs > tbody > tr > th, .table-xxs > tfoot > tr > th, .table-xxs > thead > tr > td, .table-xxs > tbody > tr > td, .table-xxs > tfoot > tr > td {
    padding: 6px 14px !important;
} */

.panelchanges {
    padding: 0px !important;
    margin-top: -25px;

}

}

@media only screen and (min-width : 280px) and (max-width : 768px) {
.qurbanimobile { 
  text-align: center !important; 
  }
}

@media only screen and (min-width : 280px) and (max-width : 420px) {
.submit_button { 
  font-size: 15px !important; 
  }
}

.newssl{
height: 50px;
/* margin-top: -73px;*/
margin-left: -70px; 
}

@media only screen and (min-width : 280px) and (max-width : 768px) {
.newssl {
    height: 40px;
    margin-top: -50px;
    float: right;
    margin-right: 20px;
}


.helpline {
    margin-top: 20px;
}

.affix {
    top: 65px !important;
}

.gifthead {
    font-size: 17px !important;
}

.giftdesc {
    font-size: 12px !important;
}

}

.icon-more {
    display: none !important;
}


.giftdesc {
    font-size: 14px;
}

@media only screen and (min-width : 320px) and (max-width : 1023px) {

.giftalign {
    margin-top: -20px !important;
	margin-left: -5px !important;
	margin-bottom: 30px;
}
}

@media only screen and (min-width : 1024px) and (max-width : 1299px) {

.giftalign {
    margin-top: -20px !important;
	margin-left: -25px !important;
	margin-bottom: 30px;
}
}

@media only screen and (min-width : 1300px) and (max-width : 1700px) {

.giftalign {
    margin-top: -20px !important;
	margin-left: -25px !important;
	margin-bottom: 30px;
}
}

@media only screen and (min-width : 1701px) and (max-width : 2000px) {

.giftalign {
    margin-top: -20px !important;
	margin-left: -25px !important;
	margin-bottom: 30px;
}
}


.card{
font-size: 12px !important;
 }
 
 @media only screen and (min-width : 900px) and (max-width : 4000px) {
 .sidebar-content {
    margin-top: -79px !important;
}
}


@media only screen and (min-width: 320px) and (max-width: 1024px) {
	
	 .field {
	   /*  width: 95% !important; */
	  /*   margin-left: 0px !important; */
	} 
}

.orglogowidth{
	width: 30%;
}

@media only screen and (min-width: 320px) and (max-width: 500px) {
	.orglogowidth{ 
		width: 100% !important;
	}
} 

.input-group , .bootstrap-touchspin{
    margin-right: 3px;
 }

 @media only screen and (min-width : 320px) and (max-width : 768px) {
   .heading-elements.visible-elements, .modal-full.visible-elements {
    display: contents !important;
}
}

.togglephone{
display: none !important;
 }
 
 .donationTextCss{
	font-size:1.6rem;height: 40px;
	line-height: 40px;
	vertical-align: middle;
	display:inline-block; 
}

.disabledRecurrDiv {
    pointer-events: none;
    opacity: 0.4;
}


.bagis-title-info input, .bagis-title-info select {
    display: contents;
}    
  
  
  .btn-group.open > .multiselect.btn-default.dropdown-toggle, .multiselect.btn-default, .multiselect.btn-default:active, .multiselect.btn-default:focus, .multiselect.btn-default:hover {
    width: 118px !important;
}
  
.multiselect {
    text-align: left;
    text-overflow: ellipsis;
  }  
  
  .multiselect-item input[type="checkbox"], .multiselect-item input[type="radio"] {
    border: 0;
    background: 0 0;
    display: block;
    margin: 0;
    cursor: pointer;
    position: absolute;
    left: 15px;
    margin-top: 3px;
    width: 18px;
    height: 18px;
    z-index: 2;
} 

.multiselect-container > li > a .checker, .multiselect-container > li > a .choice {
    left: -30px;
} 
	
	
 .sslnew {
    margin-left: 25px;
    width: 40px;
}	

.bg-slate-800 {
    background-color: #5b626f;
    border-color: #5b626f;
    color: #fff;
}

.bg-slate-800 {
display: none !important;	
}	

.select2-container--open .select2-dropdown {
    left: 0;
    width: 150px !important;
}

@media only screen and (min-width : 769px) and (max-width : 4000px) {
.heading-elements {
	display: flex !important;
}
}

@media only screen and (min-width : 320px) and (max-width : 768px) {
.sslnew {
    width: 40px !important;
    margin-top: 15px !important;
}

.heading-elements .bootstrap-select, .heading-elements .multiselect + .btn-group, .heading-elements .select2-container, .heading-elements .selectboxit-container, .heading-elements .selectboxit-options {
    width: 35% !important;
    margin-top: 25px !important;
}
}






#card-back {
  top: 40px;
  right: 0;
  z-index: -2;
}

#card-btn {
  background-color: rgba(251, 251, 251, 0.8);
  color: #ffb242;
  position: absolute;
  bottom: -55px;
  right: 0;
  width: 150px;
  border-radius: 8px;
  height: 42px;
  font-family: lato, 'helvetica-light', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  outline: none;
  border: none;
  cursor: pointer;
}

#card-btn:hover {
  background-color: rgba(251, 251, 251, 1);
}

#card-cvc, #ziraat-card-cvv {
  width: 60px;
  margin-bottom: 0;
}

#card-front, #card-back {
    position: absolute;
    background-color: #465f7d;
    border-radius: 6px;
    font-size: 12px;
    padding: 15px 0px 0;
    box-sizing: border-box;
    letter-spacing: 1px;
    font-weight: 300;
    color: white;
    width: 97%;
    margin-left: 5px;
}

#card-image {
  float: right;
  height: 100%;
}

#card-image i {
  font-size: 40px;
}

#card-month, #ziraat-card-month {
  width: 30% !important;
}

#ziraat-card-expiry {
  width: 100% !important;
}

#card-number, #ziraat-card-number,
#card-holder {
  width: 100%;
}

#card-stripe {
  width: 100%;
  height: 55px;
  background-color: #3d5266;
  position: absolute;
  right: 0;
}

#card-success {
  color: #00b349;
}

#card-token {
  display: none;
}

#card-year, #ziraat-card-year {
  width: 30%;
}

#cardholder-container {
  width: 45%;
  display: inline-block;
  text-align: left;
}

#card-container {
  width: 20%;
  display: inline-block;
  text-align: left;
}

#cvc-container {
  position: absolute;
  width: 110px;
  right: -115px;
  bottom: -10px;
  padding-left: 20px;
  box-sizing: border-box;
}

#cvc-container label {
  width: 100%;
}

#cvc-container p {
  font-size: 6px;
  text-transform: uppercase;
  opacity: 0.6;
  letter-spacing: .5px;
}

#form-container {
  margin: auto;
  width: 500px;
  height: 95px;
  position: relative;
}

#form-errors {
  color: #eb0000;
}

#form-errors,
#card-success {
  width: 500px;
  margin: 0 auto 10px;
  border-radius: 8px;
  padding: 0 20px;
  font-weight: 400;
  box-sizing: border-box;
  line-height: 46px;
  letter-spacing: .5px;
  text-transform: none;
}

#form-errors p,
#card-success p {
  margin: 0 5px;
  display: inline-block;
}

#exp-container {
  display: inline-block;
  text-align: left;
}

.hidden {
  display: none;
}

#image-container {
  width: 100%;
  position: relative;
  height: 55px;
  margin-bottom: 5px;
  line-height: 55px;
}

#image-container img {
  position: absolute;
  right: 0;
  top: 0;
}

.cardinput {
  border: none;
  outline: none;
  background-color: #8994a2;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  margin: 0 0 25px;
  color: white;
  font-size: 14px;
  box-sizing: border-box;
  border-radius: 4px;
  font-family: lato, 'helvetica-light', 'sans-serif';
  letter-spacing: .7px;
}

.cardinput::-webkit-input-placeholder {
  color: #fff;
  opacity: 0.7;
  font-family: lato, 'helvetica-light', 'sans-serif' letter-spacing: 1px;
  font-weight: 300;
  letter-spacing: 1px;
  font-size: 10px;
}

.cardinput:-moz-placeholder {
  color: #fff;
  opacity: 0.7;
  font-family: lato, 'helvetica-light', 'sans-serif' letter-spacing: 1px;
  font-weight: 300;
  letter-spacing: 1px;
  font-size: 10px;
}

.cardinput::-moz-placeholder {
  color: #fff;
  opacity: 0.7;
  font-family: lato, 'helvetica-light', 'sans-serif' letter-spacing: 1px;
  font-weight: 300;
  letter-spacing: 1px;
  font-size: 10px;
}

.cardinput:-ms-input-placeholder {
  color: #fff;
  opacity: 0.7;
  font-family: lato, 'helvetica-light', 'sans-serif' letter-spacing: 1px;
  font-weight: 300;
  letter-spacing: 1px;
  font-size: 10px;
}

.cardinput.invalid {
  border: solid 2px #eb0000;
  height: 34px;
}

.cardlabel {
  display: block;
  margin: 0 auto 7px;
}

@media only screen and (min-width : 280px) and (max-width : 419px) {

#card-front, #card-back {
    width: auto !important;
 }   
 
 #form-container {
        width: auto !important;
 }   
 
 #cardholder-container {
    width: auto !important;
}

#card-month, #ziraat-card-month {
    width: 46% !important;
}

#card-year, #ziraat-card-year {
    width: 48% !important;
}

.cardinput::-webkit-input-placeholder {
  font-size: 10px !important;
}

.cardinput:-moz-placeholder {
  font-size: 10px !important;
}

.cardinput::-moz-placeholder {
  font-size: 10px !important;
}

.cardinput:-ms-input-placeholder {
  font-size: 10px !important;
}
 
 }
 
 
@media only screen and (min-width : 420px) and (max-width : 499px) {

#card-front, #card-back {
    width: auto !important;
 }   
 
 #form-container {
        width: auto !important;
 }   
 
 #cardholder-container {
    width: auto !important;
}

#card-month, #ziraat-card-month {
    width: 46% !important;
}

#card-year, #ziraat-card-year {
    width: 48% !important;
}

#card-front, #card-back {
    margin-left: 5% !important;
    margin-right: 5% !important;

}

 } 
 
 
@media only screen and (min-width : 420px) and (max-width : 499px) {
	#form-container {
    width: auto !important;
	}
	
}	

@media only screen and (min-width : 500px) and (max-width : 6000px) {
	#form-container {
    width: auto !important;
	}
	
}	

@media only screen and (min-width : 1550px) and (max-width : 6000px) {

/* #card-front, #card-back {
    margin-left: 25% !important;
    margin-right: 25% !important;

} */
}


@media only screen and (min-width : 769px) and (max-width : 1023px) {

/* #card-front, #card-back {
    margin-left: 25% !important;
    margin-right: 25% !important;

} */

#card-front, #card-back {
    margin-top: -15px !important;
}
}

@media only screen and (min-width : 530px) and (max-width : 768px) {


#card-front, #card-back {
    margin-top: -15px !important;
}

/* #card-front, #card-back {
    margin-left: 13% !important;
    margin-right: 13% !important;
} */

}

@media only screen and (min-width : 500px) and (max-width : 529px) {

#card-front, #card-back {
    margin-top: -15px !important;
}

#card-front, #card-back {
    /* width: 75% !important; */
}

}	

@media only screen and (min-width : 1350px) and (max-width : 1549px) {

#card-front, #card-back {
    /* width: 60% !important; */
}

#card-front, #card-back {
   /*  margin-left: 20% !important;
    margin-right: 20% !important; */
}
}



@media only screen and (min-width : 650px) and (max-width : 768px) {
	
	#card-front, #card-back {
    margin-top: -15px !important;
}
	
}	

@media only screen and (min-width : 650px) and (max-width : 768px) {

#card-front, #card-back {
     margin-top: -15px !important;
}

}

@media only screen and (min-width : 385px) and (max-width : 419px) {

#card-front, #card-back {
     margin-top: -15px !important;
}

#ziraat-card-expiry {
    width: 100% !important;
}

#form-container {
    height: 95px !important;
}
}


 @media only screen and (min-width : 280px) and (max-width : 350px) {
#exp-container {
    width: auto !important;
    float: right;
    margin-right: 15px !important;
    margin-top: -9px !important;
    margin-bottom: 10px !important;
    margin-left: 15px !important;
}

#card-cvc, #ziraat-card-cvv {
    width: 65px !important;
}

#ziraat-card-expiry {
    width: 120% !important;
}

#form-container {
    height: 165px !important;
}	
}

@media only screen and (min-width : 351px) and (max-width : 384px) {
#exp-container {
    width: auto !important;
    float: right;
    margin-right: 25px !important;
    margin-top: -9px !important;
    margin-bottom: 10px !important;
    margin-left: 15px !important;
}

#ziraat-card-expiry {
    width: 120% !important;
}

#form-container {
    height: 165px !important;
}	
} 


.datestyle{
 position: absolute;
 left: 0px;
 transform: translateY(-50%);
 color: white;
 font-size: 11px;
 pointer-events: none;
 transition: 0.3s;
 background: black;
 z-index: 1000;
 padding: 0px 3px;
  }