<div class="sitemakers">
  <div class="resize">
  <p class="browser">Resize Browser</p>
    </br>
    <p>Break Points at</br>
  400px & 800px</p>
  </div>
<div class="wrap"><svg class="bulb" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="128px"
	 height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<g id="s-bulb-128">
	<g>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M104.145,42.922c-0.258-9.541-3.436-19.458-10.576-27.913
			C88.695,9.245,82.706,5.05,75.47,2.746c-3.798-1.209-7.682-1.965-11.683-1.916c-3.553,0.043-7.022,0.693-10.406,1.747
			c-9.279,2.88-16.414,8.597-21.776,16.625C28.182,24.328,26.107,29.98,24.958,36c-0.742,3.904-1.014,7.844-0.657,11.804
			c0.858,9.513,4,18.144,10.17,25.542c2.009,2.413,4.117,4.748,5.545,7.566c1.062,2.094,1.989,4.256,2.942,6.4
			c1.076,2.427,2.774,4.205,5.371,4.859c1.925,0.485,3.702,1.281,5.499,2.063c2.902,1.265,5.809,2.526,8.709,3.795
			c2.195,0.955,4.388,1.918,6.581,2.884c2.589,1.138,5.17,2.287,7.762,3.413c1.31,0.57,2.841,0.235,3.577-0.708
			c1.095-1.397,0.673-3.48-1.087-4.271c-1.669-0.753-3.345-1.488-5.019-2.222c-2.038-0.891-4.08-1.776-6.12-2.666
			c-2.604-1.136-5.216-2.268-7.821-3.411c-2.003-0.878-4-1.771-6.005-2.644c-1.102-0.479-2.207-0.95-3.326-1.39
			c-0.417-0.161-0.891-0.179-1.308-0.344c-0.764-0.298-1.278-0.869-1.553-1.646c-1.768-4.971-4.392-9.464-7.759-13.508
			c-1.509-1.809-3.09-3.554-4.336-5.57c-3.335-5.383-5.46-11.171-6.052-17.516c-0.915-9.789,1.291-18.79,6.863-26.889
			c4.957-7.208,11.708-12.015,20.204-14.157c6.392-1.611,12.689-1.011,18.773,1.573c9.279,3.942,15.587,10.785,19.488,19.984
			c2.296,5.405,3.22,11.05,3.011,16.889c-0.317,8.925-3.272,16.896-8.946,23.792c-2.068,2.513-4.124,5.015-5.803,7.807
			c-1.402,2.332-2.552,4.787-3.472,7.349c-0.474,1.314-1.366,2.028-2.757,2.188c-0.928,0.106-1.761,0.435-2.275,1.309
			c-0.89,1.508-0.273,3.811,1.588,4.196c1.883,0.39,3.575-0.188,5.144-1.113c1.738-1.026,2.893-2.557,3.605-4.471
			c1.734-4.653,4.226-8.836,7.528-12.581c4.964-5.618,8.227-12.141,9.869-19.48C103.665,51.369,104.143,47.883,104.145,42.922z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M77.257,116.188c0.884,0.346,1.702,0.202,2.46-0.188
			c0.947-0.494,1.366-1.401,1.348-2.405c-0.02-1.136-0.615-2.013-1.687-2.491c-1.944-0.869-3.899-1.721-5.848-2.575
			c-1.709-0.747-3.419-1.491-5.13-2.234c-2.676-1.171-5.354-2.338-8.028-3.509c-2.347-1.031-4.684-2.087-7.038-3.102
			c-0.792-0.343-1.614-0.626-2.435-0.891c-0.897-0.287-2.432,0.154-2.961,1.172c-0.715,1.37-0.362,3.355,1.264,4.016
			c2.498,1.021,4.943,2.155,7.415,3.23c2.935,1.281,5.875,2.56,8.81,3.84c2.003,0.878,3.997,1.774,6.002,2.646
			c0.324,0.139,0.452,0.309,0.4,0.68c-0.46,3.388-2.759,5.917-6.027,6.749c-3.471,0.886-7.294-1.126-8.787-4.443
			c-0.481-1.063-0.592-2.182-0.792-3.296c-0.254-1.407-1.227-2.001-2.529-2.222c-0.908-0.151-2.159,0.46-2.663,1.422
			c-0.438,0.83-0.415,1.74-0.272,2.663c0.696,4.489,2.935,7.963,6.953,10.109c3.115,1.666,6.446,2.109,9.915,1.108
			c5.003-1.449,8.154-4.682,9.476-9.707C77.146,116.592,77.19,116.428,77.257,116.188z"/>
	</g>
