/* Global Styles */ #main-slider { position: relative; } #main-slider .carousel h2 { font-size: 30px; } #main-slider .carousel .btn { border: 3px solid rgba(255, 255, 255, 0.5); color: #fff; border-radius: 0; margin-top: 5px; } #main-slider .carousel .btn:hover { background-color: rgba(255, 255, 255, 0.3); } #main-slider .carousel .boxed { padding: 10px 15px; background-color: rgba(0, 0, 0, 0.8); display: inline-block; } #main-slider .carousel .item { background-position: 50%; background-repeat: no-repeat; background-size: cover; left: 0 !important; opacity: 0; top: 0; position: absolute; width: 100%; display: block !important; height: 600px; -webkit-transition: opacity ease-in-out 500ms; -moz-transition: opacity ease-in-out 500ms; -o-transition: opacity ease-in-out 500ms; transition: opacity ease-in-out 500ms; } #main-slider .carousel .item:first-child { top: auto; position: relative; } #main-slider .carousel .item.active { opacity: 1; -webkit-transition: opacity ease-in-out 500ms; -moz-transition: opacity ease-in-out 500ms; -o-transition: opacity ease-in-out 500ms; transition: opacity ease-in-out 500ms; z-index: 1; } #main-slider .prev, #main-slider .next { position: absolute; top: 50%; color: #fff; display: inline-block; margin-top: -25px; font-size: 24px; height: 50px; width: 50px; line-height: 50px; text-align: center; border-radius: 4px; z-index: 5; } #main-slider .prev:hover, #main-slider .next:hover { background-color: rgba(0, 0, 0, 0.5); border-radius: 10px; } #main-slider .prev { left: 10px; } #main-slider .next { right: 10px; } #main-slider .active .animation.animated-item-1 { -webkit-animation: fadeInUp 300ms linear 300ms both; -moz-animation: fadeInUp 300ms linear 300ms both; -o-animation: fadeInUp 300ms linear 300ms both; -ms-animation: fadeInUp 300ms linear 300ms both; animation: fadeInUp 300ms linear 300ms both; } #main-slider .active .animation.animated-item-2 { -webkit-animation: fadeInUp 300ms linear 600ms both; -moz-animation: fadeInUp 300ms linear 600ms both; -o-animation: fadeInUp 300ms linear 600ms both; -ms-animation: fadeInUp 300ms linear 600ms both; animation: fadeInUp 300ms linear 600ms both; } #main-slider .active .animation.animated-item-3 { -webkit-animation: fadeInUp 300ms linear 900ms both; -moz-animation: fadeInUp 300ms linear 900ms both; -o-animation: fadeInUp 300ms linear 900ms both; -ms-animation: fadeInUp 300ms linear 900ms both; animation: fadeInUp 300ms linear 900ms both; } #main-slider .active .animation.animated-item-4 { -webkit-animation: fadeInUp 300ms linear 1200ms both; -moz-animation: fadeInUp 300ms linear 1200ms both; -o-animation: fadeInUp 300ms linear 1200ms both; -ms-animation: fadeInUp 300ms linear 1200ms both; animation: fadeInUp 300ms linear 1200ms both; } html, body { height: 100%; width: 100%; font-family: "Helvetica Neue" Helvetica,Arial,sans-serif; font-color: #FFFFFF; } p.ex2 { font: 16px; Helvetica,Arial,sans-serif; } .a { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-color: #FFFFFF; } a.icon { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-color: #C0C0C0; } a.lienfooter { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; color:#FFFFFF; font-weight: normal; text-decoration: underline; text-transform: none; } a.lienfooter:hover { color:#FFFFFF; text-decoration: none; font-weight:normal; } .pull-right { float: right; } .vert-text { display: table-cell; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; vertical-align: middle; text-align: center; } .vert-text h1 { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; padding: 0; margin: 0; font-size: 4.5em; font-weight: 700; } /* Side Menu */ #sidebar-wrapper { margin-right: -250px; right: 0; width: 250px; background: #000; position: fixed; height: 100%; overflow-y: auto; z-index: 1000; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .sidebar-nav { position: absolute; top: 0; width: 250px; list-style: none; margin: 0; padding: 0; } .sidebar-nav li { line-height: 40px; text-indent: 20px; } .sidebar-nav li a { color: #999999; display: block; text-decoration: none; } .sidebar-nav li a:hover { color: #db0075; background: rgba(255,255,255,0.2); text-decoration: none; } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 55px; line-height: 55px; font-size: 18px; } .sidebar-nav > .sidebar-brand a { color: #999999; } .sidebar-nav > .sidebar-brand a:hover { color: #db0075; background: none; } #menu-toggle { top: 0; right: 0; position: fixed; z-index: 1; } #sidebar-wrapper.active { right: 250px; width: 250px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .toggle { margin: 5px 5px 0 0; } /* Full Page Image Header Area */ .header { display: table; height: 100%; width: 100%; position: relative; background: url(http://www.bresttechplus.fr/img/pontplougastelheader2.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* Intro */ .intro { padding: 50px 0; } /* Services */ .services { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; background: #db0075; padding: 50px 0; color: #ffffff; } .service-item { margin-bottom: 15px; } i.service-icon { border: 3px solid #ffffff; border-radius: 50%; display: inline-block; font-size: 56px; width: 140px; height: 140px; line-height: 136px; vertical-align: middle; text-align: center; } /* Callout */ .callout { color: #ffffff; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; display: table; height: 400px; width: 100%; background: url(http://www.bresttechplus.fr/img/callout.jpg) no-repeat center center fixed; opacity: 0.5; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .introduction { color: #ffffff; } /* Portfolio */ .portfolio { padding: 50px 0; } .portfolio-item { margin-bottom: 25px; } .img-portfolio { margin: 0 auto; } /* Call to Action */ .call-to-action { color: #ffffff; background: #0a5175; padding: 50px 0; } .call-to-action .btn { margin: 10px; } /* Map */ .map { height: 500px; } /* Footer */ footer { padding: 100px 0; } .top-scroll { margin-top: 50px; } .top-scroll a { text-decoration: none; color: inherit; } i.scroll { color: #333333; } i.scroll:hover { color: #0a5175; } /* Responsive */ @media (max-width: 992px) { #navbar-newsletter, #navbar-icons{ display: none; } .twitter{ float: none; margin: 0 auto 20px auto; width: 520px; } .tumblr{ width: auto; float: none; margin : 0 auto; } } @media (max-width: 768px) { .header { background: url(http://www.bresttechplus.fr/img/pontplougastelheader2.jpg) no-repeat center center scroll; } .callout { background: url(http://www.bresttechplus.fr/img/callout.jpg) no-repeat center center scroll; } .map { height: 75%; } .twitter{ float: none; margin: 0 auto 20px auto; width: 100%; } .tumblr{ width: 100%; float: none; margin : 0 auto; } }