From 7ab64641fb9ce5f4f205330ea55995f329e600ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ferit=20Yi=C4=9Fit=20BALABAN?= <fyb@duck.com>
Date: Thu, 21 Jul 2022 20:56:42 +0300
Subject: [PATCH] Fix reverse item img margin

---
 resources/css/views/index.scss |   7 +-
 resources/styles/main.css      | 873 ---------------------------------
 2 files changed, 6 insertions(+), 874 deletions(-)
 delete mode 100644 resources/styles/main.css

diff --git a/resources/css/views/index.scss b/resources/css/views/index.scss
index f697e08..5b2c625 100644
--- a/resources/css/views/index.scss
+++ b/resources/css/views/index.scss
@@ -122,7 +122,7 @@ $social-button_inner_margin: 10px;
 
   .reverse {
     // reverse is a property given to .table-item elements
-    // it contains styling for img, p and .vertical-separator elements contained under
+    // it contains styling for img and .vertical-separator elements contained under
     // a .table-item element
     flex-direction: row-reverse;
 
@@ -154,6 +154,11 @@ $social-button_inner_margin: 10px;
 
     @include mixins.mx_mobile {
       flex-direction: column;
+
+      img {
+        margin: 0 0 2px 0;
+        width: $table-item_img_width;
+      }
     }
   }
 
