style.css 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. @import 'normalize.css';
  2. /*********** Body ***********/
  3. body {
  4. color: #000;
  5. background:#363e48;
  6. font-family: sans-serif;
  7. }
  8. /*********** Layout ***********/
  9. .container {
  10. padding:30px;
  11. }
  12. .main {
  13. background:#fbfbfb;
  14. padding: 40px;
  15. }
  16. /*********** Type ***********/
  17. h1 {
  18. font-family: 'Playfair Display', serif;
  19. font-weight: 900;
  20. font-size: 37px;
  21. letter-spacing: .01em;
  22. }
  23. .header h1 {
  24. color: #fff;
  25. }
  26. h2 {
  27. font-family: 'Playfair Display', serif;
  28. font-weight: 700;
  29. font-size: 27px;
  30. }
  31. h3 {
  32. font-family: 'Playfair Display', serif;
  33. font-weight: 500;
  34. font-size: 23px;
  35. }
  36. p {
  37. font-family: 'Montserrat', sans-serif;
  38. font-size: 17px;
  39. line-height: 1.2;
  40. }
  41. a {
  42. color: #376399;
  43. }
  44. .right {
  45. text-align:right;
  46. }
  47. /*********** Reponsive ***********/
  48. @media (max-width: 639px) {
  49. h1 {
  50. font-size: 27px;
  51. }
  52. .container {
  53. padding:10px 5px;
  54. }
  55. .main {
  56. padding: 5px 15px;
  57. }
  58. }
  59. @media (max-width: 767px) {}
  60. @media (max-width: 1023px) {}
  61. @media (max-width: 1279px) {}
  62. /*********** Font ***********/
  63. /* montserrat-italic - latin */
  64. @font-face {
  65. font-family: 'Montserrat';
  66. font-style: italic;
  67. font-weight: 400;
  68. src: url('../font/montserrat-v14-latin-italic.eot'); /* IE9 Compat Modes */
  69. src: local('Montserrat Italic'), local('Montserrat-Italic'),
  70. url('../font/montserrat-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  71. url('../font/montserrat-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
  72. url('../font/montserrat-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
  73. url('../font/montserrat-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
  74. url('../font/montserrat-v14-latin-italic.svg#Montserrat') format('svg'); /* Legacy iOS */
  75. }
  76. /* montserrat-regular - latin */
  77. @font-face {
  78. font-family: 'Montserrat';
  79. font-style: normal;
  80. font-weight: 400;
  81. src: url('../font/montserrat-v14-latin-regular.eot'); /* IE9 Compat Modes */
  82. src: local('Montserrat Regular'), local('Montserrat-Regular'),
  83. url('../font/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  84. url('../font/montserrat-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
  85. url('../font/montserrat-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
  86. url('../font/montserrat-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  87. url('../font/montserrat-v14-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
  88. }
  89. /* montserrat-500 - latin */
  90. @font-face {
  91. font-family: 'Montserrat';
  92. font-style: normal;
  93. font-weight: 500;
  94. src: url('../font/montserrat-v14-latin-500.eot'); /* IE9 Compat Modes */
  95. src: local('Montserrat Medium'), local('Montserrat-Medium'),
  96. url('../font/montserrat-v14-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  97. url('../font/montserrat-v14-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
  98. url('../font/montserrat-v14-latin-500.woff') format('woff'), /* Modern Browsers */
  99. url('../font/montserrat-v14-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
  100. url('../font/montserrat-v14-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
  101. }
  102. /* montserrat-500italic - latin */
  103. @font-face {
  104. font-family: 'Montserrat';
  105. font-style: italic;
  106. font-weight: 500;
  107. src: url('../font/montserrat-v14-latin-500italic.eot'); /* IE9 Compat Modes */
  108. src: local('Montserrat Medium Italic'), local('Montserrat-MediumItalic'),
  109. url('../font/montserrat-v14-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  110. url('../font/montserrat-v14-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
  111. url('../font/montserrat-v14-latin-500italic.woff') format('woff'), /* Modern Browsers */
  112. url('../font/montserrat-v14-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
  113. url('../font/montserrat-v14-latin-500italic.svg#Montserrat') format('svg'); /* Legacy iOS */
  114. }
  115. /* montserrat-900 - latin */
  116. @font-face {
  117. font-family: 'Montserrat';
  118. font-style: normal;
  119. font-weight: 900;
  120. src: url('../font/montserrat-v14-latin-900.eot'); /* IE9 Compat Modes */
  121. src: local('Montserrat Black'), local('Montserrat-Black'),
  122. url('../font/montserrat-v14-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  123. url('../font/montserrat-v14-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
  124. url('../font/montserrat-v14-latin-900.woff') format('woff'), /* Modern Browsers */
  125. url('../font/montserrat-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
  126. url('../font/montserrat-v14-latin-900.svg#Montserrat') format('svg'); /* Legacy iOS */
  127. }
  128. /* playfair-display-regular - latin */
  129. @font-face {
  130. font-family: 'Playfair Display';
  131. font-style: normal;
  132. font-weight: 400;
  133. src: url('../font/playfair-display-v20-latin-regular.eot'); /* IE9 Compat Modes */
  134. src: local(''),
  135. url('../font/playfair-display-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  136. url('../font/playfair-display-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
  137. url('../font/playfair-display-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
  138. url('../font/playfair-display-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  139. url('../font/playfair-display-v20-latin-regular.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
  140. }
  141. /* playfair-display-700 - latin */
  142. @font-face {
  143. font-family: 'Playfair Display';
  144. font-style: normal;
  145. font-weight: 700;
  146. src: url('../font/playfair-display-v20-latin-700.eot'); /* IE9 Compat Modes */
  147. src: local(''),
  148. url('../font/playfair-display-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  149. url('../font/playfair-display-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
  150. url('../font/playfair-display-v20-latin-700.woff') format('woff'), /* Modern Browsers */
  151. url('../font/playfair-display-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
  152. url('../font/playfair-display-v20-latin-700.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
  153. }
  154. /* playfair-display-900 - latin */
  155. @font-face {
  156. font-family: 'Playfair Display';
  157. font-style: normal;
  158. font-weight: 900;
  159. src: url('../font/playfair-display-v20-latin-900.eot'); /* IE9 Compat Modes */
  160. src: local(''),
  161. url('../font/playfair-display-v20-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  162. url('../font/playfair-display-v20-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
  163. url('../font/playfair-display-v20-latin-900.woff') format('woff'), /* Modern Browsers */
  164. url('../font/playfair-display-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
  165. url('../font/playfair-display-v20-latin-900.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
  166. }
  167. /* playfair-display-italic - latin */
  168. @font-face {
  169. font-family: 'Playfair Display';
  170. font-style: italic;
  171. font-weight: 400;
  172. src: url('../font/playfair-display-v20-latin-italic.eot'); /* IE9 Compat Modes */
  173. src: local(''),
  174. url('../font/playfair-display-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  175. url('../font/playfair-display-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
  176. url('../font/playfair-display-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
  177. url('../font/playfair-display-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
  178. url('../font/playfair-display-v20-latin-italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
  179. }
  180. /* playfair-display-700italic - latin */
  181. @font-face {
  182. font-family: 'Playfair Display';
  183. font-style: italic;
  184. font-weight: 700;
  185. src: url('../font/playfair-display-v20-latin-700italic.eot'); /* IE9 Compat Modes */
  186. src: local(''),
  187. url('../font/playfair-display-v20-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  188. url('../font/playfair-display-v20-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
  189. url('../font/playfair-display-v20-latin-700italic.woff') format('woff'), /* Modern Browsers */
  190. url('../font/playfair-display-v20-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
  191. url('../font/playfair-display-v20-latin-700italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
  192. }
  193. @font-face {
  194. font-family: 'fontello';
  195. src: url('../font/fontello.eot?84652176');
  196. src: url('../font/fontello.eot?84652176#iefix') format('embedded-opentype'),
  197. url('../font/fontello.woff?84652176') format('woff'),
  198. url('../font/fontello.ttf?84652176') format('truetype'),
  199. url('../font/fontello.svg?84652176#fontello') format('svg');
  200. font-weight: normal;
  201. font-style: normal;
  202. }
  203. .demo-icon {
  204. font-family: "fontello";
  205. font-style: normal;
  206. font-weight: normal;
  207. speak: none;
  208. display: inline-block;
  209. text-decoration: inherit;
  210. width: 1em;
  211. margin-right: .2em;
  212. text-align: center;
  213. font-variant: normal;
  214. text-transform: none;
  215. line-height: 1em;
  216. margin-left: .2em;
  217. -webkit-font-smoothing: antialiased;
  218. -moz-osx-font-smoothing: grayscale;
  219. /* opacity: .8; */
  220. /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  221. }