</g>
<g id="www-filament-128">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M82.985,29.716c0.897-0.62,1.849-0.822,2.957-0.547
		c1.471,0.363,2.109,1.95,1.953,3.176c-0.134,1.05-0.666,1.823-1.564,2.383c-0.25,0.155-0.498,0.438-0.585,0.712
		c-0.553,1.734-1.059,3.483-1.584,5.222c-1.027,3.403-2.059,6.806-3.089,10.205c-0.604,1.997-1.211,3.989-1.814,5.985
		c-1.007,3.331-2.012,6.67-3.021,10.001c-0.741,2.449-1.484,4.895-2.227,7.345c-1.016,3.353-2.025,6.708-3.051,10.062
		c-0.217,0.716-0.948,1.105-1.604,0.909c-0.719-0.215-1.057-0.821-0.822-1.608c1.04-3.506,2.104-7.005,3.151-10.508
		c0.364-1.205,0.724-2.423,1.126-3.771c-0.78,0.522-1.44,0.955-2.093,1.4c-0.971,0.659-2.496,0.685-3.463-0.059
		c-1.034-0.789-2.072-1.576-3.105-2.36c-1.011,0.771-2.009,1.495-2.968,2.274c-1.044,0.847-2.709,0.815-3.751,0.048
		c-0.78-0.574-1.604-1.091-2.516-1.7c0.321,1.07,0.595,2.012,0.879,2.952c1.155,3.807,2.311,7.614,3.46,11.425
		c0.084,0.283,0.161,0.6,0.131,0.887c-0.055,0.601-0.562,1.034-1.146,1.081c-0.543,0.045-1.157-0.374-1.344-0.949
		c-0.223-0.688-0.418-1.38-0.628-2.069c-1.357-4.498-2.712-8.995-4.074-13.494c-2.142-7.073-4.292-14.143-6.432-21.218
		c-0.945-3.118-1.818-6.26-2.834-9.356c-0.494-1.505-0.604-3.163-1.934-4.375c-0.766-0.701-0.747-1.802-0.425-2.832
		c0.275-0.885,0.818-1.444,1.703-1.732c1.167-0.381,2.189-0.102,3.155,0.579c0.963,0.675,1.942,1.331,2.909,2.001
		c1.774,1.23,3.548,2.467,5.34,3.713c0.854-0.667,1.69-1.326,2.526-1.98c2.092-1.639,4.174-3.288,6.276-4.914
		c0.789-0.609,2.453-0.664,3.224-0.089c1.265,0.942,2.491,1.93,3.729,2.9c1.731,1.358,3.462,2.715,5.197,4.082
		C77.429,33.558,80.204,31.632,82.985,29.716z M76.578,46.931c0.969-0.69,1.972-1.112,3.223-0.72
		c0.871-2.883,1.733-5.738,2.598-8.592c-0.037-0.027-0.071-0.052-0.107-0.082c-0.538,0.37-1.078,0.729-1.615,1.101
		c-1.452,1.002-2.898,2.017-4.356,3.011c-1.11,0.759-2.634,0.747-3.716-0.083c-1.969-1.515-3.91-3.071-5.864-4.604
		c-0.852-0.669-1.703-1.334-2.583-2.02c-1.043,0.813-2.09,1.621-3.129,2.439c-1.82,1.425-3.612,2.896-5.469,4.276
		c-0.99,0.738-2.432,0.763-3.523,0.02c-1.913-1.306-3.813-2.632-5.719-3.947c-0.295-0.206-0.593-0.406-1.044-0.714
		c0.96,3.179,1.871,6.201,2.794,9.26c0.205-0.032,0.395-0.032,0.566-0.086c1.027-0.336,1.94-0.049,2.781,0.529
		c1.647,1.127,3.29,2.26,4.912,3.415c0.35,0.255,0.56,0.217,0.875-0.037c1.671-1.344,3.368-2.654,5.042-3.993
		c1.141-0.916,2.937-0.785,4.069,0.181c1.643,1.404,3.388,2.689,5.091,4.024c0.042,0.033,0.102,0.047,0.187,0.083
		C73.242,49.245,74.926,48.105,76.578,46.931z M58.842,56.22c-1.109,0.887-2.681,0.887-3.8,0.103
		c-1.462-1.027-2.936-2.034-4.404-3.048c-0.141-0.099-0.283-0.189-0.567-0.375c0.981,3.251,1.921,6.36,2.869,9.502
		c0.791-0.181,1.538-0.45,2.304-0.103c0.256,0.118,0.54,0.186,0.773,0.334c0.95,0.628,1.891,1.271,2.826,1.924
		c0.253,0.175,0.43,0.189,0.693-0.025c0.866-0.709,1.776-1.363,2.642-2.074c1.126-0.928,2.846-0.918,3.977,0.019
		c0.864,0.716,1.772,1.371,2.641,2.077c0.246,0.201,0.415,0.177,0.647,0.017c0.734-0.512,1.478-1,2.207-1.517
		c0.595-0.423,1.191-0.828,1.945-0.873c0.422-0.024,0.845-0.004,1.382-0.004c0.854-2.827,1.741-5.768,2.629-8.712
		c-0.035-0.022-0.074-0.045-0.11-0.066c-1.198,0.829-2.402,1.652-3.601,2.488c-0.624,0.432-1.232,0.851-2.021,0.982
		c-0.781,0.128-1.497-0.009-2.094-0.452c-1.885-1.412-3.73-2.875-5.633-4.353C62.366,53.453,60.59,54.814,58.842,56.22z
		 M49.028,49.956c2.344,1.648,4.709,3.274,7.077,4.887c0.628,0.428,1.043,0.387,1.659-0.094c1.708-1.326,3.414-2.657,5.121-3.987
		c0.839-0.653,1.699-0.653,2.537,0c1.704,1.331,3.409,2.661,5.121,3.987c0.615,0.481,1.028,0.522,1.658,0.094
		c2.369-1.613,4.725-3.247,7.086-4.874c0.473-0.325,0.651-0.772,0.525-1.338c-0.091-0.433-0.369-0.79-0.793-0.757
		c-0.429,0.026-0.88,0.21-1.245,0.443c-0.899,0.564-1.756,1.198-2.628,1.804c-0.794,0.555-1.589,1.109-2.388,1.659
		c-0.772,0.534-1.678,0.551-2.419-0.02c-1.791-1.381-3.56-2.781-5.33-4.185c-0.543-0.429-1.167-0.429-1.71,0
		c-1.771,1.404-3.541,2.804-5.328,4.181c-0.742,0.575-1.648,0.562-2.425,0.024c-1.653-1.146-3.304-2.295-4.958-3.439
		c-0.204-0.143-0.413-0.278-0.636-0.376c-0.814-0.355-1.507,0.114-1.61,1.089C48.567,49.361,48.733,49.747,49.028,49.956z
		 M69.706,69.17c1.593-1.068,3.174-2.148,4.762-3.23c0.433-0.293,0.533-0.718,0.451-1.198c-0.075-0.439-0.348-0.77-0.781-0.783
		c-0.331-0.012-0.712,0.114-0.997,0.293c-0.946,0.599-1.859,1.252-2.787,1.878c-0.884,0.597-1.77,0.554-2.615-0.106
		c-0.926-0.729-1.854-1.457-2.781-2.18c-0.52-0.405-1.094-0.403-1.619,0.008c-0.927,0.722-1.851,1.449-2.779,2.176
		c-0.841,0.661-1.728,0.694-2.615,0.096c-0.913-0.617-1.818-1.245-2.732-1.857c-0.725-0.484-1.3-0.452-1.658,0.066
		c-0.386,0.562-0.22,1.265,0.432,1.712c1.502,1.037,3.008,2.06,4.521,3.081c0.596,0.396,1.035,0.381,1.624-0.062
		c0.955-0.717,1.889-1.463,2.849-2.173c0.768-0.572,1.585-0.569,2.355,0.003c0.96,0.716,1.895,1.462,2.854,2.174
		c0.232,0.173,0.526,0.271,0.787,0.399C69.262,69.355,69.511,69.304,69.706,69.17z"/>
