/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

/*=======================================================================================================================
        Category page css
=========================================================================================================================*/

.ys-btn {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    background-color: #D7BD5B;
    border: 1px solid #D7BD5B;
    border-radius: 6px;
    padding: 16px 55px !important;
    cursor: pointer;
}

.ys-btn:hover {
    color: #D7BD5B;
    background-color: transparent;
}

/* seciton padding */


/* list styling */
.ys-sec1 ul {
    padding-left: 0px !important;
}

ul li {
    list-style-type: none;
    padding-left: 0px;
    display: inline;
    padding-right: 45px;
}

.ys-sec1 ul li a {
    font-size: 20px;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    color: #404040;
    text-decoration: none;
}

.ys-sec1 ul li a:focus {
    color: #D7BD5B;
    border-bottom: 2px solid #D7BD5B;
}

.ys-sec1 ul li a:hover {
    color: #D7BD5B;
    border-bottom: 2px solid #D7BD5B;
}

.ys-slider {
    display: flex;
}

.ys-col1 {
    width: 50%;
}

.ys-img {
    max-width: 100%;
}

.ys-sec2 {
    padding: 25px 50px;
}

.ys-arrow {
    padding-top: 40px;
}

.ys-left-arrow {
    padding-right: 14px;
}

.ys-main {
    display: flex;
    padding-top: 40px;
    padding-bottom: 80px;
}

.ys-col33 {
    width: 33.33%;
    max-width: 100%;
}

.ys-col-3 {
    background-color: #fff;
    margin: 10px;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.05);
}

.ys-3col {
    padding: 35px 20px;
}

.ys-main-2 {
    background-color: #404040;
    padding-top: 20px;
    padding-bottom: 20px;
}

.ys-white {
    color: #fff;
}

.ys-sec3 {
    padding-right: 12%;
    padding-left: 50px;
    padding-top: 25px;
}

.ys-cta {
    padding: 40px 0px 60px 0px;
}

.ys-main3 {
    background-color: #404040;
    text-align: center;
}

.ys-space {
    padding-bottom: 35px;
}

.ys-link {
    font-size: 20px;
    font-weight: 700;
    color: #404040;
    font-family: 'Roboto', sans-serif;
    margin-right: 0px;
    text-decoration: none;
}

.col50 {
    width: 50%;
    max-width: 100%;
}

.ys-link:hover {
    color: #D7BD5B;
}

.ys-sec5 {
    display: flex;
    padding-top: 60px;
    padding-bottom: 30px;
}

.ys-col-50 {
    width: 100%;
    max-width: 100%;
}

.ys-m1 {
    margin-left: 0px;
}

.ys-flex {
    display: flex;
    width: 50%;
    max-width: 100%;
    overflow: hidden;
}

