/* +----------------------------------------------------------------------------------------------------
 * | /css/index.css
 * +----------------------------------------------------------------------------------------------------
 * | main css file for the site
 * +----------------------------------------------------------------------------------------------------
 * | Change Log:
 * | 20171108, Initial Creation by C. Luka
 * +----------------------------------------------------------------------------------------------------
 * | (c)2017 by Royal Bearing, All Rights Reserved
 * +--------------------------------------------------------------------------------------------------*/

html, body {
    ; background-color: rgb(66, 162, 211)
    ; font-family: "jaf-bernino-sans-condensed", helvetica, arial, sans-serif
    ; font-size: 20px
    ; height: 100%
    ; width: 100%
    ; 
}

.hide {
    ; display: none
}

.success {
    ; border: solid 1px #0c0
    ; border-radius: 10px
    ; padding: 10px
    ; margin-bottom: 10px
    ; background-color: #050
    ; color: white
    ; 
}

.warning {
    ; border: solid 1px #c00
    ; border-radius: 10px
    ; padding: 10px
    ; margin-bottom: 10px
    ; background-color: #500
    ; color: white
    ; 
}

div#content {
    ; align-content: center
    ; display: flex
    ; flex-direction: column
    ; justify-content: flex-start
    ; 
}

header.top {
    ; background-color: #e3e5e7
    ; height: 100px
    ; width: 100%
    ; 
}

.constrained-width {
    ; margin: 0px auto
    ; width: 960px
    ; 
}

#top-header {
    ; display: flex
    ; flex-direction: row
    ; justify-content: space-between
    ; padding-bottom: 10px
    ; 
}

#button-bar {
    ; background-color: #439dcd
    ; height: 36px
    ;
}

#top-header img {
    ; margin-top: 30px
    ; 
}

.light-blue {
    ; color: #439dcd
    ; font-weight: 700
    ; 
}

.flags {
    ; display: none
    ; 
}

.flags img {
    ; height: 28px
    ; padding: 3px
    ; 
}

.pointer {
    ; cursor: pointer
    ; 
}

.header-contact {
    ; display: flex
    ; flex-direction: column
    ; font-size: 16px
    ; justify-content: space-between
    ; padding-top: 10px
    ; text-align: right
    ; 
}

#international {
    ; 
}

#intl-wrapper {
    ; flex-grow: 0
    ; 
}

#buttons {
    ; color: white
    ; display: flex
    ; flex-direction: row
    ; font-weight: 700
    ; height: 36px
    ; text-align: center
    ; 
}

.header-button {
    ; border-right: 1px solid white
    ; height: 28px
    ; padding-top: 8px
    ; width: 160px
    ; 
}

.header-button:last-child{
    ; border: none
    ; 
}

#buttons a, #buttons a:active, #buttons a:hover, #buttons a:visited {
    ; color: white
    ; text-decoration: none
    ; 
}

#buttons .selected {
    ; background-color: #0d365a
    ; 
}

#page-content {
    ; background-color: black
    ; background-repeat: no-repeat
    ; background-position: top center
    ;
}

#page-content.homepage {
    ; height: 790px
    ; 
}

#page-content.about {
    ; height: 890px
    ; 
}

#page-content.products {
    ; height: 2155px
    ; 
}

#page-content.services {
    ; height: 800px
    ; 
}

#page-content.news {
    ; height: 800px
    ; 
}

#page-content.sparrow-point {
    ; height: 950px
    ; 
}

#page-content.freight {
    ; height: 800px
    ; 
}


#page-content.contact {
    ; height: 1280px
    ; 
}

#page-content.contact.count-1 {
    ; height: 1330px
    ; 
}

#page-content.contact.count-2 {
    ; height: 1380px
    ; 
}

#page-content.contact.count-3 {
    ; height: 1430px
    ; 
}

#page-content.contact.count-4 {
    ; height: 1480px
    ; 
}

#page-content.contact.count-5 {
    ; height: 1530px
    ; 
}

#page-content.contact.count-6 {
    ; height: 1580px
    ; 
}
#page-content.tnc {
    ; height: 5030px
    ; 
}

#page-content.buyback {
    ; height: 990px
    ; 
}

#page-content.bearing-accessories {
    ; height: 1520px
    ; 
}

#page-content.de, #page-content.es, #page-content.fr {
    ; height: 1895px
    ; 
}

#page-constrained {
    ; color: white
    ; display: flex
    ; flex-direction: column
    ; margin-top: 36px
    ; padding-top: 25px
    ; justify-content: flex-start
    ; 
}

#homepage-carousel {
    ; height:347px
    ; overflow: hidden
    ; position: relative
    ; width: 597px
}

.carousel-slide {
    ; left: 0px
    ; position: absolute
    ; top: 0px
    ; 
}

.carousel-button {
    ; cursor: pointer
    ; 
}

#homepage-carousel-buttons {
    ; padding-top: 10px
    ; text-align: center
    ; width: 597px
    ;
}

