* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color:#444;
    margin:0;
    padding: 0;
}

h1 {
    /* color: #b11baf; */
    color: #dcff86;;
    margin: 0.5em 0 1em;
}
h2 {
    color: #ff8000;
    margin: 0 0 1.5em;
}
h3 {
    color: #444;
    margin: 0 0 1em;
}
h4 {
    margin: 0 0 1em;
}
h5 {
    
}
h6 {
    
}

a {
    color: #0073c5;
    text-decoration: none;
}
a:hover {
    color: #205c88;
}

ul, ol{
    margin-left: 30px;
    margin-bottom: 20px;
}

ol.alpha {
    list-style: lower-alpha;
}

li {
    margin: 0 0 10px;
    padding: 0 0 0 10px;
}

.btn {
    border-radius: 5px;
    border: none;
    background: #2589de;
    cursor: pointer;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    outline: none;
}
.btn:hover {
    background: #136fbd;
}

.btn2 {
    background: #888;
}
.btn2:hover {
    background: #999;
}

p {
    margin: 0 0 1.5em;
}

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

fieldset {
    background: #f9f9f9;
    border: 1px solid #eaeaea;
    margin: 0 0 20px;
    padding: 20px;
}

.form-control {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0 0 20px;
}
.form-control.checkbox {
    flex-direction: row;
}
.form-control.checkbox input {
    align-self: flex-start;
    margin-top: 0.4em;
    margin-right: 10px;
}
.form-control.expiryDate {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.form-control.expiryDate .label{
    flex-grow: 1;
    
    margin: 0;
    width: 100%;
}
.form-control.expiryDate input {
    width: 48%;
}

label,
.label {
    font-size: 14px;
    font-weight: bold;
}


input[type=text],
input[type=password],
input[type=email],
input[type=date],
select
 {
    border: 1px solid #ececec;
    outline: none;
    padding: 10px 20px;
}
.input {
    min-height: 20px;
}

input[type=text].error,
input[type=password].error,
input[type=email].error,
input[type=date].error,
select.error {
    border: 1px solid red;
    background: #eab5b5;
}

input[type=checkbox].error {
    
}

input[type=text].disabled,
input[type=password].disabled,
input[type=email].disabled,
input[type=date].disabled,
select.disabled {
    background: #ececec;
}

.form-control-group {
    display: flex;
    justify-content: space-between;
}
.form-control-group.contact {
    justify-content: flex-start;
}
.form-control-group .form-control {
    margin-right: 10px;
}
form footer {
    display: flex;
    margin: 20px 0 0;
    justify-content: center;
}
footer.multi-groups {
    display: flex;
    margin: 20px 0 0;
    flex-direction: column;
    justify-content: center;
}
footer.multi-groups .group {
    display: flex;
    margin: 10px 0 0;
    flex-direction: row;
    justify-content: center;
}
footer.multi-groups p {
    margin: 0px 0 0;
}

footer.multi-groups .group.space-between {

    justify-content: space-between;
}

form.signinForm,
form.formBox {
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: white;
    margin: 20px auto;
    padding: 20px;
    width:50%;
}
form.signinForm h1,
form.formBox h1 {
    color: #b11baf;
    margin: 0 0 20px;
}

.footer-right {
    
    justify-content: flex-end;
}

.countryCode {
    width: 100px;
}
.areaCode {
    width: 100px; 
}

.streetAddress {
    width: 70%;
}
.postal {
    width: 30%;
}

/* .alt-text-color h1 {
    color: #dcff86;
} */
.alt-text-color {
    color: white;
}
.alt-text-color a {
    color: #ccc;
}
.alt-text-color a:hover {
    color: #eaeaea;
}

.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}
.text-small {
    font-size: 14px;
}

.clearfix {
    clear: both;
}

.hgroup {
    margin: 20px 0 20px;
}

.hgroup h1,
.hgroup h2,
.hgroup h3,
.hgroup h4,
.hgroup h5,
.hgroup h6,
.hgroup p {
    margin: 0 0 10px;
}


#main {
    
}

.inner {
    margin: 0 auto;
    width: 1000px;
}

#logo {
    margin: 0px 0 10px;
    width: 300px;
}


#main {
    
}
#header {
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
    position: relative;
    z-index: 1;
}

#header .inner{
    padding: 20px 0 0;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}