.ys-flex1 {
    display: flex;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.ys-flex3 {
    display: flex;
    overflow: hidden;
    width: 33.33%;
    max-width: 100%;
}

.ys-col25 {
    width: 50%;
    max-width: 100%;
}

.ys-h {
    font-size: 20px;
}

.ys-p {
    font-size: 16px;
}

.ys-col-4 {
    margin: 10px;
}

.ys-4col {
    padding-top: 15px;
}

.ys-main5 {
    display: flex;
    padding-bottom: 40px;
}

.ys-main6 {
    display: flex;
    padding-bottom: 60px;
}

.ys-main7 {
    background-color: #FAFAFA;
    padding: 60px 0px;
}

.ys-black {
    color: #404040;
    margin-left: 0px;
}

.ys-cta2 {
    display: flex;
}

.ys-mar {
    text-align: right;
}

.ys-cta2 a {
    margin-right: 0px;
}

/* Responsive Media Queries */
@media only screen and (min-width: 1150px) and (max-width: 1650px) {
    .ys-sec3 {
        padding-right: 5%;
        padding-left: 50px;
        padding-top: 25px;
    }
}

@media only screen and (max-width: 1024px) {

    /* body{
        padding-left: 10px;
        padding-right: 10px;
    } */
    .ys-col1 {
        width: 100%;
    }

    .ys-slider {
        flex-direction: column;
    }

    .ys-sec2,
    .ys-sec3 {
        padding: 30px;
    }

    .ys-main5,
    .ys-main6 {
        flex-direction: column;
    }

    .ys-main {
        flex-direction: column;
    }

    .ys-flex1 {
        width: 100%;
        max-width: fit-content;
    }

    .ys-sec1 {
        padding: 30px 10px 30px 10px;
    }

    .ys-col33 {
        width: 48%;
    }

    .ys-flex {
        width: 100%;
    }

    .ys-cta2 {
        flex-direction: column;
    }

    .ys-black {
        margin: 0px auto;
        margin-bottom: 30px;
    }

    .ys-cta2 a {
        margin: 0px auto;
    }

    .ys-col-4 {
        margin-bottom: 20px;
    }

    .ys-sec5 {
        padding: 40px 15px;
    }

    .ys-flex3 {
        width: 50%;
        margin-left: 0px;
    }

}

@media only screen and (max-width: 767px) {
    ul li {
        padding-right: 15px;
    }

    .ys-sec1 {
        padding: 20px 10px;
    }

    h2 {
        font-size: 35px;
    }

    .ys-sec2 {
        padding: 20px;
    }

    .ys-flex1 {
        flex-direction: column;
    }

    .col50 {
        width: 100%;
    }

    .ys-col33 {
        width: 100%;
    }

    .ys-flex {
        flex-direction: column;
    }

    .ys-col25 {
        width: 100%;
    }

    .col50 {
        width: 100%;
    }

    .ys-blog {
        padding-left: 10px;
        padding-right: 10px;
    }

    .ys-col-4 {
        margin: 0px;
        margin-bottom: 30px;
    }

    .ys-main5,
    .ys-main6 {
        padding-bottom: 0px;
    }

    h6 {
        font-size: 25px;
    }

    .ys-link {
        font-size: 18px;
        line-height: 1.7em;
    }

    .ys-sec5 {
        padding: 30px 0px;
    }

    .ys-main-2 {
        padding: 20px 0px 0px 0px;
    }

    .ys-col-3 {
        margin: 0px;
        margin-bottom: 30px;
    }

    .ys-main {
        padding-left: 10px;
        padding-right: 10px;
    }

    h4 {
        font-size: 30px;
    }

    .ys-flex3 {
        width: 100%;
    }

    .ys-black {
        text-align: center;
        padding: 0px 10px
    }

    .ys-main7 {
        padding: 30px 0px
    }
}

.swiper.featureSlider .ys-arrow {
    bottom: 100px;
    /*padding-top: 80px;*/
    position: relative;
    z-index: 9;
    left: 54%;
}

.ys-arrow img {
    cursor: pointer;
}

.ys-arrow .swiper-button-disabled {
    opacity: 0.5;
}

.relatedTopicSlider {
    position: relative;
}

.relatedTopicSlider .ys-arrow {
    /*padding-top: 80px;*/
    position: relative;
    left: 53%;
    bottom: 50px;
    z-index: 9;
}
.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: unset !important;
    box-sizing: content-box; 
}
.ys-main .ys-img {
    max-width: 100%;
    height: 260px !important;
    width: 100% !important;
    object-fit: cover !important;
}

#insight .ys-flex1 {
    flex-wrap: wrap !important;
}

#insight .ys-flex1 .ys-col-4 {
    margin: 0px !important;
}

#insight .ys-col25.ys-col-4 .ys-img {
    max-width: 100%;
    height: 260px !important;
    width: 100% !important;
    object-fit: cover !important;
}

#insight .ys-4col {
    padding-top: 15px;
    text-align: left;
}

.ys-flex1 .ys-col25 {
    width: calc(100%/4);
    padding: 10px;
    text-align: center;
    margin-bottom: 20px;
}

.ys-cta h4{
    font-size: 36px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    line-height: 1.2em;
}
#overview .ys-col1 h2 a, 
#overview .ys-main artcle h3 a,
#insight .ys-main5 h3 a {
    color: #404040 !important;
}
#overview .ys-col1 h2 a:hover, 
#overview .ys-main artcle h3 a:hover,
#insight .ys-main5 h3 a:hover {
    color: #D7BD5B !important;
}
.ys-main-2 .ys-white a{
    color: #fff !important;
}
.ys-main-2 .ys-white a:hover{
    color: #D7BD5B !important;
}
@media only screen and (max-width: 767px) {
    .ys-flex1 .ys-col25 {
        width: calc(100%/1);
        padding: 10px;
        text-align: center;
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 1024px) {
    .ys-flex1 .ys-col25 {
        width: calc(100%/2);
        padding: 10px;
        text-align: center;
        margin-bottom: 20px;
    }
}

/*customizer css*/

/* ---------------- start css removed ----------------- */

/*

.container-wrap,
div#header-outer,
div#footer-outer {
    transform: translate(0px, 0px) !important;
}

#slide-out-widget-area.slide-out-from-right {
    position: fixed;
    transform: translate(401px, 0px);
    -webkit-transform: translate(301px, 0px);
    -ms-transform: translate(301px, 0px);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    padding: 0px 0px 0px 0px !important;
    overflow: hidden;
}

div#slide-out-widget-area {
    transform: translate(-100%, 0px) !important;
}

div#slide-out-widget-area.open {
    transform: translate(0px, 0px) !important;
}

#slide-out-widget-area.slide-out-from-right {
    background: #313131 !important;
}

div#slide-out-widget-area .topSideHeader img {
    filter: brightness(0) invert(100);
    padding-top: 15px;
}

div#slide-out-widget-area .topSideHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #858585;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 0px;
}

#slide-out-widget-area .topSideHeader .slide_out_area_close {
    position: relative !important;
    right: 0 !important;
    top: 0 !important;
}

#slide-out-widget-area .inner>div:first-of-type {
    margin-top: 0px !important;
    margin-left: 10px;
}
.admin-bar #slide-out-widget-area .inner>div:first-of-type {
    margin-top: 50px !important;
    margin-left: 10px;
}

#slide-out-widget-area .Image_Divider {
    width: 80%;
    border-left: 2px solid #585858;
    padding-left: 30px;
}
*/

/* change off canvas menu BG color */
#slide-out-widget-area {
	background-color:#000;
}

