services.css (5339B)
1 .services-page { 2 display: block; 3 margin: 0 auto; 4 max-width: 1400px; 5 padding: 30px 20px; 6 } 7 8 .services-page > .p-title { 9 font-size: 24px; 10 margin-bottom: 20px; 11 color: #000; 12 text-align: center; 13 } 14 15 .services-page > .grid { 16 width: 100%; 17 font-size: 0; 18 } 19 20 .services-page > .grid > .item { 21 display: inline-block; 22 vertical-align: top; 23 width: calc(100% / 3 - (40px / 3)); 24 margin-right: 20px; 25 background: #fff; 26 text-align: center; 27 } 28 29 @media (max-width: 900px) { 30 .services-page > .grid > .item { 31 width: calc(100% / 2 - (20px / 2)); 32 } 33 34 .services-page > .grid > .item:nth-child(2) { 35 margin-right: 0; 36 } 37 38 .services-page > .grid > .item:nth-child(3) { 39 margin-top: 20px; 40 display: block; 41 width: 100%; 42 } 43 } 44 45 @media (max-width: 640px) { 46 .services-page > .grid > .item { 47 display: block; 48 width: 100%; 49 margin-right: 0; 50 margin-top: 20px; 51 } 52 53 .services-page > .grid > .item:nth-child(1) { 54 margin-top: 0; 55 } 56 } 57 58 .services-page > .grid > .item > .colorbar { 59 height: 80px; 60 width: 100%; 61 background: #9b59b6; 62 } 63 64 .services-page > .grid > .item:nth-child(3) { 65 margin-right: 0; 66 } 67 68 .services-page > .grid > .item > .text { 69 position: relative; 70 padding: 35px 15px 15px 15px; 71 font-size: 14px; 72 } 73 74 .services-page > .grid > .item > .text > a { 75 display: block; 76 width: 100%; 77 height: 40px; 78 line-height: 40px; 79 text-align: center; 80 color: #fff; 81 text-decoration: none; 82 background-color: #9b59b6; 83 font-size: 16px; 84 margin-top: 20px; 85 } 86 87 .services-page > .grid > .item > .text > .icon { 88 display: block; 89 width: 80px; 90 height: 80px; 91 position: absolute; 92 left: 0; 93 right: 0; 94 top: -60px; 95 background: #9b59b6; 96 -webkit-border-radius: 100%; 97 -moz-border-radius: 100%; 98 border-radius: 100%; 99 margin: 0 auto; 100 } 101 102 .services-page > .grid > .item > .text > .icon > .image { 103 position: absolute; 104 top: 50%; 105 left: 0; 106 right: 0; 107 margin: -25px auto; 108 width: 50px; 109 height: 50px; 110 background-size: contain; 111 background-position: center center; 112 background-repeat: no-repeat; 113 -webkit-animation: heartbeat 2s infinite; 114 -moz-animation: heartbeat 2s infinite; 115 animation: heartbeat 2s infinite; 116 } 117 118 .services-page > .grid > .item > .text > .title { 119 font-size: 18px; 120 margin-bottom: 10px; 121 } 122 123 .services-page > .grid > .item > .text > .short_description { 124 font-size: 12px; 125 color: #666; 126 line-height: 14px; 127 margin-bottom: 15px; 128 } 129 130 .services-page > .grid > .item > .text > .pricing > .small { 131 font-size: 12px; 132 color: #999; 133 margin-bottom: 5px; 134 text-transform: lowercase; 135 } 136 137 .services-page > .grid > .item > .text > .pricing > .price { 138 font-size: 16px; 139 font-weight: bold; 140 } 141 142 .services-view > .colorbar { 143 height: 80px; 144 width: 100%; 145 background: #9b59b6; 146 position: relative; 147 } 148 149 .services-view > .colorbar > a.back { 150 position: absolute; 151 top: 50%; 152 left: 20px; 153 color: #fff !important; 154 font-size: 18px; 155 text-decoration: none; 156 line-height: 22px; 157 margin-top: -11px; 158 } 159 160 .services-view > .p-title { 161 font-size: 24px; 162 margin-bottom: 20px; 163 color: #000; 164 text-align: center; 165 } 166 167 .services-view:nth-child(3) { 168 margin-right: 0; 169 } 170 171 .services-view > .text { 172 position: relative; 173 padding: 35px 15px 15px 15px; 174 font-size: 14px; 175 } 176 177 .services-view > .text > a { 178 display: block; 179 width: 100%; 180 height: 40px; 181 line-height: 40px; 182 text-align: center; 183 color: #fff; 184 text-decoration: none; 185 background-color: #9b59b6; 186 font-size: 16px; 187 margin-top: 20px; 188 } 189 190 .services-view > .text > .icon { 191 display: block; 192 width: 80px; 193 height: 80px; 194 position: absolute; 195 left: 0; 196 right: 0; 197 top: -60px; 198 background: #9b59b6; 199 -webkit-border-radius: 100%; 200 -moz-border-radius: 100%; 201 border-radius: 100%; 202 margin: 0 auto; 203 } 204 205 .services-view > .text > .icon > .image { 206 position: absolute; 207 top: 50%; 208 left: 0; 209 right: 0; 210 margin: -25px auto; 211 width: 50px; 212 height: 50px; 213 background-size: contain; 214 background-position: center center; 215 background-repeat: no-repeat; 216 -webkit-animation: heartbeat 2s infinite; 217 -moz-animation: heartbeat 2s infinite; 218 animation: heartbeat 2s infinite; 219 } 220 221 .services-view > .inner { 222 max-width: 1200px; 223 padding: 30px 20px; 224 background: #fff; 225 width: 100%; 226 margin: 25px auto; 227 font-size: 14px; 228 color: #000; 229 } 230 231 .services-view > .inner > .pricing { 232 margin-bottom: 15px; 233 } 234 235 .services-view > .inner > .pricing > .label { 236 font-size: 12px; 237 color: #999; 238 margin-bottom: 5px; 239 } 240 241 .services-view > .inner > .pricing > .price { 242 font-size: 18px; 243 font-weight: bold; 244 } 245 246 .services-view > .inner > .body { 247 line-height: 1.5; 248 margin-bottom: 20px; 249 } 250 251 .services-view > .inner > .title { 252 display: block; 253 font-size: 22px; 254 color: #000; 255 margin-bottom: 10px; 256 } 257 258 .services-view > .inner > .attached { 259 border-top: 1px solid #efefed; 260 padding: 15px 0; 261 font-size: 0; 262 } 263 264 .services-view > .inner > .attached > a.item { 265 display: inline-block; 266 vertical-align: top; 267 width: 200px; 268 height: 200px; 269 cursor: pointer; 270 background-size: cover; 271 background-position: center center; 272 margin: 10px; 273 }