/********** common setting **********/
.bg-dark-yellow {
	background-color: #FFF2B2;
}

h2 {
    font-size: 2.8rem !important;
    font-weight: 700;
}

img {
    display: block;
    max-width: 100%;
}

a,
button {
    cursor: pointer;
}

a {
	color: black;
	text-decoration: none;
}

a:hover {
	color: #ff8200;
}

.jumbotron {
    margin-bottom: 0 !important;
	background-color: #fefefe;
}

.atlas-cta {
    border-radius: 22px !important;
    padding: 12px 40px !important;
    font-weight: 700;
    transition: .3s ease-in-out !important;
}

.atlas-cta:hover {
    text-decoration: none;
    transform: translateY(-5px);
}

.atlas-cta-wide {
    width: 100%;
}

.text-orange {
	color: #ff8200;
}

.cta-orange {
    background: #ff8200;
    color: #ffffff !important;
}

.cta-orange:hover {
    color: #ffffff;
    background: #ff8200;
}

.cta-blue {
    background: #ff8200;
    color: #ffffff !important;
}

.cta-blue:hover {
    color: #ffffff;
    background: #121a2e;
}

.cta-ghost {
    border: 2px solid #ff8200 !important;
    color: #ff8200;
}

.cta-ghost:hover {
    color: #ffffff;
    background: #121a2e;
}

.step-circle {
	height: 40px; 
	width: 40px; 
	background-color: #ff8200;
}

/********** platform **********/
.platforms img {
	width: 30px;
	opacity: 0.9; 
}
.platforms ul li {
	float: left;
	list-style-type: none;
	width: 18%;
	padding: 0 1%;
}
.icon .fa {
	font-size: 40px;
    padding: 20px 0;
    color: #ff8200;
}

/********** header **********/
header {
	background-color: #fff8dc;
}


/********** feature (skew background) **********/
.feature img {
    width: 100%;
    max-width: 480px;
}

#feature-first {
    background: linear-gradient(168deg, #ffffff 55%, #fff9d8 0);
}

#feature-last {
    background: #fff9d8;
}

/********** download **********/
.dl-container {
	box-shadow: 0px 0px 59px rgba(191, 191, 191, 0.16);
	background-color: #fff;
	border-radius: 10px;
}

.dl-content ul li {
    padding: 5px 0;
}

/********** country **********/
ul.country {
    padding: 2em;
    border-radius: 10px;
    background: #fff9d8;
    box-shadow: 0 4px 10px 0 rgba(68, 88, 144, 0.1);
    transition: all 0.3s ease-in-out;
    display: flow-root;
    margin-top: 20px;
}

ul.country li {
    float: left;
    width: 20%;
    margin: 6px 0;
    list-style-type: disc;
    text-align: left !important;
    color: #444;
}

.btn-country {
	margin: 0 auto;
    display: table;
}

/********** footer **********/
.bg-footer {
    background-color: #333;
    padding: 50px 0 30px;
}
.footer-heading {
    letter-spacing: 1px;
}

.footer-link a {
    color: #acacac;
    line-height: 40px;
    font-size: 14px;
    transition: all 0.5s;
}

.footer-link a:hover {
    color: #ff8200;
}

.contact-info {
    color: #acacac;
    font-size: 14px;
}

.footer-alt {
    color: #acacac;
}

.footer-heading {
    position: relative;
    padding-bottom: 12px;
}

.footer-heading:after {
    content: '';
    width: 25px;
    border-bottom: 1px solid #FFF;
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    border-bottom: 1px solid #ff8200;
}

/********** back to top **********/
#top-btn {
  width: 50px;
  height: 50px;
  bottom: -50px;
  right: 86px;
  position: fixed;
  text-align: center;
  border-radius: 100px;
  background-color: #ff8200;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.12), 3px 4px 8px 0px rgba(0, 0, 0, 0.11);
  -webkit-transition: all .8s;
  transition: all .8s;
}

#top-btn:hover {
  background-color: #ff9920;
}

#top-btn:hover i {
  padding-top: 5px;
}

#top-btn i {
  padding-top: 15px;
  font-size: 20px;
  /line-height: 50px;
  color: #FFFFFF;
  -webkit-transition: all .8s;
  transition: all .8s;
}

.toggle_title {
    position: relative;
    cursor: pointer;
    padding-right:50px;  
    /*prevent text selection*/
   -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
 }

.toggle_title:before {
    cursor: pointer;
    position: absolute;
  background-color:#ccc;
      border-radius: .25rem!important;
      border-radius: 50%!important;
    top: 50%;
    right: 0;
  height:18px; width:18px;
    margin-top: -.5em;
    color: #fff;
    font-size: 18px;
    line-height:15px;
  text-align:center;
    content: "\2212";
    font-weight: 700; 
  /*  transform: rotate(45deg*/
    transform-origin: center center;
    transition: all 0.25s ease-out;
}

.toggle_title.collapsed:before {
    /*position: absolute;
    top: 50%;*/   
    right: 0;
    left: auto;
    /*margin-top: -.5em;
    color: #000;
    font-size: 30px;*/
    content: "\002B";
   /* font-weight: 700;
   transform: rotate(0);
    transform-origin: center center;*/
    transition: all 0.25s ease-out;
}

/********** copyright **********/
#copyright {
    background: #ff8200;
    padding: 2rem 3rem;
}

#copyright #social-media a {
    width: 40px;
    height: 40px;
    border-radius: 99%;
    background: #ffffff;
    transition: .4s ease;
}

#copyright #social-media a i {
    color: #ff8200;
    font-size: 1.2rem;
    line-height: 40px;
}

#copyright #social-media a:hover {
    background: #f5bb44;
}

#copyright #social-media a:hover i {
    color: #ffffff;
}

/********** compare table *********/
.compare .c-table table {
  border: none;
}
/* H Table */
.compare .h-table {
  position: sticky;
  top: 0px;
  background: #fff;
}
/* Table Head */
.compare .c-table thead tr th {
  width: 35%;
  text-align: left;
  border: none;
}
.compare .c-table .h-table thead tr td {
  border-top: 1px solid #c1c7d0;
}
.compare .c-table thead tr td:last-child {
  border-right: 1px solid #c1c7d0;
}
.compare .c-table thead tr td {
  width: 16.25%;
  font-weight: bold;
  font-size: 20px;
  color: #2c2f3e;
  border: none;
  border-left: 1px solid #c1c7d0;
}
.compare .c-table th,
.compare .c-table td {
  padding: 25px;
  vertical-align: middle;
  text-align: center;
  color: #2c2f3e;
}
.compare .c-table td i.no {
  font-size: 20px;
  color: #bb0613;
}
.compare .c-table td i {
  font-size: 20px;
  color: #00b478;
}
/* Table Body */
.compare .c-table tbody tr th {
  text-align: left;
  border-left: none;
  font-size: 15px;
  color: #2c2f3e;
  border-color: #c1c7d0;
}
.compare .c-table tbody tr td {
  border-right: none;
  font-size: 16px;
  color: #2c2f3e;
  border-color: #c1c7d0;
}
.compare .c-table tbody tr td:last-child {
  border-right: 1px solid #c1c7d0;
}

/********** terms **********/
.terms h4,
.terms p {
	width: 100%;
	line-height: 30px;
}

/********** RWD **********/
@media (max-width: 575px) {
    #banner h1 {
        font-size: 3.6rem;
    }
}

@media screen and (max-width: 519px) {
    ul.country li {
        width: 100%;
    }
}