/*@media screen and (max-width:668px) and (orientation: landscape) {
    html,body {
        overflow-y: hidden;
    }
}*/



.atr-page-wrapper {
    position: relative;
    background-color: #fff;
}

    /*.atr-page-wrapper.fixed {
        position: fixed;
        width: 100%;
    }*/

@media screen and (max-width: 767px) and (orientation: portrait) {

}

/********************************************************

    Page Banner

*********************************************************/
.atr-page-banner-wrapper {
    z-index: 9999;
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    background-color: #000;
}

    .atr-page-banner {
        display: block;
        height: 32px;
        background-color: #000;
    }

        .atr-page-banner .atr-page-banner-section {
            position: absolute;
            display: table;
        }

        .atr-page-banner .page-banner-element-wrapper {
            /*position: relative;*/
            display: table-cell;
            /*height: 32px;*/
            padding-left: 10px;
            padding-right: 10px;
        }

            .atr-page-banner .page-banner-element-wrapper.atr-hidden {
                display: none;
            }

            .atr-page-banner .page-banner-element-wrapper.clickable {
                cursor: pointer;
            }

                .atr-page-banner .page-banner-element-wrapper.clickable a:hover {
                    color: #fff;
                }

            .atr-page-banner .page-banner-element-wrapper.no-padding {
                padding-left: 0;
                padding-right: 0;
            }

        .atr-page-banner .page-banner-element {
            display: block;
            /*height: 32px;*/
            /*padding: 0;*/
            vertical-align: middle;
            line-height: 32px;
        }

            .atr-page-banner .page-banner-element a.atr-dummy-search {
                display: inline-block;
                width: 15px;
                height: 15px;
                background: url(/Content/Images/sprites.png) no-repeat 0 -1170px;
                vertical-align: middle;
                margin-top: -1px;
            }

                .atr-page-banner .page-banner-element-wrapper.clickable a.atr-dummy-search:hover {
                    background: url(/Content/Images/sprites.png) no-repeat -30px -1170px;
                }

            .atr-page-banner .page-banner-element .atr-banner-nav {
                display: inline-block;
                width: 8px;
                height: 16px;
                vertical-align: middle;
            }

            
                .atr-page-banner .page-banner-element-wrapper.atr-breadcrumb-nav-element .page-banner-element {
                    padding-left: 4px;
                    padding-right: 3px;
                }

                .atr-page-banner .page-banner-element .atr-banner-nav.atr-nav-previous {
                    background: url(/Content/Images/sprites.png) no-repeat 0 -1210px;
                    transform: translateX(-2px);
                }
                
                .atr-page-banner .page-banner-element .atr-banner-nav.atr-nav-next {
                    background: url(/Content/Images/sprites.png) no-repeat 0 -1230px;
                }

                .atr-page-banner .page-banner-element > span.atr-text {
                    vertical-align: middle;
                }




        .atr-page-banner  .atr-page-banner-section.page-banner-left {
            left: 0;
            right: auto;
        }

            .atr-page-banner > .atr-page-banner-section.page-banner-left > .page-banner-element-wrapper {
                border-left: 1px solid #404040;
                white-space: nowrap;
            }
            
                .atr-page-banner > .atr-page-banner-section.page-banner-left > .page-banner-element-wrapper:first-of-type {
                    border-left: none;
                }

                .atr-page-banner > .atr-page-banner-section.page-banner-left > .page-banner-element-wrapper.with-border {
                    border-left: 1px solid #404040;
                }

                .atr-page-banner > .atr-page-banner-section.page-banner-left > .page-banner-element-wrapper.right-border {
                    border-right: 1px solid #404040;
                    padding-right: 10px;
                }

                .atr-page-banner > .atr-page-banner-section.page-banner-left > .atr-breadcrumb-location-structure {
                    border-left: none;
                }
                
                    .atr-page-banner > .atr-page-banner-section.page-banner-left > .atr-breadcrumb-location-structure.atr-hidden-row {
                        display: none;
                    }
                    /*.atr-page-banner > .page-banner-left > div[class*='atr-breadcrumb-location-structure']:not(:nth-of-type(1)) {
                        border-left: none;
                    }*/

                .atr-page-banner > .atr-page-banner-section.page-banner-left > .atr-breadcrumb-location-structure .atr-breadcrumb-separator {
                    display: inline-block;
                    width: 4px;
                    height: 8px;
                    background: url(/Content/Images/sprites.png) no-repeat 0 -1190px;
                }

        .atr-page-banner > .atr-page-banner-section.page-banner-right {
            right: 0;
            left: auto;
        }
            
            .atr-page-banner > .atr-page-banner-section.page-banner-right > .page-banner-element-wrapper {
                border-right: 1px solid #404040;
            }

                .atr-page-banner > .atr-page-banner-section.page-banner-right > .page-banner-element-wrapper:last-of-type {
                    border-right: none;
                }

                /* This is specific to the ATR logo - the margin-right adjustment is to fix the letter-spacing after the last letter */
                .atr-page-banner > .atr-page-banner-section.page-banner-right > .page-banner-element:last-of-type {
                    padding-top: 5px;
                    padding-bottom: 5px;
                }

                .atr-page-banner > .page-banner-right > .page-banner-element:last-of-type > span {
                    /*margin-right: -11px;*/
                }



    #atr-logo {
        display: inline-block;
        width: 50px;
        height: 17px;
        background: url(/Content/Images/sprites.png) no-repeat 0 -1250px;
        vertical-align: middle;
        /*margin-top: -1px;*/
    }

        a#atr-logo:hover {
            background: url(/Content/Images/sprites.png) no-repeat -60px -1250px;
        }

    .atr-page-banner a.atr-icon-button.main-menu {
        display: inline-block;
        width: 16px;
        height: 18px;
        background: url(/Content/Images/sprites.png) no-repeat 0 -500px;
    }

        .atr-page-banner a.atr-icon-button.main-menu:hover {
            background: url(/Content/Images/sprites.png) no-repeat -30px -500px;
        }

        .atr-page-banner a.atr-icon-button.main-menu.jq-menu-showing {
            visibility: hidden;
        }


    .atr-page-banner.atr-page-banner-row-2 {
        display: block;
        top: 38px;
        margin-top: 2px;
        padding-top: 2px;
        border-top: 1px solid #404040;
    }
    
    .atr-page-banner.atr-page-banner-row-2.atr-hidden {
        display: none;
    }



