* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
/*main*/
html, body {
    font-family:'Segoe UI', 'Tahoma', 'Verdena', sans-serif;
    line-height:1.7em;
}
a {
    color:#333;
    text-decoration: none;
}
h1, h2, h3 {
    padding-bottom:20px;
}

/*content basics style*/
.container {
    margin:auto;
    max-width:3000px;
    padding:0 20px;
    overflow:hidden;
}

.text-primary2 {
    color: #ffffff;
    text-shadow: #00189e 3px 5px 2px;
    position: absolute;
    top: 70px;
    width: 100% ;
    text-align: center;
}

.text-primary1 {
    color: #ffffff;
    text-shadow: #00189e 3px 5px 2px;
    font-size: 100px;
    position: absolute;
    top:150px ;
}

.text-primary {
    color: #ffffff;
    text-shadow: #00189e 3px 5px 2px;
}
.btn{
    display:inline-block;
    text-align: center;
    font-size:28px;
    background:#333;
    color:#fff;
    padding: 17px 20px;
    border:none;
    cursor:pointer;
}
.btn:hover{
    background: rgb(45, 62, 156);
    color:#ffffff;
}
.btn-light {
    background: #f4f4f4;
    color: #333;
}
.bg-dark {
    background: #333;
    color: #fff;
}
.bg-light {
    background: #f4f4f4;
    color: #333;
}
.bg-primary {
    background: #333;
    color: #333;
}
/*navbar*/
#navbar {
    background:#313758;
    color:#fff;
    overflow:auto;
}
#navbar a {
    color:#fff;
}
#navbar ul {
    float:center;
    list-style:none;
}
#navbar ul li {
    float:left;
}
#navbar ul li a {
    display: block;
    padding:14px;
    text-align:center;
}
#navbar ul li a:hover,
#navar ul li a.current {
    background:rgb(45, 62, 156);
    color:#ffffff;
}
#navbar h1 {
    padding-top:20px;
    float:center;
}
/*showcase*/
#showcase{
    background: url(https://www.webbikeworld.com/wp-content/uploads/2021/02/2021-Yamaha-YZ450F-16.jpg) no-repeat center center/cover;
    height:900px;
}
#showcase1{
    background: url(https://www.foxracing.com/dw/image/v2/BGML_PRD/on/demandware.static/-/Library-Sites-FoxRacing/default/dwe316f5c8/landing/moto-glove-guide/mx-main_bg.jpeg?sw=768&q=100) no-repeat center center/cover;
    height:900px;
} 
#showcase .showcase-content {
    color: #fff;
    text-align: left;
    padding-top: 170px;
}
#showcase .showcase-content h1{
    font-size: 60px;
    line-height: 1.2em;
}
#showcase .showcase-content p{
    padding-bottom: 20px;
    line-height: 1.7em;
}
#showcase .text-border {
    width: 400px;
    position: absolute;
    top: 275px;
}

#showcase .text-border1 {
    width: 400px;
    position: absolute;
    right: 175px;
    top: 175px;
}

#showcase .text-border p{
    text-align: left;
}

#showcase .text-border1 p{
    text-align: left;
}


/*info*/
#info {
    height:400px;
}
#info .info-content {
    float: right;
    width:50%;
    height:100%;
    text-align: center;
    padding: 50px 30px;
    overflow: hidden;
}
#info .info-content p {
    padding-bottom: 30px;
}
#info .info-img {
    float: left;
    width: 50%;
    background: url() no-repeat;
    min-height: 100%;
}
/*features*/
#features .box {
    float: left;
    width: 33.3%;
    padding: 50px;
    text-align: center;
}
#features {
    text-align:center;
    padding:20px;
    background:#444;
    color:#fff;
}
/* clear */
.clear {
    clear: both;
}

/* contact */
#contact-form {
    background:#272525;
    color:#ffff;
    height: 720px;
}

#contact-form .form-group {
    margin-bottom: 20px;
}

