710 lines
12 KiB
CSS
710 lines
12 KiB
CSS
/*
|
|
|
|
Template 2103 Central
|
|
|
|
http://www.tooplate.com/view/2103-central
|
|
|
|
*/
|
|
|
|
.media-body {
|
|
text-align: left;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
.ml-padding {
|
|
margin-bottom: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.imgresponsive {
|
|
width: auto!important;
|
|
height: 200px!important;
|
|
}
|
|
|
|
.imgresp {
|
|
width: auto!important;
|
|
height: 232px!important;
|
|
}
|
|
|
|
@media (min-width: 992px){
|
|
.col-ds-2 {
|
|
-ms-flex: 0 0 100%;
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
@media (min-width: 768px){
|
|
.col-tb-12 {
|
|
-ms-flex: 0 0 100%;
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
@media (min-width: 576px){
|
|
.col-mb-12 {
|
|
-ms-flex: 0 0 100%;
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.subtitle {
|
|
margin-bottom: 10px!important;
|
|
}
|
|
|
|
@media (max-width: 576px){.modal-dialog.modal-dialog-slideout {width: 80%}}
|
|
.modal-dialog-slideout {min-height: 100%; margin: 0 auto 0 0 ;background: #fff;}
|
|
.modal.fade .modal-dialog.modal-dialog-slideout {-webkit-transform: translate(-100%,0);transform: translate(-100%,0);}
|
|
.modal.fade.show .modal-dialog.modal-dialog-slideout {-webkit-transform: translate(0,0);transform: translate(0,0);flex-flow: column;}
|
|
.modal-dialog-slideout .modal-content{border: 0;}
|
|
|
|
.modal-body {
|
|
text-align: left;
|
|
float: none;
|
|
}
|
|
.modal-body a {
|
|
font-weight: bold;
|
|
padding: 10px 0px;
|
|
border-bottom: 1px solid black;
|
|
}
|
|
.mobile-btn {
|
|
position: fixed;
|
|
z-index: 99999999;
|
|
font-weight: bold;
|
|
font-size: 40px;
|
|
top: 12px;
|
|
left: 15px;
|
|
background-color: transparent;
|
|
color: #000!important;
|
|
border: none!important;
|
|
}
|
|
|
|
.logo {
|
|
position:fixed;
|
|
bottom: 12px;
|
|
right: 15px;
|
|
width: 150px;
|
|
height: 150px;
|
|
z-index: 99999999;
|
|
}
|
|
@media(max-width:767px){
|
|
.logo{
|
|
width: 100px;
|
|
height: 100px;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
}
|
|
}
|
|
@media(min-width: 768px) and (max-width:991px){
|
|
.logo{
|
|
width: 100px;
|
|
height: 100px;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
}
|
|
}
|
|
@media(min-width: 992px) and (max-width: 1199px){
|
|
.logo{
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
}
|
|
@media(min-width: 1200px){
|
|
.logo{
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
}
|
|
|
|
.no-line-link {
|
|
text-decoration: none!important;
|
|
border: none!important;
|
|
color: #666666;
|
|
}
|
|
.no-line-link:hover {
|
|
text-decoration: none;
|
|
color: #666666;
|
|
}
|
|
|
|
.no-link {
|
|
text-decoration: none!important;
|
|
color: #666666;
|
|
}
|
|
.no-link:hover {
|
|
text-decoration: none;
|
|
color: #666666;
|
|
}
|
|
|
|
.shadow {
|
|
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
|
|
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.shadow:hover {
|
|
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
|
|
}
|
|
.box {
|
|
background: linear-gradient(rgba(66, 66, 66,0.6), rgba(66, 66, 66,0.6));
|
|
border-radius: 0.3rem;
|
|
/* height: 10rem; */
|
|
/* width: 25rem; */
|
|
}
|
|
|
|
body {
|
|
font-family: "Open Sans", Helvetica, Arial, sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow-x: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
a:hover,
|
|
a:focus,
|
|
.tm-text-gray {
|
|
color: #666666;
|
|
}
|
|
|
|
.tm-text-black {
|
|
color: #212529;
|
|
}
|
|
h1 {
|
|
font-size: 3rem;
|
|
}
|
|
p {
|
|
line-height: 1.8;
|
|
}
|
|
|
|
/* .navbar-toggler {
|
|
border-color: #6c757d;
|
|
cursor: pointer;
|
|
} */
|
|
|
|
#mainNav {
|
|
background: white;
|
|
padding: 5px 15px;
|
|
width: 180px;
|
|
position: absolute;
|
|
top: 50px;
|
|
right: 15px;
|
|
-webkit-box-shadow: 0px 0px 7px 0px rgba(214, 214, 214, 1);
|
|
-moz-box-shadow: 0px 0px 7px 0px rgba(214, 214, 214, 1);
|
|
box-shadow: 0px 0px 7px 0px rgba(214, 214, 214, 1);
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* .navbar {
|
|
justify-content: flex-end;
|
|
} */
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
button:focus {
|
|
outline: none;
|
|
}
|
|
.bg-light {
|
|
background-color: transparent!important;
|
|
}
|
|
|
|
.tm-section-mb {
|
|
margin-bottom: 90px;
|
|
}
|
|
|
|
#top {
|
|
padding-top: 65px;
|
|
}
|
|
|
|
#bottom {
|
|
padding-bottom: 15px;
|
|
padding-top: 65px;
|
|
}
|
|
|
|
#tm-section-2,
|
|
#tm-section-6 {
|
|
padding-top: 60px;
|
|
}
|
|
|
|
.tm-section-4 {
|
|
padding: 0px;
|
|
padding-top: 100px;
|
|
padding-bottom: 80px;
|
|
background-image: url(../img/tm-bg-section-4.jpg);
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
position: relative;
|
|
height: 300px;
|
|
}
|
|
|
|
.tm-section-7 {
|
|
padding: 0px;
|
|
padding-top: 100px;
|
|
padding-bottom: 80px;
|
|
background-image: url(../img/tm-bg-section-7.png);
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
position: relative;
|
|
height: 300px;
|
|
}
|
|
|
|
|
|
.menu {
|
|
float: right;
|
|
}
|
|
|
|
.tm-box-3 {
|
|
padding: 40px 50px;
|
|
background: #f2f2f2;
|
|
}
|
|
|
|
.tm-box-5 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding-left: 25px;
|
|
padding-right: 25px;
|
|
min-height: 200px;
|
|
background: #f2f2f2;
|
|
}
|
|
|
|
.tm-media {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.slick-dots li button:before {
|
|
font-size: 20px;
|
|
color: white;
|
|
opacity: 1;
|
|
}
|
|
|
|
.tm-img-slider-item {
|
|
position: relative;
|
|
}
|
|
|
|
.tm-slider-caption {
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
z-index: 1000;
|
|
margin-bottom: 0;
|
|
padding: 8px 30px;
|
|
background-color: rgba(206, 212, 218, 0.5);
|
|
color: #111;
|
|
}
|
|
|
|
.tm-img-container {
|
|
width: 96%;
|
|
max-width: 1020px;
|
|
}
|
|
|
|
.th-section {
|
|
padding-top: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.th-text {
|
|
padding: 8px 30px;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 40px;
|
|
background-color: rgba(248, 248, 147, 0.534);
|
|
}
|
|
|
|
.slick-dots {
|
|
position: absolute;
|
|
bottom: -50px;
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0;
|
|
list-style: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.slick-prev:before,
|
|
.slick-next:before {
|
|
color: #f8f9fa;
|
|
}
|
|
|
|
.slick-prev {
|
|
left: 5px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.slick-next {
|
|
right: 5px;
|
|
}
|
|
.tm-slider-img {
|
|
width: 100%;
|
|
}
|
|
|
|
.tm-slider-img,
|
|
.slick-slide {
|
|
min-height: 250px;
|
|
}
|
|
|
|
.tm-slider-img {
|
|
min-width: 500px;
|
|
}
|
|
|
|
.footer {
|
|
padding: 15px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
color: white;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
a {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn {
|
|
background-color: white;
|
|
border-color: gray;
|
|
border-radius: 0;
|
|
color: #666666;
|
|
font-size: 1.3rem;
|
|
margin-top: 5px;
|
|
padding: 12px 30px;
|
|
}
|
|
|
|
.btn-big {
|
|
padding: 10px 45px;
|
|
}
|
|
|
|
.btn:hover,
|
|
.btn:focus {
|
|
background-color: gray;
|
|
color: white;
|
|
}
|
|
|
|
.tm-media-img {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
|
|
.tm-fa-toggler-icon {
|
|
font-size: 30px;
|
|
padding: 0;
|
|
color: gray;
|
|
}
|
|
|
|
.tm-2col-l {
|
|
padding-right: 40px;
|
|
}
|
|
.tm-2col-r {
|
|
padding-left: 40px;
|
|
}
|
|
|
|
.form-control {
|
|
border-radius: 0;
|
|
font-size: 1.2rem;
|
|
padding: 13px 19px;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: #b5b5b5;
|
|
box-shadow: 0 0 0 0.2rem #a3a3a329;
|
|
}
|
|
|
|
.form-control::placeholder {
|
|
/* Chrome, Firefox, Opera, Safari 10.1+ */
|
|
color: #666666;
|
|
opacity: 1;
|
|
/* Firefox */
|
|
}
|
|
|
|
.form-control:-ms-input-placeholder {
|
|
/* Internet Explorer 10-11 */
|
|
color: #666666;
|
|
}
|
|
|
|
.form-control::-ms-input-placeholder {
|
|
/* Microsoft Edge */
|
|
color: #666666;
|
|
}
|
|
|
|
.form-control::placeholder {
|
|
/* Chrome, Firefox, Opera, Safari 10.1+ */
|
|
color: #666666;
|
|
opacity: 1;
|
|
/* Firefox */
|
|
}
|
|
|
|
.form-control:-ms-input-placeholder {
|
|
/* Internet Explorer 10-11 */
|
|
color: #666666;
|
|
}
|
|
|
|
.form-control::-ms-input-placeholder {
|
|
/* Microsoft Edge */
|
|
color: #666666;
|
|
}
|
|
|
|
/* Loader */
|
|
|
|
#loader-wrapper {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2000;
|
|
}
|
|
#loader {
|
|
display: block;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 150px;
|
|
height: 150px;
|
|
margin: -75px 0 0 -75px;
|
|
border-radius: 50%;
|
|
border: 3px solid transparent;
|
|
border-top-color: #3498db;
|
|
|
|
-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
|
|
animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
|
|
|
|
z-index: 1001;
|
|
}
|
|
|
|
#loader:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
right: 5px;
|
|
bottom: 5px;
|
|
border-radius: 50%;
|
|
border: 3px solid transparent;
|
|
border-top-color: #e74c3c;
|
|
|
|
-webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
|
|
animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
|
|
}
|
|
|
|
#loader:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 15px;
|
|
right: 15px;
|
|
bottom: 15px;
|
|
border-radius: 50%;
|
|
border: 3px solid transparent;
|
|
border-top-color: #f9c922;
|
|
|
|
-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
|
|
animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
|
|
}
|
|
|
|
@-webkit-keyframes spin {
|
|
0% {
|
|
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
|
|
-ms-transform: rotate(0deg); /* IE 9 */
|
|
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
|
|
-ms-transform: rotate(360deg); /* IE 9 */
|
|
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
|
|
}
|
|
}
|
|
@keyframes spin {
|
|
0% {
|
|
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
|
|
-ms-transform: rotate(0deg); /* IE 9 */
|
|
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
|
|
-ms-transform: rotate(360deg); /* IE 9 */
|
|
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
|
|
}
|
|
}
|
|
|
|
#loader-wrapper .loader-section {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 51%;
|
|
height: 100%;
|
|
background: #222222;
|
|
z-index: 1000;
|
|
-webkit-transform: translateX(0); /* Chrome, Opera 15+, Safari 3.1+ */
|
|
-ms-transform: translateX(0); /* IE 9 */
|
|
transform: translateX(0); /* Firefox 16+, IE 10+, Opera */
|
|
}
|
|
|
|
#loader-wrapper .loader-section.section-left {
|
|
left: 0;
|
|
}
|
|
|
|
#loader-wrapper .loader-section.section-right {
|
|
right: 0;
|
|
}
|
|
|
|
/* Loaded */
|
|
.loaded #loader-wrapper .loader-section.section-left {
|
|
-webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
|
|
-ms-transform: translateX(-100%); /* IE 9 */
|
|
transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */
|
|
|
|
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
}
|
|
|
|
.loaded #loader-wrapper .loader-section.section-right {
|
|
-webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */
|
|
-ms-transform: translateX(100%); /* IE 9 */
|
|
transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */
|
|
|
|
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
}
|
|
|
|
.loaded #loader {
|
|
opacity: 0;
|
|
-webkit-transition: all 0.3s ease-out;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
.loaded #loader-wrapper {
|
|
visibility: hidden;
|
|
|
|
-webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
|
|
-ms-transform: translateY(-100%); /* IE 9 */
|
|
transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */
|
|
|
|
-webkit-transition: all 0.3s 1s ease-out;
|
|
transition: all 0.3s 1s ease-out;
|
|
}
|
|
|
|
/* JavaScript Turned Off */
|
|
.no-js #loader-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (max-width: 1199px) {
|
|
.tm-2col-l {
|
|
padding-right: 30px;
|
|
}
|
|
.tm-2col-r {
|
|
padding-left: 30px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 991px) {
|
|
.tm-img-container {
|
|
max-width: 490px;
|
|
width: 90%;
|
|
}
|
|
.tm-address-box {
|
|
padding-left: 10px;
|
|
}
|
|
.fit {
|
|
margin-bottom: 50px;
|
|
}
|
|
.tm-slider-caption {
|
|
font-size: 1rem;
|
|
padding: 8px 10px;
|
|
}
|
|
.tm-2col-l {
|
|
padding-right: 20px;
|
|
}
|
|
.tm-2col-r {
|
|
padding-left: 20px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
/* .navbar {
|
|
justify-content: flex-end;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 1000;
|
|
flex-direction: column;
|
|
align-items: end;
|
|
} */
|
|
#mainNav {
|
|
top: 90px;
|
|
right: 30px;
|
|
}
|
|
|
|
.tm-2col-l {
|
|
padding-right: 15px;
|
|
}
|
|
.tm-2col-r {
|
|
padding-left: 15px;
|
|
}
|
|
.tm-address-box {
|
|
padding-left: 0;
|
|
padding-top: 40px;
|
|
}
|
|
.tm-form-section {
|
|
padding-top: 80px;
|
|
padding-bottom: 100px;
|
|
}
|
|
.tm-box-5 {
|
|
padding-top: 25px;
|
|
padding-bottom: 25px;
|
|
}
|
|
.tm-section-mb {
|
|
margin-bottom: 60px;
|
|
}
|
|
.tm-mb-sm-4 {
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 540px) {
|
|
.tm-address-box {
|
|
margin-bottom: 50px;
|
|
}
|
|
.tm-page-4-content {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.tm-slider-caption {
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.tm-slider-col {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 430px) {
|
|
.tm-media {
|
|
flex-direction: column;
|
|
}
|
|
/* .navbar {
|
|
padding: 0;
|
|
} */
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.tm-contact-right {
|
|
padding-left: 40px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.container {
|
|
max-width: 1310px;
|
|
}
|
|
} |