@media screen and (max-width: 1024px) {
    
    .atr-page-banner.atr-page-banner-row-2 .page-banner-left .page-banner-element-wrapper:first-of-type {
        /*width: 17px;*/
        padding-right: 10px;
    }

        .atr-page-banner.atr-page-banner-row-2 .page-banner-left .page-banner-element-wrapper.atr-breadcrumb-lodge-name,
        .atr-page-banner.atr-page-banner-row-2 .page-banner-left .page-banner-element-wrapper.atr-breadcrumb-location-name,
        .atr-page-banner.atr-page-banner-row-2 .page-banner-left .page-banner-element-wrapper.atr-breadcrumb-location-structure,
        .atr-page-banner.atr-page-banner-row-2 .page-banner-left .page-banner-element-wrapper.atr-breadcrumb-experience-name {
            width: auto;
        }


        .atr-page-banner-wrapper.menu .atr-page-banner.atr-page-banner-row-2 .page-banner-left .page-banner-element-wrapper:first-of-type,
        .atr-page-banner-wrapper.search .atr-page-banner.atr-page-banner-row-2 .page-banner-left .page-banner-element-wrapper:first-of-type {
            width: auto;
        }

    /*.atr-page-banner-wrapper:not(.trip-location) .atr-page-banner.atr-page-banner-row-2 .page-banner-left .page-banner-element-wrapper:nth-of-type(2) {
        width: 24px;
        padding-right: 1px;
    }*/

        .atr-page-banner.atr-page-banner-row-2 .page-banner-left .page-banner-element-wrapper.atr-breadcrumb-location-structure {
            width: auto;
        }

    
    .atr-page-banner-wrapper.trip-location .atr-page-banner.atr-page-banner-row-2 .page-banner-left .page-banner-element-wrapper.atr-breadcrumb-trip-trip-name,
    .atr-page-banner-wrapper.trip-experience .atr-page-banner.atr-page-banner-row-2 .page-banner-left .page-banner-element-wrapper.atr-breadcrumb-trip-trip-name {
        display: none;
    }
    
    .atr-page-banner-wrapper.trip-location .atr-page-banner.atr-page-banner-row-2 .page-banner-left .page-banner-element-wrapper.atr-breadcrumb-nav-trip-name,
    .atr-page-banner-wrapper.trip-experience .atr-page-banner.atr-page-banner-row-2 .page-banner-left .page-banner-element-wrapper.atr-breadcrumb-nav-trip-name {
        display: none;
    }

    div.atr-page-banner-wrapper.trip-location
        > div.atr-page-banner.atr-page-banner-row-2 
            > div.atr-page-banner-section.page-banner-left 
                > div:nth-of-type(4) {
                        border-left: none;
                    }
}

