onnxruntime/css/responsive.css

/* Responsive css start */
  
  @media only screen and (max-width: 1366px) {
    .outer-container{
        padding: 0 3%;
    }
    .carousel .testimonial {
        padding: 0 0 0 30px;
    }
    .footer .footer-heading{
        margin-right: 0;
    }
  }
 
  @media only screen and (max-width: 1199px) {
    .carousel {
        padding: 0 40px;
    }
    .carousel .testimonial {
        padding: 0 0 0 0;
    }
    .r-wrap .r-content .r-option span{
        padding: 0 10px;
    }
    .customer-logo img{
        max-height: 150px;
    }
    .news-img img {
        max-width: 100%;
    }
  }
  
  @media only screen and (max-width: 991px) {
    body{
        font-size: 16px;
    }
    .blue-title-columns h2 {
        font-size: 20px;
    }
    .navbar-custom .onnx-logo {
        width: 230px;
    }   
    .carousel .media img,
    .tab-wrapper .media img{
        max-width: 180px;
    }
    .get-started-section h2 {
        font-size: 24px;
    }
    .carousel p,
    .tab-wrapper p {
        font-size: 20px;
    }
    .footer .footer-heading{
        font-size: 22px;
    }
    .footer a{
        font-size: 18px;
        padding-right: 0;
    }
    .footer p{
        margin-bottom: 10px;
    }
    .footer .onnx-footer-logo {
        width: 170px;
        height: 58px;
    }
    /* css for single col */
    .single-col-container{
        max-width: 60%;
    }
    .r-wrap .r-heading h3 {
        font-size: 18px;
    }
    .r-wrap .r-content .r-option span{
        padding: 0 5px;
    }
    .r-wrap .r-heading h4,
    .r-wrap .r-content .r-option span{
       font-size: 16px;
    }
    .pr-10 {
        padding-right: 15px;
    }
    .ft-20 {
        font-size: 18px;
    }
    .footer h2 {
        font-size: 24px;
    }
    .tab{
        font-size: 18px;
    }
    .section-heading{
        font-size: 24px;
    }
    .blue-title-columns h3 {
        font-size: 22px;
    }
    .news-img img {
        max-width: 100%;
    }
  }

  @media only screen and (max-width: 767px) {
    .main-wrapper .top-banner-bg{
        background-position: top left;
    }
    .header-content .container{
        max-width: 100%;
    }
    .outer-container {
        padding: 0 10%;
    }
    .navbar-custom .onnx-logo {
        width: 210px;
    }
    h1 {
        font-size: 30px;
    }
    .carousel .media img {
        max-width: 180px;
    }
    .media .media-left{
        justify-content: center;
    } 
    .carousel {
        padding: 0 0;
        margin: 32px auto 60px;
    }
    .footer p{
        margin-bottom: 0;
    }
    .text-center-sm{
        text-align: center;
    }
    .navbar-custom .navbar-nav .nav-link::before{
        display: none;
    }
    header.header-collapse{
        background-color: #D8D6D6;
    }
    header.header-collapse .navbar-custom .navbar-nav .nav-item.active .nav-link {
        color: #ffffff;
    }
    header.header-collapse .navbar-custom .navbar-nav .nav-item .nav-link:hover {
        color: #1a1a1a;
    }
    header.scrolled .navbar-custom .navbar-nav .nav-item:not(:last-child) .nav-link,
    .navbar-custom .navbar-nav .nav-item:not(:last-child) .nav-link {
        border-right: none;
    }
    .navbar-custom .navbar-nav .nav-item {
        padding: .5rem 0 .5rem 0;
    }
    .single-col-container{
        max-width: 100%;
    }
    .hardwareAcceleration .col-lg-2dot5, .col-lg-2dot4{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .r-wrap .r-content .r-option:first-child span, .r-wrap .r-content .r-option:nth-child(6) span {
        margin-left: 0;
    }
    .r-wrap .r-content .r-option span{
        margin: 1px 0;
    }
    .r-wrap .r-heading,
    .r-wrap .r-content .r-option span{
        min-height: 40px;
        height: auto;
        padding: 5px 20px;
    }
	.r-wrap .r-content .r-option.command-container span {
		padding-bottom: 5px;
	}
    .border-md-top{
        border-top: 1px solid #dee2e6!important;
    }
    .append-play-buttom aside{
        top: -57px;
        margin-left: 100px;
    }
    .back-to-top{
        width: 45px;
        height: 40px;
    }
    .back-to-top .fa-angle-up {
        font-size: 38px;
    }
    header.fixed-top .navbar-custom img.onnx-logo {
        width: 175px;
        height: 60px;
    }
    header.fixed-top {
        padding: 8px 0;
    }
    .r-wrap .r-content .r-option.command-container {
        padding: 0;
    }
    p.text-copyright{
        display: block;
    }
    .tab{
        font-size: 16px;
        padding: 10px 12px;
    }

    .custom-tab .nav-tabs {
        position: absolute;
        border: 1px solid #ccc;
        z-index: 11;
        min-height: 50px;
        left: 15px;
        right: 15px;
        transition: all ease .5s; 
    }
    .custom-tab .nav-tabs li {
        width: 100%; 
        margin: 0 !important; 
    }
    .custom-tab .nav-tabs li > a {
        display: none; 
        border: 0 !important; 
        border-radius: 0 !important;
    }
    .custom-tab .nav-tabs .nav-link{
        font-size: 18px;
    }
    .custom-tab .nav-tabs.open li > a, .custom-tab .nav-tabs li > a.active {
        display: block;
        transition: all ease .5s; 
    }
    .custom-tab .nav-tabs .dropdown-arrow { 
        position: absolute;
        top: 18px;
        right: 15px;
        border: solid #000000;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 5px;
        vertical-align: middle;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transition: all ease .5s;
        cursor: pointer; 
    }
    .custom-tab .nav-tabs.open .dropdown-arrow {
        transform: rotate(-135deg);
        transition: all ease .5s; 
    }
    .tab-wrapper{
        padding-top: 60px;
    }
    .news-img img {
        max-width: 100%;
    }
  }
  
  @media only screen and (max-width: 480px) {
    .outer-container {
        padding: 0 3%;
    }
    .navbar-custom{
        padding: 0.5rem 10px;
    }
    .navbar-custom .onnx-logo {
        width: 170px;
    }
    .navbar-toggler .navbar-toggler-icon{
        width: 2.5em;
        height: 2.5em;
    }
    header.header-collapse .navbar-toggler .navbar-toggler-icon{
        width: 2em;
        height: 2em;
    }
  }
  
  @media only screen and (max-width: 420px) {
    .icon-container img {
        width: 40px;
        height: 45px;
    }
    .outer-container {
        padding: 0 2%;
    }
  }