/* ============================================================================
   templatemo.css - GLOBAL site-wide stylesheet (loaded on EVERY page)
   ============================================================================
   Loaded by:  ALL pages automatically via partials/header.php (do not add it
               to any page's $extraCss - it is already there).
   Purpose:    Base typography (.h1, .h2, .h2-welcome, .text-content, .py-2),
               .brand-title gradient, contact-form styles, td/th table rules,
               plus the former custom.css utility rules (.flex-parent,
               .input-hint, .underline-*, .card-title, ...).
   Rule:       Put NEW site-wide styles here (they apply to every page).
   ============================================================================ */

/* Typography */
body{
  color: #101010;
}
ul, li, a, label, input, div {
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  font-weight: 300;
}
p {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 300;
}
.slogan {
  font-family: 'Roboto', sans-serif;
  font-size: 19px;
  font-weight: 300;
}

.normal-font{
  font-size: 17px;
  font-weight: 300;
}
.normal-font-copyright{
  font-size: 16px;
  font-weight: 300;
}

.h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 48px !important;
  font-weight: 200 !important;
}
.brand-title {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(90deg,#7209d4, #198754, #2832d4, #00a5b2);
  color: #0000;
}
.h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px !important;
  font-weight: 300;
}
.h2-welcome {
  font-family: 'Roboto', sans-serif;
  font-size: 30px !important;
  font-weight: 300;
  text-align: center;
  margin-top: 1px;
}
.text-content {
  margin: 10px Auto;
  width: 96%;
}
.text-content-2 {
  margin: 12px Auto;
  width: 96%;
}
.py-2 {
  padding-top: .7rem !important;
  padding-bottom: .7rem !important;
}
.h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px !important;
}
cite {
  padding: 1px 5px 1px 10px;
  border-left: 5px solid #78C0A8;
  background: #ededed;
  font-weight: bold;
  font-style: normal;
}
mark { 
  background-color: rgb(15, 232, 112);
}
.highlight-red {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(-100deg,rgba(255, 20, 0, 0.2),rgba(255, 20, 0, 0.7) 95%,rgba(255, 20, 0, 0.1));
}
.highlight-yellow {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(-100deg,rgba(255, 224, 0, 0.2),rgba(255, 224, 0, 0.7) 95%,rgba(255, 224, 0, 0.1));
}
.highlight-green {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(-100deg,rgba(0, 255, 20, 0.2),rgba(0, 255, 20, 0.7) 95%,rgba(0, 255, 20, 0.1));
}

.highlight-blue {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(-100deg,rgba(0,123,255,0.2),rgba(0,123,255,0.7) 95%,rgba(0,123,255,0.1));
}

.highlight-purple {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(-100deg,rgba(123,0,255,0.2),rgba(123,0,255,0.7) 95%,rgba(123,0,255,0.1));
}

.highlight-orange {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(-100deg,rgba(255,123,0,0.2),rgba(255,123,0,0.7) 95%,rgba(255,123,0,0.1));

}

.highlight-pink {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(-100deg,rgba(255,0,123,0.2),rgba(255,0,123,0.7) 95%,rgba(255,0,123,0.1));
}

.highlight-teal {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(-100deg,rgba(0,255,191,0.2),rgba(0,255,191,0.7) 95%,rgba(0,255,191,0.1));
}

/* General */
.faq {font-weight: 400 !important; }
.logo { font-weight: 500 !important;}
.text-warning {  color: #ede861 !important;}
.text-answer {  color: #2a7e3f !important;}
.text-muted { color: #bcbcbc !important;}
.text-success { color: #2a7e3f !important;}
.text-success-footer { color: #22a142 !important;}
.text-light { color: #cfd6e1 !important;}
.text-white { color: #ffffff !important;}
.text-blue { color: #0d6efd !important;}
.text-highlight { color: #cc118e !important;}
.bg-dark { background-color: #1e242c !important;}
.bg-light { background-color: #e9eef5 !important;}
.bg-black { background-color: #1d242d !important;}
.bg-green { background-color: #2ea34c !important;}
.bg-success { background-color: #2ea34c !important;}

.text-faq {color: #0f5c23; font-weight: 400;}

/* Nav */
#templatemo_nav_top { min-height: 34px;}
#templatemo_nav_top * { font-size: .93em !important;}
#templatemo_nav_top .fa-envelope,
#templatemo_nav_top .fa-phone { color: #2ea34c;}
#templatemo_nav_top .nav-social a { transition: color .25s ease-in-out;}
#templatemo_nav_top .nav-social i { transition: transform .25s ease-in-out;}
#templatemo_nav_top .nav-social a:hover { color: #2ea34c !important;}
#templatemo_nav_top .nav-social a:hover i { transform: scale(1.2);}
#templatemo_main_nav a { color: #1e242c;}
#templatemo_main_nav a:hover { color: #69bb7e;}
#templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}

/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Footer */
#tempaltemo_footer a { color: #dcdde1;}
#tempaltemo_footer a:hover { color: #68bb7d;}
#tempaltemo_footer ul.footer-link-list li { padding-top: 7px;}
#tempaltemo_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}
#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: .5s;
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}
#tempaltemo_footer .border-light { border-color: #2d343f !important;}

/* Footer font-size: 1px smaller than the site-wide base, scoped to the footer block only (footer-sm) */
#tempaltemo_footer.footer-sm div,
#tempaltemo_footer.footer-sm a,
#tempaltemo_footer.footer-sm li { font-size: 16px;}
#tempaltemo_footer.footer-sm p { font-size: 17px;}
#tempaltemo_footer.footer-sm .normal-font { font-size: 16px;}
#tempaltemo_footer.footer-sm .normal-font-copyright { font-size: 16px;}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px;}
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {max-width: 550px;}
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}
.image-container {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
	width: 100%;
	border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}

.responsive-image{
	max-width:100%;
	height:auto;
}

.ul-contact{
	list-style-type: none;
	
}

.contact-form-control {
    display: block;
    width: 100%;
	border: 1px solid #59ab6e;
	margin-bottom:20px;
    padding: .7rem .7rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border-radius: .25rem;	
}

.card-title {
    text-decoration: none;
    color: #212529;
}

.card-blog-title:hover {
    text-decoration: underline #3e8e41 2px;
    color: #212529;
}

td, th {
    border-color: inherit;
    border-style: solid;
    border-width: 1px;
    font-size: 1.1rem;
    font-weight: 400;
}

.element-center {
    display:flex;
    justify-content: center;
    align-items: center;
}

.element-right {
    position: relative;
    float: right;
}

.flex-parent {
    display: flex;
    width: 100%;
}

.flex-child {
    flex: 1;
    text-align: left;
    margin: 10px 4px 4px 4px;
}

.flex-child:first-child {
    margin-right: 20px;
  }

.unicode-text {
    font-size: 5rem;
}

.input-hint {
    font-size: 80%;
    color: #24292f;
    margin: .25rem 0 0;
    display: block;
}

.underline-wavy {
    text-decoration: underline wavy #2196f3;
}

.underline-overline-wavy {
    text-decoration: underline overline wavy #4caf50;
}

.underline-dashed {
    text-decoration: underline dashed #ff9800;
}

.underline-solid {
    display: inline;
    border-bottom: 2px solid #4caf50;
}

