/************************************************* ************************************************** Website Name: Saudi Council of Engineers Website URL: saudieng.sa Website Designer: Mahmoud Afify Copyright 2015. All Rights Reserved. Color Guide *************** ea5b0c - orange 41413f - Dark Gray ababab - Light Gray *************************************************/ /************************************************ ************************************************* 0. CSS Reset 1. Sharepoint 2013 Reset 2. Header Styles -------------------- Unified Number, Socail Media, Search, Logo and Navigation 3. Body Styles ---------------------- News and Important Links 4. Sidebar Styles ------------------- 5. footer styles -------------------- 6. comments & form styles ----------- ************************************************* ************************************************/ /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 0. CSS Reset --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ @media print { .header-top, .GlobalNavigation, .header-inner, #leftnav, #footer{display:none } } @font-face { font-family: 'Lato'; src: url('/Style Library/SCE/fonts/Lato-Bold.eot'); /* IE9 Compat Modes */ src: url('/Style Library/SCE/fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Style Library/SCE/fonts/Lato-Bold.woff') format('woff'), /* Modern Browsers */ url('/Style Library/SCE/fonts/Lato-Bold.ttf') format('truetype'); font-style: normal; font-weight: bold; text-rendering: optimizeLegibility; } @font-face { font-family: 'Lato-Reg'; src: url('/Style Library/SCE/fonts/Lato-Regular.eot'); /* IE9 Compat Modes */ src: url('/Style Library/SCE/fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Style Library/SCE/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */ url('/Style Library/SCE/fonts/Lato-Regular.ttf') format('truetype'); font-style: normal; font-weight:normal; text-rendering: optimizeLegibility; } body { overflow: auto !important; height: auto !important; } #s4-workspace { overflow: hidden; height: auto !important; } .is-displayMode body { overflow: auto !important; height: auto !important; } .is-displayMode #s4-workspace { overflow: hidden; height: auto !important; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-weight:normal;} /***** _____ html5 display rul _____*****/ article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {display: block;} /***** _____ General Styles _____*****/ :focus {outline: 0;} body {line-height: 1;color: black;background: white;font:normal 12px Lato;} ol, ul {list-style: none;padding-inline-start: 0;} table {border-collapse: separate;border-spacing: 0;} caption, th, td {text-align: left;font-weight: normal;} blockquote:before, blockquote:after,q:before, q:after { content: "";} blockquote, q { quotes: "" "";} ::-moz-selection{ background: #2e3d52 ; color: #fff;} ::selection{ background: #2e3d52 ; color: #fff;} :-moz-placeholder {color: #c1c1c1;} ::-webkit-input-placeholder {color: #c1c1c1;} :-ms-input-placeholder {color: #c1c1c1;} .transitions * { -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease; -o-transition: all 0.5s ease;transition: all 0.5s ease;} a:link, a:visited{color:#e3ad56;text-decoration:none} a:hover{color:#2e3d52;text-decoration:underline} /***** _____ bootsrap with no spaces _____*****/ /* remove spacing between middle columns */ .row.no-gutter [class*='col-']:not(:first-child):not(:last-child) { padding-right:0 ; padding-left:0 ; } /* remove right padding from first column */ .row.no-gutter [class*='col-']:first-child { padding-right:1px; } /* remove left padding from first column */ .row.no-gutter [class*='col-']:last-child { padding-left:1px; } /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 1. Body Style [ Loading Page ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .loading-overlay{display:none;background:#e3ad56;width:100%;height:100%;position:fixed;top:0;left:0;z-index:9999} .sk-folding-cube { margin: 0 auto; width: 50px; height: 50px; left:50%; top:50%; position:absolute; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .sk-folding-cube .sk-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFF; -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); } .sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); } .sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); } .sk-folding-cube .sk-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .sk-folding-cube .sk-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sk-folding-cube .sk-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } @keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 1. Sharepoint 2013 Reset --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ #s4-bodyContainer{min-width:0 ; padding-bottom: 0;} #contentRow{margin:60px auto;padding-top:0} #contentBox {min-width:0 !important;margin-left: 0;margin-right: 0;} .pagetitle{margin-bottom:40px} .pagetitle .ms-core-pageTitle{white-space:normal;;font-family:"Lato-Reg"} .ms-siteicon-img{max-height:none; max-width:none} #suiteBarLeft, .ms-core-deltaSuiteLinks {background-color: #e3ad56!important;} #s4-titlerow{display: none !important;} .ms-core-overlay{background-color:transparent} .ms-rtestate-field h1, h1.ms-rteElement-H1, .ms-rtestate-field h2, h2.ms-rteElement-H2,.ms-webpart-titleText.ms-webpart-titleText, .ms-webpart-titleText > a, h2, h3, .ms-h2, .ms-h3, .ms-headerFont {font:bold 15px Lato;color:#41413f; } .ms-webpart-titleText > a:hover, .ms-webpart-titleText > a:visited{ color:#e3ad56;text-decoration:none} .dfwp-column{margin-left:0;padding-left:0} .ms-webpartzone-cell{margin:0 !important} /***** _____ Ribbon Buttons Fixes _____*****/ .ms-cui-dd-text, input.ms-cui-cb-input {height:100% !important; padding: 5px !important;} .ms-cui-dd-arrow-button {height:100% !important;padding-left:0 !important;} .ms-dlgTitle {padding: 10px 30px 10px 15px !important;} .ms-cui-ctl-thin {padding:0 4px !important; height:100% !important;margin-top:10px !important;} #ms-help {padding:0 !important;margin:0 5px !important;} #ms-help span {height:25px !important; width:25px !important;margin:0 !important;} .ms-qatbutton span {height:25px !important; width:25px !important;} /***** _____ WebPart Header _____*****/ .ms-webpartzone-cell{margin-bottom:0} .ms-webpart-chrome-title{margin-bottom:0;} .ms-webpart-titleText > nobr > span:first-child{text-transform:uppercase;padding:5px 0 0;font:bold 15px Lato;color:#e3ad56;} /* ________________________________________________________________________________________________________________ Current Navigation Styles ________________________________________________________________________________________________________________ */ #sideNavBox{margin:0;width:100%;box-shadow: 0px 2px 5px #e2e2e2;} .ms-core-sideNavBox-removeLeftMargin{margin:0;padding:20px;background:#FFF;border:1px #f8f8f8 solid;} /*.menu-item-text{font:12px/12px ge_ss_two_medium }*/ /**______ Styles of the Main Items if its link or span ______**/ #sideNavBox ul.root > li > a.static{transition: all 0.5s ease;padding:10px;border-bottom:1px #f8f8f8 solid ;color:#2e3d52;font:bold 12px lato;} #sideNavBox ul.root > li > a.static:before{content:"";display:inline-block;transform: rotate(45deg);width:5px;height:5px;background:#2e3d52;margin-right:20px} #sideNavBox ul.root > li > a.static:hover{background:#d19f4f!important ;} #sideNavBox ul.root > li > a.static:hover:before{background:#FFF} /*#sideNavBox ul.root > li:first-child > a.static{ border-top:0}*/ /**______ Styles of the dynaic menu items and links ______**/ .ms-core-listMenu-verticalBox li.static > ul.static > li.static > .ms-core-listMenu-item {padding:5px!important;border:0;border-bottom:0px #41cc54 solid;color:#666666;font:normal 12px "lato-Reg";background:transparent} .ms-core-listMenu-verticalBox li.static > ul.static > li.static > .ms-core-listMenu-item:before {content:"\f105";font-family:"FontAwesome";display:inline-block;margin:0 5px 0 20px} .ms-core-listMenu-verticalBox li.static > ul.static > li.static > .ms-core-listMenu-item:hover {background:#f2f2f2;} .ms-core-listMenu-verticalBox li.static > ul.static {margin:0 5px 5px 5px;} /**______ Styles of the dynaic Selected menu items ______**/ .ms-core-listMenu-verticalBox li.selected{background-color:#e3ad56;} ul.root > li.static > ul.static > li.selected{/*background-color: #e2e2e2;*/} /* Collapes an Expand .ms-core-listMenu-verticalBox li.static ul.static {display:none} .ms-core-listMenu-verticalBox li.static.selected ul.static {display:block} */ /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 2. Header Styles --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .header{ background:#fff; } .fixed { position: fixed; top:0; right:0; width: 100%; z-index:1000; } /*.fixed .header-bottom{display:none}*/ /* .fixed .colored-section { background:#fff; box-shadow: 0px 2px 5px #e2e2e2; } */ .fixed + #contentRow{ padding-top: 130px; } /***** _____ Unified Number _____*****/ .contactus{ background:#ccc;padding:20px; } .contactus .num, .contactus .social{ font-size:20px; font-weight:bold; } .header-top{background:#FFF;font-family:Lato;} .header .unified-num, .header .search, .header .social, .header .login{ text-align: center; } .header-top .login{ } .header .date{ clear:both; margin-top:5px; font:bold 15px "Lato" } .header .login > li:last-child{ float:right} .header .nav-tabs > li > a, .header .nav-pills > li > a{background-color: #e3ad56;color:#fff;border-radius:30px;margin:0 0 0 5px;border:0;} .header .nav .open>a, .header-top .nav .open>a:hover, .header .nav .open>a:focus{border:0;background-color: #e3ad56;color:#fff;} .header .nav>li>a{ padding:5px 10px;} .header .dropdown-menu>li>a{ padding:10px } .header .icon{display:inline-block;/*transform: rotate(45deg);*/text-align:center;width:25px;height:25px;background:#FFF;} .header .fa{/*transform: rotate(-45deg);*/color:#d6d6d6;font-size:15px;padding:2px 2px 0 0 } /***** _____ Social Media Icons For Header&Footer _____*****/ ul.social {list-style: outside none none;} ul.social > li {display: inline-block;transition: all .5s ease;} /*ul.social > li:hover { transform: translate(0,5px); }*/ ul.social > li > a {display:block;transition: all .5s ease-in;color:#FFF;text-align:center;width:30px;height:30px;} ul.social > li > a > .fa {color:#FFF;font-size:15px;padding:7px 5px} ul.social > li > a > .fa.change-language{font:bold 15px "Greta";} ul.social > li > a:hover{color:#FFF;border-color:#FFF;} ul.social > li > a:hover .fa{color:#FFF;} ul.social > li > a.langauge:hover{background:#2e3d52} ul.social > li > a.twitter:hover{background:#00aced} ul.social > li > a.facebook:hover{background:#3c599b} ul.social > li > a.youtube:hover{background:#dc143c} ul.social > li > a.linkedin:hover{background:#007ab9} .header ul.social > li {margin:0 0 0 5px;position:relative;z-index:10} .footer-box ul.social > li {margin:0 5px 0 0;} .header ul.social > li > a {background:#e3ad56;border-radius:50%;color:#fff} .header ul.social > li > a:hover {background:#e3ad56;} .footer-box ul.social > li > a {border:0;background:#e3ad56;border-radius:50%} .footer-box ul.social > li > a > .fa {color:#fff;} ul.social.share-icons > li {display:block;margin:0 0 9px 0 ;} ul.social.share-icons > li > a {border:1px #FFF solid;background:transparent;} ul.social.share-icons > li > a > .fa {color:#FFF;padding:2px 5px 0 0} .share{text-align:center;margin: 20px 10px 0 0 ;} .share span{display:block;font:bold 15px lato;color:#FFF;text-transform:uppercase} .share .fa {color:#FFF;font-size:15px;padding:0 0 10px 0;} .header-inner ul.social, .header-inner .share{display:none} /***** _____ SearchBox _____*****/ #searchInputBox{float:none;} .search .ms-mpSearchBox{width:100%} .search .ms-srch-sb{ width:100%; height:auto;background:none ;border:0;display:block} .search .ms-srch-sb > input{margin:0 !important; width:88% !important;padding:0 0 0 10px; font-size:12px; background: linear-gradient(to right, rgba(243, 243, 243, 1) 70%, rgba(255, 254, 255, 1) 100%) repeat scroll 0% 0%; color:#2e3d52;border:2px #FFF solid !important ;height:38px;border-radius:30px;float:left} .search .ms-srch-sb > .ms-srch-sb-searchLink {background: #e3ad56;text-align:center;border:0;float:right;border-radius: 50%;margin-right:-11px;margin-top: 2px; width: 35px; height: 34px;} .search #searchImg{display:none} .search #searchInputBox {margin-bottom: 0;} .search .fa{float:right;position:relative;top:10px;right:12px;color:#FFF;font-size:15px;padding:0;z-index:5} .header-bottom{padding:10px 0} .header-bottom .logo{background:url("/Style Library/SCE/images/logo-ar.png") no-repeat top left;height:59px;margin-right:15px} .header-bottom .logo .ms-siteicon-img{visibility:hidden} .header-bottom .logo .ms-siteicon-a{max-width:207px} .header .search{ display:none;background:#FFF;width:100%;border:2px #e3ad56 solid;float:left;border-radius:30px;box-shadow: 0px 5px 5px #e2e2e2;} /***** Search Reault Page ******/ .ms-searchCenter .ms-floatLeft {float:none} .ms-srch-sbLarge{background:#FFF;width:100%;border:2px #e3ad56 solid !important;float:left;border-radius:30px;box-shadow: 0px 5px 5px #e2e2e2;/*position:absolute;top:30px;left:-40px;*/} .ms-srch-sbLarge>input {margin:0 !important; width:95% !important;padding:0 0 0 10px; font-size:12px; background: linear-gradient(to right, rgba(243, 243, 243, 1) 70%, rgba(255, 254, 255, 1) 100%) repeat scroll 0% 0%; color:#2e3d52;border:2px #FFF solid !important ;height:38px;border-radius:30px;float:left} .ms-srch-sbLarge > .ms-srch-sb-searchLink{position:relative;background: #e3ad56;text-align:center;border:0;float:right; border-radius: 50%;margin-right:2px;margin-top: 2px; width: 35px; height: 34px; } .ms-srch-sbLarge .ms-srch-sbLarge-searchImg{visibility:hidden} .ms-srch-sbLarge > .ms-srch-sb-searchLink:after{font-family:"FontAwesome";content:"\f002";float:right;position:relative;top:8px;right:10px;color:#FFF;font-size:15px;padding:0;z-index:5} .ms-searchCenter-main{ width:100%;margin: 0; } .ms-srch-result .ms-promlink-button{width:30px; height:30px;} .ms-srch-Paging li {position:relative;text-align:left;display:inline-block; margin-right:10px;padding:0;width:30px;height:30px;line-height:30px !important;font:bold 15px Greta;} .ms-srch-result #Paging a{background: #ccc;} .ms-srch-result .ms-promlink-button{ border:0;padding: 4px 6px;} .ms-srch-result #PagingSelf a{background-color:#d7a552;border-color:#d7a552;color:#fff} .ms-srch-result #PagingLink a, .ms-srch-result #PagingSelf a{padding:5px 15px;} /***** _____ Global Navigation Styles _____*****/ .navbar{margin:10px 0;min-height:0;float:left} .navbar-collapse{padding:0} .navbar-header{display:block} .navbar-header .navbar-toggle{min-width:35px;min-height:30px;border: 1px solid #CBCBCD;background-color: #F6F6F6;color: #2e3d52;padding: 0px !important;font-size: 14px;} .navbar-header .icon-bar{background:#CBCBCD;margin:0 auto} /**______ Global Navigation: Styles of the Top Items ______**/ .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item { transition: all 0.2s ease-in 0s;margin:0;line-height:13px ;padding:0 30px 0 0 ;text-align:center; /*background:url("/Style Library/SCE/images/nav-bullet.png") no-repeat 5px center;*/ } .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover{/*background:#d26705*/} .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover .menu-item-text{color:#e3ad56;} nav li.static > a .menu-item-text{ transition: all 0.2s ease-in 0s;padding-right:10px;color:#e3ad56;font:bold 20px lato;text-transform:uppercase;} footer nav li.static > a .menu-item-text{color:#FFF;font-size:13px;} footer .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item{padding:0 0 0 15px ;} /**______ add animationline under the topnavigation items ______**/ /* nav li.static > a .menu-item-text:after { transition: all 0.2s ease-in 0s;content: "";opacity: 0;display: block;width: 10px;height: 2px;background-color: #e3ad56;position: absolute;top: 20px;} nav li.static > a:hover .menu-item-text:after {width: 50px;opacity:1;} */ /**______ Global Navigation: First Child Of the Top Navigation ______**/ .ms-core-listMenu-horizontalBox li.static:first-child > .ms-core-listMenu-item{} nav .root > li.static > a{/*display:none;*/background:none;} nav .root > li.static > a:hover{background:#none;} /**______Global Navigation: Styles Of the Selected Item ______**/ .ms-core-navigation > div > ul.root > li.static > ul.static > li.selected{background:transparent;color:#FFF} .ms-core-navigation > div > ul.root > li.static > ul.static > li.selected a.selected .menu-item-text{color:#FFF} .ms-core-navigation > div > ul.root > li.static > ul.static > li.selected a:link, ul.root > li.static > ul.static > li.selected a:visited{color:#FFF !important} /**______Global Navigation: Styles Of the Main Item That have drob Down Menu [Arrow] ______**/ .ms-core-listMenu-horizontalBox .dynamic-children.additional-background {background-image: none;padding-right: 0;cursor: pointer;} /**______ Global Navigation: Dynamic Items[ Drop Down ] ______**/ /**______ Styles of Drop dow menu Container ______**/ ul.dynamic { min-width:250px !important; margin:0;white-space: normal;word-wrap: break-word; background:transperant;z-index:1000;border:0;box-shadow:none;padding:0;text-align:left;overflow:hidden;} /* ul.dynamic:after { border-bottom:10px solid rgba(227, 173, 86, 1); border-left: 10px solid rgba(227, 173, 86, 0); border-right: 10px solid rgba(227, 173, 86, 0); content: ""; display: inline-block; position: absolute; left: 20px; top:0;} */ /**______ Styles to make the dynamic menu start with the top item [remove right:10 ] ______**/ .ms-core-listMenu-horizontalBox li.hover ul.dynamic, .ms-core-listMenu-horizontalBox .menu li.hover-off ul.dynamic{right:0px !important;} /**______ Styles of the dynaic menu items and links ______**/ nav li.dynamic > .menu-item{transition: all 0.2s ease-in 0s;padding:10px; margin:0; background:#2e3d52 ;border:0;} nav li.dynamic > .menu-item:hover{background:#e3ad56;/* transform:translate(5px,0)*/} ul.dynamic li{border-bottom:1px #394b65 solid;padding:0px;} ul.dynamic li:hover{background:#e3ad56;} ul.dynamic li.dynamic > a{color:#FFF !important;font-weight:bold;font-size:12px;font-family:"lato";} li.dynamic > a:hover {color:#FFF !important; border:0;} /**______ Styles to remove arrow beside dynamic menu item that show it has another items [] ______**/ .ms-core-listMenu-horizontalBox .dynamic .dynamic-children.additional-background { background-image:none; } /***** _____ Header of InnerPages [ breadcrumb and socialnetworks ] _____*****/ .header-inner{padding:10px 0;box-shadow: 0px 2px 5px #e2e2e2;/*height:200px;background:url('/Style%20Library/SCE/images/breadcrumb-bg.jpg') no-repeat top center;*/} /*.header-inner.offices{ background:url('/Style%20Library/SCE/images/breadcrumb-offices-bg.jpg') no-repeat top center;}*/ .bread-crumb {font:12px #41413f Lato;color:#41413f ;font-weight:bold;display:inline-block;margin-top: 0px;vertical-align: middle;} .bread-crumb a, .bread-crumb a:link, .bread-crumb a:visited{transition: all 0.5s ease-in 0s;color:#41413f ; text-decoration:none;font-size:12px;font-family:"lato"} .bread-crumb a:hover{ color:#e3ad56; text-decoration:underline} .bread-crumb .current{padding:0 0 0 5px;font-family:"lato";} .bread-crumb .root{display:none;padding:0 5px 0 0 } .bread-crumb .fa{font-size:15px} .bread-crumb .ms-sitemapdirectional{ font:12px #FFF Lato;padding:5px ;text-transform:uppercase;display:inline-block} .header-inner .cover{z-index:0;display: block;background:url('/Style%20Library/SCE/images/pattern-02.png') repeat top center ; height:100%;width:100%;position: relative;top:0;left:0;right:0;} /*.header-inner .container{z-index:1;position: relative;margin-top:-120px}*/ .subsite-name{display:inline-block;margin-right:15px} .subsite-name h1{font:bold 15px Lato;color:#e3ad56 ;display:inline-block} .subsite-name h1 A:link, .subsite-name h1 A:visited{transition: all 0.5s ease-in 0s;font:bold 25px Lato;color:#e3ad56 ;} .subsite-name h1 A:hover{color:#e3ad56;text-decoration:none;} .border-title{width:30px;height:5px;margin-top:0px;border:0;border-top:1px #e3ad56 solid} .border-title hr{width:50px;height:1px;margin:3px 0 0 0;border-color:#e3ad56 } /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 3. Body Style [ Big Banner ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .big-banner {overflow:hidden;position:relative;} .big-banner .title-description{position:absolute;right:20%;bottom:20%;padding:20px;z-index:999;width:420px;text-align:left} .big-banner .title{text-transform:capitalize;font:normal 25px "Lato";color:#e3ad56;line-height:normal} .big-banner .description{font:normal 20px "Lato";color: #FFF;text-decoration:none;} .big-banner .image{overflow:hidden} .big-banner .image img{width:100%;/*height:401px;*/height:310px} .big-banner .cover{opacity:0;z-index:0;display: block;background: transparent linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%) repeat scroll 0% 0%;position: absolute;bottom:220px;left:0;right:0;top:0} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 3. Body Style [ News and Important Links ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* remove spacing between middle columns */ .important-content .row.no-gutter [class*='col-']:not(:first-child):not(:last-child) { padding-right:0 ; padding-left:0 ; } /* remove right padding from first column*/ .important-content .row.no-gutter [class*='col-']:first-child { padding-right:0; } /* remove left padding from first column */ .important-content .row.no-gutter [class*='col-']:last-child { padding-left:1px; } /* remove spacing between middle columns */ .important-content .row.no-gutter.inner [class*='col-']:not(:first-child):not(:last-child) { padding-right:15px ; padding-left:0 ; } /* remove right padding from first column*/ .important-content .row.no-gutter.inner [class*='col-']:first-child { padding-left:15px; padding-right:0; } /* remove left padding from first column */ .important-content .row.no-gutter.inner [class*='col-']:last-child { padding-left:13px; padding-right:15px ; } .logo-bg { /*background: url("/Style Library/SCE/images/sce-logo-bg.png") no-repeat -268px bottom;*/ background: url("/Style Library/SCE/images/sce-ptrn-grey.png") repeat; } /* ________ NewsHomePage ________ */ .home-news .ms-webpartzone-cell{margin-bottom:0} .news .ms-webpart-chrome-title{z-index:3;position:relative;top:40px;left:10px} .news .ms-webpart-titleText > nobr > span:first-child{display:inline-block;text-transform:uppercase;padding:2px;font:bold 15px Lato;color:#FFF;background:#e3ad56} /* ________ news-slider XSLT Styles ________ */ .home-news {position:relative} .home-news .title, .home-news .date{ position:absolute; top:40px; } .home-news .date{ top:20px; } .home-news .title-date{position:relative;padding:20px;bottom:0;height:311px;background:#fff;border:1px #dedede solid;border-top:0} .home-news .title a:link, .home-news .title a:visited{text-transform:uppercase;font:normal 20px "Lato";color: #41413f;line-height:normal} .home-news .title a:hover{color: #e3ad56;text-decoration:none;} .home-news .date{font:normal 12px "Lato";color: #e3ad56;} .home-news .image{overflow:hidden} .home-news .image img{width:100%;height:310px} .home-news .cover{opacity:0;z-index:0;display: block;background: transparent linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.95) 100%) repeat scroll 0% 0%; height:100%;width:100%;position: absolute;bottom:220px;left:0;right:0;} .home-news .cover:hover{} .home-news .image:hover img{transform:scale(1.2)} .home-news .title a:link .more, .home-news .title a:visited .more{color: #e3ad56;font-size:18px} /* ________ news-slider Controls [ For Slic ] ________ */ #slider .slick-dots{text-align:center;position: absolute;bottom:10px; right:10px;} #slider .slick-dots li{display:inline;margin-left:5px} #slider .slick-dots li button{transition: all 0.5s ease-in 0s;border-radius:50%;font-size: 0; width:10px;height: 10px;background-color:transparent; border: 2px #2e3d52 solid; padding: 0;cursor: pointer;} #slider .slick-dots li.slick-active button, #slider .slick-dots li button:hover{background-color: #2e3d52;border:2px transparent solid;border-radius:50%} #slider.news-slider .slick-prev, #slider.news-slider .slick-next{} #slider .slick-prev, #slider .slick-next{transition: all 0.5s ease-in 0s;background-color:transparent;border:2px #2e3d52 solid;border-radius:50%; position:absolute;bottom:10px;left:10px;width:45px;height:45px;text-align:center;padding:0;font-size:0;cursor: pointer;} #slider .slick-next{left:65px;} #slider .slick-prev:hover, #slider .slick-next:hover{background-color:#2e3d52;} #slider .slick-prev:before, #slider .slick-next:before{font-family:"FontAwesome";content:"\f104";color:#2e3d52;font-size:16px;} #slider .slick-next:before{ content: "\f105";} #slider .slick-prev:hover:before, #slider .slick-next:hover:before{ color:#fff;} /* ________ news-slider Controls [ For Carousel ] ________ */ /* .caroufredsel_wrapper{ margin:0 !important;} .pagination {position:relative;top:40px;right:10px;z-index:4; width:auto;padding:0;margin:0;float:right;} .pagination a { transition: all 0.2s ease-in 0s;display: inline-block;background: url("/Style%20Library/SCE/images/indicators.png") no-repeat left center transparent; width: 10px;height:9px;margin:5px 5px 0 0 ;text-align:center;} .pagination a.selected {background: url("/Style%20Library/SCE/images/indicators.png") no-repeat right center transparent;cursor: default;} .pagination a span {display: none;} */ /* ________ Important Styles ________ */ .banners .ms-webpartzone-cell{margin:1px 0 0 0 !important} .banners:first-child .ms-webpartzone-cell{margin:0 0 0 0 !important} .home-links {overflow:hidden;position:relative;} .home-links .title{position:absolute;bottom:0;padding:20px;z-index:999;} .home-links .title:hover{transform:translate(0,5px)} .home-links .title a:link, .home-links .title a:visited{text-transform:capitalize;font:normal 15px "Lato";color: #FFF;line-height:normal} .home-links .title a:hover{color: #e3ad56;text-decoration:none;} .banner-big .home-links img{width:100%;height:310px;} .banner-small .home-links img{width:100%;height:310px} .home-links .image img{} .home-links .image:hover img{transform:scale(1.2);} .home-links .cover{z-index:0;display: block;background: transparent linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.95) 100%) repeat scroll 0% 0%; height:100%;width:100%;position: absolute;bottom:0;left:0;right:0;} /* ________ Important Links ________ */ .important-links{height:310px;border:1px #dedede solid;border-width:1px 1px 0 0;padding:20px;background:#fff} .important-links.center{height:auto;border:0;} .important-links .home-links {padding:18px 0;border:0;border-bottom:1px #e7e7e7 solid} .important-links .home-links img{width:50px;height:50px;float:left;margin-right:20px} .important-links .home-links .title{position:relative;padding:5px 0;margin-left:50px} .important-links .home-links .title:hover{transform:translate(5px,0)} .important-links .home-links .title a:link, .important-links .home-links .title a:visited{font:normal 14px "Lato";color: #41413f;line-height:normal} .important-links .home-links .title a:hover{color: #d9a653;text-decoration:none;} .important-links .home-links .cover{ background: transparent } .important-links .home-links .image:hover img{transform:scale(1);} .important-links .dfwp-item:last-child .home-links{border-bottom:0} /* ________ Eservices Systems Links ________ */ .home-systems {} .home-systems a:link, .home-systems a:visited {display:block;text-decoration:none;text-align:left;padding:15px 0;border:0} /* .home-systems a:hover{background-color:#2e3d52;} */ /*.engineer-corner.discounts .dfwp-item:nth-child(1) a, .engineer-corner.discounts .dfwp-item:nth-child(2) a{padding-top:10px}*/ .home-systems .title{display:inline-block;text-transform:capitalize;font:bold 15px "Lato";color: #2e3d52;line-height:normal;margin-left:20px} .home-systems .image{margin:0;display:inline-block;} .home-systems .image img{width:32px;height:32px} .home-systems a:hover .title{transform:translate(5px,0);color:#d9a653} /*.home-systems a:hover .image{transform:translate(5px,0)}*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 4. Body Style [ Services ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ________ Services Section ________ */ .main-section{padding:60px 0;} .main-section-inner{padding:0 0 60px 0;} .main-section.welcome{padding:0;} .main-section.footer-section{padding-top:0;padding-bottom:0;} .white-section{background-color:#FFF} .dark-section{background-color:#2e3d52} .grey-section{background-color:#f8f8f8} .colored-section{ /* background: -webkit-linear-gradient(to left, #2e3d52, #e3ad56); background: linear-gradient(to left, #2e3d52, #e3ad56); background: linear-gradient(to left, rgba(46, 61, 82, 1) 70%, rgba(227, 173, 65, 1) 100%) repeat scroll 0% 0%; */ background: linear-gradient(to top, #2e3d52, #152132); } .read-more .arabic{display:none} .arabic{display:none !important} .article-content, .welcome-content, .ms-rtestate-field, .ms-webpart-chrome{font:normal 14px "Lato-Reg";color: #333;font-weight:normal} /***** _____ Section Header _____*****/ .section-header{padding:0 0 40px 0;} .section-header .section-name{/*margin-right:45px;*/} .section-name .section-icon{float:left;display:none} .section-name .section-title{margin:10px 0 0 10px;display: inline-block;} .section-name .section-title .sub-title, .section-name .section-title .main-title{font-weight:bold;font-family:Lato;color:#e3ad56;text-transform:uppercase} .section-name .section-title .sub-title{display:none;font-size:12px} .section-name .section-title .main-title{font-size:20px;color:#2e3d52;} .section-name .section-title .border-title{width:30px;height:5px;margin-top:5px;border:0;border-top:1px #e3ad56 solid} .section-name .section-title .border-title hr{width:50px;height:1px;margin:5px 0 0 0;border-color:#e3ad56 } .section-header .section-description{/*margin:15px 0 0 0;*/margin:0;font:normal 13px Lato-Reg;line-height:18px;color:#818181;text-align:justify;} /* ________ Services Xslt [ For Slic ] ________ */ .home-services {margin: 50px auto;transform:rotate(45deg);width:195px;height:195px;position:relative} @media screen and (min-width:0\0) and (min-resolution: +72dpi) {.home-services {overflow:hidden !important}} .home-services .front, .home-services .back{cursor:hand;position:absolute;top:0;border-radius:10px;width:195px;height:195px; backface-visibility: hidden;background-color:#FFF;border:1px #eaeaea solid;} .home-services .front{transform: perspective(400px) rotateY(0deg);} .home-services .back{background-color:#e3ad56;transform: perspective(400px) rotateY(-179.9deg);} .home-services:hover div.front{transform: perspective(400px) rotateY(179.9deg);opacity:0} .home-services:hover div.back{transform: perspective(400px) rotateY(0deg);} .home-services .title, .home-services .description, .home-services .read-more{transform: rotate(-45deg);} .home-services .title{height: 35px;padding-top: 3px;padding-left: 10px} .home-services .title a:link, .home-services .title a:visited{text-transform:uppercase;font:bold 12px "Lato";color: #e3ad56;line-height:normal} .home-services .title a:hover{color: #2e3d52;text-decoration:none;} .home-services .description{margin:45px 0px 0;font:normal 12px "Lato";color: #fff;width: 77%;display: inline-block;height: 50%;} .home-services .image{margin:20px 20px 0;background-color:#40403e;border-radius:5px;width:64px;height:64px;padding:15px 10px;box-sizing: border-box;} .home-services .image img{width:auto;height:auto;transform: rotate(-45deg);} .home-services .read-more{position:absolute;right:10px;margin-top:15px} .home-services .read-more a:link, .home-services .read-more a:visited{font:bold 12px "Lato";color: #2e3d52;text-decoration:none} .home-services .read-more a:hover{color: #e3ad56;text-decoration:none} .home-services .read-more .fa{display:block} .home-services .read-more .arabic{display:none} .home-services .read-more.box{border:1px #fff solid;background:#FFF;margin-top:-35px;padding:10px} .home-services .read-more.box span{font:bold 12px "Lato";color: #2e3d52;text-decoration:none} .home-services .read-more.box .fa{display:inline-block;margin-left:20px} /* ________ Services in Eservices HomePage ________ */ .eservices-home-services .home-services {margin:0 0 30px;transform:rotate(0deg);width:auto;height:195px;border-radius:0;} .eservices-home-services .home-services .front, .eservices-home-services .home-services .back{width:100%;height:195px;cursor:hand;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:0px;padding:20px; backface-visibility: hidden; -webkit-backface-visibility:hidden; background-color:#FFF;border:1px #eaeaea solid;} .eservices-home-services .home-services .back{background-color:#e3ad56;transform: perspective(400px) rotateY(-179.9deg)} .eservices-home-services .home-services .title, .eservices-home-services .home-services .description, .eservices-home-services .home-services .read-more{transform: rotate(0deg);} .eservices-home-services .home-services .front{position:relative} .eservices-home-services .home-services .title{position:absolute;bottom:20px} .eservices-home-services .home-services .description{margin:0;font:normal 12px "Lato";color: #fff;} .eservices-home-services .home-services .image{transform: rotate(0deg);position:relative;margin:0;background-color:#40403e;border-radius:0px;width:50px;height:50px;padding:0;box-sizing: border-box;} .eservices-home-services .home-services .image img{width:auto;height:auto;position:absolute;bottom:0;transform: rotate(0deg);} .eservices-home-services .home-services .read-more{display:none;bottom:0;margin:0;left:20px} .eservices-home-services .home-services .read-more.box{display:block} #services.slick-slider{text-align:center;overflow:hidden;padding-bottom:10px} #services .slick-dots{display:none !important;text-align:center;display:inline-block;} #services .slick-dots li{display:inline;margin-left:10px} #services .slick-dots li:first-child{margin-left:0} #services .slick-dots li button{transform: rotate(45deg);transition: all 0.5s ease-in 0s;font-size: 0;width:10px;height: 10px;background-color:#2e3d52; border:0; padding: 0;cursor: pointer;} #services .slick-dots li.slick-active button, #services .slick-dots li button:hover{background-color: #e3ad56;border:0px #FFF solid;} #services.services-slider .slick-prev, #services.services-slider .slick-next{ box-shadow: 1px 1px 5px #efefef;} #services .slick-prev, #services .slick-next{transform: rotate(45deg);transition: all 0.5s ease-in 0s;background-color:#e3ad56;position:relative;top:0;left:-10px;width:35px;height:35px;text-align:center;border:1px #eaeaea solid;padding:0;font-size:0;cursor: pointer;} #services .slick-next{left:10px;} #services .slick-prev:hover, #services .slick-next:hover{background-color:#2e3d52;} #services .slick-prev:before, #services .slick-next:before{font-family:"FontAwesome";content:"\f177";color:#FFF;font-size:16px;} #services .slick-next:before{ content: "\f178";} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 3. Body Style [ Statistics ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .statistics.main-section { padding: 20px 0 20px 0;} .statistics .section-header{margin:0;padding:0} .statistics .section-name .section-title .main-title{color:#FFF;} .dark-section.statistics{background:#2e3d52;/*background-image:url('/Style Library/SCE/images/statistics-bg.jpg');background-position:center center; background-size:cover !important;background-repeat:no-repeat;position:relative*/} /* .statistics .cover{display:none;z-index:0;display: block;background: url('/Style Library/SCE/images/pattern-01.png') repeat top center; height:100%;width:100%;position: absolute;top:0;left:0;right:0;} */ /* ________ Statistics Xslt ________ */ .home-statistics{position:relative} .statistics .dfwp-item .home-statistics:before{content:"";display:block;width:20px;background:transparent;position:absolute;bottom:65px;left:50%;margin-left:-10px; border-width:2px 2px 0 2px;border-style:solid; border-image: linear-gradient(to bottom, rgb(227, 173, 65), rgb(46, 61, 82)) 1;border-radius:2px 2px 0 0;} .statistics .dfwp-item:nth-child(1) .home-statistics:before{height:60px;} .statistics .dfwp-item:nth-child(2) .home-statistics:before{height:50px;} .statistics .dfwp-item:nth-child(3) .home-statistics:before{height:40px;} .statistics .dfwp-item:nth-child(4) .home-statistics:before{height:30px;} .statistics .dfwp-item:nth-child(5) .home-statistics:before{height:20px;} .statistics .dfwp-item:nth-child(6) .home-statistics:before{height:10px;} .home-statistics .title, .home-statistics .description, .home-statistics .image{font:normal 15px "Lato";text-transform:capitalize;text-align:center;transition: all 0.25s ease-in 0s;} .home-statistics .title{white-space:nowrap;color: #FFF;line-height:normal} .home-statistics .description{margin:15px 0 0 0;color: #e3ad56;font-size:30px;} .home-statistics .image{margin:0;padding:0;box-sizing: border-box;} .home-statistics .image img{} /* .home-statistics:hover .title, .home-statistics:hover .description{transform:translate(0,-75px)} .home-statistics:hover .image{transform:translate(0,75px)} */ /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 3. Body Style [ Cources ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ________ Cources Xslt ________ */ .home-training{border-radius:10px;min-height:365px;background-color:#FFF;box-shadow: 0px 2px 5px #e2e2e2;margin-bottom:10px} .home-training .title-date{padding:20px 20px 40px} .home-training .title{text-align:left;padding-bottom:10px;margin-bottom:10px;border-bottom:1px #a7a7a7 solid;min-height:70px} .home-training .title a:link, .home-training .title a:visited{text-transform:uppercase;font:bold 15px "Lato";color: #e3ad56;line-height:normal} .home-training .title a:hover{color: #2e3d52;text-decoration:none;} .home-training .city{position:absolute;top:10px;left:25px;box-sizing: border-box;width:auto;margin:0;padding:10px;background-color:#e3ad56;font:bold 15px "Lato";color: #fff;text-transform:uppercase} .home-training .image{margin:0;overflow:hidden;position:relative} .home-training .image img{width:100%;height:245px;border-radius:5px 5px 0 0;} .home-training .cover{z-index:0;display: block;background:rgba(0, 0, 0, 0.50) repeat;border-radius:5px 5px 0 0; height:245px;width:100%;position: absolute;top:0;} .home-training .cover:hover{background:rgba(0, 0, 0, 0) repeat;} .home-training .image:hover img{transform:scale(1.2)} .home-training .date{float:left;font:bold 12px "Lato";color: #2e3d52;text-align:left;text-transform:uppercase} .home-training .date .fa{font-size:15px;margin-right:5px} .home-training .read-more{float:right/*position:absolute;right:10px;margin-top:0*/} .home-training .read-more a:link, .home-training .read-more a:visited{font:bold 12px "Lato";color: #a7a7a7;transition: all 0.5s ease-in 0s;text-decoration:none} .home-training .read-more a:hover{color: #e3ad56;text-decoration:none} .home-training .read-more .fa{display:inline-block;font-size:15px;margin-left:5px;vertical-align: bottom;} .home-training .read-more .arabic{display:none} #training.slick-slider{text-align:center;} #training .slick-dots{text-align:center;display:inline-block;margin-top:30px/*position: absolute; top:10px; right:10px;*/} #training .slick-dots li{display:inline;margin-left:10px} #training .slick-dots li:first-child{margin-left:0} #training .slick-dots li button{transition: all 0.5s ease-in 0s;font-size: 0;width:30px;height: 10px;background-color:#2e3d52; border:0; padding: 0;cursor: pointer;} #training .slick-dots li.slick-active button, #training .slick-dots li button:hover{background-color: #e3ad56;border:0px #FFF solid;} #training .slick-prev, #training .slick-next{display:none !important} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 3. Body Style [ Engineer Corner ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .engineer .section-header.on-dark{margin-bottom:30px;} /* .engineer .ms-webpart-titleText > nobr > span:first-child, .engineer .section-name .section-title .main-title{ color:#fff; }*/ .engineer-corner .ms-wpContentDivSpace { position:inherit } .engineer{ position:relative; border-width:1px 0 1px 0; border-color:#dedede; border-style:solid; } .engineer:before{ content: ""; position: absolute; top: 0; right:0; width: 50%; z-index: 0; display: block; background: #f8f8f8; height: 100%; } .engineer-corner{position:relative;border-radius:0;padding:20px;min-height:350px;border:0px #f1f1f1 solid;background-color:#FFF;box-shadow:none 0px 2px 2px #e2e2e2;margin-bottom:10px} .engineer-corner.magazine{Padding:0 0 20px 0} .engineer-corner .ms-webpart-chrome-title{z-index:3;position:absolute;top:-30px;height:0} /* ________ Discounts Xslt ________ */ .home-discounts{} .home-discounts a:link, .home-discounts a:visited {display:block;text-decoration:none;text-align:left;/*padding:38px 0px 30px 10px;*/ padding:30px 0px 30px 10px;border:0;border-bottom:1px #e2e2e2 solid;} .home-discounts a:hover{background-color:#2e3d52;} /*.engineer-corner.discounts .dfwp-item:nth-child(1) a, .engineer-corner.discounts .dfwp-item:nth-child(2) a{padding-top:10px}*/ .home-discounts .title{display:inline-block;text-transform:uppercase;font:bold 12px "Lato";color: #2e3d52;line-height:normal} .home-discounts .image{margin:0;display:inline-block;min-width:60px} .home-discounts a:hover .title{color:#FFF;transform:translate(-5px,0)} .home-discounts a:hover .image{transform:translate(10px,0)} .engineer-corner.magazine, .engineer-corner.discounts{position:relative;} .engineer-corner .read-more{/*margin-top:10px;*/position:relative;bottom:-15px;} .engineer-corner .read-more a:link, .engineer-corner .read-more a:visited{font:bold 12px "Lato";color: #a7a7a7;text-decoration:none} .engineer-corner .read-more a .title{color:#2e3d52;} .engineer-corner .read-more a:hover{color: #e3ad56;text-decoration:none} .engineer-corner .read-more .fa{display:inline-block;font-size:15px;margin-right:5px;vertical-align:bottom;} /* ________ Discounts Categories for innerpages ________ */ .discounts-categories{} .discounts-categories a:link, .discounts-categories a:visited {display:block;text-decoration:none;text-align:left;padding:30px 0 30px 10px;border:0;border-bottom:1px #e2e2e2 solid;} .discounts-categories a:hover{background-color:#2e3d52;} .discounts-categories .dfwp-item:nth-child(1) a, .discounts-categories .dfwp-item:nth-child(2) a{padding-top:10px} .discounts-categories .title{;display:inline-block;text-transform:uppercase;font:bold 12px "Lato";color: #2e3d52;line-height:normal} .discounts-categories .image{margin:0;display:inline-block;min-width:70px} .discounts-categories .image img{height:32px} .discounts-categories a:hover .title{color:#FFF;transform:translate(-5px,0)} .discounts-categories a:hover .image{transform:translate(10px,0)} .discounts-categories.offices{ margin-bottom:1px; } /* ________ Discounts Details for innerpages ________ */ .discounts-details{position:relative;padding:20px;border:1px #e2e2e2 solid;border-radius:0;margin-bottom:30px;min-height:180px} .discounts-details .title, .discounts-details .details{text-align:left;text-transform:uppercase;font:bold 12px "Lato";color: #e3ad56;line-height:normal} .discounts-details .details{margin-bottom:40px;} .discounts-details .image{overflow:hidden;text-align:center;} .discounts-details .image img{max-width:200px;height:80px;} .discounts-details .read-more{position:absolute;bottom:20px;left:20px;right:20px;border-top:1px #e2e2e2 solid;padding-top:20px;font:bold 12px "Lato";color: #2e3d52;} .discounts-details .read-more .fa{display:inline-block;font-size:15px;margin-left:5px;vertical-align: bottom;} /* ________ Magazine Xslt ________ */ .home-magazine{} .home-magazine .title{text-align:left;margin:10px 20px 0 20px;padding-bottom:20px;border-bottom:1px #e2e2e2 solid} .home-magazine .title a:link, .home-magazine .title a:visited{text-transform:uppercase;font:bold 15px "Lato";color: #e3ad56;line-height:normal} .home-magazine .title a:hover{color: #2e3d52;text-decoration:none;} .home-magazine .image{margin:0;overflow:hidden} .home-magazine .image img{width:100%;height:245px;border-radius:0;} .home-magazine .cover{z-index:0;display: block;border-radius:0;background:rgba(0, 0, 0, 0.50) repeat;height:245px;width:100%;position: absolute;top:0;} .home-magazine .cover:hover{background:rgba(0, 0, 0, 0) repeat;} .home-magazine .image:hover img{transform:scale(1.2)} /* ________ Engineer Docs Tabs ________ */ .engineer-docs .nav-tabs{ border-bottom:2px transparent solid} .engineer-docs .nav-tabs>li.active>a, .engineer-docs .nav-tabs>li.active>a:hover, .engineer-docs .nav-tabs>li.active>a:focus{ color:#d9a653;border:2px transparent solid; border-bottom-color:#d9a653;background:transparent} .engineer-docs ul.nav-tabs > li{ width:20%;} .engineer-docs .nav-tabs>li>a {color:#41413f;border: 2px solid transparent;background: transparent; border-radius:0;padding:0;padding-bottom:15px;margin:0;text-align:center;text-transform:uppercase} /* ________ Engineer Docs Xslt ________ */ .documents{border:1px #dedede solid;margin-top:40px;padding:30px;min-height:220px;position:relative;} .documents .image{} .documents .image img{height:30px;} .documents .image a .fa{ color:#41413f} .documents .image a:hover .fa{ color:#d9a653} .documents .title{margin:10px 0;text-align:left} .documents .title a:link, .documents .title a:visited {text-transform:uppercase;font:bold 12px "Lato";color: #41413f;line-height:normal} .documents .title a:hover{color: #d9a653;text-decoration:none;} .documents .description{display:none;font:normal 12px "Lato-Reg";color: #ababab;line-height:normal;text-align:justify} .documents .read-more{margin:10px 0 0;position:absolute;bottom:20px} .documents .read-more a:link, .documents .read-more a:visited{font:bold 12px "Lato";color: #ababab;text-decoration:none} .documents .read-more a:hover{color: #d9a653;text-decoration:none} .documents .read-more .fa{display:inline-block;font-size:15px;margin-left:5px;vertical-align: bottom;} /* ________ Related Links Xslt ________ */ /* .eAccordion{height: 290px;overflow:auto;} .eAccordion .Acc{padding-top: 15px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease; -o-transition: all 0.3s ease;transition: all 0.3s ease;} .eAccordion .ques{margin: 0;color: #666666;font-size: 12px;border-bottom: 1px solid #e3e3e3;padding-bottom: 15px; cursor: pointer;} .eAccordion .ques:before{content: "+";margin-left: 5px;border: 1px solid;width: 14px;line-height:13px;text-align:center;display: inline-block;border-radius:4px;} .eAccordion .ques:hover{color:#00B3FE;} .eAccordion .ans{ display: none; color: #fff; padding: 10px;} .eAccordion .Acc.in{background-color:#00b3ff;} .eAccordion .Acc.in .ques{ color:#fff; padding-right: 10px;} .eAccordion .Acc.in .ques:before{content:"-";} .eAccordion .Acc.in .ans{display:block;} */ .home-relatedlinks .panel, .home-relatedlinks .panel-default{box-shadow:none;border-radius:0;margin:0;border:0;} .home-relatedlinks .panel-heading{border:0;border-top:1px #ebebeb solid !important;border-radius:0;padding:10px 0} .related-links .dfwp-item:first-child .panel-heading{border:0;border-top:0 !important} .home-relatedlinks .panel-body{padding:15px 0 15px 0} .home-relatedlinks .panel-default > .panel-heading{background-color:#FFF;} .home-relatedlinks .panel-title > a {font:bold 12px "lato";color: #2e3d52;display:block} .home-relatedlinks .panel-title > a:before{margin-right:10px;font-size:14px} .home-relatedlinks .panel-title > a.accordion-toggle:before{font-family:"FontAwesome";content: "\f196";color:#e3ad56;margin-left:10px;font-size:14px} .home-relatedlinks .panel-title > a.accordion-toggle.collapsed:before{font-family:"FontAwesome";content: "\f147";} .home-relatedlinks .panel-body {font:normal 12px "lato";color: #818181;} .home-relatedlinks .panel-title a:after{content: "-";font-size:20px;float:right;margin-top: -5px;} .home-relatedlinks .panel-title a.collapsed:after {content: "+";float:right;font-size:20px;margin-top: -5px;} /* .home-relatedlinks .panel-title a.collapsed{color: #e3ad56;} .home-relatedlinks .panel-title a.collapsed a:link, .home-relatedlinks .panel-title a.collapsed a:visited{color: #e3ad56;} */ /* ________ Organizations Members Xslt ________ */ .org-members{border:1px #e2e2e2 solid;border-radius:5px;margin-bottom:30px;padding-bottom:20px} .org-members .title{height:50px;text-align:center;margin:10px 20px 0 20px;padding-bottom:20px;} .org-members .title a:link, .org-members .title a:visited{transition: all 0.5s ease-in 0s;text-transform:uppercase;font:bold 12px "lato";color: #e3ad56;line-height:50px} .org-members .title a:hover{color: #2e3d52;text-decoration:none;} .org-members .image{overflow:hidden;padding:20px;border-bottom:1px #e2e2e2 solid;text-align:center;transition: all 0.5s ease-in 0s;} .org-members .image:hover{box-shadow: 0px 0px 100px 5px #f1f1f1 inset;} .org-members .image img{max-width:200px;height:80px;border-radius:5px 0 0 5px;transition: all 0.5s ease-in 0s;} .org-members .image:hover img{transform:scale(1.2);} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 4. Body Style [ sitemap ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ________ sitemap styles ________ */ .level-section > ul > li{} .level-header{background:#f1f1f1} .level-section .level-header{background:none} .headertitle, .headertitle a, .headertitle a:link{font:bold 12px "lato";color: #e3ad56;} .headermarker.headertitle a{color:#000} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 2. Footer Styles --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* footer .section-header{padding:60px 0 40px 0;} footer .section-header{background:#f8f8f8;} */ .footer-section .section-header{padding:0;} .footer-section .section-description, .footer-section .section-name .section-title .main-title{color:#FFF;} /***** _____ Footer Top _____*****/ .footer-bottom{padding:20px 0} .footer-top{background:#2e3d52;padding:20px 0;} .footer-top .row:first-child .footer-box{margin-bottom:0} .footer-box .box-title h5{font:bold 15px Lato;color:#e3ad56;text-transform:uppercase;margin-bottom:5px} .footer-box .box-title .box-title-border{width:30px;height:2px;background-color:#e3ad56;margin-bottom:20px} .footer-box .box-content{font:bold 12px Lato;line-height:15px;color:#FFF;text-align:justify;} .footer-box.information .list-items li{display:inline-block;margin-top:0} .footer-box .list-items li{margin-top:10px;color:#FFF;font:bold 12px Lato;text-align:left;transition: all 0.2s ease-in 0s;} .footer-box .list-items li:hover{transform:translate(5px,0)} .footer-box .list-items li .fa{padding-right:5px;} .footer-box .list-items li:first-child{margin-top:0} .footer-box .list-items li a:link, .footer-box .list-items li a:visited{color:#FFF;transition: all 0.2s ease-in 0s;} .footer-box .list-items li a:hover{color:#e3ad56;} .footer-box .list-items.work-days li{text-transform:uppercase;} .footer-box .list-items.contacts li .fa.fa-mobile{font-size:18px;padding-right:10px} .footer-box .list-items.org-logos li{display:inline-block;/*float:left;*/margin:0 0 0 10px;} .footer-box .list-items.org-logos li a{display:block} .footer-box .list-items.org-logos li:first-child{margin-left:0} .news-letter .input-group{background:#272f3b;} .news-letter .input-group-addon{padding:0 5px 0 10px;border-radius:0;border:0;background:transparent;text-transform:uppercase;font:bold 12px Lato;color:#e3ad56} .news-letter .form-control{background:transparent;border-radius:0;border:0;height:40px;color:#FFF} .news-letter .btn{background:none;border-radius:0;border:0;padding:6px 0} .news-letter input.btnSubscribe{background:url('/Style Library/SCE/images/btn-subs-en.png') no-repeat center center} .news-letter input[type="button"], .news-letter input[type="reset"], .news-letter input[type="submit"], .news-letter button{min-width:35px} .news-letter button > .fa{ color:#e3ad56;transition: all 0.2s ease-in 0s;} .news-letter button:hover > .fa{ color:#FFF;transform:translate(5px,0)} .validationGrnMsg {display: inline-block;} /***** _____ Footer Bottom _____*****/ .footer-bottom{background:#28303c} .footer-bottom .copy-rights{font:normal 12px Lato-Reg;color:#FFF;text-align:left;} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 2. InnerPages Styles [ Media Center Pages ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .paging {margin:50px 0} .paging A:link, .paging A:visited{transition: all 0.5s ease-in 0s;border-radius:2px;text-align:center;display:inline-block;margin-right:10px;padding:0;width:30px;height:30px;line-height:30px !important;background:#FFF;font:bold 15px lato;color:#cecece;border:1px #ebebeb solid} .paging A:hover{background:#2e3d52;color:#FFF;text-decoration:none;border-radius:2px;border:1px #2e3d52 solid} .paging strong{border-radius:2px;text-align:center;display:inline-block;margin-right:10px;padding:0;width:30px;height:30px;line-height:30px !important;background:#2e3d52;font:bold 15px lato;color:#FFF;border:1px #2e3d52 solid} /* ________ Media Center Home Page Style ________ */ .media-center-news .paging, .media-center-events .paging{display:none} /* ________ news-center XSLT Styles ________ */ .news-center {position:relative;margin-bottom:30px} .news-center .title-date{position:absolute;padding:20px;bottom:0} .news-center .title a:link, .news-center .title a:visited{transition: all 0.5s ease-in 0s;text-transform:uppercase;font:normal 15px "Lato";color: #FFF;line-height:normal} .news-center .title a:hover{color: #e3ad56;text-decoration:none;} .news-center .date{font:normal 12px "Lato";color: #e3ad56;} .news-center .image{position:relative;overflow:hidden} .news-center .image img{width:100%;height:300px} .news-center .cover{z-index:0;display: block;background: transparent linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(0, 0, 0, 1) 100%) repeat scroll 0% 0%; height:100%;width:100%;position: absolute;bottom:0;left:0;right:0;} .news-center .cover:hover{} .news-center .image:hover img{transform:scale(1.2)} /* ________ news-details Styles ________ */ .news-details {} .news-details .article-header{position:relative;margin-bottom:20px;} .news-details .title-date-rating{z-index:999;position:absolute;top: 0px;width: 100%;height: 100%; background: transparent linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.95) 100%) repeat scroll 0% 0%;} .news-details .title-date-rating-contents{transition: all 0.5s ease-in 0s;position:absolute;bottom:20px;left:20px;right:20px} .news-details .title{transition: all 0.5s ease-in 0s;text-transform:uppercase;font:bold 15px "Lato";color: #FFF;line-height:normal} .news-details .date{font:normal 12px "Lato";color: #e3ad56;} .news-details .article-content{font:normal 14px "Lato-Reg";color: #818181;} .news-details .image {height:350px;overflow:hidden} .news-details .image img{width:100%;height:350px;transition: all 0.5s ease-in 0s;} .news-details .article-header:hover img{transform:scale(1.2)} .news-details .article-header:hover .title-date-rating-contents{transform:translate(0,-20px)} .RatingControl{display:none;} /* ________ Photogallery Styles ________ */ .photo-gallery, .album-details {transition: all 0.5s ease-in 0s;margin-bottom:30px} .photo-gallery .image-date{position:relative;} .photo-gallery .date-container{z-index:999;position:absolute;top: 0px;width: 100%;height: 100%; background: transparent linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.95) 100%) repeat scroll 0% 0%;} .photo-gallery .date{position:absolute;bottom:10px;right:20px;left:20px;font:normal 12px "Lato";color: #e3ad56;} .photo-gallery .title{height:100px;background:#FFF;border:1px #ebebeb solid;padding:25px 20px;text-transform:uppercase;font:normal 15px "Lato";color: #2e3d52;line-height:normal} .photo-gallery .fa.photo-icon{position:absolute;bottom:-1px;right:10px;color:#2e3d52;font-size:24px;background:#FFF;padding:2px;} .photo-gallery .image{overflow:hidden} .photo-gallery .image img{width:100%;height:210px;position:relative} /* .photo-gallery:hover {transform:scale(1.2);text-decoration:none}*/ .photo-gallery a:hover{text-decoration:none} .photo-gallery a:hover .image img{transform:scale(1.2)} .photo-gallery a:hover .title{color:#e3ad56;font-size:18px} .photo-gallery a:hover .date{transform:translate(0,-20px);} .photo-gallery a:hover .fa.photo-icon{transform:translate(0,-20px);} .album-details .image{overflow:hidden;} .album-details .image img{width:100%;height:210px;} .album-details:hover{transform: perspective(400px) rotateY(-179.9deg);} /* ________ events-center XSLT Styles ________ */ .events-center {position:relative;border:1px #ebebeb solid;background-color:#FFF;margin-bottom:30px} .events-center .image{/*max-width:216px;*/height:196px;padding:2px} .events-center .image img{width:100%;height:100%} .events-center .date{/*width:100px;*/position:relative;height:196px;box-sizing:border-box;font:normal 20px "Lato";color:#e3ad56;border-right:1px #ebebeb solid;} .events-center .date .date-details{padding:10px;} .events-center .date span{display:block;font-size:20px;text-align:center} .events-center .date .day{font-size:40px;color:#2e3d52} .events-center .date .month{font-size:25px} .events-center .date.fa{padding:0} .events-center .date .fa{position:absolute;width:100%;bottom:1px;right:1px;display:block;padding:20px;background:#f5f5f5;font-size:30px;color:#e3ad56;text-align:center} .events-center .details{padding:20px;font:normal 12px "Lato";color:#e3ad56} .events-center .title a:link, .events-center .title a:visited{text-transform:uppercase;font:normal 15px "Lato";color: #4c4c4a;line-height:normal} .events-center .title a:hover{color: #e3ad56;text-decoration:none;} .events-center .description{font:normal 12px "Lato";color: #818181;} /* remove right padding from first column */ .events-center .row.no-gutter [class*='col-']:first-child { padding-right:0px;} /* remove left padding from first column */ .events-center .row.no-gutter [class*='col-']:last-child { padding-left:0px;} /* ________ events-Details XSLT Styles ________ */ .events-details {margin-bottom:30px} .events-details .image-title{position:relative} .events-details .title-container{position:absolute;top:0;width: 100%;height: 100%; background: transparent linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.95) 100%) repeat scroll 0% 0%;} .events-details .image-title .title{position:absolute;bottom:0;padding:20px;text-transform:uppercase;font:normal 15px "Lato";color: #FFF;line-height:normal} .events-details .image-title .image{} .events-details .image-title .image img{width:100%;height:350px} .events-details .loction-time{border:1px #ebebeb solid;background-color:#FFF;padding:0 20px 20px} .events-details ul.loction-details li{padding:20px 0;border-bottom:1px #ebebeb solid;font:normal 12px "Lato";color:#e3ad56} .events-details ul.loction-details li .fa{padding-right:10px} .events-details .date-details{margin-top:15px} .events-details .date-details .day-box{border:1px #ebebeb solid;font:normal 12px "Lato";color:#e3ad56} .events-details .date-details .fa{font-size:30px;color:#e3ad56;} .events-details .date-details{padding:10px;} .events-details .date-details span{display:block;font-size:20px;text-align:center} .events-details .date-details.fa{padding:0} .events-details .date-details .fa, .events-details .date-details .day-box .bottom, .events-details .date-details .day-box .bottom {position:relative;bottom:0;display:block;padding:5px 0;background:#f5f5f5;font-size:30px;color:#2e3d52;text-align:center} .events-details .date-details .day-box .bottom, .events-details .date-details .day-box .bottom{font-size:12px;line-height:30px} .events-details .date-details .day{font-size:40px;color:#2e3d52} .events-details .date-details .month{font-size:25px} .events-details .map-viewer, .events-details .sponsors, .events-details .description{margin-top:30px} .events-details .border-title{margin-bottom:30px} .events-details .sponsor-item{float:left} .events-details .sponsor-item img{height:85px} .events-details .description{font:normal 12px "Lato";color: #818181;} .events-details .description img{max-width: 100%;height: auto;} .events-details h1{color:#2e3d52} /* ________ NewsPaper Name Xslt ________ */ .newspaper-name{border:1px #e2e2e2 solid;border-radius:5px;margin-bottom:30px;padding-bottom:20px} .newspaper-name .title{text-align:left;margin:10px 20px 0 20px;padding-bottom:20px;border-bottom:1px #e2e2e2 solid;color: #e3ad56;font-weight:bold} .newspaper-name .title a:link, .newspaper-name .title a:visited{transition: all 0.5s ease-in 0s;text-transform:uppercase;font:bold 15px "Lato";color: #e3ad56;line-height:normal} .newspaper-name .title a:hover{color: #2e3d52;text-decoration:none;} .newspaper-name .image{overflow:hidden;padding:20px;border-bottom:1px #e2e2e2 solid;text-align:center;transition: all 0.5s ease-in 0s;} .newspaper-name .image:hover{box-shadow: 0px 0px 100px 5px #f1f1f1 inset;} .newspaper-name .image img{max-width:200px;height:80px;border-radius:5px 5px 0 0;transition: all 0.5s ease-in 0s;} .newspaper-name .image:hover img{transform:scale(1.2);} .newspaper-name .date{color:#2e3d52;overflow:hidden;padding:20px;border-bottom:1px #e2e2e2 solid;text-align:left;transition: all 0.5s ease-in 0s;background-color: #f1f1f1} .newspaper-name .date:hover{box-shadow: 0px 0px 100px 5px #f1f1f1 inset;} .newspaper-name .read-more{margin:10px 20px 0 20px;} .newspaper-name .read-more a:link, .newspaper-name .read-more a:visited{font:bold 12px "Lato";color: #2e3d52;transition: all 0.5s ease-in 0s;text-decoration:none} .newspaper-name .read-more a:hover{color: #e3ad56;text-decoration:none} .newspaper-name .read-more .fa{display:inline-block;font-size:15px;margin-left:5px;vertical-align: bottom;} .newspaper-name.logo{padding-bottom:0} .newspaper-name.logo .image{border-bottom:0;} .newspaper-name.details .title{border-bottom:0;padding-bottom:0} .newspaper-name.details .date .fa{margin-right:5px} .newspaper-name.rec .num{font-size:20px;color:#519225} .newspaper-name.rec .read-more .fa{transform:rotate(0deg);background: #519225;border-radius: 50%;padding: 5px;color: #fff;} .newspaper-name .image{height:120px} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 2. InnerPages Styles [ Engineer Corner Pages ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ________ Engineer Corner Home Page Styles ________ */ .inner-discounts .discounts-categories{background-color:#2e3d52;} .inner-discounts .discounts-categories a:link, .inner-discounts .discounts-categories a:visited {display:block;text-decoration:none;text-align:left;padding:30px 0 30px 10px;border:0;border-bottom:1px #e2e2e2 solid;} .inner-discounts .discounts-categories a:hover{background-color:#e3ad56;} .inner-discounts .discounts-categories .dfwp-item:nth-child(1) a, .discounts-categories .dfwp-item:nth-child(2) a{padding-top:10px} .inner-discounts .discounts-categories .title{text-align:center;display:block;text-transform:uppercase;font:bold 15px "Lato";color: #FFF;line-height:normal} .inner-discounts .discounts-categories .image{text-align:center;margin:0;display:block;min-width:70px;padding:0 0 20px 0} .inner-discounts .discounts-categories a:hover .title{color:#FFF;transform:translate(-5px,0)} .inner-discounts .discounts-categories a:hover .image{transform:translate(10px,0)} /* ________ NewsPaper Name Xslt ________ */ .discounts-options{border:1px #e2e2e2 solid;border-radius:5px;margin-bottom:30px;padding-bottom:20px} .discounts-options .title{height:50px;text-align:left;margin:10px 20px 0 20px;padding-bottom:20px;border-bottom:1px #e2e2e2 solid} .discounts-options .title a:link, .discounts-options .title a:visited{transition: all 0.5s ease-in 0s;text-transform:uppercase;font:bold 15px "Lato";color: #e3ad56;line-height:normal} .discounts-options .title a:hover{color: #2e3d52;text-decoration:none;} .discounts-options .image{overflow:hidden;padding:20px;border-bottom:1px #e2e2e2 solid;text-align:center;transition: all 0.5s ease-in 0s;} .discounts-options .image:hover{box-shadow: 0px 0px 100px 5px #f1f1f1 inset;} .discounts-options .image img{max-width:200px;height:80px;border-radius:5px 5px 0 0;transition: all 0.5s ease-in 0s;} .discounts-options .image:hover img{transform:scale(1.2);} .discounts-options .read-more{margin:10px 20px 0 20px;} .discounts-options .read-more a:link, .discounts-options .read-more a:visited{font:bold 12px "Lato";color: #2e3d52;transition: all 0.5s ease-in 0s;text-decoration:none} .discounts-options .read-more a:hover{color: #e3ad56;text-decoration:none} .discounts-options .read-more .fa{display:inline-block;font-size:15px;margin-left:5px;vertical-align: bottom;} /* ________ Magazine Archive Xslt ________ */ .engineer-magazine{margin-bottom:30px;box-shadow: 0px 2px 5px #e2e2e2;border-radius:5px;padding-bottom: 20px;} .engineer-magazine .title{text-align:left;margin:10px 20px 0 20px;padding-bottom:20px;border-bottom:1px #e2e2e2 solid} .engineer-magazine .title a:link, .engineer-magazine .title a:visited{text-transform:uppercase;font:bold 15px "Lato";color: #e3ad56;line-height:normal} .engineer-magazine .title a:hover{color: #2e3d52;text-decoration:none;} .engineer-magazine .image{margin:0;overflow:hidden;position:relative} .engineer-magazine .image img{width:100%;height:245px;border-radius:5px 5px 0 0;} .engineer-magazine .cover{position: absolute;top:0;z-index:0;display: block;border-radius:5px 5px 0 0;background:rgba(0, 0, 0, 0.50) repeat;height:245px;width:100%;} .engineer-magazine .cover:hover{background:rgba(0, 0, 0, 0) repeat;} .engineer-magazine .image:hover img{transform:scale(1.2)} .engineer-magazine .read-more{margin:10px 20px 0 20px;} .engineer-magazine .read-more a:link, .engineer-magazine .read-more a:visited{font:bold 12px "Lato";color: #2e3d52;transition: all 0.5s ease-in 0s;text-decoration:none} .engineer-magazine .read-more a:hover{color: #e3ad56;text-decoration:none} .engineer-magazine .read-more .fa{display:inline-block;font-size:15px;margin-left:5px;vertical-align: bottom;} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 2. InnerPages Styles [ Training Courses Pages ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ________ Courses Archive Xslt ________ */ .home-training.training-archive{margin-bottom:30px;min-height:385px;} .home-training.training-archive .image{margin:0;overflow:hidden;position:relative} /* ________ Courses-Details XSLT Styles ________ */ .courses-details {margin-bottom:30px} .courses-details .image-title{position:relative} .courses-details .title-container{position:absolute;top:0;width: 100%;height: 100%; background: transparent linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.95) 100%) repeat scroll 0% 0%;} .courses-details .image-title .title{position:absolute;bottom:0;padding:20px;text-transform:uppercase;font:normal 15px "Lato";color: #FFF;line-height:normal} .courses-details .image-title .image{} .courses-details .image-title .image img{width:100%;height:275px;border-radius:5px 5px 0 0} .courses-details .time-points-location{box-shadow: 0px 2px 5px #e2e2e2;border-radius:5px;padding:30px 20px 20px;} .courses-details .time-points-location .icon{display:block;margin:0 auto;transform: rotate(45deg);border-radius:2px;padding:5px;text-align:center;width:50px;height:50px;background:#2e3d52} .courses-details .time-points-location .icon .inner{transform: rotate(90deg);width:40px;height:40px;background:#2e3d52;border:1px #FFF solid} .courses-details .time-points-location .fa{transform: rotate(225deg);color:#FFF;font-size:25px;padding:2px 2px 0 0} .courses-details .time-points-location .icon-title{margin-top:30px;text-align:center;font:bold 12px "Lato";color:#2e3d52;text-transform:uppercase} .courses-details .time-points-location .icon-title hr{margin:5px 0;border-width:2px 0 0;border-color:#2e3d52} .courses-details .time-points-location .icon-title .data{color:#e3ad56} .courses-details .box{/*position:relative;*/border:1px #eaeaea solid;box-shadow: 0px 2px 5px #e2e2e2;border-radius:5px;padding: 20px;margin-bottom:30px} .courses-details .box .title{/*position:absolute;bottom:20px;*/padding-top:10px;border-top:1px #eaeaea solid;font:bold 12px "Lato";color:#2e3d52;text-transform:uppercase} .courses-details .box .description{/*position:absolute;bottom:20px;*/margin-bottom:20px;padding-top:10px;font:normal 13px "Lato-Reg";color:#e3ad56;} .courses-details .box .fa{float:right;font-size:15px} .courses-details .box hr {border-width:0;margin:12px 0 5px 0} .courses-details .box .description .fees{display:block;float:right;text-align:center;padding:2px;background:#e3ad56;color:#FFF;min-width:100px;font:bold 15px "Lato";} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 2. InnerPages Styles [ About us Pages ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ #departments.slick-slider, #members.slick-slider{text-align:center} #members .slick-dots, #departments .slick-dots{display:none !important;text-align:center;display:inline-block;} #members .slick-prev, #members .slick-next, #departments .slick-prev, #departments .slick-next{box-shadow: 1px 1px 5px #efefef;transform: rotate(45deg);transition: all 0.5s ease-in 0s;background-color:#e3ad56;position:relative;top:0;left:0;width:35px;height:35px;text-align:center;border:1px #eaeaea solid;padding:0;font-size:0;cursor: pointer;} #members .slick-next, #departments .slick-next{left:20px;} #members .slick-prev:hover, #members .slick-next:hover, #departments .slick-prev:hover, #departments .slick-next:hover{background-color:#2e3d52;} #members .slick-prev:before, #members .slick-next:before, #departments .slick-prev:before, #departments .slick-next:before{font-family:"FontAwesome";content:"\f178";color:#FFF;font-size:16px;} #members .slick-next:before, #departments .slick-next:before{ content: "\f177";} /* ________ Board Members Styles ________ */ .sessions-num{text-align:center;} .sessions-num li{display:inline-block;margin:0 10px 20px 0;border-radius:3px;border:1px #ebebeb solid;} .sessions-num li a:link, .sessions-num li a:visited {transition: all 0.5s ease-in 0s;border-radius:3px;display:block;min-width:100px;padding:15px;font:bold 12px "Lato";color: #2e3d52;background:#FFF;} .sessions-num li a:hover, .sessions-num li.current a{background:#2e3d52;color: #FFF;text-decoration:none;border-radius:3px;} .board-members{transition: all 0.5s ease-in 0s;margin-bottom:30px;text-align:left} .board-members .image-position{position:relative;} .board-members .position-container{z-index:999;position:absolute;top: 0px;width: 100%;height: 100%; background: transparent linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.95) 100%) repeat scroll 0% 0%;} .board-members .position{position:absolute;bottom:10px;right:20px;left:20px;font:normal 15px "Lato";color: #e3ad56;} .board-members .title{height:80px;background:#FFF;border:1px #ebebeb solid;padding:25px 20px;text-transform:uppercase;font:normal 15px "Lato";color: #2e3d52;line-height:normal} .board-members .fa.photo-icon{position:absolute;bottom:-1px;right:10px;color:#2e3d52;font-size:24px;background:#FFF;padding:2px;} .board-members .image{overflow:hidden} .board-members .image img{width:100%;height:250px;position:relative} .board-members:hover .image img{transform:scale(1.2)} .board-members:hover .title{color:#e3ad56;font-size:18px} .board-members:hover .position{transform:translate(0,-20px);} .board-members:hover .fa.photo-icon{transform:translate(0,-20px);} .board-members:hover .position-container{opacity:0;} .board-members:hover .image img{transform:scale(1.2)} .board-members:hover .title{color:#e3ad56;font-size:16px} .board-members:hover .position{transform:translate(0,-20px);} .board-members:hover .fa.photo-icon{transform:translate(0,-20px);} .board-members .image{overflow:hidden;height:250px;} .board-members .image img{width:100%;height:250px;} /* ________ Board meetings Styles ________ */ .board-meetings{margin-bottom:30px;border-radius:3px;border:1px #ebebeb solid;background:#FFF} .board-meetings .title{padding:0 0 0 20px;text-transform:uppercase;font:normal 12px "Lato";color: #2e3d52;line-height:50px;} .board-meetings .read-more{border-left:1px #ebebeb solid;padding:0 20px 0 0;line-height:50px;text-align:center} .board-meetings .read-more a:link, .board-meetings .read-more a:visited{font:bold 12px "Lato";color: #2e3d52;transition: all 0.5s ease-in 0s;text-decoration:none} .board-meetings .read-more a:hover{color: #e3ad56;text-decoration:none} .board-meetings .read-more .fa{display:inline-block;font-size:25px;margin-left:5px;vertical-align:middle;color:#e3ad56} /* ________ Departments List Xslt ________ */ .departments{border:1px #e2e2e2 solid;margin-bottom:30px;padding:30px;min-height:280px;position:relative} .departments .image{} .departments .image img{height:30px;} .departments .title{margin:10px 0;text-align:left} .departments .title a:link, .departments .title a:visited{text-transform:uppercase;font:bold 12px "Lato";color: #e3ad56;line-height:normal;text-align:left} .departments .title a:hover{color: #2e3d52;text-decoration:none;} .departments .description{font:normal 12px "Lato-Reg";color: #ababab;line-height:normal;text-align:justify} .departments .read-more{margin:10px 0 0;position:absolute;bottom:20px} .departments .read-more a:link, .newspaper-name .read-more a:visited{font:bold 12px "Lato";color: #2e3d52;text-decoration:none} .departments .read-more a:hover{color: #e3ad56;text-decoration:none} .departments .read-more .fa{display:inline-block;font-size:15px;margin-left:5px;vertical-align: bottom;} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 3. Body Style [ E-Services Pages ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ select#ddlFaqCategories,select#ddlFaqSubCategories{width:100%;height:50px;background:#f8f8f8;border:1px #ebebeb solid;margin-bottom:30px;padding-left:20px; font:bold 15px "Lato";color: #2e3d52;text-transform:uppercase;border: #ccc 2px dashed;} .FAQ{} .FAQ .panel-default, .FAQ .panel-default > .panel-heading{border-color:#ebebeb} .FAQ .panel-default > .panel-heading{background-color:#FFF;} .FAQ .panel-title > a {font:bold 12px "Lato";color: #2e3d52;display:block} .FAQ .panel-title > a:before{margin-right:10px;font-size:14px} .FAQ .panel-title > a.accordion-toggle:before{font-family:"FontAwesome";content: "\f147";color:#e3ad56;margin-right:10px;font-size:14px} .FAQ .panel-title > a.accordion-toggle.collapsed:before{font-family:"FontAwesome";content: "\f196";} .FAQ .panel-body {font:normal 12px "Lato-Reg";color: #818181;} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 3. Inner Pages [ Offices Home Pages ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ________ Magazine Archive Xslt ________ */ .offices-circulars{margin-bottom:30px;box-shadow:none 0px 2px 5px #e2e2e2;border-radius:0;padding:30px;border:1px #e2e2e2 solid} .offices-circulars .date{text-align:left;font-size:12px;font:normal 12px "Lato"} .offices-circulars .date .fa{margin-right:5px;} .offices-circulars .title{text-align:left;margin-top:10px;padding-bottom:20px} .offices-circulars .title a:link, .offices-circulars .title a:visited{text-transform:uppercase;font:bold 15px "Lato";color: #2e3d52;line-height:normal} .offices-circulars .title a:hover{color: #e3ad56;text-decoration:none;} .offices-circulars .read-more{margin-top:10px;} .offices-circulars .read-more a:link, .offices-circulars .read-more a:visited{font:bold 12px "Lato";color:#ababab;transition: all 0.5s ease-in 0s;text-decoration:none} .offices-circulars .read-more a:hover{color: #e3ad56;text-decoration:none} .offices-circulars .read-more .fa{display:inline-block;font-size:15px;margin-left:5px;vertical-align:middle} /* .offices-circulars .read-more .fa{transform:rotate(180deg);} .offices-circulars .read-more .fa:first-child{transform:rotate(0deg);} */ /*__________ Offices Related Links __________*/ .related-links{border-radius:10px;padding:20px;border:1px #f1f1f1 solid;background-color:#FFF;box-shadow:0px 2px 2px #e2e2e2;} .related-links-item a:link, .related-links-item a:visited{ border-bottom:1px #f1f1f1 solid; position: relative; z-index: 2; display: block; text-decoration: none; text-align: left; padding: 15px 10px; padding-left: 30px; color:#333; } .related-links-item a:hover{ color:#e3ad56; } .related-links-item a:after { content: "\f192"; font-family: "FontAwesome"; padding-top: 15px; top:2px; bottom: 10px; left: 10px; position: absolute; z-index: 0; } /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 4. Body Style [ Contact us Pages ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .contacts{margin-bottom:0} .contacts .box-title h5{font:bold 12px Lato;color:#2e3d52;text-transform:uppercase;margin-bottom:5px} .contacts .box-title .box-title-border{width:75px;height:2px;background-color:#2e3d52;margin-bottom:20px} .contacts .box-content{font:bold 12px Lato;line-height:15px;color:#FFF;text-align:justify;} .contacts .list-items li{margin-top:10px;color:#e3ad56;font:bold 12px Lato;text-align:left;transition: all 0.2s ease-in 0s;} .contacts .list-items li:hover{transform:translate(5px,0)} .contacts .list-items li .fa{padding-right:5px;color:#423f3d;} .contacts .list-items li:first-child{margin-top:0} .contacts .list-items li a:link, .contacts .list-items li a:visited{color:#e3ad56;transition: all 0.2s ease-in 0s;} .contacts .list-items li a:hover{color:#2e3d52;} .contacts .icon{transition: all 0.5s ease-in 0s;display:block;margin-bottom:20px;transform: rotate(45deg);border-radius:2px;padding:5px;text-align:center;width:50px;height:50px;background:#2e3d52} .contacts .icon .inner{overflow:hidden;transform: rotate(90deg);width:40px;height:40px;background:#2e3d52;border:1px #FFF solid} .contacts .icon img{transition: all 0.5s ease-in 0s;transform: rotate(225deg);padding:2px 0 0 6px;position:absolute;bottom:0;right:0} .contacts .icon:hover{background:#e3ad56;transform: rotate(-45deg);} .contacts .icon:hover .inner{background:#e3ad56;transform: rotate(90deg);} .contacts .icon:hover img{transform: scale(1.2);transform: rotate(0deg);} .form-control-feedback{right:15px;left:auto;top:15px} .form-control{border-radius:0;border-color:#eaeaea;min-height:40px} .form-control:focus{border-color: #e3ad56;box-shadow:0px 0px 2px 0px rgba(234,91,12,0.75);} input[type="password"], input[type="text"], input[type="file"], select, textarea, .sp-peoplepicker-topLevel, .sp-peoplepicker-topLevelDisabled, .sp-peoplepicker-autoFillContainer, .ms-inputBox {border-color:#eaeaea;} input[type=password]:hover, input[type=text]:hover, input[type=file]:hover, textarea:hover, .sp-peoplepicker-topLevel:hover, .ms-inputBox:hover {border-color: #dbdbdb;} input[type=password]:focus, input[type=text]:focus, input[type=file]:focus, textarea:focus, .sp-peoplepicker-topLevel:focus, .ms-inputBox:focus {border-color: #e3ad56;} .contacts-form .capatcha{border:1px #dbdbdb solid;overflow:hidden} .contacts-form .starRed{font:normal 11px Lato-Reg;color:#ff0000;} .contacts-form .capatcha img{height:38px} .contacts-form .glyphicon, .contacts-form .fa{color:#9ba4ab} .contacts-form .fa{margin-top:20px} .contacts-form .submitBtn{transition: all 0.25s ease-in 0s;float:right;background:#e3ad56;padding:10px;border:0;font:bold 13px Lato;color:#FFF;} .contacts-form .submitBtn:hover{background:#2e3d52;} .popover{text-align:left;min-width: 250px;} .popover-title{font-weight:bold;color:#2e3d52} .contacts-form span.label {font:bold 12px Lato;display: inline-block; font-weight: normal;max-width: 100%;color:#2e3d52} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 4. Body Style [ Elections Page ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .elections-banner{float:right;border:4px #d7a449 solid;width:100%;height:59px;} .elections { margin-bottom:30px; } .elections .title{z-index:999;width:100%;height:150px;text-align:center; border:5px #1d1d1b solid;padding:10px;} .elections .title a{text-decoration:none !important} .elections .box-icon{ display: block; width: 100%; height: 100%; background-color: #e9e9e9; padding: 15px; cursor: pointer; border: 0; border-radius: 3px; } .elections .box-icon span { display: block !important; font-size: 25px; font-weight: bold; margin-top: 15px; color: #1d1d1b ; } .elections .box-icon hr { width: 90px; height: 3px; background-color: #d8a553; border-radius: 2px; border: 0; } .elections:hover .title{ border-color: #d8a553; } .elections:hover .box-icon{ background-color: #d8a553; } .elections:hover .image{border-color: #1d1d1b ;} .elections:hover .icon{ background-color: #1d1d1b ; } .elections:hover hr{ background-color: #1d1d1b ; transform: translate(0, -30px);} .elections:hover .title span{ border-color: #d8a553; transform: translate(0,30px);} /***** _____ Elections Ad _____*****/ .elections-ad{ background:#2f3f59; min-height:90px; padding:20px; margin-bottom:20px; transition: all 0.5s ease; } .elections-ad a{ text-decoration:none; } .elections-ad .title{ color:#fff; font-size:24px; } .elections-ad .desc{ color:#d7a552; font-size:14px; } .elections-ad:hover{ /*background:#d7a552;*/ } .elections-ad a:hover .title, .elections-ad a:hover .desc{ color:#d7a552; } /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 4. Body Style [ Main Departments Page ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .main-department{position:relative;margin-bottom:30px;height:270px} .main-department .title{z-index:999;position:absolute;top:40px;width:60%;float:left;height:190px;text-align:center; border:5px #1d1d1b solid;padding:10px;} .main-department .title a{text-decoration:none !important} .main-department .box-icon{ display: block; width: 100%; height: 100%; background-color: #1d1d1b; padding: 30px; padding-top:45px; cursor: pointer; border: 0; border-radius: 3px; } .main-department .box-icon span { display: block; font-size: 17px; font-weight: bold; margin-top: 15px; color: #FFF; } .main-department .box-icon hr { width: 90px; height: 3px; background-color: #d8a553; border-radius: 2px; border: 0; } .main-department .image{width:50%;height:270px;float:right;overflow:hidden;border:5px #d8a553 solid;} .main-departmentt .image img{width:100%;height:270px;bottom:0 !important;right:0 !important} .main-department .image .icon { width: 140px; height: 140px; padding:5px; margin: 60px auto 0; background-color: #d8a553; bottom:0 !important;right:0 !important } .main-department .image .icon-line{ width: 130px; height: 130px; border:5px #fff solid; background:transparent; } .main-department .image .icon{line-height:130px} .main-department:hover .title{ border-color: #d8a553; } .main-department:hover .box-icon{ background-color: #d8a553; } .main-department:hover .image{border-color: #1d1d1b ;} .main-department:hover .icon{ background-color: #1d1d1b ; } .main-department:hover hr{ background-color: #1d1d1b ; transform: translate(0, -30px);} .main-department:hover .title span{ border-color: #d8a553; transform: translate(0,30px);} .dfwp-item:nth-child(even) .main-department .title{float:right;right:0;} .dfwp-item:nth-child(even) .main-department .image{float:left} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 4. Body Style [ Structure Boxes ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .structure{position:relative;margin-bottom:30px;height:150px} .structure .title{z-index:999;position:absolute;top:0;left:0;width:100%;float:right;height:150px;text-align:center; border:2px #f8f8f8 solid;padding:10px;;border-radius:5px} .structure .title a{text-decoration:none !important} .structure .box-icon{ display: block; width: 100%; height: 100%; background-color: #2e3d52; padding: 30px; padding-top:35px; cursor: pointer; border: 0; border-radius: 3px; } .structure .box-icon span { display: block; font-size: 17px; font-weight: bold; margin-top: 15px; color: #FFF; } .structure .box-icon hr { width: 90px; height: 3px; background-color: #d8a553; border-radius: 2px; border: 0; display:none; } .structure .image{display:none;width:30%;height:190px;float:right;overflow:hidden;border:5px #d8a553 solid;background:#d8a553;border-radius:0 5px 5px 0 } .structure .image .icon { width: 140px; height: 140px; padding:5px; margin: 20px auto 0; background-color: #fff; bottom:0 !important;left:0 !important } .structure .image .icon-line{ width: 130px; height: 130px; border:5px #d8a553 solid; background:transparent; } .structure .image .icon{line-height:130px} .structure:hover .title{ border-color: #d8a553; } .structure:hover .box-icon{ background-color: #d8a553; } .structure:hover hr{ background-color: #2e3d52; transform: translate(0, -30px);} .structure:hover .title span{ border-color: #d8a553; transform: translate(0,30px);} .dfwp-item:nth-child(even) .structure .title{float:left;left:0;} .dfwp-item:nth-child(even) .structure .image{float:right} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 4. Body Style [ Search Center Page ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .ms-srch-item{padding:0;margin:10px 10px 0 0;width:auto} /*.ms-srch-group h3{font-size:15px}*/ .ms-srch-item-path{color:#2e3d52} /*.ms-srch-hover-outerContainer{top:0 !important;left:0 !important}*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 4. Body Style [ Search Center Page ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .recrutement{position:relative;margin-bottom:30px;height:270px} .recrutement .date{position:relative;width:40%;padding:10px 0 0 30px ; max-height:30px;color:#1d1d1b;text-align:left;font-size:20px;} .recrutementr .date:after{content:"";position:absolute;top:50px;left:80px;width:2px;height:20px;background-color:#1d1d1b; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease } .recrutement .title{z-index:999;position:absolute;top:40px;width:60%;float:left;height:190px;text-align:center; border:5px #1d1d1b solid;padding:10px;} .recrutement .title a{text-decoration:none !important} .recrutement .box-icon{ display: block; width: 100%; height: 100%; background-color: #2e3d52; padding: 30px; padding-top:45px; cursor: pointer; border: 0; border-radius: 3px; } .recrutement .box-icon span { display: block; font-size: 17px; font-weight: bold; margin-top: 15px; color: #FFF; } .recrutement .box-icon hr { width: 90px; height: 3px; background-color: #d8a553; border-radius: 2px; border: 0; } .recrutement .image{width:50%;height:270px;float:right;overflow:hidden;border:5px #d8a553 solid;} .recrutement .image img{width:100%;height:270px;bottom:0 !important;right:0 !important} .recrutement .image .icon { width: 140px; height: 140px; padding:5px; margin: 60px auto 0; background-color: #d8a553; bottom:0 !important;right:0 !important } .recrutement .image .icon-line{ width: 130px; height: 130px; border:5px #fff solid; background:transparent; } .recrutement .image .icon .fa{font-size:70px;color:#fff;line-height:130px} .recrutement:hover .title{ border-color: #d8a553; } .recrutement:hover .box-icon{ background-color: #d8a553; } .recrutement:hover .image{border-color: #1d1d1b ;} .recrutement:hover .icon{ background-color: #1d1d1b ; } .recrutement:hover hr{ background-color: #1d1d1b ; transform: translate(0, -30px);} .recrutement:hover .title span{ border-color: #d8a553; transform: translate(0,30px);} .related-links .list-group-item-heading{ color:#2e3d52 !important; } /* .dfwp-item:nth-child(odd) .recrutement .title, .dfwp-item:nth-child(odd) .recrutement .date{float:left;left:0;} .dfwp-item:nth-child(odd) .recrutement .title{padding:25px 95px 25px 25px;} .dfwp-item:nth-child(odd) .recrutement .image{float:right} */ /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- Training Partners --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .training-partners{} .training-partners img{height:50px;float:left;margin-right:20px;margin-bottom:20px} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 9. Universities And Majors Directory [ Universities And Majors Directory Page ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .bg-default{ padding:15px; margin: 15px 0 15px 0; background-color: #f7f7f9; border: 1px solid #e1e1e8; } .label-num{ font-size:20px; padding:5px; color:#fff; background:#1d1d1d; } .universities-tabs.nav-tabs { border-bottom: 2px solid #1d1d1d; } .universities-tabs.nav-tabs>li>a{ border-radius:0; } .universities-tabs.nav-tabs>li.active>a, .universities-tabs.nav-tabs>li.active>a:hover, .universities-tabs.nav-tabs>li.active>a:focus { border: 2px solid #1d1d1d; border-bottom-color:transparent; } .universities-tabs.nav-tabs>li { margin-bottom: -2px; } .university-card{ /* border-radius: 10px; box-shadow: 0 3px 15px rgb(22 123 198 / 12%);*/ border: 1px solid #ddd; margin-top:30px; } .university-card .card-content{ padding:30px; min-height:200px; } .university-info-row{ display: flex; justify-content: space-between; } .university-info-section { display: inline-flex; align-items:center; } .university-info-image{ background-color:#F9F9F9; width:70px; height:70px; border-radius:4px; margin-left:20px; text-align:center; display:flex; align-items:center; justify-content:center; } .university-info-image img{ max-width:80%; max-height:50px; } .university-info-row.faculties{ margin-top:50px; } .university-info-sub-title { display: inline-flex; } .university-info-city{ margin-right:20px; } .university-info-title .title{ font:bold 20px "Greta";color: #1d1d1b;line-height:normal } .university-info-title .description{ font:bold 16px "Greta";color: #5a5a5a;line-height:normal } .faculties-degrees-details .degree{ font:bold 18px "Greta"; margin-bottom:10px; } .faculties-list{ list-style-type: circle; margin-right:20px; } .faculties-list-item{ font:bold 16px "Greta";color:#333;line-height:24px } .departments-list{ list-style-type: disc; margin-right:20px; margin-bottom:20px; } .departments-list-item{ position:relative;font:bold 14px "Greta";color:#666;line-height:24px } .departments-list-item.yasser:before{ font-family:"FontAwesome"; font-size:11px; content:"\f00c"; color:green; display: inline-block; position: absolute; right:-30px; top:-1px; } .university-info-buttons { margin-top:10px; } .university-info-buttons .btn{ padding:13px; border-color:#ddd; border-radius:0; } /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 2. Responsive Styles --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------*/ /* Large desktops and laptops /*------------------------------------------------------------------------------*/ @media (min-width: 1200px) { .navbar-header{display:none} } /*------------------------------------------------------------------------------*/ /* Landscape tablets and medium desktops - width : 992px /*------------------------------------------------------------------------------*/ @media (min-width: 992px) and (max-width: 1199px) { .navbar-header{display:none} .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item { padding:0 15px 0 0 ; } footer .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item { padding: 0; } } /*------------------------------------------------------------------------------*/ /* Portrait tablets and small desktops - width : 768px /*------------------------------------------------------------------------------*/ @media (min-width: 768px) and (max-width: 991px) { /***** _____ news & important Links _____*****/ #top-content .row.no-gutter [class*="col-"]:first-child{padding-right:15px} #top-content .row.no-gutter [class*='col-']:not(:first-child):not(:last-child) { padding-right:0px ; padding-left:15px ;} #top-content .row.no-gutter [class*='col-']:last-child { padding-left:1px;} /***** _____ Navigation _____*****/ .ms-core-listMenu-horizontalBox ul, .ms-core-listMenu-horizontalBox li, .ms-core-listMenu-horizontalBox .ms-core-listMenu-item, .ms-core-listMenu-horizontalBox > ul > li > table {display:block;float:left;width:100%;padding-inline-start: 0;} .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item{ background:url("/Style Library/SCE/images/nav-bullet.png") no-repeat 5px center #2e3d52; text-align:left;padding:10px;border:0;border-bottom:1px #51514f solid} .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover{ background:url("/Style Library/SCE/images/nav-bullet.png") no-repeat 5px center #e3ad56;} .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover .menu-item-text{color:#FFF} nav li.static > a .menu-item-text{ padding:10px;color:#FFF;text-align:left;} .ms-core-listMenu-horizontalBox li.static:first-child > .ms-core-listMenu-item{} nav .root > li.static > a{color:#FFF;} nav .root > li.static > a:hover{background:#none;} ul.dynamic {display:none; width:auto;} nav li.static > a:hover .menu-item-text:after {opacity:0;} /***** _____ Section Name _____*****/ .section-name{float:left !important;margin-right: 0} .section-header .section-description{margin:15px 5px 0 0;} /***** _____ Footer _____*****/ .footer-top .row .footer-box{margin-bottom:40px} } /*------------------------------------------------------------------------------*/ /* Landscape phones and portrait tablets - Width : 480px /*------------------------------------------------------------------------------*/ @media (max-width: 767px) { /***** _____ header Top _____*****/ .header{background: #fff;border-bottom: 3px #2e3d52 solid; } .header-top .nav-pills>li+li { margin-right: 2px; } .header-top .row{ background:#2e3d52} .header-top ul.social{margin-top:0;text-align:left} .header-top ul.social > li > a, .header-top .nav-tabs > li > a, .header-top .nav-pills > li > a{background: #FFF;} .header-top .search{margin-top:5px;} .header-top:after{display:none} /***** _____ news & important Links _____*****/ #top-content .row.no-gutter [class*="col-"]:first-child, .contacts-form .row.no-gutter [class*="col-"]:first-child{padding-right:15px} #top-content .row.no-gutter [class*='col-']:not(:first-child):not(:last-child), .contacts-form .row.no-gutter [class*='col-']:not(:first-child):not(:last-child) { padding-right:15px ; padding-left:15px ;} #top-content .row.no-gutter [class*='col-']:last-child, .contacts-form .row.no-gutter [class*='col-']:last-child { padding-left:15px;} /***** _____ Navigation _____*****/ .ms-core-listMenu-horizontalBox ul, .ms-core-listMenu-horizontalBox li, .ms-core-listMenu-horizontalBox .ms-core-listMenu-item, .ms-core-listMenu-horizontalBox > ul > li > table {display:block;float:left;width:100%;padding-inline-start: 0;} .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item{ background:url("/Style Library/SCE/images/nav-bullet.png") no-repeat 5px center #2e3d52; text-align:left;padding:10px;border:0;border-bottom:1px #51514f solid} .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover{ background:url("/Style Library/SCE/images/nav-bullet.png") no-repeat 5px center #e3ad56;} .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover .menu-item-text{color:#FFF} nav li.static > a .menu-item-text{ padding:10px;color:#FFF;text-align:left;} .ms-core-listMenu-horizontalBox li.static:first-child > .ms-core-listMenu-item{} nav .root > li.static > a{color:#FFF;} nav .root > li.static > a:hover{background:#none;} ul.dynamic {display:none; width:auto;} nav li.static > a:hover .menu-item-text:after {opacity:0;} /***** _____ Section Name _____*****/ .section-name{float:left !important;margin-right: 0} .section-header .section-description{margin:15px 5px 0 0;} /***** _____ Footer _____*****/ .footer-top .row .footer-box{margin-bottom:40px} /***** _____ Statistics _____*****/ .home-statistics{margin-top:30px} /***** _____ Engineer Corner _____*****/ .engineer-corner{margin-bottom:60px;min-height:350px} /***** _____ Events Center _____*****/ .events-center .row.no-gutter [class*="col-"]:not(:first-child):not(:last-child){padding-right:15px;padding-left:15px} .events-center .row.no-gutter [class*="col-"]:first-child{padding-right:15px;} } /*------------------------------------------------------------------------------*/ /* Portrait phones and smaller - Width : 321px /*------------------------------------------------------------------------------*/ @media (max-width: 480px) { .header-top .row.no-gutter [class*='col-']{padding:0} .header-top .unified-num, .header-top .search, .header-top .social, .header-top .login{ border:0px #dedede solid; border-bottom-width:0; padding: 10px 0 5px; } .header-top .login{ padding: 4px 4px 0 0; border-bottom-width:0px; } .header-top .login > li:first-child{ float:right} .header-top .login > li:last-child{ float:right} .GlobalNavigation .navbar{ margin:0; border:0; float: none; } .GlobalNavigation.dark-section{ background-color:transparent; } .navbar-header {position:absolute;top:-66px;left:158px;} .header .social, .header .nav>li>a{margin-top:10px} .header .search{ position:absolute;right:10px;top:45px;width:90%;z-index:1000} .header .search .ms-srch-sb > input {width:80% !important} .ms-srch-sbLarge{width:75%} .ms-srch-sbLarge>input{width:88% !important} .ms-searchCenter-main{width:480px} .ms-srch-item-summary{width:85%} .ms-srch-item-body{width:90%} .ms-srch-item-path{width:420px;} /***** _____ Big Banner _____*****/ .big-banner .title-description{width:100%;right:0;left:0;bottom:0;padding:5px;} .big-banner .title{font-size:12px;} .big-banner .description{font-size:11px;} .big-banner .image img{height:auto} /***** _____ news & important Links _____*****/ #top-content .row.no-gutter [class*="col-"]:first-child, .contacts-form .row.no-gutter [class*="col-"]:first-child{padding-right:15px} #top-content .row.no-gutter [class*='col-']:not(:first-child):not(:last-child), .contacts-form .row.no-gutter [class*='col-']:not(:first-child):not(:last-child) { padding-right:15px ; padding-left:15px ;} #top-content .row.no-gutter [class*='col-']:last-child, .contacts-form .row.no-gutter [class*='col-']:last-child { padding-left:15px;} #top-content .important-links, #top-content .eservices-systems{border-width:1px;margin-top:30px;height:auto} #top-content .home-links{margin-top:20px} /***** _____ Navigation _____*****/ .ms-core-listMenu-horizontalBox ul, .ms-core-listMenu-horizontalBox li, .ms-core-listMenu-horizontalBox .ms-core-listMenu-item, .ms-core-listMenu-horizontalBox > ul > li > table {display:block;float:left;width:100%;padding-inline-start: 0;} .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item{background:#2e3d52;text-align:left;padding:10px;border:0;border-bottom:1px #51514f solid} .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover{background:#e3ad56;} .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover .menu-item-text{color:#FFF} nav li.static > a .menu-item-text{ padding:10px;color:#FFF;text-align:left;} .ms-core-listMenu-horizontalBox li.static:first-child > .ms-core-listMenu-item{} nav .root > li.static > a{color:#FFF;} nav .root > li.static > a:hover{background:#none;} ul.dynamic {display:none; width:auto;} nav li.static > a:hover .menu-item-text:after {opacity:0;} /***** _____ Statistics _____*****/ .home-statistics{margin-top:30px} /***** _____ Courses _____*****/ .courses-details .time-points-location .icon-title{margin-bottom:30px;} /***** _____ Engineer Corner _____*****/ .engineer-corner{margin-bottom:60px;min-height:350px} .engineer:before{bottom:0;top:auto;height:57%;width:100%} .engineer .section-header.on-dark{ margin:100px 0;} .engineer-docs .nav-tabs{margin-top:30px} .engineer-docs ul.nav-tabs > li{width:auto} /***** _____ Events Center _____*****/ .events-center .row.no-gutter [class*="col-"]:not(:first-child):not(:last-child){padding-right:15px;padding-left:15px} .events-center .row.no-gutter [class*="col-"]:first-child{padding-right:15px;} } /*------------------------------------------------------------------------------*/ /* width smaller than 320px /*------------------------------------------------------------------------------*/ @media only screen and (max-width: 320px) {}