.sis-container { width: 100%; margin: 0px auto; position: relative; } .sis-row { display: flex; flex-wrap: wrap; flex-direction: row; margin: auto -10px; } .sis-col-1 { width: 8.33%; } .sis-col-2 { width: 16.66%; } .sis-col-3 { width: 25%; } .sis-col-4 { width: 33.33%; } .sis-col-5 { width: 41.66%; } .sis-col-6 { width: 50%; } .sis-col-7 { width: 58.33%; } .sis-col-8 { width: 66.66%; } .sis-col-9 { width: 75%; } .sis-col-10 { width: 83.33%; } .sis-col-11 { width: 91.66%; } .sis-col-12 { width: 100%; } .sis-col-1, .sis-col-2, .sis-col-3, .sis-col-4, .sis-col-5, .sis-col-6, .sis-col-7, .sis-col-8, .sis-col-9, .sis-col-10, .sis-col-11, .sis-col-12 { padding: 10px; } .s-grid-in { height: 100%; align-content: flex-start; display: grid; background: #fff; -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25); -ms-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25); -o-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25); overflow: hidden; position: relative; } .s-grid-in:hover { } .s-grid-in button { padding: 5px; background: #e99822; border: none; color: #fff; border-radius: 3px; transition-duration: 0.3s; } .s-grid-in button:hover { background: #212121; color: #fff; } .pgrid .s-grid-in { } .pgrid .img-box { width: 100%; height: 250px; overflow: hidden; } .pgrid .img { width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; transition-duration: 0.05s; } .pgrid .s-grid-in:hover .img { transform: scale(1.1) } .pgrid .cont-box { padding: 0 10px; word-break: break-word;} .pgrid h2 { margin: 20px 0; padding: 0; text-align: center } .pgrid p { margin-bottom: 60px; padding: 0; text-align: center } .pgrid button { position: absolute; bottom: 10px; padding: 5px; width: 100px; left: 50%; margin-left: -50px; } .lrgrid .s-grid-in:hover:after { height: 100%; } .lrgrid .img { position: absolute; width: 50%; height: 100%; top: 0; right: 0; background-size: cover; background-position: center; z-index: 1; } .lrgrid:nth-child(even) .img { left: 0; } .lrgrid:nth-child(even) .cont-box { margin-left: 50%; } .lrgrid .img:before { content: ''; position: absolute; bottom: 10px; right: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border: dotted 1px #fff; opacity: .25; z-index: 2; transition-duration: .5s; } .s-grid-in:hover .img:before { width: 0; opacity: 0; } .lrgrid .cont-box { position: relative; top: 0; left: 0; min-height: 350px; padding: 0px 0; height: 100%; width: 50%; z-index: 1; transition-duration: 1s } .lrgrid .s-grid-in:hover .cont-box { left: 0%; } .lrgrid h2 { position: relative; left: 0%; padding: 20px; margin: 0; color: #212121; text-align: left; transition-duration: 2s; } .lrgrid p { padding: 0 20px 70px 20px; margin: 0; text-align: left; color: #212121; } .lrgrid button { position: absolute; right: 20px; bottom: 20px; width: 100px; transition-duration: .8s; padding: 5px; border: solid 2px #fff; background: #e99822; color: #fff !important; } .lrgrid .s-grid-in:hover button { right: 20px; bottom: 20px; background: #212121; color: #fff; } .nwsgrid .s-grid-in:hover:after { height: 100%; } .nwsgrid .img { position: absolute; width: 33.33%; height: 100%; top: 0; left: 0; background-size: cover; background-position: center; z-index: 1; } .nwsgrid .img:before { content: ''; position: absolute; bottom: 10px; right: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border: dotted 1px #fff; opacity: .25; z-index: 2; transition-duration: .5s; } .s-grid-in:hover .img:before { width: 0; opacity: 0; } .nwsgrid .cont-box { position: relative; top: 0; right: 0; min-height: 300px; padding: 20px; height: 100%; width: 66.77%; z-index: 1; margin-left: 33.33%; transition-duration: 1s } .nwsgrid h2 { position: relative; left: 0%; margin: 0; margin-bottom: 10px; color: #212121; text-align: left; transition-duration: 2s; } .nwsgrid .nwsmeta { margin: 0; margin-bottom: 10px; } .nwsgrid p { margin: 0; margin-bottom: 50px; text-align: left; color: #212121; } .nwsgrid button { position: absolute; right: 20px; bottom: 20px; width: 100px; transition-duration: .8s; padding: 5px; border: solid 2px #fff; background: #e99822; color: #fff !important; } .nwsgrid .s-grid-in:hover button { right: 20px; bottom: 20px; background: #212121; color: #fff; } .sdate, .suser, .stags { margin: 0 !important; margin-right: 10px !important; padding: 0; display: inline-block; font-size: 12px; color: #a1a1a1 !important; } .abtgrid .s-grid-in { box-shadow: none; background: rgba(0, 0, 0, 0) } .abtgrid .s-grid-in:hover:after { height: 100%; } .abtgrid .img { position: absolute; width: 40%; height: 100%; top: 0; left: 0; margin-left: 5%; background-size: cover; background-position: center; z-index: 1; } .abtgrid .img:before { content: ''; position: absolute; bottom: 10px; right: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border: dotted 1px #fff; opacity: .25; z-index: 2; transition-duration: .5s; } .s-grid-in:hover .img:before { width: 0; opacity: 0; } .abtgrid { padding: 50px 0; position: relative; } .abtgrid:before { content: ''; position: absolute; top: 10px; left: 0; height: calc(100% - 20px); width: 40%; background: #e99822; } .abtgrid .cont-box { position: relative; top: 0; right: 0; min-height: 300px; padding: 20px; height: 100%; width: 50%; z-index: 1; margin-left: 50%; transition-duration: 1s } .abtgrid h2 { position: relative; left: 0%; margin: 0; margin-bottom: 10px; color: #212121; text-align: left; transition-duration: 2s; } .abtgrid .nwsmeta { margin: 0; margin-bottom: 10px; } .abtgrid p { margin: 0; margin-bottom: 50px; text-align: left; color: #212121; } .abtgrid button { position: absolute; left: 20px; bottom: 20px; width: 100px; transition-duration: .8s; padding: 5px; border: solid 2px #fff; background: #e99822; color: #fff !important; } .abtgrid .s-grid-in:hover button { right: 20px; bottom: 20px; background: #212121; color: #fff; } .portgrid .img-box { position: relative; overflow: hidden; max-height: 360px; background: #0a1315; text-align: center; cursor: pointer; width: 100%; height: 400px; } .portgrid .img { position: relative; display: block; min-height: 100%; max-width: 100%; opacity: 0.8; height: 100%; width: 100%; background-size: cover; background-position: center } .portgrid .cont-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; text-align: center; cursor: pointer; } .portgrid .cont-box:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, 0.8) 75%); background: linear-gradient(to bottom, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, 0.8) 75%); content: ''; opacity: 0; -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .portgrid h2 { position: absolute; top: 50%; left: 0; width: 100%; color: #fff; -webkit-transition: -webkit-transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); margin: 0; text-transform: none; } .portgrid .s-grid-in:hover h2 { color: #fff; -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0); transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0); } .portgrid p { position: absolute; bottom: 0; left: 0; padding: 2em; margin: 0; width: 100%; opacity: 0; letter-spacing: 1px; font-size: 68.5%; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); text-transform: none; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .portgrid .s-grid-in:hover .cont-box:before, .portgrid .s-grid-in:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .portgrid button { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .galleri .fa { font-size: 35px; } .s-pagination { padding: 10px; text-align: center; display: flex; flex-wrap: wrap; margin: auto; } .page-numbers { padding: 10px 15px; margin: 0 2px; background: #e99822; color: #fff; border-radius: 3px; } .s-pagination .current { background: #212121; } .page-numbers:hover { background: #212121; text-decoration: none; } .sis-social-prnt { display: inline-block; } .sis-social { font-size: 18px !important; width: 35px; text-align: center; text-decoration: none; margin: 5px 2px; height: 35px; align-content: center; border-radius: 50px; display: grid !important; } .sis-social:hover { opacity: 0.7; } .sis-social-prnt .fa-facebook { background: #3B5998; color: white; } .sis-social-prnt .fa-twitter { background: #55ACEE; color: white; } .sis-social-prnt .fa-google-plus { background: #dd4b39; color: white; } .sis-social-prnt .fa-linkedin { background: #007bb5; color: white; } .sis-social-prnt .fa-youtube { background: #bb0000; color: white; } .sis-social-prnt .fa-instagram { background: #125688; color: white; } .sis-social-prnt .fa-pinterest { background: #cb2027; color: white; } .sis-social-prnt .fa-snapchat-ghost { background: #fffc00; color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } .sis-social-prnt .fa-skype { background: #00aff0; color: white; } .sis-social-prnt .fa-android { background: #a4c639; color: white; } .sis-social-prnt .fa-dribbble { background: #ea4c89; color: white; } .sis-social-prnt .fa-vimeo { background: #45bbff; color: white; } .sis-social-prnt .fa-tumblr { background: #2c4762; color: white; } .sis-social-prnt .fa-vine { background: #00b489; color: white; } .sis-social-prnt .fa-foursquare { background: #45bbff; color: white; } .sis-social-prnt .fa-stumbleupon { background: #eb4924; color: white; } .sis-social-prnt .fa-flickr { background: #f40083; color: white; } .sis-social-prnt .fa-yahoo { background: #430297; color: white; } .sis-social-prnt .fa-soundcloud { background: #ff5500; color: white; } .sis-social-prnt .fa-reddit { background: #ff5700; color: white; } .sis-social-prnt .fa-rss { background: #ff6600; color: white; } .sis-cd { display: inline-block; width: 100%; } .sis-cd .sis-icon { display: flex; align-items: center; padding: 10px; color: gray; border: solid 1px #6c6565; font-weight: 600; transition-duration: .5s; margin-bottom: 10px; } .sis-cd:hover .sis-icon { color: #fff; background: gray; border: solid 1px #6c6565; transition-duration: .5s; letter-spacing: 2px; } .sis-cd .sis-icon-btn { background-color: transparent; width: 50px; text-align: center; border-radius: 0px; margin-right: 10px; /*border: solid 1px #ffa602;*/ height: 50px; display: grid; align-content: center; font-weight: 600; transition-duration: .5s; font-size: 30px; } .sis-cd:hover .sis-icon-btn { -webkit-transform: scale(1.5); transform: scale(1.5); color: #fff; } .sis-contact { display: flex; flex-wrap: wrap; } .section-1 { width: 100%; display: grid; align-content: center; padding: 0 !important; background: transparent; display: flex; flex-wrap: wrap; padding-right: 25px; } .sis-contact .cdt { text-decoration: none; width: 25%; padding: 10px; color: #a0a0a0 !important; text-align: center; font-size: 16px; } .sis-contact a img { display: flex; margin: auto; margin-bottom: 10px; background: #afafaf; padding: 5px; border-radius: 3px; height: 35px; width: 35px; } .sis-contact a span { display: contents; font-size: 13px; font-weight: 800; color: #afafaf; font-style: oblique; } .sis-contact .logo { border-bottom: dashed 1px #fff; padding-bottom: 15px; margin-bottom: 15px; } .sis-contact center { padding: 15px 0; display: flex; margin: auto; } .sis-contact .address { } .sis-contact .mail { } .sis-contact .phone { } .sis-contact .org { } @media (max-width:600px) { .lrgrid .img { width: 100%; position: relative; height: 300px; margin: 0; } .lrgrid:before { position: absolute; top: 10px; height: 300px; width: 100%; } .lrgrid .cont-box { width: 100%; position: relative; margin: 0 !important; } } @media (max-width:768px) { .abtgrid .img { width: 90%; left: 5%; position: relative; height: 300px; margin: 0; } .abtgrid::before { position: absolute; top: 10px; height: 300px; width: 100%; } .abtgrid .cont-box { width: 100%; position: relative; height: 100%; margin: 0; } .nwsgrid .img { width: 100%; position: relative; height: 300px; margin: 0; } .nwsgrid:before { position: absolute; top: 10px; height: 300px; width: 100%; } .nwsgrid .cont-box { width: 100%; position: relative; height: 100%; margin: 0; } .sis-contact .cdt { width: 100%; } .sis-col-1, .sis-col-2, .sis-col-3, .sis-col-4, .sis-col-5, .sis-col-6, .sis-col-7, .sis-col-8, .sis-col-9, .sis-col-10, .sis-col-11, .sis-col-12 { width: 100%; } }