</g>
<g id="s-bulb-64">
	<g>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M104.145,42.922c-0.258-9.541-3.436-19.458-10.576-27.913
			C88.695,9.245,82.706,5.05,75.47,2.746c-3.798-1.209-7.682-1.965-11.683-1.916c-3.553,0.043-7.022,0.693-10.406,1.747
			c-9.279,2.88-16.414,8.597-21.776,16.625C28.182,24.328,26.107,29.98,24.958,36c-0.742,3.904-1.014,7.844-0.657,11.804
			c0.858,9.513,4,18.144,10.17,25.542c2.009,2.413,4.117,4.748,5.545,7.566c1.062,2.094,1.989,4.256,2.942,6.4
			c1.076,2.427,2.774,4.205,5.371,4.859c1.925,0.485,3.702,1.281,5.499,2.063c2.902,1.265,5.809,2.526,8.709,3.795
			c2.195,0.955,4.388,1.918,6.581,2.884c2.589,1.138,5.17,2.287,7.762,3.413c1.31,0.57,2.841,0.235,3.577-0.708
			c1.095-1.397,0.673-3.48-1.087-4.271c-1.669-0.753-3.345-1.488-5.019-2.222c-2.038-0.891-4.08-1.776-6.12-2.666
			c-2.604-1.136-5.216-2.268-7.821-3.411c-2.003-0.878-4-1.771-6.005-2.644c-1.102-0.479-2.207-0.95-3.326-1.39
			c-0.417-0.161-0.891-0.179-1.308-0.344c-0.764-0.298-1.278-0.869-1.553-1.646c-1.768-4.971-4.392-9.464-7.759-13.508
			c-1.509-1.809-3.09-3.554-4.336-5.57c-3.335-5.383-5.46-11.171-6.052-17.516c-0.915-9.789,1.291-18.79,6.863-26.889
			c4.957-7.208,11.708-12.015,20.204-14.157c6.392-1.611,12.689-1.011,18.773,1.573c9.279,3.942,15.587,10.785,19.488,19.984
			c2.296,5.405,3.22,11.05,3.011,16.889c-0.317,8.925-3.272,16.896-8.946,23.792c-2.068,2.513-4.124,5.015-5.803,7.807
			c-1.402,2.332-2.552,4.787-3.472,7.349c-0.474,1.314-1.366,2.028-2.757,2.188c-0.928,0.106-1.761,0.435-2.275,1.309
			c-0.89,1.508-0.273,3.811,1.588,4.196c1.883,0.39,3.575-0.188,5.144-1.113c1.738-1.026,2.893-2.557,3.605-4.471
			c1.734-4.653,4.226-8.836,7.528-12.581c4.964-5.618,8.227-12.141,9.869-19.48C103.665,51.369,104.143,47.883,104.145,42.922z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M77.257,116.188c0.884,0.346,1.702,0.202,2.46-0.188
			c0.947-0.494,1.366-1.401,1.348-2.405c-0.02-1.136-0.615-2.013-1.687-2.491c-1.944-0.869-3.899-1.721-5.848-2.575
			c-1.709-0.747-3.419-1.491-5.13-2.234c-2.676-1.171-5.354-2.338-8.028-3.509c-2.347-1.031-4.684-2.087-7.038-3.102
			c-0.792-0.343-1.614-0.626-2.435-0.891c-0.897-0.287-2.432,0.154-2.961,1.172c-0.715,1.37-0.362,3.355,1.264,4.016
			c2.498,1.021,4.943,2.155,7.415,3.23c2.935,1.281,5.875,2.56,8.81,3.84c2.003,0.878,3.997,1.774,6.002,2.646
			c0.324,0.139,0.452,0.309,0.4,0.68c-0.46,3.388-2.759,5.917-6.027,6.749c-3.471,0.886-7.294-1.126-8.787-4.443
			c-0.481-1.063-0.592-2.182-0.792-3.296c-0.254-1.407-1.227-2.001-2.529-2.222c-0.908-0.151-2.159,0.46-2.663,1.422
			c-0.438,0.83-0.415,1.74-0.272,2.663c0.696,4.489,2.935,7.963,6.953,10.109c3.115,1.666,6.446,2.109,9.915,1.108
			c5.003-1.449,8.154-4.682,9.476-9.707C77.146,116.592,77.19,116.428,77.257,116.188z"/>
	</g>
