/* use margin:auto; to center div */ @-ms-viewport{width: device-width; } /****************************************************************************************************************/ /****************************HTML Element************************************************************************/ /****************************************************************************************************************/ input:disabled {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==) repeat;} input[type=text] {color: #999;font-weight:bold;background-color: #ffffff;border-radius: 5px;transition:all 1s;cursor: pointer;font-size: 16px;direction: rtl;border: 1px dotted #eee;padding: 11px;margin:14px; border-width: thin; border-bottom: solid 4px #1f6eaf;} input[type=text]:focus {color: #999;background-color: #fffec8;} input[type=text]:hover {color: #333;background-color: #feff9e;} input[type=date] {color: #999999;border-radius: 5px;transition:all 1s;cursor: pointer;font-size: 16px;direction: rtl;border: 1px solid #1A87B9;padding: 11px;margin:14px; border-width: thin;font-family: Arial, serif;} input[type=date]:focus {box-shadow: 0 0 10px 1px #cccccc;color: #999;background-color: #fffec8;} input[type=date]:hover {box-shadow: 0 0 20px 1px #999999;color: #333;background-color: #feff9e;} input[type=Password] {color: #999999;border-radius: 5px;transition:all 1s;cursor: pointer;font-size: 16px;direction: ltr;border: 1px solid #1A87B9;padding: 11px;margin:14px; border-width: thin;font-family: Arial, serif;} input[type=Password]:focus {box-shadow: 0 0 20px 1px #cccccc; color: #333; } input[type=Password]:hover {box-shadow: 0 0 10px 1px #999999;background-color: #fffec8;cursor: pointer;color: #ccc;} input[type=number] {color: #999;background-color: #ffffff;border-radius: 5px;transition:all 1s;cursor: pointer;direction: rtl;border: 1px solid #eee;padding: 11px;margin:14px; border-width: thin;font-size: 16px;border-bottom: solid 4px #1f6eaf;} input[type=number]:focus {color: #999;background-color: #fffec8;} input[type=number]:hover {color: #333;background-color: #feff9e;} input[type=range] {color: #999999;cursor: pointer;} input[type=file] {font-size: 20px;background: -webkit-linear-gradient(top,#fffbd0 0%,#fde7a6 100%);cursor:pointer;padding:10px;border-radius: 5px;margin:2px;border-width: thin;border: 1px dotted #f2bb30;transition:all 1s; } input[type=file]:hover {border-width: thin;border: 1px solid #bb8218; } input[type=email] {color: #345089;font-weight:bold;background-color: #ffffff;border-radius: 5px;transition:all 1s;font-size: 16px;border: 1px dotted #eee;padding: 11px; margin: 14px; border-width: thin;border-bottom: solid 4px #1f6eaf;} input[type=email]:invalid {background: hsla(0, 90%, 70%, 1);} input[type=radio] {border: none; } input[type=radio]:default {color: #999;} input[type=checkbox] {border: none; transform:scale(1.5);} input[type=checkbox]:checked {color: #fff;} input[type=url] {color: #999999;border-radius: 5px;cursor: pointer;font-size: 16px;border: 1px solid #1A87B9;padding: 11px ;margin:14px;border-width: thin;} input[type=submit] {box-shadow: 0 0 4px 0px #999;border-radius: 5px; color: #fffce6;border:1px solid #333;cursor: pointer;padding: 10px;transition: all 0.6s;} input[type=submit]:focus {box-shadow: 0 0 20px 1px #999;border-radius: 8px;} input[type=submit]:hover {box-shadow: 0 0 20px 1px #999;border-radius: 10px;} input[type=button] {color: #fffce6;border-radius:5px;cursor: pointer;padding: 10px;transition: all 0.6s;border:1px solid #3B5998;} input[type=button]:hover {border-radius: 10px;} img {border: 0px solid #666;padding: 0px;margin: 0px 0 0 0;} img:focus { box-shadow: 0 0 20px 5px #eee; } img:hover { cursor: pointer; } select {color: #999999;border-radius: 5px;cursor: pointer;transition:all 1s; direction: rtl;border: 1px solid #eee;padding:11px;margin:14px;border-width: thin;border-bottom: solid 4px #1f6eaf;} select:focus {color: #333;background-color: #fffec8;} select:hover {box-shadow: 0 0 10px 1px #b7c8e8;background-color: #fffec8;;cursor: pointer;color: #666;} textarea {color: #999999;border-radius: 5px;cursor: pointer;font-size: 16px;transition:all 1s;margin:4px; direction: rtl;border: 1px solid #1A87B9;padding:5px;border-width: thin;font-family: Arial, serif;} textarea:focus { box-shadow: 0 0 20px 1px #586f1a; color: #333; } textarea:hover {box-shadow: 0 0 20px 1px #999; color: #666;} p::selection { color: #333333; background-color:#f0b66b;} hr {background-image: -webkit-linear-gradient(left, transparent, #DBDBDB, transparent);background-image: linear-gradient(to right, transparent, #DBDBDB, transparent);border: 0;height: 1px;margin: 22px 0;} .hr {margin:40px 0 40px 0; padding: 1px; width: 100%; opacity: 0.5;background-image: linear-gradient(to right, transparent, #333, transparent);} /**************************** General ************************************************************************/ /**************************************************************************************************************/ #delAll { background-color: #912a52;color: #dbecfa;position:fixed;left:0;bottom:0;padding:15px;width:100%; height:180px; opacity: 0.9; text-align:right;padding-right: 20%; transition: all 0.5s; display:none; } #msg { position:fixed; top:230px;opacity: 0.9; width:100%;height:400px; text-align:center;font-size:40px;text-shadow:0px 0px 20px #eee ; font-weight:bold; color:#FFFFFF; padding-top: 60px; background-color:#0399ce; z-index: 1000; } .ADD{ cursor:pointer; border-radius:9px; background-color:#b7c8e8; transition:all 1s; padding: 10px; color:#f8f8f8; font-size: 16px;} .ADD:hover {background-color:#4c6ca6; } .Del{ cursor:pointer; border-radius:9px; background-color:#C66;color:#fff; transition:all 1s; padding: 10px; margin: 5px; text-align: center;} .Del:hover {background-color:#630; } .error {color: #E8124F;text-shadow: 0px 0px 11px red;padding: 30px;} .success {background-color:#dff0d8;border-color:#d6e9c6;color:#3c763d} .tr { font-size: 14px; color: #333333; background-color: #f8f8f8;border:1px #ccc dotted; transition: all 0.5s;padding:2px ; margin: 2px; height: 50px;} .tr:hover { background-color: #dee6f3; opacity: 0.9;} .td { height:100px;font-size: 14px; color: #333333; background-color: #f9f9f9;border: 1px dotted #999;transition: all 0.5s;padding:5px ; margin: 5px;} .td:hover { background-color: #dee6f3;height:110px;opacity: 0.9;color: #f8f8f8;box-shadow: 0 0 10px 2px #ccc;color:#eeeeee;} .tdS {display: flex;flex-direction:row; margin-left: auto; margin-right: auto; text-align: center;width:100%; padding-left:7%; } .tdF {display: flex;flex-direction:row; margin-left: auto; margin-right: auto;flex-wrap:wrap;text-align: center; width:80%; padding-left:7%; } .flx {display: flex; flex-wrap:wrap; } .fullscreen { position:fixed;left:0;top:0;width:100%; height:100%;background-color: #1E427C;padding-top:400px; opacity: 0.8; text-align:center;} .Dailog {position: fixed;background-color: #fff;width: 350px;height: 500px;padding: 10px;border-radius: 9px;opacity: 0.95;box-shadow: 0 0 20px 1px #333; z-index: 9000;} .badge1 { background-color:#FF5DB1; position: relative;top:-30px;right:-12px;border-radius:5px;padding:3px; color:#FFF; font-weight: -100; opacity: 0.9; } .badge2 { background-color:#FF5DB1; position: relative;top:-15px;left:2px; border-radius:5px;padding:3px; color:#FFF; font-size: 10px; font-weight: -100; opacity: 0.9; } .badge3 { background-color:#FF5DB1; position: relative;top:-5px;left:2px; border-radius:5px;padding:3px; color:#FFF; font-weight: -100; opacity: 0.8; z-index: 450; } .itm { box-shadow:0 0 1px 0px #7e95b7; cursor:pointer; background-color:#7e95b7;transition:all 0.6s;width:800px;text-align:right;height:50px;margin:10px;padding:10px;border-radius:5px;color:#eeeeee;cursor:pointer;} .itm:hover { box-shadow:0 0 9px 1px #7e95b7; color:#ffffff;} #pMng { width:1000px;} #list { text-align: center;width:1000px;} #NEXT { margin-left: auto; margin-right: auto;width:1000px;margin-top:10px; padding:9px; color:#1582dc;background-color: #f8f8f8;cursor:pointer;border:1px dotted #1582dc;border-radius: 7px; text-align: center;transition:all 0.8s; font-size: 20px;} #NEXT:hover { background-color:#1582dc;color:#f8f8f8;} .loading {background: transparent url('/files/system/load.gif') center no-repeat;} /****************************************************************************************************************/ /**************************** Text Styles ************************************************************************/ /****************************************************************************************************************/ .c1 { color: #25A6E1; } .c2 { color: #FF5DB1; } .c3 { color: #2f658a; } .c4 { color: #ffffff; } .c5 { color: #eeeeee; } .c6 { color: #7d7d7d; } .c7 { color: #9c2e44; } .c8 { color: #4b4a4a; } .c9 { color: #abcc26; } .c10{ color: #f2bb30; } .c11{ color: #7c96bb; } .c12{ color: #a6bbdb; } .bg1 { background-color: #f2bb30; } .bg1:hover { opacity: 0.9;} .bg2 { background-color: #eeeeee; padding:2px; } .bg2:hover { opacity: 0.9;} .bg3 { background-color: #1f60a9; } .bg3:hover { opacity: 0.9;} .bg4 { background-color: #4b4a4a; padding:2px; } .bg4:hover { opacity: 0.9;} .bg5 { background-color: #0399ce; padding:2px; } .bg5:hover { opacity: 0.9;} .bg6 { background-color: #9c2e44; } .bg6:hover { opacity: 0.9;} .bg7 { background-color: #5CCD00; } .bg7:hover { opacity: 0.9;} .bg8 { background-color: #FF5DB1; padding:2px; } .bg8:hover { opacity: 0.9;} .bg9 { background-color: #e5edb0; padding:2px; } .bg9:hover { opacity: 0.9;} .bg10 { background-color: #d0dc85; padding:2px; } .bg10:hover{ opacity: 0.9;} .bg11 { background-color: #ffe0f1; } .bg11:hover{ opacity: 0.9;} .bg12 { background-color: #fff5e0; } .bg12:hover{ opacity: 0.9;} .bg13 { background-color: #fdffe0; } .bg13:hover{ opacity: 0.9;} .bg14 { background-color: #dbecfa; } .bg14:hover{ opacity: 0.9;} .bg15 { background-color: #7e95b7; } .bg15:hover{ opacity: 0.9;} .bg16 { background-color: #1e2127; padding:2px; } .bg16:hover{ opacity: 0.9;} .bg17 { background-color: #414a5a; } .bg17:hover{ opacity: 0.9;} .S { font-size: 10px; font-weight: 200; } .M { font-size: 14px; font-weight: 200; } .L { font-size: 18px; font-weight: 200; } .XL { font-size: 22px; font-weight: 200; } .XXL { font-size: 30px; font-weight: 200; } .XXXL{ font-size: 45px; font-weight: 200; } .b1 { box-shadow:0 0 1px 0px #60c3d8; transition: all 2s;cursor: pointer;background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#60c3d8),color-stop(100%,#0a4885));padding: 8px 12px;color: #fff;font-family:"Open Sans Hebrew",Arial, serif;font-size: 17px;border-radius: 8px;border: 1px solid #1A87B9; } .b1:hover { box-shadow: 0 2px 20px 5px #60c3d8;border-radius: 15px;} .b1:active { position:relative;top:1px; } .b2 { box-shadow:0 0 1px 0px #FF5DB1; transition: all 1s;cursor: pointer;background: -moz-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FF5DB1),color-stop(100%,#E94A86));background: -webkit-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);background: -o-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);background: -ms-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);background: linear-gradient(top,#FF5DB1 0%,#E94A86 100%);padding: 8px 12px;color: #fff;font-family: "Open Sans Hebrew",Arial, serif;font-size: 17px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 1px solid #c01f5b;} .b2:hover { box-shadow: 0 0 10px 5px #FF5DB1; } .b2:active { position:relative;top:1px; } .b3 { box-shadow:0 0 1px 0px #c8e362 inset; transition: all 0.5s;cursor: pointer;background: -moz-linear-gradient(top,#5CCD00 0%,#4AA400 100%);background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#5CCD00),color-stop(100%,#4AA400));background: -webkit-linear-gradient(top,#5CCD00 0%,#4AA400 100%);background: -o-linear-gradient(top,#5CCD00 0%,#4AA400 100%);background: -ms-linear-gradient(top,#5CCD00 0%,#4AA400 100%);background: linear-gradient(top,#5CCD00 0%,#4AA400 100%);padding: 8px 12px;color: #fff;font-family: "Open Sans Hebrew",Arial, serif;font-size: 17px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 1px solid #459A00;} .b3:hover { box-shadow: 0 0 30px 5px #c8e362 inset; } .b3:active { position:relative;top:1px; } .b4 {-moz-box-shadow:inset 3px 37px 0px -14px #3b8ce3;-webkit-box-shadow:inset 3px 37px 0px -14px #3b8ce3;box-shadow:inset 3px 37px 0px -14px #3b8ce3;background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2a9eeb), color-stop(1, #1256a8));background:-moz-linear-gradient(top, #2a9eeb 5%, #1256a8 100%);background:-webkit-linear-gradient(top, #2a9eeb 5%, #1256a8 100%);background:-o-linear-gradient(top, #2a9eeb 5%, #1256a8 100%);background:-ms-linear-gradient(top, #2a9eeb 5%, #1256a8 100%);background:linear-gradient(to bottom, #2a9eeb 5%, #1256a8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a9eeb', endColorstr='#1256a8',GradientType=0);background-color:#2a9eeb;border:1px solid #ffffff;display:inline-block;cursor:pointer;color:#ffffff;font-family:Arial;font-size:17px;padding:8px 12px;text-decoration:none;text-shadow:-1px 1px 20px #3b3b3b;} .b4:hover {background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1256a8), color-stop(1, #2a9eeb));background:-moz-linear-gradient(top, #1256a8 5%, #2a9eeb 100%);background:-webkit-linear-gradient(top, #1256a8 5%, #2a9eeb 100%);background:-o-linear-gradient(top, #1256a8 5%, #2a9eeb 100%);background:-ms-linear-gradient(top, #1256a8 5%, #2a9eeb 100%);background:linear-gradient(to bottom, #1256a8 5%, #2a9eeb 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1256a8', endColorstr='#2a9eeb',GradientType=0);background-color:#1256a8;} .b4:active {position:relative;top:1px;} .b5 { box-shadow: 0 2px 1px 1px #eaa4fb inset;transition: all 0.5s;cursor: pointer;background: -moz-linear-gradient(top, 0%,#a602f5 100%);background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,c7),color-stop(100%,#a602f5));background: -webkit-linear-gradient(top,#d957f9 0%,#a602f5 100%);background: -o-linear-gradient(top,#d957f9 0%,#a602f5 100%);background: -ms-linear-gradient(top,#d957f9 0%,#a602f5 100%);background: linear-gradient(top,#d957f9 0%,#a602f5 100%);padding: 8px 12px;color: #fff;font-family: "Open Sans Hebrew",Arial, serif;font-size: 17px;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #eaa4fb;text-align: center;vertical-align: middle;} .b5:hover { box-shadow: 0 2px 10px 5px #eaa4fb inset; border-radius: 6px; } .b5:active { position:relative;top:1px; } .b6 { box-shadow:0 0 1px 0px #9c2e44 inset; transition: all 0.5s;cursor: pointer;background: -moz-linear-gradient(top, 0%,#f2bb30 100%);background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,c7),color-stop(100%,#f2bb30));background: -webkit-linear-gradient(top,#df7d1d 0%,#f2bb30 100%);background: -o-linear-gradient(top,#df7d1d 0%,#f2bb30 100%);background: -ms-linear-gradient(top,#df7d1d 0%,#f2bb30 100%);background: linear-gradient(top,#df7d1d 0%,#f2bb30 100%);padding: 8px 12px;color: #fff;font-family: "Open Sans Hebrew",Arial, serif;font-size: 17px;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #9c2e44;text-align: center;vertical-align: middle;} .b6:hover { box-shadow: 0 2px 10px 5px #9c2e44 inset;} .b6:active { position:relative;top:1px; } .b7 { box-shadow:0 0 1px 0px #c8e362 inset; transition: all 0.5s;cursor: pointer;background: -moz-linear-gradient(top,#88b300 0%,#abcc26 100%);background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#88b300),color-stop(100%,#abcc26));background: -webkit-linear-gradient(top,#88b300 0%,#abcc26 100%);background: -o-linear-gradient(top,#88b300 0%,#abcc26 100%);background: -ms-linear-gradient(top,#88b300 0%,#abcc26 100%);background: linear-gradient(top,#88b300 0%,#4AA400 100%);padding: 8px 12px;color: #fff;font-family: "Open Sans Hebrew",Arial, serif;font-size: 17px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 1px solid #459A00;} .b7:hover { box-shadow: 0 0 30px 5px #c8e362 inset; } .b7:active { position:relative;top:1px; } .b8 { transition: all 0.5s;cursor: pointer; padding: 8px 13px;color: #eee;font-family:"Open Sans Hebrew",Arial, serif;font-size: 16px;border-radius: 4px;box-shadow:inset 0px 1px 0px 0px #ffffff;background: transparent;background-color:transparent;border:1px solid #dcdcdc;display:inline-block;font-weight:bold;text-decoration:none;text-shadow:0px 1px 0px #999; border-color: #fff;} .b8:hover { box-shadow: 0 0 1px 1px inset #fff; background:#f2bb30;color: #fff; } .b8:active { position:relative;top:1px; } .b9 {-moz-box-shadow:inset 3px 37px 0px -14px #6b6b6b;-webkit-box-shadow:inset 3px 37px 0px -14px #6b6b6b;box-shadow:inset 3px 37px 0px -14px #6b6b6b;background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5c5c5c), color-stop(1, #2e2e2e));background:-moz-linear-gradient(top, #5c5c5c 5%, #2e2e2e 100%);background:-webkit-linear-gradient(top, #5c5c5c 5%, #2e2e2e 100%);background:-o-linear-gradient(top, #5c5c5c 5%, #2e2e2e 100%);background:-ms-linear-gradient(top, #5c5c5c 5%, #2e2e2e 100%);background:linear-gradient(to bottom, #5c5c5c 5%, #2e2e2e 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c5c5c', endColorstr='#2e2e2e',GradientType=0);background-color:#5c5c5c;border:1px solid #ffffff;display:inline-block;cursor:pointer;color:#ffffff;font-family:Arial;font-size:17px;padding:8px 12px;text-decoration:none;text-shadow:-1px 1px 20px #3b3b3b;} .b9:hover {background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2e2e2e), color-stop(1, #5c5c5c));background:-moz-linear-gradient(top, #2e2e2e 5%, #5c5c5c 100%);background:-webkit-linear-gradient(top, #2e2e2e 5%, #5c5c5c 100%);background:-o-linear-gradient(top, #2e2e2e 5%, #5c5c5c 100%);background:-ms-linear-gradient(top, #2e2e2e 5%, #5c5c5c 100%);background:linear-gradient(to bottom, #2e2e2e 5%, #5c5c5c 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2e2e2e', endColorstr='#5c5c5c',GradientType=0);background-color:#2e2e2e;} .b9:active {position:relative;top:1px;} /********************************JS Classes********************************************************************************/ .boxs { transition: all 0.7s;background-color: #a3c5f4;border-radius: 30%;padding-top: 30px;text-align: center;padding-left: 15px;color: #fff;text-align: center;width: 220px;height: 220px;} .boxs img { border-radius: 1%;} .boxs:hover { border-radius: 25%;background-color: #5e9ff8;color: #eee;cursor: pointer; border-color: #eee;} .box { transition: all 0.5s;width: 280px;color: #eee; background-color: #f8f8f8; border-radius: 12px;text-align: center;border: 1px dotted #999; text-align: center;margin:5px; cursor: pointer;} .box:hover { border-color: #eee;border-radius: 5px;} .Box1 { transition: all 0.5s;border-radius:10px 10px 0 0 ; background-color: white; background-repeat:no-repeat; background-position:center; cursor: pointer;text-align: center;width:278px; height:250px; } .Box1:hover { height:300px; -webkit-filter: contrast(2);} .Box1:hover ~ .Box2 {background-color: #258be8;color: #fff;} .Box2 { transition: all 0.5s;border-radius: 0 0 10px 10px; cursor: pointer; background-color: #eee; padding:25px 0px 25px 15px; text-align: left;width:278px; } .Box2:hover { background-color: #258be8;color: #fff;} /**************************** Effects ************************************************************************/ .blur {color: transparent;text-shadow: 0 0 1px #eee;} .rotate {transform: rotate(-180deg);-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);} .sdw {text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);} .circle {border-color:#ebccd1; border-radius: 50%; padding:5px; border:1px dotted #ccc} .HD {cursor: pointer;} .wordWrap{ white-space: pre-wrap; } .center { margin-left: auto; margin-right: auto; text-align: center; } .ENG{direction: ltr;text-align:left;} .HEB{direction: rtl;text-align:right;} /**************************** IMGS Filters ************************************************************************/ #imgsEff { -webkit-filter: brightness(3); -webkit-filter: contrast(9); /* -webkit-filter: invert(.8);-webkit-filter: saturate(8);*/ } .bw { -webkit-filter: grayscale(1);transition: all; } .bw:hover { -webkit-filter: grayscale(9); } .sepia { -webkit-filter: sepia(5);transition: all; } .sepia:hover { -webkit-filter: sepia(9); } /*****************************Animation ***********************************************************************************/ .scl { transform:scale(1);transition: 1s;z-index: 10; } .scl:hover { transform:scale(2); z-index: 1000;} .rots { transform: rotate(-90deg);float: left; } .rot { transition: all; } .rot:hover { transform: rotateY(180deg);} .marquee {position: relative;animation: marquee_ 5s infinite ease;animation-delay: 2s;animation-direction: alternate;animation-play-state: running;} @keyframes marquee_ {0% {left: 0px;} 100% {left: 20px;}} .pulse {position: relative;animation: pulse_ 3s infinite ease;animation-delay: 2s;animation-direction: alternate;animation-play-state: running;} @keyframes pulse_ {0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}} .fadein {animation:fadein_ 5s;} @keyframes fadein_ {0% {opacity:0} 100%{opacity:1} } .shake {animation:shake_ 2s;} @keyframes shake_ {0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}} .zoomin {animation:zoomin_ 1s;} @keyframes zoomin_ {0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}} .rotate {position: relative;animation: rotate_ 4s infinite ease;animation-direction: alternate;animation-play-state: running; } @keyframes rotate_ { 0%{ -webkit-transform: rotateY(0deg);} 30% { -webkit-transform: rotateY(10deg);} 50% { -webkit-transform: rotateY(180deg);} 70% { -webkit-transform: rotateY(10deg);} 100% { -webkit-transform: rotateY(0deg);}}