/*  ---------------- end css removed   ---------------- */


div#tab-content {
    width: 80%;
    height: 100%;
    background: #ffff;
}

.leftSide {
    width: 20%;
}

div#slide-out-widget-area {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
}

.search {
    position: relative;
    color: #aaa;
    font-size: 16px;
}

.search {
    display: block;
}

.search input {
    width: 100%;
    height: 80px;
    background: #fff;
    border: 0px solid #aaa;
    border-radius: 0px;
    box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}

.search input {
    text-indent: 32px;
}

.search .fa-search {
    position: absolute;
    top: 30px;
    left: 20px;
}

.search .fa-search {
    left: auto;
    right: 30px;
}

.tb_content {
    padding: 40px;
}

.tb_content h2 {
    border-bottom: 1px solid;
    padding-bottom: 30px;
}

.page-header-bg-image.lazyloaded {
    transform: translate(0px, 0px) !important;
}


@media only screen and (max-width: 1440px) {
    .leftSide {
        width: 25%;
    }
    div#tab-content {
        width: 75%;
        height: 100%;
        background: #ffff;
    }
    .search input {
        width: 100%;
        height: 74px;
    }    
} 
/* NEW CSS START */
@media screen and (max-width: 576px) {
    .leftSide {
      width: 100%;
  }
      div#tab-content{
          display:none;
      }
      ul.sub-menu {
      position: relative !important;
      left: 30px !important;
      background: transparent !important;
      display: block !important;
      }
          .leftSide ul.menu>li {
              height: unset !important;
  
      }
      
  }
      
  @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
      .leftSide ul li a, #tab-content ul li a {
      font-size: 15px !important;
  }
      #tab-content .tb_content{
          padding:0px !important;
      }
      body .tb_content ul.items li{
          padding-right:0px;
      }
  }
  
  /* Single Pages Start (e,g. education) */
  #overview .ys-slider .ys-col1 h2{
      font-size: 35px;
  line-height: 45px;
  }
  .ys-sec1 ul {
      margin-left: 0px;
  }
  #overview .ys-main artcle h3{
      font-weight:500;
      font-size: 24px;
      line-height: 32px;
  }
  #overview .ys-main artcle p{
      font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  }
  #overview .ys-main artcle h5{
      font-size: 14px;
  line-height: 16px;
      color: #7A7A7A;
  }
  #insight .ys-main5 h3{
      font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: #404040;
  }
  
  #insight .ys-main5 h5{
      font-size: 16px;
  line-height: 28px;
  }
  #connect .ys-cta2 {
      justify-content: space-between;
  }
  #insight .ys-sec5 {
      justify-content: space-between;
  }
  .ys-main3 .ys-btn{
      color: #D7BD5B;
      background-color: transparent;
  }
  .ys-main3 .ys-btn:hover{
      color: #fff;
      background-color: #D7BD5B;
  }
  #insight .ys-sec5 h6.ys-m1 {
      font-size: 28px;
      line-height: 40px;
      color: #404040;
  }
  @media screen and (max-width: 576px){
      .ys-flex1 .ys-col25 {
        width: calc(100%/1);
  	  }
  }
  /* Single Pages End (e,g. education) */

.featureSlider .swiper-slide{
	height:316px;
	overflow:hidden;
}

.relatedTopicSlider .swiper-slide {
	height:370px;
	overflow:hidden;
}
/* NEW CSS END */