/* Artfully masterminded by ZURB */ /* -------------------------------------------------- Table of Contents ----------------------------------------------------- :: Shared Styles :: Page Name 1 :: Page Name 2 */ /* ----------------------------------------- Shared Styles ----------------------------------------- */ html { background: black; color: white; background-image: url(../images/industrial_hi-res.jpg); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; height: 100%; } body { background: none; color: white; font-size: 16px; } body, div, dl, dt, dd, ul, ol, li, pre, form, p, blockquote, th, td { font-size: 16px; } h1 { color: white; } .tagline { font-size: 33px; margin: 30px 0 0 0; } h1 small { display: none; } header a { display: inline; } header a img { height: 100px; float: left; margin: 0 20px 0 0; } .panel p { color: #6f6f6f; } footer.row { margin: 100px auto; clear: both; display: block; } footer li { list-style-type: none; color: white; } footer h4 { color: white; } footer li a { color: white; } .top_ten li { list-style-type: lower-roman; list-style-position: outside; margin: 0 0 0 30px; } a { color: #fff; display: inline-block; padding: 5px; border-radius: 2px; margin: 0 0 0 -5px; transition: background 1s; -moz-transition: background 1s; /* Firefox 4 */ -webkit-transition: background 1s; /* Safari and Chrome */ -o-transition: background 1s; /* Opera */ } a:hover { background: white; color: red; } .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 { color: black; } h1, h2, h3, h4, h5, h6 { color: white; } li { list-style-type: none; } article { font-size: 20px; } /* ----------------------------------------- animations ----------------------------------------- */ .1fadeIn { /* Styling for Demo ---------------------------------------------------- */ /* border:5px solid #c9c9c9 ; margin:15px; -webkit-box-shadow: 0px 0px 5px #333; -moz-box-shadow: 0px 0px 5px #333; -ms-box-shadow: 0px 0px 5px #333; -o-box-shadow: 0px 0px 5px #333; box-shadow: 0px 0px 5px #333; */ /* CSS needed for animation ---------------------------------------------------- */ opacity:0; -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; -o-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; } /* Animation Times - Time for image to fade in ---------------------------------------------------- */ /* .fadeIn-3s { -webkit-animation-duration:3s; -moz-animation-duration:3s; -o-animation-duration:3s; animation-duration:3s; } .fadeIn-1s { -webkit-animation-duration:1s; -moz-animation-duration:1s; -o-animation-duration:1s; animation-duration:1s; } */ /* Animation Delay - Time for image to be delayed ---------------------------------------------------- */ /* .fadeIn-Delay-3s { -webkit-animation-delay:3s; -moz-animation-delay:3s; -o-animation-delay:3s; animation-delay:3s; } .fadeIn-Delay-2s { -webkit-animation-delay:2s; -moz-animation-delay:2s; -o-animation-delay:2s; animation-delay:2s; } .fadeIn-Delay-1s { -webkit-animation-delay:1s; -moz-animation-delay:1s; -o-animation-delay:1s; animation-delay:1s; } .fadeIn-Delay-0s { -webkit-animation-delay:0s; -moz-animation-delay:0s; -o-animation-delay:0s; animation-delay:0s; } @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } */ .row .mobile-two img { width: 100% !important; } @media only screen and (max-width: 500px) { .row .mobile-two { width: 100% !important; } } @-webkit-keyframes wiggle { 0% { -webkit-transform: rotate3d(0,0,0,0deg) } 25% { -webkit-transform: rotate3d(0,0,0,5deg) } 75% { -webkit-transform: rotate3d(0,0,0,-5deg) } 100% { -webkit-transform: rotate3d(0,0,0,0deg) } } @-moz-keyframes wiggle { 0% { -moz-transform: rotate(0deg) } 25% { -moz-transform: rotate(5deg) } 75% { -moz-transform: rotate(-5deg) } 100% { -moz-transform: rotate(0deg) } } #logo:hover img { -webkit-animation: wiggle .2s ease-in-out alternate; -moz-animation: wiggle .2s ease-in-out alternate; -ms-animation: wiggle .2s ease-in-out alternate } /* #logo:hover img { opacity: .8; -ms-filter: "alpha(opacity=80)"; filter: alpha(opacity=80) } */ img.left { margin: 0 20px 20px 0; } .animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateX(-10deg); } 70% { -o-transform: perspective(400px) rotateX(10deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible !important; -moz-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateIn { 0% { -moz-transform-origin: center center; -moz-transform: rotate(-200deg); opacity: 0; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateIn { 0% { -o-transform-origin: center center; -o-transform: rotate(-200deg); opacity: 0; } 100% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0; } 100% { transform-origin: center center; transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -o-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } /* ----------------------------------------- Soboxypage ----------------------------------------- */ #SoboxyPage a.brand { display: none; } /* ----------------------------------------- blog holder 1 ----------------------------------------- */ .img_wrapper { float: left; border: solid 10px #fff; margin: 0 20px 20px 0; background: #fff; } .img_wrapper img { width: 100%; max-width: 300px; } .blogEntry img { border: solid 10px #fff; } /* ----------------------------------------- Page Name 2 ----------------------------------------- */