@media screen and (max-width: 767px) {
    
    .atr-page-banner-wrapper.menu .atr-page-banner > .atr-page-banner-section.page-banner-left > .page-banner-element-wrapper.right-border {
        border-right: none;
        padding-right: 0;
    }


    .atr-page-banner.atr-page-banner-row-2 > .page-banner-left > .atr-breadcrumb-country-name {
        display: inline-block;
    }
    
}


@media screen and (max-width: 767px) and (orientation: landscape) {

    body:not(.searching) .atr-page-banner-wrapper {
        display: none;
    }

    .atr-page-wrapper.home > .atr-component,
    .atr-page-wrapper.menu > .atr-component {
        display: none;
    }

    .atr-page-wrapper.home #content-footer-wrapper,
    .atr-page-wrapper.menu #content-footer-wrapper {
        display: none;
    }

    body:not(.searching) #page-content {
        display: none;
    }

    .main-titles {
        display: none;
    }

    
    body:not(.searching) .atr-page-wrapper.menu .atr-zebra,
    .atr-page-wrapper.search .atr-zebra,
    .atr-page-wrapper-trip .main-viewport .atr-zebra {
        display: block;
        z-index: 1000128;
        background-image: url("http://images.africatravelresource.com/cdn/images/menu-rotate-bg.jpg");
    }
}

#directory-root-display-text {
    display: none;
}

@media screen and (max-width: 767px) {

    .atr-page-banner-wrapper.map .atr-page-banner:not(.atr-page-banner-row-2) #root-display-text {
        display: none;
    }
    
    .atr-page-banner-wrapper.map .atr-page-banner:not(.atr-page-banner-row-2) #directory-root-display-text {
        display: inline-block;
    }

    .page-banner-element-wrapper.atr-breadcrumb-nav-element.atr-s-border-right {
        border-right: 1px solid #404040;
    }


    .atr-page-banner-wrapper.trip-location .atr-page-banner:not(.atr-page-banner-row-2) .page-banner-left .page-banner-element-wrapper.jq-root-display-element,
    .atr-page-banner-wrapper.trip-experience .atr-page-banner:not(.atr-page-banner-row-2) .page-banner-left .page-banner-element-wrapper.jq-root-display-element,
    /*.atr-page-banner-wrapper.trip .atr-page-banner:not(.atr-page-banner-row-2) .page-banner-left .page-banner-element-wrapper.atr-breadcrumb-nav-element,*/
    /*.atr-page-banner-wrapper.trip-location .atr-page-banner:not(.atr-page-banner-row-2) .page-banner-left .page-banner-element-wrapper.atr-breadcrumb-nav-element,*/
    .atr-page-banner-wrapper.trip-experience .atr-page-banner:not(.atr-page-banner-row-2) .page-banner-left .page-banner-element-wrapper.atr-breadcrumb-nav-element {
        display: none;
    }

    .atr-breadcrumb-trip-location-name .page-banner-element .trip-location-nights {
        display: none;
    }


    .atr-page-banner-wrapper.trip-location .atr-page-banner-row-2 .page-banner-left .page-banner-element-wrapper.atr-breadcrumb-nav-trip-name {
        display: none;
    }
    
    .atr-page-banner-wrapper.trip-location .atr-page-banner-row-2 .page-banner-left .page-banner-element-wrapper:nth-of-type(2) {
        border-left: none;
    }

}


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

    .atr-page-banner-wrapper.popular-places .atr-page-banner:not(.atr-page-banner-row-2) #root-display-text span {
        display: none;
    }

    .atr-page-banner-wrapper.popular-places .atr-page-banner:not(.atr-page-banner-row-2) #root-display-text:after {
        content: 'Places'
    }
}


.page-banner-element .atr-text-11 {
    line-height: 32px;
}


