/* Fonts */ @import 'fonts.css'; /* General styles */ body{ margin: 0; padding: 0; font-family: 'Alegreya Sans', sans-serif; } a { text-decoration: none; } p { font-style: italic; } /* image container */ .slider { position: relative; overflow: hidden; height: 100vh; width: 100vw; } .slide { position: absolute; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease-in-out; } .slide img { width: 100%; height: 100%; } .slide.current { opacity:1; transition: opacity .9s ease-in-out; } .slide .content { position: absolute; bottom: 70px; left: -600px; width: 600px; opacity: 0; background-color: rgba(255,255,255,0.8); color: #333; padding: 35px; } .ig-backdrop-content { /* position: absolute; */ align-items: center; width: 40%; height: 60%; color: #fff; display: flex; flex-direction: column; margin-left: 15px; } .ig-backdropsw-content { /* position: absolute; */ align-items: center; width: 40%; height: 300px; color: #fff; display: flex; flex-direction: column; margin-left: 15px; } .ig-backdrop-content p { margin-top: 15px; text-align: center; height: 100%; } .ig-cont { display: flex; flex-direction: column; overflow: auto; padding: 0; margin: 0; } .ig-cont-sw { display: flex; flex-direction: column; overflow: auto; padding: 0; margin-top: 10px; } .ig-h4 { margin-top: 15px; font-size: 20px; align-items: left; } .ig-p { font-size: 17px; margin-top: 15px; text-align: left; height: 100%; } .ig-tah { font-size: 17px; margin-top: 15px; text-align: left; height: 100%; } .ig-backdrop img.ig-nippo-pic { max-width: 100%; max-height: 100%; margin-top: 0; } .slide .content h1 { margin-bottom: 10px; text-align: center; } .slide.current .content { opacity: 1; transform: translateX(600px); transition: all .9s ease-in-out .3s; margin-left: 170px; } .slide:first-child { background: url('../IMG/ig-banner2.jpg') no-repeat center center/cover; } .slide:nth-child(2) { background: url('../IMG/ig-banner1.jpg') no-repeat center top/cover; } .slide:nth-child(3) { background: url('../IMG/ig-banner3.jpg') no-repeat center top/cover; } .slide:nth-child(4) { background: url('../IMG/ig-banner4.jpg') no-repeat center top/cover; } .slide:nth-child(5) { background: url('../IMG/ig-banner5.jpg') no-repeat center top/cover; } /*end of img container */ h2, h3, h4, h6 { font-weight: 600; } h3 { width: 100%; margin-top: 0; font-size: 50px; margin-bottom: 0; padding-left: 10px; font-style: italic; } h3:first-letter { color: #dca453; } h4 { font-size: 30px; text-align: center; font-style: italic; } h2 { text-align: center; font-family: "Segoe UI",Arial,sans-serif; font-weight: 400; margin: 10px 0; font-size: 40px; } footer h2 { font-size: 40px; } footer a { font-size: 25px; } .ig-container { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; max-width: 1700px; margin: 0 auto; box-sizing: border-box; } .ig-limiter { width: 100%; height: 3px; background-color: #fff; display: flex; justify-content: center; } .ig-align-center { align-items: center; } /* Header */ .mySlides { display:flex; overflow: hidden; width: 100%; } header .ig-content { width: 100%; height: 100%; position: relative; top: 50px; } .ig-content .ig-arrow { position: absolute; top: 50%; display: inline-block; padding: 15px; border: solid #eee; border-width: 0 2px 2px 0; cursor: pointer; -webkit-transition:border-color .3s ease; transition:border-color .3s ease; } .ig-content .ig-arrow:hover { border-color: #dca453; border-width: 0 3px 3px 0; } .ig-content .ig-arrow.ig-arrow-left { -webkit-transform:rotate(135deg); transform:rotate(135deg); right: 97%; } .ig-content .ig-arrow.ig-arrow-right { -webkit-transform:rotate(-45deg); transform:rotate(-45deg); left: 97%; } header nav { position: fixed; width: 100%; margin: 10px 0; padding: 10px 5px; z-index: 999; -webkit-transition:all .3s ease; transition:all .3s ease; font-weight: 300; } header nav.ig-nav-fixed { margin:0; background: rgba(200, 200, 200, .6); } header nav ul.ig-navigation { margin-top: -45px; padding: 0; display: flex; list-style-type: none; font-weight: 600; } header nav ul.ig-navigation li a { display: block; padding: 0 20px; font-size: 20px; font-weight: 800; color: #000; } header nav ul.ig-navigation li a:after { content: ''; display: block; height: 1px; width: 0; background-color: #000; -webkit-transition: all .3s ease; transition: all .3s ease; } header nav ul.ig-navigation li a:hover:after { width: 100%; opacity: 1; } .ig-main-bnr{ display: block; width: 100%; } /* Logo */ img.ig-logo-img { height: 75px; width: 120px; } /* Sections */ .ig-section { padding: 100px 0; } /* About Us */ #ig-about .ig-column p { text-align: left; } p { text-align: center; font-size: 20px; } #ig-about .ig-container { display: flex; flex-wrap: wrap; flex-direction: row; } #ig-about .ig-column { width: 48%; margin-top: 15px; display: flex; flex-wrap: wrap; justify-content: left; } .ig-about-us-pic { width: 100%; max-width: 500px; } #ig-about i { padding-bottom: 10px; font-size: 60px; color: #dca453; } /* Only for professionals */ #ig-pro .ig-pro-column { width: 100%; margin-top: 15px; display: flex; flex-wrap: wrap; justify-content: center; } .ig-pro-h3 { text-align: center; font-size: 50px; } .ig-pro-row { width: 100%; margin-top: 15px; display: flex; flex-wrap: wrap; justify-content: space-between; } .ig-col-1 { width: 33%; margin-top: 15px; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: normal; background-color: #ececec; border: 1px solid #d0caca; cursor: pointer; } .ig-col-1:hover { border: 2px solid #d0caca; background-color: #ccc; } #ig-pro i { padding-bottom: 10px; padding-top: 10px; font-size: 60px; color: #dca453; padding-left: 43%; } /* Projects */ #ig-projects .ig-pro-column { width: 100%; margin-top: 15px; display: flex; flex-wrap: wrap; justify-content: center; } .ig-projects-h3 { text-align: center; } .ig-projects-row { width: 100%; margin-top: 15px; display: flex; flex-wrap: wrap; justify-content: space-between; } .ig-col-11 { width: 33%; margin-top: 15px; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; border: 1px solid #d0caca; } .ig-col-12 { width: 33%; margin-top: 15px; display: flex; flex-direction: column; align-items: center; flex-wrap: wrap; justify-content: center; border: 1px solid #d0caca; } .ig-col-13 { width: 33%; margin-top: 15px; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; border: 1px solid #d0caca; } .ig-col-1:hover { border: 2px solid #d0caca; background-color: #ccc; } .ig-projects-pic { width: 100%; max-width: 350px; padding-top: 10px; } /*Products*/ #ig-products .ig-pro-column { width: 100%; margin-top: 15px; display: flex; flex-wrap: wrap; justify-content: center; } .ig-products-row { width: 100%; margin-top: 15px; display: flex; flex-wrap: wrap; justify-content: space-between; } .ig-products-pic { width: 100%; max-width: 320px; padding: 2%; cursor:pointer; -webkit-transition: all .3s ease; transition: all .3s ease; } .ig-products-pic:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .ig-backdrop { position: fixed; display: flex; flex-direction: row; align-items: center; top: 0; width: 100%; height: 100%; background:rgba(0,0,0,0.8); z-index: 9999; justify-content: center; } .ig-backdrop img { max-width: 60%; max-height: 60%; margin-top: 20px; } .ig-backdrop-close { position: absolute; display: flex; align-items: center; justify-content: center; top: 20px; right: 20px; height: 30px; width: 30px; color: #fff; font-size: 16px; border:solid 1px #fff; border-radius: 100%; cursor: pointer; } /*Partners*/ #ig-partners .ig-pro-column { width: 100%; margin: 55px 0; display: flex; flex-wrap: wrap; justify-content: center; } .ig-partners-row { width: 100%; margin-top: 15px; display: flex; flex-wrap: wrap; justify-content: space-between; } .ig-wrapper { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; width: 100%; } .ig-partners-content { width: 100%; height: 100%; position: relative; top: 50px; } .ig-partners-content .ig-arrow { position: absolute; top: 50%; display: inline-block; padding: 15px; border: solid #999; border-width: 0 2px 2px 0; cursor: pointer; -webkit-transition:border-color .3s ease; transition:border-color .3s ease; } .ig-partners-content .ig-arrow:hover { border-color: #dca453; border-width: 0 3px 3px 0; } .ig-partners-content .ig-arrow.ig-arrow-left { -webkit-transform:rotate(135deg); transform:rotate(135deg); right: 105%; } .ig-partners-content .ig-arrow.ig-arrow-right { -webkit-transform:rotate(-45deg); transform:rotate(-45deg); left: 105%; } /* partners container S .slider-2 { position: relative; overflow: hidden; height: 50vh; width: 50vw; } .slide-2 { position: absolute; top: 0; width: 33%; height: 33%; opacity: 0; transition: opacity .3s ease-in-out; } .slide-2 img { width: 100%; height: 100%; } .slide-2.current { opacity:1; } .slide-2 .content-2 { position: absolute; bottom: 70px; left: -600px; width: 600px; opacity: 0; background-color: rgba(255,255,255,0.8); color: #333; padding: 35px; } .slide-2 .content-2 h1 { margin-bottom: 10px; text-align: center; } .slide-2.current .content-2 { opacity: 1; transform: translateX(600px); transition: all .7s ease-in-out .3s; margin-left: 170px; } .slide-2:first-child { background: url('../IMG/logo images/Apolodor-logo.png') no-repeat center center/cover; } .slide-2:nth-child(2) { background: url('../IMG/logo images/Aurubis-logo.png') no-repeat center top/cover; } .slide-2:nth-child(3) { background: url('../IMG/logo images/BMF-logo.png') no-repeat center top/cover; } .slide-2:nth-child(4) { background: url('../IMG/logo images/Danone-logo.png') no-repeat center top/cover; } .slide-2:nth-child(5) { background: url('../IMG/logo images/GBS-logo.png') no-repeat center top/cover; } .slide-2:nth-child(6) { background: url('../IMG/logo images/ISA-2000-logo.png') no-repeat center top/cover; } .slide-2:nth-child(7) { background: url('../IMG/logo images/Lidl-logo.png') no-repeat center top/cover; } .slide-2:nth-child(8) { background: url('../IMG/logo images/NKJ-logo.png') no-repeat center top/cover; } .slide-2:nth-child(9) { background: url('../IMG/logo images/PST-logo.png') no-repeat center top/cover; } .slide-2:nth-child(10) { background: url('../IMG/logo images/TIM-logo.png') no-repeat center top/cover; } .slide-2:nth-child(11) { background: url('../IMG/logo images/Trace-logo.png') no-repeat center top/cover; } */ /*end of partners container */ /* Software */ #ig-software .ig-sw-column { width: 100%; margin-top: 15px; display: flex; flex-wrap: wrap; justify-content: center; } .ig-sw-row { width: 100%; margin-top: 15px; display: flex; flex-wrap: wrap; justify-content: left; flex-direction: column; } .ig-sw-h3 { text-align: center; font-size: 50px; } .ig-sw-row-prod { width: 100%; margin-top: 5px; display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row; } .ig-swcol-1 { width: 24%; margin: 15px 2px; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; border: 1px solid #d0caca; } .ig-swcol-1:hover { cursor: pointer; border-width: 2px; background-color: #ccc; } .ig-sw-pic { width: 100%; max-width: 350px; padding-top: 10px; } /* Footer */ footer { background: rgba(150, 150, 150, .5); padding: 10px 0; } footer .ig-container { height: 200px; } footer .ig-social-icons { display: flex; font-size: 35px; margin-left: 45%; justify-content: space-around; } footer .ig-social-icons a { color: #000; display: flex; -webkit-transition:opacity .3s ease; transition:opacity .3s ease; } footer .ig-social-icons a:hover { color: rgb(5,5,250); opacity: .7; } .ig-follow { text-align: center; font-size: 30px; margin-bottom: 2px; } .ig-right-container { width: 33%; display: flex; flex-direction: column; } .ig-number { display: flex; justify-content: center; margin-top: 5px; font-size: 22px; } .ig-number i { font-size: 22px; -webkit-transition:opacity .3s ease; transition:opacity .3s ease; } .ig-number i:hover { color: rgb(0,230,0); opacity: .7; } .ig-mail { display: flex; justify-content: center; margin-top: 5px; font-size: 22px; } .ig-mail i { font-size: 22px; -webkit-transition:opacity .3s ease; transition:opacity .3s ease; } .ig-mail i:hover { color: rgb(250,0,0); opacity: .7; } .ig-copyright { margin-top: 30px; } .ig-copyright p { font-size: 16px; text-align: center; margin-bottom: 0; } .icon-facebook2 { font-size: 65px; } .ig-align-left { align-items: left; margin-left: 20px; } header nav .ig-nav-toggle { display: none; } .icon-google2 { font-size: 65px; } .icon-google2:hover { color: red; } /* Tool BG justify-content: left; align-items: left;*/ header .ig-tool-content { width: 100%; height: 100%; position: relative; } .ig-tool-margin { margin-left: 5px; } #ig-tool-ponuda { background: #f6f6f6; display: flex; flex-direction: column; } .ig-tool-row { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; } .ig-tool-col { width: 48%; display: flex; flex-direction: column; align-items: center; margin-left: 8px; } .ig-tool-colv { width: 90%; display: flex; flex-direction: column; background: #ffdf80; padding: 20px; margin-left: 5%; } #ig-tool-opis { display: flex; flex-direction: column; background: #fff; } .ig-tool-col1 { width: 100%; display: flex; flex-direction: row; margin-left: 8px; align-items: center; } .ig-tool-col12 { width: 69%; display: flex; flex-direction: column; margin-left: 8px; } .ig-tool-colv i { align-items: center; text-align: center; } .ig-tool-pic { width: 100%; height: 100%; } .ig-tool-pic-1 { width: 100%; height: 100%; max-width: 82%; } .ig-tool-pic-inter { width: 100%; height: 100%; max-width: 8%; margin-left: 8px; } .ig-tool-h4 { font-size: 25px; text-align: left; margin-left: 12px; } .ig-tool-h41 { font-size: 25px; font-weight: 500; margin-left: 12px; } .ig-tool-p { font-size: 18px; text-align: left; margin-left: 12px; margin-right: 5px; } .ig-tool-p1 { font-size: 18px; margin-top: 2px; margin-left: 12px; margin-right: 5px; } .icon-warning { font-size: 55px; color: red; } .tool-bg-btn { text-align: center; font-size: 48px; color: red; font-weight: 400; } .tool-bg-btn:hover { cursor: pointer; font-weight: 500; color: #f11; -webkit-transition: opacity .5s ease; transition: opacity .5s ease; } .slider-tool { position: relative; overflow: hidden; height: 100vh; width: 100vw; } .slide-tool { position: absolute; top: 0; width: 100%; height: 100%; opacity: 1; transition: opacity .9s ease-in-out; } .slide-tool img { width: 100%; height: 100%; } .slide-tool .content { position: absolute; top: 0px; left: 31%; width: 600px; opacity: 1; background-color: rgb(11 55 180 / 0%); color: #333; padding: 35px; } .slide-tool .content:hover { cursor: pointer; } /* Animations */ .ig-pulsate { -webkit-animation: puslate 3s ease-in-out; -webkit-animation-iteration-count: infinite; opacity: .3; } @-webkit-keyframes puslate { 0% { opacity:.3; } 50% { opacity:1; } 100% { opacity:.3; } } /* Responsive */ @media all and (max-width: 1020px) { .ig-container { padding-left: 10px; padding-right: 10px; max-width: 1500px; } } @media all and (max-width: 1420px) { .ig-soft-pic { max-width: 250px; } } @media all and (max-width: 1120px) { header nav { position: absolute; } header nav.ig-nav-fixed { background:none; } header nav .ig-nav-toggle { display: block; font-size: 75px; color: #222; } ul.ig-navigation { list-style-type: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; background: rgba(0,0,0,.7); -webkit-transition: max-height .4s ease; transition: max-height .4s ease; } ul.ig-navigation.ig-navigation-opened { max-height: 800px; -webkit-transition: max-height 1.1s ease; transition: max-height 1.1s ease; } ul.ig-navigation li { padding: 0 15px; } ul.ig-navigation li a { display: block; padding: 10px 0; color: #fff; border-bottom: solid 1px #999; } ul.ig-navigation li:last-child a { border-bottom: none; padding-bottom: 20px; } ul.ig-navigation li:first-child a { padding-top: 20px; } .slide .content { left: -770px; width: 100%; } .slide.current{ width: 100%; } footer .ig-container { height: 510px; } } @media all and (max-width: 680px) { .slide:nth-child(3) { background: url('../IMG/ig-banner3_1.jpg') no-repeat center top/cover; } .slide-tool .content { left: 0; width: 97%; } .ig-pro-row { flex-direction: column; } .ig-col-1 { width: 100%; } .ig-col-11 { width: 100%; } .ig-col-12 { width: 100%; } .ig-col-13 { width: 100%; } .ig-container { flex-direction: row; } #ig-about .ig-column { width: 100%; align-items: center; justify-content: center; } .ig-projects-row{ flex-direction: column; } .ig-projects-pic{ max-width: 350px; } .ig-right-container { flex-direction: column; width: 100%; } .ig-content .ig-arrow { padding: 10px; } .ig-content .ig-arrow.ig-arrow-right { left: 95%; } .ig-content .ig-arrow.ig-arrow-left { right: 95%; } .slider { width: 100%; } .slide .content { left: -770px; width: 100%; } .ig-sw-row-prod { flex-direction: column; width: 100%; } .ig-swcol-1 { width: 100%; } .ig-backdrop { flex-direction: column; } .ig-backdrop-content { margin-top: 15px; width: 80%; } .ig-backdropsw-content { margin-top: 15px; width: 80%; } header nav .ig-nav-toggle { display: block; font-size: 75px; } .slide.current{ width: 100%; } header .ig-content { top: 0; } } /* Dropdown Menu header nav ul.ig-navigation li a.ig-prod-dropdown { position: relative; display: inline-block; } header nav ul.ig-navigation li a.ig-prod-dropdown .ig-prod-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } header nav ul.ig-navigation li a.ig-prod-dropdown .ig-prod-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } header nav ul.ig-navigation li a.ig-prod-dropdown .ig-prod-content a:hover { background-color: #ddd; } header nav ul.ig-navigation li a.ig-prod-dropdown .ig-prod-content a:hover:after { display: block; } */