style.css 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. body {
  2. font-family: 'Roboto', sans-serif;
  3. font-size: 16px;
  4. font-weight: 300;
  5. color: #888;
  6. line-height: 30px;
  7. text-align: center;
  8. }
  9. strong { font-weight: 500; }
  10. a, a:hover, a:focus {
  11. color: #19b9e7;
  12. text-decoration: none;
  13. -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
  14. }
  15. h1, h2 {
  16. margin-top: 10px;
  17. font-size: 38px;
  18. font-weight: 100;
  19. color: #555;
  20. line-height: 50px;
  21. }
  22. h3 {
  23. font-size: 22px;
  24. font-weight: 300;
  25. color: #555;
  26. line-height: 30px;
  27. }
  28. img { max-width: 100%; }
  29. ::-moz-selection { background: #19b9e7; color: #fff; text-shadow: none; }
  30. ::selection { background: #19b9e7; color: #fff; text-shadow: none; }
  31. .btn-link-1 {
  32. display: inline-block;
  33. height: 50px;
  34. margin: 0 5px;
  35. padding: 16px 20px 0 20px;
  36. background: #19b9e7;
  37. font-size: 16px;
  38. font-weight: 300;
  39. line-height: 16px;
  40. color: #fff;
  41. -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
  42. }
  43. .btn-link-1:hover, .btn-link-1:focus, .btn-link-1:active { outline: 0; opacity: 0.6; color: #fff; }
  44. .btn-link-2 {
  45. display: inline-block;
  46. height: 50px;
  47. margin: 0 5px;
  48. padding: 15px 20px 0 20px;
  49. background: rgba(0, 0, 0, 0.3);
  50. border: 1px solid #fff;
  51. font-size: 16px;
  52. font-weight: 300;
  53. line-height: 16px;
  54. color: #fff;
  55. -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
  56. }
  57. .btn-link-2:hover, .btn-link-2:focus,
  58. .btn-link-2:active, .btn-link-2:active:focus { outline: 0; opacity: 0.6; background: rgba(0, 0, 0, 0.3); color: #fff; }
  59. /***** Top menu *****/
  60. .navbar {
  61. padding-top: 10px;
  62. background: #333;
  63. background: rgba(51, 51, 51, 0.3);
  64. border: 0;
  65. -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
  66. }
  67. .navbar.navbar-no-bg { background: none; }
  68. ul.navbar-nav {
  69. font-size: 16px;
  70. color: #fff;
  71. }
  72. .navbar-inverse ul.navbar-nav li { padding-top: 8px; padding-bottom: 8px; }
  73. .navbar-inverse ul.navbar-nav li .li-text { opacity: 0.8; }
  74. .navbar-inverse ul.navbar-nav li a { display: inline; padding: 0; color: #fff; }
  75. .navbar-inverse ul.navbar-nav li a:hover { color: #fff; opacity: 1; border-bottom: 1px dotted #fff; }
  76. .navbar-inverse ul.navbar-nav li a:focus { color: #fff; outline: 0; opacity: 1; border-bottom: 1px dotted #fff; }
  77. .navbar-inverse ul.navbar-nav li .li-social a {
  78. margin: 0 5px;
  79. font-size: 28px;
  80. vertical-align: middle;
  81. }
  82. .navbar-inverse ul.navbar-nav li .li-social a:hover,
  83. .navbar-inverse ul.navbar-nav li .li-social a:focus { border: 0; color: #19b9e7; }
  84. .navbar-brand {
  85. width: 113px;
  86. background: url(../img/logo.png) left center no-repeat;
  87. text-indent: -99999px;
  88. }
  89. /***** Top content *****/
  90. .inner-bg {
  91. padding: 40px 0 170px 0;
  92. }
  93. .top-content .text {
  94. color: #fff;
  95. }
  96. .top-content .text h1 { color: #fff; }
  97. .top-content .description {
  98. margin: 20px 0 10px 0;
  99. }
  100. .top-content .description p { opacity: 0.8; }
  101. .top-content .description a {
  102. color: #fff;
  103. }
  104. .top-content .description a:hover,
  105. .top-content .description a:focus { border-bottom: 1px dotted #fff; }
  106. .top-content .top-big-link {
  107. margin-top: 35px;
  108. }
  109. .form-box {
  110. padding-top: 40px;
  111. }
  112. .form-top {
  113. overflow: hidden;
  114. padding: 0 25px 15px 25px;
  115. background: #444;
  116. background: rgba(0, 0, 0, 0.35);
  117. -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
  118. text-align: left;
  119. }
  120. .form-top-left {
  121. float: left;
  122. width: 75%;
  123. padding-top: 25px;
  124. }
  125. .form-top-left h3 { margin-top: 0; color: #fff; }
  126. .form-top-left p { opacity: 0.8; color: #fff; }
  127. .form-top-right {
  128. float: left;
  129. width: 25%;
  130. padding-top: 5px;
  131. font-size: 66px;
  132. color: #fff;
  133. line-height: 100px;
  134. text-align: right;
  135. opacity: 0.3;
  136. }
  137. .form-bottom {
  138. padding: 25px 25px 30px 25px;
  139. background: #444;
  140. background: rgba(0, 0, 0, 0.3);
  141. -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
  142. text-align: left;
  143. }
  144. .form-bottom form textarea {
  145. height: 100px;
  146. }
  147. .form-bottom form .input-error {
  148. border-color: #19b9e7;
  149. }
  150. .form-bottom p { opacity: 0.8; color: #fff; }
  151. /***** Media queries *****/
  152. @media (min-width: 992px) and (max-width: 1199px) {}
  153. @media (min-width: 768px) and (max-width: 991px) {}
  154. @media (max-width: 767px) {
  155. .navbar { padding-top: 0; }
  156. .navbar.navbar-no-bg { background: #333; background: rgba(51, 51, 51, 0.9); }
  157. .navbar-brand { height: 60px; margin-left: 15px; }
  158. .navbar-collapse { border: 0; }
  159. .navbar-toggle { margin-top: 12px; }
  160. .inner-bg { padding: 40px 0 110px 0; }
  161. .top-content .top-big-link { margin-top: 25px; }
  162. .top-content .top-big-link a.btn { margin-top: 10px; }
  163. }
  164. @media (max-width: 415px) {
  165. h1, h2 { font-size: 32px; }
  166. }
  167. /* Retina-ize images/icons */
  168. @media
  169. only screen and (-webkit-min-device-pixel-ratio: 2),
  170. only screen and ( min--moz-device-pixel-ratio: 2),
  171. only screen and ( -o-min-device-pixel-ratio: 2/1),
  172. only screen and ( min-device-pixel-ratio: 2),
  173. only screen and ( min-resolution: 192dpi),
  174. only screen and ( min-resolution: 2dppx) {
  175. /* logo */
  176. .navbar-brand {
  177. background-image: url(../img/logo@2x.png) !important; background-repeat: no-repeat !important; background-size: 113px 32px !important;
  178. }
  179. }