diff --git a/resources/styles/main.css b/resources/styles/main.css
deleted file mode 100644
index 38b1657..0000000
--- a/resources/styles/main.css
+++ /dev/null
@@ -1,873 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap");
-.showcase {
-  display: flex;
-  height: 90vh;
-  background-image: url("../img/index/g.jpg");
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-@media screen and (max-width: 850px) {
-  .showcase {
-    height: 95vh;
-  }
-}
-
-.showcase-animation {
-  animation: slideshow-appear 1000ms;
-}
-
-@keyframes slideshow-appear {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-.table {
-  display: flex;
-  flex-direction: column;
-}
-.table .table-item {
-  margin-top: 10px;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-}
-.table .table-item p {
-  font: x-large sans-serif;
-}
-@media screen and (max-width: 1100px) {
-  .table .table-item p {
-    font-size: large;
-  }
-}
-@media screen and (max-width: 850px) {
-  .table .table-item p {
-    font-size: xx-small;
-  }
-}
-.table .table-item img {
-  margin-right: 20px;
-  width: 150px;
-}
-@media screen and (max-width: 1100px) {
-  .table .table-item img {
-    margin-right: 10px;
-    width: 100px;
-  }
-}
-@media screen and (max-width: 850px) {
-  .table .table-item img {
-    margin-right: 10px;
-    width: 60px;
-  }
-}
-@media screen and (max-width: 400px) {
-  .table .table-item img {
-    margin: 0 0 2px 0;
-    width: 100px;
-  }
-}
-.table .table-item:first-of-type {
-  margin-top: 0;
-}
-@media screen and (max-width: 400px) {
-  .table .table-item {
-    flex-direction: column;
-  }
-}
-.table .vertical-separator {
-  height: 120px;
-  border: solid 1px #1d60b5;
-  margin-right: 180px;
-}
-@media screen and (max-width: 1100px) {
-  .table .vertical-separator {
-    margin-right: 90px;
-  }
-}
-@media screen and (max-width: 850px) {
-  .table .vertical-separator {
-    margin-right: 18px;
-  }
-}
-@media screen and (max-width: 400px) {
-  .table .vertical-separator {
-    display: none;
-  }
-}
-.table .horizontal-separator {
-  display: none;
-  width: 120px;
-  border: solid 1px #1d60b5;
-  margin: 0 0 18px 0;
-}
-@media screen and (max-width: 400px) {
-  .table .horizontal-separator {
-    display: block;
-  }
-}
-.table .reverse {
-  flex-direction: row-reverse;
-}
-.table .reverse img {
-  margin-right: 0;
-  margin-left: 20px;
-}
-@media screen and (max-width: 1100px) {
-  .table .reverse img {
-    margin-left: 10px;
-  }
-}
-@media screen and (max-width: 850px) {
-  .table .reverse img {
-    margin-left: 2px;
-  }
-}
-.table .reverse .vertical-separator {
-  margin-right: 0;
-  margin-left: 180px;
-}
-@media screen and (max-width: 1100px) {
-  .table .reverse .vertical-separator {
-    margin-left: 90px;
-  }
-}
-@media screen and (max-width: 850px) {
-  .table .reverse .vertical-separator {
-    margin-left: 18px;
-  }
-}
-@media screen and (max-width: 400px) {
-  .table .reverse {
-    flex-direction: column;
-  }
-}
-.table .square img {
-  height: 150px;
-  width: auto;
-}
-@media screen and (max-width: 1100px) {
-  .table .square img {
-    height: 100px;
-  }
-}
-@media screen and (max-width: 850px) {
-  .table .square img {
-    height: 60px;
-  }
-}
-@media screen and (max-width: 400px) {
-  .table .square img {
-    height: 100px;
-  }
-}
-.table .table-item-animation {
-  animation: slide-in-right 3000ms;
-}
-.table .table-item-animation-reverse {
-  animation: slide-in-left 3000ms;
-}
-@keyframes slide-in-left {
-  from {
-    transform: translateX(-5%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0%);
-    opacity: 1;
-  }
-}
-@keyframes slide-in-right {
-  from {
-    transform: translateX(5%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0%);
-    opacity: 1;
-  }
-}
-
-.social {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  background: linear-gradient(to left, #1d60b5, #3b8fff);
-  color: white;
-}
-.social p {
-  font: 700 32px "Montserrat", sans-serif;
-  margin: 30px 0;
-}
-.social .social-button {
-  display: inline-block;
-  height: 52px;
-  width: auto;
-  border: 2px solid white;
-  border-radius: 50%;
-  margin: 0 10px 0 0;
-}
-.social .social-button img {
-  margin: 10px;
-  height: 32px;
-  width: 32px;
-}
-.social .social-button:hover {
-  background-color: white;
-}
-.social .social-button:hover img {
-  filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
-}
-.social .social-button:last-of-type {
-  margin: 0;
-}
-@media screen and (max-width: 400px) {
-  .social .social-button {
-    margin: 0 0 30px 0;
-  }
-}
-@media screen and (max-width: 400px) {
-  .social {
-    flex-direction: column;
-  }
-  .social p {
-    font-size: 20px;
-    font-weight: 600;
-    text-align: center;
-  }
-}
-
-table {
-  width: 100%;
-  border: solid 1px black;
-}
-
-td {
-  padding: 1vw;
-  border: solid 1px black;
-}
-
-.documents {
-  display: flex;
-  flex-direction: row;
-  background: linear-gradient(to left, #1d60b5, #3b8fff);
-}
-.documents .document {
-  margin: 0 5vw 0 0;
-  padding: 1vh 1vw;
-  flex: 1;
-  display: block;
-  filter: light(50%);
-  text-align: center;
-  border-radius: 20px;
-}
-.documents .document:last-of-type {
-  margin: 0;
-}
-.documents .document:hover {
-  background-color: rgba(255, 255, 255, 0.75);
-  transition: 250ms cubic-bezier(0.4, 0, 1, 1);
-}
-.documents .document:hover img {
-  filter: brightness(0) saturate(100%) invert(15%) sepia(90%) saturate(2506%) hue-rotate(220deg) brightness(96%) contrast(90%);
-}
-.documents .document:hover h1 {
-  color: #1d409d;
-}
-.documents .document img {
-  margin: 0 0 2.5vh 0;
-  height: 100px;
-}
-.documents .document h1 {
-  color: white;
-  font: 600 18px Montserrat, sans-serif;
-}
-@media screen and (max-width: 1515px) {
-  .documents .document {
-    display: inline-flex;
-    align-items: center;
-    margin: 0 0 4.5vh 0;
-  }
-  .documents .document:last-of-type {
-    margin: 0;
-  }
-  .documents .document img {
-    margin: 0 2.5vw 0 0;
-  }
-  .documents .document h1 {
-    text-align: left;
-  }
-}
-@media screen and (max-width: 420px) {
-  .documents .document img {
-    width: 50px;
-    margin: 0 2vw 0 0;
-  }
-}
-@media screen and (max-width: 1515px) {
-  .documents {
-    flex-direction: column;
-  }
-}
-
-h1 {
-  margin: 0;
-}
-
-a {
-  text-decoration: none;
-  color: #706fff;
-}
-a:hover {
-  color: #01003B;
-}
-
-#map {
-  width: calc(100vw - (100vw - 100%));
-  height: auto;
-}
-#map iframe {
-  width: 100%;
-}
-
-#information {
-  display: flex;
-  flex-direction: row;
-  font: 500 24px "Montserrat", sans-serif;
-}
-#information .contact, #information .location {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 50%;
-}
-#information .contact h1, #information .location h1 {
-  font: 600 48px "Montserrat", sans-serif;
-}
-#information .contact h2, #information .location h2 {
-  font: 600 40px "Montserrat", sans-serif;
-  margin: 0.5em 0 0 0;
-}
-#information .contact h3, #information .location h3 {
-  font: 600 32px "Montserrat", sans-serif;
-  margin: 0.5em 0 0.25em 0;
-}
-#information .contact {
-  margin: 0 50px 0 0;
-}
-#information .click-call, #information .click-pm {
-  margin: 0 0 0 1em;
-}
-#information .click-call img, #information .click-pm img {
-  width: 1em;
-  height: 1em;
-  margin: 0 1em 0 0;
-}
-#information .horizontal-separator {
-  width: 100%;
-  width: -moz-available;
-  width: -webkit-fill-available;
-  border: solid 1px black;
-}
-
-#video {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background: linear-gradient(to left, #1d60b5, #3b8fff);
-}
-#video video {
-  width: 100% !important;
-  height: auto !important;
-}
-#video h1 {
-  margin: 0 0 1em 0;
-  font: 600 2.5vw "Montserrat", sans-serif;
-  color: white;
-}
-
-#header {
-  background: #FDFFFF;
-  padding: 0 150px;
-  position: sticky;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-@media screen and (max-width: 850px) {
-  #header {
-    padding: 0 50px;
-  }
-}
-@media screen and (max-width: 360px) {
-  #header {
-    padding: 0 25px;
-  }
-}
-#header #logo {
-  display: flex;
-  align-items: center;
-  height: 56px;
-}
-@media screen and (max-width: 850px) {
-  #header #logo {
-    height: 36px;
-  }
-}
-#header .bounce-animation span {
-  font: 600 56px "Oswald", sans-serif;
-  display: inline-block;
-  color: #1d60b5;
-  animation: bounce 2500ms infinite;
-  animation-delay: calc(0.1s * var(--i));
-}
-@media screen and (max-width: 850px) {
-  #header .bounce-animation span {
-    font-size: 36px;
-  }
-}
-@keyframes bounce {
-  0%, 40%, 100% {
-    transform: translateY(0);
-  }
-  20% {
-    transform: translateY(-5px);
-  }
-}
-#header .navbar {
-  display: flex;
-}
-#header .navbar .nav-item {
-  margin-right: 1vw;
-  font: 18px "Montserrat", sans-serif;
-  font-weight: 600;
-  color: #706fff;
-  text-decoration: none;
-}
-#header .navbar .nav-item:hover {
-  color: #01003B;
-}
-#header .navbar .nav-item:last-of-type {
-  margin-right: 0;
-}
-@media screen and (max-width: 1200px) {
-  #header .navbar .nav-item {
-    display: none;
-  }
-}
-#header #toggle {
-  display: none;
-}
-#header .dropdown-toggle {
-  margin: 0;
-  width: 36px;
-  height: 36px;
-  position: relative;
-  cursor: pointer;
-}
-#header .dropdown-toggle .bar {
-  padding: 0;
-  width: 36px;
-  height: 4px;
-  background-color: #1d60b5;
-  display: block;
-  border-radius: 4px;
-  transition: all 0.4s ease-in-out;
-  position: absolute;
-}
-#header .dropdown-toggle .bar1 {
-  transform-origin: 5%;
-}
-#header .dropdown-toggle .bar4 {
-  transform-origin: 5%;
-}
-@media screen and (max-width: 850px) {
-  #header .dropdown-toggle {
-    width: 28px;
-    height: 28px;
-  }
-  #header .dropdown-toggle .bar {
-    width: 28px;
-  }
-}
-#header .bar1 {
-  top: 0;
-}
-#header .bar2,
-#header .bar3 {
-  top: 16px;
-}
-@media screen and (max-width: 850px) {
-  #header .bar2,
-#header .bar3 {
-    top: 12px;
-  }
-}
-#header .bar3 {
-  right: 0;
-}
-#header .bar4 {
-  bottom: 0;
-}
-#header .toggle:checked + label > .dropdown-toggle > .bar1 {
-  transform: rotate(45deg);
-  height: 3px;
-  width: 50px;
-}
-@media screen and (max-width: 850px) {
-  #header .toggle:checked + label > .dropdown-toggle > .bar1 {
-    width: 39px;
-  }
-}
-#header .toggle:checked + label > .dropdown-toggle > .bar3 {
-  transform: rotate(45deg);
-  height: 3px;
-  background-color: transparent;
-}
-#header .toggle:checked + label > .dropdown-toggle > .bar2 {
-  transform: rotate(-45deg);
-  height: 3px;
-  background-color: transparent;
-}
-#header .toggle:checked + label > .dropdown-toggle > .bar4 {
-  transform: rotate(-45deg);
-  height: 3px;
-  width: 50px;
-}
-@media screen and (max-width: 850px) {
-  #header .toggle:checked + label > .dropdown-toggle > .bar4 {
-    width: 39px;
-  }
-}
-#header #toggle-label {
-  display: none;
-}
-@media screen and (max-width: 1200px) {
-  #header #toggle-label {
-    display: block;
-  }
-}
-
-#footer {
-  display: flex;
-  justify-content: space-between;
-  background-color: #000000;
-  font: 16px "Montserrat", sans-serif;
-  padding-top: 50px;
-  padding-bottom: 50px;
-}
-#footer #small-logo {
-  height: 50px;
-  width: auto;
-}
-#footer .footer-columns {
-  display: flex;
-}
-#footer .footer-columns .footer-column {
-  margin: 0 20px 20px 20px;
-}
-#footer .footer-columns .footer-column h1 {
-  margin: 0 0 16px 0;
-  font: 700 18px "Montserrat", sans-serif;
-  color: #f5ffff;
-}
-@media screen and (max-width: 400px) {
-  #footer .footer-columns .footer-column h1 {
-    font-size: 14px;
-  }
-}
-#footer .footer-columns .footer-column a {
-  text-decoration: none;
-  color: #abb3b3;
-}
-#footer .footer-columns .footer-column a:hover {
-  font-size: 17px;
-  color: #b3d1ff;
-}
-@media screen and (max-width: 400px) {
-  #footer .footer-columns .footer-column a:hover {
-    font-size: 13px;
-  }
-}
-#footer .footer-columns .footer-column ul {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-}
-@media screen and (max-width: 400px) {
-  #footer {
-    font-size: 12px;
-  }
-}
-
-#footer-stateless {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #1d60b5;
-  color: white;
-  font: 14px "Montserrat", sans-serif;
-}
-#footer-stateless a {
-  color: white;
-  text-decoration: none;
-}
-#footer-stateless a:hover {
-  font-style: italic;
-}
-#footer-stateless .smaller {
-  font-weight: 200;
-  font-size: 12px;
-}
-@media screen and (max-width: 400px) {
-  #footer-stateless .smaller {
-    font-size: 8px;
-  }
-}
-@media screen and (max-width: 400px) {
-  #footer-stateless {
-    font-size: 10px;
-  }
-}
-
-html, body {
-  margin: 0;
-  padding: 0;
-  background-color: #364040;
-  scroll-behavior: smooth;
-  font-family: sans-serif;
-}
-
-.content-spacing {
-  padding: 100px 200px;
-}
-@media screen and (max-width: 1100px) {
-  .content-spacing {
-    padding: 50px 100px;
-  }
-}
-@media screen and (max-width: 850px) {
-  .content-spacing {
-    padding: 10px 20px;
-  }
-}
-
-.ignore-vertical {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.hidden {
-  display: none;
-}
-
-.flex {
-  display: flex;
-}
-
-.inline-block {
-  display: inline-block;
-}
-
-.no-decoration {
-  text-decoration: none;
-  color: inherit;
-}
-.no-decoration:hover {
-  color: inherit;
-}
-
-#header {
-  height: 10vh;
-}
-@media screen and (max-width: 850px) {
-  #header {
-    height: 45px;
-  }
-}
-
-.dropdown {
-  position: fixed;
-  z-index: 2;
-  background: linear-gradient(to left bottom, #1d60b5, #003e86);
-  width: 100%;
-  height: 90vh;
-  -webkit-animation: drawer-open 550ms;
-  animation: drawer-open 550ms;
-  flex-direction: column;
-  align-items: center;
-}
-.dropdown .dropdown-nav-item {
-  position: relative;
-  margin-top: 50px;
-  background: -webkit-linear-gradient(#FFFFFF, #adf0ff);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  font: 600 28px "Montserrat", sans-serif;
-  text-decoration: none;
-  -webkit-animation: navbar-appear 550ms;
-  animation: navbar-appear 550ms;
-}
-.dropdown .dropdown-nav-item:first-of-type {
-  margin-top: 100px;
-}
-.dropdown .dropdown-nav-item:after {
-  content: "";
-  position: absolute;
-  width: 100%;
-  transform: scaleX(0);
-  height: 2px;
-  bottom: 0;
-  left: 0;
-  background: linear-gradient(to left, #FFF, #AFF);
-  transform-origin: bottom right;
-  transition: transform 0.25s ease-out;
-}
-.dropdown .dropdown-nav-item:hover:after {
-  transform: scaleX(1);
-  transform-origin: bottom left;
-}
-@media screen and (max-width: 850px) {
-  .dropdown {
-    height: 95vh;
-  }
-}
-
-.dropdown_close_animation {
-  -webkit-animation: drawer-close 550ms;
-  animation: drawer-close 550ms;
-}
-
-.dropdown-nav-item_close_animation {
-  -webkit-animation: navbar-disappear 550ms;
-  animation: navbar-disappear 550ms;
-}
-
-@-webkit-keyframes drawer-close {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-@keyframes drawer-close {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-@-webkit-keyframes drawer-open {
-  from {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes drawer-open {
-  from {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@-webkit-keyframes navbar-appear {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes navbar-appear {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@-webkit-keyframes navbar-disappear {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-@keyframes navbar-disappear {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-#container {
-  height: 90vh;
-  display: grid;
-  grid-template-rows: 1fr auto;
-  grid-template-columns: 1fr;
-  grid-gap: 0;
-  overflow: auto;
-}
-@media screen and (max-width: 850px) {
-  #container {
-    height: calc(100vh - 45px);
-  }
-}
-
-#content {
-  background: whitesmoke;
-  grid-column: 1;
-  grid-row: 1;
-  overflow-wrap: break-word;
-}
-
-#footer {
-  grid-column: 1;
-  grid-row: 2;
-}
-
-#footer-stateless {
-  grid-column: 1;
-  grid-row: 3;
-}
-
-/*# sourceMappingURL=main.css.map */