#mainNav {
    flex-grow: 1;
    width: 100%;
    display: none;
    background-repeat: repeat-x;
    background-image: -ms-linear-gradient(top, #3395FF 0%, #007aff 100%);
    background-image: -moz-linear-gradient(top, #3395FF 0%, #007aff 100%);
    background-image: -o-linear-gradient(top, #3395FF 0%, #007aff 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3395FF), color-stop(100, #007aff ));
    background-image: -webkit-linear-gradient(top, #3395FF 0%, #007aff 100%);
    background-image: linear-gradient(to bottom, #3395FF 0%, #007aff 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.15), 0 2px 5px rgba(0,0,0,0.075);
    -webkit-box-shadow: inset 0 2px 0 rgba(255,255,255,0.15), 0 2px 5px rgba(0,0,0,0.075);
    /* border: 1px solid #007aff; */
}
#mainNav ul {
    display: flex;
    margin: 0;
    list-style: none;
}
#mainNav li {
    margin: 0;
    padding: 0;
}
#mainNav a {
    color: #fff;
    display: block;
    padding: 10px 20px;
}
#mainNav a:hover {
    background: #3395FF;
}

#navTop {
    display: flex;
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    align-items: center;
}
#navTop li {
    margin: 0 0 0 15px;
    padding: 0;
}
#navTop a {
    font-size: 12px;
}

.breadcrumbs {
    flex-grow: 1;
    margin: 20px 0 10px;
    padding: 0 0px;
    width: 100%;
}
.breadcrumbs ul {
    list-style: none;
    display: flex;
    margin: 0;
}
.breadcrumbs li {
    margin: 0;
    padding: 0;
    font-size: 14px;
}
.breadcrumbs li:first-child {
    padding-left: 0;
}
.breadcrumbs li:after {
    content: '>';
    margin: 0 10px;
}
.breadcrumbs li:last-child:after {
    content: '';
    margin: 0;
}
#mainContent {
    background: url(images/balloons.jpg) no-repeat center center;
    background-size: cover;
    min-height: calc(100vh - 210px);
    /* min-height: 400px; */
}

#mainContent .inner {
    padding: 20px 0px 20px;
}

#mainContent .mainContentFrame {
    background: #fff;
    padding: 20px;
}

#footer {
    background: #000;
    font-size: 12px;
}
#footer .inner {
    padding: 10px 0px 10px;
}
#footerNav {
    
        background-repeat: repeat-x;
    background-image: -ms-linear-gradient(top, #93aac0 0%, #7C8FA2 100%);
    background-image: -moz-linear-gradient(top, #93aac0 0%, #7C8FA2 100%);
    background-image: -o-linear-gradient(top, #93aac0 0%, #93aac0 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #93aac0), color-stop(100, #93aac0 ));
    background-image: -webkit-linear-gradient(top, #93aac0 0%, #93aac0 100%);
    background-image: linear-gradient(to bottom, #93aac0 0%, #93aac0 100%);
    list-style: none;
    /* display: flex; */
    display: none;
    justify-content: center;
    margin: 0;
}

#footerNav li {
    margin: 0;
    padding: 0;
}
#footerNav a {
    display: block;
    padding: 5px 10px;
}
#footer #copyright {
    color: #fff;
    margin: 0px 0 0;
    text-align: center;
}
#footer a {
    color: #ccc;
}
#footer a:hover {
    color: #eaeaea;
}

#footer #copyright a {
    border-left: 1px solid #ccc;
    margin-left: 5px;
    padding-left: 5px;
}

.grid-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.col:first-child{
    margin-left: 0;
}
.col:last-child {
    margin-right: 0;
}

.col {
    margin: 0 5px;
}

.col5{
    width:41%;
}
.col6{
    width:50%;
}
.col7{
    width:58%;
}

.tabs-group {
    margin: 0 0 20px;
}

.tabs ul {
    display: flex;
    justify-content: flex-start;
    list-style: none;
    /* justify-content: center; */
    margin: 0;
    background: rgba(0,0,0,0.2)
}

.tabsLeft ul {
    
}
.tabs li {
    margin: 0;
    padding: 0;
}

.tabs a {
    color: #fff;
    display: block;
    padding: 10px 20px;
    font-weight: bold;
}
.tabs a:hover,
.tabs a.active {
    background: #ececec;
    color: #444;
    

}

.tabs-content {
    background: #ececec;
    padding: 20px;
    min-height: 100px;
}

#pageHome h1 {
}

#searchBox {
    margin: 0 0 20px; 
    /* width: 50%;   */
}

#searchBox input[type="text"]{
    width: 100%;
}
#searchBox label {
    display: none;
}
#tourSearch .form-control {
    display: flex;
    flex-direction: row;
    margin: 0;
}
#tourSearch button {
    border-radius: 0 5px 5px 0;
    width: 40px;
}
#tourSearchBtn {
    padding: 0;
}

