/****************************************************************** Eric Meyer's Reset CSS v2.0 - http://cssreset.com ******************************************************************/ 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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;color:#000;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} html{font-family: Arial, Helvetica, Verdana, sans-serif; font-size:14px; } nav.pagination{display:none;} /*Submenue*/ #submenu{background:url(../images/submenue.png) center bottom no-repeat;text-align:center;position:absolute;width:260px;height:100px;top:265px;margin-left: 70px;} #submenu a{position:absolute;bottom:23px;display:inline-block;font-weight:bold;width:100%;left:0;text-align:center;} #submenu span{background:url(../images/close.svg);width:20px;height:20px;display:inline-block;margin-left:7px;} #submenu a:hover span{opacity:0.5;} .sub-menue #submenu {position: fixed;top: 25px;z-index: 9;} /*Impressum*/ #impressum{font-size:0; z-index:99999;display:block;line-height:0;width:55px; height:50px; background:url(../images/impressum.png) 0 0 no-repeat; right:0; top:0; position:absolute;} #impressum_content{ z-index:999; font-size:10px; line-height:14px;} #impressum_content .imp_bg{display:none; overflow:hidden;background:url(../images/bg_impressum.png) top right repeat-x;margin-top: -18px;} #impressum_content.inprint_open .imp_bg {display:block;} div#impressum_content, div#impressum_content p{line-height:13px;} #impressum_content h3{font-size:11px; font-weight:bold; margin-bottom:0;} #impressum_content{position:fixed; bottom:0; width:100%;padding: 50px 0 0 0;} #impressum_content .widget{ width: 48%;margin: 0 1%;float:left; padding-top:40px;} #impressum_content h2:first-letter {font-family: 'Gutenberg'!important;font-size: 30px;} #impressum_content .textwidget{margin-bottom:20px;max-height: 200px;overflow-y: scroll;} /****************************************************************** Header & Navigation ******************************************************************/ .ausgabe{font-weight:bold;text-align:right;padding-top:30px;position:absolute;top:0;right:0;} .header { overflow:hidden; background:url(../images/bg_header.png) bottom center repeat-x;position: absolute;width: 100%;z-index: 999; top: 0;} .sub-menue #inner-header{position:relative; width:960px;} #inner-header{position:relative; width:915px;} #content{margin-top:327px;} .tag #content{margin-top:360px;} #logo a{display:block;} #logo{padding:33px 0 62px 0} #logo img { width: 102%; height: auto; margin-left: -2%; } #menu-main{position:absolute;right:0;bottom:68px;display:block;text-align:right;font-weight:bold;font-size:23px;} .sub-menue #menu-main {margin-right:23px;} #menu-main li{margin-left:47px;} #menu-main li a:hover{opacity:0.5;} .small-head{position:fixed;top:0;right:0;left:0;z-index:9999999;} .small-head #menu-main{bottom:50px;font-size:22px;} .small-head #logo img{width:20%;height:auto; margin:0;} .small-head .ausgabe{display:none;} .small-head #logo{padding:10px 0 30px 0;} #menue-trigger{display:none;} .current-menu-item {opacity:0.5;} .small-head header{ -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /****************************************************************** Fonts ******************************************************************/ @font-face { font-family: 'Gutenberg'; src:url('../fonts/Gutenberg.ttf.woff') format('woff'), url('../fonts/Gutenberg.ttf.svg#Gutenberg') format('svg'), url('../fonts/Gutenberg.ttf.eot'), url('../fonts/Gutenberg.ttf.eot?#iefix') format('embedded-opentype'); font-weight: normal; font-style: normal; } div, p{line-height:18px; color:#000;} strong, b{font-weight:bold;} em{font-style:italic;} a{text-decoration:none;} h1, h2, h3, h5, h6{font-size:15px; margin:10px 0 10px 0;} h4{font-size:10px; font-weight:bold;} h2 span{font-weight:bold;} /****************************************************************** Images ******************************************************************/ .alignnone {width:100%!important; height:auto!important;} .wp-caption-text {font-size:10px; font-weight:bold; text-align:right;} /*Galerien*/ .gallery {margin-top:10px;} .gallery-columns-5 img{width:19%; height:auto; margin-right:1%; float:left;} /****************************************************************** Article Styles ******************************************************************/ .bildrand .entry-content img{border:1px solid black;} /*Single*/ #single-main .item {margin:0 auto;} /*Basic*/ .alignnone, .alignnone img {width:100%;height:auto;} .alignleft, img.alignleft { float:left; margin:4px 15px 5px 0;} /*Standart*/ .sammelkarte h2:first-letter, .shredder h2:first-letter{font-family:'Gutenberg'!important;font-size:30px;} .sammelkarte h2, .shredder h2 {margin:5px 0 10px 0;} .sammelkarte .entry-content img{width: 100%;height: auto;} .normal h2{font-weight:bold;} /*DISS*/ .diss img.attachment-full{width:100%; height:100%;} /*Interview*/ .interview h2{font-size:25px; line-height:28px;font-weight:bold; margin:10px 0 10px 0;} .interview h3{margin:10px 0 0 0} .interview img{margin-top:20px;} .frage{font-weight:bold;margin:15px 0 0 0;} .frage::first-letter{font-family:'Gutenberg'!important; font-size:20px;} .antwort{font-weight:normal;} /*Stylekarre*/ .stylekarre h2 {font-size:20px; text-align:center;} /****************************************************************** Article Footer ******************************************************************/ .article-footer {font-size:10px; font-weight:bold;padding: 15px 0 5px 0;} .article-footer p {float:left;} .article-footer a:hover {opacity :0.5;} .article-footer .footer-category a, .article-footer .footer-tags a{text-decoration:underline;} .footer-nav {margin:0;float:left;} .footer-nav p {margin:0;} .grid_2 .article-footer p {margin:0;} .grid_2 .article-footer {margin-top: 15px;padding-bottom: 15px;} .grid_2 .sharedaddy{display:none;} .grid_2 .footer-tags span{display:none;} /*Share*/ .sharedaddy{text-align:right;float:right;} .share-more span{font-weight:bold;display:inline-block;text-decoration:underline;} .sd-content a.share-more{text-decoration:underline;} /*.share-more span::first-letter{font-family:'Gutenberg'!important;font-size:14px;}*/ .sd-content:hover .sharing-hidden .inner{display:block!important;} /*.sharedaddy:hover{opacity:0.5;}*/ .sd-content:hover .sharing-hidden .inner { display: block!important; position: absolute; background: black; bottom: 50px; right: -18px; box-shadow: 0 0 6px black; padding: 20px 30px; color: white; text-align: center; } .sd-content:hover .sharing-hidden .inner a span{ color:white; } .sd-content:hover .sharing-hidden .inner a:hover{ opacity:0.8; } .sd-content:hover .sharing-hidden .inner:after { position: absolute; left: 50%; margin-left: -10px; content: ""; bottom: -10px; border-top: 10px solid #111; border-left: 10px solid transparent; border-right: 10px solid transparent; } /****************************************************************** Background ******************************************************************/ #start_post, .infinite-wrap{width:100%; float:left; clear:both;} .container_12 {max-width:981px; margin:0 auto;} .item{margin:0; overflow:visible;} body{ background:url(../images/bg_main.jpg) top center;} /*White*/ .grid_2{width:160px;} .grid_2 .bg-content{ width:120px; padding: 20px 20px 0 20px; background:url(../images/bg_2_sp_v01.png) top center no-repeat;} .grid_2 .bg-footer{width:120px;height:20px; padding: 0 20px 0 20px; background:url(../images/bg_2_sp_v01_b.png) top center no-repeat;} .grid_2 .article-footer{width:100%;background:url(../images/bg_2_sp_cover.png) bottom center no-repeat;overflow:hidden;} .grid_4{width:320px;} .grid_4 .bg-content{ width:280px; padding: 20px 20px 0 20px; background:url(../images/bg_4_sp_v01.png) top center no-repeat;} .grid_4 .bg-footer{width:280px; padding: 20px 20px 0 20px; background:url(../images/bg_4_sp_v01_b.png) top center no-repeat;} .grid_4 .article-footer{width:100%;background:url(../images/bg_4_sp_cover.png) bottom center no-repeat;overflow:hidden;} .grid_6{width:480px;} .grid_6 .bg-content{ width:440px; padding: 20px 20px 0 20px; background:url(../images/bg_6_sp_v01.png) top center no-repeat;} .grid_6 .bg-footer{width:440px; padding: 20px 20px 0 20px; background:url(../images/bg_6_sp_v01_b.png) top center no-repeat;} .grid_6 .article-footer{width:100%;background:url(../images/bg_6_sp_cover.png) bottom center no-repeat;overflow:hidden;} .grid_8{width:640px;} .grid_8 .bg-content{ width:600px; padding: 20px 20px 0 20px; background:url(../images/bg_8_sp_v01.png) top center no-repeat;} .grid_8 .bg-footer{width:600px; padding: 20px 20px 0 20px; background:url(../images/bg_8_sp_v01_b.png) top center no-repeat;} .grid_8 .article-footer{width:100%;background:url(../images/bg_8_sp_cover.png) bottom center no-repeat;overflow:hidden;} .grid_10{width:800px;} .grid_10 .bg-content{ width:760px; padding: 20px 20px 0 20px; background:url(../images/bg_10_sp_v01.png) top center no-repeat;} .grid_10 .bg-footer{width:760px; padding: 20px 20px 0 20px; background:url(../images/bg_10_sp_v01_b.png) top center no-repeat;} .grid_10 .article-footer{width:100%;background:url(../images/bg_10_sp_cover.png) bottom center no-repeat;overflow:hidden;} .grid_12{width:960px;} .grid_12 .bg-content{ width:920px; padding: 20px 20px 0 20px; background:url(../images/bg_12_sp_v01.png) top center no-repeat;} .grid_12 .bg-footer{width:920px; padding: 20px 20px 0 20px; background:url(../images/bg_12_sp_v01_b.png) top center no-repeat;} .grid_12 .article-footer{width:100%;background:url(../images/bg_12_sp_cover.png) bottom center no-repeat;overflow:hidden;} /*Black*/ .black a,.black p,.black div,.black strong,.black em,.black span,.black time,.black h1,.black h2,.black h3,.black h4,.black h5,.black h6{color:#fff;} .bg-2.grid_2.black .bg-content, .grid_2.black .bg-content{background:url(../images/bg_2_sp_black_v01.png) top center no-repeat;} .bg-2.grid_2.black .bg-footer, .grid_2.black .bg-footer{background:url(../images/bg_2_sp_black_v01_b.png) top center no-repeat;} .grid_2.black .article-footer{background:url(../images/bg_2_sp_black_v01_cover.png) bottom center no-repeat;} .bg-2.grid_4.black .bg-content, .grid_4.black .bg-content{background:url(../images/bg_4_sp_black_v01.png) top center no-repeat;} .bg-2.grid_4.black .bg-footer, .grid_4.black .bg-footer{background:url(../images/bg_4_sp_black_v01_b.png) top center no-repeat;} .grid_4.black .article-footer{background:url(../images/bg_4_sp_black_v01_cover.png) bottom center no-repeat;} .bg-2.grid_6.black .bg-content, .grid_6.black .bg-content{background:url(../images/bg_6_sp_black_v01.png) top center no-repeat;} .bg-2.grid_6.black .bg-footer, .grid_6.black .bg-footer{background:url(../images/bg_6_sp_black_v01_b.png) top center no-repeat;} .grid_6.black .article-footer{background:url(../images/bg_6_sp_black_v01_cover.png) bottom center no-repeat;} .bg-2.grid_8.black .bg-content, .grid_8.black .bg-content{background:url(../images/bg_8_sp_black_v01.png) top center no-repeat;} .bg-2.grid_8.black .bg-footer, .grid_8.black .bg-footer{background:url(../images/bg_8_sp_black_v01_b.png) top center no-repeat;} .grid_8.black .article-footer{background:url(../images/bg_8_sp_black_v01_cover.png) bottom center no-repeat;} .bg-2.grid_10.black .bg-content, .grid_10.black .bg-content{background:url(../images/bg_10_sp_black_v01.png) top center no-repeat;} .bg-2.grid_10.black .bg-footer, .grid_10.black .bg-footer{background:url(../images/bg_10_sp_black_v01_b.png) top center no-repeat;} .grid_10.black .article-footer{background:url(../images/bg_10_sp_black_v01_cover.png) bottom center no-repeat;} .bg-2.grid_12.black .bg-content, .grid_12.black .bg-content{background:url(../images/bg_12_sp_black_v01.png) top center no-repeat;} .bg-2.grid_12.black .bg-footer, .grid_12.black .bg-footer{background:url(../images/bg_12_sp_black_v01_b.png) top center no-repeat;} .grid_12.black .article-footer{background:url(../images/bg_12_sp_black_v01_cover.png) bottom center no-repeat;} /*Footer*/ /* Hides navigation links and site footer when infinite scroll is active */ .infinite-scroll #navigation, .infinite-scroll.neverending #footer { display: none; } /* Shows the footer again in case all posts have been loaded */ .infinity-end.neverending #footer { display: block; } /*Varianten*/ .bg-2.grid_2 .bg-content{background-image:url(../images/bg_2_sp_v02.png);} .bg-2.grid_2 .bg-footer{background-image:url(../images/bg_2_sp_v02_b.png);} .bg-2.grid_4 .bg-content{background-image:url(../images/bg_4_sp_v02.png);} .bg-2.grid_4 .bg-footer{background-image:url(../images/bg_4_sp_v02_b.png);} .bg-2.grid_6 .bg-content{background-image:url(../images/bg_6_sp_v02.png);} .bg-2.grid_6 .bg-footer{background-image:url(../images/bg_6_sp_v02_b.png);} .bg-2.grid_8 .bg-content{background-image:url(../images/bg_8_sp_v02.png);} .bg-2.grid_8 .bg-footer{background-image:url(../images/bg_8_sp_v02_b.png);} .bg-2.grid_10 .bg-content{ background-image:url(../images/bg_10_sp_v02.png);} .bg-2.grid_10 .bg-footer{background-image:url(../images/bg_10_sp_v02_b.png);} .bg-2.grid_12 .bg-content{background-image:url(../images/bg_12_sp_v02.png);} .bg-2.grid_12 .bg-footer{background-image:url(../images/bg_12_sp_v02_b.png);} /****************************************************************** Multimedia ******************************************************************/ /*Responsiv video*/ .responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%!important; height: 100%!important; } .responsive-video { position: relative; padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/ padding-top: 0px; height: 0; overflow: hidden; } /*Gey Filter*/ iframe, img { filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ } /****************************************************************** Isotope Filtering ******************************************************************/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /**** Isotope CSS3 transitions ****/ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } #menu-main li{float:left;} /****************************************************************** Mobil 960 ******************************************************************/ @media only screen and (max-width: 960px) { #content {margin-top: 300px;} #menu-main li{margin-left:30px;} #submenu{top: 230px;} .sub-menue #submenu {top: 20px;} #inner-header, container_12 {max-width:800px; margin:0 auto;} .grid_12, .grid_10{width:800px;} .grid_12 .bg-content, .grid_10 .bg-content{ width:760px; padding: 20px 20px 0 20px; background:url(../images/bg_10_sp_v01.png) top center no-repeat;} .grid_12 .bg-footer, .grid_10 .bg-footer{width:760px; padding: 20px 20px 0 20px; background:url(../images/bg_10_sp_v01_b.png) top center no-repeat;} .grid_12 .article-footer, .grid_10 .article-footer{width:100%;background:url(../images/bg_10_sp_cover.png) bottom center no-repeat;overflow:hidden;} } /****************************************************************** Mobil 800 ******************************************************************/ @media only screen and (max-width: 800px) { #content {margin-top: 250px;} #inner-header, container_12 {max-width:640px; margin:0 auto;} #submenu{top: 190px;} .sub-menue #submenu {top: 15px;} #menu-main li{margin-left:25.5px;} #menu-main{font-size:18px;} .small-head #menu-main { bottom: 41px; font-size: 15px; } .grid_12,.grid_10, .grid_8{width:640px;} .grid_12 .bg-content, .grid_10 .bg-content, .grid_8 .bg-content{ width:600px; padding: 20px 20px 0 20px; background:url(../images/bg_8_sp_v01.png) top center no-repeat;} .grid_12 .bg-footer,.grid_10 .bg-footer, .grid_8 .bg-footer{width:600px; padding: 20px 20px 0 20px; background:url(../images/bg_8_sp_v01_b.png) top center no-repeat;} .grid_12 .article-footer, .grid_10 .article-footer, .grid_8 .article-footer{width:100%;background:url(../images/bg_8_sp_cover.png) bottom center no-repeat;overflow:hidden;} } /****************************************************************** Mobil 640 ******************************************************************/ @media only screen and (max-width: 640px) { #submenu{top: 125px;} .sub-menue #submenu {top: 5px;} #content {margin-top: 190px;} #inner-header, container_12 {max-width:480px; margin:0 auto;} #menu-main li{margin-left:21.5px;} #menu-main{font-size:13px;bottom:50px;} .small-head #menu-main{bottom:38px;font-size:12px;} .ausgabe{padding-top:20px;} #logo {padding: 21px 0 46px 0;} .grid_12,.grid_10,.grid_8, .grid_6{width:480px;} .grid_12 .bg-content, .grid_10 .bg-content,.grid_8 .bg-content, .grid_6 .bg-content{ width:440px; padding: 20px 20px 0 20px; background:url(../images/bg_6_sp_v01.png) top center no-repeat;} .grid_12 .bg-footer,.grid_10 .bg-footer,.grid_8 .bg-footer, .grid_6 .bg-footer{width:440px; padding: 20px 20px 0 20px; background:url(../images/bg_6_sp_v01_b.png) top center no-repeat;} .grid_12 .article-footer,.grid_10 .article-footer, .grid_8 .article-footer, .grid_6 .article-footer{width:100%;background:url(../images/bg_6_sp_cover.png) bottom center no-repeat;overflow:hidden;} } /****************************************************************** Mobil 480 ******************************************************************/ @media only screen and (max-width: 480px) { #content {margin-top: 80px;} #submenu { top: 20px; margin: 0 auto; width: 320px} .sub-menue #submenu {top: 20px;} /*Grid killen*/ #inner-header, .container_12 {max-width:320px; margin:0 auto;} #inner-header{max-width:300px} .grid_6, .grid_8, .grid_10, .grid_12, .grid_4{width:320px;} .grid_6 .bg-content, .grid_8 .bg-content,.grid_10 .bg-content,.grid_12 .bg-content, .grid_4 .bg-content{ width:280px; padding: 20px 20px 0 20px; background:url(../images/bg_4_sp_v01.png) top center no-repeat;} .grid_6 .bg-footer,.grid_8 .bg-footer,.grid_10 .bg-footer,.grid_12 .bg-footer, .grid_4 .bg-footer{width:280px; padding: 20px 20px 0 20px; background:url(../images/bg_4_sp_v01_b.png) top center no-repeat;} .grid_6 .article-footer,.grid_8 .article-footer,.grid_10 .article-footer,.grid_12 .article-footer, .grid_4 .article-footer{width:100%;background:url(../images/bg_4_sp_cover.png) bottom center no-repeat;overflow:hidden;} /*Mobil menü*/ .ausgabe, #menu-main {display:none;font-size: 20px;} .sub-menue #menu-main {font-size: 20px;} .small-head #logo img{width:100%;} .small-head #logo, #logo{padding:8px 0 20px 0;width:70%;float:left;} .header{background-position-x:233px;} #menue-trigger{cursor:pointer;background:url(../images/menu.svg) top center no-repeat;width:30px;height:30px;display:block;float:right;font-size:0;line-height:0;/* background-position-y:-30px;*/margin-top:18px;} .menue_open #menue-trigger{ background-position-y:-30px;} .menue_open #menu-main {float:left;bottom:auto;right:auto;top:auto;display:block;position:relative;margin-bottom:41px;} .menue_open #menu-main li{float:none;text-align:left;margin:20px 0 20px 0;} /*Images glattziehen*/ .alignleft, img.alignleft{margin:0; width:100%; height:auto;} .bg-2.grid_12 .bg-content, .bg-2.grid_10 .bg-content, .bg-2.grid_8 .bg-content, .bg-2.grid_6 .bg-content, .bg-2.grid_4 .bg-content{background-image:url(../images/bg_4_sp_v02.png);} .bg-2.grid_4 .bg-footer, .bg-2.grid_6 .bg-footer, .bg-2.grid_8 .bg-footer, .bg-2.grid_10 .bg-footer, .bg-2.grid_12 .bg-footer{background-image:url(../images/bg_4_sp_v02_b.png);} .bg-2.grid_6.black .bg-content, .grid_6.black .bg-content{background:url(../images/bg_4_sp_black_v01.png) top center no-repeat;} .bg-2.grid_6.black .bg-footer, .grid_6.black .bg-footer{background:url(../images/bg_4_sp_black_v01_b.png) top center no-repeat;} .grid_6.black .article-footer{background:url(../images/bg_4_sp_black_v01_cover.png) bottom center no-repeat;} } #post_navi{ text-align: center; line-height: 120px; background: yellow; } /*---------------------------------------------*/ /* Preloader */ /*---------------------------------------------*/ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; /* change if the mask should have another color then white */ z-index:999999999999999; /* makes sure it stays on top */ background-image: url('http://work.shreddermag.com/wp-content/uploads/2015/02/Shredder-Mag_HG_Online_100dpi.jpg'); background-repeat: repeat; background-position: top center; background-attachment: scroll } #status { width: 100px; height: 100px; position: absolute; left: 50%; /* centers the loading animation horizontally one the screen */ top:50%; /* centers the loading animation vertically one the screen */ background-image:url(../images/load_white.png); /* path to your loading animation */ background-repeat:no-repeat; background-position: center; margin: -50px 0 0 -50px; /* is width and height divided by two */ } @-webkit-keyframes rotating /* Safari and Chrome */ { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .rotating { -webkit-animation: rotating 1.2s linear infinite; -moz-animation: rotating 1.2s linear infinite; -ms-animation: rotating 1.2s linear infinite; -o-animation: rotating 1.2s linear infinite; animation: rotating 1.2s linear infinite; } /****************************************************************** // Page ******************************************************************/ .page p{margin-bottom:20px;} .page h1{font-size:32px; font-weight:bold; text-align:center; margin:30px 0 30px 0;} .page .standard {margin:0 auto; padding-bottom:50px;} #infinite-handle{ background:red; position:absolute; bottom:0; margin:100px;}