/********************************************
****************** GLOBAL SETTINGS **********
********************************************/

html {
    font-size: 14px;
}

body {
    overflow-x: hidden;
    font-family: 'Lato', sans-serif;
    background: #fff;
    color: #111;
    font-size: 0.714285em;
}

p {
    font-size: 1.8em;
    font-weight: 500;
    line-height: 1.555556em;
}

a,
a:hover,
a:focus,
a:active,
a.active {
    outline: 0;
    color: #111;
}

a {
    color: #111;
    font-size: 1.4em;
}

p a {
    font-size: 1em;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Lato', sans-serif;
}

h2 {
    font-weight: 300;
    font-size: 5.2em;
    padding-top: 35px; /* appr. 10px */
}

h3 {
    color: #fff;
    font-size: 3.6em;
    font-weight: 400; /* appr. 10px */
    line-height: 1em;
}

h4 {
    font-weight: 600;
    font-size: 2.2em; /* appr. 10px */
}

.section-heading {
    margin-top: 70px; /* appr. 10px */
}

.text-right {
    text-align: right;
}

::-moz-selection {
    text-shadow: none;
    background: #111;
}

.img-center {
    margin: 0 auto;
}

::selection {
    text-shadow: none;
    background: #111;
    color: #fff;
}

img::selection {
    background: 0 0;
}

img::-moz-selection {
    background: 0 0;
}

body {
    webkit-tap-highlight-color: #111;
}

#facebook-logo {
  margin-right: 30px;
}

#facebook-logo img {
  width: 120px;
}

#instagram-logo img{
  margin-top: 10px;
}

#facebook-logo:hover {
    opacity: 0.76;
    -webkit-transition: opacity 0.25s ease;
    -moz-transition: opacity 0.25s ease;
    -o-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

#facebook-logo-menu:hover {
    opacity: 0.76;
    -webkit-transition: opacity 0.25s ease;
    -moz-transition: opacity 0.25s ease;
    -o-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

#instagram-logo:hover {
    opacity: 0.76;
    -webkit-transition: opacity 0.25s ease;
    -moz-transition: opacity 0.25s ease;
    -o-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.line_under_section_header {
    margin-top: 20px; /* appr. 10px */
    width: 80px; /* appr. 10px */
    height: 3px; /* appr. 10px */
    background-color: #111;
}

.calendar-header .line_under_section_header {
    margin: 30px auto auto auto; /* appr. 10px */
}

footer .line_under_section_header {
    margin-bottom: 20px; /* appr. 10px */
}

.btn-primary, .btn-primary:hover, .btn-primary:visited, .btn-primary:active, .btn-primary:link {
    background-color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 18px;
    border: 2px solid #111;
    margin-top: 20px; /* appr. 10px */
    padding: 20px 30px;
    color: #111;
    border-radius: 2px;
}

.btn-primary, .btn-primary:hover {
    background-color: #111;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 18px;
    border: 2px solid #111;
    margin-top: 20px; /* appr. 10px */
    padding: 20px 30px;
    color: #fff;
    border-radius: 2px;
}


/****** scroll call ********/

.scroll-call-circle {
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 60px; /* appr. 10px */
    height: 60px; /* appr. 10px */
    border-radius: 100%;
    background-color: #FFF;
    opacity: 0.9;
}

.scroll-call-circle.userHasScrolled {
    opacity: 0;
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
}

.scroll-call-circle img {
    position: absolute;
    left: 25%;
    top: 15%;
    -webkit-animation: scroll-call 3s ease infinite;
}


@-webkit-keyframes scroll-call {
    30%, 100% { transform: translateY(0%);}
    70% { transform: translateY(15%); }
}


/********************************************
****************** RWD **********************
********************************************/

@media(min-width:768px) {
    .navbar-default {
        padding: 25px 0; /* appr. 10px */
        border: 0;
        font-size: 1.3em;
        background-color: transparent;
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        -o-transition: padding .3s;
        transition: padding .3s;
    }

    .navbar-default .navbar-brand {
        font-size: 2em;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }

    .navbar-default.navbar-shrink {
        padding: 10px 0; /* appr. 10px */
        background-color: #111;
    }

    .navbar-default.navbar-shrink .navbar-brand {
        font-size: 1.5em;
    }
}

