@charset "utf-8";
/* CSS Document */
.okr-tutorial-videos .container{padding: 0px 15px;}
.okr-tutorial-videos #r-banner {background: #F8F7FF;padding: 40px 0px 0px;min-height: 510px;margin-top: 65px;}
.okr-tutorial-videos #r-banner h1 {color: #5A4D9F;font-family: o-medium;font-weight: 600;font-size: 64px;margin-top: 100px;margin-bottom: 20px;word-wrap: break-word;}
.okr-tutorial-videos #r-banner p{font-family: o-regular;font-size: 24px;}
.okr-tutorial-videos #r-banner img{z-index: 1;position: relative;}
.okr-tutorial-videos #r-banner .right-image{background-color: #F4EDE4;background-clip: border-box;height: 300px;border-radius: 200px 0px 0px 200px;width: 38%;position: absolute; right: 0;top: 170px;}
.okr-tutorial-videos #r-banner{position: relative;}
.okr-tutorial-videos #okr-tuv{margin-bottom: 70px;margin-top: 100px;}
.okr-tutorial-videos #okr-tuv h2 {color: #2B2B2B;font-family: l-bold;font-size: 44px;margin-bottom: 40px;}
.okr-tutorial-videos #okr-tuv .content {border-radius: 15px;box-shadow: 0px 3px 6px #dbdbdb;border: 1px solid #dbdbdb;margin-bottom: 30px;position: relative;cursor: pointer;}
.okr-tutorial-videos #okr-tuv .content img {width: 100%;border-radius: 14px;}
.okr-tutorial-videos #okr-tuv .content div{padding: 25px 30px 30px;}
.okr-tutorial-videos #okr-tuv .content div .heading {font-size: 18px;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;min-height: 81px;}
.okr-tutorial-videos #okr-tuv .content .r-more {color: #5A4D9F;text-decoration: none;font-size: 16px;font-family: l-bold;background: url("../img/r-more.svg");background-repeat: no-repeat;background-position: right;background-size: 22px;
padding: 0px 40px 0px 0px;height: auto;display: inline-block;}
.okr-tutorial-videos #okr-tuv .content .date {float: right;margin-top: 3px;color: #B0AFAF;font-family: l-bold;font-size: 16px;}
.okr-tutorial-videos #okr-tuv .auth-name {position: absolute;top: 160px;left: 20px;font-size: 17px;font-family: l-bold;text-transform: uppercase;}
.okr-tutorial-videos #okr-tuv .company {position: absolute;top: 205px;left: 20px;font-size: 12px;font-family: l-bold;}
.okr-tutorial-videos #okr-tuv .role {position: absolute;top: 186px;left: 20px;font-size: 12px;font-family: l-bold;}
/*modal-start*/
.okr-tutorial-videos .vid-wrapper {text-align: center;padding: 20px;}
.okr-tutorial-videos .vid {display: inline-block;vertical-align: top;position: relative;border: 1px solid;padding: 2px;cursor: pointer;}
.okr-tutorial-videos .vid::before {content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.okr-tutorial-videos h2.vid-head {font-size: 20px;color: #333;}
/* Video Popup */
.okr-tutorial-videos .video-popup {position: fixed;top: 0;right: 0;bottom: 0;left: 0;display: flex;justify-content: center;align-items: center;z-index: 998;background: rgba(0, 0, 0, .7);cursor: pointer;display: none !important;}
.okr-tutorial-videos .video-popup.show-video {display: flex !important;}
.okr-tutorial-videos .iframe-wrapper {position: relative;}
.okr-tutorial-videos .iframe-wrapper .close-video {content: '';position: absolute;width: 25px;height: 25px;top: -20px;right: 0;background: url(https://image.flaticon.com/icons/svg/149/149690.svg) #fff;border-radius: 50%;background-size: cover;}
.okr-tutorial-videos #okr-tv-modal .modal-content{width: 700px;}
.okr-tutorial-videos #okr-tv-modal .modal-dialog{margin: 0 auto;width: 700px;max-width: 700px;}
.okr-tutorial-videos #okr-tv-modal .modal-content {width: 700px;background-color: transparent;border: none;margin-top: 85px;position: relative;}
.okr-tutorial-videos #okr-tv-modal .modal-body{padding: 0px;}
.okr-tutorial-videos #okr-tv-modal .modal-content button{color: #fff;background-color: #fff;width: 25px;height: 25px;border-radius: 50%;position: absolute;right: -15px;z-index: 1;opacity: 100;top: -15px;box-shadow: 0px 3px 6px #00000036 !important;font-size: 12px;}
.okr-tutorial-videos #okr-tuv .content img{cursor: pointer;}
.okr-tutorial-videos #okr-tv-modal .modal-body iframe{width: 700px;height: 450px;}
.okr-tutorial-videos #okr-tv-modal {background-color: rgba(0,0,0,0.5);}
/*modal-end*/
@media (min-width: 992px) and (max-width:1199px) {
.okr-tutorial-videos #okr-tuv h1 {margin-top: 27px;}	
.okr-tutorial-videos .banner-image img{width: 100%;right: 0px!important;position: relative!important;top: 40px!important;}
.okr-tutorial-videos #r-banner .right-image {top: 120px;}
.okr-tutorial-videos #okr-tuv .c-content {padding: 30px;}
.okr-tutorial-videos #okr-tuv .title {font-size: 20px;}
.okr-tutorial-videos #okr-tuv .content .date {margin-top: 0px;}
.okr-tutorial-videos #okr-tuv .company {top: 172px;}
.okr-tutorial-videos #okr-tuv .role {top:   146px;}
.okr-tutorial-videos #okr-tuv .auth-name {top: 115px;}
}
@media (min-width: 768px) and (max-width:991px) {
.okr-tutorial-videos .container{width: 100%}
.okr-tutorial-videos .col-md-5, #okr-tuv .col-md-7{width: 100%;}
.okr-tutorial-videos .banner .banner-content h1 {margin-top: 150px;}
.okr-tutorial-videos #r-banner {padding: 20px 0px 60px;min-height: auto;}
.okr-tutorial-videos #r-banner img {position: relative;right: 0px;bottom: 0px;top: 0px;width: 100%;}
.okr-tutorial-videos #r-banner .right-image {display: none;}
.okr-tutorial-videos #r-banner {min-height: auto;}
.okr-tutorial-videos #r-banner h1 {margin-top: 15px;}
.okr-tutorial-videos #okr-tuv .col-md-4 {width: 50%;}
.okr-tutorial-videos #okr-tuv .col-md-5, #r-banner .col-md-7{width: 100%;}
.okr-tutorial-videos #okr-tuv h1 {margin-top: 50px;}
.okr-tutorial-videos #okr-tuv .content .r-more {font-size: 19px;}
.okr-tutorial-videos #okr-tuv .content .date {font-size: 15px;}
.okr-tutorial-videos #okr-tuv .content {min-height: 425px;}
.okr-tutorial-videos #okr-tuv .content .r-more {font-size: 16px;}
}
@media (min-width: 320px) and (max-width:767px) {
.okr-tutorial-videos #r-banner h1 {font-size: 36px;}
.okr-tutorial-videos #r-banner .container{padding: 0px 30px;width: 100%;max-width: 100%;}
.okr-tutorial-videos #r-banner .right-image  {display: none;}
.okr-tutorial-videos #r-banner img {position: relative;right: 0px;bottom: 0px;top: 15px;width: 100%;}
.okr-tutorial-videos #r-banner {padding: 20px 0px 70px;min-height: auto;}
.okr-tutorial-videos #okr-tuv .company {top: 45%;}
.okr-tutorial-videos #okr-tuv .role {top:  38%;}
.okr-tutorial-videos #okr-tuv .auth-name {top: 30%;}
.okr-tutorial-videos #r-banner .col-md-5, #okr-tuv .col-md-7{width: 100%;}
.okr-tutorial-videos #okr-tuv .content div .heading {min-height: auto;}
.okr-tutorial-videos #okr-tuv .container,#r-category .container,#r-blog .container{width: 100%;max-width: 100%;padding: 0px 30px;}
.okr-tutorial-videos #okr-tuv .col-md-5, #r-banner .col-md-7{width: 100%;}
.okr-tutorial-videos .banner-content h1 {margin-top: 40px !important;}
.okr-tutorial-videos #okr-tuv .content .r-more {font-size: 16px;}
.okr-tutorial-videos #okr-tuv .content .date {font-size: 15px;}
.okr-tutorial-videos #okr-tv-modal .modal-content {width: 100% !important;max-width: 100% !important;}
.okr-tutorial-videos #okr-tv-modal .modal-dialog{width: 310px;max-width: 310px;}
.okr-tutorial-videos #okr-tv-modal .modal-content {width: 100%;}
.okr-tutorial-videos #okr-tv-modal .modal-body iframe {width: 100%;height: 100%;}
}