@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');


select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
   background-image: url(../images/menu-arrow.png);
   background-repeat: no-repeat;
   background-position: 95% center;
}


body, html {height: 100%;}

body {	font-family: 'Poppins', sans-serif;	 font-size:14px; background-color: #fff; color:#666;	line-height:28px; margin:0px; font-weight:400;  overflow-x: hidden;}

html {  scroll-behavior: smooth;}

a{transition: all 0.5s ease-in 0s; text-decoration:none; outline:none;}

a:focus, a:active,  a, focus, select {border:0px; outline:none;}

.clear{clear:both;}

p{margin-top:0px; text-align: justify;}

img {border:0px;}

form{margin:0px;}

input {outline:none;}

* {box-sizing:border-box; }

h2 {font-size: 36px; color: #2b2e4b; text-align: center; margin: 40px 0px 20px 0px;}

h2:after {display: block; width:40px; height: 2px; content:''; background-image: url(../images/gradient.png); background-size:100% 100%; margin: 20px auto;  }

h3 {font-size: 30px; color: #2b2e4b; text-align: left; margin: 20px 0px 20px 0px; font-weight: 300; line-height: 36px; }

.box-content h3 {font-size: 16px; font-weight:700; } 

.hline {border-bottom: 1px solid #ddd; padding-top: 40px;}





/* Header */

header.darker, header { position: fixed; z-index: 100; left:0px; top:0px; background-color: #fff;}


header.darker .logo img {width: 150px;}

header {display: table; width: 100%; }

header.darker .user-option {margin-top: 13px;}

header.darker .search {margin-top: 8px;  }

header.darker .searchtextbox {padding: 8px 20px;}

header.darker .signup {margin-top: 20px;}

.top-stripe {width: 100%; display: table; background-color: #f1f1f1; transition: all 0.5s ease-in 0s; height: 38px;}

.top-left-links  {margin: 0px; padding: 0px; display: inline-block;}

.top-left-links li {list-style: none; padding: 5px 10px; color: #2b2f4c; font-weight: 600;} 

.top-right-links {margin: 8px 20px 0px 0px; padding: 0px; float: right; }

.top-right-links li {list-style: none;  color: #2b2f4c; display:inline-block; margin-left: 10px;} 

.top-right-links li a {color: #2b2f4c; float: left;   font-size: 12px; border-bottom: 1px solid #2b2f4c; line-height: 13px;}

.gradient-line {width: 100%; height: 2px; display: block; }

.logo {display: inline-block; float: left; margin: 10px; transition: all 0.5s ease-in 0s;}

.logo a, .logo img {display: block; transition: all 0.5s ease-in 0s; }

.logo img {display: block; transition: all 0.5s ease-in 0s; width: 195px;}

.top-navigation {display: table; width: 100%; background-color: #2b2e4b; transition: all 0.5s ease-in 0s;}

.top-navigation  a:hover {background-color: #070924;}

.signup {display: inline-block; float: right;  margin-right: 20px; margin-top: 30px; transition: all 0.5s ease-in 0s;  }

.signup a {border-radius:100px; background-image: url(../images/gradient.png); background-size:100% 100%; padding: 10px 20px; color: #fff; }

.search {display: inline-block; float: right;  margin-top: 12px; width: 62%; margin-right: 5%; transition: all 0.5s ease-in 0s;}

.searchtextbox {background-color:#f1f1f1; border: 0px; padding: 10px 20px; font-size: 24px;  font-family: poppins; font-weight: 200; border-radius:100px; width: 100%; background-image: url(../images/lens.png); background-size:21px 21px; background-repeat: no-repeat; background-position: 98% center; font-weight: 300; transition: all 0.5s ease-in 0s;}

.header-gap {width: 100%; height: 170px; background: #2b2e4b; }

/* Header */








/* Banner */

.home-banner1 { width: 100%; height: 412px; background-image: url(../images/homepage-banner1.jpg); background-size:cover!important; background-position: center center;}
.home-banner2 { width: 100%; height: 412px; background-image: url(../images/homepage-banner2.jpg); background-size:cover!important; background-position: center center;}
.home-banner3 { width: 100%; height: 412px; background-image: url(../images/homepage-banner3.jpg); background-size:cover!important; background-position: center center;}
.home-banner4 { width: 100%; height: 412px; background-image: url(../images/homepage-banner4.jpg); background-size:cover!important; background-position: center center;}
.home-banner5 { width: 100%; height: 412px; background-image: url(../images/homepage-banner5.jpg); background-size:cover!important; background-position: center center;}

.banner-text {color: #fff; font-size: 36px; font-weight: 700; width: 600px; line-height: 125%; padding: 110px 90px; } 


.colorful-sticker-text {width: 880px; border: 0px solid red; margin: auto;}

.small-sticker-text {display: inline-block; width: 190px; border: 0px solid red; height: 160px; margin: 60px 18px 0px 15px; overflow: hidden; color: #000; font-size: 13px; line-height: 140%; float: left;}

.small-sticker-text:last-child{margin-right: 0px;}

.sticker-test {width: 1080px; border: 0px solid red; margin: auto;}

.sticker-text1 {display: inline-block; float: left; margin-top: 70px; width: 45%; margin-left: 20px; text-align: center; height: 150px; overflow: hidden; color: #000; font-size: 13px; line-height: 160%;}

.sticker-text2 {display: inline-block; float: right; margin-top: 70px; width: 45%; margin-right: 20px; text-align: center; height: 150px; overflow: hidden; color: #000; font-size: 13px; line-height: 160%;}



.blog-banner1 { width: 100%; height: 290px; background-image: url(../images/blog-banner-a.jpg); background-size:cover; background-position: center center;}
.blog-banner2 { width: 100%; height: 290px; background-image: url(../images/blog-banner-b.jpg); background-size:cover; background-position: center center;}
.blog-banner3 { width: 100%; height: 290px; background-image: url(../images/blog-banner-c.jpg); background-size:cover; background-position: center center;}

#sliderh4 .banner-text {color: #fff; font-size: 36px; font-weight: 700; width: 600px; line-height: 125%; padding: 70px; } 

#sliderh4 .slider .slide{ display:block; position:relative; float:left; height:290px!important; }

/* Banner */






/* Lastest News */

.lastest-news { width: 50%; padding: 40px; float: left; background-color: #eee; border-right:1px solid #ccc; height: 680px; }

.lastest-news ul {margin:0px; padding: 0px;}

.lastest-news li {margin: 0px; padding: 0px; list-style: none; margin-bottom: 20px; display: table; width: 100%;}

.lastest-news li a {display: block;}

.lastest-news li a img {float: left; margin-right: 20px; }

.lastest-news li h4 {margin: 0px; font-size: 18px; font-weight: 700; color: #2b2e4b; line-height: 120%;}

.lastest-news li p {line-height: 140%; color: #666;}

.date {font-size: 12px; color: #666; }

.date a {color:#c01d4e!important; font-weight: 400; display: inline-block!important}



.news {  }

.news ul {margin:0px; padding: 0px;}

.news li {margin: 0px; padding: 0px; list-style: none; margin-bottom: 20px; display: table; width: 50%; float: left; padding: 15px;}

.news li a {display: block;}

.news li a img {float: left; margin-right: 20px; }

.news li h4 {margin: 0px; font-size: 18px; font-weight: 700; color: #2b2e4b; line-height: 120%;}

.news li p {line-height: 140%; color: #666;}

.date {font-size: 12px; color: #666; }

.date a {color:#c01d4e!important; font-weight: 400; display: inline-block!important}

/* Lastest News */







/* Sponsors */

.sponsors { width: 50%; padding: 40px; float: right; background-color: #eee; height: 680px;}

.sponsors img { width: 100%;}

.lastest-new h2, .sponsors h2 {text-align: left;}

.lastest-new h2:after, .sponsors h2:after {margin: 20px 0px;}

.sponsors ul {margin: 0px; padding: 0px;}

.sponsors ul li {float: left; display: inline-block; list-style: none; margin: 16px; float: left;}

/* Sponsors */



/* Inside Banner  */

.inside-page {width: 100%; height: 100px; background-size:cover; background-position: center bottom;}

.inside-page .banner-text {padding: 25px;}

.inside-page  strong {font-weight: 700; display: inline-block; float: left; margin-right: 20px;}

.inside-page p { text-align: left; font-size: 14px; text-transform: uppercase; font-weight: 500; letter-spacing: 2px; display: inline-block; float: left;}

.blog-big-banner {width: 100%; height: 290px; background-size:cover; background-position: center bottom;}

.blog-big-banner strong {font-weight: 700; display: block;}

.blog-big-banner p { text-align: left; font-size: 14px; text-transform: uppercase; font-weight: 500; letter-spacing: 2px;}

.blog-big-banner .banner-text {padding: 100px 50px;}

.fullsize {width: 100%;}

/* Inside Banner  */





/* Inside Content Area  */

.inside-left-panel {width:calc(100% - 300px); display:inline-block; float: left; padding: 20px;}

.inside-left-panel .blog-box {width: 19%; margin: .5%; float: left; border: 1px solid #eee; background-color: #fff; box-shadow: 0px 0px 5px 0px #ddd; }

.inside-left-panel .blog-box img {display: block; width: 100%;}

.inside-left-panel .blog-box div {display: block; padding: 20px;}

.inside-left-panel .blog-box h3 {line-height: 140%; margin: 0px; color: #2b2e4b;}

.inside-left-panel .blog-box h3:before { margin-right: 16px; display: inline-block; float: left; margin-left: -20px;  background-image: url(../images/gradient2.png); background-size:100% 100%;  content:''; width: 3px; height: 25px; }

.inside-right-panel {width:300px; display:inline-block; float: right; padding: 20px 20px 20px 0px;}





.tutorials-left-panel {width:300px; display:inline-block; float: left; padding:20px 0px 20px 20px;}

.tutorials-right-panel {width:calc(100% - 300px); display:inline-block; float: right; padding: 20px;}

.tutorial-advt-panel  {width:300px; display:inline-block; float: right; padding:20px 20px 20px 0px;}

.tutorial-middle-panel  {width:calc(100% - 600px); display:inline-block; float: left; padding: 20px;}

.tutorial-middle-panel h5 {font-size: 18px; font-weight: 500; color: #000; margin:10px 0px;}

.tutorial-middle-panel ul {margin: 0px 0px 0px 20px; padding: 0px;}

.tutorial-middle-panel li {list-style: disc; padding-left: 10px; } 




#t-container {    width: 100%;}

.cols {
    column-count: 3;
    column-gap: 1.5%;
    column-width: 30%;
}


.box {
    margin-bottom: 20px;
    background-color: #eee;
    border-radius:10px; 
    display: table;
    width: 100%;
    padding: 20px;
}

.box ul {margin: 0px; padding: 0px; }

.box li {list-style: none;}

.box li a {color: #2b2e4b;}

.box li a:hover {padding-left: 10px;}

.box h4 {
    font-size: 18px;
    color: #2b2e4b;
    margin: 0px;
}

.box h4::after {
    display: block;
    width: 30px;
    height: 2px;
    content: '';
    background-image: url(../images/gradient.png);
    background-size: 100% 100%;
    margin: 10px 0px;
}



.comment-box-bottom {border: 1px solid #ccc; padding: 10px; display: table; width: 100%;}

.comment-box-bottom img {float: left; border-radius:1000px; margin-right: 20px; width: 55px;}

.comment-textbox {border-radius:100px; border: 0px; background-color: #eee; padding: 15px; width: 60%; margin-top: 2px; font-family: poppins; font-size: 14px; color: #666; }

.add-comment { border:0px; padding: 15px 30px; border-radius:100px; background-image: url(../images/gradient.png); background-size: 100% 100%; font-family: poppins; font-size: 14px; color: #fff; margin-left: 10px; }
 





.post-button a {width: 100%; display: block; color: #fff; font-weight: 500; text-align: center; text-transform: uppercase;  letter-spacing: 1px; background-image: url(../images/gradient.png); background-size: 100% 100%; padding: 10px; border-radius:100px;}

.categories {margin: 0px; padding: 0px;}

.categories li {list-style: none; display: block; border-top: 1px solid #ccc;  }

.categories li:last-child { border-bottom: 1px solid #ccc;  }

.categories li a {display: block; padding: 5px 0px; font-weight: 300; }

.categories li a span {display: inline-block; float: right;}

.categories li a:hover {background-color: #2b2e4b; color: #2b2e4b; background-color: #eee; padding: 5px;}

.categories input {margin: 12px 5px;}

.tag-coulds {margin: 0px; padding: 0px;}

.tag-coulds li {list-style: none; display: inline-block;  float: left; margin: 2px;}

.tag-coulds li a {display: block; padding: 5px 8px; background-color: #eee; font-weight: 300;}

.tag-coulds li a:hover {background-color: #2b2e4b; color: #fff;}

.right-panel-heading {font-weight: 20px; color: #2b2e4b; text-transform: uppercase; font-size: 18px; font-weight: 700;}

.right-panel-heading::after {    display: block;    width: 30px;    height: 2px;    content: '';    background-image: url(../images/gradient.png);    background-size: 100% 100%;    margin: 5px 0px;}

.recent-post-box {display: block; border-bottom: 1px solid #ccc; padding: 10px 0px 20px 0px; margin-bottom: 10px;} 

.recent-post-box img {float: left; width: 60px; margin-right: 10px; }

.recent-post-box h5 {margin: 0px; color: #2b2e4b;  font-size: 16px; line-height: 120%; }

.recent-post-box p {margin: 0px; text-align: left; line-height: 130%;}

.recent-post-box  a {display: block;}



.relevant-tutorial-box {display: block; border-bottom: 1px solid #ccc; padding: 10px 0px 20px 0px; margin-bottom: 10px;} 

.relevant-tutorial-box img {float: left; width: 60px; margin-right: 10px; }

.relevant-tutorial-box h5 {margin: 0px; color: #2b2e4b;  font-size: 16px; line-height: 120%;  font-weight: 600;}

.relevant-tutorial-box p {margin: 0px; text-align: left; line-height: 130%;}

.relevant-tutorial-box  a {display: block;}



/* Inside Content Area  */





/* Comment */

.textbox1 {font-family: poppins; font-size: 14px; border-radius: 5px; border: 1px solid #ddd; background-color: #f7f7f7; padding: 10px; width: 100%; float: left; margin-right: 1%; margin-bottom: 1%;}

.textbox2 {font-family: poppins; font-size: 14px; border-radius: 5px; border: 1px solid #ddd; min-height: 100px; background-color: #f7f7f7; padding: 10px; width: 100%; float: left; margin-right: 1%; margin-bottom: 1%;}

.textbox1.last {margin-right: 0px;}

.submit-button {  border:0px;  border-radius: 100px; font-family: poppins; font-size: 14px;   background-image: url(../images/gradient.png);    background-size: 100% 100%;    padding: 10px 40px;    color: #fff;}

.blue.right-links {color: #1297e3!important; border-bottom: 1px solid #1297e3!important; float: right;}

.comment-box {display: table; width: 100%; margin-bottom: 30px;}

.face {display: inline-block; width: 10%; float: left;}

.face img {display:block; margin: auto; border-radius: 1000px; width: 80px;}

.face span {display:block; margin: auto; text-align: center; color: #2b2e4b; font-weight: 500;}

.comment {border-radius:10px; width: 90%; float: right; background-color: #f1f1f1; border-radius: 10px; padding: 20px; font-family: Georgia; font-style: italic; font-size: 16px; line-height: 150%}

.comment:before {  width: 0;    height: 0;   border-top: 10px solid transparent;  border-bottom: 10px solid transparent;     border-right:10px solid #f1f1f1;  content: ''; position: absolute; margin-left: -30px; margin-top: .8%;}

.comment em {display: block; font-style: normal; font-family: poppins;}

.sharing-buttons {display: table; width: 100%;}

.sharing-buttons a {display: inline-block; margin-right: 5px;}

.sharing-buttons a img {display: block;}

/* Comment */






/* Questions */

.question-box .question { background-color: #2a2d4a; color: #fff; padding: 20px; display: block; font-size: 20px; font-weight: 700;}

.question-box .question em {display:block; font-weight: 700; font-style: normal; text-transform: uppercase; font-size: 14px;}

.question-box .question:after {display: inline-block; float: left; margin-top: 47px; margin-left: 20px; content:''; width: 0px; height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #2a2d4a;     position: absolute;    left: 0;}

.question-box .answer { background-color: #fff; color: #666; padding: 20px; display: block; font-size: 14px; line-height: 160%; font-weight: 400;}

.question-box .answer em {display:block; font-weight: 500; font-style: normal; text-transform: uppercase; font-size: 14px; color: #bf1d4e;}

.question-box .answer a {color:#2a2d4a;}

.question-left-panel {width:300px; display:inline-block; float: left; padding: 20px 0px 20px 20px;}

.question-left-panel .right-panel-heading:first-child, .question-middle-panel .right-panel-heading:first-child {margin-top: 0px;}

.question-middle-panel {width:calc(100% - 300px); display:inline-block; float: left; padding: 20px 30px 20px 30px;}

.question-middle {display:block;  font-weight: 600; padding: 10px 15px; margin-bottom: 10px; border:1px solid #ddd; background-image: url(../images/small-arrow.png); background-repeat: no-repeat; background-position: 98% center;}

.question-middle:hover {box-shadow: 0px 0px 10px 0px #ccc;}

.relevent-questions {margin: 0px; padding: 0px;}

.relevent-questions li {list-style: none; line-height: 130%; font-weight: 700; font-size: 15px; border-top: 1px solid #ccc; }

.relevent-questions li a {color: #2b2e4b; display: block; padding: 15px 0px;}

.relevent-questions li a:hover {background-color: #f7f7f7; padding: 15px 5px;}

.detail-question {font-weight: 600; margin-top: 0px; font-size: 24px;}

.add-question {background-color: #eee; padding: 20px; margin-bottom: 20px; display: table; width: 100%;}

.question-search-box {border: 1px solid #ddd; border-radius:100px; padding: 10px; font-family: poppins; width: 75%; float: left; margin-right: 20px; color: #666;}

.add-question h4 {margin: 0px 0px 5px 0px; font-weight: 400; color: #2b2e4b; font-size: 20px;}

#add-question-button {width: 20%; float: left; cursor: pointer;}


.middle-and-right {display: table; width:calc(100% - 300px); float: right;}


.question-details-box {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 15px;
}

.source  {display: table; width: 100%;}

.source strong {font-weight: 700;}

.source a {color: #1469c9; font-weight: 300;}

.cross {float: right; display: inline-block;}

.question-details-head {display: table; width: 100%;}

.question-details-head .face {float: left; border-radius:100px; width: 60px; border: 3px solid #ccc; margin-right: 10px;}

.answer-line {font-size: 12px; display: block; margin-bottom: 10px; }

.answer-line a {border-bottom: 1px solid #ccc;}

.answer-person-name {color: #000;}

.question-details-footer {display: table; width: 100%; padding: 15px 0px 10px 0px; padding-top: 15px; border-top: 1px solid #ccc; margin-top: 20px; } 

.question-details-footer a {display: inline-block; float: left; margin-right: 10px; line-height: 20px; margin-right: 20px;}

.question-details-footer a img {float: left; margin-right: 5px;}

.question-details-footer .float-right {float: right; margin-left: 20px; margin-right: 0px;}

/* Questions */








/* Footer */

footer {display: table; width: 100%; background-color: #05050a; padding: 20px; color: #999;}

.footer-column {width: 25%; float: left; padding-right:30px;  }

.footer-column a {color: #999;}

.footer-column p {text-align: left;}

.footer-column h5 {color: #fff; font-weight: 400; font-size: 20px; margin-bottom: 0px;}

.footer-column h5:after {display: block; width:40px; height: 2px; content:''; background-image: url(../images/gradient.png); background-size:100% 100%; margin: 20px 0px;  }

.footer-column  ul {margin: 0px; padding: 0px;}

.footer-column  li {list-style: none; font-size: 13px;}

footer a:hover {padding-left: 10px; color: #fff;}

.copyright {display: inline-block; float:left; text-transform: uppercase; font-size: 11px; letter-spacing: 2px;}

.social-media {display: inline-block; float: right; margin-right: 60px;}

.social-media ul {margin: 0px; padding: 0px;}

.social-media li {list-style: none; float: left; margin-left: 10px;} 

.social-media li a {display: inline-block; border-radius:100px;  opacity:0.5; width: 40px; height: 40px; background-image: url(../images/gradient.png); background-size:100% 100%; background-repeat: no-repeat; background-position: 60px 0px; text-align: center; padding-top: 7px; transition: all 0.5s ease-in 0s;}

.social-media li a:hover {background-image: url(../images/gradient.png); background-size:100% 100%; background-position: 110% 0px; padding-left: 0px; transition: all 0.5s ease-in 0s; opacity:1.0; } 

/* Footer */














/* Scrolling Button */
html {  scroll-behavior: smooth;}

body {  position: relative;}



.scrolltop-wrap {
  box-sizing: border-box;
  position: absolute;
  top: 12rem;
  right: 1rem;
  bottom: 0;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.scrolltop-wrap #scrolltop-bg {
  fill: transparent;
}
.scrolltop-wrap #scrolltop-arrow {
  fill: white;
}
.scrolltop-wrap a:hover #scrolltop-bg {
  fill: transparent;
}
.scrolltop-wrap a:hover #scrolltop-arrow {
  fill: #fff;
}
@supports (-moz-appearance: meterbar) {
  .scrolltop-wrap {
    clip: rect(0, 3rem, auto, 0);
  }
}
.scrolltop-wrap a {
  position: fixed;
  position: -webkit-sticky;
  position: sticky;
  top: -4rem;
  width: 3rem;
  height: 3rem;
  margin-bottom: -5rem;
  -webkit-transform: translateY(100vh);
          transform: translateY(100vh);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: inline-block;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: all;
  outline: none;
  overflow: hidden;
  background-image: url(../images/gradient.png);
  background-size:100% 100%;
  border-radius: 1000px;
}
.scrolltop-wrap a svg {
  display: block;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
.scrolltop-wrap a svg path {
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
}
.scrolltop-wrap a #scrolltop-arrow {
  -webkit-transform: scale(0.66);
          transform: scale(0.66);
  -webkit-transform-origin: center;
          transform-origin: center;
}
@media print {
  .scrolltop-wrap {
    display: none !important;
  }
}

/* Scrolling Button */





.user-option { display: inline-block; float: right; margin-top: 20px; margin-right: 20px; transition: all 0.5s ease-in 0s;}

.logout-button {
    border-radius: 100px;
    background-image: url(../images/gradient.png);
    background-size: 100% 100%;
    padding: 10px 20px;
    color: #fff;
}










.dropbtn {
  background-color: #fff;
  color: #000;
  padding: 10px 20px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  border: 0px;
  font-family: poppins;
  font-size: 14px;
  min-width: 120px;
  text-align: left;
  margin-right: 20px;
  background-image: url(../images/small-arrow2.png);
  background-position: 90% center;
  background-repeat: no-repeat;
  background-size:12px auto; 
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #eee;
}

.dropdown {
  position: relative;
  display: inline-block;
  border: 0px; 
  background-color: #fff;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 10px;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #ddd;
  font-size: 13px;
  color: #666;
}

.dropdown a:hover {background-color: #ddd; color: #000;}

.show {display: block;}





.next-and-previous {display: table; width: 100%; padding-top: 20px;}

.next-and-previous .prev, .next-and-previous .next {
border-radius: 100px;
background-image: url(../images/gradient.png);
background-size: 100% 100%;
padding: 10px 30px;
color: #fff;
float: left;
}

.next-and-previous .next {float:right;}


.aboutus {width:100%; display:table; padding: 20px; max-width: 1300px; margin: auto; }

.aboutus .half-right img {float: right; width: 100%;}

.aboutus .half-left  { padding-right: 60px;}

.contactus {width:100%; display:table; padding: 20px; max-width: 1340px; margin: auto; }

.contactus h3 {text-align: center;}

.contactus .textbox1 {width: 31.3%; float: left; margin: 1%;}

.contactus .textbox2 {width: 98%; float: left; margin: 1%;}

.contactus .submit-button { display: block; margin: 1% auto;}




.half-left {width: 50%; float: left;}

.half-right {width: 50%; float: right;}


.contact-box {width: 31.3%; float: left; border: 1px solid #ddd; margin: 1%; border-radius:10px; text-align: center; padding-bottom: 40px;} 

.contact-box img {display: block; text-align: center; margin: 40px auto;}





.contact-line {display: table; width: 100%; line-height: 50px; margin-bottom: 20px;}

.contact-line img {float: left; margin-right: 10px; }

.sponsor-grid a {display: inline-block; float: left; border: 1px solid #ddd; margin: 15px;}

.sponsor-grid a:hover {box-shadow: 0px 0px 10px 0px #ccc;}

.login-area {width: 370px; margin: auto;  border-radius: 20px; padding: 20px 20px; background-color: #fff;}

.login-area .textbox1, .login-area .submit-button {width: 100%; border-radius:1000px; padding: 10px 30px; margin: 5px 0px; }

.login-area a {color: #1671DD; border-bottom: 1px solid #1671DD;}

.login-area p {text-align: center;}


.facebook-button {width: 100%; border-radius: 1000px; display: block; text-align: left; border: 0px!important; padding: 10px 20px; background-color: #4a6bb9; color: #fff!important; margin: 10px 0px; } 

.twitter-button {width: 100%; border-radius: 1000px; display: block; text-align: left; border: 0px!important; padding: 10px 20px; background-color: #55acee; color: #fff!important;  margin: 10px 0px;} 

.google-button {width: 100%; border-radius: 1000px; display: block; text-align: left; border: 0px!important; padding: 10px 20px; background-color: #ddd; color: #000!important;  margin: 10px 0px;} 


.facebook-button img, .twitter-button img, .google-button img {float:left; margin-top: 5px; margin-right: 20px; }


.cd-accordion__item.current-page a {    background-color: #0a0b15 !important;}

.signup-bg {width: 100%; min-height: 600px; background-image: url(../images/signup-bg.jpg); background-position: center bottom; background-size:cover;  }

.signup-bg h2 {color: #fff;}

.accordion {
  color: #444;
  cursor: pointer;
  padding: 15px 15px 13px 15px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border: 1px solid #ddd;
  background-color: #fff;
  margin-top: 10px;
  font-family: poppins;
  font-weight: 600;
}

.active, .accordion:hover {
  background-color: #fff;
}

.accordion.active {border-bottom:0px;  margin-bottom: 0px; }



.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: 300;
  float: right;
  margin-left: 5px;
  font-size: 18px;
}

.active:after {
  content: "\2212";
  
}

.panel {
  padding: 0;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f8f8f8;
}
.panel div{border: 1px solid #ddd; padding: 10px; border-top:0px; }

.panel div a {color:#CF0978;}












.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  background-color: #eee;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 30px;
  box-shadow: 0px 0px 5px 0px;
}

.sidenav a {
  padding: 10px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  font-weight: 300;
}


.sidenav a:hover {
  color: #000;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 36px;
  margin-left: 0px;
  font-weight: 300;
}



.sticky-button {position: fixed; right:0px; top:190px; z-index: 100; display: block; background-color: transparent; }

.sticky-button img, .sticky-button a {display: block;}

.subscribe-form {padding: 20px; display: table; width: 100%;}

.subscribe-form h4 {margin: 10px 0px; color: #000;}

.subscribe-form  .submit-button {width: 100%; border-radius: 5px;}







/* responsive menu */

.responsive-menu-icon { display:none;}


.responsive-menu-icon {
    display: block;
    cursor: pointer;
    background-color: #bc0b23;
    width: 47px;
    height: 47px;
    position: fixed;
    right: 0;
    top: 68px;
    padding: 13px 12px;
    box-sizing: border-box;
    z-index: 10000;
    display: none;
    z-index: 1000;
    background-image: url(../images/button-bg.png);
    background-size: 100% 100%;
    margin-top: 40px;
    display: none;
}

.bar1, .bar2, .bar3 {
    width: 23px;
    height: 2px;
    background-color: #fff;
    margin: 4px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-4px, 4px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-4px, -5px);
}


/* responsive menu */


.mobilemenu {display:none;}


.login-area {width: 370px; margin: auto;  border-radius: 20px; padding: 20px 20px; background-color: #fff;}

.login-area .textbox1, .login-area .submit-button { width: 100%; border-radius:1000px; padding: 10px 30px; margin: 5px 0px; font-family: poppins; font-size: 14px; border-radius: 100px;  background-color: #f7f7f7; border: 1px solid #ddd; }

.login-area a {color: #1671DD; border-bottom: 1px solid #1671DD;}

.login-area p {text-align: center;}

.login {width: 100%; min-height: 100%; background-image: url(../images/signup-bg.jpg); background-position: center bottom; background-size:cover;  }

.login h2 {color: #fff;}

.login .textbox1 {width: 100%%; float: left; margin: 1% 0px;}

.login .submit-button {text-align:center; display: block; margin: 2% auto;}














/* Dashboard  */

.dashboard-left  {width: 270px; background-color: #eee; display: table; float: left; margin: 15px; padding: 15px; }

.dashboard-middle  {width: calc(100% - 300px); background-color: #fff; display: table; float: left; margin: 20px 0px; }

.dashboard-right  {width: 270px; background-color: #eee; display: table; margin: 15px; float: left; padding: 15px;}


.dashboard-left h6, .dashboard-right h6 {margin: 0px 0px 3px 0px; font-size: 16px; color: #000; font-weight: 500; background-image: url(../images/gradient.png);background-size: 100% 100%; color: #fff; padding: 5px 15px;} 

.dashboard-left a, .dashboard-right a {color: #666; display: block; padding: 5px 0px; border-bottom:1px solid #ccc; }

.dashboard-left a:hover, .dashboard-right a:hover {padding-left: 5px; color: #000;}

.dashboard-user-box {width: 100%; display: table; border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; }

.dashboard-user-box h3 {font-size: 20px; font-weight: 600;  margin:10px 0px 0px 0px; clear: both;}

.dashboard-middle .face {float: left; width: 30px; margin-right: 10px; border-radius:100px;}

.data-table {width: 100%; border-collapse: collapse; margin-top: 20px;  }

.data-table th, .data-table td {padding: 5px 10px; border: 1px solid #ccc; text-align: left;}

.data-table th {background-color: #2b2e4b; color: #fff; text-align: left; font-weight: 500; }


.full-size-area {width: 100%; display: table; padding: 15px;}

/* Dashboard  */


.form-field-two-column {
    width: 48%;
    float: left;
    margin: 1%;
}

    .form-field-two-column label {
        width: 30%;
        float: left;
        display: inline-block;
        line-height: 40px;
        font-size: 13px;
        white-space: nowrap;
    }

    .form-field-two-column .textbox1 {
        width: 68.5%;
        float: left;
        display: inline-block;
    }

.textbox1.select {
    font-weight: 300;
}

.form-field-three-column {
    width: 31.3%;
    float: left;
    margin: 1%;
}

    .form-field-three-column label {
        width: 28%;
        float: left;
        display: inline-block;
        line-height: 40px;
        font-size: 13px;
        white-space: nowrap;
    }

    .form-field-three-column .textbox1 {
        width: 70%;
        float: left;
        display: inline-block;
    }

.form-field-one-column {
    width: 98%;
    float: left;
    margin: 1%;
}

    .form-field-one-column label {
        width: 10%;
        float: left;
        display: inline-block;
        line-height: 40px;
        font-size: 13px;
        white-space: nowrap;
    }

    .form-field-one-column .textbox1 {
        width: 89%;
        float: left;
        display: inline-block;
    }

/* kk custom css */
#ContentPlaceHolder1_lblMessage {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    background-color: #fff;
    color: red;
}

#lblMessage {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    background-color: #fff;
    color: red;
}

.ErrorMessage {
    font-weight: bold;
    color:red 
}

#lblNote {
    font-family: 'Poppins', sans-serif;
    font-size: 8px;
    background-color: #fff;
    color: red;
}


#ValidationSummary1 {
    color: red;
}

#ContentPlaceHolder1_ValidationSummary1 {
    color: red;
}

#SubscribeControl_ValidationSummary1 {
    color: red;
}

/* end of kk custom css*/