/************************************************* ************************************************** 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: 'Greta'; src: url('/Style Library/SCE/fonts/Greta.eot'); /* IE9 Compat Modes */ src: url('/Style Library/SCE/fonts/Greta.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Style Library/SCE/fonts/Greta.woff') format('woff'), /* Modern Browsers */ url('/Style Library/SCE/fonts/Greta.ttf') format('truetype'); font-style: normal; font-weight: bold; text-rendering: optimizeLegibility; } 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 14px Greta;} ol, ul {list-style: none;} table {border-collapse: separate;border-spacing: 0;} caption, th, td {text-align: right;font-weight: normal;} blockquote:before, blockquote:after,q:before, q:after { content: "";} blockquote, q { quotes: "" "";} ::-moz-selection{ background: #41413f ; color: #fff;} ::selection{ background: #41413f ; 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;} .pull-right{float:left !important} .pull-left{float:right !important} a:link, a:visited{color:#e3ad56;text-decoration:none} a:hover{color:#41413f;text-decoration:underline} /***** _____ bootsrap with no spaces _____*****/ /* remove spacing between middle columns */ .row.no-gutter [class*='col-']:not(:first-child):not(:last-child) { padding-left:0 ; padding-right:0 ; } /* remove right padding from first column */ .row.no-gutter [class*='col-']:first-child { padding-left:1px; } /* remove left padding from first column */ .row.no-gutter [class*='col-']:last-child { padding-right: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-right: 0;margin-left: 0;} .pagetitle{margin-bottom:40px} .pagetitle .ms-core-pageTitle{white-space:normal;font-family:"Greta"} .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 {color: #41413f;font: 15px/20px Greta} .dfwp-column{margin-right: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-right:0 !important;} .ms-dlgTitle {padding: 10px 15px 10px 30px !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 20px 0;font:bold 15px Greta;color:#41413f;text-decoration:underline} /* ________________________________________________________________________________________________________________ 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:#41413f;font:bold 12px Greta;} #sideNavBox ul.root > li > a.static:before{content:"";display:inline-block;transform: rotate(45deg);width:5px;height:5px;background:#41413f;margin-left:20px} #sideNavBox ul.root > li > a.static:hover{background:#d19f4f!important ;color:#FFF} #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 "Greta";background:transparent} .ms-core-listMenu-verticalBox li.static > ul.static > li.static > .ms-core-listMenu-item:before {content:"\f104";font-family:"FontAwesome";display:inline-block;margin:0 20px 0 5px} .ms-core-listMenu-verticalBox li.static > ul.static > li.static > .ms-core-listMenu-item:hover {background:#f2f2f2;} .ms-core-listMenu-verticalBox li.selected{background:#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 --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ /***** _____ Unified Number _____*****/ .header-top{border-bottom:1px #e5e5e5 solid;padding:20px 0;background:#FFF;margin-bottom:15px;font-family:Greta} .header-top .icon{display:inline-block;transform: rotate(45deg);text-align:center;width:25px;height:25px;border:1px #d6d6d6 solid;background:#FFF} .header-top .fa{transform: rotate(-45deg);color:#d6d6d6;font-size:15px;padding:2px 0 0 2px } .header-top .unified-num .icon{border:1px #41413f solid;} .header-top .unified-num .fa{color:#41413f;} .header-top .num{display:inline-block;margin-right:5px;color:#41413f;font-size:15px;} .header-top .num span:first-child{font-size:12px} /***** _____ 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;transform: rotate(45deg);text-align:center;width:25px;height:25px;} ul.social > li > a > .fa {transform: rotate(-45deg);color:#d6d6d6;font-size:15px;padding:2px 5px 0 0 } 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:#41413f} 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-top ul.social > li {margin:0 5px 0 0 ;} .footer-box ul.social > li {margin:0 0 0 5px;} .header-top ul.social > li > a {border:1px #d6d6d6 solid;background:#FFF} .footer-box ul.social > li > a {border:0;background:#e3ad56;} .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 0 0 5px} .share{text-align:center;margin: 20px 0 0 10px;} .share span{display:block;font:bold 15px Greta;color:#FFF;text-transform:uppercase} .share .fa {color:#FFF;font-size:15px;padding:0 0 10px 0;} /*.header-top ul.social > li > a.langauge{display:none}*/ .header-inner ul.social, .header-inner .share{display:none} /***** _____ SearchBox _____*****/ .search{display:none !important;width:235px;height:35px;margin:-15px 0 0 5px} .search .ms-mpSearchBox{width:auto} .search .ms-srch-sb{ width:auto; height:35px;background:none ;border:0} .search .ms-srch-sb > input{margin:-8px 0 0 5px !important; width:200px !important;padding:0; font-size:12px; background:transparent !important;color:#d6d6d6;border:0 ;border-bottom:1px solid #e5e5e5;/*height:38px;*/} .search .ms-srch-sb > .ms-srch-sb-searchLink {background:none !important;transform: rotate(45deg);text-align:center;width:25px;height:25px;border:1px #d6d6d6 solid;;} .search #searchImg{display:none} .search #searchInputBox {margin-bottom: 0;} .search .fa{float:left;position:relative;top:18px;left:3px;transform: rotate(-45deg);color:#d6d6d6;font-size:15px;padding:0px 0 0 5px;} .header-bottom .logo{background:url("/Style Library/SCE/images/logo-ar.png") no-repeat top right;} .header-bottom .logo .ms-siteicon-img{visibility:hidden} .header-bottom .logo .ms-siteicon-a{max-width:207px} /***** _____ Global Navigation Styles _____*****/ .navbar{margin:20px 0 0 0} .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: #41413f;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 10px 0 0 ;text-align:center;background:url("/Style Library/SCE/images/nav-bullet.png") no-repeat 95% 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:#41413f;font:bold 15px Greta;text-transform:uppercase;} footer nav li.static > a .menu-item-text{color:#FFF;font-size:13px} 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:#e3ad56} .ms-core-navigation > div > ul.root > li.static > ul.static > li.selected a.selected .menu-item-text{color:#e3ad56} .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:#000} /**______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-left: 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:10px;text-align:right;overflow:hidden;} ul.dynamic:after { border-bottom:10px solid rgba(227, 173, 86, 1); border-right: 10px solid rgba(227, 173, 86, 0); border-left: 10px solid rgba(227, 173, 86, 0); content: ""; display: inline-block; position: absolute; right: 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{left: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:#e3ad56;border:0;} nav li.dynamic > .menu-item:hover{background:#41413f ;transform:translate(-5px,0)} ul.dynamic li{border-bottom:1px #cc9b4d solid;padding:0px;} ul.dynamic li:hover{background:#41413f ;} li.dynamic > a{color:#FFF !important;font-weight:bold;font-size:12px;font-family:"Greta";} li.dynamic > a:hover {color:#FFF !important; border:0;} /***** _____ Header of InnerPages [ breadcrumb and socialnetworks ] _____*****/ .header-inner{height:200px;background:url('/Style%20Library/SCE/images/breadcrumb-bg.jpg') no-repeat top center;} .bread-crumb {font:12px #FFF Greta;color:#FFF;font-weight:bold;display:inline-block} .bread-crumb a, .bread-crumb a:link, .bread-crumb a:visited{transition: all 0.5s ease-in 0s;color:#FFF; text-decoration:none;font-size:12px;font-family:"Greta"} .bread-crumb a:hover{ color:#f27617; text-decoration:underline} .bread-crumb .current{padding:0 5px 0 0;font-family:"Greta";} .bread-crumb .root{display:none;padding:0 0 0 5px} .bread-crumb .fa{font-size:15px} .bread-crumb .ms-sitemapdirectional{ font:12px #FFF Greta;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;right:0;left:0;} .header-inner .container{z-index:1;position: relative;margin-top:-120px} .subsite-name{display:inline-block;margin-left:15px} .subsite-name h1{font:bold 15px Greta;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 Greta;color:#e3ad56 ;} .subsite-name h1 A:hover{color:#FFF;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 [ News and Important Links ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ________ 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 Greta;color:#FFF;background:#e3ad56} /* ________ news-slider XSLT Styles ________ */ #slider, #services, #training, #departments, #members{direction: ltr;width: 100%;margin-bottom: 25px;display: inline-block;} #slider .slick-slide, #training .slick-slide, #members .slick-slide, #departments .slick-slide{float:left !important} /*#services .slick-slide{float:left !important}*/ .news-slider{position:relative;} .home-news {position:relative;direction: rtl;} .home-news .title-date{position:absolute;padding:20px;bottom:0} .home-news .title a:link, .home-news .title a:visited{text-transform:uppercase;font:normal 22px "Greta";color: #FFF;line-height:normal} .home-news .title a:hover{color: #e3ad56;text-decoration:none;} .home-news .date{font:normal 12px "Greta";color: #e3ad56;} .home-news .image{overflow:hidden} .home-news .image img{width:100%;height:401px} .home-news .cover{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:0;left:0;right:0;top:0} .home-news .cover:hover{} .home-news .image:hover img{transform:scale(1.2)} /* ________ news-slider Controls [ For Slic ] ________ */ #slider .slick-dots{text-align:center;position: absolute; top:10px; left:10px;direction:rtl} #slider .slick-dots li{display:inline;margin-right: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: 1px #e3ad56 solid; padding: 0;cursor: pointer;} #slider .slick-dots li.slick-active button, #slider .slick-dots li button:hover{background-color: #e3ad56;border:1px 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:#e3ad56;position:absolute;top:10px;right:10px;width:17px;height:17px;text-align:center;border:0;padding:0;font-size:0;cursor: pointer;} #slider .slick-next{right:25px;} #slider .slick-prev:hover, #slider .slick-next:hover{background-color:#41413f;} #slider .slick-prev:before, #slider .slick-next:before{font-family:"FontAwesome";content:"\f105";color:#f8f7f8;font-size:16px;} #slider .slick-next:before{ content: "\f104";} /* ________ 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;direction: rtl;} .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 "Greta";color: #FFF;line-height:normal} .home-links .title a:hover{color: #e3ad56;text-decoration:none;} /* .banner-big .home-links img{width:100%;height:245px;} .banner-small .home-links img{width:100%;height:155px} */ .banner-big .home-links img{width:100%;height:200px;} .banner-small .home-links img{width:100%;height:200px} .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;} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 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-bottom:0;} .white-section{background-color:#FFF} .dark-section{background-color:#282827} .grey-section{background-color:#f8f8f8} .read-more .english{display:none} .english{display:none !important} .article-content, .welcome-content, .ms-rtestate-field, .ms-webpart-chrome{font:normal 15px "Greta";color: #333;font-weight:normal} /***** _____ Section Header _____*****/ .section-header{padding:0 0 40px 0;} .section-header .section-name{/*margin-left:45px;*/} .section-name .section-icon{display:inline-block;} .section-name .section-title{margin:20px 10px 0 0;display: inline-block;} .section-name .section-title .sub-title, .section-name .section-title .main-title{font-weight:bold;font-family:Greta;color:#e3ad56;text-transform:uppercase} .section-name .section-title .sub-title{font-size:12px} .section-name .section-title .main-title{font-size:20px;color:#41413f;} .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;font:normal 14px Greta;line-height:22px;color:#333;text-align:justify;} /* ________ Services in the home page 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);*/transform: perspective(400px) rotateY(0deg);} .home-services .back{background-color:#e3ad56;/*transform: perspective(400px) rotateY(-179.9deg);*/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 18px "Greta";color: #e3ad56;line-height:normal} .home-services .title a:hover{color: #41413f;text-decoration:none;} .home-services .description{margin:45px 0px 0 ;font:normal 13px "Greta";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 13px "Greta";color: #41413f;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 .english{display:none} .home-services .read-more.box{border:1px #fff solid;background:#FFF;margin-top:-30px;padding:10px;} .home-services .read-more.box span{font:bold 13px "Greta";color: #41413f;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:auto;height:195px;cursor:hand;position:absolute;top:0;border-radius:0px;padding:20px; 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 13px "Greta";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} .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;direction:rtl;text-align:center;display:inline-block;/*position: absolute; top:10px; right:10px;*/} #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:#41413f; 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:80px;*/left:10px;} #services .slick-prev:hover, #services .slick-next:hover{background-color:#41413f;} #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 .section-name .section-title .main-title{color:#FFF;} .dark-section.statistics{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;right:0;left:0;} .statistics .section-header{padding:0;} /* ________ Statistics Xslt ________ */ .home-statistics .title, .home-statistics .description, .home-statistics .image{font:normal 20px "Greta";text-transform:uppercase;text-align:center;transition: all 0.25s ease-in 0s;} .home-statistics .title{color: #909090;line-height:normal;clear:both} .home-statistics .description{margin:15px 0 0 0;color: #e3ad56;font-size:25px;} .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{direction: rtl;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:right;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 "Greta";color: #e3ad56;line-height:normal} .home-training .title a:hover{color: #41413f;text-decoration:none;} .home-training .city{position:absolute;top:10px;right:25px;box-sizing: border-box;width:auto;margin:0;padding:10px;background-color:#e3ad56;font:bold 15px "Greta";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:right;font:bold 12px "Greta";color: #41413f;text-align:left;text-transform:uppercase} .home-training .date .fa{font-size:15px;margin-left:5px} .home-training .read-more{float:left/*position:absolute;right:10px;margin-top:0*/} .home-training .read-more a:link, .home-training .read-more a:visited{font:bold 12px "Greta";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-right:5px;vertical-align: bottom;transform:rotate(180deg)} .home-training .read-more .english{display:none} #training.slick-slider{text-align:center;} #training .slick-dots{direction:rtl;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:#41413f; 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-corner{position:relative;border-radius:10px;padding:20px;min-height:350px;border:1px #f1f1f1 solid;background-color:#FFF;box-shadow: 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:right;/*padding:38px 10px 30px 0;*/ padding:30px 10px 30px 0;border:0;border-bottom:1px #e2e2e2 solid;} .home-discounts a:hover{background-color:#000000;} /*.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 15px "Greta";color: #41413f;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 "Greta";color: #a7a7a7;text-decoration:none} .engineer-corner .read-more a .title{color:#41413f;} .engineer-corner .read-more a:hover{color: #e3ad56;text-decoration:none} .engineer-corner .read-more .fa{display:inline-block;font-size:15px;margin-left:5px;vertical-align: bottom;} .engineer-corner .read-more span.arabic .fa{transform:rotate(180deg)} /* ________ Discounts Categories for innerpages ________ */ .discounts-categories{} .discounts-categories a:link, .discounts-categories a:visited {display:block;text-decoration:none;text-align:right;padding:30px 10px 30px 0;border:0;border-bottom:1px #e2e2e2 solid;} .discounts-categories a:hover{background-color:#000000;} .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 15px "Greta";color: #41413f;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 Details for innerpages ________ */ .discounts-details{position:relative;padding:20px;border:1px #e2e2e2 solid;border-radius:5px;margin-bottom:30px;min-height:180px} .discounts-details .title, .discounts-details .details{text-align:right;text-transform:uppercase;font:bold 15px "Greta";color: #e3ad56;line-height:normal} .discounts-details .details{margin-bottom:45px;} .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 15px "Greta";color: #41413f;} .discounts-details .read-more .fa{transform:rotate(180deg);display:inline-block;font-size:15px;margin-right:5px;vertical-align: bottom;} /* ________ Magazine Xslt ________ */ .home-magazine{} .home-magazine .title{text-align:right;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 "Greta";color: #e3ad56;line-height:normal} .home-magazine .title a:hover{color: #41413f;text-decoration:none;} .home-magazine .image{margin:0;overflow:hidden;position:relative} .home-magazine .image img{width:100%;height:245px;border-radius:5px 5px 0 0;} .home-magazine .cover{z-index:0;display: block;border-radius:5px 5px 0 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)} /* ________ 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:0 0 15px 0} .home-relatedlinks .panel-default > .panel-heading{background-color:#FFF;} .home-relatedlinks .panel-title > a {font:bold 15px "Greta";color: #41413f;display:block} .home-relatedlinks .panel-title > a:before{margin-left:10px;font-size:14px} .home-relatedlinks .panel-title > a.accordion-toggle:before{font-family:"FontAwesome";content: "\f196";color:#e3ad56;margin-right:10px;font-size:14px} .home-relatedlinks .panel-title > a.accordion-toggle.collapsed:before{font-family:"FontAwesome";content: "\f147";} .home-relatedlinks .panel-body {font:normal 13px "Greta";color: #818181;} .home-relatedlinks .panel-title a:after{content: "-";font-size:20px;float:left;margin-top: -5px;} .home-relatedlinks .panel-title a.collapsed:after {content: "+";float:left;font-size:20px;margin-top: -5px;} /* .home-relatedlinks .title:after{content: "+";float:right;font-size:20px} .home-relatedlinks .title.collapsed:after{content: "-";font-size:20px} .home-relatedlinks .title.collapsed{color: #e3ad56;} .home-relatedlinks .title.collapsed a:link, .home-relatedlinks .title.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, .discounts-options .title a:visited{transition: all 0.5s ease-in 0s;text-transform:uppercase;font:bold 15px "Greta";color: #e3ad56;line-height:50px} .org-members .title a:hover{color: #41413f;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 15px "Greta";color: #e3ad56;} .headermarker.headertitle a{color:#000} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 2. Footer Styles --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* footer .section-header{padding:60px 0 40px 0;} footer .section-header{background:#f8f8f8;} */ /***** _____ Footer Top _____*****/ .footer-top, .footer-bottom{padding:60px 0;} .footer-top{background:#41413f} .footer-top .row:first-child .footer-box{margin-bottom:40px} .footer-box .box-title h5{font:bold 15px Greta;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 Greta;line-height:15px;color:#FFF;text-align:justify;} .footer-box .list-items li{margin-top:10px;color:#FFF;font:bold 12px Greta;text-align:right;transition: all 0.2s ease-in 0s;} .footer-box .list-items li:hover{transform:translate(5px,0)} .footer-box .list-items li .fa{padding-left:5px;} .footer-box .list-items.links li .fa{transform:rotate(180deg);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-left:10px} .footer-box .list-items.org-logos li{display:inline-block;/*float:right;*/margin:0 10px 0 0;} .footer-box .list-items.org-logos li a{display:block} .footer-box .list-items.org-logos li:first-child{margin-right:0} .news-letter .input-group{background:#2d2c2b;} .news-letter .input-group-addon{padding:0 10px 0 5px;border-radius:0;border:0;background:transparent;text-transform:uppercase;font:bold 12px Greta;color:#e3ad56} .news-letter .form-control{background:transparent;border-radius:0;border:0;height:40px;color:#FFF} .news-letter .btn{border-radius:0;border:0;padding:6px 0} .news-letter input.btnSubscribe{background:url('/Style Library/SCE/images/btn-subs.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)} /***** _____ Footer Bottom _____*****/ .footer-bottom{background:#2f2f2e} .footer-bottom .copy-rights{font:normal 12px Greta;color:#FFF;text-align:right;} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 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-left:10px;padding:0;width:30px;height:30px;line-height:30px !important;background:#FFF;font:bold 15px Greta;color:#cecece;border:1px #ebebeb solid} .paging A:hover{background:#41413f;color:#FFF;text-decoration:none;border-radius:2px;border:1px #41413f solid} .paging strong{border-radius:2px;text-align:center;display:inline-block;margin-left:10px;padding:0;width:30px;height:30px;line-height:30px !important;background:#41413f;font:bold 15px Greta;color:#FFF;border:1px #41413f 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{text-transform:uppercase;font:normal 15px "Greta";color: #FFF;line-height:normal} .news-center .title a:hover{color: #e3ad56;text-decoration:none;} .news-center .date{font:normal 12px "Greta";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 "Greta";color: #FFF;line-height:normal} .news-details .date{font:normal 12px "Greta";color: #e3ad56;} .news-details .article-content{font:normal 15px "Greta";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;left:20px;right:20px;font:normal 12px "Greta";color: #e3ad56;} .photo-gallery .title{height:100px;background:#FFF;border:1px #ebebeb solid;padding:25px 20px;text-transform:uppercase;font:normal 15px "Greta";color: #41413f;line-height:normal} .photo-gallery .fa.photo-icon{position:absolute;bottom:-1px;left:10px;color:#41413f;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 "Greta";color:#e3ad56;border-left: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:#41413f} .events-center .date .month{font-size:25px} .events-center .date.fa{padding:0} .events-center .date .fa{position:absolute;width:100%;bottom:1px;left:1px;display:block;padding:11px;background:#f5f5f5;font-size:30px;color:#e3ad56;text-align:center} .events-center .details{padding:20px;font:normal 12px "Greta";color:#e3ad56} .events-center .title a:link, .events-center .title a:visited{text-transform:uppercase;font:normal 15px "Greta";color: #4c4c4a;line-height:normal} .events-center .title a:hover{color: #e3ad56;text-decoration:none;} .events-center .description{font:normal 12px "Greta";color: #818181;} /* remove right padding from first column */ .events-center .row.no-gutter [class*='col-']:first-child { padding-left:0px;} /* remove left padding from first column */ .events-center .row.no-gutter [class*='col-']:last-child { padding-right: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 "Greta";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 "Greta";color:#e3ad56} .events-details ul.loction-details li .fa{padding-left:10px} .events-details .date-details{margin-top:15px} .events-details .date-details .day-box{border:1px #ebebeb solid;font:normal 12px "Greta";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:#41413f;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:#41413f} .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:right} .events-details .sponsor-item img{height:85px} .events-details .description{font:normal 12px "Greta";color: #818181;} .events-details .description img{max-width: 100%;height: auto;} .events-details h1{color:#41413f} /* ________ NewsPaper Name Xslt ________ */ .newspaper-name{border:1px #e2e2e2 solid;border-radius:5px;margin-bottom:30px;padding-bottom:20px} .newspaper-name .title{text-align:right;margin:10px 20px 0 20px;padding-bottom:20px;border-bottom:1px #e2e2e2 solid;color: #e3ad56;} .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: #41413f;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:#41413f;overflow:hidden;padding:20px;border-bottom:1px #e2e2e2 solid;text-align:right;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: #41413f;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{transform:rotate(180deg);display:inline-block;font-size:15px;margin-right: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-left: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:#e3ad56;} .inner-discounts .discounts-categories a:link, .inner-discounts .discounts-categories a:visited {display:block;text-decoration:none;text-align:right;padding:30px 0 30px 10px;border:0;border-bottom:1px #e2e2e2 solid;} .inner-discounts .discounts-categories a:hover{background-color:#41413f;} .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 "Greta";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:right;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 "Greta";color: #e3ad56;line-height:normal} .discounts-options .title a:hover{color: #41413f;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 0 0 5px;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 "Greta";color: #41413f;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-right:5px;vertical-align: bottom;transform:rotate(180deg)} /* ________ 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:right;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 "Greta";color: #e3ad56;line-height:normal} .engineer-magazine .title a:hover{color: #41413f;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 "Greta";color: #41413f;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-right:5px;vertical-align: bottom;} .engineer-magazine .read-more .fa{transform:rotate(180deg);} .engineer-magazine .read-more .fa:first-child{transform:rotate(0deg);} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 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 "Greta";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:#41413f} .courses-details .time-points-location .icon .inner{transform: rotate(90deg);width:40px;height:40px;background:#41413f;border:1px #FFF solid} .courses-details .time-points-location .fa{transform: rotate(225deg);color:#FFF;font-size:25px;padding:2px 0 0 2px} .courses-details .time-points-location .icon-title{margin-top:30px;text-align:center;font:bold 12px "Greta";color:#41413f;text-transform:uppercase} .courses-details .time-points-location .icon-title hr{margin:5px 0;border-width:2px 0 0;border-color:#41413f} .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 "Greta";color:#41413f;text-transform:uppercase} .courses-details .box .description{/*position:absolute;bottom:20px;*/margin-bottom:20px;padding-top:10px;font:normal 13px "Greta";color:#e3ad56;} .courses-details .box .fa{float:left;font-size:15px} .courses-details .box hr {border-width:0;margin:12px 0 5px 0} .courses-details .box .description .fees{display:block;float:left;text-align:center;padding:2px;background:#e3ad56;color:#FFF;min-width:100px;font:bold 15px "Greta";} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 2. InnerPages Styles [ About us Pages ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ #departments.slick-slider, #members.slick-slider{text-align:center} /* #departments .slick-dots, #members .slick-dots{direction:rtl;text-align:center;display:inline-block;} #departments .slick-dots li, #members .slick-dots li{display:inline;margin-right:10px} #departments .slick-dots li:first-child, #members .slick-dots li:first-child{margin-left:0} #departments .slick-dots li button, #members .slick-dots li button{transform: rotate(45deg);transition: all 0.5s ease-in 0s;font-size: 0;width:10px;height: 10px;background-color:#41413f; border:0; padding: 0;cursor: pointer;} #departments .slick-dots li.slick-active button, #departments .slick-dots li button:hover, #members .slick-dots li.slick-active button, #members .slick-dots li button:hover {background-color: #e3ad56;border:0px #FFF solid;} #departments .slick-prev, #departments .slick-next, #members .slick-prev, #members .slick-next{display:none !important;} */ #members .slick-dots, #departments .slick-dots{display:none !important;direction:rtl;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:#41413f;} #members .slick-prev:before, #members .slick-next:before, #departments .slick-prev:before, #departments .slick-next:before{font-family:"FontAwesome";content:"\f177";color:#FFF;font-size:16px;} #members .slick-next:before, #departments .slick-next:before{ content: "\f178";} /* ________ Board Members Styles ________ */ .sessions-num{text-align:center;} .sessions-num li{display:inline-block;margin:0 0 20px 10px;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:120px;padding:15px;font:bold 12px "Greta";color: #41413f;background:#FFF;} .sessions-num li a:hover, .sessions-num li.current a{background:#41413f;color: #FFF;text-decoration:none;border-radius:3px;} .board-members{transition: all 0.5s ease-in 0s;margin-bottom:30px;direction:rtl;text-align:right} .board-members .image-position{position:relative;} .board-members .position-container{opacity:1;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;left:20px;right:20px;font:normal 15px "Greta";color: #e3ad56;} .board-members .title{height:80px;background:#FFF;border:1px #ebebeb solid;padding:25px 20px;text-transform:uppercase;font:normal 15px "Greta";color: #41413f;line-height:normal} .board-members .fa.photo-icon{position:absolute;bottom:-1px;left:10px;color:#41413f;font-size:24px;background:#FFF;padding:2px;} .board-members .image{overflow:hidden} .board-members .image img{width:100%;height:210px;position:relative} .board-members:hover .position-container{opacity:0;} .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 .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 20px 0 0;text-transform:uppercase;font:normal 15px "Greta";color: #41413f;line-height:50px;} .board-meetings .read-more{border-right:1px #ebebeb solid;padding:0;line-height:50px;text-align:center} .board-meetings .read-more a:link, .board-meetings .read-more a:visited{font:bold 12px "Greta";text-align:center;color: #41413f;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-right:5px;vertical-align:middle;color:#e3ad56} /* ________ Departments List Xslt ________ */ .departments{border:1px #e2e2e2 solid;margin-bottom:30px;padding:30px;min-height:280px;position:relative;direction:rtl} .departments .image{} .departments .image img{height:30px;} .departments .title{margin:10px 0;text-align:right} .departments .title a:link, .departments .title a:visited{text-transform:uppercase;font:bold 12px "Greta";color: #e3ad56;line-height:normal} .departments .title a:hover{color: #41413f;text-decoration:none;} .departments .description{font:normal 12px "Greta";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 "Greta";color: #41413f;text-decoration:none} .departments .read-more a:hover{color: #e3ad56;text-decoration:none} .departments .read-more .fa{display:inline-block;font-size:15px;margin-right:5px;vertical-align: bottom;transform:rotate(180deg)} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 3. Body Style [ E-Services Pages ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ select#ddlFaqCategories, select#ddlFaqSubCategories{width:100%;height:50px;background:#f8f8f8;border:1px #ebebeb solid;margin-bottom:30px;padding-right:20px; font:bold 15px "Greta";color: #41413f;text-transform:uppercase} .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 "Greta";color: #41413f;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-left:10px;font-size:14px} .FAQ .panel-title > a.accordion-toggle.collapsed:before{font-family:"FontAwesome";content: "\f196";} .FAQ .panel-body {font:normal 12px "Greta";color: #818181;} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 4. Body Style [ Contact us Pages ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .contacts{margin-bottom:30px} .contacts .box-title h5{font:bold 12px Greta;color:#41413f;text-transform:uppercase;margin-bottom:5px} .contacts .box-title .box-title-border{width:75px;height:2px;background-color:#41413f;margin-bottom:20px} .contacts .box-content{font:bold 12px Greta;line-height:15px;color:#FFF;text-align:justify;} .contacts .list-items li{margin-top:10px;color:#e3ad56;font:bold 12px Greta;text-align:right;transition: all 0.2s ease-in 0s;} .contacts .list-items li:hover{transform:translate(5px,0)} .contacts .list-items li .fa{padding-left: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:#41413f;} .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:#41413f} .contacts .icon .inner{overflow:hidden;transform: rotate(90deg);width:40px;height:40px;background:#41413f;border:1px #FFF solid} .contacts .icon img{transition: all 0.5s ease-in 0s;transform: rotate(225deg);padding:2px 6px 0 0;position:absolute;bottom:8px;right:0;left: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{left:15px;right:auto;top:15px} .has-feedback .form-control{padding-right:5px;padding-left:42.5px} .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 Greta;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:left;background:#e3ad56;padding:10px;border:0;font:bold 13px Greta;color:#FFF;} .contacts-form .submitBtn:hover{background:#41413f;} .popover{text-align:right;min-width: 250px;} .popover-title{font-weight:bold;color:#41413f} .contacts-form span.label {font:bold 12px Greta;display: inline-block; font-weight: normal;max-width: 100%;color:#41413f} .validationGrnMsg {display: inline-block;} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 4. Body Style [ Search Center Page ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .ms-srch-item{padding:0;margin:10px 0 0 10px;width:auto} /*.ms-srch-group h3{font-size:15px}*/ .ms-srch-item-path{color:#41413f} /*.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 30px 0 0; max-height:30px;color:#1d1d1b;text-align:right;font-size:20px;} .recrutementr .date:after{content:"";position:absolute;top:50px;right: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:right;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: #1d1d1b; 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:left;overflow:hidden;border:5px #d8a553 solid;} .recrutement .image img{width:100%;height:270px;bottom:0 !important;left:0 !important} .recrutement .image .icon { width: 140px; height: 140px; padding:5px; margin: 60px auto 0; background-color: #d8a553; bottom:0 !important;left: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:#41413f !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} */ /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 4. Body Style [ Search Center Page ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .main-department{position:relative;margin-bottom:30px;height:270px} .main-department .title{z-index:999;position:absolute;top:40px;width:60%;float:right;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:left;overflow:hidden;border:5px #d8a553 solid;} .main-departmentt .image img{width:100%;height:270px;bottom:0 !important;left:0 !important} .main-department .image .icon { width: 140px; height: 140px; padding:5px; margin: 60px auto 0; background-color: #d8a553; bottom:0 !important;left: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:left;left:0;} .dfwp-item:nth-child(even) .main-department .image{float:right} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 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: #41413f; 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: #41413f; 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 ] --------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------*/ .reports{margin-bottom:30px;background:#d8a552;border-radius:3px} .reports .title{position:relative;height:240px;border:10px #c8994d outset;padding:10px;background:#fff;border-radius:3px} .reports .title a{text-decoration:none !important} .reports .box-title{ padding: 10px; font-size: 20px; color:#41413f; } .reports hr { width: 90px; height: 3px; background-color: #d8a553; border-radius: 2px; border: 0; margin:10px; float:right; } .reports .num{ position:absolute; bottom:10px; right:20px; font-size:20px; color:#41413f; } .reports .num .number{ color:#e3ad56; font-size:30px; } .reports .image{ height:120px; text-align:center; display:block; padding:10px; border-bottom:2px #c3954b solid; text-decoration:none !important } .reports .image:last-child{ border:0; } .reports .image img{height:30px;} .reports .image .icon { width:70px; height:70px; padding:5px; margin: 0 auto; background-color: #41413f; } .reports .image .icon-line{ width: 60px; height: 60px; line-height:60px; border:2px #fff solid; background:transparent; overflow:hidden; } .reports .image .name{ font-size: 20px; color:#FFF; } .reports:hover .title{ border-color: #d8a553; } .reports .image:hover .icon{ background-color: #d8a553; } .reports .image:hover { background-color: #41413f; } .reports:hover .title span{ border-color: #d8a553; transform: translate(0,30px);} /*------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------- 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} } /*------------------------------------------------------------------------------*/ /* 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-left:15px} #top-content .row.no-gutter [class*='col-']:not(:first-child):not(:last-child) { padding-left:0px ; padding-right:15px ;} #top-content .row.no-gutter [class*='col-']:last-child { padding-right: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:right;width:100%;} .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item{ background:url("/Style Library/SCE/images/nav-bullet.png") no-repeat 5px center #41413f; text-align:right;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:right;} .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:right !important;margin-left: 0} .section-header .section-description{margin:15px 0 0 5px;} /***** _____ Footer _____*****/ .footer-top .row .footer-box{margin-bottom:40px} } /*------------------------------------------------------------------------------*/ /* Landscape phones and portrait tablets - Width : 480px /*------------------------------------------------------------------------------*/ @media (max-width: 767px) { /***** _____ header Top _____*****/ .header-top ul.social{margin-top:20px;} .header-top .search{margin-top:5px;} /***** _____ news & important Links _____*****/ #top-content .row.no-gutter [class*="col-"]:first-child, .contacts-form .row.no-gutter [class*="col-"]:first-child{padding-left: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-left:15px ; padding-right:15px ;} #top-content .row.no-gutter [class*='col-']:last-child, .contacts-form .row.no-gutter [class*='col-']:last-child { padding-right: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:right;width:100%;} .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item{ background:url("/Style Library/SCE/images/nav-bullet.png") no-repeat 5px center #41413f; 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:right;} .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;} /***** _____ Boxes _____*****/ /* remove right padding from first column and remove left padding from first column .row.no-gutter [class*='col-']:first-child, .row.no-gutter [class*='col-']:last-child { padding-left:0px;padding-right:0px;} */ /***** _____ Section Name _____*****/ .section-name{float:right !important;margin-left: 0} .section-header .section-description{margin:15px 0 0 5px;} /***** _____ Footer _____*****/ .footer-top .row .footer-box{margin-bottom:40px} /***** _____ Engineer Corner _____*****/ .engineer-corner{margin-bottom:60px;min-height:350px} /***** _____ Statistics _____*****/ .home-statistics{margin-top:30px} /***** _____ Events Center _____*****/ .events-center .row.no-gutter [class*="col-"]:not(:first-child):not(:last-child){padding-left:15px;padding-right:15px} .events-center .row.no-gutter [class*="col-"]:first-child{padding-left:15px;} } /*------------------------------------------------------------------------------*/ /* Portrait phones and smaller - Width : 321px /*------------------------------------------------------------------------------*/ @media (max-width: 480px) { .header-top ul.social, .btn-eservices {margin-top:20px;float:right !important} .header-top .search{margin-top:5px;float:right !important} /***** _____ news & important Links _____*****/ #top-content .row.no-gutter [class*="col-"]:first-child, .contacts-form .row.no-gutter [class*="col-"]:first-child{padding-left: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-left:15px ; padding-right:15px ;} #top-content .row.no-gutter [class*='col-']:last-child, .contacts-form .row.no-gutter [class*='col-']:last-child { padding-right: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:right;width:100%;} .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item{ background:url("/Style Library/SCE/images/nav-bullet.png") no-repeat 5px center #41413f; text-align:right;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:right;} .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;} /***** _____ Engineer Corner _____*****/ .engineer-corner{margin-bottom:60px;min-height:350px} /***** _____ Statistics _____*****/ .home-statistics{margin-top:30px} /***** _____ Courses _____*****/ .courses-details .time-points-location .icon-title{margin-bottom:30px;} /***** _____ Events Center _____*****/ .events-center .row.no-gutter [class*="col-"]:not(:first-child):not(:last-child){padding-left:15px;padding-right:15px} .events-center .row.no-gutter [class*="col-"]:first-child{padding-left:15px;} /***** _____ recrutement _____*****/ .recrutement .image {display:none;} .recrutement .title { width:100% ;} /***** _____ recrutement _____*****/ .main-department .image {display:none;} .main-department .title { width:100% ;} } /*------------------------------------------------------------------------------*/ /* width smaller than 320px /*------------------------------------------------------------------------------*/ @media only screen and (max-width: 320px) {}