/* 1.1 - Banner */ .banner{ height: calc(100% - 60px); overflow: hidden; padding: 0 0; position: relative; .overlay-bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba($black, .5); z-index: 1; } .owl-theme { height: 100%; div:not(.owl-controls) { height: 100%; overflow: hidden; } .wrap-caption{ height: auto !important; } .owl-dots{ height: auto !important; margin-top: -50px; } &.banner-nav{ height: auto !important; .custom-nav{ height: 100px !important; } } .item{ background-repeat: no-repeat; background-size: cover; background-position: center; img{ display: none; } } } .custom-nav { position: absolute; top: 40%; left: 0; right: 0; height: auto; .owl-prev, .owl-next { position: absolute; height: 100px; color: inherit; background: none; border: none; z-index: 100; cursor: pointer; i { font-size: 2.5rem; color: #cecece; } } .owl-prev { left: 0; } .owl-next { right: 0; } } } .counter-slide{ text-align: center; position: absolute; z-index: 10; bottom: 160px; width: 100%; color: $white; } .carousel-thumbs{ margin-top: -90px; } .wrapCarouselThumbs .owl-item { border: 3px solid $color-secondary; &.current{ border-color: $color-primary; } } .main-content { position: relative; .owl-theme { .custom-nav { position: absolute; top: 20%; left: 0; right: 0; .owl-prev, .owl-next { position: absolute; height: 100px; color: inherit; background: none; border: none; z-index: 100; i { font-size: 2.5rem; color: #cecece; } } .owl-prev { left: 0; } .owl-next { right: 0; } } } } .banner-full{ height: 100%; position: relative; } .wrap-caption{ width: 60%; position: relative; z-index: 2; .caption-heading{ font-size: 60px; font-weight: 700; padding: 0; margin-bottom: 0; margin-top: 0; font-family: $font-primary; color: $white; line-height: 1; } .caption-supheading{ font-family: $font-secondary; color: #ff7300; margin-bottom: 0; } .bg{ background-color: rgba($color-body, .5); padding: 20px; } p{ font-size: 24px; font-family: $font-secondary; color: $white; padding: 0; &.bg{ background-color: rgba($color-body, .5); padding: 20px; /*color: $color_secondary;*/ } } &.text-center{ width: 80%; margin: 0 auto; text-align: center; } &.text-right{ width: 100%; padding-left: 20%; } .excerpt{ margin-bottom: 50px; font-size: 18px; } .btn{ margin-right: 15px; } @media (max-width: 767px) { width: 100%; .caption-heading{ font-size: 45px; } &.center, &.right{ width: 100%; } } } .img-video{ position: relative; .play-video{ position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 65px; height: 65px; background-color: transparent; border: 3px solid $white; @include border-radius(50%); display: table-cell; padding-top: 13px; padding-left: 7px; text-align: center; vertical-align: middle; line-height: 2; color: $white; z-index: 2; &:hover{ background-color: $white; color: $color_primary; } } &:before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; background-color: rgba($color_secondary, .1); } img{ border: 8px solid $white; } } .ripple, /*.ripple:before,*/ /*.ripple:after */ { position: absolute; top: 50%; left: 50%; height: 65px; width: 65px; transform: translateX(-50%) translateY(-50%); transform-origin: center center; border-radius: 50%; -ms-box-shadow: 0 0 0 0 rgba($white, 0.3); -o-box-shadow: 0 0 0 0 rgba($white, 0.3); box-shadow: 0 0 0 0 rgba($white, 0.3); animation: ripple 2s infinite; } .ripple:before { animation-delay: .9s; content: ""; position: absolute; } .ripple:after { animation-delay: .9s; content: ""; position: absolute; } @keyframes ripple { 70% { box-shadow: 0 0 0 70px rgba($white, 0); } 100% { box-shadow: 0 0 0 0 rgba($white, 0); } } .client-img { text-align: center; margin-top: 20px; margin-bottom: 20px; &:hover{ -webkit-box-shadow: 4px 5px 30px rgba(black,.20); -moz-box-shadow: 4px 5px 30px rgba(black,.20); box-shadow: 4px 5px 30px rgba(black,.20); } } /* Google Maps */ .maps-wraper{ position:relative; } .maps{ width:100%; height:350px; display:block; background:#ccc; position:relative; } #google-container { position: relative; width: 100%; height: 500px; background-color: #fff; } #cd-google-map { position: relative; overflow: hidden; } #cd-google-map .col-md-12 { padding: 0; } #cd-google-map .address { position: absolute; width: 100%; bottom: 0; left: 0; padding: 20px 0; background-color: rgba(5, 5, 5, 0.9); } #cd-google-map .address .address-item { position: relative; padding-left: 44px; } #cd-google-map .address .address-item i { width: 24px; height: 24px; position: absolute; top: 0; left: 4px; color: #fcfcfc; font-size: 22px; text-align: center; line-height: 24px; } #cd-zoom-in, #cd-zoom-out { height: 32px; width: 32px; cursor: pointer; margin-left: 10px; background-color: $color-primary; background-repeat: no-repeat; background-size: 32px 64px; background-image: url('../images/cd-icon-controller.svg'); } .no-touch #cd-zoom-in:hover, .no-touch #cd-zoom-out:hover { background-color: $color-secondary; } #cd-zoom-in { background-position: 50% 0; margin-top: 10px; margin-bottom: 1px; } #cd-zoom-out { background-position: 50% -32px; } .img-cta{ position: relative; img{ margin-top: -70px; margin-bottom: -120px; } } .cta-1{ .body-text{ max-width: 70%; float: left; @media (max-width: 768px) { max-width: 100%; text-align: center; } } .body-action{ max-width: 30%; float: right; @media (max-width: 768px) { max-width: 100%; float: none; margin: 0 auto; display: table; } .btn{ display: inline-block; overflow: hidden; backface-visibility: hidden; position: relative; padding: 15px 35px; } } } .bg-breadcrumb{ background-color: #EEEEEE; .breadcrumb { background-color: #EEEEEE; } } /* WIDGET */ .widget{ margin-bottom: 50px; clear: both; } .widget-title{ font-size: 24px; font-weight: 700; color: $color-primary; margin-bottom: 30px; } .category-nav{ margin-left: 0; margin-bottom: 30px; padding: 0; } .category-nav{ margin-left: 0; margin-bottom: 30px; padding: 0; li{ list-style: none; margin: 0; font-weight: 700; a{ color: $black; display: block; padding: 15px 20px; margin-bottom: 5px; background-color: lighten($color-body,35%); &:hover{ background-color: lighten($color-body,30%); } } &.active a{ background-color: $color-primary; color: $white; } } } .single-news{ .media{ margin-bottom: 20px; } .title{ font-size: 24px; font-weight: 700; color: $color-primary; font-family: $font-primary; } .meta-date{ color: $color-secondary; font-size: 12px; font-style: italic; margin-bottom: 20px; } } .widget{ &.tags{ a{ display: inline-block; vertical-align: top; padding: 5px 8px 6px; font-size: 13px !important; color: rgba($color-body, .8); border: 1px solid #ccc; margin: 0 6px 7px 0; text-decoration: none !important; text-transform: lowercase; -webkit-transition: all .3s ease; transition: all .3s ease; @include border-radius(5px); &:hover{ background-color: $color-primary; color: $white; border-color: $color-primary; } } } } .author-box{ background-color: rgba($color-body, .1); padding: 20px; margin-top: 60px; .media{ display: table-cell; vertical-align: top; width: 120px; img{ width: 100px; height: 100px; } } .body{ margin-left: 20px; display: table-cell; vertical-align: top; } .media-heading{ color: $black; font-weight: 600; font-size: 15px; text-transform: uppercase; margin-bottom: 10px; font-family: $font-primary; span{ font-weight: 400; font-size: 12px; display: block; color: rgba($black, .3); } } &:after{ @extent .clrfix; } } .comments-box{ padding-bottom: 30px; /*border-bottom: 1px solid #E9E9E9;*/ .media{ /*padding: 20px;*/ padding-bottom: 30px; border-bottom: 1px solid #E9E9E9; background-color:#fff; margin-bottom:30px; &.comment{ background-color:#fff; } &.reply-comment{ /*background-color:#F6F6F6;*/ margin-left: 40px; } &:after{ display: table; content: " "; clear: both; } } .media-heading{ color: $color-primary; font-weight: 600; font-family: $font-primary; } .comments-box{ .media-left{ img{ width:100px; height:100px; } } } .date{ float: right; color: rgba($black, .3); } .reply{ margin-top: 5px; a{ color: rgba($black, .3); &:hover{ color: $color-secondary; } } } } .similar-box .title-heading, .comments-box .title-heading, .leave-comment-box .title-heading{ font-size: 18px; line-height: 25px; color: $color-primary; font-family: $font-primary; margin-top:40px; margin-bottom:40px; } /* end single blog */ .promo-ads { padding: 25px; background-color: $color-secondary; border-bottom: 2px solid $color-primary; } .page404{ .title{ font-size: 150px; color: $color-primary; margin-top: 0; margin-bottom: 0; line-height: 1; } } .media-detail{ text-align: center; border: 1px solid lighten($color-body, 30%); } .border-img{ border: 1px solid lighten($color-body, 30%); } .grid { } /* 5 columns, percentage width */ .grid-item, .grid-sizer { width: 33.33333333%; } @media (max-width: 425px) { .grid-item, .grid-sizer { width: 100%; } } .grid-item { float: left; background: transparent; a{ background-color: $color-primary; display: block; margin: 8px; img{ width: 100%; display: block; margin-bottom: 0; } &:hover{ img{ @include opacity(.9); } } } } .gutter-sizer { width: 2%; } .sideleft-img { position: absolute; top: 0; left: 0; bottom: 0; right: 50%; margin-left: -15px; margin-right: 15px; background-repeat: no-repeat; background-size: cover; img{ display: none; } @media (max-width: 767px) { position: static; -webkit-transition: all 0.4s ease 0s !important; transition: all 0.4s ease 0s !important; &:hover{ @include opacity(.9); } img{ display: block; } } } .sideright-img { position: absolute; top: 0; left: 50%; bottom: 0; right: 0; margin-left: 15px; margin-right: 0; background-repeat: no-repeat; background-size: cover; img{ display: none; } @media (max-width: 767px) { position: static; -webkit-transition: all 0.4s ease 0s !important; transition: all 0.4s ease 0s !important; &:hover{ @include opacity(.9); } img{ display: block; } } } .events-widget { border: 1px solid #eee; background-color: $white; padding: 10px 30px 30px 30px; @include border-radius(20px); overflow: hidden; .widget-title{ font-size: 20px; background-color: $color-primary; margin: 20px -30px 30px -30px; padding: 5px 30px; color: $white; &:after{ content: none; } &:first-child{ margin-top: -10px; } } }