.container { max-width: 1640px; } #progressbar { margin-bottom: 30px; overflow: hidden; color: lightgrey; } #progressbar .active { color: #000000; } #progressbar li { list-style-type: none; font-size: 12px; width: 25%; float: left; position: relative; } #progressbar #step1:before { font-family: Arial; content: "1"; padding-left:19px; } #progressbar #step2:before { font-family: Arial; content: "2"; padding-left:19px; } #progressbar li:before { width: 50px; height: 50px; line-height: 45px; display: block; font-size: 18px; color: #ffffff; background: lightgray; border-radius: 50%; margin: 0 auto 10px auto; padding: 2px; } #progressbar li:after { content: ''; width: 100%; height: 2px; background: lightgray; position: absolute; left: 0; top: 25px; z-index: -1; } #progressbar li.active:before, #progressbar li.active:after { background: skyblue; } @media screen and (max-width: 600px) { .nav-link,.dropdown-item{ font-family: "Raleway", sans-serif; } .float{ position:fixed; width:50px; height:50px; bottom:30px; left:30px; background-color:#25d366; color:#FFF; border-radius: 50px; text-align:center; font-size:30px; z-index:100; } .my-float{ margin-top:10px; } .float:hover{ color:#fff; } } @media screen and (min-width: 600px) { .nav-link,.dropdown-item{ font-family: "Raleway", sans-serif; } .float{ position:fixed; width: 50px; height: 50px; bottom:50px; left:50px; background-color:#25d366; color:#FFF; border-radius: 50px; text-align:center; font-size:30px; z-index:100; } .my-float{ margin-top:10px; } .float:hover{ color:#fff; } } button{ font-family: 'Raleway', sans-serif; } .label-input100{ font-family: 'Raleway', sans-serif; } .label-radio100{ font-family: 'Raleway', sans-serif; } input[type=text]{ font-family: 'Raleway', sans-serif; width:100%; } input[type=date]{ height:40px;font-family: 'Raleway', sans-serif;width:100%; } textarea{ font-family: 'Raleway', sans-serif; resize:none; box-sizing:border-box;width:100%; } ::placeholder { font-family: 'Raleway', sans-serif; color:#d7ded9; } :-ms-input-placeholder { color:#d7ded9; } ::-ms-input-placeholder { color:#d7ded9; } select{ height:40px; width:100%; } #button { display: inline-block; background-color: #d14728; width: 50px; height: 50px; text-align: center; border-radius: 4px; border:1.5px solid #fff; position: fixed; bottom: 30px; right: 30px; transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; z-index: 1000; } #button::after { content: "\f077"; font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: 2em; line-height: 50px; color: #fff; } #button:hover { cursor: pointer; } #button.show { opacity: 1; visibility: visible; } @media (min-width: 500px) { #button { margin: 30px; } }