#modal {
    display: none;
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
}

#modal .modal-bg {
    background: rgba(0,0,0,0.5);
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
}
#modal .modal-box {
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
    border-radius: 5px;
    background: white;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -250px 0 0 -250px;
    width: 500px;
    height: 500px;
    z-index: 101;
}

#modal .close:before  {
    content: '';
    width: 30px;    
    height: 1px;
    transform: rotate(45deg);
    background: grey;
    position: absolute;
    right: 0;
    top: 15px;
    z-index: 103;
}

#modal .close:after  {
    content: '';
    width: 30px;    
    height: 1px;
    transform: rotate(-45deg);
    background: grey;
    position: absolute;
    right: 0;
    top: 15px;
    z-index: 103;
}

#modal .close {
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
    position: absolute;
    right: 10px;
    top: 10px;
width: 30px;
height: 30px;
z-index: 102;
}
#modal header {
    display:flex;
    align-items: flex-end;
    height: 50px;
    padding: 10px 20px;
}
#modal footer {
    height: 50px;
    padding: 8px 20px;
    text-align: center;
}
#modal .content {
    width: 100%;
    height: 80%;
    overflow-y: scroll;
    padding: 10px 20px;
}
#modal h3 {
    margin: 0;
}

.destination {
    font-size: 20px;
}
.destination b {
    font-size: 14px;
}

.package-listing {
    margin: 0 0 40px;
}
.package-listing .listing .item {
    border: 1px solid #eaeaea;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
    margin: 0 0 20px;
}
.package-code {
    font-size: 12px;
}

.filter-bar {
    display: flex;
    margin: 0 0 20px;
}
.filter-bar .item {
    margin: 0 20px 0 0;
}

.filter-bar label {
    margin-right: 10px;
}
.package-listing .listing h2 {
    margin: 0 0 10px;
}
.package-listing .listing .content {
    background: #fff;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    
}
.package-listing .listing.content p:last-child {
    margin: 0;
}
.package-listing .listing .content img {
    align-self: flex-start;
    margin: 20px;
    width: 18%;
}
.package-listing .listing .content .info {
    padding: 20px;
    
    width: 55%;
}
.package-listing .listing .content .info b {
    font-size: 14px;
}
.package-listing .listing .content .pricing {
    background: #f7f7f7;
    padding: 20px;
    width: 23%;
}
.package-listing .listing .content p {
    margin-bottom: 10px;
}
.package-listing .listing .content p:last-child {
    margin-bottom: 0px;
}
.package-listing .listing .content button {
    text-align: center;
}
 .currency {
    font-weight: bold;
    text-transform: uppercase;
}
.price {
    font-size: 30px;
    font-weight: bold;
}
.package-listing .listing .content sup {
    float: right;
    font-size: 14px;
    margin-top: -7px;
}
.package-listing .listing .content .pricing {
    text-align: right;
}
.package-listing .listing .content .pricing i {
    font-style: normal;
    font-size: 14px;
    color: #999;
    display: block;
    
}

#pagePackage .info .tabs-content {
    min-height: 600px;
}

#pagePackage .tabs-group {
    margin: 0;
}

.transaction {
    background: #fff;
    padding: 20px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin: 30px 0;
    text-transform: uppercase;
}
.price-row .price-label {
    
    text-align: right;
}


#pageBooking form {
}

#pageBooking .formCol {
    background: #f9f9f9;
    padding: 20px;
}

#pageBooking #tourSummary {
    background: #fff;
    padding: 20px;
}

.form-control.ccv {
    flex-direction: row;
    flex-wrap: wrap;
}
.form-control.ccv label {
    width: 100%;
    flex-grow: 1;
}
.form-control.ccv a {
    margin-left: 10px;
    align-self: center;
}

#pageBooking #terms,
#pageBooking #terms label {
    font-size: 12px;
}

.question {
    font-weight: bold;
    margin-bottom: 0;
}

.pricing {
    text-align: right;
}

#voucher h2 {
    text-align: center;
}
#voucher  .package-code {
    text-align: center;
}

#voucher {
    margin: 20px auto;
    width: 600px;
}
#voucher h2 {
    border-top: 2px solid #999;
    border-bottom: 2px solid #999;
    background: white;
    color: #444;
    margin: 0 0 10px;
    padding: 10px 20px;
}

#voucher .card p {
    margin: 0 0 10px;
}

#voucher .card {
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    background: url(images/moroccan-flower.png) repeat center center;
    padding: 20px;
}
.qr {
    margin: 20px auto;
}