Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /home/dwebsite/public_html/demos/2/_framework/adodb5/drivers/adodb-mysql.inc.php on line 443

Warning: Cannot modify header information - headers already sent by (output started at /home/dwebsite/public_html/demos/2/_framework/adodb5/drivers/adodb-mysql.inc.php:443) in /home/dwebsite/public_html/demos/2/_modules/styles/controllers/stylesController.class.php on line 41
/*------------------------------------------------------------------------------ main */ * { margin: 0; padding: 0; font-family: 'Signika'; } body { background: url( 'http://www.dwebsite.nl/demos/2/media/image/id/61' ) #303030; } #container { background: #f0f3f6; width: 95%; margin-left: 2.5%; box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.5 ); position: relative; } /*------------------------------------------------------------------------------ alerts */ .alert-box { margin-bottom: 25px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; position: relative; padding: 10px; } .alert-box p { margin: 0; padding: 0 30px 0 0; font-size: 13px; } .alert-box.alert-yellow { background: #fcf8e3; border: 1px solid #e3d9a2; } .alert-box.alert-yellow p { color: #c1af4c; } .alert-box.alert-blue { background: #c8e3f8; border: 1px solid #87b9e0; } .alert-box.alert-blue p { color: #5f91b7; } .alert-box.alert-green { background: #def6de; border: 1px solid #a1c4a1; } .alert-box.alert-green p { color: #75ac75; } .alert-box.alert-red { background: #f6dbdb; border: 1px solid #d09090; } .alert-box.alert-red p { color: #c96464; } .alert-box span { text-decoration: underline; cursor: pointer; } .alert-box span:hover { text-decoration: none; } /*------------------------------------------------------------------------------ blog */ section#blog article { margin-bottom: 40px; } section#blog article .article-image { position: relative; font-size: 0; } section#blog article .article-image img { width: 100%; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } section#blog article .article-image .article-image-pattern { position: absolute; width: 100%; height: 100%; background: #282f38; opacity: 0; top: 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; } section#blog article .article-image .article-image-pattern:hover { opacity: 0.95; } section#blog article .article-image .article-image-pattern span { color: #fff; font-weight: 700; font-size: 30px; text-align: center; width: 250px; position: absolute; left: 50%; margin-left: -125px; top: 50%; margin-top: -17.5px; } section#blog article .article-data { background: #fff; margin: -40px 40px 0 40px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; position: relative; z-index: 200; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); border-right: 1px solid #e5e9ed; border-left: 1px solid #e5e9ed; border-bottom: 1px solid #dbdfe3; } section#blog article .article-data .article-data-top { background: #fafafa; border-bottom: 1px solid #f1f1f1; } section#blog article .article-info { margin-bottom: 10px; } section#blog article .article-info span.single-info { color: #282f38; font-size: 15px; line-height: 1.7em; margin-bottom: 20px; vertical-align: top; margin-right: 15px; font-weight: 600; } section#blog article .article-info span.single-info img { display: inline-block; padding: 0 6px 0 0; width: 23px; } section#blog article .article-info span.single-info span.name { display: inline-block; vertical-align: top; padding-top: 2px; font-size: 13px; } section#blog nav { background: #fff; margin: 40px 40px 0 40px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); border-right: 1px solid #e5e9ed; border-left: 1px solid #e5e9ed; border-bottom: 1px solid #dbdfe3; } /*------------------------------------------------------------------------------ blog single */ section#blog-single article { margin-bottom: 40px; margin-top: -80px; } section#blog-single.without-image article { margin-top: 0; } section#blog-single article .article-data { background: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; position: relative; z-index: 200; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); border-right: 1px solid #e5e9ed; border-left: 1px solid #e5e9ed; border-bottom: 1px solid #dbdfe3; } section#blog-single article .article-data .article-data-top { background: #fafafa; border-bottom: 1px solid #f1f1f1; } section#blog-single article .article-info { margin-bottom: 10px; } section#blog-single article .article-info span.single-info { color: #282f38; font-size: 15px; line-height: 1.7em; margin-bottom: 20px; vertical-align: top; margin-right: 15px; font-weight: 600; } section#blog-single article .article-info span.single-info img { display: inline-block; padding: 0 6px 0 0; width: 23px; margin: 0; } section#blog-single article .article-info span.single-info span.name { display: inline-block; vertical-align: top; padding-top: 2px; font-size: 13px; } section#blog-single article .padding-without-bottom img { width: 100%; margin-bottom: 40px; } section#blog-single nav { background: #fff; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); border-right: 1px solid #e5e9ed; border-left: 1px solid #e5e9ed; border-bottom: 1px solid #dbdfe3; } section#blog-single.narrower article { margin-top: 0; } section#blog-single.narrower article .article-image { position: relative; font-size: 0; } section#blog-single.narrower article .article-image img { width: 100%; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } section#blog-single.narrower article .article-image .article-image-pattern { position: absolute; width: 100%; height: 100%; background: #282f38; opacity: 0; top: 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; } section#blog-single.narrower article .article-image .article-image-pattern:hover { opacity: 0.95; } section#blog-single.narrower article .article-image .article-image-pattern span { color: #fff; font-weight: 700; font-size: 30px; text-align: center; width: 250px; position: absolute; left: 50%; margin-left: -125px; top: 50%; margin-top: -17.5px; } section#blog-single.narrower article .article-data { margin: -40px 40px 0 40px; } section#blog-single.narrower nav { margin: 40px 40px 0 40px; } section#blog-single.narrower #comments { margin: 40px 40px 0 40px; } /*------------------------------------------------------------------------------ responsive */ @media (min-width: 1150px) { section#blog, section#blog-single { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; width: 100%; float: left; margin-bottom: 40px; } section#blog nav .left, section#blog-single nav .left { float: left; margin-bottom: 0; margin-top: 5px; } section#blog nav .right, section#blog-single nav .right { float: right; } section#blog nav .right .button, section#blog-single nav .right .button { margin-left: 15px; margin-right: 0; } } @media (min-width: 850px) and (max-width: 1149px) { section#blog, section#blog-single { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; width: 500px; float: left; margin-bottom: 40px; } section#blog nav .left, section#blog-single nav .left { float: none; margin-bottom: 0; margin-top: 5px; text-align: center; } section#blog nav .right, section#blog-single nav .right { float: none; text-align: center; } section#blog nav .right .button, section#blog-single nav .right .button { margin: 20px 10px 0 10px; } } @media (min-width: 600px) and (max-width: 849px) { section#blog, section#blog-single { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; width: auto; float: none; margin-bottom: 40px; } section#blog nav { margin-bottom: 40px; } section#blog nav .left, section#blog-single nav .left { float: none; margin-bottom: 0; margin-top: 5px; text-align: center; } section#blog nav .right, section#blog-single nav .right { float: none; text-align: center; } section#blog nav .right .button, section#blog-single nav .right .button { margin: 20px 10px 0 10px; } } @media (max-width: 599px) { section#blog, section#blog-single { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; width: auto; float: none; margin-bottom: 40px; } section#blog nav { margin-bottom: 40px; } section#blog article .article-info span.single-info, section#blog-single article .article-info span.single-info { display: block; margin-bottom: 0; } section#blog article .article-data { margin: -20px 20px 0 20px; } section#blog-single article .article-data, section#blog-single.narrower article .article-data { margin: -20px 10px 0 10px; } section#blog nav, section#blog-single nav, section#blog-single.narrower nav { margin: 0 10px 40px 10px; } section#blog nav .left, section#blog-single nav .left { float: none; margin-bottom: 0; margin-top: 5px; text-align: center; } section#blog nav .right, section#blog-single nav .right { float: none; text-align: center; } section#blog nav .right .button, section#blog-single nav .right .button { margin: 20px 10px 0 10px; } } /*------------------------------------------------------------------------------ buttons */ .button { background: none; padding: 10px 15px; border-radius: 21px; outline: none; cursor: pointer; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; font-size: 13px; margin-right: 10px; position: relative; } a.button { display: inline-block; line-height: normal; } .button.button-color { border: 2px solid #326fb4; color: #326fb4; } .button.button-color:hover { background: #326fb4; color: #fff; } .button.button-color-alt { border: 2px solid #326fb4; background: #326fb4; color: #fff; } .button.button-color-alt:hover { background: #fff; color: #326fb4; } .button.button-white { border: 2px solid #fff; color: #fff; } .button.button-white:hover { background: #fff; color: #282f38; } .button.button-black { border: 2px solid #282f38; color: #282f38; } .button.button-black:hover { background: #282f38; color: #fff; } .button.button-black-alt { border: 2px solid #282f38; background: #282f38; color: #fff; } .button.button-black-alt:hover { background: #fff; color: #282f38; } .button .more { position: absolute; color: #fff; background: #282f38; width: 17px; height: 17px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; top: -8.5px; right: 10px; } .button .less { position: absolute; color: #fff; background: #282f38; width: 17px; height: 17px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; top: -8.5px; right: -8px; } /*------------------------------------------------------------------------------ responsive */ @media (max-width: 849px) { .button { margin-top: 15px; } } /*------------------------------------------------------------------------------ comments */ #comments { background: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); margin-bottom: 40px; border-right: 1px solid #e5e9ed; border-left: 1px solid #e5e9ed; border-bottom: 1px solid #dbdfe3; } #comments ol.comments-list { list-style: none; margin-top: 40px; margin-left: 0; } #comments ol.comments-list ul.children { list-style: none; margin-left: 60px; } #comments ol.comments-list .comment-author-avatar { float: left; position: relative; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } #comments ol.comments-list .comment-author-avatar img { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } #comments ol.comments-list .bypostauthor .comment-author-avatar { border-left: 3px solid #326fb4; font-size: 0; } #comments ol.comments-list .bypostauthor .comment-author-avatar img { -webkit-border-top-left-radius: 0; -moz-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-bottom-left-radius: 0; border-bottom-left-radius: 0; } #comments ol.comments-list .comment-author-info { position: relative; } #comments ol.comments-list .comment-author-info .comment-author-name .name { font-size: 15px; font-weight: 600; padding-left: 20px; padding-top: 13px; display: inline-block; color: #3b3b3b; } #comments ol.comments-list .comment-author-info .comment-author-name .name a { text-decoration: none; color: #3b3b3b; } #comments ol.comments-list .comment-author-info .comment-author-name a.comment-reply-link { display: inline-block; margin-left: 13px; font-size: 13px; text-decoration: none; color: #bbb; background: #eee; padding: 7px; border-radius: 3px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; -webkit-user-select: none; -moz-user-select: none; } #comments ol.comments-list .comment-author-info .comment-author-name a.comment-reply-link:hover { color: #fff; background: #326fb4; } #comments ol.comments-list .comment-author-info time { font-size: 13px; color: #bbb; position: absolute; top: 13px; right: 0; } #comments ol.comments-list .comment-content { margin-bottom: 35px; padding-left: 60px; } #comments ol.comments-list .comment-content p { margin: 10px 0; font-size: 15px; line-height: 1.7em; } #comments .paginate-comments-links { margin-top: 40px; } #comments .paginate-comments-links .left { float: left; } #comments .paginate-comments-links .right { float: right; } /*------------------------------------------------------------------------------ comments-reply */ #comments .comments-reply { background: #fafafa; border-top: 1px solid #f1f1f1; } #comments .comments-reply .send button { display: block; float: right; } #comments .comments-reply input[type="text"] { padding: 10px; font-size: 13px; margin-bottom: 15px; border: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); outline: none; margin-right: 10px; } #comments .comments-reply input[name="website"] { margin-right: 0; } #comments .comments-reply textarea { padding: 10px; font-size: 13px; border: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); outline: none; margin-bottom: 15px; display: block; height: 120px; } #comments .comments-reply input[type="text"], #comments .comments-reply textarea { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; border: 1px solid #e5e5e5; } #comments .comments-reply input[type="text"]:focus, #comments .comments-reply textarea:focus, #comments .comments-reply input[type="text"]:hover, #comments .comments-reply textarea:hover { border: 1px solid #ccc; } /*------------------------------------------------------------------------------ responsive */ @media (min-width: 1150px) { #comments .comments-reply input[type="text"] { width: 161px; } #comments .comments-reply textarea { width: 555px; } section#blog-single.narrower #comments .comments-reply input[type="text"] { width: 134.5px; } section#blog-single.narrower #comments .comments-reply textarea { width: 476px; } section#shop #comments input[type="text"] { width: 261.5px; } section#shop #comments input[name="email"] { margin-right: 0; } } @media (min-width: 850px) and (max-width: 1149px) { #comments .comments-reply input[type="text"] { width: 108px; } #comments .comments-reply textarea { width: 396px; } section#blog-single.narrower #comments .comments-reply input[type="text"] { width: 317px; display: block; } section#blog-single.narrower #comments .comments-reply textarea { width: 317px; } section#shop #comments input[type="text"] { width: 182px; } section#shop #comments input[name="email"] { margin-right: 0; } } @media (min-width: 600px) and (max-width: 849px) { #comments .comments-reply input[type="text"] { width: 108px; } #comments .comments-reply textarea { width: 396px; } section#blog-single.narrower #comments .comments-reply input[type="text"] { width: 317px; display: block; } section#blog-single.narrower #comments .comments-reply textarea { width: 317px; } section#shop #comments input[type="text"] { width: 182px; } section#shop #comments input[name="email"] { margin-right: 0; } } @media (max-width: 599px) { section#blog-single #comments { margin: 40px 10px 40px 10px } section#blog-single.narrower #comments { margin: 40px 10px 40px 10px } #comments ol.comments-list .comment-author-info time { position: static; display: block; margin: 20px 0 0 0; } #comments ol.comments-list .comment-content { padding-left: 0; } #comments ol.comments-list ul.children { margin-left: 0; } #comments .paginate-comments-links .left, #comments .paginate-comments-links .right { float: none; display: block; } #comments .paginate-comments-links { text-align: center; } } /*------------------------------------------------------------------------------ contact popup */ #contact-popup-background { background: #282f38; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; opacity: 0; display: none; } #contact-popup-content { height: 521px; top: 50%; margin-top: -260.5px; left: 50%; background: #f0f3f6; z-index: 3600; -webkit-border-bottom-left-radius: 2px; -moz-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; -webkit-border-top-left-radius: 2px; -moz-border-top-left-radius: 2px; border-top-left-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.1 ); display: none; } #contact-popup-content .google-map { width: 50%; float: left; height: 521px; -webkit-border-top-left-radius: 2px; -moz-border-top-left-radius: 2px; border-top-left-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; } #contact-popup-content .contact-content { width: 50%; float: right; height: 521px; position: relative; } #contact-popup-content .contact-content .padding { padding: 40px; } #contact-popup-content .contact-content input[type="text"] { display: block; padding: 10px; font-size: 13px; margin-bottom: 5px; border: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); outline: none; } #contact-popup-content .contact-content textarea { display: block; padding: 10px; font-size: 13px; border: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); outline: none; height: 100px; } #contact-popup-content .contact-content input[type="text"], #contact-popup-content .contact-content textarea { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; border: 1px solid #e5e5e5; } #contact-popup-content .contact-content input[type="text"]:focus, #contact-popup-content .contact-content textarea:focus, #contact-popup-content .contact-content input[type="text"]:hover, #contact-popup-content .contact-content textarea:hover { border: 1px solid #ccc; } #contact-popup-content .contact-content input[type="text"].error, #contact-popup-content .contact-content textarea.error { border: 1px solid #e77f7a; } #contact-popup-close { width: 50px; height: 50px; position: absolute; right: -50px; top: 0; background: #326fb4; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.1 ); -webkit-border-top-right-radius: 2px; -moz-border-top-right-radius: 2px; border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; cursor: pointer; } #contact-popup-close img { padding: 12px 0 0 12px; } /*------------------------------------------------------------------------------ responsive */ @media (min-width: 1150px) { #contact-popup-content { width: 800px; position: fixed; margin-left: -400px; } #contact-popup-content .contact-content input[type="text"] { width: 296px; } #contact-popup-content .contact-content textarea { width: 296px; margin-bottom: 30px; } } @media (min-width: 850px) and (max-width: 1149px) { #contact-popup-content { width: 750px; margin-left: -375px; position: fixed; } #contact-popup-content .contact-content input[type="text"] { width: 273px; } #contact-popup-content .contact-content textarea { width: 273px; margin-bottom: 20px; } } @media (min-width: 600px) and (max-width: 849px) { #contact-popup-content { width: 500px; height: auto; top: 100px; margin-top: 0; margin-left: -250px; position: absolute; } #contact-popup-content .contact-content input[type="text"] { width: 115px; display: inline-block; } #contact-popup-content .contact-content textarea { width: 397px; } #contact-popup-content .google-map { float: none; width: 100%; height: 250px; } #contact-popup-content .contact-content { float: none; width: 100%; height: auto; } } @media (max-width: 599px) { #contact-popup-content { width: 80%; height: auto; top: 100px; margin-top: 0; left: 10%; position: absolute; } #contact-popup-content .contact-content input[type="text"] { display: block; } #contact-popup-content .google-map { float: none; width: 100%; height: 250px; } #contact-popup-content .contact-content { float: none; width: 100%; height: auto; } } /*------------------------------------------------------------------------------ content */ #content { margin: -91.5px auto 0 auto; position: relative; z-index: 100; } #content.subpage { margin-top: 50px; } #content .padding, footer .padding { padding: 40px; } #content .padding-without-top, footer .padding-without-top { padding: 0 40px 40px 40px; } #content .padding-without-bottom, footer .padding-without-bottom { padding: 40px 40px 20px 40px; } /*------------------------------------------------------------------------------ responsive */ @media (min-width: 1150px) { #content { width: 1000px; } .double-content { position: relative; } .double-content .left { width: 50%; float: left; } .double-content .right { width: 50%; float: right; } .double-content .left .padding-left { margin-right: 20px; } .double-content .right .padding-right { margin-left: 20px; } } @media (min-width: 850px) and (max-width: 1149px) { #content { width: 750px; } .double-content { position: relative; } .double-content .left { width: 50%; float: left; } .double-content .right { width: 50%; float: right; } .double-content .left .padding-left { margin-right: 20px; } .double-content .right .padding-right { margin-left: 20px; } } @media (min-width: 600px) and (max-width: 849px) { #content { width: 500px; } .double-content { position: relative; } .double-content .left .padding { padding-bottom: 0 !important; } } @media (max-width: 599px) { #content { width: auto; margin-left: 20px; margin-right: 20px; } .double-content { position: relative; } .double-content .left .padding { padding-bottom: 0 !important; } } /*------------------------------------------------------------------------------ footer */ footer { background: #282f38; } footer .center { margin: 0 auto; position: relative; } footer .center .left { width: 50%; float: left; } footer .center .right { width: 50%; float: right; } footer .center .right button { width: 140px; margin: 0; } footer h2 { color: #fff; } footer p { color: #617082; } footer .social { margin-bottom: 15px; } footer .social a { width: 30px; height: 30px; display: inline-block; background-position: 0 0; margin: 0 3px; } footer .social a:hover { background-position: 0 30px; } footer .social .social-facebook { background: url( '../_images/footer-facebook.png' ); } footer .social .social-twitter { background: url( '../_images/footer-twitter.png' ); } footer .social .social-vimeo { background: url( '../_images/footer-vimeo.png' ); } footer .social .social-youtube { background: url( '../_images/footer-youtube.png' ); } footer .social .social-google-plus { background: url( '../_images/footer-google-plus.png' ); } /*------------------------------------------------------------------------------ responsive */ @media (min-width: 1150px) { footer .center { width: 1000px; } } @media (min-width: 850px) and (max-width: 1149px) { footer .center { width: 750px; } } @media (min-width: 600px) and (max-width: 849px) { footer .center { width: 500px; } footer .center .left { width: 100%; float: none; text-align: center; } footer .center .right { width: 100%; float: none; } footer .center .left .padding { padding-bottom: 0; } footer .center .right .padding { margin-top: 0; } } @media (max-width: 599px) { footer .center { width: auto; margin-left: 20px; margin-right: 20px; } footer .center .left { width: 100%; float: none; text-align: center; } footer .center .right { width: 100%; float: none; text-align: center; } footer .center .left .padding { padding: 40px 0 0 0; } footer .center .right .padding { margin-top: 0; padding: 40px 0; } } /*------------------------------------------------------------------------------ full page */ section#full-page { background: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); margin-bottom: 40px; border-right: 1px solid #e5e9ed; border-left: 1px solid #e5e9ed; border-bottom: 1px solid #dbdfe3; } /*------------------------------------------------------------------------------ gallery */ .gallery { font-size: 0; } .gallery-filter { display: inline-block; margin: 0 10px; cursor: pointer; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; } .gallery-filter.gallery-filter-first { margin: 0 10px 0 0; } .gallery-filter.gallery-filter-active, .gallery-filter:hover { color: #326fb4; } .gallery-items { width: 104%; margin-left: -2%; } .gallery-item .gallery-item-image { height: 200px; background-size: cover; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-bottom: 20px; position: relative; font-size: 0; cursor: pointer; } .gallery-item .gallery-item-image .gallery-item-image-pattern { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #282f38; opacity: 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; } .gallery-item .gallery-item-image .gallery-item-image-pattern:hover { opacity: 0.95; } .gallery-item .gallery-item-image .gallery-item-image-pattern span { color: #fff; font-weight: 700; font-size: 25px; text-align: center; width: 160px; position: absolute; left: 50%; margin-left: -80px; top: 50%; margin-top: -15px; } /*------------------------------------------------------------------------------ gallery popup */ #gallery-popup { display: none; } #gallery-popup .gallery-popup-background { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #1b1b1b; z-index: 5001; opacity: 0; } #gallery-popup .gallery-popup-content { position: fixed; background-size: cover; top: 50%; left: 50%; z-index: 99999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; box-shadow: 0 0 10px rgba( 0, 0, 0, 0.2 ); } #gallery-popup .gallery-popup-content .gallery-popup-prev-image { height: 100px; width: 40px; background: red; position: absolute; left: 0; top: 50%; margin-top: -50px; -webkit-border-top-right-radius: 3px; -moz-border-top-right-radius: 3px; border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; cursor: pointer; background: #fff; opacity: 0.1; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; -webkit-user-select: none; -moz-user-select: none; } #gallery-popup .gallery-popup-content .gallery-popup-next-image { height: 100px; width: 40px; background: red; position: absolute; right: 0; top: 50%; margin-top: -50px; -webkit-border-top-left-radius: 3px; -moz-border-top-left-radius: 3px; border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; cursor: pointer; background: #fff; opacity: 0.1; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; -webkit-user-select: none; -moz-user-select: none; } #gallery-popup .gallery-popup-content .gallery-popup-prev-image img { position: absolute; font-size: 40px; top: 50%; left: 50%; margin-top: -20px; margin-left: -13px; } #gallery-popup .gallery-popup-content .gallery-popup-next-image img { position: absolute; font-size: 40px; top: 50%; right: 50%; margin-top: -20px; margin-right: -13px; } #gallery-popup .gallery-popup-content .gallery-popup-next-image:hover, #gallery-popup .gallery-popup-content .gallery-popup-prev-image:hover { opacity: 0.2; } /*------------------------------------------------------------------------------ responsive */ @media (min-width: 1150px) { .gallery-item { width: 279.33px; display: inline-block; vertical-align: top; text-align: center; margin: 0 2%; margin-bottom: 20px; } .gallery-item.gallery-item-bottom { margin-bottom: 0; } } @media (min-width: 850px) and (max-width: 1149px) { .gallery-item { width: 203.5px; display: inline-block; vertical-align: top; text-align: center; margin: 0 2%; margin-bottom: 20px; } .gallery-item.gallery-item-bottom { margin-bottom: 0; } } @media (min-width: 600px) and (max-width: 849px) { .gallery-item { width: auto; display: block; vertical-align: top; text-align: center; margin-bottom: 20px; } .gallery-item.gallery-item-last { margin-bottom: 0; } } @media (max-width: 599px) { .gallery-item { width: auto; display: block; vertical-align: top; text-align: center; margin-bottom: 20px; } .gallery-item.gallery-item-last { margin-bottom: 0; } } /*------------------------------------------------------------------------------ section "head" */ section#head { background: url( '../_images/animals.png' ) no-repeat 785px 0px #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); border-right: 1px solid #e5e9ed; border-left: 1px solid #e5e9ed; border-bottom: 1px solid #dbdfe3; } section#head .text p { margin-bottom: 0; } section#head .phone { font-weight: 700; font-size: 42px; color: #282f38; } /*------------------------------------------------------------------------------ responsive */ @media (min-width: 1150px) { section#head .text { float: left; width: 100%; } section#head .phone { float: right; text-align: right; width: 350px; padding-top: 25px; } } @media (min-width: 850px) and (max-width: 1149px) { section#head .text { float: left; width: 340px; } section#head .phone { float: right; text-align: right; width: 300px; padding-top: 25px; } } @media (min-width: 600px) and (max-width: 849px) { section#head .phone { margin-top: 25px; } } @media (max-width: 599px) { section#head .phone { margin-top: 25px; } } /*------------------------------------------------------------------------------ header */ header #header-background-image { width: 100%; height: 600px; z-index: 100; background-image: url( '../_images/header-background.jpg' ); background-size: cover; background-repeat: no-repeat; background-position: 0 -400px; } header #header-background-pattern { width: 100%; height: 600px; position: absolute; top: 0; left: 0; background: #303030; opacity: 0.95; z-index: 15; top: 0; } header #header-background-content { text-align: center; } header #header-background-content h1 { color: #fff; text-transform: uppercase; font-size: 42px; font-weight: 300; } header #header-background-content h1 span { font-weight: 700; } header.subpage #header-background-image { width: 100%; height: 100px; z-index: 100; background-size: cover; background-position: 0 -400px; } header.subpage #header-background-pattern { width: 100%; height: 100px; position: absolute; top: 0; left: 0; background: 303030; opacity: 0.95; z-index: 105; top: 0; } header.appointment { position: relative; } header.appointment #header-background-image, header.appointment #header-background-pattern { height: 955px; } header.appointment #header-background-image { background-position: 0 0 !important; } /*------------------------------------------------------------------------------ top line */ #top-line { height: 5px; background: #fff; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.05 ); border-bottom: 1px solid #dbdfe3; } /*------------------------------------------------------------------------------ subpage header image */ #subpage-header-image { height: 550px; background-size: cover; background-position: 50% 50%; } /*------------------------------------------------------------------------------ responsive */ @media (min-width: 1150px) { header #header-background-content { width: 920px; position: absolute; left: 50%; margin-left: -460px; top: 218px; z-index: 110; } } @media (min-width: 850px) and (max-width: 1149px) { header #header-background-content { width: 670px; position: absolute; left: 50%; margin-left: -335px; top: 218px; z-index: 110; } header #header-background-image, header.subpage #header-background-image { background-position: 0 -200px; } } @media (min-width: 600px) and (max-width: 849px) { header #header-background-content { width: 500px; position: absolute; left: 50%; margin-left: -250px; top: 218px; z-index: 110; } header #header-background-image { background-position: 0 0; } } @media (max-width: 599px) { header #header-background-content { width: 100%; position: absolute; left: 0; top: 218px; z-index: 110; } header #header-background-image { background-position: 0 0; } header.subpage #header-background-image { background-position: 0 -100px; } } /*------------------------------------------------------------------------------ html */ .clear { clear: both; } h1 { color: #282f38; font-size: 32px; margin-bottom: 20px; font-weight: 700; } h2 { color: #282f38; font-size: 25px; margin-bottom: 20px; font-weight: 700; } h3 { color: #326fb4; font-size: 18px; margin-bottom: 20px; font-weight: 700; } h4 { color: #282f38; font-size: 15px; font-weight: 600; margin-bottom: 20px; } p { color: #9a9e9f; font-size: 15px; line-height: 1.7em; margin-bottom: 20px; font-weight: 300; } #content ul li{ color: #9a9e9f; } #content ul{ margin-top: 10px; margin-bottom: 10px; margin-left: 25px; } a { color: #326fb4; text-decoration: none; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; } a:hover { color: #2fb0e0; } strong { font-weight: 600; } hr { margin-bottom: 20px; height: 1px; border: none; background: #eee; } hr.space-top { margin-top: 35px; } blockquote { position: relative; } blockquote:before { content: ',,'; font-size: 75px; color: #282f38; position: absolute; left: 0; top: -60px; font-style: italic; } blockquote p { font-style: italic; padding-left: 50px; } .tips-for-pet .single-tip { background: #f0f3f6; } /*------------------------------------------------------------------------------ landing page */ #landing-page { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 300; } #landing-page .padding { padding: 40px; } #landing-page .landing-page-content-background { height: 649px; position: absolute; top: 50%; margin-top: -324.5px; left: 50%; background: #313131; opacity: 0.3; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 0 rgba( 0, 0, 0, 0.15 ); } #landing-page .landing-page-content { height: 569px; position: absolute; top: 50%; margin-top: -284.5px; left: 50%; background: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.15 ); } #landing-page .landing-page-content .landing-page-left { height: 569px; float: left; border-right: 1px solid #e5e5e5; background-repeat: no-repeat; } #landing-page .landing-page-content .landing-page-left .emergency-call { position: absolute; bottom: 40px; } #landing-page .landing-page-content .landing-page-left .emergency-call h2 { margin-bottom: 0; } #landing-page .landing-page-content .make-appointment-button { display: none; } /*------------------------------------------------------------------------------ appointment form */ #appointment-form { z-index: 100; border-left: 1px solid #fff; background: #fafafa; } #appointment-form input[type="text"], #appointment-form textarea, #appointment-form select { display: inline-block; padding: 10px; font-size: 13px; border: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); outline: none; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; border: 1px solid #e5e5e5; width: 298px; margin-bottom: 10px; } #appointment-form textarea { height: 75px; } #appointment-form input[type="text"]:focus, #appointment-form textarea:focus, #appointment-form select:focus, #appointment-form input[type="text"]:hover, #appointment-form textarea:hover, #appointment-form select:hover { border: 1px solid #ccc; } #appointment-form input[type="text"].error, #appointment-form textarea.error, #appointment-form select.error { border: 1px solid #e77f7a; } #appointment-form .double-fields .left { float: left; width: 132.5px; margin-right: 10px; } #appointment-form .double-fields select.left { width: 153.5px; padding: 9px 10px; } #appointment-form .double-fields .right { float: right; width: 132.5px; } #appointment-form .double-fields .right input { width: 132.5px; } /*------------------------------------------------------------------------------ approximate time */ #appointment-form .approximate-time-box { position: absolute; width: 190px; background: #fff; border: 1px solid #ccc; z-index: 200; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-top: 45px; margin-left: 166px; box-shadow: 0 0 6px rgba( 0, 0, 0, 0.2 ); padding: 7px; -webkit-user-select: none; -moz-user-select: none; display: none; } #appointment-form .approximate-time-box .approximate-time-box-arrow { width: 7px; height: 7px; background: #fff; position: absolute; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); border-top: 1px solid #ccc; border-left: 1px solid #ccc; top: -5px; left: 13px; } #appointment-form .approximate-time-box .element { display: inline-block; width: 63px; margin-left: -4px; } #appointment-form .approximate-time-box .element.element-first { margin-left: 0; } #appointment-form .approximate-time-box .element img, #appointment-form .approximate-time-box .element span { display: block; text-align: center; } #appointment-form .approximate-time-box .element img { margin: 10px auto; cursor: pointer; } #appointment-form .approximate-time-box .element span { background: #eee; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin: 0 3px; padding: 10px 0; font-size: 13px; color: #777; } /*------------------------------------------------------------------------------ responsive */ @media (min-width: 1150px) { #landing-page .landing-page-content-background { width: 1000px; margin-left: -500px; } #landing-page .landing-page-content { width: 920px; margin-left: -460px; } #landing-page .landing-page-content .landing-page-left { width: 518px; } } @media (min-width: 850px) and (max-width: 1149px) { #landing-page .landing-page-content-background { width: 750px; margin-left: -375px; } #landing-page .landing-page-content { width: 670px; margin-left: -335px; } #landing-page .landing-page-content .landing-page-left { width: 310px; background-image: none !important; } #appointment-form { width: 358px; } #appointment-form .double-fields .left, #appointment-form .double-fields .right { width: 112px; } #appointment-form input[type="text"], #appointment-form textarea, #appointment-form select { width: 256px } #appointment-form .double-fields select.left { width: 134px; } #appointment-form .approximate-time-box { margin-left: 145px; } } @media (min-width: 600px) and (max-width: 849px) { #landing-page .landing-page-content-background { width: 500px; height: 609px; margin-left: -250px; } #landing-page .landing-page-content { width: 460px; margin-left: -230px; margin-top: -304.5px; } #landing-page .landing-page-content .landing-page-left { width: auto; border-right: none; background-position: 233px 227px !important; float: none; } #landing-page .landing-page-content .make-appointment-button { display: block; } #landing-page .landing-page-content .make-appointment-button button { margin-top: 0; } #landing-page .landing-page-content .read-more-button { display: none; } #appointment-form { display: none; width: auto; float: none; position: absolute; top: 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } #appointment-form .double-fields .left, #appointment-form .double-fields .right { width: 162px; } #appointment-form input[type="text"], #appointment-form textarea, #appointment-form select { width: 357px; } #appointment-form .double-fields select.left { width: 184px; } #appointment-form .approximate-time-box { margin-left: 195px; } } @media (max-width: 599px) { #landing-page .landing-page-content-background { display: none; } #landing-page .landing-page-content { width: 86%; left: 7%; margin-top: 0; top: 100px; } #landing-page .landing-page-content .landing-page-left { width: auto; border-right: none; background-image: none !important; float: none; } #landing-page .landing-page-content .make-appointment-button { display: block; } #landing-page .landing-page-content .make-appointment-button button { margin-top: 0; } #landing-page .landing-page-content .read-more-button { display: none; } #appointment-form { display: none; width: auto; height: auto; min-height: 569px; float: none; position: absolute; top: 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } #appointment-form .double-fields .left, #appointment-form .double-fields .right { width: 170px; display: block; float: none; } #appointment-form input[type="text"], #appointment-form textarea, #appointment-form select { width: 170px; } #appointment-form .double-fields select.left { width: 192px; } #appointment-form .approximate-time-box { margin: 0; } } /*------------------------------------------------------------------------------ opening hours */ .opening-hours { background: url( '../_images/opening-hours.png' ) no-repeat #fff; background-position: -50px 25px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); margin-bottom: 40px; border-right: 1px solid #e5e9ed; border-left: 1px solid #e5e9ed; border-bottom: 1px solid #dbdfe3; } .opening-hours .today { color: #326fb4; font-weight: 600; font-size: 35px; text-align: center; } .opening-hours .day { text-align: center; font-size: 15px; color: #9a9e9f; } .opening-hours .action { text-align: center; margin-top: 40px; position: relative; } .opening-hours .other-days { list-style: none; text-align: center; position: absolute; background: #326fb4; padding: 7.5px 15px; width: 389px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.1 ); z-index: 99999; left: -40px; margin-top: 10px; display: none; } .opening-hours .other-days:before { width: 7px; height: 7px; background: #326fb4; position: absolute; content: ' '; top: -3.5px; left: 50%; margin-left: -3.5px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); } .opening-hours .other-days li { color: #fff; font-size: 13px; padding: 4px 5px; display: inline-block; cursor: pointer; } /*------------------------------------------------------------------------------ responsive */ @media (min-width: 850px) and (max-width: 1149px) { .opening-hours .today { font-size: 25px; } .opening-hours .other-days { width: 264px; } } @media (min-width: 600px) and (max-width: 849px) { .opening-hours { margin-bottom: 0; } } @media (max-width: 599px) { .opening-hours { margin-bottom: 0; } .opening-hours .today { font-size: 25px; } } /*------------------------------------------------------------------------------ our doctors */ section#our-doctors { background: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); border-right: 1px solid #e5e9ed; border-left: 1px solid #e5e9ed; border-bottom: 1px solid #dbdfe3; position: relative; } section#our-doctors .doctors .other-doctors .previous-doctor { width: 30px; height: 30px; background: url( '../_images/doctors-arrow-left.png' ); background-position: 0 0; cursor: pointer; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; display: inline-block; } section#our-doctors .doctors .other-doctors .next-doctor { width: 30px; height: 30px; background: url( '../_images/doctors-arrow-right.png' ); background-position: 0 0; cursor: pointer; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; display: inline-block; } section#our-doctors .doctors .other-doctors .previous-doctor:hover, section#our-doctors .doctors .other-doctors .next-doctor:hover { background-position: 0 30px; } section#our-doctors .doctors .single-doctor .single-doctor-left .doctor-values .doctor-value { display: inline-block; } section#our-doctors .doctors .single-doctor .single-doctor-left .doctor-values .doctor-value img { float: left; width: 50px; padding-top: 10px; } section#our-doctors .doctors .single-doctor .single-doctor-left .doctor-values .doctor-value .value { color: #326fb4; font-size: 42px; font-weight: 700; display: block; margin-bottom: 10px; padding-left: 60px; } section#our-doctors .doctors .single-doctor .single-doctor-left .doctor-values .doctor-value .name { font-size: 11px; text-transform: uppercase; color: #9a9e9f; font-weight: 600; display: block; padding-left: 60px; } section#our-doctors .doctors .single-doctor .single-doctor-left .doctor-values .divider { display: inline-block; height: 15px; width: 2px; background: #e5e5e5; margin: 29px 10px 0 20px; vertical-align: top; } section#our-doctors .doctors .single-doctor .single-doctor-right { background-size: cover; background-repeat: no-repeat; float: right; -webkit-border-bottom-right-radius: 2px; -moz-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; font-size: 0; } /*------------------------------------------------------------------------------ responsive */ @media (min-width: 1150px) { section#our-doctors .doctors .other-doctors { position: absolute; top: 40px; left: 400px; z-index: 200; } section#our-doctors .doctors .single-doctor .single-doctor-left { width: 499px; float: left; } section#our-doctors .doctors .single-doctor .single-doctor-right { width: 499px; height: 390px; } } @media (min-width: 850px) and (max-width: 1149px) { section#our-doctors .doctors .other-doctors { position: absolute; top: 40px; left: 300px; z-index: 200; } section#our-doctors .doctors .single-doctor .single-doctor-left { width: 399px; float: left; } section#our-doctors .doctors .single-doctor .single-doctor-right { width: 349px; height: 426px; background-position: 50% 50%; } section#our-doctors .doctors .single-doctor .single-doctor-left .doctor-values .doctor-value { width: 109px; } } @media (min-width: 600px) and (max-width: 849px) { section#our-doctors .doctors .other-doctors { position: absolute; top: 40px; right: 40px; z-index: 200; } section#our-doctors .doctors .single-doctor .single-doctor-right { width: 100%; height: 300px; background-position: 50% 50%; -webkit-border-bottom-left-radius: 2px; -moz-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; } } @media (max-width: 599px) { section#our-doctors .doctors .other-doctors { position: absolute; top: 40px; right: 40px; z-index: 200; } section#our-doctors .doctors .single-doctor .single-doctor-right { width: 100%; height: 300px; background-position: 50% 50%; -webkit-border-bottom-left-radius: 2px; -moz-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; } section#our-doctors .doctors .single-doctor .single-doctor-left .doctor-values .divider { background: #fff; display: block; height: 20px; margin: 0; } } /*------------------------------------------------------------------------------ pricing table */ .pricing-table { font-size: 0; } .pricing-table .pricing-table-element .pricing-table-element-image { height: 200px; background-size: cover; -webkit-border-top-left-radius: 2px; -moz-border-top-left-radius: 2px; border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; -moz-border-top-right-radius: 2px; border-top-right-radius: 2px; position: relative; } .pricing-table .pricing-table-element .pricing-table-element-image .price { position: absolute; font-size: 55px; font-weight: 600; color: #fff; bottom: 40px; left: 40px; text-shadow: 0 2px 0 rgba( 0, 0, 0, 0.1 ); } .pricing-table .pricing-table-element .pricing-table-element-content { background: #fafafa; border-left: 1px solid #f1f1f1; border-right: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; -webkit-border-bottom-left-radius: 2px; -moz-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); } /*------------------------------------------------------------------------------ responsive */ @media (min-width: 1150px) { .pricing-table.pricing-table-3-elements .pricing-table-element { display: inline-block; width: 279.33px; margin-right: 40px; vertical-align: top; } .pricing-table.pricing-table-3-elements .pricing-table-element.pricing-table-element-last { margin-right: 0; } } @media (min-width: 850px) and (max-width: 1149px) { .pricing-table.pricing-table-3-elements .pricing-table-element { margin-bottom: 40px; } .pricing-table.pricing-table-3-elements .pricing-table-element.pricing-table-element-last { margin-bottom: 0; } } @media (min-width: 600px) and (max-width: 849px) { .pricing-table.pricing-table-3-elements .pricing-table-element { margin-bottom: 40px; } .pricing-table.pricing-table-3-elements .pricing-table-element.pricing-table-element-last { margin-bottom: 0; } } @media (max-width: 599px) { .pricing-table.pricing-table-3-elements .pricing-table-element { margin-bottom: 40px; } .pricing-table.pricing-table-3-elements .pricing-table-element.pricing-table-element-last { margin-bottom: 0; } } /*------------------------------------------------------------------------------ references */ .references { background: #fff; position: relative; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); border-right: 1px solid #e5e9ed; border-left: 1px solid #e5e9ed; border-bottom: 1px solid #dbdfe3; } .references .single-reference { position: relative; padding: 20px 20px 40px 20px; text-align: center; background: #fff; } .references .references-images { position: absolute; left: 50%; margin-left: -35px; bottom: -36.5px; width: 76px; height: 76px; } .references .references-images .single-image { width: 70px; height: 70px; padding: 3px; background: #385272; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); } .references .references-images .single-image img { width: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } /*------------------------------------------------------------------------------ responsive */ @media (min-width: 600px) and (max-width: 849px) { .references { margin-bottom: 40px; } } @media (max-width: 599px) { .references { margin-bottom: 40px; } } /*------------------------------------------------------------------------------ shop */ section#shop { font-size: 0; } section#shop.shop-alt { margin-top: -80px; } /*------------------------------------------------------------------------------ product */ section#shop .product { background: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); margin-bottom: 40px; border-right: 1px solid #e5e9ed; border-left: 1px solid #e5e9ed; border-bottom: 1px solid #dbdfe3; margin-right: 40px; display: inline-block; vertical-align: top; position: relative; } section#shop .product.product-right { margin-right: 0; } section#shop .product .product-image { height: 200px; text-align: center; padding: 40px 0; background: #fafafa; border-bottom: 1px solid #f1f1f1; } section#shop .product .product-image img { height: 200px; } section#shop .product span.product-price { font-size: 20px; font-weight: 600; display: block; margin: -10px 0 30px 0; color: #282f38; } /*------------------------------------------------------------------------------ product full */ section#shop .product-full { background: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); margin-bottom: 40px; border-right: 1px solid #e5e9ed; border-left: 1px solid #e5e9ed; border-bottom: 1px solid #dbdfe3; vertical-align: top; position: relative; } section#shop .product-full .product-image { height: 200px; text-align: center; padding: 40px 0; background: #fafafa; border-bottom: 1px solid #f1f1f1; } section#shop .product-full .product-image img { height: 200px; } section#shop .product-full span.product-price { font-size: 20px; font-weight: 600; display: block; margin: -10px 0 30px 0; color: #282f38; } section#shop nav { background: #fff; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); border-right: 1px solid #e5e9ed; border-left: 1px solid #e5e9ed; border-bottom: 1px solid #dbdfe3; } section#shop nav .left { float: left; margin-bottom: 0; margin-top: 5px; } section#shop nav .right { float: right; } section#shop nav .right .button { margin-left: 15px; margin-right: 0; } /*------------------------------------------------------------------------------ cart */ section#shop .cart, section#shop .cart-totals { background: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); margin-bottom: 40px; border-right: 1px solid #e5e9ed; border-left: 1px solid #e5e9ed; border-bottom: 1px solid #dbdfe3; vertical-align: top; position: relative; } section#shop .cart .cart-table { width: 100%; border-collapse: collapse; text-align: center; } section#shop .cart .cart-table td { padding: 20px; border: 1px solid #f1f1f1; font-size: 13px; color: #282f38; } section#shop .cart .cart-table tr.head td { border-right: none; border-left: none; font-weight: 600; background: #fafafa; } section#shop .cart .cart-table tr.head td span.responsive-name { display: none; } section#shop .cart .cart-table tr.head td:first-child { border-left: 1px solid #f1f1f1; } section#shop .cart .cart-table tr.head td:last-child { border-right: 1px solid #f1f1f1; } section#shop .cart .cart-table .remove { color: #e73a30; } section#shop .cart .cart-table td.actions { text-align: right; padding: 0; border: none; } section#shop .cart .cart-table td.actions .coupon { display: block; padding: 20px; margin-bottom: 20px; background: #fafafa; border: 1px solid #f1f1f1; border-top: 0; } section#shop .cart .cart-table td.actions .coupon input[type="text"] { padding: 10px; font-size: 13px; margin-bottom: 5px; border: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); outline: none; width: 390px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; border: 1px solid #e5e5e5; margin-right: 10px; } section#shop .cart .cart-table td.actions .coupon .button { margin-right: 0; } section#shop .cart .cart-table td.actions input[type="text"]:focus, section#shop .cart .cart-table td.actions input[type="text"]:hover { border: 1px solid #ccc; } section#shop .cart .cart-table td.actions .button-black { margin-right: 0; } section#shop .cart-totals table { width: 100%; border-collapse: collapse; text-align: left; margin-bottom: 20px; } section#shop .cart-totals table td { padding: 20px; border: 1px solid #f1f1f1; font-size: 13px; color: #282f38; } section#shop .cart-totals table td:first-child { font-weight: 600; } section#shop .cart-totals table.order-total td:first-child { font-weight: normal; } section#shop .cart-totals table tr.order-total td strong { color: #326fb4; } section#shop .cart-totals .calculate-shipping { background: #fafafa; border-top: 1px solid #f1f1f1; display: none; } section#shop .cart-totals .calculate-shipping input[type="text"] { display: inline-block; padding: 10px; font-size: 13px; margin-bottom: 5px; border: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); outline: none; width: 150px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; border: 1px solid #e5e5e5; margin-right: 10px; margin-bottom: 20px; } section#shop .cart-totals .calculate-shipping select { display: inline-block; padding: 10px; font-size: 13px; margin-bottom: 5px; border: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); outline: none; width: 214px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; border: 1px solid #e5e5e5; margin-right: 10px; margin-bottom: 20px; } section#shop .cart-totals .calculate-shipping input[type="text"]:focus, section#shop .cart-totals .calculate-shipping select:focus, section#shop .cart-totals .calculate-shipping input[type="text"]:hover, section#shop .cart-totals .calculate-shipping select:hover { border: 1px solid #ccc; } section#shop .cart-totals .calculate-shipping input[name="postcode"] { margin-right: 0; } section#shop .cart-totals .payment-method { background: #fafafa; border-top: 1px solid #f1f1f1; } /*------------------------------------------------------------------------------ checkout */ section#shop .checkout { background: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); margin-bottom: 40px; border-right: 1px solid #e5e9ed; border-left: 1px solid #e5e9ed; border-bottom: 1px solid #dbdfe3; vertical-align: top; position: relative; } section#shop .checkout form { background: #fafafa; border-top: 1px solid #f1f1f1; } section#shop .checkout form.without-background { background: none; border: none; } section#shop .checkout input[type="text"], section#shop .checkout input[type="password"], section#shop .checkout textarea { display: inline-block; padding: 10px; font-size: 13px; border: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); outline: none; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; border: 1px solid #e5e5e5; width: 556px; } section#shop .checkout textarea { height: 150px; } section#shop .checkout .double-content input[type="text"] { width: 247px; } section#shop .checkout select { display: inline-block; padding: 10px; font-size: 13px; border: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); outline: none; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; border: 1px solid #e5e5e5; width: 578px; } section#shop .checkout input[type="text"]:focus, section#shop .checkout input[type="password"]:focus, section#shop .checkout select:focus, section#shop .checkout textarea:focus, section#shop .checkout input[type="text"]:hover, section#shop .checkout input[type="password"]:hover, section#shop .checkout select:hover, section#shop .checkout textarea:hover { border: 1px solid #ccc; } section#shop .checkout input[type="checkbox"], section#shop .payment-method input[type="checkbox"] { margin-right: 10px; } section#shop .checkout h2 input[type="checkbox"] { margin-right: 0; margin-left: 10px; } section#shop .checkout .different-address { display: none; } /*------------------------------------------------------------------------------ responsive */ @media (min-width: 1150px) { section#shop { width: 660px; float: left; margin-bottom: 40px; } section#shop .product { width: 308px; } } @media (min-width: 850px) and (max-width: 1149px) { section#shop { width: 500px; float: left; margin-bottom: 40px; } section#shop .product { width: 228px; } section#shop nav .left { float: none; margin-bottom: 0; margin-top: 5px; text-align: center; } section#shop nav .right { float: none; text-align: center; } section#shop nav .right .button { margin: 20px 10px 0 10px; } section#shop .cart .cart-table { width: auto; } section#shop .cart .cart-table td { padding: 10px; } section#shop .cart .cart-table td.actions .coupon input[type="text"] { width: 230px; } section#shop .cart-totals .calculate-shipping select { width: 170px; } section#shop .cart-totals .calculate-shipping input[type="text"] { width: 92px; } section#shop .checkout select { width: 418px; } section#shop .checkout .double-content input[type="text"] { width: 167px; } section#shop .checkout input[type="text"], section#shop .checkout input[type="password"], section#shop .checkout textarea { width: 396px; } } @media (min-width: 600px) and (max-width: 849px) { section#shop { width: auto; float: none; margin-bottom: 40px; } section#shop .product { width: 228px; } section#shop nav .left { float: none; margin-bottom: 0; margin-top: 5px; text-align: center; } section#shop nav .right { float: none; text-align: center; } section#shop nav .right .button { margin: 20px 10px 0 10px; } section#shop .cart .cart-table { width: auto; } section#shop .cart .cart-table td { padding: 10px; } section#shop .cart .cart-table td.actions .coupon input[type="text"] { width: 230px; } section#shop .cart .cart-table td.actions .coupon .button { margin-top: 0; } section#shop .cart-totals .calculate-shipping select { width: 170px; } section#shop .cart-totals .calculate-shipping input[type="text"] { width: 92px; } section#shop .checkout select { width: 418px; } section#shop .checkout input[type="text"], section#shop .checkout .double-content input[type="text"], section#shop .checkout input[type="password"], section#shop .checkout textarea { width: 396px; } } @media (max-width: 599px) { section#shop { width: auto; float: none; margin-bottom: 40px; } section#shop .product { width: auto; display: block; margin-right: 0; } section#shop nav .left { float: none; margin-bottom: 0; margin-top: 5px; text-align: center; } section#shop nav .right { float: none; text-align: center; } section#shop nav .right .button { margin: 20px 10px 0 10px; } section#shop .cart .cart-table td { padding: 5px; } section#shop .cart .cart-table td.product-thumbnail { display: none; } section#shop .cart .cart-table tr.head td span.responsive-name { display: block; } section#shop .cart .cart-table tr.head td span.normal-name { display: none; } section#shop .cart .cart-table td.actions .coupon input[type="text"] { margin-right: 0; } section#shop .cart-totals .calculate-shipping select, section#shop .cart-totals .calculate-shipping input[type="text"] { display: block; } } /*------------------------------------------------------------------------------ sidebar */ section#sidebar.blog-single, section#sidebar.shop-alt { margin-top: -80px; } section#sidebar .widget { background: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); margin-bottom: 40px; border-right: 1px solid #e5e9ed; border-left: 1px solid #e5e9ed; border-bottom: 1px solid #dbdfe3; position: relative; } section#sidebar .widget.widget-blue { background: #326fb4; border: none; } section#sidebar .widget.widget-blue h4 { color: #fff; } section#sidebar .widget ul { list-style: none; } section#sidebar .widget ul li { line-height: 1.7em; font-size: 15px; } section#sidebar .widget ul.most-commented-news .data { font-size: 13px; margin: 7px 0; color: #9a9e9f; } section#sidebar .widget ul.most-commented-news .line { width: 50px; border-bottom: 1px dashed #eaeaea; margin: 10px 0; } section#sidebar .widget .tags-cloud { font-size: 0; } section#sidebar .widget .tags-cloud .tag { font-size: 13px; padding: 8px; background: #f5f5f5; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; display: inline-block; margin: 5px 5px 0 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; } section#sidebar .widget .tags-cloud .tag:hover { color: #fff; background: #326fb4; } section#sidebar .widget.widget-emergency-call { background-image: url( '../_images/animals.png' ); background-repeat: no-repeat; background-position: 85px 0px; } section#sidebar .widget #filter-by-price { margin-bottom: 30px; } section#sidebar .widget #filter-by-price { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.02 ); outline: none; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; border: 1px solid #e5e5e5; } section#sidebar .widget #filter-by-price .noUi-connect { background: #326fb4; box-shadow: none; } section#sidebar .widget .filter-value { display: block; position: absolute; right: 40px; margin-top: 10px; color: #282f38; } section#sidebar .widget ul.recommended-products .product-data, section#sidebar .widget ul.cart-summary .product-data { padding-left: 40px; } section#sidebar .widget ul.recommended-products img, section#sidebar .widget ul.cart-summary img { height: 40px; float: left; } section#sidebar .widget ul.recommended-products .data, section#sidebar .widget ul.cart-summary .data { font-size: 13px; margin: 7px 0; color: #9a9e9f; } section#sidebar .widget ul.recommended-products .line, section#sidebar .widget ul.cart-summary .line { width: 50px; border-bottom: 1px dashed #eaeaea; margin: 10px 0; } section#sidebar .widget ul.cart-summary { margin-bottom: 20px; } section#sidebar .widget h4.subtotal-title { margin-bottom: 10px; } section#sidebar .widget span.subtotal { color: #326fb4; font-weight: 600; } section#sidebar .widget .cart-links { margin-bottom: 20px; text-align: center; } section#sidebar .widget .cart-links .button-checkout { margin-right: 0; } /*------------------------------------------------------------------------------ responsive */ @media (min-width: 1150px) { section#sidebar { width: 300px; float: right; } section#sidebar .widget.widget-emergency-call .phone { color: #fff; text-align: right; font-weight: 700; font-size: 30px; } } @media (min-width: 850px) and (max-width: 1149px) { section#sidebar { width: 210px; float: right; } section#sidebar .widget.widget-emergency-call .phone { color: #fff; text-align: right; font-weight: 700; font-size: 17px; } section#sidebar .widget .filter-value { display: block; position: static; margin: 0 0 20px 0; text-align: center; } section#sidebar .widget ul.recommended-products .line, section#sidebar .widget ul.cart-summary .line, section#sidebar .widget ul.recommended-products .data, section#sidebar .widget ul.cart-summary .data { margin-left: -40px; } section#sidebar .widget .cart-links a.button { margin: 0 0 10px 0; } } @media (min-width: 600px) and (max-width: 849px) { section#sidebar { width: auto; float: none; } section#sidebar .widget.widget-emergency-call .phone { color: #fff; text-align: right; font-weight: 700; font-size: 30px; } section#sidebar.blog-single { margin-top: 0; } section#sidebar .widget .filter-value { margin-top: 25px; } } @media (max-width: 599px) { section#sidebar { width: auto; float: none; margin: 0 10px; } section#sidebar .widget.widget-emergency-call .phone { color: #fff; text-align: right; font-weight: 700; font-size: 20px; } section#sidebar.blog-single { margin-top: 0; } section#sidebar .widget .filter-value { margin-top: 25px; } } /*------------------------------------------------------------------------------ top box */ #top-box { position: absolute; z-index: 310; width: 100%; left: 0; top: 0; } #top-box .pattern { position: absolute; width: 100%; height: 100%; background: #292929; opacity: 0.8; } #top-box .center { width: 1000px; height: 100px; margin: 0 auto; text-align: center; position: relative; } #top-box .center .logo { width: 100px; height: 40px; position: absolute; top: 50%; margin-top: -24.5px; left: 0; z-index: 500; } #top-box .center .logo a { display: block; } #top-box #menu { list-style: none; padding: 37px 0 0 0; } #top-box #menu li { display: inline-block; margin: 0 20px; font-size: 13px; } #top-box #menu li a { color: #fff; padding: 0 0 20px 0; } #top-box #menu li .sub-menu { position: absolute; background: #fff; padding: 7.5px 15px; width: 150px; text-align: left; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.1 ); margin-top: 20px; margin-left: -15px; display: none; z-index: 5000; } #top-box #menu li .sub-menu:before { width: 10px; height: 10px; background: #fff; position: absolute; content: ' '; top: -5px; left: 20px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); } #top-box #menu li:hover .sub-menu { display: block; } #top-box #menu li .sub-menu li { display: block; padding: 0; margin: 0; padding: 7.5px 0; border-bottom: 1px dashed #eee; } #top-box #menu li .sub-menu li:last-child { border-bottom: none; } #top-box #menu li .sub-menu li a { color: #326fb4; } #top-box #menu li.only-for-responsive { display: none; } #top-box .contact { position: absolute; right: 0; top: 50%; margin-top: -21.5px; } #top-box .contact .button { margin-right: 0; } /*------------------------------------------------------------------------------ menu responsive button */ .menu-responsive-button { width: 30px; height: 30px; float: right; background-image: url( '../_images/menu-button.png' ); background-repeat: no-repeat; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; cursor: pointer; margin-top: 31px; } /*------------------------------------------------------------------------------ responsive */ @media (min-width: 1150px) { #top-box .center { width: 1000px; } .menu-responsive-button { display: none; } } @media (min-width: 850px) and (max-width: 1149px) { #top-box .center { width: 750px; } #top-box .center #menu { position: absolute; background: #fff; padding: 7.5px 0; width: 150px; text-align: left; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.1 ); margin-top: 75px; right: -11px; z-index: 5000; display: none; } #top-box .center #menu:before { width: 10px; height: 10px; background: #fff; position: absolute; content: ' '; top: -5px; right: 20px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); } #top-box .center #menu li { display: block; padding: 0; margin: 0; padding: 7.5px 15px; border-bottom: 1px dashed #eee; } #top-box .center #menu li:last-child { border-bottom: none; } #top-box .center #menu li a, #top-box #menu li.only-for-responsive span { color: #326fb4; cursor: pointer; } #top-box #menu li .sub-menu { margin-top: -31px; margin-left: -165px; padding: 7.5px 0; } #top-box #menu li .sub-menu:before { display: none; } #top-box #menu li .sub-menu li { padding: 7.5px 15px; } #top-box .center .contact { display: none; } } @media (min-width: 600px) and (max-width: 849px) { #top-box .center { width: 500px; } #top-box .center #menu { position: absolute; background: #fff; padding: 7.5px 0; width: 150px; text-align: left; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.1 ); margin-top: 75px; right: -11px; z-index: 5000; display: none; } #top-box .center #menu:before { width: 10px; height: 10px; background: #fff; position: absolute; content: ' '; top: -5px; right: 20px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); } #top-box .center #menu li { display: block; padding: 0; margin: 0; padding: 7.5px 15px; border-bottom: 1px dashed #eee; } #top-box .center #menu li:last-child { border-bottom: none; } #top-box .center #menu li a, #top-box #menu li.only-for-responsive span { color: #326fb4; cursor: pointer; } #top-box #menu li .sub-menu { margin-top: -31px; margin-left: -165px; padding: 7.5px 0; } #top-box #menu li .sub-menu:before { display: none; } #top-box #menu li .sub-menu li { padding: 7.5px 15px; } #top-box .center .contact { display: none; } } @media (max-width: 599px) { #top-box .center { width: auto; margin-left: 20px; margin-right: 20px; } #top-box .center #menu { position: absolute; background: #fff; padding: 7.5px 0; width: 150px; text-align: left; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.1 ); margin-top: 75px; right: -11px; z-index: 5000; display: none; } #top-box .center #menu:before { width: 10px; height: 10px; background: #fff; position: absolute; content: ' '; top: -5px; right: 20px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); } #top-box .center #menu li { display: block; padding: 0; margin: 0; padding: 7.5px 15px; border-bottom: 1px dashed #eee; } #top-box .center #menu li:last-child { border-bottom: none; } #top-box .center #menu li a, #top-box #menu li.only-for-responsive span { color: #326fb4; cursor: pointer; } #top-box #menu li .sub-menu { margin-top: -31px; margin-left: -165px; padding: 7.5px 0; } #top-box #menu li .sub-menu:before { display: none; } #top-box #menu li .sub-menu li { padding: 7.5px 15px; } #top-box .center .contact { display: none; } } .clear{ clear: both; } .contact-form-label{ float: left; position: relative; width: 260px; } .contact-form-error{ color: #ff0000; font-size: 12px; }