</g>
<g id="www-filament-64">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M45.469,47.625c-2.091-1.52-2.944-2.031-4.274-3.242
		c-0.767-0.701-0.748-1.8-0.426-2.829c0.276-0.884,0.819-1.442,1.702-1.729c1.167-0.38,2.187-0.103,3.152,0.578
		c0.962,0.675,1.94,1.329,2.905,1.999c1.774,1.229,3.548,2.465,5.336,3.71c0.853-0.666,1.689-1.325,2.524-1.979
		c2.089-1.637,4.169-3.284,6.27-4.908c0.79-0.608,2.452-0.663,3.218-0.089c1.266,0.941,2.491,1.928,3.728,2.897
		c1.73,1.357,3.459,2.713,5.192,4.077c2.801-1.938,5.573-3.862,8.352-5.777c0.897-0.619,1.848-0.82,2.954-0.546
		c1.47,0.362,2.106,1.948,1.952,3.173c-0.135,1.049-0.667,1.82-1.564,2.381c-0.248,0.155-0.922,0.529-1.152,0.702
		c-1.491,1.118-0.899,0.715-2.885,2.102c-0.537,0.37-1.075,0.729-1.611,1.101c-1.451,1-2.896,2.015-4.352,3.007
		c-1.11,0.758-2.632,0.747-3.714-0.083c-1.965-1.513-3.906-3.068-5.857-4.599c-0.851-0.668-1.703-1.333-2.581-2.018
		c-1.043,0.812-2.088,1.619-3.125,2.438c-1.82,1.423-3.609,2.893-5.465,4.271c-0.99,0.737-2.429,0.763-3.52,0.021
		c-1.912-1.306-3.811-2.631-5.713-3.943C46.219,48.132,45.92,47.932,45.469,47.625"/>
