/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	#about .container::before {
		content          : "";
		width            : 703px;
		height           : 230px;
		background-image : url("/assets/img/figures/e6.png");
		background-size  : contain;
		background-repeat: no-repeat;
		position         : absolute;
		top              : 30%;
		left             : 413px;
		transform        : rotate(-265deg);
	}
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
	#about .container::before {
		content          : "";
		width            : 840px;
		height           : 230px;
		background-image : url("/assets/img/figures/e6.png");
		background-size  : contain;
		background-repeat: no-repeat;
		position         : absolute;
		top              : 30%;
		right            : 45%;
		transform        : rotate(-265deg);
	}
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
	#home .home-intro-text {
		font-size: 5rem;
	}

	#home::before {
		content            : "";
		background-image   : url("/assets/bg/grid-bg.png");
		background-size    : cover;
		background-position: top;
		position           : absolute;
		top                : 0;
		left               : 0;
		bottom             : 0;
		right              : 0;
		opacity            : 0.5;
		z-index            : 1;
		mix-blend-mode     : screen;
		background-repeat  : no-repeat;
	}

	#home::after {
		content            : "";
		background-image   : url("/assets/bg/grid-bg.png");
		background-size    : contain;
		background-position: bottom;
		position           : absolute;
		top                : 0;
		left               : 0;
		bottom             : 0;
		right              : 0;
		opacity            : 0.5;
		z-index            : 0;
		mix-blend-mode     : screen;
		background-repeat  : no-repeat;
		transform          : rotate(-90deg) translate(-50%, -80%);
	}

	#home .container::before {
		content          : "";
		width            : 600px;
		height           : 340px;
		background-image : url("/assets/img/figures/e6.png");
		position         : absolute;
		top              : -150px;
		background-size  : contain;
		background-repeat: no-repeat;
		left             : 40%;
		transform        : translate(-50%, 0%);
	}

	#home .container::after {
		content          : "";
		width            : 600px;
		height           : 340px;
		background-image : url("/assets/img/figures/e5.png");
		position         : absolute;
		top              : -100px;
		background-size  : contain;
		background-repeat: no-repeat;
		right            : 0;
		transform        : translate(50%, 0%);
	}

	#home .container>.row:first-child:before {
		content          : "";
		width            : 210px;
		height           : 210px;
		background-image : url("/assets/img/figures/e4.png");
		background-size  : contain;
		background-repeat: no-repeat;
		position         : absolute;
		top              : 90px;
		right            : 50px;
		z-index          : 2;
		animation        : float 6s ease-in-out infinite;
	}

	#home .container>.row:first-child:after {
		content          : "";
		width            : 150px;
		height           : 150px;
		background-image : url("/assets/img/figures/e2.png");
		background-size  : contain;
		background-repeat: no-repeat;
		position         : absolute;
		bottom           : 90px;
		animation        : float 6s ease-in-out infinite;
		animation-delay  : 1s;
	}

	#home .container>.row:first-child>.col-md-12:before {
		content          : "";
		width            : 50px;
		height           : 50px;
		background-image : url("/assets/img/figures/e2.png");
		background-size  : contain;
		background-repeat: no-repeat;
		position         : absolute;
		top              : -80px;
		left             : 0px;
		transform        : rotate(-160deg);
	}

	#home .container>.row:first-child>.col-md-12:after {
		content          : "";
		width            : 35px;
		height           : 35px;
		background-image : url("/assets/img/figures/e1.png");
		background-size  : contain;
		background-repeat: no-repeat;
		position         : absolute;
		bottom           : -120px;
		right            : -20px;
		transform        : rotate(-160deg);
	}

	#about::after {
		content            : "";
		background-image   : url("/assets/bg/grid-bg.png");
		background-size    : contain;
		background-position: bottom;
		position           : absolute;
		top                : 0;
		left               : 0;
		bottom             : 0;
		right              : 0;
		opacity            : 0.5;
		z-index            : 0;
		mix-blend-mode     : screen;
		background-repeat  : no-repeat;
		transform          : rotate(-90deg) translate(8%, -80%);
	}

	#about::before {
		content          : "";
		width            : 230px;
		height           : 230px;
		background-image : url("/assets/img/figures/e3.png");
		background-size  : contain;
		background-repeat: no-repeat;
		position         : absolute;
		top              : 0px;
		right            : 0px;
		transform        : rotate(-160deg);
		animation        : float-down 6s ease-in-out infinite;
		animation-delay  : 3s;
	}

	#about .container::before {
		content          : "";
		width            : 840px;
		height           : 230px;
		background-image : url("/assets/img/figures/e6.png");
		background-size  : contain;
		background-repeat: no-repeat;
		position         : absolute;
		top              : 30%;
		right            : 45%;
		transform        : rotate(-265deg);
	}

	#about .container::after {
		content          : "";
		width            : 170px;
		height           : 170px;
		background-image : url("/assets/img/figures/e4.png");
		background-size  : contain;
		background-repeat: no-repeat;
		position         : absolute;
		top              : 70%;
		left             : 20px;
		/* transform     : rotate(-265deg); */
		animation        : float-x 6s ease-in-out infinite;
		animation-delay  : 1s;
	}

	#about .phone-placeholder::before {
		content          : "";
		position         : absolute;
		top              : 0;
		bottom           : 0;
		left             : 0;
		right            : 0;
		background-image : url("/assets/img/phone-placeholder.png");
		background-size  : cover;
		background-repeat: no-repeat;
		z-index          : 1;
	}

	#about .phone-placeholder::after {
		content         : "";
		width           : 110px;
		height          : 110px;
		background-image: url("/assets/img/a-green.png");
		position        : absolute;
		z-index         : 2;
		background-size : contain;
		bottom          : 0px;
		right           : 10px;
	}

	#whatwedo::before {
		content            : "";
		background-image   : url("/assets/bg/grid-bg.png");
		background-size    : cover;
		background-position: bottom;
		position           : absolute;
		top                : 0px;
		left               : 0;
		bottom             : 0;
		right              : 0;
		opacity            : 0.5;
		z-index            : 0;
		mix-blend-mode     : screen;
		background-repeat  : no-repeat;
		transform          : rotate(90deg) translate(10%, -75%);
	}

	#whatwedo::after {
		content            : "";
		background-image   : url("/assets/img/watch.png");
		background-size    : contain;
		background-position: bottom;
		position           : absolute;
		bottom             : 0;
		right              : -160px;
		z-index            : 0;
		width              : 400px;
		height             : 400px;
		background-repeat  : no-repeat;
		transform          : rotate(9deg);
	}

	#whatwedo .container::before {
		content            : "";
		background-image   : url("/assets/img/figures/e6.png");
		background-size    : contain;
		background-position: bottom;
		position           : absolute;
		top                : 50%;
		left               : -140px;
		z-index            : 0;
		width              : 500px;
		height             : 215px;
		background-repeat  : no-repeat;
		transform          : rotate(-85deg) translate(25%, -50%);
	}

	#whatwedo .container::after {
		content            : "";
		background-image   : url("/assets/img/figures/e8.png");
		background-size    : contain;
		background-position: bottom;
		position           : absolute;
		top                : 0;
		right              : -150px;
		z-index            : 0;
		width              : 400px;
		height             : 400px;
		background-repeat  : no-repeat;
		transform          : rotate(180deg);
	}


	#whatwedo .whatwedo .thing {
		position      : relative;
		display       : flex;
		flex-direction: row;
		align-items   : flex-start;
		border-bottom : 1px solid rgba(255, 255, 255, .1);
		z-index       : 999;
	}

	#whatwedo .whatwedo .thing .details {
		margin: 0;
	}

	#toContact {
		display: inline;
	}

	#contact::after {
		content            : "";
		background-image   : url("/assets/bg/grid-bg.png");
		background-size    : contain;
		background-position: bottom;
		position           : absolute;
		top                : 0;
		left               : 0;
		bottom             : 0;
		right              : 0;
		opacity            : 0.5;
		z-index            : 0;
		mix-blend-mode     : screen;
		background-repeat  : no-repeat;
		transform          : rotate(90deg) translate(8%, -60%);
	}

	#contact::before {
		content            : "";
		background-image   : url("/assets/img/drone.png");
		background-size    : contain;
		background-position: bottom;
		position           : absolute;
		bottom             : 50%;
		right              : 0;
		z-index            : 0;
		width              : 600px;
		height             : 420px;
		transform          : translate(0%, 80%);
		background-repeat  : no-repeat;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	#home .home-intro-text {
		font-size: 6.5rem;
	}


	#about .phone-placeholder #carousel {
		position     : absolute;
		top          : 25px;
		left         : 40px;
		right        : 40px;
		bottom       : 35px;
		overflow     : hidden;
		border-radius: 15px;
	}

	#home::before {
		content            : "";
		background-image   : url("/assets/bg/grid-bg.png");
		background-size    : cover;
		background-position: top;
		position           : absolute;
		top                : 0;
		left               : 0;
		bottom             : 0;
		right              : 0;
		opacity            : 0.5;
		z-index            : 1;
		mix-blend-mode     : screen;
		background-repeat  : no-repeat;
	}

	#home::after {
		content            : "";
		background-image   : url("/assets/bg/grid-bg.png");
		background-size    : contain;
		background-position: bottom;
		position           : absolute;
		top                : 0;
		left               : 0;
		bottom             : 0;
		right              : 0;
		opacity            : 0.5;
		z-index            : 0;
		mix-blend-mode     : screen;
		background-repeat  : no-repeat;
		transform          : rotate(-90deg) translate(-50%, -80%);
	}

	#home .container::before {
		content          : "";
		width            : 600px;
		height           : 340px;
		background-image : url("/assets/img/figures/e6.png");
		position         : absolute;
		top              : -150px;
		background-size  : contain;
		background-repeat: no-repeat;
		left             : 40%;
		transform        : translate(-50%, 0%);
	}

	#home .container::after {
		content          : "";
		width            : 600px;
		height           : 340px;
		background-image : url("/assets/img/figures/e5.png");
		position         : absolute;
		top              : -100px;
		background-size  : contain;
		background-repeat: no-repeat;
		right            : 0;
		transform        : translate(50%, 0%);
	}

	#home .container>.row:first-child:before {
		content          : "";
		width            : 210px;
		height           : 210px;
		background-image : url("/assets/img/figures/e4.png");
		background-size  : contain;
		background-repeat: no-repeat;
		position         : absolute;
		top              : 90px;
		right            : 50px;
		z-index          : 2;
		animation        : float 6s ease-in-out infinite;
	}

	#home .container>.row:first-child:after {
		content          : "";
		width            : 150px;
		height           : 150px;
		background-image : url("/assets/img/figures/e2.png");
		background-size  : contain;
		background-repeat: no-repeat;
		position         : absolute;
		bottom           : 90px;
		animation        : float 6s ease-in-out infinite;
		animation-delay  : 1s;
	}

	#home .container>.row:first-child>.col-md-12:before {
		content          : "";
		width            : 50px;
		height           : 50px;
		background-image : url("/assets/img/figures/e2.png");
		background-size  : contain;
		background-repeat: no-repeat;
		position         : absolute;
		top              : -80px;
		left             : 0px;
		transform        : rotate(-160deg);
	}

	#home .container>.row:first-child>.col-md-12:after {
		content          : "";
		width            : 35px;
		height           : 35px;
		background-image : url("/assets/img/figures/e1.png");
		background-size  : contain;
		background-repeat: no-repeat;
		position         : absolute;
		bottom           : -120px;
		right            : -20px;
		transform        : rotate(-160deg);
	}

	#about::after {
		content            : "";
		background-image   : url("/assets/bg/grid-bg.png");
		background-size    : contain;
		background-position: bottom;
		position           : absolute;
		top                : 0;
		left               : 0;
		bottom             : 0;
		right              : 0;
		opacity            : 0.5;
		z-index            : 0;
		mix-blend-mode     : screen;
		background-repeat  : no-repeat;
		transform          : rotate(-90deg) translate(8%, -80%);
	}

	#about::before {
		content          : "";
		width            : 230px;
		height           : 230px;
		background-image : url("/assets/img/figures/e3.png");
		background-size  : contain;
		background-repeat: no-repeat;
		position         : absolute;
		top              : 0px;
		right            : 0px;
		transform        : rotate(-160deg);
		animation        : float-down 6s ease-in-out infinite;
		animation-delay  : 3s;
	}

	#about .container::before {
		content          : "";
		width            : 840px;
		height           : 230px;
		background-image : url("/assets/img/figures/e6.png");
		background-size  : contain;
		background-repeat: no-repeat;
		position         : absolute;
		top              : 15%;
		left             : 370px;
		transform        : rotate(-83deg);
	}

	#about .container::after {
		content          : "";
		width            : 170px;
		height           : 170px;
		background-image : url("/assets/img/figures/e4.png");
		background-size  : contain;
		background-repeat: no-repeat;
		position         : absolute;
		top              : 70%;
		left             : 20px;
		/* transform     : rotate(-265deg); */
		animation        : float-x 6s ease-in-out infinite;
		animation-delay  : 1s;
	}

	#about .phone-placeholder::before {
		content          : "";
		position         : absolute;
		top              : 0;
		bottom           : 0;
		left             : 0;
		right            : 0;
		background-image : url("/assets/img/phone-placeholder.png");
		background-size  : cover;
		background-repeat: no-repeat;
		z-index          : 1;
	}

	#about .phone-placeholder::after {
		content         : "";
		width           : 110px;
		height          : 110px;
		background-image: url("/assets/img/a-green.png");
		position        : absolute;
		z-index         : 2;
		background-size : contain;
		bottom          : 0px;
		right           : 10px;
	}

	#whatwedo::before {
		content            : "";
		background-image   : url("/assets/bg/grid-bg.png");
		background-size    : cover;
		background-position: bottom;
		position           : absolute;
		top                : 0px;
		left               : 0;
		bottom             : 0;
		right              : 0;
		opacity            : 0.5;
		z-index            : 0;
		mix-blend-mode     : screen;
		background-repeat  : no-repeat;
		transform          : rotate(90deg) translate(10%, -75%);
	}

	#whatwedo::after {
		content            : "";
		background-image   : url("/assets/img/watch.png");
		background-size    : contain;
		background-position: bottom;
		position           : absolute;
		bottom             : 0;
		right              : -160px;
		z-index            : 0;
		width              : 400px;
		height             : 400px;
		background-repeat  : no-repeat;
		transform          : rotate(9deg);
	}

	#whatwedo .container::before {
		content            : "";
		background-image   : url("/assets/img/figures/e6.png");
		background-size    : contain;
		background-position: bottom;
		position           : absolute;
		top                : 50%;
		left               : -140px;
		z-index            : 0;
		width              : 500px;
		height             : 215px;
		background-repeat  : no-repeat;
		transform          : rotate(-85deg) translate(25%, -50%);
	}

	#whatwedo .container::after {
		content               : "";
		background-image      : url("/assets/img/figures/e8.png");
		background-size       : contain;
		background-position   : bottom;
		position              : absolute;
		top                   : 0;
		/* right              : -150px; */
		left                  : 85%;
		z-index               : 0;
		width                 : 400px;
		height                : 400px;
		background-repeat     : no-repeat;
		transform             : rotate(180deg);
	}


	#whatwedo .whatwedo .thing {
		position      : relative;
		display       : flex;
		flex-direction: row;
		align-items   : flex-start;
		border-bottom : 1px solid rgba(255, 255, 255, .1);
		z-index       : 999;
	}

	#whatwedo .whatwedo .thing .details {
		margin: 0;
	}

	#toContact {
		display: inline;
	}

	#contact::after {
		content            : "";
		background-image   : url("/assets/bg/grid-bg.png");
		background-size    : contain;
		background-position: bottom;
		position           : absolute;
		top                : 0;
		left               : 0;
		bottom             : 0;
		right              : 0;
		opacity            : 0.5;
		z-index            : 0;
		mix-blend-mode     : screen;
		background-repeat  : no-repeat;
		transform          : rotate(90deg) translate(8%, -60%);
	}

	#contact::before {
		content            : "";
		background-image   : url("/assets/img/drone.png");
		background-size    : contain;
		background-position: bottom;
		position           : absolute;
		bottom             : 50%;
		right              : 0;
		z-index            : 0;
		width              : 600px;
		height             : 420px;
		transform          : translate(0%, 80%);
		background-repeat  : no-repeat;
	}
}