/********************************************************

    Main Menu

    For root menu icon transform cf https://codepen.io/designcouch/pen/Atyop

*********************************************************/

#atr-root-menu-button {
    position: relative;
    display: inline-block;
    width: 15px;
    height: 13px;
    padding: 0;
    vertical-align: middle;
    margin-top: -1px;

    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}


#atr-root-menu-button span {
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  background: #fff;
  border-radius: 3px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

    #atr-root-menu-button:not(.touched):hover span {
        background-color: #46bc68;
    }

#atr-root-menu-button span:nth-child(1) {
  top: 0px;
}

#atr-root-menu-button span:nth-child(2),#atr-root-menu-button span:nth-child(3) {
  top: 7px;
}

#atr-root-menu-button span:nth-child(4) {
  top: 14px;
}

#atr-root-menu-button.open span:nth-child(1) {
  top: 8px;
  width: 0%;
  left: 50%;
}

#atr-root-menu-button.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#atr-root-menu-button.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#atr-root-menu-button.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}




nav.atr-main-menu-wrapper {
    z-index: 10000;
    position: fixed;
    top: 40px;
    left: -360px;
    width: 360px;
    height: calc(100% - 39px);  /* Safari will default to this because it doesn't like calc with vh */
    height: calc(100vh - 39px);
    border-top: 1px solid #404040;
    background-color: #262626;
    text-align: center;
    visibility: hidden;
}

    nav.atr-main-menu-wrapper.with-transition {
        visibility: visible;
        -webkit-transition: left 0.5s ease-in-out;
           -moz-transition: left 0.5s ease-in-out;
                transition: left 0.5s ease-in-out;
    }

    nav.atr-main-menu-wrapper.active {
        left: 0;
    }
    
    nav.atr-main-menu-wrapper .atr-main-menu.sub-menu-scroller {
        top: 0;
        width: calc(360px - 72px);
        height: 100%;
        padding-left: 36px;
        padding-right: 36px;
    }

    nav.atr-main-menu-wrapper .atr-main-menu-section {
        padding-top: 24px;
        padding-bottom: 24px;
    }

        nav.atr-main-menu-wrapper .atr-main-menu-section:first-of-type {
            padding-top: 36px;
        }

    nav.atr-main-menu-wrapper ul.atr-nav li {
        padding-top: 24px;
    }

        nav.atr-main-menu-wrapper ul.atr-nav li:first-of-type {
            padding-top: 0;
        }

        nav.atr-main-menu-wrapper ul.atr-nav li.atr-mobile-only {
            display: none;
        }


    nav.atr-main-menu-wrapper ul.atr-nav li a:hover {
        color: #fff;
    }
        
