/* Home Page Jumbotron Div */ #wrapper div#jumbotron-content { text-align: center; height: $jumbotron-height; } #jumbotron-image:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom right, #000, #000); opacity: .5; } /* Overlay - 60% opacity default */ #jumbotron.overlay { background-color: rgba(0, 0, 0, $overlay); position: relative; z-index: 0; } #jumbotron.overlay:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; height: $jumbotron-height; left: 0; background-image: linear-gradient(to bottom right, #000, #000); opacity: .5; width: 100%; z-index: -1; } .overlay:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; height: $jumbotron-height; left: 0; background-image: linear-gradient(to bottom right, #000, #000); opacity: .5; width: 100%; z-index: 0; } #wrapper div#jumbotron.background-image.bg-up { background-position-y: 0px !important; background-position-x: center !important; } video#jumbotronVideo { position: absolute; right: 0; bottom: 0; min-width: 100%; min-height: 100%; top:0px; z-index:-2; } #wrapper div#jumbotron.video { height: 600px !important; } #wrapper div#jumbotron.video:before { height: 600px !important; } #wrapper div#jumbotron.video h1#jumbotron-heading { font-size: 50px; } #wrapper div#jumbotron.video div#jumbotron-content { height:600px; } #wrapper div#jumbotron.background-image { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } div.jumbotron-image{ background-repeat: no-repeat; background-position: center; background-size: cover; height: 100%; width: 100%; } /* Jumbotron Sub Title */ #wrapper #jumbotron-sub-title { max-width:700px; color: $jumbotron-sub-title-color; font-size: $jumbotron-sub-title-font-size; } /* Jumbotron Heading */ #wrapper #jumbotron-heading { max-width: 700px; color: $jumbotron-heading-color; font-size: $jumbotron-font-size; margin-top: 0px; } /* Jumbotron Styles - SM */ @media(max-width:$screen-sm-min){ #wrapper #jumbotron-heading { font-size: $jumbotron-font-size-xs; } #wrapper #jumbotron-sub-title { color: $jumbotron-sub-title-color; font-size: $jumbotron-sub-title-font-size-xs; } #wrapper #jumbotron-sub-title.smaller { font-size: 14px !important; } } #buttons > a.btn { color: black ; font-weight: normal; font-size: 12px; background-color: white; } #buttons > a.btn:hover { color: white ; font-weight: normal; font-size: 12px; background-color: $brand-primary; } /* Jumbotron Header */ #jumbotron { background: $jumbotron-bottom-color; /* Old browsers */ background: -moz-linear-gradient(top, $jumbotron-top-color 0%, $jumbotron-bottom-color 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, $jumbotron-top-color 0%,$jumbotron-bottom-color 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, $jumbotron-top-color 0%, $jumbotron-bottom-color 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$jumbotron-top-color, endColorstr=$jumbotron-bottom-color,GradientType=0 ); /* IE6-9 */ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; } #wrapper #jumbotron small { font-size: 14px; } // Owl Carousel Slider Full Width #wrapper #jumbotron-slider + .big-triangle { position: relative; z-index: 2; } #jumbotron-slider { position: relative; height: 100%; div:not(.owl-controls) { height: 100%; } h2.slide-title.big-title { font-size: 60px; font-weight: bold; @media(max-width: $screen-sm-min) { font-size: 38px !important; } } .owl-slide { background-repeat: no-repeat; background-size: cover; background-position: center; } .slide-title { z-index: 2; color: white; font-size: 32px; position: relative; max-width: 600px; margin: auto; margin-left: auto; margin-right: auto; } h2.slide-title.desc-title { margin-bottom: 0px; @media(max-width: $screen-sm-min) { font-size: 24px !important; } } div.owl--text { position: relative; width: 700px; height: auto; opacity: .8; font-size: 16px; padding: 10px; color: white; margin: auto; margin-left: auto; border-radius: 4px; margin-right: auto; margin-top: 0px; @media(max-width: $screen-sm-min) { width: 100%; } border-radius: 4px; p { color: white; margin-bottom: 5px; @media(max-width: $screen-sm-min) { font-size: 12px !important; } } a.btn { position: relative; display: inline-block; margin-left: auto; margin-right: atuo; } } .owl-dots { position: absolute; bottom: 0px; width: 100%; height: 40px !important; } .owl-controls { position: absolute; top: 50%; left: 0; right: 0; .owl-buttons { div { position: absolute; top: 0; bottom: 0; display: inline-block; zoom: 1; margin: 0; width: 50px; height: 30px; line-height: 25px; text-align: center; font-size: .9em; border-radius: 3px; color: #FFF; background: #000; opacity: .6; text-transform: capitalize; } .owl-prev { left: 5px; } .owl-next { right: 5px; } } } } #wrapper .carousel-header .big-triangle { z-index: -1; position: relative; bottom: 0px; } .item.owl-slide.flex-center.overlay { padding: 10px; } body, html { height: 100%; } body { margin: 0; font-family: futura, sans-serif; } @import 'triangle-divider';