/*
Theme Name: Dental Clinic Promotions
Theme URI: http://www.drjoydentalclinic.com
Author: Vivek
Author URI: http://vivek.expert/
Description: 
Version: 1.0.1
License: Split License
License URI: http://www.gnu.org/licenses/gpl-3.0.html
#3b201c brown
#2f2424 grey
#f16623

    font-family: Roboto, 'Helvetica Neue', Helvetica, sans-serif;
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
#hero h1 {
    margin: 0;
    font-size: 3em;
    font-weight: 600;
    line-height: 1.25;
    color: #0a2343;
    font-family: "Poppins", sans-serif;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    width: 50%;
}
.invisalign-logo{ width: 3em !important; }
.invisalign-logo img{ max-width: 20em !important; }
#hero h6 { color: #00adee; margin-top: 0em !important; font-size: 2em; font-weight: 600; }
#hero span { color: #0a2343; margin-top: 0.5em !important; font-size: .85em; display: block; }
#hero h2 { font-weight: 500 !important; }
#hero h5 { color: #0a2343; margin: 5px 0 5px 0; font-size: 19px; font-weight: 500; }

#offer { background: #0a2343; padding: 30px 0px !important; }
#offer h5 { color: #fff !important; text-align: center; font-weight: 500; line-height: 1.4; }
#offer h6 {  color: #fff !important;  text-align: center;  font-weight: 100; line-height: 1;  font-size: 1.25em; }
.listedstyle {
     display: flex;
    grid-template-columns: repeat(2,1fr);
    /* grid-gap: 1.5rem; */
    margin-bottom: 0px;
    /* justify-content: center; */
    justify-content: space-around;
    text-align: center;
    align-items: center;
}
.listedstyle li {
    display: flex;
    list-style: none !important;
    font-size: 1.15em;
    color: #fff;
    width: 20rem;
}
.listedstyle p {
    line-height: 1.25;
    text-align: left;
    margin-bottom:0px;
}
.listedstyle span {
    font-size: 2em;
    width: 2em;
    float: left;
    margin-right: 0.25em;
}
.listedstyle sup {
    top: -0.95em;
    font-size: .5em;
}
/*.listedstyle p {
    line-height: 1.2;
    text-align: left;
    vertical-align: middle;
    left: 4em;
    position: absolute;
    top: 50%;
    transform: translateY(-45%);
}*/
/*.listedstyle{
display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 1.5rem; margin-bottom: 0px; }
.listedstyle li{ list-style: none !important; font-size: 1.15em; color: #fff; }*/
#offer { background: #0a2343; padding: 30px 0px !important; z-index: 9 !important; position: relative; }

.vid-main-wrapper .title { width: 100%; max-width: 854px; margin: 0 auto; }
.vid-main-wrapper .caption { width: 100%; max-width: 854px; margin: 0 auto; padding: 20px 0; }
.vid-main-wrapper { width: 100%; max-width: 1100px; min-width: 440px; background: #000; margin: 0 auto; border-radius: 7px; }
      /*  VIDEO PLAYER CONTAINER
    ############################### */
.vid-container {  position: relative; padding-bottom: 52%; padding-top: 30px; height: 0; width:70%; float:left; }
.vid-container iframe, .vid-container object, .vid-container embed { position: absolute; top: 0; left: 0; width: 100%; min-height: 360px; }
.vid-container iframe { border-top-left-radius: 7px; border-bottom-left-radius: 7px; }
.vid-list-container{border-top-right-radius: 7px; border-bottom-right-radius: 7px;   }
/*  VIDEOS PLAYLIST  ############################### */
.vid-list-container { width: 30%; height:360px; overflow: hidden; float:right; background: #222; }
.vid-list-container:hover, .vid-list-container:focus { overflow-y: auto; }
ol#vid-list {  margin:0;padding:0; background: #222; }
ol#vid-list li { list-style: none; }
ol#vid-list li a { text-decoration: none; background-color: #222; height:55px; display:block; padding:10px; }
ol#vid-list li a:hover { background-color:#666666; }
.vid-thumb {float:left; margin-right: 8px; }
.active-vid { background:#3A3A3A; }
#vid-list .desc { color: #CACACA; font-size: .75em; line-height: 1em; }

@media (max-width: 624px) { .vid-list-container { padding-bottom: 20px; } 
.make_second{ margin-top:1em !important; }
.vid-list-container {
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    height: 8em !important;
    overflow-y: scroll;
    width: 100%;
    padding-top: 20px !important;
    border-top-right-radius: 0px;
}
.vid-container iframe {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom-left-radius: 0px;
}
.vid-container {
    width: 100%;
    padding-bottom: 95% !important;
}
.vid-main-wrapper {
    width: 100% !important;
    min-width: 100%;
}

.header_container{margin-top:5em !important;}
.carousel-item { height: 300px; min-height: 300px; }
.carousel-caption h5 { font-size: 1em !important; line-height: 1.35; }

.carousel-item .form-btn{ display: none !important; }
.carousel-item{ background-position: 30% 50% !important; }
.carousel-caption{ left: 2% !important; }
.carousel-control-next, .carousel-control-prev{ width:5% !important; }
#hero h1{ font-size: 1.5em !important; }
#hero h6{ font-size: 1.2em !important; color: #00adee !important; }
.invisalign-logo img { max-width: 10em !important; }
.banner_content { margin-top: 3% !important;}
 #offer{ padding-top:60px !important; }
 .listedstyle{ display: grid; grid-template-columns: repeat(1,1fr); grid-gap: .5rem; margin-bottom: 0px; padding-left: .5em !important;}
.listedstyle li{ font-size: .95em !important; }
#contact_form{ padding-top: 5em !important; padding-bottom: 2.5em; }

}

@media screen and (max-width: 768px){
  /*      #offer { color: #0a2343; padding: 0px 0px 30px 0px !important; background: none !important; }
    .listedstyle li{ color: #0a2343; }*/
    #offer .listedstyle{ margin-left: 4em; }
/*    #offer h5{ color: #0a2343 !important; }*/
#offer {
    padding-top: 30px !important;
}
}