/* Project: -- Builders Version: -- 1.0 Create Date: -- 20/03/2018 Created By: -- Ravi Kumar Saini */ /* --- Table Of Content --- 1. LG screen 1600 2. LG screen 1400 3. LG screen 1368 4. LG screen 1280 5. MD screen 1199 6. Small screen 991 7. XS screen 768 8. XS screen 567 9. XS screen 479 10. XS screen 400 */ /* ============================================================== 1. LG screen 1600 ============================================================== */ @media (max-width:1600px){ } /* ============================================================== 2. LG screen 1400 ============================================================== */ @media (max-width:1400px){ } /* ============================================================== 3. LG screen 1368 ============================================================== */ @media (max-width:1368px){ } /* ============================================================== 4. LG screen 1280 ============================================================== */ @media (max-width:1280px){ } /* ============================================================== 5. MD screen 1199 ============================================================== */ @media (max-width:1199px){ #DashEvents article {padding-bottom: 20px;} #DashEvents article h2.eventtitle {margin-top: 15px;} #DashEvents article .borderHead {font-size: 12px;} #banner .caption-global-wrap{width: 80%;} #banner .caption-global-wrap .search-box > input{width: 77%;} #banner .caption-global-wrap .search-box > button{width: 20%; padding: 0px;} #banner .caption-global-wrap .search-box > span{right: 22%;} } /* ============================================================== 6. Small screen 991 ============================================================== */ @media (max-width:991px){ .social .row.blogPost .col-sm-6 { width: 100%; } .social .blogItem {min-height: auto !important; height: auto !important;} #footer .ftrleft, #footer .ftrright{float: none; text-align: center;} #footer .ftrleft ul, #footer .ftrright ul { width: 100%; text-align: center; display: block;} #footer .ftrleft > img{float: none !important; margin: 10px 0 10px 0 !important;} #footer .ftrleft > ul > li:first-child {padding: 10px 0 15px 0;} #footer .ftrright > ul > li > a { padding: 10px 5px 10px 5px;} .buildersummit ul li {padding: 0 0 0 20px !important; width: 100% !important; } #logo_display {display: none !important;} .form-group-internal { margin-bottom: 15px; display: inline-block; width: 100%; } .form-group-internal.marginnone { margin: 0 0 0 0; } } /* ============================================================== 7. XS screen 768 ============================================================== */ @media (max-width: 768px){ #header .logo {display: none;} .inbmenu {display: none;width: 390px;} #header{min-height: 50px;} #header .logoheader{padding: 0px; padding-left: 30px;} #header .logoheader .navbar-brand { max-width: 50px; display: inline-block; float: left; padding-top: 8px; } #headerloginblock{padding-top: 10px;} .nav-mobile {display: block; top: -37px; left: 14px;} .nav-mobile i{font-size: 14px;} .menubar ul li{width: 100%; float: none; border-top:#0071c5 1px solid;} .menubar ul li:nth-child(2){border:none;} /* .menubar ul li.item-803, .menubar ul li.item-793{border:none;} */ .inbmenu{display: none; min-width: 290px;} .menubar .nav.menu li ul.nav-child{position: static; width: 100%;} .menubar .nav.menu > li:hover ul.nav-child{position: static; display: none;} .menubar ul li span.separator{cursor: pointer;} .menubar .nav.menu li ul.nav-child{box-shadow: none;} .menubar .nav.menu > li > ul > li:before{font-family:"FontAwesome"; content:"\f105"; position: absolute; left:-10px; top: 10px; color:#0071c5;} #searchbar input[type="text"]{ width:0px; background: #0071C5; color: #fff; border-radius: 4px; } #searchbar input[type="submit"]{border:none; /* background: url(../images/searchbar_icon-xs.png) no-repeat center center; opacity: 1; */ background: none;} #advancesearchtextbox:after{font-family: 'icomoon' !important; content: "\e901"; color: #fff; position: absolute; right: 8px; top: 3px; font-size: 15px;} .advancesearch, .global-advancesearch{display: none;} /* #headerloginblock{margin-right: 30px;} */ #banner{margin-top: 50px; min-height:200px !important;} #banner .caption{bottom: 15px;} #banner h1, #banner h2{font-size: 44px;} #banner p{font-size: 16px;} #data-center-wrapper h2, #essentials-box .title-wrapper h2, h2, #partners-box .title-wrapper h2{font-size: 22px;} h1{font-size: 24px;} .menubar{position: absolute; left: 0px; top: 50px; box-shadow: inherit;} .menubar > .container{padding: 0px;} /* .menubar.hauto{padding-right: 15px; padding-left: 15px;} */ .menubar .inbmenu{padding-right: 15px; padding-left: 15px;} /* #header .logoheader .navbar-brand{display:inline-block;} */ #searchbar input[type="text"]::placeholder{color: #fff;} .menubar .inbmenu > li:first-child{display: none;} #header .logoheader .siteBarnd span{font-size:18px;} .navbar-brand > img{max-width: 90%;} #partners-box .leftImg{float: left; width: 30%; padding-right: 15px;} #partners-box .rightcontent{float: right; margin-top: 0; width: 70%;} body{font-size: 15px;} .site .mainArea{margin-top:0px;} .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse{max-height:inherit;} .menubar .nav.menu li span.separator, .menubar .nav.menu li a{padding-left:0px; margin-left: 0;} .menubar .nav.menu li ul.nav-child li a{border-bottom:none;} .menubar .nav.menu li ul.nav-child li{position: relative;} .future-data-center .program-box .leftImg img { width: 100% !important; height: 100%;} .DC-slider > ul > li{width: 10px; height: 10px;} .DC-slider > div span{bottom: 190px;} #header .logoheader .navbar-brand{max-width:50px;} .menubar .nav.menu li.parent>a.socialhub:after{display: none;} .menubar .nav.menu li.parent>a.socialhub + .social-down {right: 5px;top: 0px;position: absolute;width: 35px;height: 35px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAJCAYAAADtj3ZXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkVBRUNBMDFGMDUwRjExRThCM0UxRTdBQTYzMEI3MjBBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkVBRUNBMDIwMDUwRjExRThCM0UxRTdBQTYzMEI3MjBBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RUFFQ0EwMUQwNTBGMTFFOEIzRTFFN0FBNjMwQjcyMEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RUFFQ0EwMUUwNTBGMTFFOEIzRTFFN0FBNjMwQjcyMEEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5yYHDCAAAA0klEQVR42mIUK9zpx8DAkALECUD8joEw4APi+UC8mgVI1AGxMRBvBmIfIH6PRyMXEK8FYhcg1mICEolA/BCIrYB4HRCL4LFxDVTjayBOAmm+DMTeQPwciB2AeCNUIbqNIIM9gfgDEIO8epwJKnkVKvACyQX8SBpXArEzEH8E4iAgPgGSYEIy/QySC5yhGqSBeAE0LEA2+gPxfpgGFjTnnYMasA2I3aF8MaiNII2HkBUzYQmY81CnvYVq/AbEYegacWkGgeNQmy4AcQQQ78KmCCDAAE5MKx1c79yuAAAAAElFTkSuQmCC); cursor: pointer; background-repeat: no-repeat; background-position:right; display: block;} .menubar .nav.menu li.parent>a.socialhub{width: 60%;} #flip .fa-lock{display: none;} #flip a .icon-iuser{display: block;} #flip a span{display: none;} #flip a{padding: 0px;} #flip .icon-iuser{font-size: 16px;} #flip {margin: 4px 10px; } .site.com_content.view-article.no-layout.no-task.itemid-error .item-page{ margin-top:0px; margin-bottom:50px;} .site.com_content.view-article.no-layout.no-task.itemid-error .item-page p strong {color: #0070c5; font-size: 16px; font-weight: 400; } .site.com_content.view-article.no-layout.no-task.itemid-error .item-page ol li{font-size: 13px;} .searchWithKeyword {background: transparent;} #productSearchForm { position: fixed; width: 300px; left:-300px; top: 50%; z-index: 1; padding-left: 0px; padding-right: 0px; transform: translate(0,-50%); z-index: 100;} #contact-button {cursor: pointer; top:50%; font-size: 14px; color: white; position: absolute; transform: translate(0,-50%); background-color: #1D1F20; width: 40px; padding-bottom: 10px; padding-top: 25px; display: block; right: -40px; } #contact-button .fa-arrow-up{font-weight: normal; font-size: 12px; position: absolute; top: -5px; right: -14px;} #contact-button .fa-arrow-down{font-weight: normal; font-size: 12px; position: absolute; top: 5px; right: -18px;} .rotated-text {display: inline-block; white-space: nowrap; /* this is for shity "non IE" browsers that dosn't support writing-mode */ -webkit-transform: translate(1.1em,0) rotate(-90deg); -moz-transform: translate(1.1em,0) rotate(-90deg); -o-transform: translate(1.1em,0) rotate(-90deg); transform: translate(1.1em,0) rotate(-90deg); /*-webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0;*/ /* IE9+ */ /* -ms-transform: none; -ms-transform-origin: none; */ /* IE8+ */ /* -ms-writing-mode: tb-rl; */ /* IE7 and below */ /* *writing-mode: tb-rl; */ } .rotated-text:before {content: ""; float: left; margin-top: 100%; } .displayResults .sortingby span.hide_on_zero_result {margin: 0 0 0 0;} .displayResults label.hide_on_zero_result { display: none; } .displayResults.smallresulationView {display: block !important; text-align: center; margin: 15px 0; float: left; width: 100%;} .displayResults.smallresulationView label.hide_on_zero_result {display: block;} .displayResults .sortingby {float: none; width: 100%;} .displayResults label.sorting-value {font-weight: 400;} .displayResults .sortingby span select {min-width: 90px !important; max-width: 90px !important;} .displayResults .sortingby span.first-dropdown-sort { float: left; } .displayResults .sortingby span.second-dropdown-sort { float: right; } .ResultPannel .Left .download_guide {display: none;} .signin_main {width: 95%; margin: 150px 0px 70px 0px; padding: 30px 20px;} .view-login #footer, .view-remind #footer, .view-reset #footer {position: static;} .fuser .login_leftDiv input, .login_leftDiv .login-fields #username, .login_leftDiv .login-fields #password, .login_leftDiv, .login_rightDiv {width: 100%;} .signin_main ul {padding: 0 0 0 0;} .login_rightDiv li.forgot_margin { margin: 5px 0 !important; } .SerchPannel {max-height: 500px;overflow: auto;} .PSearch h2.Hhead, .leftbarAccordion {margin: 0;} .Description .logo ul li .logoImage, .menubar .nav.menu li ul.nav-child {width: 100%;} #searchbar input[type="text"] {padding: 3px 0px 3px 0px;} /* UNIVERSITY CONTACT FORM STARTS HERE */ .contactussection {margin: 50px 0;} .contactussection .contactus-form form {width: 100% !important;} .contactus-form .contactus-input { height: auto; } /* UNIVERSITY CONTACT FORM ENDS HERE */ #essentials-box .plugin-wrapper{margin-bottom:30px;} #essentials-box .plugin-wrapper:last-child{margin-bottom:0px;} #essentials-box .plugin-wrapper h2{margin:10px 0px; } #banner.intel-select-solutions{background-position:center bottom;} .hubSorting label[for="datacenter"]{margin-bottom:15px;} .hubSorting label[for="inb"]{margin-left:-18px;} .social.podcasts .blogPost{margin-top:50px;} .ecosystemBox1 ul.logoSec { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; padding-left: 0; margin-bottom: 25px;} .ecosystemBox1 ul.logoSec li { list-style: none; display: inline-block; width: calc(98% / 2); height: auto; margin-bottom: 10px;} .ecosystemBox .ecosystemBox1 select, .ecosystemBox .ecosystemBox1 .srchTxt {margin: 10px auto;} .logoSec li:nth-child(2n) {margin-right: 0;} .srchTxt{margin-top:20px !important;} #logo_display{display: none;} .keywordInfo .keywordSelection .crossBtns{margin:0px!important; } .keywordInfo .keywordSelection .crossBtns span{font-size: 10px!important;} .keywordInfo .keywordSelection .crossBtns a{font-size: 12px;} #headerloginblock .logoutbtn{margin:4px 10px;} #headerloginblock .logoutbtn .fa-unlock-alt, #headerloginblock .logoutbtn a span{display: none;} #headerloginblock .logoutbtn .icon-ilogout{font-size: 16px; display: block;} .alert{top:90px;} .social .blogPost .row .col-sm-3 { display: none; } .social .blogPost .row .col-sm-9 { width: 100%; } .alert{top:90px;} #our-partners-box{margin-bottom: 30px;} .login_leftDiv .login-fields #username, .login_leftDiv .login-fields #password{height: 35px;} #banner .caption-global-wrap{width:90%; top: 42%;} #banner .caption-global-wrap > h1{font-size: 44px; line-height:40px;} .GlobalSearch-wrap .global-slide { position: fixed; width: 320px; left:-320px; top: 50%; z-index: 1; padding-left: 0px; padding-right: 0px; transform: translate(0,-50%); background: #fff;} .GlobalSearch-wrap .search-filter{height:350px; overflow-y:scroll; } .GlobalSearch-wrap .col-sm-8{width: 100%;} .GlobalSearch-wrap .search-result .topPanel > h1{font-size: 40px;} .geek-search-wrapper{margin-top:-1px;} .GlobalSearch-wrap .search-filter > .title-head{position: fixed; width: 99.3%; top: 0px;} .GlobalSearch-wrap .search-filter #integration-list{margin-top: 40px;} .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover, .pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover{z-index: 0;} .GlobalSearch-wrap .search-result .topPanel > .searchKey{font-size: 16px;} } /* ============================================================== 8. XS screen 567 ============================================================== */ @media (max-width: 567px){ /* #searchbar input[type="text"]:focus{width: 100px !important;} */ #header .logoheader .siteBarnd span{font-size: 15px;} #searchbar input[type="text"]:focus{width: 120px;} .future-data-center .program-box .leftImg img { width: 100% !important; } .searchWithKeyword input[type="text"] { padding: 0 25px 0 5px !important; width: 98% !important;} .searchWithKeyword button {padding: 0 7px 0 0 !important;} #footer {position: static !important;} } /* ============================================================== 9. XS screen 479 ============================================================== */ @media (max-width: 479px){ #header .logoheader .siteBarnd span { line-height: 30px; } #header .logoheader .navbar-brand { padding-top: 0; } #header .logoheader { padding: 8px 0 0 30px; } #header .siteBarnd { position: absolute; padding-top: 2px; } .doctag {display: none;} .doctag.fullwidth-view {display: block;margin-bottom: 10px;} .addthis_toolbox {float: left !important;} .Description .logo ul {display: flex; flex-direction: row; flex-wrap: wrap;} .Description .logo ul li {display: inline-block; width: calc(100% / 3) !important; height: auto !important; margin-bottom: 10px; padding: 4%} #banner.herographic-solutionslibrary {background-position: -200px bottom !important;} .inbmenu, .menubar {width: 100%;} .nav-mobile { width: 25px !important; } #header .navigation {width: 100%; min-height: 0;} } /* ============================================================== 10. XS screen 400 ============================================================== */ @media (max-width: 400px){ #header .logoheader .siteBarnd span { line-height: 16px; } #productSearchForm {width: 250px;} .formInner label.control-label {margin-bottom: 5px;} .formInner label.control-label, .formInner div.col-xs-7 {width: 100%;} } /* ============================================================== XS screen 769 (Below mengtioned css does not extist. Its using only resize testing purpose) ============================================================== */ @media (min-width: 769px){ .inbmenu{display: block !important; width: auto;} .menubar li ul {display: none !important; } .menubar li:hover > ul{display:block!important;position:absolute;} /* #searchbar input[type="text"]{width: auto!important; background:#fff !important; position: static !important;} */ #productSearchForm{left: 0px!important;} .global-slide{position: static;} }