/********************************************
****************** BOOTSTRAP ****************
********************************************/

.navbar-default.navbar-shrink {
    background-color: #fff !important;
    border-bottom: 1px solid #e0e0e0;
    font-size: 1.3em !important;
    -webkit-transition: background-color 0.3s ease, border-bottom 0.2s ease, padding .3s;
    -moz-transition: background-color 0.3s ease, border-bottom 0.2s ease, padding .3s;
    -o-transition: background-color 0.3s ease, border-bottom 0.2s ease, padding .3s;
    transition: background-color 0.3s ease, border-bottom 0.2s ease, padding .3s;
}

.navbar-brand {
	padding: 5px 0 0 0 !important; /* appr. 10px */
}

.navbar-nav>li>a {
    padding: 10px 2px 10px 2px; /* appr. 10px */
    margin: 5px 13px 5px 13px; /* appr. 10px */
    color: #111 !important;
    font-weight: 500;
}

@media(max-width:768px) {
  .navbar-default .navbar-nav>li>a {
    color: #666 !important;
  }
}

.navbar-shrink .navbar-nav>li>a {
  color: #666 !important;
}

.navbar-nav>li>a {
    background-color: #transparent !important;
    border-bottom: 3px solid transparent;
}

.navbar-nav>li>a:hover {
    color: #111 !important;
    background-color: transparent !important;
}

.navbar-shrink .navbar-nav>li>a:hover {
    color: #111 !important;
}

.navbar-nav>li.active a {
    -webkit-transition: border-bottom .5s ease;
    -moz-transition: border-bottom .5s ease;
    -o-transition: border-bottom .5s ease;
    transition: border-bottom .5s ease;
    color: #111 !important;
    border-bottom: 3px solid #111;
    background-color: transparent !important;
}

/********************************************
****************** SPOTLIGHT ****************
********************************************/

.logo {
    width: 90px !important;
}

.menu-fblogo {
    margin-top: -4px;
}

@media all and (min-width:768px) {
  html, body, header, .asdf, .spotlight {
      height: 100%;
  }
}

@media all and (max-width:767px) {
  html, body, header, .asdf, .spotlight {
      height: 400px;
  }
  .spotlight {
      top: 50px;
      height: 100%;
  }
}

.spotlight {
    position: relative;
    width: 100%;
    background: #111 url("../img/header-bg.jpg") no-repeat bottom;
    background-size: cover;
}

.mouse-icon {
    margin-top: 270px; /* appr. 10px */
}

/********************************************
****************** ABOUT ********************
********************************************/

.about-welcome {
    margin: 0;
    padding: 80px 0 146px 0; /* appr. 10px */
    color: #777;
}

.about-welcome h3 {
    color: #111;
    padding-top: 60px; /* appr. 10px */
    font-weight: 300;
    font-size: 4.0em;
    line-height: 1.2em;
}

.about {
    background: #111;
    margin: 0;
    padding: 146px 0;
    color: #666;
}

.about p {
    padding-top: 6px; /* appr. 10px */
}

.about h3 {
    font-weight: 300;
    font-size: 4.0em;
    line-height: 1.2em;
}

.logowhite-wiml {
    margin-top: 50px;
}

.sponsors {
    margin-top: 40px;
}

.sponsors-link {
    display: inline-block;
    width: 100px;
    margin: 15px;
}


/********************************************
****************** MOVIES *******************
********************************************/

.movie {
    min-height: 600px; /* appr. 10px */
    border: 1px solid #e0e0e0;
    margin-top: 30px; /* appr. 10px */
}

.movie-img {
    height: 485px;
    width: 100%;
    background-size: cover !important;
}

.movie h3 {
    color: #111;
    padding: 0;
    margin: 0;
    font-size: 2.3em; /* appr. 10px */
    line-height: 1em; /* appr. 10px */
    margin-bottom: 9px; /* appr. 10px */
}