@media screen and (max-width: 767px) {
    
    nav.atr-main-menu-wrapper {
        width: 100%;
        top: 38px;
    }

    nav.atr-main-menu-wrapper .atr-main-menu.sub-menu-scroller {
        width: calc(100% - 72px);    
    }

    nav.atr-main-menu-wrapper ul.atr-nav li.atr-mobile-only {
        display: block;
    }
    
    nav.atr-main-menu-wrapper ul.atr-nav li {
        padding-top: 36px;
    }

    nav.atr-main-menu-wrapper .atr-main-menu-section.atr-m-large-padding-bottom {
        padding-bottom: 144px;
    }

    /*nav.atr-main-menu-wrapper ul.atr-nav li {
        padding-top: 18px;
    }
    
    nav.atr-main-menu-wrapper .atr-main-menu-section {
        padding-top: 18px;
        padding-bottom: 18px;
    }*/
}

    
@media screen and (max-height: 540px) and (orientation: portrait) {
    
    nav.atr-main-menu-wrapper ul.atr-nav li {
        padding-top: 18px;
    }
    
    nav.atr-main-menu-wrapper .atr-main-menu-section {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    nav.atr-main-menu-wrapper .atr-main-menu-section:first-of-type {
        padding-top: 0;
    }

    nav.atr-main-menu-wrapper .atr-main-menu-section ul.atr-nav.atr-text-14 {
        font-size: 1.2rem;
    }

    nav.atr-main-menu-wrapper .atr-main-menu-section a.atr-btn {
        height: 40px;
        line-height: 40px;
    }
}

@media screen and (max-width: 767px) and (orientation: landscape) {
    body:not(.searching) nav.atr-main-menu-wrapper {
        display: none;
    }
}

nav.atr-main-menu-wrapper .atr-main-menu-section .search-box {
    width: 100%;
    height: 35px;
    margin-top: 16px;
    transition: none;
    background: none;
    background-color: #fff;
}


    nav.atr-main-menu-wrapper .atr-main-menu-section .search-box input,
    .map-directory.search-box input {
        width: calc(100% - 18px);
        height: 26px;
        padding-top: 4px;
        padding-bottom: 3px;
        padding-left: 8px;
        padding-right: 8px;
        background: none;
        background-color: #fff;
        line-height: 26px;
		letter-spacing:0.5px;
		text-transform: uppercase;
        transition: none;
    }

        nav.atr-main-menu-wrapper .atr-main-menu-section .search-box input:placeholder-shown {
            letter-spacing: 2px;
        }
        
        nav.atr-main-menu-wrapper .atr-main-menu-section .search-box input:focus  {
            outline: none;
        }
        

    nav.atr-main-menu-wrapper .atr-main-menu-section .search-box .search-results {
        text-align: left;
        width: 100%;
        letter-spacing: 0.5px;
    }
    

    nav.atr-main-menu-wrapper  .atr-main-menu-section .atr-selected-currency {
        color: #fff;
    }

#root-menu-close-button {
    position: absolute;
    display: block;
    top: -30px;
    left: 16px;
}

    nav.atr-main-menu-wrapper a.atr-icon-button.main-menu-close {
        display: block;
        width: 16px;
        height: 18px;
        background: url(/Content/Images/sprites.png) no-repeat 0 -740px;
    }

        nav.atr-main-menu-wrapper a.atr-icon-button.main-menu-close:hover {
            background: url(/Content/Images/sprites.png) no-repeat -30px -740px;
        }


#atr-main-menu-page-overlay {
    z-index: -1;
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: #262626;
    opacity: 0.0;
    -webkit-transition: opacity 0.5s ease-in-out 1s;
       -moz-transition: opacity 0.5s ease-in-out 1s;
            transition: opacity 0.5s ease-in-out 1s;
}

@media screen and (max-width: 767px) and (orientation: portrait) {

    #atr-main-menu-page-overlay.active {
        z-index: 9999;
        display: block;
        opacity: 1.0;
    }
    
    #atr-main-menu-page-overlay.active.atr-mobile-only {
        display: block;
    }
}

/********************************************************

    Main menu for wide-screen and small height devices

********************************************************/
/*
@media screen and (min-width: 1025px) and (max-height: 778px), screen and (min-width: 768px) and (max-height: 778px) and (orientation: landscape) {

    nav.atr-main-menu-wrapper {
        width: calc(720px - 96px);
        left: -720px;
    }

    nav.atr-main-menu-wrapper .atr-main-menu-section {
        padding-top: 36px;
        padding-bottom: 36px;    
    }

    nav.atr-main-menu-wrapper .atr-main-menu-section.atr-col-left {
        position: absolute;
        left: 0;
        padding-left: 48px;
        padding-right: 24px;
        width: calc(360px - 72px);
    }

        nav.atr-main-menu-wrapper .atr-main-menu-section.atr-col-left.atr-row-1 {
            padding-top: 64px;
        }
    
    nav.atr-main-menu-wrapper .atr-main-menu-section.atr-col-right {
        position: absolute;
        left: 360px;
        padding-left: 24px;
        padding-right: 48px;
        width: calc(360px - 72px);
    }

        nav.atr-main-menu-wrapper .atr-main-menu-section.atr-col-right.atr-row-1 {
            top: 0;
        }
        
        nav.atr-main-menu-wrapper .atr-main-menu-section.atr-col-right.atr-row-2 {
            top: 165px;
        }

        nav.atr-main-menu-wrapper .atr-main-menu-section.atr-col-right.atr-row-3 {
            top: 287px;
        }

        nav.atr-main-menu-wrapper .atr-main-menu-section.atr-col-right.atr-row-4 {
            top: 409px;
        }
}
*/

/********************************************************

    Main Viewport

*********************************************************/
.main-viewport {
    position: relative;
    width: 100%;
    height: 100vh;
    border-bottom: 1px solid #000;
    background-color: #000;
}

    .atr-page-wrapper.menu .main-viewport,
    .atr-page-wrapper.search .main-viewport {
        display: none;
    }

    .main-viewport .atr-zebra {
        display: none;
        background-image: none;
    }

    .main-viewport.trip-viewport {
        height: 99.9vh;
    }

    .main-viewport.trip-viewport .atr-zebra {
        display: none;
        background-image: none;
    }