</g>
<g id="s-bulb-16">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M77.17,116.203c-2.467,7.149-6.914,10.613-13.475,10.584
		c-5.979-0.03-10.694-3.87-12.958-10.593c-0.279,0-0.589,0-0.892,0c-1.675-0.007-2.699-0.813-2.87-2.498
		c-0.154-1.441-0.108-2.901-0.125-4.359c-0.015-2.24-0.015-4.482,0.017-6.73c0.031-2.659,1.52-4.117,4.218-4.117
		c8.578,0,17.155,0,25.728,0c2.745,0,4.234,1.488,4.234,4.234c0.017,3.188,0.017,6.367,0,9.562
		C81.047,115.302,80.21,116.162,77.17,116.203z"/>
</g>
<g id="www-filament-16">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M64.068,92.547c-4.329,0-8.655,0.056-12.983-0.007
		c-3.629-0.069-6.428-1.604-8.011-5.01c-0.48-1.03-0.962-2.069-1.396-3.126c-1.497-3.675-3.606-6.955-6.228-9.94
		c-8.002-9.136-11.772-19.896-11.175-31.909c0.783-15.491,7.391-27.965,20.869-36.24c5.444-3.343,11.47-5.242,17.883-5.3
		c11.846-0.109,21.757,4.397,29.622,13.222c8.097,9.085,11.818,19.83,11.244,31.967c-0.496,10.614-3.986,20.126-11.106,28.175
		c-3.163,3.569-5.552,7.607-7.272,12.053c-1.644,4.271-4.451,6.124-9.043,6.109c-4.142-0.016-8.264,0-12.404,0
		C64.068,92.54,64.068,92.54,64.068,92.547z"/>
</g>
</svg>
      <div class="light"><span class="glow"></span><span class="flare"></span><div>