.home-content-grid-1 {
    ; display: flex
    ; flex-direction: row
    ; justify-content: flex-start
    ; 
}

.home-content-grid-1-column-2 {
    ; display: flex
    ; flex-direction: column
    ; justify-content: flex-start
    ; margin-left: 25px
    ;
}

.section-box {
    ; background-color: rgba(42,87,111,.7)
    ; border: solid 1px #ccc
    ; border-radius: 5px
    ; margin-top: 15px
    ; 
}

.section-box header {
    ; background-image: url(/media/section_header_bg.jpg);
    ; background-repeat: repeat-x
    ; border-top-left-radius: 5px
    ; border-top-right-radius: 5px
    ; color: #333
    ; font-weight: 700
    ; height: 40px
    ; padding-top: 10px
    ; text-align: center
    ; 
}

.box-list {
    ; margin-top: -5px
    ; padding: 10px
    ; width: 320px
}

.box-list div {
    ; border-bottom: solid 1px #ccc
    ; border-right: solid 1px #ccc
    ; display: inline-block
    ; font-size: 19px
    ; height: 25px
    ; margin: 0px
    ; padding-top: 10px
    ; padding-right: 5px
    ; width: 150px
    ; 
}

.box-list div.odd {
    ; border-bottom: solid 1px #ccc
    ; border-right: none
    ; padding-left: 10px
    ; padding-right: 0px
    ; margin-left: 0px
}

.box-list div.last {
    ; border-bottom: none
    ; 
}

#product-box {
    ; margin-top: 0px
    ; height: 180px
    ; width: 338px
    ;
}

.section-box a, .section-box a:visited, .section-box a:active, .section-box a:hover{
    ; color: white
    ;
}

#services-box {
    ; width: 338px
    ; 
}

#home-content-grid-2 {
    ; display: flex
    ; flex-direction: row
    ; justify-content: flex-start
    ; margin-top: 20px
    ; 
}

.content-section {
    ; width: 320px
    ; 
}

.content-section header {
    ; background-image: url(/media/section_header_bg.jpg);
    ; background-repeat: repeat-x
    ; border-top-left-radius: 5px
    ; border-top-right-radius: 5px
    ; color: #333
    ; font-weight: 700
    ; height: 40px
    ; padding-top: 10px
    ; text-align: center
    ;     
}

.content-section .section-content {
    ; background-color: rgba(42,87,111,.7)
    ; border: solid 1px #ccc
    ; font-size: 18px
    ; height: 265px
    ; margin-top: -10px
    ; padding: 10px
    ; 
}

#section-1 .section-content {
    ; border-bottom-left-radius: 5px
    ; 
}

#section-1.content-section header {
    ; border-top-right-radius: 0px
    ; border-right: solid 1px #333
    ; 
}

#section-1 p {
    ; margin-bottom: 10px
    ; 
}

#section-1 ul {
    ; margin-left: 30px
    ; 
}

#section-1 li {
    ; margin-bottom: 10px
    ; list-style: disc outside
}

#section-2 .section-content {
    ; border-bottom-left-radius: 0px
    ; border-bottom-right-radius: 0px
    ; border-left: none
    ; 
}

#section-2.content-section header {
    ; border-top-left-radius: 0px
    ; border-left: none
    ; border-top-right-radius: 0px
    ; border-right: solid 1px #333
    ; 
}

#section-3 .section-content {
    ; border-bottom-left-radius: 0px
    ; border-bottom-right-radius: 5px
    ; border-left: none
    ; 
}

#section-3.content-section header {
    ; border-top-left-radius: 0px
    ; border-left: none
    ; border-top-right-radius: 5px
    ; border-right: none
    ; 
}

#page-content.news .news {
    ; margin-top: 20px
    ; 
}

#page-content.news .news a{
    ; color: white
    ; display: block
    ; font-size: 16px
    ; padding-top: 5px
}


.news a, .news a:active, .news a:hover, .news a:visited {
    ; color: inherit
    ; text-decoration: none
}

.news a:hover {
    ; text-decoration: underline
}

.news:first-child {
    ; margin-top: 0px
    ; 
}

.news .date {
    ; font-size: 16px
    ; margin-bottom: 5px
    ; 
}

.news .content {
    ; color: #bbe9fb
}

.content-section .button {
    ; background-color: rgb(66,162,211)
    ; border: solid 1px white
    ; border-radius: 5px
    ; color: white
    ; font-weight: 700
    ; height: 20px
    ; margin-top: 15px
    ; padding: 10px
    ; padding-top: 12px
    ; 
}

#section-1 .button {
    ; width: 120px
    ; 
}

#section-1 a {
    ; text-decoration: none
    ; 
}

#section-2 .button {
    ; width: 75px
    ; 
}

#section-2 a {
    ; text-decoration: none
    ; 
}

footer {
    ; clear: both
    ; color: white
    ; font-size: 16px
    ; padding-top: 15px
    ; padding-bottom: 30px
    ; margin-bottom: 50px
    ; 
}

