File: /home/imensosw/www/imenso.co/dev/octb-website/sass/_responsive.scss
@media(max-width: 1100px){
p{ margin-bottom:30px}
.top_msg h1{font-size: 5vw;}
.footer .p_tb120{padding: 80px 0;}
.highlight_area.p_t150{ padding-top:100px}
.highlight_area .txt{
h4{ font-size: 2.5vw;}
li{font-size: 1.2vw;}
p{ margin-bottom:20px !important}
}
.btn { font-size: 14px;}
.heading_second {font-size: 3vw;}
.highlight_heading span { font-size: 9vw;}
.footer h3 {font-size: 5vw;}
.teachers_section .teacher_details{
.col-sm-4{position:relative;
.teacher{ height:auto; transform: translateY(8%); -webkit-transform: translateY(8%); -moz-transform: translateY(8%); -o-transform: translateY(8%); -ms-transform: translateY(8%); margin-left: 8px;
img{ min-height:auto; vertical-align:middle; position:relative}
}
}
}
}
@media(min-width: 1000px){
.mobile_show{ display:none}
.people_area .slick-dots{ display:none !important}
}
@media(max-width: 1000px){
.navbar-toggler{ margin-right:30px; position:absolute; left: -15px; top: 9px; outline: none; box-shadow: none;}
.top_area{
li{ padding:5px}
li:last-child{ border-bottom:none}
}
.teacher .mobile_show, .mobile_show.mobile_structure ,.teacher_full_details .mobile_show{ display:none !important}
}
@media(max-width: 990px){
.login-icon{display:block; top: 16px;}
.navbar-brand{ width:55%; margin:auto !important; max-width:170px}
.navbar-brand img{ width:100%;}
.content.p_t100 {padding-top: 50px;}
.content{
h2.m_b50 { margin-bottom: 20px;}
.p_tb100 { padding: 50px 0;}
.p_b100{padding-bottom: 50px;}
.highlight_area.p_t150 { padding-top:50px !important; padding-bottom: 50px !important;}
.m_b80, .m_b100.customer-tes { margin-bottom: 50px;}
}
.footer .mobile_show, .people_area .slick-dots{ display:none}
.userdtl .btn { padding: 12px 10px !important; width:100%; font-size: 1.4vw !important;}
.teachers_section_dtl .teacher_details .margin_left { margin-left: 5px;}
.teacher {
.scile{font-size: 1.2vw; width: 55px; height: 55px; top: 8px; right: 8px;
}
.userdtl {
p{margin-bottom: 10px;}
.teacher .userdtl h5 { font-size: 2.5vw;}
}
}
.teacher .userdtl h5, .teacher span {font-size: 2.2vw;}
.footer .btn.btn-lg {padding: 20px 0px !important; width:100%; margin-top:40px;}
.highlight_area{
.img{width: 30%;}
.txt { margin-left: 33%;}
.content_1 { padding:30px 50 30px 30px}
}
.compare_check{ padding:30px}
#navbarNavDropdown{ background:$secondary_color}
.top_area .navbar-nav{
li{ display:inline-block; width:100% ;margin: 0px !important; padding: 0px;}
a { color: $theme_blue; padding: 10px; display: block; margin: 0px !important; border-bottom:1px solid #ddd;}
.dropdown-menu{ border:none; margin:0 20px}
a.btn{ margin:15px !important; }
}
.teacher .scile{
span {font-size: 20px; margin-top: 8px;}
}
.teachers_section_dtl .nav-fill .nav-item{ margin-bottom:2px; min-width: 150px !important;}
}
@media only screen and (min-width: 767px) and (max-width: 1100px) {
.fer_cnt{margin-top: 0% !important;}
.p_t100.feature_area1{padding-top: 0px;}
}
@media only screen and (min-width: 581px) and (max-width: 990px) {
.fer_cnt a{ display:inhline-block; font-size: 1.5vw;
td:first-child span {font-size: 4vw;}
td:last-child span{width: 30px; height: 30px; line-height: 30px; background-size: 8px auto; background-position: 12px 8px;}
}
.fer_cnt a:hover td:last-child span{background-size: 8px auto; background-position: 12px -28px;}
}
@media(max-width: 767px){
.mobile_hide, .top_msg, .t_footer{ display:none !important}
.top_msg1.top_msg, .mobile_show, .footer .mobile_show ,.mobile_show.mobile_structure, .teacher_full_details .mobile_show {
display: block !important;}
p, .col-sm-12.m_b50{ margin-bottom:20px}
.top_msg1.top_msg{ position:relative; top:0; text-align:center; transform: translateY(0%); -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); margin:80px auto;
.jumbotron{ margin:50px 0 0; padding:0}
p{font-size: 17px; height: 80px; overflow: hidden;}
}
.container_70{ width:100%}
.customer-testimonial .slick-dots{display:none !important; opacity:0; position:absolute;}
.customer-testimonial .slick-arrow{ position:absolute; z-index:1; width: 40px; height: 40px;}
.customer-testimonial .slick-arrow.slick-next{ right:-10px !important; background-position: 15px -35px !important;}
.customer-testimonial .slick-arrow.slick-prev{ left:-10px !important; background-position: 12px -35px !important; }
.customer-testimonial .slick-arrow.slick-next:hover{ background-position: 15px 10px !important;}
.customer-testimonial .slick-arrow.slick-prev:hover{ background-position: 12px 10px !important; }
.footer{
.footer_cnt { margin-top: 0; text-align:center}
h3 {font-size: 8vw;}
.copywrite { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.5);}
.copywrite .mobile_show{ margin:0 auto; display:block}
.copywrite .text-center, .copywrite .col-md-6{ text-align:center}
.form { background: none; padding: 0px;
p{ text-align:center ;color: #fff;}
a{ display:block}
.form-group .form-control{ background:none; color:#fff}
::-webkit-input-placeholder {color: #fff;}
::-moz-placeholder { color: #fff;}
:-ms-input-placeholder { color: #fff;}
:-moz-placeholder { color: #fff;}
}
.p_tb50{ padding-bottom:0}
}
.customer-testimonial{ background:#E9EBEF!important; margin-bottom:10px;
.slide > div{ border:none !important ;background:#E9EBEF!important;}
.slick-dots{ bottom: 30px !important; margin-top: 40px; position:relative !important}
.slick-dots li button{background:rgba(10,114,212,.2)!important}
.slick-dots li.slick-active button{ background:#0977DF !important}
}
.customer-testimonial.slick-dotted.slick-slider{margin-bottom:0px !important;}
.m_b100.customer-tes{margin-bottom:0px;}
.slick-dots li button{ width:10px !important; height:10px !important;}
.client-logos {padding-bottom: 50px;
p{ display:none}
.m_t50 {margin-top: 20px;}
a{ margin:10px 0}
}
.customer-testimonial p{max-height: none;}
.p_t100 .m_b80 { margin-bottom: 30px;}
.bg_texture_middle.customer-tes{ background:none;
.m_b50 {margin-bottom: 20px}
}
.highlight_area { text-align:center; background:url($bg_texture_mobile) no-repeat #0977DF; background-position:right center;
.img{ display:none}
.txt{ margin-left: 0;}
.content_1{background: none;}
.txt h4 { font-size: 7vw;}
.p_50 { padding: 20px;}
.txt li{ clear: both; float: none; display: inline-block; width: 100%; margin:5px auto;}
}
.highlight_area.p_tb100 {padding: 30px 0 20px !important;}
.bg_texture_top_no{background: none !important}
.bg_texture_top_no.p_t100 {padding-top: 50px;}
.heading_second.m_b50 { margin-bottom: 20px;}
.top_area{ height:auto !important; padding-bottom: 50px;}
.top_light { position: relative; left: auto; bottom: auto; margin-top: 50px;
.points { display: block; text-align:center; width:50%; margin:10px auto}
.p_img{ margin-bottom:10px}
}
.content.p_t100{ padding-top:44px}
.top_area>div:first-child{ border-bottom:1px solid rgba(255,255,255,.1)}
.top_area #navbarNavDropdown{ position:absolute; left:0; right:0; top:50px; z-index:11}
h1{ font-size:30px}
h2{ font-size:24px}
h3{ font-size:18px}
h4{ font-size:18px}
h5{ font-size:15px}
@-webkit-keyframes slide {
0% { background-position: 0 0;} 50% { background-position: 0 0;} 100% { background-position: 0 0;}
}
.btn { padding: 10px 20px !important;}
.feature_area12 .fer_cnt {margin-top: 0 !important;}
.feature_option{ width:100%; margin: 10px 15px 0;}
.top_area{
li{ padding:8px 15px;}
.navbar-nav a{ display:block; margin-left:0; padding: 8px 10px; color:$theme_blue}
}
.userdtl .btn{font-size: 3vw !important;}
.teacher .userdtl h5, .teacher span { font-size: 7vw;}
.teacher .userdtl p {font-size: 15px;}
.footer{
.footer_cnt{ margin-top:0 !important}
.p_tb120 { padding: 50px 0 30px;}
}
.home_b .footer{
.footer_cnt{ margin-top:30px !important}
}
.fer_cnt{ margin-top:20px !important;}
.feature_area {
.slick-dots { bottom: -40px !important;}
a{ width:310px; margin: auto; left:0px;}
}
.row{
>.slide{ width:100%; margin-bottom:20px; padding: 5px;
.teacher{ box-shadow:0 0px 30px #e5e5e5; -webkit-box-shadow:0 0px 30px #e5e5e5; -moz-box-shadow:0 0px 30px #e5e5e5; -o-box-shadow:0 0px 30px #e5e5e5; -ms-box-shadow:0 0px 30px #e5e5e5; border:none;
.mobile_show{ display:block !important; padding:10px;
h5{ font-size:24px; font-weight:500; margin-top:15px}
.para{ height: 60px; font-size: 15px; line-height: 130%; display: inline-block; overflow:hidden; margin-bottom:0 }
a{ display:inline-block; padding:5px}
}
}
.teacher:hover .mobile_show p, .teacher:hover .mobile_show h5{color: $third_color;}
}
}
.page_cnt { display:none !important}
.container>.inline-form{ margin-top:50px}
.teachers_section{
.teacher_details { padding-bottom:20px;
.teacher{width: 100%; display: block !important; position: relative; @include border-radius(5px);}
.p_20{ padding:20px 10px 0 0; position:relative}
}
.userdtl, .scile{ display:none !important}
.responce li {display:block; vertical-align: middle;
span{font-size: 16px;}
}
.btn {padding: 5px 10px !important;}
.btn.btn-lg {padding: 12px 30px !important;}
}
.teacher_full_details.glow{ box-shadow: 0 0px 0x #e5e5e5; -webkit-box-shadow: 0 0px 0 #e5e5e5; -moz-box-shadow: 0 0px 0 #e5e5e5; -o-box-shadow: 0 0px 0 #e5e5e5; -ms-box-shadow: 0 0px 0 #e5e5e5; margin:30px 0 0;
.p_20{ padding:0 20px}
.btn{ padding:12px 30px !important}
.btn-default{padding: 5px 10px !important;}
.tab-content {margin-bottom:0 !important;
.progressarea{ margin-top: 20px;
.progress > span{left: 20px;}
.progress-bar > span{right: 26px; margin-top: -20px;}
h3 {font-size: 19px; fon-weight:500;
span {font-size: 24px;}
}
}
.m_b30{ margin:0 !important}
.container{ padding:0 !important; width: 100% !important; overflow: hidden;}
}
.tab_option{
.dropdown {
.btn{ width:100%; text-align:left; padding: 12px 15px !important;}
.dropdown-toggle::after{ float:right; top: 50% !important; margin-top: 7px !important; position: relative;}
ul{ padding:0;
li{display:block; width:100%;
a{ padding:10px; color:$primary_color; display:block; width:100%;}
a:hover{ background:$theme_orangebg; color:$secondary_color}
}
}
}
}
}
.content .offset-md-1.col-md-10{ padding:0 !important;}
.teachers_section .teacher_details h4{ margin-top:20px !important}
.pagination{
li { width: 40px;
a { width: 35px; height: 35px; line-height: 18px;}
}
}
.pagination .next{background-position: 18px -82px !important;}
.pagination .prev { background-position: 18px -82px !important;}
.teacher_full_details .col-6.col-md-12{ margin-left:-15px}
.teachers_section_dtl .container-fluid{margin-top: -40px !important;}
.teachers_section .justify-content-end{-ms-flex-pack: center !important; justify-content: center !important;}
}
@media(max-width: 600px){
.heading_second {font-size: 7vw;}
.highlight_area .txt{
li{font-size: 4vw;
a{ padding: 10px 30px}
}
}
.top_area .navbar{padding-left: 15px !important; padding-right: 15px !important;}
/*.slide.slide_hide { display:none !important}*/
.feature_area .fer_cnt{margin-top:20px !important;
a{ width:310px; position:relative; left:-20px; margin-top:20px !important;}
p{margin: 15px auto 0;}
}
.row{
>.slide{ width:100%; margin-bottom:20px;
.teacher{ border:none;}
.img1{max-height: 300px; overflow: hidden;}
}
}
.compare_check{ background:none; padding: 30px 0 0;
.progress-bar{text-align: right;}
table{ text-align:center; position:relative; width: 210px; margin: auto; }
tr{ display:inline-block; width:70px; vertical-align:bottom;height:350px;
td:first-child{height:250px;}
td{ display:block; position:relative; width: 70px !important; text-align: center;}
.progress{transform: rotate(270deg); -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); width:250px; margin:auto; position:absolute;left: -90px; top: 100px;}
}
.total_result{position:relative; text-align:center; left:0; margin-top:0}
span{ display:none}
tr:first-child{position:absolute; right:0; top:0}
tr:last-child{position:absolute; left:0; top:0 }
td i{display:block; font-style: normal;}
td:first-child i{ color:$secondary_color !important;}
td:last-child i{ color:$third_color !important; font-family:$font_forth; font-size:20px;}
}
.compare_check:after{background: url('../images/bracket_1.png') no-repeat; background-position:center 260px !important; width:100%; left: 0; top: 75px; margin-left: 0}
}
@media(max-width: 500px){
.fer_cnt a{ width:270px; margin: auto; left:-45px !important; }
.top_light .points{ width:100%}
.top_msg .jumbotron{padding-right: 0;
.btn.btn-lg{ padding:20px 30px !important; display:block}
h1 { font-size: 8.5vw;}
}
.about_section {
table td > div{ display:block; text-align:center}
table img{ height:50px; width:auto; margin-bottom:10px}
}
.customer-testimonial{
.t_cnt{height: 300px;}
}
}
@media(max-width: 350px){
.compare_check::after{top:43px;}
}
/*Home page b css*/
@media(max-width: 990px){
.home_b{
.highlight_area1{
.mobile_show{ display:none}
}
}
}
@media(max-width: 767px){
.home_b{
/*Home page css start*/
.top_area{
.top_light{ display:none}
.top_msg{ display:block !important; text-align:center; position: relative; transform: translateY(0%); -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); padding: 0 20px;
.jumbotron{ top:0; padding-bottom:0}
h1,p{ text-align:center}
p{ margin-top:20px}
.btn { margin: 40px auto 20px;}
}
.banner_texture{
img{ min-width:800px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%);}
}
}
.p_tb150.highlight_area1{ padding:50px 0}
.feature_option a{
> div{ left: 30px; margin-top: -60px;
img{width: 60px;}
}
p{ line-height:120%; font-weight: 400;}
}
.highlight_area1{text-align:center;
li{ padding-top:70px; position:relative}
li:first-child:after{content:'';background:url('../images/b/refresh.png') center no-repeat; background-size: 50px; width: 50px; height: 50px; display: block; margin: 30px auto 0;}
/*li:first-child{content:'';background:url('../images/b/icon_user.png') center no-repeat; background-size: 50px;}
li:last-child{content:'';background:url('../images/b/icon_computer.png') center no-repeat; background-size: 50px;}*/
h3 {font-size: 4vw;}
.mobile_show{ display:block; margin:auto; position:absolute; left:50%; margin-left: -30px; top: -10px;}
}
.highlight_area.p_t150.p_b100{ padding:10px 0 30px;}
.highlight_area .txt p{ margin:20px auto}
.teacher{
.userdtl{left: 40px; right: 40px;}
.btn{ display:block}
}
.footer{
.p_tb120 {padding: 0px 0 20px;
}
}
/*Home page css close*/
}
}
@media(max-width: 767px){
.home_b{
.feature_option {
a{
> div{ left: 0; margin-top: -60px; width: 100%; text-align: center;}
p{ font-size:18px}
}
a:hover>div{transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px);}
}
}
}
/*cROME HACK*/
/* Any Firefox */
@media(max-width: 767px){
@-moz-document url-prefix() {
.compare_check::after {
background-position: center 294px !important;
}
.teacher_full_details.glow .tab_option .dropdown .dropdown-toggle::after{ top: 50% !important; margin-top: -13px !important;}
}
}