Difference between revisions of "Template:London Biohackspace"
(Replaced content with "{{Template_All_Teams}} <!-- Declare that you are going to use html code instead of wiki code --> <html> <!-- Start of CSS--> <style type="text/css"> #content ...") |
|||
Line 21: | Line 21: | ||
</style> | </style> | ||
<!-- End of CSS --> | <!-- End of CSS --> | ||
+ | |||
+ | <!-- style.css --> | ||
+ | /*css*/ | ||
+ | @import "reset.css"; | ||
+ | @import "skeleton.css"; | ||
+ | @import url(//fonts.googleapis.com/css?family=Stint+Ultra+Condensed); | ||
+ | |||
+ | html, body { | ||
+ | background: #ffffff; | ||
+ | font: 14px/20px Arial, sans-serif; | ||
+ | color: #a49887; | ||
+ | min-width:300px; | ||
+ | } | ||
+ | |||
+ | * { -webkit-text-size-adjust: none;} | ||
+ | |||
+ | a { color: inherit; text-decoration: none;} | ||
+ | a:hover { text-decoration: none;} | ||
+ | a[href^="tel:"] {color: inherit;text-decoration:none;} | ||
+ | .a-hov { transition: all 0.4s ease;} | ||
+ | .a-hov:hover { color: #6b460a;} | ||
+ | |||
+ | ul li a { transition: all 0.4s ease;} | ||
+ | |||
+ | h1, h2, h3, h4, h5, h6 { font-weight: normal; font-family: 'Stint Ultra Condensed', cursive; text-transform: uppercase;} | ||
+ | h1 { } | ||
+ | h2 { font-size: 32px; line-height: 34px; color: #6b460a; padding-top: 55px; padding-bottom: 15px;} | ||
+ | h3 { font-size: 22px; line-height: 26px; color: #aca383; padding-bottom: 8px; padding-top: 21px;} | ||
+ | h4 { } | ||
+ | h5 { } | ||
+ | |||
+ | |||
+ | .title-1 { | ||
+ | background: #a4211f; | ||
+ | color: #fff; | ||
+ | font-family: 'Stint Ultra Condensed', cursive; | ||
+ | font-size: 32px; | ||
+ | line-height: 32px; | ||
+ | text-align: center; | ||
+ | |||
+ | padding: 10px 0px; | ||
+ | margin-bottom: 29px; | ||
+ | } | ||
+ | .title-1.orange { background: #cf8200;} | ||
+ | .title-1.green { background: #859500;} | ||
+ | .title-1.violet { background: #89347a;} | ||
+ | .title-2 { font-family: 'Stint Ultra Condensed', cursive; font-size: 80px; line-height: 1em; text-transform: uppercase; color: #6b460a; padding-top: 46px;} | ||
+ | .text-1 { font-family: 'Open Sans', sans-serif; color: #fff; text-transform: uppercase; font-size: 11px; line-height: 22px;} | ||
+ | .text-2 { } | ||
+ | .text-3 { } | ||
+ | |||
+ | .color-1 { color: #f35c1a;} | ||
+ | .color-2 { } | ||
+ | |||
+ | h2.v1 { color: #bd812f; padding-top: 0px !important;} | ||
+ | .page-1 h2 { padding-top: 70px; padding-bottom: 14px;} | ||
+ | h2 + .btn { margin-top: 9px;} | ||
+ | h2 + h3 { padding-top: 0;} | ||
+ | h3 a { transition: all .4s ease;} | ||
+ | h3 a:hover { color: #6b460a;} | ||
+ | |||
+ | |||
+ | .link { | ||
+ | font-size: 24px; | ||
+ | line-height: 24px; | ||
+ | font-family: 'Stint Ultra Condensed', cursive; | ||
+ | color: #f35c1a; | ||
+ | transition: all .4s ease; | ||
+ | text-transform: none; | ||
+ | } | ||
+ | .link:hover { color:#6b460a; } | ||
+ | .btn { | ||
+ | display: inline-block; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | transition: all 0.4s ease; | ||
+ | background: #f57741; | ||
+ | height: 45px; | ||
+ | line-height: 45px; | ||
+ | font-family: 'Stint Ultra Condensed', cursive; | ||
+ | text-transform: uppercase; | ||
+ | font-size: 22px; | ||
+ | padding: 0 21px; | ||
+ | -webkit-border-radius: 2px; | ||
+ | -moz-border-radius: 2px; | ||
+ | -ms-border-radius: 2px; | ||
+ | -o-border-radius: 2px; | ||
+ | border-radius: 2px; | ||
+ | color: #fff; | ||
+ | margin-top: 23px; | ||
+ | } | ||
+ | .btn:hover { background: #3b1500;} | ||
+ | .btn-1 { | ||
+ | display: inline-block; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | transition: all 0.4s ease; | ||
+ | background: url(bg-5.gif) 0 0 repeat; | ||
+ | height: 45px; | ||
+ | line-height: 45px; | ||
+ | font-family: 'Stint Ultra Condensed', cursive; | ||
+ | text-transform: uppercase; | ||
+ | font-size: 22px; | ||
+ | padding: 0 20px; | ||
+ | border: 1px solid #5d3522; | ||
+ | -webkit-border-radius: 2px; | ||
+ | -moz-border-radius: 2px; | ||
+ | -ms-border-radius: 2px; | ||
+ | -o-border-radius: 2px; | ||
+ | border-radius: 2px; | ||
+ | color: #fff; | ||
+ | margin-top: 23px; | ||
+ | } | ||
+ | .btn-1:hover { background: #f57741;} | ||
+ | |||
+ | |||
+ | .btn-2 { | ||
+ | display: inline-block; | ||
+ | text-align: center; | ||
+ | transition: all 0.4s ease; | ||
+ | line-height: 22px; | ||
+ | font-family: 'Stint Ultra Condensed', cursive; | ||
+ | text-transform: uppercase; | ||
+ | font-size: 22px; | ||
+ | color: #be7d25; | ||
+ | margin-top: 23px; | ||
+ | background: url(arrow-1.png) right 4px no-repeat; | ||
+ | padding-right: 20px; | ||
+ | } | ||
+ | .btn-2:hover { color: #6b460a;} | ||
+ | |||
+ | .list li { | ||
+ | line-height: 28px; | ||
+ | padding-left: 27px; | ||
+ | background: url(mark-3.png) 0 7px no-repeat; | ||
+ | margin-top: -7px; | ||
+ | } | ||
+ | .list li + li { margin-top: 0px;} | ||
+ | .list li a { } | ||
+ | .list li a:hover { color: #f74f42;} | ||
+ | |||
+ | |||
+ | /*auxiliary*/ | ||
+ | |||
+ | .img-ind {float: left; margin-right: 20px; margin-top: 2px;} | ||
+ | .wrapper {width: 100%; position: relative;} | ||
+ | .extra-wrap {overflow:hidden;} | ||
+ | .grid_inside { margin: 0 -10px;} | ||
+ | .aligncenter {text-align: center !important;} | ||
+ | .alignleft { text-align: left !important; } | ||
+ | .it {font-style:italic; display: inline-block;} | ||
+ | .fleft {float: left;} | ||
+ | .fright {float: right;} | ||
+ | .h-underline:hover { text-decoration: underline;} | ||
+ | .underline {text-decoration: underline;} | ||
+ | .upp {text-transform: uppercase;} | ||
+ | .transition {transition: all 0.4s ease;} | ||
+ | |||
+ | .clearfix { *zoom: 1;} | ||
+ | .clearfix:before,.clearfix:after {display: table; content: "";line-height: 0;} | ||
+ | .clearfix:after { clear: both;} | ||
+ | |||
+ | .img-ind + div > h2, .img-ind + div > h3 { padding-top: 0;} | ||
+ | |||
+ | .img-circle { | ||
+ | float: left; | ||
+ | margin-right: 20px; | ||
+ | background: #f57741; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | width: 69px; | ||
+ | height: 69px; | ||
+ | line-height: 69px; | ||
+ | margin-top: 4px; | ||
+ | -webkit-border-radius: 500px; | ||
+ | -moz-border-radius: 500px; | ||
+ | -ms-border-radius: 500px; | ||
+ | -o-border-radius: 500px; | ||
+ | border-radius: 500px; | ||
+ | |||
+ | } | ||
+ | .img-circle img { display: inline-block; line-height: 69px; vertical-align: middle;} | ||
+ | .img-circle + div > h3 { padding-top: 0; margin-top: -2px;} | ||
+ | .img-circle + div { overflow: hidden;} | ||
+ | |||
+ | .pad-left { padding-left: 10px;} | ||
+ | |||
+ | p { padding-bottom: 20px;} | ||
+ | .top-1 { padding-top: 70px;} | ||
+ | |||
+ | .bg-1 { display: none;} | ||
+ | .bg-2 { background: url(bg-3.jpg) 0 0 repeat; padding-bottom: 53px;} | ||
+ | |||
+ | .bord-1 { position: relative;} | ||
+ | .bord-1:after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | border-bottom: 1px solid #e9e5df; | ||
+ | left: 10px; | ||
+ | right: 10px; | ||
+ | bottom: 0; | ||
+ | height: 1px; | ||
+ | } | ||
+ | .bord-1.v1 {padding-bottom: 16px;} | ||
+ | |||
+ | .bord-2 { position: relative;margin-top: 57px;} | ||
+ | .bord-2:after { | ||
+ | position: absolute; | ||
+ | content: ""; | ||
+ | border-right: 1px solid #f0ede9; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | right: 19px; | ||
+ | width: 1px; | ||
+ | } | ||
+ | |||
+ | .bord-3 { position: relative; padding-bottom: 55px;} | ||
+ | .bord-3:after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | border-bottom: 1px solid #e9e5df; | ||
+ | left: 0px; | ||
+ | right: 0px; | ||
+ | bottom: 0; | ||
+ | height: 1px; | ||
+ | } | ||
+ | |||
+ | .page-1 .img-ind {float: left; margin-right: 41px; margin-top: 2px;} | ||
+ | |||
+ | /************Header************/ | ||
+ | |||
+ | header { position: relative; background: url(bg-1.jpg) center 0 no-repeat;background-size: 100% auto; padding-bottom: 23px;} | ||
+ | |||
+ | h1 { text-align: center;} | ||
+ | |||
+ | .list_carousel { | ||
+ | /*background: url(../images/bg-4.png) center 0 no-repeat; */ | ||
+ | min-height: 119px; | ||
+ | margin-top: 322px; | ||
+ | padding: 0 110px; | ||
+ | position: relative; | ||
+ | margin-bottom: 115px; | ||
+ | } | ||
+ | .list_carousel ul { cursor: default;} | ||
+ | .list_carousel .foo_bg { | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | .list_carousel li { | ||
+ | float: left; | ||
+ | font-family: 'Stint Ultra Condensed', cursive; | ||
+ | color: #fff; | ||
+ | font-size: 65px; | ||
+ | line-height: 65px; | ||
+ | text-transform: uppercase; | ||
+ | text-align: center; | ||
+ | padding-top: 17px; | ||
+ | padding-bottom: 37px; | ||
+ | } | ||
+ | .list_carousel li span { color: #e6ff74;} | ||
+ | |||
+ | .arrows { position: relative;} | ||
+ | .arrows a { position: absolute; display: block; width: 25px; height: 38px; background: url(arrows-1.png) repeat;} | ||
+ | .arrows .next { background-position: 0 1px; left: -30px; top: -89px;} | ||
+ | .arrows .prev { background-position: right 1px; right: -30px; top: -89px;} | ||
+ | .arrows .next:hover { background-position: 0 bottom;} | ||
+ | .arrows .prev:hover { background-position: right bottom;} | ||
+ | |||
+ | /************Content***********/ | ||
+ | .content { background: #fff;} | ||
+ | .content-last { position: relative; padding-bottom: 66px;} | ||
+ | .content-last:after { | ||
+ | position: absolute; | ||
+ | content: ""; | ||
+ | left: 10px; | ||
+ | right: 10px; | ||
+ | bottom: 0; | ||
+ | border-bottom: 1px solid #e9e5df; | ||
+ | height: 1px; | ||
+ | } | ||
+ | .box-1 { margin-top: 57px; text-align: center;} | ||
+ | |||
+ | .block-2 > div { margin-top: 27px;} | ||
+ | |||
+ | |||
+ | |||
+ | .block-4 > div + div { margin-top: 38px;} | ||
+ | |||
+ | .gallery { margin-top: -15px;} | ||
+ | .gallery > div { margin-top: 20px;} | ||
+ | .gallery + .btn-2 { margin-top: 28px;} | ||
+ | |||
+ | |||
+ | .box-4 + .box-4 { margin-top: 32px;} | ||
+ | |||
+ | .gallery-1 { margin-top: -26px;} | ||
+ | .gallery-1 .box-5 {} | ||
+ | .gallery-1 .box-5 .inside { border: 1px solid #e9e5df; border-top: 0px; padding: 0 20px 35px;} | ||
+ | |||
+ | |||
+ | .box-5 { margin-top: 30px;} | ||
+ | |||
+ | .block-5 { margin-top: -47px; padding-bottom: 56px;} | ||
+ | .block-5 > div { margin-top: 47px;} | ||
+ | |||
+ | blockquote .inside { margin-top: -3px;} | ||
+ | blockquote .inside .quote, | ||
+ | blockquote .inside .quote-1 { | ||
+ | width: 28px; | ||
+ | height: 17px; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | blockquote .inside .quote { background: url(../images/quote-1.png) 0 bottom no-repeat;} | ||
+ | blockquote .inside .quote-1 { background: url(../images/quote-2.png) right bottom no-repeat;} | ||
+ | |||
+ | /************Footer************/ | ||
+ | |||
+ | footer { | ||
+ | font-size: 24px; | ||
+ | line-height: 24px; | ||
+ | font-family: 'Stint Ultra Condensed', cursive; | ||
+ | color: #c1baa2; | ||
+ | text-transform: uppercase; | ||
+ | padding-bottom: 40px; | ||
+ | background: #fff; | ||
+ | z-index: 9; | ||
+ | } | ||
+ | |||
+ | |||
+ | .list-services { margin-top: 31px; position: relative; margin-right: auto; margin-left: 11px;} | ||
+ | .list-services li { | ||
+ | display: inline-block; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | [class*="list-services-"] { | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | height: 34px; | ||
+ | width: 34px; | ||
+ | background: url(social_icons.png) no-repeat; | ||
+ | -webkit-transition: all 0.2s ease-out; | ||
+ | -moz-transition: all 0.2s ease-out; | ||
+ | -o-transition: all 0.2s ease-out; | ||
+ | -ms-transition: all 0.2s ease-out; | ||
+ | transition: all 0.2s ease-out; | ||
+ | margin-left: 11px; | ||
+ | -webkit-border-radius: 500px; | ||
+ | -moz-border-radius: 500px; | ||
+ | -ms-border-radius: 500px; | ||
+ | -o-border-radius: 500px; | ||
+ | border-radius: 500px; | ||
+ | } | ||
+ | .list-services-1 { background-position: 0px 0px;} | ||
+ | .list-services-2 { background-position: -45px 0px;} | ||
+ | .list-services-3 { background-position: -90px 0px;} | ||
+ | .list-services-4 { background-position: -136px 0px;} | ||
+ | |||
+ | .list-services li a:hover { opacity: .6;} | ||
+ | |||
+ | .box-2 { | ||
+ | position: relative; | ||
+ | margin-top: 31px; | ||
+ | background: url(mark-1.png) 0 4px no-repeat; | ||
+ | margin-left: 23px; | ||
+ | padding-left: 29px; | ||
+ | } | ||
+ | .box-2 span { | ||
+ | } | ||
+ | .box-3 { | ||
+ | position: relative; | ||
+ | margin-top: 76px; | ||
+ | background: url(mark-2.png) 0 4px no-repeat; | ||
+ | margin-left: 0px; | ||
+ | padding-left: 29px; | ||
+ | color: #aca383; | ||
+ | font-size: 22px; | ||
+ | line-height: 26px; | ||
+ | |||
+ | padding-bottom: 44px; | ||
+ | } | ||
+ | footer .bord-1 { padding-bottom: 60px;} | ||
+ | |||
+ | .block-3 { padding-top: 48px; text-align: center; font-size: 20px; color: #866d44;} | ||
+ | .block-3 .dot { color: #f57b45; font-size: 27px;} | ||
+ | |||
+ | .top { margin-top: 37px; display: inline-block; width: 45px; height: 45px; background: #000; background: url(toTop.png) 0 0 no-repeat;} | ||
+ | .top:hover { background-position: 0 bottom;} | ||
+ | |||
+ | |||
+ | |||
+ | /*toTop*/ | ||
+ | |||
+ | #toTop { | ||
+ | display:none; | ||
+ | text-decoration:none; | ||
+ | position:fixed; | ||
+ | cursor:pointer; | ||
+ | overflow:hidden; | ||
+ | width: 24px; | ||
+ | height: 24px; | ||
+ | border:none; | ||
+ | text-indent:-999px; | ||
+ | z-index:20; | ||
+ | background: url(ui.totop.png) 0 0 no-repeat; | ||
+ | margin-right: -670px !important; | ||
+ | right: 50%; | ||
+ | bottom: 20px; | ||
+ | } | ||
+ | |||
+ | #toTop:hover { background: url(../images/ui.totop.png) right 0 no-repeat;} | ||
+ | |||
+ | #toTop:active, #toTop:focus {outline:none;} | ||
+ | |||
+ | |||
+ | |||
+ | /*touch-touch*/ | ||
+ | .magnifier { | ||
+ | position:relative; | ||
+ | display:block; | ||
+ | background: url(magnifier.png) center center no-repeat #000000; | ||
+ | } | ||
+ | .magnifier img { | ||
+ | -webkit-transition: all 0.5s ease; | ||
+ | -moz-transition: all 0.5s ease; | ||
+ | -o-transition: all 0.5s ease; | ||
+ | transition: all 0.5s ease; | ||
+ | width: 100%; | ||
+ | -webkit-box-shadow: 0px 0px 0px 0px #fff; | ||
+ | -moz-box-shadow: 0px 0px 0px 0px #fff; | ||
+ | box-shadow: 0px 0px 0px 0px #fff; | ||
+ | } | ||
+ | |||
+ | .magnifier:hover img { | ||
+ | opacity: 0.4; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*==================================RESPONSIVE LAYOUTS===============================================*/ | ||
+ | |||
+ | @media only screen and (max-width: 1230px) { | ||
+ | header { background-size: 100% auto;} | ||
+ | .list_carousel { margin-top: 60px;} | ||
+ | } | ||
+ | |||
+ | @media only screen and (max-width: 995px) { | ||
+ | .wrapper-1 { width: 100%;} | ||
+ | .list_carousel li { font-size: 50px; line-height: 59px;} | ||
+ | .bg-2 { background-size: auto 100%;} | ||
+ | .block-2 img { width: 100%;} | ||
+ | .title-2 { font-size: 60px; line-height: 60px;} | ||
+ | .w1 { width: 45%; margin-bottom: 15px;} | ||
+ | .list-services { margin-left: 0;} | ||
+ | [class*="list-services-"] { margin-left: 8px;} | ||
+ | .list_carousel { padding: 0 100px;} | ||
+ | .list_carousel { margin-bottom: 50px;} | ||
+ | } | ||
+ | @media only screen and (max-width: 767px) { | ||
+ | .list_carousel li { font-size: 30px; line-height: 30px;} | ||
+ | .list_carousel { padding: 0px 70px 0;} | ||
+ | .w2 { width: 46% !important; margin-left: 2%; margin-right: 2%;} | ||
+ | .block-2 { text-align: center;padding-bottom: 20px;} | ||
+ | .block-2 .title-2 { padding-top: 20px;} | ||
+ | .bord-2:after { display: none;} | ||
+ | .bord-2 { margin-top: 10px;} | ||
+ | .box-3 { margin-top: 33px;} | ||
+ | .gallery > div { width: 29% !important; padding-right: 2%; padding-left: 2%;} | ||
+ | .grid_inside { margin: 0;} | ||
+ | blockquote { margin-bottom: 20px;} | ||
+ | footer .bord-1 { padding-bottom: 30px;} | ||
+ | .box-2 { margin-left: 9px;} | ||
+ | .box-3 { margin-left: 9px;} | ||
+ | header { background-size: auto auto;} | ||
+ | h1 img { width: 50%;} | ||
+ | } | ||
+ | @media only screen and (max-width: 479px) { | ||
+ | .list_carousel li { font-size: 25px; line-height: 31px;} | ||
+ | .block-2 .w2 { width: 46% !important; margin-left: 2%; margin-right: 2%;} | ||
+ | .gallery > div { width: 29% !important; padding-right: 2%; padding-left: 2%;} | ||
+ | h1 img { width: 70%;} | ||
+ | } | ||
+ | @media only screen and (max-width: 320px) { | ||
+ | |||
+ | } | ||
+ | |||
+ | .page-header { | ||
+ | margin-top:30px; | ||
+ | margin-bottom:0; | ||
+ | } | ||
</html> | </html> |
Revision as of 14:24, 14 July 2015
/*css*/ @import "reset.css"; @import "skeleton.css"; @import url(//fonts.googleapis.com/css?family=Stint+Ultra+Condensed); html, body { background: #ffffff; font: 14px/20px Arial, sans-serif; color: #a49887; min-width:300px; } * { -webkit-text-size-adjust: none;} a { color: inherit; text-decoration: none;} a:hover { text-decoration: none;} a[href^="tel:"] {color: inherit;text-decoration:none;} .a-hov { transition: all 0.4s ease;} .a-hov:hover { color: #6b460a;} ul li a { transition: all 0.4s ease;} h1, h2, h3, h4, h5, h6 { font-weight: normal; font-family: 'Stint Ultra Condensed', cursive; text-transform: uppercase;} h1 { } h2 { font-size: 32px; line-height: 34px; color: #6b460a; padding-top: 55px; padding-bottom: 15px;} h3 { font-size: 22px; line-height: 26px; color: #aca383; padding-bottom: 8px; padding-top: 21px;} h4 { } h5 { } .title-1 { background: #a4211f; color: #fff; font-family: 'Stint Ultra Condensed', cursive; font-size: 32px; line-height: 32px; text-align: center; padding: 10px 0px; margin-bottom: 29px; } .title-1.orange { background: #cf8200;} .title-1.green { background: #859500;} .title-1.violet { background: #89347a;} .title-2 { font-family: 'Stint Ultra Condensed', cursive; font-size: 80px; line-height: 1em; text-transform: uppercase; color: #6b460a; padding-top: 46px;} .text-1 { font-family: 'Open Sans', sans-serif; color: #fff; text-transform: uppercase; font-size: 11px; line-height: 22px;} .text-2 { } .text-3 { } .color-1 { color: #f35c1a;} .color-2 { } h2.v1 { color: #bd812f; padding-top: 0px !important;} .page-1 h2 { padding-top: 70px; padding-bottom: 14px;} h2 + .btn { margin-top: 9px;} h2 + h3 { padding-top: 0;} h3 a { transition: all .4s ease;} h3 a:hover { color: #6b460a;} .link { font-size: 24px; line-height: 24px; font-family: 'Stint Ultra Condensed', cursive; color: #f35c1a; transition: all .4s ease; text-transform: none; } .link:hover { color:#6b460a; } .btn { display: inline-block; text-align: center; vertical-align: middle; transition: all 0.4s ease; background: #f57741; height: 45px; line-height: 45px; font-family: 'Stint Ultra Condensed', cursive; text-transform: uppercase; font-size: 22px; padding: 0 21px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; color: #fff; margin-top: 23px; } .btn:hover { background: #3b1500;} .btn-1 { display: inline-block; text-align: center; vertical-align: middle; transition: all 0.4s ease; background: url(bg-5.gif) 0 0 repeat; height: 45px; line-height: 45px; font-family: 'Stint Ultra Condensed', cursive; text-transform: uppercase; font-size: 22px; padding: 0 20px; border: 1px solid #5d3522; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; color: #fff; margin-top: 23px; } .btn-1:hover { background: #f57741;} .btn-2 { display: inline-block; text-align: center; transition: all 0.4s ease; line-height: 22px; font-family: 'Stint Ultra Condensed', cursive; text-transform: uppercase; font-size: 22px; color: #be7d25; margin-top: 23px; background: url(arrow-1.png) right 4px no-repeat; padding-right: 20px; } .btn-2:hover { color: #6b460a;} .list li { line-height: 28px; padding-left: 27px; background: url(mark-3.png) 0 7px no-repeat; margin-top: -7px; } .list li + li { margin-top: 0px;} .list li a { } .list li a:hover { color: #f74f42;} /*auxiliary*/ .img-ind {float: left; margin-right: 20px; margin-top: 2px;} .wrapper {width: 100%; position: relative;} .extra-wrap {overflow:hidden;} .grid_inside { margin: 0 -10px;} .aligncenter {text-align: center !important;} .alignleft { text-align: left !important; } .it {font-style:italic; display: inline-block;} .fleft {float: left;} .fright {float: right;} .h-underline:hover { text-decoration: underline;} .underline {text-decoration: underline;} .upp {text-transform: uppercase;} .transition {transition: all 0.4s ease;} .clearfix { *zoom: 1;} .clearfix:before,.clearfix:after {display: table; content: "";line-height: 0;} .clearfix:after { clear: both;} .img-ind + div > h2, .img-ind + div > h3 { padding-top: 0;} .img-circle { float: left; margin-right: 20px; background: #f57741; text-align: center; vertical-align: middle; width: 69px; height: 69px; line-height: 69px; margin-top: 4px; -webkit-border-radius: 500px; -moz-border-radius: 500px; -ms-border-radius: 500px; -o-border-radius: 500px; border-radius: 500px; } .img-circle img { display: inline-block; line-height: 69px; vertical-align: middle;} .img-circle + div > h3 { padding-top: 0; margin-top: -2px;} .img-circle + div { overflow: hidden;} .pad-left { padding-left: 10px;} p { padding-bottom: 20px;} .top-1 { padding-top: 70px;} .bg-1 { display: none;} .bg-2 { background: url(bg-3.jpg) 0 0 repeat; padding-bottom: 53px;} .bord-1 { position: relative;} .bord-1:after { content: ""; position: absolute; border-bottom: 1px solid #e9e5df; left: 10px; right: 10px; bottom: 0; height: 1px; } .bord-1.v1 {padding-bottom: 16px;} .bord-2 { position: relative;margin-top: 57px;} .bord-2:after { position: absolute; content: ""; border-right: 1px solid #f0ede9; top: 0; bottom: 0; right: 19px; width: 1px; } .bord-3 { position: relative; padding-bottom: 55px;} .bord-3:after { content: ""; position: absolute; border-bottom: 1px solid #e9e5df; left: 0px; right: 0px; bottom: 0; height: 1px; } .page-1 .img-ind {float: left; margin-right: 41px; margin-top: 2px;} /************Header************/ header { position: relative; background: url(bg-1.jpg) center 0 no-repeat;background-size: 100% auto; padding-bottom: 23px;} h1 { text-align: center;} .list_carousel { /*background: url(../images/bg-4.png) center 0 no-repeat; */ min-height: 119px; margin-top: 322px; padding: 0 110px; position: relative; margin-bottom: 115px; } .list_carousel ul { cursor: default;} .list_carousel .foo_bg { position: absolute; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; } .list_carousel li { float: left; font-family: 'Stint Ultra Condensed', cursive; color: #fff; font-size: 65px; line-height: 65px; text-transform: uppercase; text-align: center; padding-top: 17px; padding-bottom: 37px; } .list_carousel li span { color: #e6ff74;} .arrows { position: relative;} .arrows a { position: absolute; display: block; width: 25px; height: 38px; background: url(arrows-1.png) repeat;} .arrows .next { background-position: 0 1px; left: -30px; top: -89px;} .arrows .prev { background-position: right 1px; right: -30px; top: -89px;} .arrows .next:hover { background-position: 0 bottom;} .arrows .prev:hover { background-position: right bottom;} /************Content***********/ .content { background: #fff;} .content-last { position: relative; padding-bottom: 66px;} .content-last:after { position: absolute; content: ""; left: 10px; right: 10px; bottom: 0; border-bottom: 1px solid #e9e5df; height: 1px; } .box-1 { margin-top: 57px; text-align: center;} .block-2 > div { margin-top: 27px;} .block-4 > div + div { margin-top: 38px;} .gallery { margin-top: -15px;} .gallery > div { margin-top: 20px;} .gallery + .btn-2 { margin-top: 28px;} .box-4 + .box-4 { margin-top: 32px;} .gallery-1 { margin-top: -26px;} .gallery-1 .box-5 {} .gallery-1 .box-5 .inside { border: 1px solid #e9e5df; border-top: 0px; padding: 0 20px 35px;} .box-5 { margin-top: 30px;} .block-5 { margin-top: -47px; padding-bottom: 56px;} .block-5 > div { margin-top: 47px;} blockquote .inside { margin-top: -3px;} blockquote .inside .quote, blockquote .inside .quote-1 { width: 28px; height: 17px; display: inline-block; } blockquote .inside .quote { background: url(../images/quote-1.png) 0 bottom no-repeat;} blockquote .inside .quote-1 { background: url(../images/quote-2.png) right bottom no-repeat;} /************Footer************/ footer { font-size: 24px; line-height: 24px; font-family: 'Stint Ultra Condensed', cursive; color: #c1baa2; text-transform: uppercase; padding-bottom: 40px; background: #fff; z-index: 9; } .list-services { margin-top: 31px; position: relative; margin-right: auto; margin-left: 11px;} .list-services li { display: inline-block; float: left; } [class*="list-services-"] { text-decoration: none; display: block; height: 34px; width: 34px; background: url(social_icons.png) no-repeat; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; margin-left: 11px; -webkit-border-radius: 500px; -moz-border-radius: 500px; -ms-border-radius: 500px; -o-border-radius: 500px; border-radius: 500px; } .list-services-1 { background-position: 0px 0px;} .list-services-2 { background-position: -45px 0px;} .list-services-3 { background-position: -90px 0px;} .list-services-4 { background-position: -136px 0px;} .list-services li a:hover { opacity: .6;} .box-2 { position: relative; margin-top: 31px; background: url(mark-1.png) 0 4px no-repeat; margin-left: 23px; padding-left: 29px; } .box-2 span { } .box-3 { position: relative; margin-top: 76px; background: url(mark-2.png) 0 4px no-repeat; margin-left: 0px; padding-left: 29px; color: #aca383; font-size: 22px; line-height: 26px; padding-bottom: 44px; } footer .bord-1 { padding-bottom: 60px;} .block-3 { padding-top: 48px; text-align: center; font-size: 20px; color: #866d44;} .block-3 .dot { color: #f57b45; font-size: 27px;} .top { margin-top: 37px; display: inline-block; width: 45px; height: 45px; background: #000; background: url(toTop.png) 0 0 no-repeat;} .top:hover { background-position: 0 bottom;} /*toTop*/ #toTop { display:none; text-decoration:none; position:fixed; cursor:pointer; overflow:hidden; width: 24px; height: 24px; border:none; text-indent:-999px; z-index:20; background: url(ui.totop.png) 0 0 no-repeat; margin-right: -670px !important; right: 50%; bottom: 20px; } #toTop:hover { background: url(../images/ui.totop.png) right 0 no-repeat;} #toTop:active, #toTop:focus {outline:none;} /*touch-touch*/ .magnifier { position:relative; display:block; background: url(magnifier.png) center center no-repeat #000000; } .magnifier img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; width: 100%; -webkit-box-shadow: 0px 0px 0px 0px #fff; -moz-box-shadow: 0px 0px 0px 0px #fff; box-shadow: 0px 0px 0px 0px #fff; } .magnifier:hover img { opacity: 0.4; } /*==================================RESPONSIVE LAYOUTS===============================================*/ @media only screen and (max-width: 1230px) { header { background-size: 100% auto;} .list_carousel { margin-top: 60px;} } @media only screen and (max-width: 995px) { .wrapper-1 { width: 100%;} .list_carousel li { font-size: 50px; line-height: 59px;} .bg-2 { background-size: auto 100%;} .block-2 img { width: 100%;} .title-2 { font-size: 60px; line-height: 60px;} .w1 { width: 45%; margin-bottom: 15px;} .list-services { margin-left: 0;} [class*="list-services-"] { margin-left: 8px;} .list_carousel { padding: 0 100px;} .list_carousel { margin-bottom: 50px;} } @media only screen and (max-width: 767px) { .list_carousel li { font-size: 30px; line-height: 30px;} .list_carousel { padding: 0px 70px 0;} .w2 { width: 46% !important; margin-left: 2%; margin-right: 2%;} .block-2 { text-align: center;padding-bottom: 20px;} .block-2 .title-2 { padding-top: 20px;} .bord-2:after { display: none;} .bord-2 { margin-top: 10px;} .box-3 { margin-top: 33px;} .gallery > div { width: 29% !important; padding-right: 2%; padding-left: 2%;} .grid_inside { margin: 0;} blockquote { margin-bottom: 20px;} footer .bord-1 { padding-bottom: 30px;} .box-2 { margin-left: 9px;} .box-3 { margin-left: 9px;} header { background-size: auto auto;} h1 img { width: 50%;} } @media only screen and (max-width: 479px) { .list_carousel li { font-size: 25px; line-height: 31px;} .block-2 .w2 { width: 46% !important; margin-left: 2%; margin-right: 2%;} .gallery > div { width: 29% !important; padding-right: 2%; padding-left: 2%;} h1 img { width: 70%;} } @media only screen and (max-width: 320px) { } .page-header { margin-top:30px; margin-bottom:0; }