</div>
</div>
.sitemakers {
  width: 100%;
  height: 100%;
  display: block;
  background: -webkit-radial-gradient(rgba(57,60,76,1), rgba(36,36,46,1) 80%);
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.resize {
  
  position: absolute;
  background: #1D1F27;
  padding: 10px;
  width: 200px;
  border-radius: 5px 5px 0 0;
  text-align: center;
  font-family: helvetica;
  color: #ffdf43;
  font-size: 8pt;
  text-transform: uppercase;
  top: 50%;
  right: -115px;
  margin-top: -55px;
  transform: translate(-50%, -50%);
  transform: rotate(270deg);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
}

.resize:hover {
    right: -60px;
      transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.browser {
    letter-spacing: 4pt;
    color: #c4d8d9;
}

.wrap {
  
}

  .wrap:before {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    background: rgba(185,185,219,1);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

.wrap .bulb {
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  width: 128px;
  height: 128px; 
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrap #s-bulb-128, .wrap #s-bulb-64, .wrap #s-bulb-16 {
  stroke: #262832;
  fill: #262832;
  stroke-width: 0;
  transition: 300ms;
}

.wrap #s-bulb-128, .wrap #s-bulb-64, .wrap #s-bulb-16 {
  stroke: #262832;
  fill: #262832;
  transition: 1500ms;
}

.wrap:hover #s-bulb-128,.wrap:hover #s-bulb-64, .wrap:hover #s-bulb-16 {
  fill: #c4d8d9;
  stroke: #c4d8d9;
  stroke-width: 2;
  transition: 100ms;
}

.wrap #www-filament-128,.wrap #www-filament-64, .wrap #www-filament-16 {
  stroke-width: 0;
  stroke-width: 0;
  transition: 300ms;
}

.wrap #www-filament-128, .wrap #www-filament-64, .wrap #www-filament-16 {
  fill: #333542;
  stroke: #333542;
  transition: 1500ms;
}

.wrap:hover #www-filament-128, .wrap:hover #www-filament-64, .wrap:hover #www-filament-16 {
  stroke: #ffdf43; 
  stroke-width: 3;
  fill: #ffdf43;
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}


.wrap .light {
  width: 200px;
  height: 200px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
}

.wrap .light .glow {
  width: 0px;
  height: 0px;
  border-radius: 50%;
  opacity: 0;
  background: -webkit-radial-gradient(rgba(255,223,67,1), rgba(255,223,67,0) 70%);
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrap:hover .light .glow {
  width: 200px;
  height: 200px;
  opacity: 0.2;
  background: -webkit-radial-gradient(rgba(255,223,67,1), rgba(255,223,67,0) 70%);
  transition: all 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrap .light .flare {
  width: 0px;
  height: 0px;
  border-radius: 50%;
  opacity: 0;
  background: rgba(255,223,67,0);
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrap:hover .light .flare {
  width: 50px;
  height: 50px;
  opacity: 0.5;
  background: rgba(255,223,67,1);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrap #s-bulb-64 {
  display: none;
}

.wrap #www-filament-64 {
  display: none;
}

.wrap #s-bulb-16 {
  display: none;
}

.wrap #www-filament-16 {
  display: none;
}

/* Responsive 800 */

@media all and (max-width: 800px) {

 .wrap .bulb {
  width: 64px;
  height: 64px; 
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
  .wrap #s-bulb-128 {
  display: none;
}

.wrap #www-filament-128 {
  display: none;
}
  
  .wrap #s-bulb-64 {
  display: block;
}

.wrap #www-filament-64 {
  display: block;
}
  
  .wrap #s-bulb-16 {
  display: none;
}

.wrap #www-filament-16 {
  display: none;
}
  
.wrap .light {
  width: 100px;
  height: 100px;
  margin-top: -8px;
  
}

.wrap:hover .light .glow {
  width: 100px;
  height: 100px;
}

.wrap:hover .light .flare {
  width: 25px;
  height: 25px;
}
  
}

/* Responsive 400 */

@media all and (max-width: 400px) {

  .wrap .bulb {
  width: 16px;
  height: 16px; 
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
  
  .wrap:before {
    width: 30px;
    height: 30px;
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  .wrap:hover:before {
    background: rgba(185,185,219,0.2);
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  .wrap #s-bulb-128 {
  display: none;
}

.wrap #www-filament-128 {
  display: none;
}
  
  .wrap #s-bulb-64 {
  display: none;
}

.wrap #www-filament-64 {
  display: none;
}
  
