/*Custom styles*/
.normalPuffText {
    font-size: 14px !important;
    line-height: 1.3;
}

.normalPuffHeader {
    font-size: 18px !important;
    line-height: 1.3;
}

.Ingress {
    font-size: 20px !important;
    color: #5c9de7 !important;
    line-height: 1.5 !important;
}

@media screen and (max-width: 1800px) {
    .Ingress {
        font-size: 1.6vw !important;
        line-height: 1.5 !important;
    }
}

@media screen and (max-width: 1280px) {
    .Ingress {
        font-size: 2.1vw !important;
        line-height: 1.5 !important;
    }
}

@media screen and (max-width: 768px) {
    .Ingress {
        font-size: 2.6vw !important;
        line-height: 1.5 !important;
    }
}

@media screen and (max-width: 600px) {
    .Ingress {
        font-size: 3.1vw !important;
        line-height: 1.5 !important;
    }
}

@media screen and (max-width: 480px) {
    .Ingress {
        font-size: 3.6vw !important;
        line-height: 1.5 !important;
    }
}

@media screen and (max-width: 380px) {
    .Ingress {
        font-size: 4.1vw !important;
        line-height: 1.5 !important;
    }
}

.centerSocial {
    margin: 0 auto;
    max-width: 500px;
    text-align: center;
    min-height: 350px;
}

.SocialFoot {
    width: 45%;
    margin: auto;
    font-size: 50px;
    color: #555555 !important;
}

    .SocialFoot a {
        color: #555555 !important;
    }

        .SocialFoot a:hover {
            color: #f03dac !important;
        }

.Full_Screen_PaneA {
    margin-top: 0 !important;
}

.Full_Screen_PaneB {
    margin-top: 25px !important;
}

.ContentTop_bg {
    margin-top: 0 !important;
}
/*--Titleclass in rotator--*/
.rotatorTitle {
    font-size: 22px;
    line-height: 1.4;
}
/*--Titleclass in rotator--*/
/*-_-_-_-_-_-_-_-_-_-Responsive image style for fullwidth-_-_-_-_-_-_-_-_-_-*/


.responsiveImg100x45em {
    width: 100%;
    height: 45em;
    object-fit: cover;
    overflow: hidden;
}

@media screen and (max-width: 1280px) {
    .responsiveImg100x45em {        

        width: 100%;
        height: 30em;
        object-fit: cover;
        overflow: hidden;
    }
}

@media screen and (max-width: 900px) {
    .responsiveImg100x45em {
        width: 100%;
        height: 25em;
        object-fit: cover;
        overflow: hidden;
    }
}

@media screen and (max-width: 500px) {
    .responsiveImg100x45em {     content: url("http://www.thealps.com/Portals/0/LayerGallery/uploads/2017/1/11/tjdcbzf0.jpg");
        width: 100%;
        height: 20em;
        object-fit: cover;
        overflow: hidden;
    }
}


.responsiveImg100x20em {
    width: 100%;
    height: 30em;
    object-fit: cover;
    overflow: hidden;
}

@media screen and (max-width: 1280px) {
    .responsiveImg100x20em {
        width: 100%;
        height: 30em;
        object-fit: cover;
        overflow: hidden;
    }
}

@media screen and (max-width: 900px) {
    .responsiveImg100x20em {
        width: 100%;
        height: 25em;
        object-fit: cover;
        overflow: hidden;
    }
}

@media screen and (max-width: 500px) {
    .responsiveImg100x20em {
   
        width: 100%;
        height: 20em;
        object-fit: cover;
        overflow: hidden;
    }
}


/*-_-_-_-_-_-_-_-_-_-Responsive image style for fullwidth-_-_-_-_-_-_-_-_-_-*/
/*-_-_-_-_-_-_-_-_-_-HeadContainer-_-_-_-_-_-_-_-_-_-*/
.programTopContainer {
    overflow: hidden;
}

#leftDiv {
    float: left;
    width: 50%;
    height: 100%;
    padding-top: 30px;
    min-height: 200px;
}