@media screen and (max-width: 767px) {
    
    .main-viewport {
        height: 99.9vh;
    }

    /*.atr-page-wrapper.trip .main-viewport .atr-zebra,
    .main-viewport.trip-viewport .atr-zebra {
        display: block;
        z-index: 9999;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        position: absolute;
    }

    .main-viewport.trip-viewport #map-placeholder,
    .main-viewport.trip-viewport #trip-map-information-card-holder,
    .main-viewport.trip-viewport .atr-trip-card-wrapper {
        display: none;
    }*/
}

@media screen and (max-width: 767px) and (orientation: landscape) {
    
    .atr-page-wrapper.menu .main-viewport,
    body:not(.searching) .atr-page-wrapper.search .main-viewport {
        display: block;
        height: 99.9vh;
    }
    
    .atr-page-wrapper.menu .main-viewport .atr-zebra,
    body:not(.searching) .atr-page-wrapper.search .main-viewport .atr-zebra,
    .main-viewport.trip-viewport .atr-zebra {
        display: block;
        z-index: 9999;
        background-image: url("http://images.africatravelresource.com/cdn/images/menu-rotate-bg.jpg");
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        position: absolute;
    }

    #trip-map-information-card-holder {
        display: none;
    }
}

    .main-viewport .home-titles {
        z-index: 100;
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
        text-align: center;
    }
    
    .main-viewport .main-titles.atr-large-padding-bottom {
        padding-bottom: 36px;
    }


@media screen and (max-width: 767px){

    .main-viewport .home-titles {
        display: none;
    }

}

/**********************************************

    Trip Map

***********************************************/

body.trip .main-viewport.trip-viewport #ToggleBox, 
body.trip .main-viewport.trip-viewport #MapControls {
    top: 50px;
}

body.trip .main-viewport.trip-viewport #trip-map.map-body {
    position: absolute;
    top: 40px;
    height: calc(100% - 40px);
}