footer .row-1 {
    ; border-bottom: solid 1px white
    ; padding-bottom: 40px
    ; 
}

footer .copyright {
    ; float: left
    ; 
}

footer .menu {
    ; float: right
    ;
}

footer .menu a {
    ; border-right: solid 1px white
    ; padding-left: 10px
    ; padding-right: 10px
    ; 
}

footer .menu a:last-child {
    ; border-right: none
    ; padding-left: 10px
    ; padding-right: 10px
    ; 
}

footer a, footer a:visited, footer a:hover, footer a:active {
    ; color:white
    ; text-decoration: underline
    ;
}

footer .row-2 {
    ; margin-top: 8px
    ; 
}

footer .row-2 .pdx {
    ; float: left
}

footer .row-2 .disclaimer {
    ; float: left
    ; margin-left: 120px
    ; width: 500px
    ;
}

footer .row-2 .liv {
    ; float: right
}

.column-content {
    ; display: flex
    ; flex-direction: row
    ; justify-content: flex-start 
    ; 
}

.left-promo {
    ; display: flex
    ; flex-direction: column
    ; justify-content: flex-start
    ; margin-left: 30px
    ; width: 185px
}

.left-promo .msg {
    ; font-size: 16px
    ; margin-bottom: 10px
    ; margin-top: 80px
    ;
}

.left-promo .msg2 {
    ; font-size: 16px
    ; margin-bottom: 10px
    ; margin-bottom: 30px
    ; margin-top: 30px
    ;
}

.main-content {
    ; margin-left: 30px
    ; width: 720px
    ; 
}

.main-content header {
    ; font-size: 36px
    ; font-weight: 700
    ; margin-top: 20px
    ; 
}

.main-content h1 {
    ; font-weight: 700
    ; margin-top: 20px
    ;
}

.main-content .tagline {
    ; font-size: 28px
    ; font-weight: 700
    ; margin-top: 10px
}

.main-content p {
    /* ; background-color: rgba(0,0,0,.3) */
    ; margin-top: 10px
}

.main-content img {
    ; margin-top: 25px
}

.about-special-left-promo {
    ; margin-top: 28px !important
}

.left-list {
    ; font-size: 18px
}

.left-list header {
    ; background-color: #ddd
    ; border-top-left-radius: 2px
    ; border-top-right-radius: 2px
    ; color: #333
    ; font-weight: 700
    ; height: 25px
    ; padding-left: 10px
    ; padding-top: 7px
    ; text-align: left
    ; 
}

.left-list .first {
    padding-top: 10px
}

.left-list a {
    ; padding: 7px
    ;
}

.left-list a, .left-list a:visited, .left-list a:hover, .left-list a:active {
    ; background-color: rgba(66, 162, 211, .7)
    ; border: solid 1px rgba(66, 162, 211, .76)
    ; color: white
    ; display: block
    ; text-decoration: none
}

div.other-list a:visited {
    ; background-color: rgba(150,150,150,.7)
    ; border: solid 1px rgba(150,150,150,.76)
    
}

.left-list a:hover, {
    ; text-decoration: underline
    ; 
}

.other-list {
    ; margin-top: 20px
    ; 
}

.other-list a {
    ; background-color: rgba(150,150,150,.7)
    ; border: solid 1px rgba(150,150,150,.76)
}

.no-margin {
    ; margin-bottom: 0px !important
    ; margin-top: 0px !important
    ; 
}

.contact-form .col-1 {
    ; width: 460px
}

.contact-form .col-2 {
    ; width: 460px
}

.contact-form {
    ; border-top: solid 1px #bbe9fb
    ; display: flex
    ; flex-direction: row
    ; justify-content: flex-start
    ; margin-top: 30px
    ; padding-top: 5px
    ;
}

.contact-form form {
    ; margin-top: 20px
    ;
}

.contact-form label {
    ; display: block
    ; margin-bottom: 2px
    ; 
}

.contact-form input {
    ; width: 325px
    ; margin-bottom: 15px
    ; font-family: "jaf-bernino-sans-condensed", helvetica, arial, sans-serif
    ; font-size: 20px
    ; padding-left: 3px
    ; 
}

.contact-form textarea {
    ; width: 325px
    ; margin-bottom: 15px
    ; font-family: "jaf-bernino-sans-condensed", helvetica, arial, sans-serif
    ; font-size: 20px
    ; padding-left: 3px
    ; resize: none
    ;
}

.contact-form button {
    ; width: 125px
    ; font-family: "jaf-bernino-sans-condensed", helvetica, arial, sans-serif
    ; font-size: 20px
    ;
    
}

.main-content ul {
    ; padding-left: 30px
    ; margin-top: 25px
    ; margin-bottom: 25px
}

.main-content ul li {
    ; list-style-type: disc
    ; 
}

.bold {
    ; font-weight: 700
    ; 
}

.ul {
    ; text-decoration: underline
    ; 
}

.tnc p {
    ; line-height: 22px
    ; 
}