/* ----------------------------------------- */ /* Content Template: Content Template for Nav Bar - start */ /* ----------------------------------------- */ body { margin:0px; } .navbar-toggle { border: none; } .gmb-navbar { background-color: #659ad2; color: white; border-radius: 0px; border: none; font-family: 'Sahitya', serif; background: #659ad2; background: -moz-linear-gradient(top, #659ad2 0%, #6fb1f6 50%, #67a3e1 51%, #86c1ff 100%); background: -webkit-linear-gradient(top, #659ad2 0%,#6fb1f6 50%,#67a3e1 51%,#86c1ff 100%); background: linear-gradient(to bottom, #659ad2 0%,#6fb1f6 50%,#67a3e1 51%,#86c1ff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#659ad2', endColorstr='#86c1ff',GradientType=0 ); border-bottom: 4px solid #cd992b; } .brand--text { font-size: 25px; position: relative; top: 6px; text-transform: uppercase; } .header-logo { padding:5px; margin-left: 4px; color:white; height:50px; } .navbar-header a { color: white; text-decoration: none; } .navbar-default .navbar-nav>li>a { color: #fff; font-family: 'Sahitya', serif; text-decoration: none; font-weight: 700; font-size: 32px; margin-right: 60px; transition-duration: 200ms; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #31577f; background-color: transparent; transition-duration: 200ms; } .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color: #e8e8e8; } .navbar-default .navbar-brand { color: #fff; } .navbar-default .navbar-toggle .icon-bar { background-color: #ffffff; } .content-wrapper { font-family: 'Sahitya', serif; font-weight: 400 } .content-wrapper h1 { font-weight: 700; font-size: 46px; margin: 20px 0px; line-height: 44px; } @media (max-width:1279px) { .navbar-default .navbar-nav>li>a { font-size: 24px; margin-right: 35px; } } @media (max-width:1023px) { .navbar-default .navbar-nav>li>a { font-size: 16px; margin-right: 2px; } } @media (min-width:768px) { .content-wrapper { padding-top: 100px; } .header-logo { height: 80px; padding:10px; } .brand--text { font-size: 40px; top: 10px; } .navbar { min-height: 80px; } ul.nav.navbar-nav.navbar-right { font-size: 20px; position: relative; top: 15px; } } @media (max-width:767px) { .navbar-nav { margin: 1px -15px; } .gmb-navbar { background: #659ad2; } .content-wrapper { padding-top: 60px; } .navbar-default .navbar-nav>li>a { font-size: 27px; margin-right: 0px; border-top: 2px solid #5d8cbd; } } /* ----------------------------------------- */ /* Content Template: Content Template for Nav Bar - end */ /* ----------------------------------------- */ /* ----------------------------------------- */ /* Content Template: Loop item in Horses View - start */ /* ----------------------------------------- */ .all-horses-wrapper { display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; margin-top: 100px; } .horse-wrapper { width: 100%; max-width: 450px; margin-bottom:20px; box-shadow: 0 0 17px -5px black; font-family: 'Roboto Condensed', sans-serif; } .horse-img { position:relative; } .horse-img img { width:100%; display: block; } .horse-name { position:absolute; top:5px; left:0; padding:5px 20px 5px 5px; font-size: 35px; font-weight: 700; min-width: 50%; background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 77%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,1) 77%,rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,1) 77%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); } .horse-earnings { position:absolute; bottom:5px; left:0; padding:5px 0px 5px 0px; font-size:24px; display:flex; background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 77%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,1) 77%,rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,1) 77%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); } .earnings-title { width: 42%; font-weight: 400; line-height: 21px; font-size: 21px; margin:0px 10px; text-transform: uppercase; display: flex; justify-content: center; align-items: center; } .earnings-amount { font-size: 45px; font-weight: 700; line-height: 50px; } .horse-info-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; padding: 10px; } .horse-info { width: 47%; margin-bottom:20px; } .horse-info--category { font-weight: 700; font-family: 'Roboto'; text-transform: uppercase; border-bottom: 2px solid black; color: #4895c6; margin-bottom: 2px; } .horse-race-history-wrapper { padding:10px; } .section-title { font-weight: 700; font-family: 'Roboto'; text-transform: uppercase; border-bottom: 2px solid black; margin-bottom: 2px; text-align: center; } .single-race-wrapper { display: flex; justify-content: flex-start; align-items: center; border-bottom: 2px solid black; padding-bottom: 2px; } .single-race-wrapper:last-of-type { border-bottom: none; } .race-finish { font-family: 'Roboto Condensed', sans-serif; font-size: 45px; text-transform: uppercase; color: #acacac; } .race-info-wrapper { margin-left: 15px; } .race-name { font-size: 20px; text-transform: uppercase; } span.race-date { font-weight: 700; } @media (max-width:767px) { .all-horses-wrapper { margin: 63px 10px; } } @media (max-width:440px) { .earnings-title { width: 40%; font-weight: 400; line-height: 17px; font-size: 17px; } .earnings-amount { font-size: 34px; font-weight: 700; line-height: 34px; } .race-name { font-size: 16px; } span.race-location { font-size: 12px; } span.race-date { font-size: 12px; } } @media (max-width:374px) { .horse-earnings { width: 100%; } .earnings-title { width: 44%; } .earnings-amount { font-size: 34px; font-weight: 700; line-height: 34px; } } /* ----------------------------------------- */ /* Content Template: Loop item in Horses View - end */ /* ----------------------------------------- */ /* ----------------------------------------- */ /* Content Template: Content Template for Footer - start */ /* ----------------------------------------- */ .footer-wrapper { background: #679fda; height: 59px; color: white; display: flex; justify-content: center; align-items: center; } .the-year { margin-left:2px; margin-right:6px } /* ----------------------------------------- */ /* Content Template: Content Template for Footer - end */ /* ----------------------------------------- */