#rightDiv {
    overflow: hidden;
    background-color: gray;
    min-height: 200px;
}

@media screen and (max-width: 767px) {
    #leftDiv {
        float: none;
        margin-right: 0;
        width: 100%;
        border: 0;
        padding: 15px;
    }

    .contentBox {
        min-width: 125px;
    }
}

.topContainerRow {
    width: 95%;
    margin-right: 10px;
    overflow: hidden;
    border-bottom: 3px solid #5d9de6;
    height: 25% !important;
}

.iconBox {
    padding: 15px;
    overflow: hidden;
    height: 100%;
    width: 110px;
    text-align: center;
}

    .iconBox img {
        max-height: 100%;
        max-width: 100%;
    }

.contentBox {
    text-align: left;
    overflow: hidden;
    color: #5d9de6;
    padding-top: 15px;
    padding-left: 15px;
}
/*-_-_-_-_-_-_-_-_-_-HeadContainer-_-_-_-_-_-_-_-_-_-*/

.outerBigMapDiv {
    width: 80%;
    margin: auto;
}

@media screen and (max-width: 1280px) {
    .outerBigMapDiv {
        width: 85%;
        margin: auto;
    }
}

@media screen and (max-width: 900px) {
    .outerBigMapDiv {
        width: 90%;
        margin: auto;
    }
}

@media screen and (max-width: 500px) {
    .outerBigMapDiv {
        width: 90%;
        margin: auto;
    }
}

/*-_-_-_-_-_-_-_-_-_-Maps/images in Livetabs-_-_-_-_-_-_-_-_-_-*/
.ImgThreeEquals_wrapper; {
    display: inline-block;
}

.ImgThreeEquals {
    width: 33.3333%;
    height: 250px;
    padding: 7px;
    float: left;
    overflow: hidden;
}

    .ImgThreeEquals img {
        height: 250px;
        width: 100%;
    }
/*-_-_-_-_-_-_-_-_-_-Maps/images in Livetabs-_-_-_-_-_-_-_-_-_-*/
/*-_-_-_-_-_-_-_-_-_-Custom responsive tabs styles-_-_-_-_-_-_-_-_-_-*/
.tab_body {
    width: 100%;
}

.tab_body_left {
    width: 45%;
    max-width: 500px;
    float: left;
    margin: 5px 25px 5px 0;
    overflow: hidden;
}

.tab_body_right {
    overflow: hidden;
    width: 45%;
}

@media screen and (max-width: 767px) {
    .tab_body_left {
        float: none;
        width: 100%;
        padding: 15px;
        max-width: none;
        margin: 0;
    }

        .tab_body_left img {
            width: 100%;
            max-width: none;
        }

    .tab_body_right {
        width: 100%;
        padding: 15px;
    }
}
/*-_-_-_-_-_-_-_-_-_-Custom responsive tabs styles-_-_-_-_-_-_-_-_-_-*/
.icontest {
    font-size: 500px;
}

.start_headWrap {
    overflow: hidden; /*margin: 10px;*/
}

.start_headBox {
    float: left;
    position: relative;
    width: 100%;
    padding-bottom: 30%;
}

.boxInner {
    position: absolute;
    overflow: hidden;
}

    .boxInner img {
        width: 2000px;
        max-width: 100%;
    }

