/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: gray;
}

/* main */
body{
    /*font-family: 'Raleway', sans-serif;*/
    /*font-family: 'Thasadith', sans-serif;*/
    font-family: 'Quicksand', sans-serif;
    background-color: #222c35;
    color: #ffffff;
    padding-top: 70px;
}
.my-orange{
    color: #f47825;
}
.my-header{
    text-align: center;
    font-size: 40px;
    font-weight: 200;
    text-transform: uppercase;
}
.mt-50{
    margin-top: 50px;
}
.mb-50{
    margin-bottom: 50px;
}
.d-flex{
    display: flex !important;
    flex-wrap: wrap;
}
.wrap{
    min-height: calc(100vh - 40px);
}
footer{
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: white;
    color: #1b232a;
    position: relative;
    bottom: 0;
}
@media (max-width: 767px){
    .d-xs-none{
        display: none !important;
    }
}
.my-btn, input.my-btn[type='submit']{
    color: white;
    font-weight: 400;
    border: #f47825 1px solid !important;
    background-color: #222c35 !important;
    padding: 20px 40px;
    line-height: 2px;
}
.my-btn:hover{
    animation-name: my-btn-hover;
    animation-duration: 300ms;
    animation-fill-mode: forwards;
}
@keyframes my-btn-hover {
    0%   {background-color: #222c35; color: white;}
    100% {background-color: #f47825; color: #222c35;}
}
.page-map{
    background: url("images/map.jpg");
    background-size: cover;
    height: 30vh;
    min-height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}
.page-map a{
    color: white;
}
.page-map .active, .page-map a:hover{
    color: #f47825;
    text-decoration: none;
}



/* navbar and home image */
@media (min-width: 768px){
    .navbar-fixed-top {
        min-height: 90px;
    }
    .navbar-nav > li > a {
        padding-top: 0px;
        padding-bottom: 0px;
        line-height: 90px;
    }
    .navbar-brand{
        height: 70px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-brand img{
        max-height: 70px !important;
        margin-top: 0 !important;
    }
    nav.scrolled{
        background-color: rgba(3,14,24,.6) !important;
        transition: background-color 2s;
    }
    .home-image>div{
        width: 500px !important;
        height: 200px !important;
        font-size: 50px !important;
    }
}
body{
    padding-top: 0 !important;
}
nav .navbar-nav a:hover{
    background-color: rgba(255,255,255,.2)!important;
}
nav{
    background-color: rgba(3,14,24,.90) !important;
    border: 0 !important;
    transition: background-color 2s;
}
nav a{
    color: white !important;
}
@keyframes home-back {
    0%   {background-image: url("images/1.jpg");}
    14%  {background-image: url("images/2.jpg");}
    28%  {background-image: url("images/3.jpg");}
    43%  {background-image: url("images/4.jpg");}
    57%  {background-image: url("images/5.jpg");}
    71%  {background-image: url("images/6.jpg");}
    85%  {background-image: url("images/7.jpg");}
    100%  {background-image: url("images/1.jpg");}
}
.home-image{
    display: flex !important;
    height: 70vh;
    animation-name: home-back;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    background-size: cover;
    justify-content: center;
    align-items: center;
    background-attachment: fixed;
}
.home-image img{
    display: none;
}
.home-image>div{
    width: 300px;
    height: 150px;
    font-size: 30px;
    background-color: rgba(0,0,0,.6);
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    border: 7px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbar-brand img{
    max-height: 30px;
    margin-top: -5px;
}
.home-image-2{
    min-height: 50vh;
    background: #222c35 url("images/home2.jpg") fixed;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-image-2>div{
    font-weight: 600;
    font-size: 50px;
    text-align: center;
}
.navbar-inverse {
    background-color: rgba(3,14,24,1) !important;
    border: 0 !important;
}
.spacer {
    width: 100%;
    height: 95px;
}
.home-about-image>img{
    width: 30vw;
    max-width: 100%;
}


/* home blocks */
.home-products{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.home-products::before, .home-products::after{
    display: none;
}
.home-products-block{
    width: 100%;
    padding: 30px;
    margin-bottom: 30px;
    /*margin: 20px;*/
    /*text-align: center;*/
}
.home-products-block span{
    font-size: 20px;
    font-weight: 600;
}

.products-block-image img{
    width: 100%;
    margin-bottom: 40px;
}
.dark-back{
    background-color: #1b232a;
}
.home-about{
    margin-top: 20px;
    /*text-align: center;*/
    margin-left: 20px;
    margin-right: 20px;
    line-height: 20px;
}
.home-contact{
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}
.home-contact input{
    background-color: #222c35;
    border: 1px solid #323940;
    color: #9a9a9a;
    height: 40px;
    padding: 10px;
    margin-top: 10px;
}
.home-contact textarea{
    background-color: #222c35;
    border: 1px solid #323940;
    color: #9a9a9a;
    height: 120px;
    padding: 10px;
    margin-top: 10px;
    resize: vertical;
}
.home-contact input:focus, .home-contact textarea:focus{
    animation-name: my-input-focus;
    animation-duration: 400ms;
    animation-fill-mode: forwards;
}
@keyframes my-input-focus {
    0%  {
        outline: none;
        border-color: #323940;
    }
    100%{
        outline: none;
        border-color: #999;
    }
}


/* about blocks */
.about-back{
    background-image: url("images/about.jpg");
    background-size: cover;
}
.about-back2{
    background-image: url("images/about3.jpg");
    background-size: cover;
}
.Cutto-lines{
    background-image: url("images/cut-lenght.jpg");
    background-size: cover;
}
.Cutto-lines2{
    background-image: url("images/Cut to Length Lines(Edge trimming cut to length line for large thickness).png");
    background-size: cover;
}

/* hot HOT ROLLED COIL*/
.hotrolled-back{
    background-image: url("images/hotrolledcoil.jpg");
    background-size: cover;
}

/* contact blocks */
@media (min-width: 768px){
    .p-sm-r10{
        padding: 0 10px 0 0 !important;
    }

}
.contact-title{
    display: block;
    width: 80px;
}
.p-0{
    padding: 0;
}

/* products blocks */
.product-image{
    display: flex !important;
    height: calc(100% - 30px);
    min-height: 250px;
    animation-name: product-back;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    background-size: cover;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
.product-image img{
    display: none;
}
@keyframes product-back {
    0%   {background-image: url("images/products/3.jpg");}
    10%  {background-image: url("images/products/3.jpg");}
    15%  {background-image: url("images/products/4.jpg");}
    25%  {background-image: url("images/products/4.jpg");}
    35%  {background-image: url("images/products/4.jpg");}
    40%  {background-image: url("images/products/5.jpg");}
    50%  {background-image: url("images/products/5.jpg");}
    60%  {background-image: url("images/products/5.jpg");}
    65%  {background-image: url("images/products/6.jpg");}
    75%  {background-image: url("images/products/6.jpg");}
    85%  {background-image: url("images/products/6.jpg");}
    90%  {background-image: url("images/products/3.jpg");}
    100% {background-image: url("images/products/3.jpg");}
}