.wrap #s-bulb-16 {
  display: block;
}

.wrap #www-filament-16 {
  display: block;
}
  
  
.wrap .light {
  width: 25px;
  height: 25px;
  margin-top: -2px;
  
}

.wrap:hover .light .glow {
  width: 25px;
  height: 25px;
}

.wrap:hover .light .flare {
  display: none;
  
}
/**
 * CROSS BROWSER PREFIX RESOLVE
 */
(function(){function t(e,t){return[].slice.call((t||document).querySelectorAll(e))}if(!window.addEventListener)return;var e=window.StyleFix={link:function(t){try{if(t.rel!=="stylesheet"||t.hasAttribute("data-noprefix"))return}catch(n){return}var r=t.href||t.getAttribute("data-href"),i=r.replace(/[^\/]+$/,""),s=(/^[a-z]{3,10}:/.exec(i)||[""])[0],o=(/^[a-z]{3,10}:\/\/[^\/]+/.exec(i)||[""])[0],u=/^([^?]*)\??/.exec(r)[1],a=t.parentNode,f=new XMLHttpRequest,l;f.onreadystatechange=function(){f.readyState===4&&l()};l=function(){var n=f.responseText;if(n&&t.parentNode&&(!f.status||f.status<400||f.status>600)){n=e.fix(n,!0,t);if(i){n=n.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,t,n){return/^([a-z]{3,10}:|#)/i.test(n)?e:/^\/\//.test(n)?'url("'+s+n+'")':/^\//.test(n)?'url("'+o+n+'")':/^\?/.test(n)?'url("'+u+n+'")':'url("'+i+n+'")'});var r=i.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");n=n.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+r,"gi"),"$1")}var l=document.createElement("style");l.textContent=n;l.media=t.media;l.disabled=t.disabled;l.setAttribute("data-href",t.getAttribute("href"));a.insertBefore(l,t);a.removeChild(t);l.media=t.media}};try{f.open("GET",r);f.send(null)}catch(n){if(typeof XDomainRequest!="undefined"){f=new XDomainRequest;f.onerror=f.onprogress=function(){};f.onload=l;f.open("GET",r);f.send(null)}}t.setAttribute("data-inprogress","")},styleElement:function(t){if(t.hasAttribute("data-noprefix"))return;var n=t.disabled;t.textContent=e.fix(t.textContent,!0,t);t.disabled=n},styleAttribute:function(t){var n=t.getAttribute("style");n=e.fix(n,!1,t);t.setAttribute("style",n)},process:function(){t('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);t("style").forEach(StyleFix.styleElement);t("[style]").forEach(StyleFix.styleAttribute)},register:function(t,n){(e.fixers=e.fixers||[]).splice(n===undefined?e.fixers.length:n,0,t)},fix:function(t,n,r){for(var i=0;i<e.fixers.length;i++)t=e.fixers[i](t,n,r)||t;return t},camelCase:function(e){return e.replace(/-([a-z])/g,function(e,t){return t.toUpperCase()}).replace("-","")},deCamelCase:function(e){return e.replace(/[A-Z]/g,function(e){return"-"+e.toLowerCase()})}};(function(){setTimeout(function(){t('link[rel="stylesheet"]').forEach(StyleFix.link)},10);document.addEventListener("DOMContentLoaded",StyleFix.process,!1)})()})();(function(e){function t(e,t,r,i,s){e=n[e];if(e.length){var o=RegExp(t+"("+e.join("|")+")"+r,"gi");s=s.replace(o,i)}return s}if(!window.StyleFix||!window.getComputedStyle)return;var n=window.PrefixFree={prefixCSS:function(e,r,i){var s=n.prefix;n.functions.indexOf("linear-gradient")>-1&&(e=e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig,function(e,t,n,r){return t+(n||"")+"linear-gradient("+(90-r)+"deg"}));e=t("functions","(\\s|:|,)","\\s*\\(","$1"+s+"$2(",e);e=t("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+s+"$2$3",e);e=t("properties","(^|\\{|\\s|;)","\\s*:","$1"+s+"$2:",e);if(n.properties.length){var o=RegExp("\\b("+n.properties.join("|")+")(?!:)","gi");e=t("valueProperties","\\b",":(.+?);",function(e){return e.replace(o,s+"$1")},e)}if(r){e=t("selectors","","\\b",n.prefixSelector,e);e=t("atrules","@","\\b","@"+s+"$1",e)}e=e.replace(RegExp("-"+s,"g"),"-");e=e.replace(/-\*-(?=[a-z]+)/gi,n.prefix);return e},property:function(e){return(n.properties.indexOf(e)>=0?n.prefix:"")+e},value:function(e,r){e=t("functions","(^|\\s|,)","\\s*\\(","$1"+n.prefix+"$2(",e);e=t("keywords","(^|\\s)","(\\s|$)","$1"+n.prefix+"$2$3",e);n.valueProperties.indexOf(r)>=0&&(e=t("properties","(^|\\s|,)","($|\\s|,)","$1"+n.prefix+"$2$3",e));return e},prefixSelector:function(e){return e.replace(/^:{1,2}/,function(e){return e+n.prefix})},prefixProperty:function(e,t){var r=n.prefix+e;return t?StyleFix.camelCase(r):r}};(function(){var e={},t=[],r={},i=getComputedStyle(document.documentElement,null),s=document.createElement("div").style,o=function(n){if(n.charAt(0)==="-"){t.push(n);var r=n.split("-"),i=r[1];e[i]=++e[i]||1;while(r.length>3){r.pop();var s=r.join("-");u(s)&&t.indexOf(s)===-1&&t.push(s)}}},u=function(e){return StyleFix.camelCase(e)in s};if(i.length>0)for(var a=0;a<i.length;a++)o(i[a]);else for(var f in i)o(StyleFix.deCamelCase(f));var l={uses:0};for(var c in e){var h=e[c];l.uses<h&&(l={prefix:c,uses:h})}n.prefix="-"+l.prefix+"-";n.Prefix=StyleFix.camelCase(n.prefix);n.properties=[];for(var a=0;a<t.length;a++){var f=t[a];if(f.indexOf(n.prefix)===0){var p=f.slice(n.prefix.length);u(p)||n.properties.push(p)}}n.Prefix=="Ms"&&!("transform"in s)&&!("MsTransform"in s)&&"msTransform"in s&&n.properties.push("transform","transform-origin");n.properties.sort()})();(function(){function i(e,t){r[t]="";r[t]=e;return!!r[t]}var e={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},element:{property:"backgroundImage",params:"#foo"},"cross-fade":{property:"backgroundImage",params:"url(a.png), url(b.png), 50%"}};e["repeating-linear-gradient"]=e["repeating-radial-gradient"]=e["radial-gradient"]=e["linear-gradient"];var t={initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display",flex:"display","inline-flex":"display",grid:"display","inline-grid":"display","min-content":"width"};n.functions=[];n.keywords=[];var r=document.createElement("div").style;for(var s in e){var o=e[s],u=o.property,a=s+"("+o.params+")";!i(a,u)&&i(n.prefix+a,u)&&n.functions.push(s)}for(var f in t){var u=t[f];!i(f,u)&&i(n.prefix+f,u)&&n.keywords.push(f)}})();(function(){function s(e){i.textContent=e+"{}";return!!i.sheet.cssRules.length}var t={":read-only":null,":read-write":null,":any-link":null,"::selection":null},r={keyframes:"name",viewport:null,document:'regexp(".")'};n.selectors=[];n.atrules=[];var i=e.appendChild(document.createElement("style"));for(var o in t){var u=o+(t[o]?"("+t[o]+")":"");!s(u)&&s(n.prefixSelector(u))&&n.selectors.push(o)}for(var a in r){var u=a+" "+(r[a]||"");!s("@"+u)&&s("@"+n.prefix+u)&&n.atrules.push(a)}e.removeChild(i)})();n.valueProperties=["transition","transition-property"];e.className+=" "+n.prefix;StyleFix.register(n.prefixCSS)})(document.documentElement);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.