body{ font-family: poppins; } /*slide+navbar*/ header .carousel-inner .item{ height: 100vh; } .navbar-inverse{ background-color: transparent; border-color: transparent; } .navbar-inverse .navbar-brand{ color: #edbb00; font-size: 30px; font-weight: bold; padding: 40px 15px; } .nav.navbar-nav.navbar-right{ margin: 25px 0; } .navbar-inverse .navbar-nav > li > a{ color: #fff; text-transform: uppercase; } .banner{ background-size: cover; background-position: center center; background-repeat: no-repeat; height: 100vh; } .carousel-caption{ padding-bottom: 250px; font-family: poppins; } .carousel-caption h2{ font-size: 70px; text-transform: uppercase; font-weight: bold; } .carousel-caption h2 span{ color: #edbb00; } .carousel-caption a{ background: #edbb00; padding: 15px 35px; display: inline-block; margin-top: 15px; color: #fff; text-transform: uppercase; border-radius: 25px; text-decoration: none; } .carousel-control.right{ background-image: none; } .carousel-control.left{ background-image: none; } .carousel-indicators .active{ background-color: #edbb00; border-color: #edbb00; } .navbar-fixed-top.scrolled { background-color: #111111 !important; transition: background-color 200ms linear; } .navbar-fixed-top.scrolled .navbar-collapse{ background-color: #111111 !important; transition: background-color 200ms linear; } .navbar-toggle { /* (80px - button height 34px) / 2 = 23px */ margin-top: 25px; padding: 9px 10px !important; } /*responsive slider css*/ @media only screen and (min-width:768px) and (max-width: 991px){ .carousel-caption{ padding-bottom: 260px; } .carousel-caption h2{ font-size: 50px;; } } @media only screen and (max-width: 767px){ .navbar-collapse{ background: rgba(0,0,0,0.5); } .carousel-caption{ padding-bottom: 220px; } .carousel-caption h2{ font-size: 25px; } .carousel-caption h3{ font-size: 18px; } .carousel-caption a{ padding: 10px 25px; } } /*footer css*/ footer p{ color:#999; line-height: 25px; font-size: 15px; } footer h2, h3{ color: #fff; } footer h2{ font-size: 18px; } .footer-top{ background:#111; padding: 80px 0 ; } .segment-one h3{ font-family: Courgette; color: #fff; letter-spacing: 1px; } .segment-two h2{ font-family: Poppins; color: #fff; text-transform: uppercase; } .segment-two h2:before{ content: '|'; color: #c65039; padding-right: 10px; } .segment-two ul{ margin: 0; padding: 0; list-style: none; } .segment-two ul li{ border-bottom: 1px solid rgba(255,255,255,0.3); line-height: 40px; } .segment-two ul li a{ color: #999; text-decoration: none; } .segment-three h2{ color: #fff; font-family: Poppins; text-transform: uppercase; } .segment-three h2:before{ content: '|'; color: #c65039; padding-right: 10px; } .segment-three a{ background: #494848; width: 40px; height: 40px; display: inline-block; border-radius: 50%; } .segment-three a i{ font-size: 20px; color: #fff; padding: 10px 12px; } .footer-bottom-text{ text-align: center; background: #000; line-height: 50px; margin-bottom: -15px; } hr.sep-3 { border: none; height: 1px; width: 30%; background-image: linear-gradient(to right, #f0f0f0, #8f8f8f, #f0f0f0); } hr.sep-3::after { content: '§'; display: inline-block; position: absolute; left: 50%; transform: translate(-50%, -50%) rotate(60deg); transform-origin: 50% 50%; padding: 1rem; background-color: white; } .thumbnail{ transition: .5s; } .thumbnail:hover{ box-shadow: 0 0 6px #edbb00; transition: .5s; } .thumbnail img{ width: 500px; height: 300px; padding-top: 20px; } .thumbnail .image{ width: 225px; height: 200px; } .jumbotron{ background:linear-gradient( rgba(0, 0, 250, 0.25), rgba(125, 250, 250, 0.45)),url(images/accesoriessport.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; color:white !important; height:400px; } .page-scroll{ height:1000px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .md-mb-30{ margin-bottom: 20px; } .jumbotron .container{ margin-top: -50px; } } @media only screen and (max-width: 767px){ .sm-mb-30{ margin-bottom: 20px; } .footer-top{ padding: 80px 0; } .labelh2{ font-size: 25px; } hr.sep-3{ width: 50%; } .thumbnail img{ padding-left: 20px; padding-right: 20px; } .labelh1{ font-size: 32px; } .jumbotron .container p{ font-size: 17px; } .thumbnail .image{ width: 500px; height: 250px; } .jumbotron .container{ padding: 30px; } }