@media screen and (max-width: 767px) {

    /*body.trip .main-viewport.trip-viewport #ToggleBox, 
    body.trip .main-viewport.trip-viewport #MapControls {
        top: 89px;
    }*/

    /*body.trip .main-viewport.trip-viewport #trip-map.map-body {
        top: 77px;
        height: calc(100% - 77px);
    }*/
}
/********************************************************

    Main Titles

*********************************************************/
.main-titles {
    z-index: 100;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

    .main-titles.in-flow {
        display: none;
    }

    .main-titles .main-title-section {
	    display: block;
        padding-bottom: 12px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .main-titles .main-title-section.jq-wishlist-element {
        padding-bottom: 36px;
    }

/* for smaller resolutions */
@media screen and (max-width: 1280px) {
    

        .main-titles .main-title-section.outside-flow {
            display: none;
        }

    .main-titles.in-flow {
        position: relative;
    }

    .main-titles.in-flow .main-title-section {
        background-color: #555555;
    }

        .main-titles.in-flow .main-title-section:first-of-type {
            padding-top: 36px;
        }
}


@media screen and (max-width: 767px) {

    .main-titles:not(.atr-large-padding-bottom) .main-title-section {
        padding-bottom: 36px;
    }
    
    .main-titles .main-title-section.jq-wishlist-element.atr-mobile-hidden {
        display: none;
    }

}


@media screen and (max-width: 767px) {

    .main-titles {
        bottom: 16px;
    }
}


@media screen and (max-width: 599px) {

    .main-titles {
        display: none;
    }
}

/* End of media query */



        /*.main-titles .main-title-section:last-of-type {
            padding-bottom: 24px;
        }*/

	.main-titles span {
	    color: #fff;
	}

        .main-titles span.atr-inline {
            display: inline-block;
            padding-left: 12px;
            padding-right: 12px;
        }

            .main-titles span.atr-inline.atr-pull-right {
                padding-right: 0;
            }

                .main-titles span.atr-inline.atr-superscript.atr-pull-right {
                    padding-right: 4px;
                }

            .main-titles span.atr-inline.atr-pull-left {
                padding-left: 0;
            }

                .main-titles span.atr-inline.atr-superscript.atr-pull-left {
                    padding-left: 4px;
                }

            /*.main-titles .main-title-section .main-title-data-section.atr-wide-space {
                padding-left: 16px;
                padding-right: 16px;
            }*/
            
            
.main-titles-wishlist-controls-wrapper {
    display: inline-block;
    width: 620px;
    margin-left: auto;
    margin-right: auto;
}

    .main-titles-wishlist-controls-wrapper span:nth-child(1),
    .main-titles-wishlist-controls-wrapper span:nth-child(3) {
        display: inline-block;
        width: 260px;
        line-height: 22px;
    }
    
    .main-titles-wishlist-controls-wrapper span:nth-child(2) {
        width: 25px;
        vertical-align: bottom;
    }
    
    .main-titles-wishlist-controls-wrapper span:nth-child(1) {
        text-align: right;
    }
    
    .main-titles-wishlist-controls-wrapper span:nth-child(3) {
        text-align: left;
    }

@media screen and (max-width: 560px){

    .main-titles-wishlist-controls-wrapper {
        display: none;
    }
}

/**********************************************

    Menu Pages

***********************************************/
.atr-component.first {
    margin-top: 40px;
}



/********************************************************

    Main Titles

*********************************************************/
.atr-component-section .main-title-data-section {
    position: relative;
    display: inline-block;
    width: 160px;
    height: 160px;
    border-radius: 80px;
    margin-left: 28px;
    margin-right: 28px;
    background-color: #d7efdf;
    color: #fff;
    text-align: center;
}

    .atr-component-section .main-title-data-section.clickable {
        cursor: pointer;
    }

    .atr-component-section .main-title-data-section > div {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        text-align: center;
        -ms-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }

        .atr-component-section .main-title-data-section > div > span {
            display: block;
        }

            .atr-component-section .main-title-data-section > div > span.atr-hidden {
                display: none;
            }

            .atr-component-section .main-title-data-section > div > span.atr-text-48 {
                margin-right: -14px;
            }

            .atr-component-section .main-title-data-section > div > span.atr-text-48.atr-text-narrow {
                margin-right: -1.5px;
            }

            .atr-component-section .main-title-data-section > div > span.atr-text-11.atr-text-wide {
                margin-right: -5px;
            }

@media screen and (max-width: 767px) and (orientation: portrait) {

    .atr-component-section .main-title-data-section {
        width: 144px;
        height: 144px;
        border-radius: 72px;
    }
}

@media screen and (max-width: 486px) and (orientation: portrait) {

    .atr-component-section .main-title-data-section {
        width: 120px;
        height: 120px;
        border-radius: 60px;
        margin-left: 16px;
        margin-right: 16px;
    }
}

@media screen and (max-width: 360px) and (orientation: portrait) {

    .atr-component-section .main-title-data-section {
        width: 108px;
        height: 108px;
        border-radius: 54px;
        margin-left: 8px;
        margin-right: 8px;
    }
}


/**********************************************

    Wishlist related

***********************************************/
.atr-wishlist-icon-small {
    display: inline-block;
    width: 25px;
    height: 22px;
    margin-left: 24px;
    margin-right: 24px;
    background: url(/Content/Images/sprites.png) no-repeat 0 -840px;
    cursor: pointer;
}

    .atr-wishlist-icon-small.hover {
        background: url(/Content/Images/sprites.png) no-repeat -30px -840px;
    }

    .atr-wishlist-icon-small.filled {
        background: url(/Content/Images/sprites.png) no-repeat 0 -980px;
    }

        .atr-wishlist-icon-small.filled.hover {
        background: url(/Content/Images/sprites.png) no-repeat -30px -980px;
        }

.main-title-section a span.atr-wishlist-icon-small {
    vertical-align: middle;
}

    .main-title-section a:hover {
        color: #46bc68;
    }

    .main-title-section a:hover span.atr-wishlist-icon-small {
        background: url(/Content/Images/sprites.png) no-repeat -30px -840px;
    }

.atr-wishlist-icon-large {
    display: inline-block;
    width: 111px;
    height: 100px;
    margin-top: 36px;
    background: url(/Content/Images/sprites.png) no-repeat 0 -870px;
}

    .atr-wishlist-icon-large.filled {
        background: url(/Content/Images/sprites.png) no-repeat -120px -870px;
    }