#contact-form .form-group label {
    display: block;
    margin-bottom: 5px;
    width: 520px;
}
#contact-form .form-group input,
#contact-form .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    width: 520px;
}
#contact-form .form-group textarea {
    height: 200px;
    width: 500px;
}
#contact-form .form-group input:focus,
#contact-form .form-group textarea:focus {
    outline: none;
    border-color: #f7c08a;
}
#contact-info .box {
    float: left;
    width: 33.3%;
    padding: 50px;
    text-align: center;
}
#contact-info .box {
    float: left;
    width: 33.3%;
    padding: 50px;
    text-align: center;
}

#grad {
    background-image: linear-gradient(to right,rgba(18, 0, 179, 0.288), rgb(17, 8, 97) ,rgba(36, 36, 36, 0.726), rgb(24, 24, 24));
}
/* img */
img {
    border-radius: 0px;
    width: 100%;
    height: 100%;
}
#img1 {
    border-radius: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 180px;
    top: 150px;
    border: 8px outset #080cca;
}

#img2 {
    border-radius: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 680px;
    top: 150px;
    border: 8px outset #080cca;
}

#img3 {
    border-radius: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 740px;
    top: 530px;
    border: 8px outset #080cca;
}

#img4 {
    border-radius: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 200px;
    top: 530px;
    border: 8px outset #080cca;
}

/* img-nipid */
#img5 {
    border-radius: 0px;
    position: absolute;
    left: 695px;
    top: 180px;
    border: 8px outset #080cca;
}

#img6 {
    border-radius: 0px;
    position: absolute;
    left: 695px;
    top: 540px;
    border: 8px outset #080cca;
}

#img7 {
    border-radius: 0px;
    position: absolute;
    left: 80px;
    top: 540px;
    border: 8px outset #080cca;
}

#img8 {
    border-radius: 0px;
    position: absolute;
    left: 1300px;
    top: 180px;
    border: 8px outset #080cca;
}
#img9 {
    border-radius: 0px;
    position: absolute;
    left: 80px;
    top: 180px;
    border: 8px outset #080cca;
}
#img10 {
    border-radius: 0px;
    position: absolute;
    left: 1300px;
    top: 540px;
    border: 8px outset #080cca;
}

#img-rule1{
    width:30%;
    right:640px;
    top:230px;
    position: absolute;
    border: 8px outset #080cca;
}
#img-rule2{
    width:30%;
    right:640px;
    text-align: center;
    position: absolute;
    top: 350px;
    border: 8px outset #080cca;
}
#img-rule3{
    width:30%;
    right:640px;
    text-align: center;
    position: absolute;
    top: 470px;
    border: 8px outset #080cca;
}
#img-rule4{
    width:30%;
    right:640px;
    text-align: center;
    position: absolute;
    top: 590px;
    border: 8px outset #080cca;
}

/* flipbox */
.flip-box {
    background-color: transparent;
    width: 400px;
    height: 500px;
    border: none;
    perspective: 1000px;
    right: 800px;
    top: 50px;
  
}
.flip-box1 {
    background-color: blue;
    width: 500px;
    height: 400px;
    border: none;
    perspective: 1000px;
  
}
  
  /* This container is needed to position the front and back side */
.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  
}
  
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
}
  
/* Position the front and back side */
.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
  
/* Style the front side */
.flip-box-front {
    background-color: #bbb;
    color: black;
}
  
/* Style the back side */
.flip-box-back {
    background-color:rgb(17, 8, 97);
    color: white;
    transform: rotateY(180deg);
}

/*flipbox 2*/

.flip-box2 {
    background-color: transparent;
    width: 400px;
    height: 500px;
    border: none;
    perspective: 1000px;
    position: absolute;
    right: 940px;
    top: 317px;
}
  /* This container is needed to position the front and back side */
.flip-box2-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  
}
  
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box2:hover .flip-box2-inner {
    transform: rotateY(180deg);
}
  
/* Position the front and back side */
.flip-box2-front, .flip-box2-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
  
/* Style the front side */
.flip-box2-front {
    background-color: #bbb;
    color: black;
}
  
/* Style the back side */
.flip-box2-back {
    background-color:rgb(17, 8, 97);
    color: white;
    transform: rotateY(180deg);
}

footer {
    text-align: center;
    padding: 8px;
    background: #444444;
    color: #fff;
}
/*

.image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

  
.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
  
.container:hover .image {
    opacity: 0.3;
}
  
.container:hover .middle {
    opacity: 1;
}

*/