.movie p {
    margin: 0;
    padding: 0;
}

.movie a {
    color: #111;
}

.movie img {
    padding: 0 8px 0 0; /* appr. 10px */
}

.movie-txt {
    background: #fff;
    padding: 15px 30px; /* appr. 10px */
    position: absolute;
    bottom: 1px;
    overflow: hidden;
}

.trailer {
    margin-top: 10px; /* appr. 10px */
    padding-top: 5px; /* appr. 10px */
}

.fa-play-circle-o {
    font-size: 2em;
    color: #111;
}

.movie-img-one {
    background: #fff url("../img/movies/movie-one1.jpg") no-repeat center top;
}
.movie-img-two {
    background: #fff url("../img/movies/movie-two2.jpg") no-repeat left top;
}
.movie-img-three {
    background: #fff url("../img/movies/movie-three3.jpg") no-repeat center top;
}
.movie-img-four {
    background: #fff url("../img/movies/movie-four4.jpg") no-repeat left top;
}
.movie-img-five {
    background: #fff url("../img/movies/movie-five5.jpg") no-repeat center top;
}
.movie-img-six {
    background: #fff url("../img/movies/movie-six6.jpg") no-repeat center bottom;
}



/********************************************
****************** CALENDAR *****************
********************************************/

.calendar {
    margin-bottom: 30px; /* appr. 10px */
    margin-top: 20px; /* appr. 10px */
}

.calendar-header {
    text-align: center;
    margin-bottom: 40px; /* appr. 10px */
}

.calendar h3 {
    font-size: 3em;
    font-weight: 300;
    color: #111;
}

.calendar-facebook {
    text-align: center;
    margin-bottom: 80px; /* appr. 10px */
}

#program a {
    color: #111;
}

.program-hide {
    visibility: hidden;
}

.program-more-info {
    font-size: 1.4em;
}

/****** PROGRAM ******/

@media all and (min-width:1200px) {
    .program-col-left, .program-col-middle {
        padding-right: 0;
    }

    .program-col-right {
        padding-left: 0;
    }

    .calendar .col-lg-2 {
        padding-right: 0;
        padding-left: 0;
    }
}

@media all and (max-width:1199px) {
    .calendar .col-lg-2 {
        display: none;
    }
}

.program-left-frame, .program-right-frame {
    outline: 1px solid #e0e0e0;
    padding: 15px 50px 10px 50px; /* appr. 10px */
    margin-top: 200px; /* appr. 10px */
    height: 200px; /* appr. 10px */
}

.program-left-frame:first-child {
    margin-top: 0;
}

.program-two-buttons {
    margin: 0 0 200px 0; /* appr. 10px */
    padding: 0;
}

.program-button-map, .program-button-fb {
    width: 50%;
    float: left;
    background-color: #f5f5f5;
    height: 70px; /* appr. 10px */
    outline: 1px solid #e0e0e0;
    padding-top: 20px; /* appr. 10px */
    text-align: center;
}

.program-button-map:hover, .program-button-fb:hover {
    background-color: #ccc;
    cursor: pointer;
    -webkit-transition: background-color 0.6s ease;
    -moz-transition: background-color 0.6s ease;
    -o-transition: background-color 0.6s ease;
    transition: background-color 0.6s ease;
}

.program-button-map img, .program-button-fb img {
    opacity: 0.3;
}

.program-dot-spot {
    position: relative;
    height: 200px; /* appr. 10px */
    width: 100%;
}

.dot1.start .program-grey-dot, .dot1.start .program-grey-line,
.dot2.start .program-grey-dot, .dot2.start .program-grey-line,
.dot3.start .program-grey-dot, .dot3.start .program-grey-line,
.dot4.start .program-grey-dot, .dot4.start .program-grey-line,
.dot5.start .program-grey-dot, .dot5.start .program-grey-line,
.dot6.start .program-grey-dot, .dot6.start .program-grey-line,
.dot7.start .program-grey-dot, .dot7.start .program-grey-line,
.dot8.start .program-grey-dot, .dot8.start .program-grey-line,
.dot9.start .program-grey-dot, .dot9.start .program-grey-line,
.dot10.start .program-grey-dot, .dot10.start .program-grey-line,
.dot11.start .program-grey-dot, .dot11.start .program-grey-line {
    background-color: #111;
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}

