/* Author : Asif Hussain URL : asifaxis.branded.me */ /*========================================= ============= Generate fonts ============*/ @font-face { font-family: 'ralewaylight'; src: url('../fonts/raleway-light-webfont.eot'); src: url('../fonts/raleway-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-light-webfont.woff2') format('woff2'), url('../fonts/raleway-light-webfont.woff') format('woff'), url('../fonts/raleway-light-webfont.ttf') format('truetype'), url('../fonts/raleway-light-webfont.svg#ralewaylight') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ralewayregular'; src: url('../fonts/raleway-regular-webfont.eot'); src: url('../fonts/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-regular-webfont.woff2') format('woff2'), url('../fonts/raleway-regular-webfont.woff') format('woff'), url('../fonts/raleway-regular-webfont.ttf') format('truetype'), url('../fonts/raleway-regular-webfont.svg#ralewayregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ralewaysemibold'; src: url('../fonts/raleway-semibold-webfont.eot'); src: url('../fonts/raleway-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-semibold-webfont.woff2') format('woff2'), url('../fonts/raleway-semibold-webfont.woff') format('woff'), url('../fonts/raleway-semibold-webfont.ttf') format('truetype'), url('../fonts/raleway-semibold-webfont.svg#ralewaysemibold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ralewaybold'; src: url('../fonts/raleway-bold-webfont.eot'); src: url('../fonts/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-bold-webfont.woff2') format('woff2'), url('../fonts/raleway-bold-webfont.woff') format('woff'), url('../fonts/raleway-bold-webfont.ttf') format('truetype'), url('../fonts/raleway-bold-webfont.svg#ralewaybold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ralewaythin'; src: url('../fonts/raleway-thin-webfont.eot'); src: url('../fonts/raleway-thin-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-thin-webfont.woff2') format('woff2'), url('../fonts/raleway-thin-webfont.woff') format('woff'), url('../fonts/raleway-thin-webfont.ttf') format('truetype'), url('../fonts/raleway-thin-webfont.svg#ralewaythin') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ralewayextrabold'; src: url('../fonts/raleway-extrabold-webfont.eot'); src: url('../fonts/raleway-extrabold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/raleway-extrabold-webfont.woff2') format('woff2'), url('../fonts/raleway-extrabold-webfont.woff') format('woff'), url('../fonts/raleway-extrabold-webfont.ttf') format('truetype'), url('../fonts/raleway-extrabold-webfont.svg#ralewayextrabold') format('svg'); font-weight: normal; font-style: normal; } /*========================================= ============= Global style ============*/ body {font-family: 'ralewayregular';} h1 {font-family: 'ralewaybold';} h2 {font-family: 'ralewaysemibold';} a {} a:hover {} .headTxt h1 {font-family: 'ralewaybold'; font-size:22px; text-transform:uppercase; text-align:center;} .headTxt span {font-family: 'ralewaysemibold'; font-size:30px; color:#d45128;} /*========================================= ============= Header style ============*/ header { background:#f2f6f7;} .logo {padding:1rem;} ul.top-nav {list-style:none; height:10rem; vertical-align:middle; display:table-cell; padding:0;} ul.top-nav li {float:left; padding:0 1rem;} ul.top-nav li a {color:#3d656f; text-decoration:none; text-transform:uppercase;} ul.top-nav li a:hover {color:#29454c; text-decoration:underline;} ul.top-nav li span {font-family: 'ralewaybold'; background:#fff; padding:1.5rem 3rem; -webkit-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; -webkit-box-shadow:0 0 15px #dde1e1; -moz-box-shadow:0 0 15px #dde1e1; box-shadow: 0 0 15px #dde1e1;} ul.top-nav li span a {color:#d4492f;} ul.top-nav li span a:hover {text-decoration:none;} /* Mobile Layout: 320px. */ @media only screen and (max-width: 767px) { .logo {margin:0 auto; display:table;} ul.top-nav {display:table;margin:0 auto;text-align:center;} .pull-right {float:none !important;} ul.top-nav li {float:none;} ul.top-nav li span {line-height:7rem;} } /*========================================= ============= Nav style ============*/ .container-fluid {display:table;} .navbar-inverse {background-color:#fff;border-color:#fff;} .navbar {border-radius:0;margin-bottom:0;} .navbar-inverse .navbar-nav > li > a {font-family: 'ralewaysemibold'; text-transform:uppercase;} .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {color:#636366;} .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {background-color:#d4492f;} .navbar-toggle {background-color:#d4492f; -webkit-border-radius:0; -webkit-border-radius:0; border-radius:0; border:none;} .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {background-color:#ac4330;} .navbar-inverse .navbar-toggle {background-color:#ac4330;} .navbar-header {border-bottom:0;} .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {border-color:#fff;} /* Mobile Layout: 320px. */ @media only screen and (max-width: 767px) { .container-fluid {display:inherit;} } /*========================================= ============= Header banner style ============*/ .jumbotron { position: relative; padding: 0; background-color: #1f425d; margin-bottom: 0; } @media (min-width: 992px) { .jumbotron { margin-bottom: 0; } } .jumbotron-content { color: #ffffff; padding: 30px 0; } @media (min-width: 992px) { .jumbotron-content { position: absolute; padding: 0; width: 567px; bottom: 20px; } } @media (min-width: 1500px) { .jumbotron-content { top: 170px; } } .jumbotron-content__title h1 { font-size: 44px; margin-top: 0; margin-bottom: 0; } @media (min-width: 992px) { .jumbotron-content__title h1 { font-size: 28px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); background:#000; opacity:0.5; padding:0.5em; } } @media (min-width: 1200px) { .jumbotron-content__title h1 { font-size: 33px; } } .jumbotron-content__description p { font-weight: normal; font-size: 16px; } @media (min-width: 992px) { .jumbotron-content__description p { font-size: 14px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); background:#000; opacity:0.5; padding:0.5em; } } @media (min-width: 1200px) { .jumbotron-content__description p { font-size: 16px; } } .jumbotron-content__description p .btn-secondary { text-shadow: none; } .jumbotron__control { position: absolute; background-color: rgba(250, 250, 250, 0.35); color: rgba(0, 0, 0, 0.35); text-align: center; top: 35px; width: 40px; height: 40px; line-height: 40px; transition: all 100ms ease-out; } .jumbotron__control:focus, .jumbotron__control:hover { color: rgba(0, 0, 0, 0.5); background-color: rgba(250, 250, 250, 0.5); } @media (min-width: 480px) { .jumbotron__control { top: 70px; } } @media (min-width: 768px) { .jumbotron__control { top: 110px; } } @media (min-width: 992px) { .jumbotron__control { top: 40px; width: 40px; height: 40px; line-height: 40px; font-size: 18px; } } @media (min-width: 1500px) { .jumbotron__control { width: 60px; height: 60px; top: 60px; line-height: 60px; font-size: 24px; } } .jumbotron__control.left { left: 15px; } @media (min-width: 768px) { .jumbotron__control.left { left: 30px; } } @media (min-width: 992px) { .jumbotron__control.left { left: inherit; border-radius: 2px; } } .jumbotron__control.right { right: 15px; } @media (min-width: 768px) { .jumbotron__control.right { right: 30px; } } @media (min-width: 992px) { .jumbotron__control.right { margin-left: 48px; right: inherit; border-radius: 2px; } } @media (min-width: 1500px) { .jumbotron__control.right { margin-left: 68px; } } .jumbotron .btn { margin: 10px 0; } .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 100%; } .btn-primary {background-color:#d4492f; border-color:#d4492f; border-radius:0;} .btn-primary:hover {background-color:#a44a2e; border-color:#a44a2e;} /*========================================= ============= Testimonials ============*/ .testimonials { padding: 60px 0px; background: #eeeeee; } .testimonials .widget-title.lined > span { background: #eeeeee; } .testimonial__quote { position: relative; background: #ffffff; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); padding: 21px 15px 21px 45px; margin-bottom: 30px; vertical-align: middle; font-size: 16px; min-height: 80px; margin-top: 30px;} @media (min-width: 992px) { .testimonial__quote { margin-top: 0; } } .testimonial__quote::before { position: absolute; content: open-quote; top: 24px; left: 0; background-color: #d45128; color: #ffffff; width: 30px; height: calc(100% - 46px); font-size: 40px; text-align: center; border-top-right-radius: 2px; border-bottom-right-radius: 2px; line-height: 56px; } .testimonial__quote::after { position: absolute; content: open-quote; width: 30px; height: 0; border-style: solid; border-width: 20px 20px 0 0; border-color: #ffffff transparent transparent transparent; bottom: -20px; left: 30px; } .testimonial__author { font-size: 16px; color: #444444; font-style: normal; font-weight: bold; } .testimonial__author-description { color: #aaaaaa; font-weight: normal; font-style: italic; display: inline-block; } .testimonial blockquote { padding: 0; margin: 0; border-left: 0; } .testimonial .widget-title { float: left; margin-top: 10px; margin-bottom: 30px; width: calc(100% - 132px); } @media (min-width: 992px) { .testimonial .widget-title { margin-top: 0; } } .testimonial__carousel { float: right; padding-top: 0px; position: relative; top: -18px; } .testimonial__carousel--left, .testimonial__carousel--right { display: inline-block; border-radius: 2px; text-align: center; background-color: #ffffff; color: #aaaaaa; margin-left: 10px; transition: all 100ms ease-out; height: 40px; width: 40px; font-size: 18px; line-height: 40px; } .testimonial__carousel--left:focus, .testimonial__carousel--left:hover, .testimonial__carousel--right:focus, .testimonial__carousel--right:hover { color: #444444; } .testimonial__carousel--left:active, .testimonial__carousel--right:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125); color: #444444; } .testimonial .carousel { position: inherit; clear: both; } /*========================= About ================= */ #about {background-color:#edf1f2; padding:3rem;} #about-left {} #about-left img {float:right; padding:1rem 0 1rem 1rem;} #about-left h2 {text-align:right;color:#3d656f;font-size:22px;} #about-left p {text-align:right;} #about-right {} #about-right img {float:left; padding:1rem 1rem 1rem 0;} #about-right h2 {text-align:left;color:#3d656f;font-size:22px;} #about-right p {text-align:left;} /* Mobile Layout: 320px. */ @media only screen and (max-width: 767px) { #about-left img {margin:0 auto; display:table; float:none;} #about-left h2 {text-align:center;} #about-left p {text-align:center;} #about-right img {margin:0 auto; display:table; float:none;} #about-right h2 {text-align:center;} #about-right p {text-align:center;} } /*========================= Partners ================= */ #partners {background-color:#fff; padding:3rem;} /*========================= Impress ================= */ #impress {background:url('../images/dream-castle-business.jpg') no-repeat top center #f2f2fa; padding:3rem; background-size:contain;} #impress span {color:#e03d18;} .let_work { background: #e03d18 none repeat scroll 0 0; border-radius: 4px; box-shadow: 0 5px 0 #cc3918; color: #fff; font-size: 21px; margin: 30px 0 0px 0; padding: 15px 25px; text-align: center; text-transform: uppercase; transition-duration: 0.5s; width: 250px; } .let_work:hover { background: #508ffc none repeat scroll 0 0; box-shadow: 0 5px 0 #427bdc; cursor: pointer; transition-duration: 0.5s; } @media only screen and (max-width: 767px) { #impress {background-size:cover;} .let_work {width:220px;} } /*========================= Owl Carousel ================= */ .owl-carousel { margin: 2rem 0; } .owl-carousel .item { /* background: #eee none repeat scroll 0 0; */ } @media only screen and (max-width: 767px) { .owl-carousel .item { padding: 1em;} } .owl-theme .owl-controls { /* margin-top: 10px; */ text-align: center; } .owl-theme .owl-controls .owl-nav [class*="owl-"] { color: #fff; cursor: pointer; display: inline-block; font-size: 0; /* margin: 5px; padding: 1px 7px; font-family: 'nexa_lightregular'; */ width: 44px; height: 43px; } .owl-theme .owl-controls .owl-nav [class*="owl-"]:hover { /* background: #727272 none repeat scroll 0 0; */ color: #fff; text-decoration: none; } .owl-theme .owl-controls .owl-nav .disabled { cursor: default; opacity: 0.5; } .owl-theme .owl-dots .owl-dot { /* display: inline-block; */ display: none; } .owl-theme .owl-dots .owl-dot span { background: #d6d6d6 none repeat scroll 0 0; border-radius: 30px; display: block; height: 10px; margin: 5px 7px; transition: opacity 200ms ease 0s; width: 10px; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #869791 none repeat scroll 0 0; } .owl-prev { position: absolute; top: 25%; left: -3rem; background: url('../images/next.png');} .owl-next { position: absolute; top: 25%; right: -3rem; background: url('../images/prev.png');} @media only screen and (max-width: 768px) { .owl-prev { left: 0; display: block !important;} .owl-next { right: 0; display: block !important;} } .stickerlogo { margin: 0 auto !important; width: 87px !important; height:85px !important;} /*========================= Filter Gallery ================= */ #products {background:url('../images/dream-castel-products-bg.jpg') no-repeat top center fixed; background-size:cover; padding:2rem 0;} /*========================= Footer ================= */ /* Map */ #map-location { width: 100%; height: 367px; } footer {background-color:#d45128; text-align:center; color:#fff;} footer a {color:#fff;} footer a:hover {color:#272726; text-decoration:underline;} footer p {margin:1em 0;} .footer-box {margin:2em 0;} /* footer social icons */ ul.social-network { list-style: none; display: inline; margin-left:0 !important; padding:1em 0; } ul.social-network li { display: inline; margin: 0 5px; } /* footer social icons */ .social-network a.icoFacebook:hover { background-color:#3B5998; } .social-network a.icoTwitter:hover { background-color:#33ccff; } .social-network a.icoGoogle:hover { background-color:#BD3518; } .social-network a.icoLinkedin:hover { background-color:#007bb7; } .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i, .social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i { color:#fff; } a.socialIcon:hover, .socialHoverClass { color:#44BCDD; } .social-circle li a { background-color:#fff; display:inline-block; position:relative; margin:0 auto 0 auto; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; text-align:center; width: 50px; height: 50px; font-size:20px; } .social-circle li i { margin:0; line-height:50px; text-align: center; } .social-circle li a:hover i, .triggeredHover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -ms--transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } .social-circle i { color:#d45128; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; -ms-transition: all 0.8s; transition: all 0.8s; } /* 05.21. Contact Form */ #contact {background-color:#fff; padding:3rem;} select, input[type="text"], input[type="email"], input[type="tel"], textarea { background: #f5f5f5; border-radius: 2px; border: 1px solid #eeeeee; box-shadow: none; width: 100%; padding: 17.5px 20px; margin-bottom: 30px; font-size: 14px; color: #aaaaaa; transition: all 100ms ease-out; } select:focus, input[type="text"]:focus, textarea:focus { border-color: #eeeeee; background: #ffffff; } .contact-form-small textarea { height: 105px; } .contact-form-small select { height: 45px; } .contact-form-small input[type="submit"] { margin:0 auto; display:table; } .contact-form-small input[type="text"], .contact-form-small input[type="email"], .contact-form-small select, .contact-form-small textarea { background:none; padding: 10.5px 15px; margin-bottom: 15px; border:1px solid #426b8d; } form .response { font-weight: bold; text-transform: uppercase; padding: 20px 0px; display: none;} form .response.success { color: green; } form .response.error { color: red; } #callUs {background:url('../images/dream-castle-call.jpg') no-repeat top center fixed; background-size:cover; padding:3rem; text-align:center;} /* back to top */ .cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 40px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* image replacement properties */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: #aaafad url(../images/cd-top-arrow.svg) no-repeat center 50%; visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } .cd-top.cd-is-visible { /* the button becomes visible */ visibility: visible; opacity: 1; } .cd-top.cd-fade-out { /* if the user keeps scrolling down, the button is out of focus and becomes less visible */ opacity: .5; } .no-touch .cd-top:hover { background-color: #19a75d; opacity: 1; } @media only screen and (min-width: 768px) { .cd-top { right: 20px; bottom: 20px; } } @media only screen and (min-width: 1024px) { .cd-top { height: 60px; width: 60px; right: 30px; bottom: 30px; } }