/* font-family: 'Open Sans Condensed', sans-serif; font-family: 'Open Sans', sans-serif; (300)*/ /* Color chart: ulight : #f6cfad; Light : #d3b295; Logo : #b57f4e; Dark : #120d08; */ /* Initialisation */ * { padding:0; margin:0; border: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a, a:active, a:focus, input:focus, input, textarea:focus { outline: none; } :focus { outline: none; } ::-moz-focus-inner { border: 0; } ::-ms-clear { display: none; } table { border-collapse: collapse; } a { text-decoration: none; transition: color 200ms; -moz-transition: color 200ms; -webkit-transition: color 200ms; -o-transition: color 200ms; } ul { list-style-type: none; } h1,h2,h3,h4,h5,h6,b { font-weight: normal; } strong { font-weight: bold; } sup, sub { vertical-align: 0; position: relative; } sup { bottom: 1ex; } input { outline: none; -webkit-appearance: none; -moz-appearance: none; } textarea { outline: none; -webkit-appearance: none; -moz-appearance: none; } ::selection { background: rgba(0, 0, 0, 0.6); color: #b57f4e; } ::-moz-selection { background: rgba(0, 0, 0, 0.6); color: #b57f4e; } /** SHORTKEYS **/ .clearfloat { clear: both; } .fright { float: right; } .fleft { float: left; } .xmargin { margin: 0 0 40px 0; } /*** FRAMESET ***/ html { min-height: 100%; width: 100%; overflow-y: scroll; } body { background: #120d08; min-height: 100%; width: 100%; font: 300 14px/18px 'Open Sans Condensed', Arial, sans-serif; color: #000; } .container { position: relative; width: 100%; overflow: hidden; } .wrapper { position: relative; width: 1200px; margin: 0 auto; padding: 0 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } /*** HEADER ***/ header { position: relative; height: 500px; text-transform: uppercase; transition: height 300ms; -webkit-transition: height 300ms; -moz-transition: height 300ms; -o-transition: height 300ms; } nav { position: absolute; left: 0; top: 30px; width: 100%; height: 68px; padding: 6px 0; border-bottom: solid 2px #d3b295; background: rgba(18,13,8,0.75); z-index: 201; } nav #logo { display: block; width: 240px; max-width: 75%; font-size: 15px; color: #b57f4e; letter-spacing: 3px; text-shadow: 1px 1px 1px #120d08; } nav #logo img { width: 100%; } #mainNav { float: right; padding: 28px 0 22px 0; } #mainNav li { display: inline-block; font-size: 18px; border-right: solid 1px #b57f4e; } #mainNav li.last { border-right: none; } #mainNav li.last span, #mainNav li.last a { padding-right: 0; } #mainNav li a { padding: 0 15px; color: #ccc; } #mainNav li a:hover { color: #b57f4e; } #mainNav li a.active { color: #d3b295 !important; cursor: default; } #mainNav li.lang { display: none; } #mainNav li.photos { display: none; } #topNav { position: absolute; right: 10px; top: 7px; z-index: 201; } #topNav li { float: left; margin: 0 0 0 20px; font-size: 15px; } #topNav li:first-child { margin-left: 0; } #topNav li a { color: #ddd; text-shadow: 1px 1px #000; } #topNav li a:hover { color: #b57f4e; } #navToggle { position: absolute; right: -200px; top: 0; width: 28px; height: 24px; padding: 22px 22px; text-align: center; opacity: 0; transition: right 150ms, opacity 150ms; -webkit-transition: right 150ms, opacity 150ms; -moz-transition: right 150ms, opacity 150ms; -o-transition: right 150ms, opacity 150ms; } #navToggle div { display: block; width: 28px; height: 2px; margin: 6px 0; background: #b57f4e; transition: all 350ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition: all 350ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all 350ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition: all 350ms cubic-bezier(0.68, -0.55, 0.265, 1.55); } .nav-open #bar1 { transform: rotate(-45deg) translateY(-2px); -webkit-transform: rotate(-45deg) translateY(-2px); -moz-transform: rotate(-45deg) translateY(-2px); -o-transform: rotate(-45deg) translateY(-2px); transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; } .nav-open #bar2 { opacity: 0; filter: alpha(opacity=0); } .nav-open #bar3 { transform: rotate(45deg) translateY(3px); -webkit-transform: rotate(45deg) translateY(3px); -moz-transform: rotate(45deg) translateY(3px); -o-transform: rotate(45deg) translateY(3px); transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; } header h1 { font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 60px; line-height: 55px; transition: top 300ms; -webkit-transition: top 300ms; -moz-transition: top 300ms; -o-transition: top 300ms; } header h1.dark { color: #120d08; text-shadow: 1px 1px 1px #d3b295; } header h1.mid { color: #f6cfad; text-shadow: 0 0 4px #120d08; } header h1.light { color: #f6cfad; text-shadow: 1px 1px 1px #120d08; } /*** FOOTER ***/ footer { background: rgba(18,13,8,0.85); border-top: solid 1px #835f3b; height: 68px; text-align: center; line-height: 68px; text-transform: uppercase; color: #835f3b; } footer span { padding: 0 15px; } footer a { color: #835f3b; } footer a:hover { color: #b57f4e; } footer br { display: none; } #nafa { float: right; margin: 0 20px 0 0; opacity: 0.3; } #nafa img { vertical-align: middle; } /*** SECTION ***/ section { text-align: left; background: rgba(18,13,8,0.75); border-top: solid 2px #d3b295; color: #d3b295; text-align: justify; } section .wrapper { padding: 50px 0 30px 0; font-size: 20px; line-height: 24px; } section h2 { text-align: left; text-transform: uppercase; font-size: 30px; margin: 0 0 20px 0; color: #f6cfad; } section h3 { text-align: left; text-transform: uppercase; font-size: 20px; margin: 0 0 10px 0; color: #f6cfad; } section h4 { font: 300 20px/35px 'Open Sans Condensed', Arial, sans-serif; } section p { margin: 0 0 20px 0; } section a { color: #f6cfad; } section a:hover { color: #b57f4e; } /*** PAGE DEFINITION ***/ /*** HOME ***/ #home header { height: 660px; transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms; } #home header h1 { font-family: 'Open Sans', sans-serif; font-size: 50px; line-height: 45px; } #home section { background: none; min-height: 0 !important; } #home section .wrapper { z-index: 200; background: none; padding: 0; } #home section .ctc { margin-top: -120px; } .cycle-slideshow { width: 100%; height: 100%; } .cycle-slideshow div.slide { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center top; background-attachment: fixed; } #slide1 { background-image: url('../images/header/c1.jpg'); background-position: 40% top; } #slide2 { background-image: url('../images/header/c2.jpg'); } #slide3 { background-image: url('../images/header/c3.jpg'); background-position: 30% top; } #slide4 { background-image: url('../images/header/c4.jpg'); } #slide1 h1 { margin-top: 380px; text-align: left; } #slide2 h1 { margin-top: 425px; text-align: left; } /* #slide3 h1 { margin-top: 150px; text-align: right; } #slide4 h1 { margin-top: 350px; text-align: left; } */ #cPager { position: absolute; left: 0; top: 50%; z-index: 202; transition: opacity 200ms; -webkit-transition: opacity 200ms; -moz-transition: opacity 200ms; -o-transition: opacity 200ms; } #cPager li { display: block; width: 23px; height: 25px; margin: 0 0 4px 0; } #cPager li a { display: block; width: 3px; height: 100%; padding: 0 10px; } #cPager li a span { display: block; width: 100%; height: 100%; background: #120d08; opacity: 0.60; transition: opacity 200ms; -webkit-transition: opacity 200ms; -moz-transition: opacity 200ms; -o-transition: opacity 200ms; } #cPager a:hover span { opacity: 0.9; } #cPager .cycle-pager-active a { cursor: default !important; } #cPager .cycle-pager-active a span { background: #b57f4e; opacity: 1 !important; } #photosbtn { position: absolute; top: 100px; right: 10px; width: 150px; height: 150px; background: url('../images/photos.png') no-repeat 0 0; background-size: cover; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; text-align: center; padding: 65px 0 0 0; color: #f6cfad; text-transform: uppercase; font-size: 18px; line-height: 25px; opacity: 0.8; transition: all 200ms; } #photosbtn:hover { opacity: 1; } .itemList { cursor: pointer; } .flag { z-index: 200; margin: 0 0 20px 0; font-weight: bold; position: relative; height: 50px; width: 712px; padding-right: 30px; font: 300 24px/50px 'Open Sans Condensed', Arial, sans-serif; color: #bbb; text-transform: uppercase; text-align: right; background: rgba(18,13,8,0.7); -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; transition: width 300ms; -webkit-transition: width 300ms; -moz-transition: width 300ms; -o-transition: width 300ms; } .item { position: relative; float: left; display: block; width: 380px; height: 220px; margin: 0 10px 10px 10px; line-height: 0; text-align: center; background: #22170e; overflow: hidden; -webkit-box-shadow: 0 0 5px 0 rgba(65, 28, 10, 0.7); -moz-box-shadow: 0 0 5px 0 rgba(65, 28, 10, 0.7); box-shadow: 0 0 5px 0 rgba(65, 28, 10, 0.7); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .item span { position: absolute; left: 0; top: 0; width: 100%; height: 185px; background: #120d08; opacity: 0.2; } .item:hover span { opacity: 0; } .item h4 { position: absolute; left: 0; bottom: 0; width: 100%; background: #22170e; } #allfursbtn { display: block; height: 35px; line-height: 35px; text-transform: uppercase; margin: 0 10px 20px 10px; text-align: center; background: #22170e; overflow: hidden; -webkit-box-shadow: 0 0 5px 0 rgba(65, 28, 10, 0.7); -moz-box-shadow: 0 0 5px 0 rgba(65, 28, 10, 0.7); box-shadow: 0 0 5px 0 rgba(65, 28, 10, 0.7); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #f6cfad; transition: all 200ms; } #allfursbtn:hover { color: #f6cfad; background: #835f3b; } #shortdesc { text-align: center; margin: 40px 0 60px 0; transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms; } #shortdesc p { font-size: 22px; line-height: 25px; display: block; padding: 0 20px; max-width: 610px; margin-left: auto; margin-right: auto; } /*** PHOTOS ***/ #photos { background: #120d08 url('../images/background/background1.jpg') no-repeat center top; background-attachment: fixed; background-size: cover; } .mobile #photos { background: #120d08 url('../images/background/backgroundm.jpg') no-repeat center top; background-size: auto; } #photos header h1 { position: absolute; left:0; top: 240px; } .galleryList li { float: left; margin: 5px; line-height: 0; } .galleryList li a { position: relative; display: block; } .galleryList li a .mask { position: absolute; top:0; left:0; width:100%; height:100%; z-index: 0; background: #000; opacity: 0.2; transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms; } .galleryList li a:hover .mask { opacity: 0; } .galleryList li img { width: 140px; } /*** FURS ***/ #furs { background: #120d08 url('../images/background/background4.jpg') no-repeat center top; background-attachment: fixed; background-size: cover; } #furs header h1 { position: absolute; left:0; top: 210px; } #furs section { padding: 40px 0 0 0; } #furs section .wrapper { padding: 20px 0; } #furs .fitemWrapper { position: relative; width: 48%; margin: 0 0 30px 0; } #furs .fitem { position: relative; width: 100%; border: solid 5px rgba(181,127,78,0.10); margin: 0 0 10px 0; cursor: pointer; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #furs .fitem img { width: 100%; height: auto; } #furs .ileft { float: left; margin-right: 4%; } #furs .iright { float: right; } #furs .cycle-slideshow { width: 100%; height: 100%; } #furs .fitem .slide { font-size:0; line-height:0; } #furs .fitem .mask { position: absolute; top:0; left:0; z-index: 499; width: 100%; height: 100%; background: #120d08; opacity: 0.3; transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms; } #furs .fitem .tile { position: absolute; z-index: 500; width: 100%; padding: 10px 0; background: rgba(18,13,8,0.8); height: 44px; left:0; bottom: 0; overflow: hidden; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; transition: height 200ms cubic-bezier(.06,1,.22,.96) 100ms; -webkit-transition: height 200ms cubic-bezier(.06,1,.22,.96) 100ms; -moz-transition: height 200ms cubic-bezier(.06,1,.22,.96) 100ms; -o-transition: height 200ms cubic-bezier(.06,1,.22,.96) 100ms; } #furs .fitem:hover .mask { opacity: 0; } #furs .fitem:hover .tile { height: 90px; } .mobile #furs .fitem .mask { opacity: 0.1 !important; } .mobile #furs .fitem .tile { height: 90px !important; } #furs .fitem .tile > h2 { margin: 0 20px 20px 20px; } #furs .fitem .tile > p { margin: 0 20px 20px 20px; text-transform: none; } .cpager { position: absolute; left: 5px; bottom: -20px z-index: 202; transition: opacity 200ms; -webkit-transition: opacity 200ms; -moz-transition: opacity 200ms; -o-transition: opacity 200ms; } .cpager li { float: left; display: block; width: 25px; height: 25px; margin: 0 8px 0 0; } .cpager li a { position: relative; display: block; width: 100%; height: 100%; padding: 0; } .cpager li a span { position: absolute; left:0; top: 5px; display: block; width: 100%; height: 3px; background: #b57f4e; opacity: 0.6; transition: opacity 200ms; -webkit-transition: opacity 200ms; -moz-transition: opacity 200ms; -o-transition: opacity 200ms; } .cpager a:hover span { opacity: 1; } .cpager .cycle-pager-active a { cursor: default !important; } .cpager .cycle-pager-active a span { background: #d3b295; opacity: 1 !important; } /*** SERVICES ***/ #services { background: #120d08 url('../images/background/background3.jpg') no-repeat 60% top; background-attachment: fixed; background-size: cover; } #services header h1 { position: absolute; left: 0; top: 210px; } #services section img { position: absolute; left: 0; top: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: solid 5px rgba(181,127,78,0.10); } #services .sBloc { position: relative; min-height: 110px; margin: 0 0 40px 0; padding-left: 130px; } #services .sBloc p { margin: 0; } #services section ul { list-style-type: disc; margin: 0 0 0 30px; font-size: 22px; } #services section ul li { margin: 0 0 10px 0; } /*** ABOUT US ***/ #about { background: #120d08 url('../images/background/background2.jpg') no-repeat center top; background-attachment: fixed; background-size: cover; } #about header h1 { position: absolute; left:0; top: 250px; } #about section img { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: solid 5px rgba(181,127,78,0.10); } #about #ctc { margin-right: 500px; } #about img.bro { position: absolute; top:50px; right:20px; } /*** CONTACT US ***/ #contact { background: #120d08 url('../images/background/background5.jpg') no-repeat center top; background-attachment: fixed; background-size: cover; } #contact header h1 { position: absolute; left:0; top: 210px; } #map { border-top: solid 2px #835f3b; height: 330px; background: #120d08; } #contact .col { float: left; width: 600px; } #contact .colb { text-align: right; padding-top: 44px; } #contact .colb h3 { text-align: right; } #contact #contactform { position: relative; } #contact form { font-family: 'Open Sans', sans-serif; font-size: 16px; } #contact .textinput { height: 35px; width: 300px; max-width: 100%; line-height: 35px; padding: 0 10px; background: none; background: rgba(211,178,149,0.1); font-family: 'Open Sans', sans-serif; color: #d3b295; font-size: 16px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } #contact textarea { height: 200px; width: 100%; line-height: 20px; padding: 10px; background: none; background: rgba(211,178,149,0.1); overflow: auto; resize: none; font-family: 'Open Sans', sans-serif; font-size: 16px; color: #d3b295; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } #contact .invalid { background: rgba(211,178,149,0.3); } #contact .btn { position: relative; } #contact .btn a { display: inline-block; height: 35px; line-height: 35px; width: 150xp; padding: 0 20px; background: rgba(211,178,149,0.1); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #contact .btn:hover { color: #b57f4e; } #contactform .rep { display: none; } #spinner { position: absolute; left: 120px; top: 0; opacity: 0.5; display: none; } #contactformbtn { visibility: hidden; } /*** FANCYBOX ***/ .fancybox-close { opacity: 0.8; transition: all 200ms; -webkit-transition: all 200ms; -moz-transition: all 200ms; -o-transition: all 200ms; } .fancybox-close:hover { opacity: 1; } .fancybox-nav span { opacity: 0; filter: alpha(opacity=0); transition: all 200ms; -webkit-transition: all 200ms; -moz-transition: all 200ms; -o-transition: all 200ms; } .fancybox-prev span { margin-left: 5px; } .fancybox-next span { margin-right: 5px; } .fancybox-nav:hover span { opacity: 1; filter: alpha(opacity=100); margin: -50px 0 0 0; } .mobile .fancybox-prev span { margin-left: 0 !important; } .mobile .fancybox-next span { margin-right: 0 !important; } .mobile .fancybox-nav span { opacity: 1 !important; }