@font-face {
    font-family: "Hurme Geometric Sans 3 W03 Rg";
    src: url("https://storage.googleapis.com/images.fletx.co/core/fonts/HurmeGeometricSans3W03Rg/baa223ce70692d6c7c620ede6f841f29.eot"); /* IE9*/
    src: url("https://storage.googleapis.com/images.fletx.co/core/fonts/HurmeGeometricSans3W03Rg/baa223ce70692d6c7c620ede6f841f29.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("https://storage.googleapis.com/images.fletx.co/core/fonts/HurmeGeometricSans3W03Rg/baa223ce70692d6c7c620ede6f841f29.woff2") format("woff2"), /* chrome、firefox */
    url("https://storage.googleapis.com/images.fletx.co/core/fonts/HurmeGeometricSans3W03Rg/baa223ce70692d6c7c620ede6f841f29.woff") format("woff"), /* chrome、firefox */
    url("https://storage.googleapis.com/images.fletx.co/core/fonts/HurmeGeometricSans3W03Rg/baa223ce70692d6c7c620ede6f841f29.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("https://storage.googleapis.com/images.fletx.co/core/fonts/HurmeGeometricSans3W03Rg/baa223ce70692d6c7c620ede6f841f29.svg#Hurme Geometric Sans 3 W03 Rg") format("svg"); /* iOS 4.1- */
}

 
 * {
     margin: 0px;
     padding: 0px;
     box-sizing: border-box;
     -webkit-box-sezing: border-box;
     -moz-box-sezing: border-box;
 }
 
 body {
     margin-top: 10px;
     margin: 0;
     font-family: "Hurme Geometric Sans 3 W03 Rg" !important;
     font-size: 16px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -webkit-text-stroke-width: 0.2px;
     -moz-osx-font-smoothing: grayscale;
 }
 /*Menu*/
 
 .nav_bar {
     text-transform: uppercase;
     display: flex;
     justify-content: space-around;
     align-items: center;
     min-height: 10vh;
     background-color: #FFFFFF;
     top: 0;
 }
 
 .logo_menu {
     width: 100%;
     height: auto;
     margin-top: 30px;
     margin-bottom: 30px;
 }
 
 .nav-links {
     display: flex;
     justify-content: space-around;
     align-content: center;
     width: 100%;
     margin: 0%;
 }
 
 .nav-links li {
     list-style: none;
 }
 
 .nav-links a {
     color: #11172e;
     text-decoration: none;
     font-weight: normal;
     font-size: 15px;
 }
 
 #login_button {
     color: #d94240;
 }
 
 .burger {
     display: none;
     cursor: pointer;
 }
 
 .burger div {
     width: 25px;
     height: 2px;
     background-color: #0C142E;
     margin: 5px;
 }
 
 .active {
     color: #d94240;
 }
 
 @media screen and (max-width:1600px) {
     .nav-links {
         width: 70%;
     }
     .nav-links {
         font-size: 16px;
     }
 }
 
 @media screen and (max-width: 1300px) {
     body {
         overflow-x: hidden;
     }
     .nav-links {
         position: absolute;
         right: 0px;
         height: 92vh;
         top: 8vh;
         background-color: #FFFFFF;
         display: flex;
         flex-direction: column;
         align-items: center;
         width: 50%;
         transform: translateX(100%);
         transition: transform 0.5s ease-in;
     }
     .nav-links li {
         /*opacity: 0;*/
     }
     .burger {
         display: block;
     }
 }
 
 .nav-active {
     transform: translate(0%)
 }
 
 @keyframes navLinkfade {
     from {
         opacity: 0;
         transform: translateX(50px);
     }
     to {
         opacity: 1;
         transform: translateX(0px);
     }
 }
 
 .nav li:hover {
     border-bottom: #d94240;
 }
 /* contend */
 
 #frame_second_drive {
     width: 50%;
 }
 
 #customer_introduction {
     color: #d94240;
     text-transform: uppercase;
     font-size: 20px;
     text-align: center;
     display: flex;
     justify-content: center;
     align-content: center;
 }
 
 .page {
     top: 0;
     padding: 0;
 }
 
 .content {
     width: 100%;
     background-color: #070d1f;
 }
 
 .contents {
     width: 100%;
     height: auto;
 }
 
 .cover {
     flex: 1;
     justify-content: center;
     align-content: center;
     display: flex;
 }
 
 .monitoring_img {
     width: 100%;
 }
 
 p {
     margin-bottom: 20px;
 }
 
 .img_cargo {
     width: 100%;
     height: auto;
 }
 
 .scrolling-customers {
     width: 15%;
     display: flex;
     justify-content: space-around;
     position: absolute;
 }
 
 .Presentation {
     display: flex;
     width: 90%;
     margin: auto;
     min-height: 100vh;
     align-items: center;
     z-index: 1;
 }
 
 .Header_content {
     padding: 0px 0px 0px 0px;
     text-align: justify;
     color: #e1e1e1;
     font-weight: normal
 }
 
 .Introduction {
     flex: 1;
 }
 
 .Intro-text-products {
     margin: 10%
 }
 
 .Intro-text-products_carrousel {
     margin: 5% 0 0 0;
 }
 
 .Intro-text {
     font-size: 30px;
     font-weight: 500;
 }
 
 .Title {
     font-size: 40pt;
     text-transform: uppercase;
     color: #d94240;
     font-weight: 900;
     font-style: italic;
 }
 
 .Title_2 {
     font-size: 30pt;
     text-transform: uppercase;
     color: #d94240;
     font-weight: 900;
     font-style: italic;
 }
 
 .Intro-text p {
     font-size: 23pt;
     color: #FFFFFF;
     margin-right: 50%;
     text-align: justify;
     text-justify: inter-word;
 }
 
 .text {
     font-size: 23pt;
 }
 
 .cta {
     padding: 10px 0px 0px 0px;
 }
 
 .cta_login {
     background-color: #FFFFFF;
     border: none;
     border-radius: 10px;
     color: #0C142E;
     width: 200px;
     height: 50px;
     cursor: pointer;
 }
 
 .cta_contact {
     border: 2px solid #FFFFFF;
     background: transparent;
     color: #FFFFFF;
     width: 150px;
     height: 50px;
     cursor: pointer;
     border-radius: 10px;
     margin: 30px 30px 30px 30px;
 }
 
 @media screen and (max-width: 450px) {
     .img_background {
         display: none;
     }
     #frame_second_drive {
         width: 100%;
     }
     .Header_content {
         text-align: center;
     }
     .img_cargo {
         width: 100%;
     }
     .content {
         width: auto;
     }
     #frame_text_fifth {
         color: #0C142E;
     }
     
     #store_icon {
         width: 100%;
     }
 }
 
 @media screen and (max-width:1080px) {
     .img_background {
         height: 100%;
         width: auto;
     }
     .content {
         background-size: cover;
     }
     .presentation_content {
         display: none;
     }
     .Intro-text {
         margin: 0px 0px 0px 0px;
         font-size: 23pt;
     }
     .Intro-text p {
         font-size: 25px;
         margin: 0%;
     }
     .Intro-text {
         margin: 10%;
     }
     .Presentation {
         flex-direction: column;
         min-height: 30vh;
     }
     #frame_text_fifth {
         color: #070d1f;
         margin: 10%;
     }
     .Title_2 {
         margin: 10%;
     }
     #store_icon {
         width: 80%;
         margin: 10%;
     }
 }
 
 @media screen and (max-width:720px) {
     .presentation_content {
         display: none;
     }
     .Intro-text {
         margin: 150px 0px 0px 0px;
         font-size: 30px;
         font-weight: 500px;
     }
     .Intro-text p {
         font-size: 10px;
         margin-right: 0;
     }
     .cta_contact {
         border: 2px solid #FFFFFF;
         background: transparent;
         color: #FFFFFF;
         width: 150px;
         height: 50px;
         cursor: pointer;
         border-radius: 10px;
         margin: 30px 30px 30px 30px;
     }
 }
 
 header {
     position: fixed;
     top: 0;
     left: 0;
     padding: 0 100px;
     background: #FFFFFF;
     width: 100%;
     box-sizing: border-box;
     box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.15);
     z-index: 100;
 }
 
 header .logo-container {
     color: #0C142E;
     height: 50px;
     line-height: 50px;
     font-size: 24px;
     float: left;
     font-weight: bold;
 }
 
 header nav {
     float: right;
 }
 
 header nav ul {
     margin: 0;
     padding: 0;
     display: flex;
 }
 
 header nav ul li {
     list-style: none;
 }
 
 header nav ul a {
     height: 50px;
     line-height: 50px;
     padding: 0 20px;
     color: #0C142E;
     text-decoration: none;
     display: block;
 }
 
 header nav ul a:hover,
 header nav ul a.active {
     color: #2A2A2A;
 }
 
 @media (max-width: 720px) {
     header {
         padding: 0 20px;
     }
     header nav {
         position: absolute;
         width: 100%;
         height: calc(32vh - 50px);
         background: #FFFFFF;
         top: 50px;
         left: -100%;
         transition: 0.5s;
     }
     header nav.active {
         left: 0;
     }
     header nav ul {
         display: block;
         text-align: center;
     }
     header nav ul li a {
         border-bottom: 1px solid rgba(0, 0, 0, .1);
     }
 }
 
 @media screen and (max-width:720px) {
     .Presentation {
         flex-direction: column;
     }
     .Introduction {
         text-align: center;
     }
     .Intro-text h1 {
         font-size: 35px;
     }
     .Intro-text p {
         font-size: 20px;
     }
     .cover img {
         width: 10%;
     }
     .Products {
         flex-direction: column;
         padding: 10;
     }
     .Introduction_Products {
         margin-top: 10vh;
         text-align: center;
     }
     .Intro-text-products h1 {
         font-size: 30px;
     }
     .Intro-text-products p {
         font-size: 20px
     }
     .bar {
         width: 100%;
     }
     body {
         padding: 3px;
         margin: 0;
     }
     .content_products {
         margin: 5px 0 0;
     }
     .icons_store img {
         flex-direction: column;
     }
     .page {
         padding: 0;
     }
 }
 
 .Products {
     justify-content: center;
     align-items: center;
     flex-direction: column;
     text-align: justify-all;
     padding: 0 20px;
     justify-content: center;
     align-content: center;
 }
 
 .Products_2 {
     justify-content: center;
     align-items: center;
     flex-direction: column;
     text-align: justify-all;
     padding: 0 20px;
 }
 
 .img_cargo {
     display: block;
     margin: auto;
     width: 60%;
     height: auto;
     justify-content: center;
 }
 
 .img_cargo_2 {
     width: 60%;
     height: auto;
     justify-content: center;
     margin: 5% 0 0 20%;
 }
 
 .img_cargo_4 {
     width: 70%;
     height: auto;
     justify-content: center;
     margin: 5% 0 0 10%;
 }
 
 .img_cargo_5 {
     width: 70%;
     height: auto;
     justify-content: center;
     margin: 5% 10%;
 }
 
 .Introduction_Products {
     flex: 1;
 }
 
 .Introduction_Products_2 {
     flex: 1;
 }
 
 .Intro-text-products {
     font-size: 25px;
     font-weight: 500px;
     background: #848484;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     justify-content: center;
 }
 
 .Intro-text-products_2 {
     font-size: 25px;
     font-weight: 500px;
     background: #FFFFFF;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     justify-content: center;
 }
 
 .Title-products {
     font-size: 35px;
     color: #848484;
     justify-content: center;
 }
 
 .content_products {
     margin-top: 5px;
     font-size: 20px;
     color: #848484;
     padding: 5px 10px;
 }
 
 .icons_store {
     display: flex;
     width: 100%;
     height: auto;
     align-content: center;
     justify-content: center;
 }
 /*   contact  */
 /* Style inputs */
 
 input[type=text],
 select,
 textarea {
     width: 100%;
     padding: 12px;
     margin-top: 2px;
     margin-bottom: 15px;
     resize: vertical;
 }
 
 input[type=submit] {
     color: #FFFFFF;
     padding: 12px 20px;
     cursor: pointer;
     border-radius: 33px;
     width: 190px;
     -webkit-box-shadow: 4px 21px 15px -9px rgba(12, 20, 46, 0.38);
     -moz-box-shadow: 4px 21px 15px -9px rgba(12, 20, 46, 0.38);
     box-shadow: 4px 21px 15px -9px rgba(12, 20, 46, 0.38);
     width:100%;
 }
 
 input[type=submit]:hover {
     background-color: #070d1f;
 }
 /* Style the container/contact section */
 
 .container {
     border-radius: 5px;
     padding: 10px;
 }
 /* Create two columns that float next to eachother */
 
 .column {
     float: left;
     margin-top: 6px;
     padding: 20px;
 }
 /* Clear floats after the columns */
 
 .row:after {
     content: "";
     display: table;
     clear: both;
 }
 /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
 
 @media screen and (max-width: 1300px) {
     .column,
     input[type=submit] {
         width: 100%;
         margin-top: 0;
     }
 }
 
 .contact_form {
     background-color: #11172e;
     padding: 30px;
     border-radius: 10px;
     -webkit-box-shadow: 4px 21px 15px -9px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 4px 21px 15px -9px rgba(0, 0, 0, 0.3);
     box-shadow: 4px 21px 15px -9px rgba(0, 0, 0, 0.3);
 }
 
 footer {
     background-color: #0C142E;
 }
 
 .footer_text {
     padding: 10px;
     font-size: 14px;
     font-weight: 500;
     align-content: center;
     justify-content: center;
     background: #FFFFFF;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
 
 .Text_contact_foot {
     text-align: justify;
     padding: 20px 100px 0 0;
     font-size: 14px;
     font-weight: 500;
     align-content: center;
     justify-content: center;
     -webkit-background-clip: text;
 }
 
 .logo_contact {
     width: 40%;
     padding: 20px 0;
 }
 
 @media screen and (max-width: 1000px) {
     .Text_contact_foot {
         padding: 0px;
     }
     .logo_contact {
         width: 60%;
     }
 }