/*================================================== = Bootstrap 3 Media Queries = ==================================================*/ /*========== Mobile First Method ==========*/ /* Custom, iPhone Retina */ @media only screen and (min-width : 320px) { } /* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) { } /* Small Devices, Tablets */ @media only screen and (min-width : 768px) { .navbar-right { margin-right:0px; } } /* Medium Devices, Desktops */ @media only screen and (min-width : 992px) { } /* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) { } /*========== Non-Mobile First Method ==========*/ /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) { } /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { .feature { width: calc(50% - 10px); } .feature:nth-child(3n) { margin-right:10px; } .feature:nth-child(2n), .feature:last-child { margin-right:0; } .formBackgroundColor{ background:none!important; } } /* Small Devices, Tablets 1*/ @media only screen and (max-width : 768px) { .nav { background: white; } .navbar-nav>li>a { text-shadow: none; } .navbar-inverse .navbar-nav>li>a { color:#000; } .navbar-inverse .navbar-nav>li>a:hover { color:#000; } .navbar-inverse.active .navbar-nav>li.active>a { color:#fff; } .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover { background: #000; } .navbar-inverse .navbar-nav .open .dropdown-menu>li>a, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover { color:#000; } .title { font-size:36px; } .investorsRw.title { font-size:24px!important; } .contactForm { width:100%; } .captionCon h1 { margin-left: -10px; font-size:36px; padding: 15px; } .captionCon { width:81%; height:30%; } .templatCaptionCon { width:81%; } .templatCaptionCon h1 { margin-left: -10px; font-size:24px; } .row-eq-height { display: block; } .listViewClassTitle { text-align:left; } .listViewClass { direction:ltr; } } /* Small Devices, Tablets 2*/ @media only screen and (max-width : 600px) { .feature { width: calc(100% - 10px); } .feature:nth-child(3n) { margin-right:10px; } .feature:nth-child(2n){ margin-right:10px; } .feature:nth-child(1n), .feature:last-child { margin-right:0px; } .innosol-icn span { display: none; } /*.remoteSensing { bottom: 54%; right: 22%; } .advisoryServices { top: 18%; right: 22%; } .training { bottom: 51%; left: 41.8%; } .traceabilty { bottom: 54%; left: 22%; } .esupplychain { top: 18%; left: 22%; } .marketlinkage { top: 25%; right: 5%; } .certification { top: 10%; right: 40%; } .mande { top: 25%; left: 5%; }*/ .testMonialsWrapper { /*background:rgba(255,255,255,.6);*/ } } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { /*.remoteSensing { top: 32.5%; left: 4%; } .advisoryServices { top: 19%; left: 17%; } .training { top: 20%; left: 41.4%; } .traceabilty { top: 10%; left: 40%; } .esupplychain { top: 43%; left: 26%; } .marketlinkage { top: 29%; left: 40%; } .certification { top: 19%; right: 9%; } .mande { left: 69%; top: 33%; }*/ .innoSolContent { width:calc(33.333%); } .testMonialsWrapper { background:rgba(255,255,255,.7); } .px3 { background-image: url("../img/mobile-img3.jpg"); } .captionCon { /*display: none;*/ width:81%; height:30%; } .captionCon h1 { font-size:24px; } } /* Custom, iPhone Retina */ @media only screen and (max-width : 400px) { .innoSolContent { width:calc(50%); } } /* Turn off parallax scrolling for tablets and phones */ @media only screen and (max-device-width: 1024px) { .fs { background-attachment: scroll; } } @supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices */ .fs { background-attachment: scroll; } } @supports not (-webkit-overflow-scrolling: touch) { /* CSS for other than iOS devices */ } /* Responsive layout - makes a two column-layout instead of four columns */ @media (max-width: 800px) { /*.media-item { flex: 50%; max-width: 50%; }*/ .mediaContainer { columns:2; } } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media (max-width: 600px) { /*.media-item { flex: 100%; max-width: 100%; }*/ .mediaContainer { columns:1; } } @media screen and ( max-height: 550px ){ .templatCaptionCon { } .templatCaptionCon h1, .captionCon h1 { font-size:28px; background:rgba(0,0,0,0.5); padding:10px; } } @media (min-aspect-ratio: 16/9) { .video-foreground { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .video-foreground { width: 300%; left: -100%; } } /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) { } /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { .video-info { top: 15%; left: 0; width: 100%; padding: 0 10px; } .video-info p{ width: 60%; } .video-info h1 { font-size: 2em; } .video-info h2{ font-size: 2em; } .welcome .agro-input-button{ margin: 20px 0; } } /* Small Devices, Tablets */ @media only screen and (max-width : 768px) { .video-info p{ width: 80%; } .video-info h1 { font-size: 1.5em; } .video-info h2{ font-size: 1.5em; } } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { .video-info p{ width: 100%; } .welcome #email{ width: 130px; } .agro-footer .footer-copyright{ height: 60px; } } /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) { } @media only screen and (max-width : 860px) { .awardImgContainer { text-align:center; width:80%; height:80%; border:solid 10px #fff; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display: flex; justify-content: center; align-items: center; } .awardImgContainer img { width:100%; height:auto; margin-top:5%; } .iframeCls { display:none; } .verticalAwrds { display: block; } .horizontalAwrds { display: none; } } @media screen and ( min-height: 600px ){ }