@media only screen and (min-width: 1025px) {
    .start_headBox {
        float: left;
        position: relative;
        width: 100%;
        padding-bottom: 25%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .start_headBox {
        float: left;
        position: relative;
        width: 100%;
        padding-bottom: 30%;
    }
    .caption__media{
    	height: 330px !important;
    }
}

@media only screen and (max-width: 767px) {
    .start_headBox {
        float: left;
        position: relative;
        width: 100%;
        padding-bottom: 50%;
    }
}

.rotator-info {
    margin: 20px;
}

/*--Puff8 styles--*/
.puff8_Img {
    width: 100%;
    /*20151231 PC Imaes ize is squewed - fix this - but now images hase to be right proportion.*/
    /*height: 245px;*/
}

/*---Puff8 styles---*/

/*---Framework "Services"---*/
.frame {
    width: 100%;
    margin: 25px 0;
}

.serviceRow {
    width: 100%;
}

.imgContainer {
    width: 33.3333%;
    float: left;
    overflow: hidden;
}

@media only screen and (max-width: 750px) {
    .imgContainer {
        width: 100%;
        float: left;
        overflow: hidden;
    }
}

/*
 * Caption component
 */
.captionPuff {
    position: relative;
    overflow: hidden;
    /* Only the -webkit- prefix is required these days */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

    .captionPuff::before {
        content: ' ';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: transparent;
        transition: background .35s ease-out;
    }


/* ---Complete background color---
.caption:hover::before {
    background: rgba(0, 0, 0, .5);
}*/

.caption__media {
     background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 360px;
    width: 100%;
    background-position: center top;
}

.caption__overlay {
    position: absolute;
    /*determine the 'size' of the caption overlay. Bigger number means smaller overlay*/
    top: 35%;
    right: 2%;
    bottom: 0;
    left: 2%;
    /*end 'size'*/
    padding: 5px;
    color: #ffffff;
    background: rgba(76, 130, 191, .7);
    -webkit-transform: translateY(80%);
    transform: translateY(80%);
    transition: -webkit-transform .35s ease-out;
    transition: transform .35s ease-out;
}

.captionPuff:hover .caption__overlay {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.caption__overlay__title {
    margin: 0;
    padding: 0 0 12px;
    font-size: 28px;
    -webkit-transform: translateY(-webkit-calc(-100% - -100% )); /*10px --- If overlay title should be visible at all times*/
    transform: translateY(calc(-100% - -100% )); /*10px --- If overlay title should be visible at all times*/
    transition: -webkit-transform .35s ease-out;
    transition: transform .35s ease-out;
    text-align: center;
    font-family: inherit;
}

.caption__overlay__content {
    margin: 0;
    padding: 0 0 12px;
    text-align: center;
    font-family: inherit;
}

.captionPuff:hover .caption__overlay__title {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}


/*---END Framework "Services"---*/

/*--- Custom icon font from icomoon ---*/
@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?-wm4twp');
    src: url('fonts/icomoon.eot?#iefix-wm4twp') format('embedded-opentype'), url('fonts/icomoon.woff?-wm4twp') format('woff'), url('fonts/icomoon.ttf?-wm4twp') format('truetype'), url('fonts/icomoon.svg?-wm4twp#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-play2:before {
    content: "\ea15";
}
/*--- End Custom icon font from icomoon ---*/

/*button div style*/
.btnHolder {
    width: 60%;
    margin: 15px auto;
}
/*button div style*/
/*-_-_-_-_-_-_-_-_-_-\Content/images/spare-icons mm./-_-_-_-_-_-_-_-_-_-*/
.contentHolder {
    width: 95%;
    margin: 10px;
    overflow: hidden;
}

    .contentHolder img {
        width: 100%;
        display: block;
    }

.contentHolderWide {
    width: 100%;
    overflow: hidden;
}

    .contentHolderWide img {
        width: 100%;
        display: block;
    }

.contentBoxed {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

    .contentBoxed img {
        width: 100%;
        display: block;
    }
/*-_-_-_-_-_-_-_-_-_-\Content/images/spare-icons mm./-_-_-_-_-_-_-_-_-_-*/

/*-_-_-_-_-_-_-_-_-_-Programs styles-_-_-_-_-_-_-_-_-_-*/

.programContent {
    width: 100%;
}

.program_img img {
    max-width: 100% !important;
    display: block;
    margin: auto !important;
}

.program_text {
    width: 75%;
    float: left;
    padding: 10px;
}

.program_img {
    max-width: 25%;
    height: auto;
    float: left;
    overflow: hidden;
    padding: 10px;
}


/*-------------------------------------------------
               End custom styles                   
  -------------------------------------------------*/