.program-grey-dot, .program-grey-line {
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}

.program-triangle-left, .program-triangle-right {
    top: 30px; /* appr. 10px */
}

.program-grey-dot {
    top: 33px; /* appr. 10px */
}

.program-grey-dot {
    background-color: #e0e0e0;
    width: 15px; /* appr. 10px */
    height: 15px; /* appr. 10px */
    border-radius: 100%;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.program-grey-line {
    background-color: #e0e0e0;
    width: 2px;
    position: relative;
    left: 50%;
    top: 40px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.program-grey-line {
    height: 170px; /* appr. 10px */
}

.program-grey-line-last {
    height: 330px;
}

.program-triangle-left, .program-triangle-right {
    position: absolute;
    padding: 0;
    width: 0;
    height: 0;
    border: solid 11px; /* appr. 10px */
    border-left: solid 10px; /* appr. 10px */
}

.program-triangle-left {
    border-color: transparent transparent transparent #e0e0e0;
    left: 0;
}

.program-triangle-right {
    border-color: transparent #e0e0e0 transparent transparent;
    right: 0;
}



/****** END PROGRAM ******/



/********************************************
****************** SHOP *********************
********************************************/

.shop-header {
    margin-bottom: 50px; /* appr. 10px */
}

.grid {
    max-width: 1300px;
    margin: 0 auto;
    list-style: none;
    border: 1px solid #e0e0e0;
    margin-bottom: 30px; /* appr. 10px */
    cursor: pointer;
}

.grid figure {
    margin: 0;
    position: relative;
}

.grid figure img {
    max-width: 100%;
    display: block;
    position: relative;
}

.grid figcaption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px; /* appr. 10px */
    background: #111;
    color: #fff;
}

.grid figcaption h3 {
    margin: 0;
    padding: 0;
    font-weight: 300;
    font-size: 2.142857em;
}

.grid figcaption h5 {
    margin: 0;
    padding: 0;
    font-size: 1.071428em;
    margin-top: 7px; /* appr. 10px */
    font-weight: 300;
}

.cs-style-3 figure {
    overflow: hidden;
}

.cs-style-3 figure img {
    -webkit-transition: transform 0.4s;
    -moz-transition: transform 0.4s;
    -o-transition: transform 0.4s;
    transition: transform 0.4s;
}

.no-touch .cs-style-3 figure:hover img,
.cs-style-3 figure.cs-hover img {
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    transform: translateY(-50px);
}

.cs-style-3 figcaption {
    height: 100px; /* appr. 10px */
    width: 100%;
    top: auto;
    bottom: 0;
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
    -o-transition: -o-transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
}

.no-touch .cs-style-3 figure:hover figcaption,
.cs-style-3 figure.cs-hover figcaption {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s;
    -o-transition: -o-transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s;
}

.shop-copy {
    margin-bottom: 100px;
}

.shop-copy a {
    color: #111;
}


/********************************************
****************** CONTACT ******************
********************************************/

.footer {
    color: #666;
    padding-top: 200px; /* appr. 10px */
    background: #111;
    padding-bottom: 300px;
    margin-top: 70px;
}

.footer a:hover,
.footer a:focus,
.footer a:active,
.footer a.active {
    font-size: 1em;
    outline: 0;
    color: #fff;
    text-decoration: underline;
}

.footer a {
    font-size: 1em;
    color: #fff;
    font-weight: 300;
}

.footer h3 {
    font-weight: 300;
}

.logo-circle {
    margin: 0 auto;
    padding: 50px 0 20px; /* appr. 10px */
}

.copyright {
    text-align: center;
    margin-bottom: 180px; /* appr. 10px */
}

.copyright h5 {
    font-size: 1.2em;
    line-height: 1.5em;
    color: #666;
}