@charset "utf-8";
body, #footer {
background-color:#f0f0f0 !important;
}

#contact-modal, #dd_error, #enq-sent {display:none}

#help_container h1, #help_container h2{font-size: 26px; font-weight: 350; margin:10px 0 20px 0; color:#000}

#help_container {
font-family: 'Roboto Slab',sans-serif;
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
margin: 30px 20px 0 20px
}

#faq_wrapper, #contact_wrapper {width:45%;max-width:700px;}

#faq_wrapper {margin-right: 40px;}

.help_box {
    background-color:#e7e7eb;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    padding: 20px;
	border-radius:10px;
    box-sizing: border-box;
	color:#fff
}

#more_options {
	margin-top: 20px;
}
#more_options h4{
	color:#000;
	font-weight:350;
	margin:0 0 20px 0;
	font-size: 18px;
}

#contact_options {
	display:Flex;
	flex-direction: row;
	justify-content:center;
	align-items: center
}

#contact_options div {
	background-color: #efefef;
	width:90px;
	height:90px;
	border-radius: 10%;
	box-sizing: border-box;
	/*border:2px solid #c4b5c0;*/
	color:#000;
	box-shadow: rgba(50, 50, 93, 0.13) 0px 2px 5px -1px, rgba(0, 0, 0, 0.2) 0px 1px 3px -1px;
	cursor:pointer
}

#contact_options div img{
width:40%;
	margin-top: 14px;
	opacity:0.9
}

#contact_options div:first-child {
	margin-right:20px
}

#contact_options div h5{
font-weight:300;
font-size: 14px;
margin:0
}


p.contactp {font-weight: 200; color:#000; font-size:14px}

#faq_wrapper .faq_item h3 {
margin:0;
font-size:16px;
font-weight:300;
cursor:pointer;
color:#000
}

#faq_wrapper .faq_item h3:hover {
border-bottom:1px solid #ccc;
}

#faq_wrapper .faq_item .qwrap {
display:flex;
flex-direction:row;
align-items: center;
justify-content: center
}

#faq_wrapper .faq_item img {
display:none;
width:16px;
opacity:0.7;
margin-right: 8px
}

#faq_wrapper .faq_item .faq_answer {
display:none;
background-color:#efefef;
padding:10px;
margin-top: 10px;
color:#000;
box-sizing: border-box;
	font-weight: 200;
border-radius:5px;
font-size: 13px;
box-shadow: rgba(50, 50, 93, 0.13) 0px 2px 5px -1px, rgba(0, 0, 0, 0.2) 0px 1px 3px -1px;
position: relative
}

#faq_wrapper .faq_item .faq_answer:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 8px 8px;
border-color: #efefef transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -8px;
top: -8px;
left: 50%;
}

#faq_wrapper .faq_item .faq_answer:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 8px 8px;
border-color:#d9cbd5 transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -8px;
top: -9px;
left: 50%;
}

#faq_wrapper .faq_item .faq_answer a{
color:#000;
text-decoration: none;
border-bottom:1px dashed #9c9c9c;
padding-bottom: 2px
}
#faq_wrapper .faq_item .faq_answer a:hover{
border-bottom:1px dashed #000;
}

#faq_wrapper hr {
    border: 0;
    height: 1px;
    margin:12px 0;
    background-image:linear-gradient(to right, rgb(179 179 179 / 0%), rgb(149 149 149 / 25%), rgb(145 145 145 / 0%))
}

.help_box a {
text-decoration:none 
}

button#contact-support {
background-color: #665873;
color:#fff;
font-size:18px;
padding:15px 20px;
border:none;
cursor:pointer;
display:flex;
align-items: center;
margin:30px auto 0 auto;
border-radius:5px;
	font-family: 'Roboto Slab',sans-serif;
	font-weight: 200
}

button#contact-support img{
width:21px;
margin-right: 5px
}

#contact-modal {
color:#fff;
width:100%;
text-align: center;
}

#contact-modal #closemdl {
position:fixed;
top:5px;
right:5px;
width:25px;
cursor:pointer
}

#contact-modal #closemdl img{
width:100%
}

#contact-modal h4{
font-size:28px;
color:#bbb;
font-weight:350;
	font-family: 'Roboto Slab';
}

#contact-modal #chr {
display:flex;
flex-direction: row;
align-items: center;
justify-content:center;
}

#contact-modal #chr img{
width:28px;
margin-right: 8px
}

#contact-modal #form_wrapper {
max-width:650px;
margin:0 auto;
background-color:#57384c;
padding:25px;
border-radius:5px
}

#contact-modal #form_wrapper .label_wrapper{
margin-bottom: 8px;
display:flex;
align-items: center;
justify-content: flex-start
}

#contact-modal #form_wrapper .label_wrapper img{
width:12px;
margin-right: 5px
}

#contact-modal #form_wrapper label{
font-size:16px;
	font-family: 'Roboto Slab';
	font-weight:200
}

#form_wrapper select, #form_wrapper input, #form_wrapper textarea {
font-size:14px;
font-family: 'Roboto Slab';
font-weight:200;
padding:10px;
width:100%;
box-sizing: border-box;
margin-bottom: 20px
}

#form_wrapper textarea {
min-height:200px;
resize: vertical;
}

#form_wrapper button {
background-color:#1f121a;
color:#fff;
border-radius:5px;
font-size:21px;
padding:12px 0px;
font-family: 'Roboto Slab';
width:95%;
cursor:pointer;
border:none
}

#form_wrapper button:hover{
background-color:#140C11
}

label.error {
background-color:#9d555a;
color:#fff;
padding:6px;
border-radius:3px;
text-align: center;
font-size: 13px !important;
margin-bottom: 20px;
margin-top:-15px;
display:block;
}

#enq-sent h4 {
margin:0 0 20px 0;
font-size:21px;
}

#enq-sent p{
    font-size: 15px;
    font-family: 'Roboto Slab';
    font-weight: 200;
}

#enq-sent a {
    color: #cecece;
    font-family: 'Roboto Slab';
    font-weight: 100;
}

@media (max-width: 1200px) {
#faq_wrapper, #contact_wrapper {width:50%}

#faq_wrapper {margin-right: 30px;}
}

@media (max-width: 850px) {
#help_container h1, #help_container h2{font-size: 21px}

#help_container {
flex-direction:column;
margin: 30px 20px 0 20px
}

#faq_wrapper, #contact_wrapper {width:100%; max-width:100%}

#faq_wrapper {margin-right:0px; margin-bottom: 40px}

}

@media (max-width:680px) {
#help_container h1, #help_container h2{font-size: 21px}

#help_container {
margin: 30px 10px 0 10px
}

.help_box {
padding:15px;
}

#faq_wrapper .faq_item h3 {
font-size:14px;
}

#contact_wrapper p {
font-size:13px
}

button#contact-support {
font-size:15px;
padding:10px 15px;
margin:20px auto 0 auto;
}

#contact-modal h4{
font-size:21px;
}

#enq-sent h4 {
font-size:18px
}

#contact-modal #chr img{
width:21px;
margin-right:5px
}

#contact-modal #form_wrapper label{
font-size:14px;
}

#form_wrapper select, #form_wrapper input, #form_wrapper textarea {
font-size:13px;
padding:8px;
}

}

@media (max-width:500px) {

#contact_options div img {
    width: 45%;
    margin-top: 13px;
}
	
#contact_options div h5 {
    font-size: 13px;
}
}