/* ==========

Best Internet Ads

Created: xx/xx/2013
Last updated: 09/30/25 // 5/19/2020

https://colorhunt.co/
Paleta de colores: 1.781
   
Styles menu:
   
1. Global styles:
	1.1 Styles for links
	1.2 Styles for headers
	1.3 Styles for keyframes
	1.4 Styles for header
	1.5 Styles for body
	1.6 Styles for footer
	   
2. Styles for pages:
	2.1 Styles for Index
	2.2 Styles for PubliAds
	2.3 Styles for WebAds
	2.4 Styles for DesignAds
	2.5 Styles for About
	2.6 Styles for Help
	2.7 Styles for Contact
	2.9 Styles for Terms, Privacy
	2.10 Styles for SiteMap

========== */

/* 1. Global styles */
* {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	box-sizing: border-box;
}

html, body {
	position: relative;
	width: 100%;
	height: 100%; /* This style makes html overflow hidden works on mobile */
	-webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
	scroll-behavior: smooth;
}

body {
	/* min-height: 100%; */
	overflow-x: hidden;
	font: 1.25vw Arial, Helvetica, sans-serif;
	color: #666;
	/* background-color: #6996e2;  #a6c1ee #ebebeb For browsers that do not support gradients background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);*/ 
	background-image: linear-gradient(to top, #ff9a9e 0%, #6996e2  100%); /*#a6c1ee #fbc2eb*/
	/* background-image: linear-gradient(to bottom, #aecaff, #ffbfec); */
	background-repeat: no-repeat;
	background-attachment: fixed; /* Ensures gradient stays in place *
  	background-size: cover; /* Covers entire scrollable area */
	/*margin-top: 4.75vw; /* This style moves content below the menu bar*/
}

img {
	width: auto;
	border: none;
	vertical-align: text-bottom;
}

/* 1.1 Styles for links */
a:link {
	color: #0080ff;
	text-decoration: none;
}

a:visited {
	color: #0080ff;
	text-decoration: none;
}

a:hover {
  color: #0080ff;
  text-decoration: underline;
}

a:active {
  color: #0080ff;
  text-decoration: none;
}
 
/* 1.2 Styles for headers */
h1 { 
	color: #666;
	font-weight: normal;
	text-transform: capitalize;
}

h2 {
	color: #666;
	font-weight: normal;
	text-transform: capitalize;
}

h3 {
	color: #666;
	font-weight: bolder;
	text-transform: capitalize;
}

h4 {
	color: #666;
	font-weight: normal;
	text-transform: capitalize;
}

/* 1.3 Styles for keyframes */
@-webkit-keyframes fadeIn {
	from { opacity: 0; }
  	to { opacity: 1; }
}

@keyframes fadeIn {
	from { opacity: 0; }
  	to { opacity: 1; }
}

@-webkit-keyframes mission {
	/*0% { background-image: url(images/seo.jpg); }*/
	33%  { background-image: url('images/web-development.jpg'); }
	66% { background-image: url('images/social-marketing.jpg'); }
	100% { background-image: url('images/seo-marketing.jpg'); }
}

@keyframes mission {
  /*0% { background-image: url(images/seo.jpg); }*/
  33%  { background-image: url('images/web-development.jpg'); }
  66% { background-image: url('images/social-marketing.jpg'); }
  100% { background-image: url('images/seo-marketing.jpg'); }
}

@-webkit-keyframes showSnackbar {
	from { bottom: 0; opacity: 0; } 
	to { bottom: 25px; opacity: 1; }
}

@keyframes showSnackbar {
	from { bottom: 0; opacity: 0; }
	to { bottom: 25px; opacity: 1; }
}

@-webkit-keyframes hideSnackbar {
	from { bottom: 25px; opacity: 1; } 
	to { bottom: 0; opacity: 0; }
}

@keyframes hideSnackbar {
	from { bottom: 25px; opacity: 1; }
	to { bottom: 0; opacity: 0; }
}

@-webkit-keyframes slideToRight {
	from { left: 5%; transform: translateX(0); }
  	to { left: 50%; transform: translateX(-50%); }
}

@keyframes slideToRight {
	from { left: 5%; transform: translateX(0); }
  	to { left: 50%; transform: translateX(-50%); }
}

@-webkit-keyframes slideToLeft {
	from { right: 5%; transform: translateX(0); }
  	to { right: 50%; transform: translateX(50%); }
}

@keyframes slideToLeft {
	from { right: 5%; transform: translateX(0); }
  	to { right: 50%; transform: translateX(50%); }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Styles for ??? */
.capital-letters {
	text-transform: uppercase;
}

.lower-letters {
	text-transform: lowercase;
}

/* 1.4 Styles for header */
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: none;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 888888;
}

.gridContainer {
	width: 100%;
}

.gridWrapper {
	overflow: hidden;
}

.gridHeader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: transparent; /*#fff*/
	/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
	z-index: 999999;
}

.divTopMenuTable {
	width: 100%;
	visibility: hidden;
	background-color: transparent;
	background-image: none;
	background-repeat: no-repeat;
	background-attachment: fixed; /* Use scroll instead of fixed */
	/* box-shadow: none; */
	transition: background-color 0.3s ease-out; /* box-shadow 0.3s ease-out */
}

.divTopMenuTable.top-menu-scrolled {
	background-color: #6996e2; /*  rgb(105, 150, 226, 0.9) rgb(166, 193, 238, 0.9) #6996e2 #a6c1ee #19376D  rgb(255, 255, 255, 0.7)*/
	background-image: linear-gradient(to top, #ff9a9e 0%, #6996e2  100%);
	/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) !important; */
}

.divTopMenuTable.visible {
	visibility: visible;
	/* transition: visibility 0.3s ease-out; */
}

/* 1.6 Styles for footer */
.gridFooter {
	display: -webkit-flex; /* Safari */
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
	flex-direction: row;
	width: 100%;
	background-color: transparent; /*#2C3333;*?
	/* border: 2px solid red; */
}

.gridFooter > div {
	padding: 1.5%;
	font-size: 1.125vw;
	color: white;
	/* border: 2px solid blue; */
}

.gridFooter > div:nth-child(1) {
	width: 33.33%;
	text-align: center;
}

.gridFooter > div:nth-child(2) {
	width: 33.33%;
	text-align: center;
}

.gridFooter > div:nth-child(3) {
	width: 33.33%;
	text-align: center;
}

.gridFooter > div:nth-child(4) {
	width: 33.33%;
	text-align: left;
}

.gridFooter > div:nth-child(5) {
	width: 33.33%;
	text-align: center;
}

.gridFooter > div:nth-child(6) {
	width: 33.33%;
	text-align: right;
}

.gridFooter > div:nth-child(7) {
	width: 99.99%;
	padding: 1.75%;
	border-top: 1px solid white;
	font-size: 1vw;
	text-align: center;
}

.gridFooter > div .divSiteMap {
	width: 35%;
	margin: 0 auto;
	/* border: 2px solid yellow; */
	text-align: left;
}

.gridFooter > div .divSiteMap a {
	display: block;
	width: fit-content;
	line-height: 1.6;
	margin-bottom: 8px;
	color: white;
	text-decoration: none;
}

.gridFooter > div .divSiteMap a:hover {
	text-decoration: underline;	
}

.gridFooter > div .divSiteMap a:active {
	text-decoration: none;
} 

.gridFooter h3 {
	margin-bottom: 8px; /* 1.75% */
	color: white;
	/* border: 2px solid green; */
}

/* .gridFooter a.miniSitemap {
	display: block;
	width: fit-content;
	margin: 0 auto 0.75% auto;
	border: 1px solid red;
	font-weight: normal;
	text-align: center;
	text-transform: capitalize;
	text-decoration: none;
	color: white;
	/* transition-duration: 0.4s; *
} */

/* .gridFooter a.miniSitemap:hover {
	/* color: #ebebeb; *
	text-decoration: underline;
}

.gridFooter a.miniSitemap:active {
	text-decoration: none;
} */

.gridFooter .fa-facebook,
.gridFooter .fa-instagram {
	margin-left: 2.25%;
	font-size: 2.125vw;
	color: white;
}

.gridFooter img[src="images/x-logo.png"] {
	width: 6.5%;
	margin-left: 2.25%;
	vertical-align: text-bottom;
}

#subscribeWrapper {
	position: relative;
	display: -webkit-flex; /* Safari */
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
	flex-direction: row;
	width: 100%;
}

#subscribeEmail {
	width: 70%;
	padding: 2.25%;
	font-size: 1.125vw;
	color: white;
	border: 1px solid white;
	background-color: transparent;
	border-radius: 5px 0 0 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
  	appearance: none;
}

#subscribeEmail::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: white;
}

#subscribeEmail::-moz-placeholder, /* Firefox 19+ */
#subscribeEmail:-moz-placeholder { /* Firefox 18- */
	color: white;
}
	
#subscribeEmail::-ms-input-placeholder,
#subscribeEmail:-ms-input-placeholder { /* Internet Explorer 10-11,  Microsoft Edge */
	color: white;
}

#subscribeButton {
	width: 30%;
	padding: 2.25%;
	font-size: 1.125vw;
	color: white; /*#2C3333;*/
	background-color: transparent; /*white;*/
	text-align: center;
	border-top: 1px solid white;
	border-right: 1px solid white;
	border-bottom: 1px solid white;
	border-left: none;
	border-radius: 0 5px 5px 0;
	cursor: pointer;
	transition-duration: 0.4s;
}

#subscribeButton:hover {
	background-color: transparent;
	color: white;
}

#subscribeAlert {
	display: none;
	padding-top: 1.5%;
	/* border: 1px solid red; */
	color: red;
	text-align: left;
}

#snackbar {
	visibility: hidden;
	min-width: 25%;
	color: white;
	text-align: center;
	border-radius: 5px;
	padding: 16px;
	position: fixed;
	z-index: 999999;
	left: 50%;
	transform: translateX(-50%);
	bottom: 25px;
	font-size: 1.5vw;
}

.snackbarGreen {
	background-color: #33CC66;
}

.snackbarRed {
	background-color: #E86F68;
}

#snackbar.show {
	visibility: visible;
	-webkit-animation: showSnackbar 0.5s, hideSnackbar 0.5s 2.5s;
	animation: showSnackbar 0.5s, hideSnackbar 0.5s 2.5s;
}

.divTable {
	width: 100%;
	display: table;
	table-layout: fixed; /* Set columns with equal widths */
}

.divTableCaption {
	display: table-caption;
}

.divCaptionTop {
	caption-side: top;
}

.divTableHead {
	display: table-header-group;
}

.divTableBody {
	display: table-row-group;
}

.divTableRow {
	display: table-row;
}

.divTableCell {
	display: table-cell;
}

/* Styles for basic layout */
.divTableFooter {
	display: table-footer-group;
}

/* Styles for horizontal menu */
.divHorizontalCell {
	position: relative;
	width: auto;
	padding: 0.75% 0; /*1% 0*/
	font-size: 1.35vw;
	font-weight: normal;
	text-transform: capitalize;
	text-align: center;
	vertical-align: middle;
	/*background-color: #19376D; /* #19376D #666*/
	/* border: 5px solid red; */
}

.divHorizontalCell a {
	color: white; 
	text-decoration: none;
}

.divHorizontalCell a:hover {
	color: #ebebeb; 
	text-decoration: none;
}

.divHorizontalCell img[src="images/logo_round.png"] {
	width: 30%; /*25%*/
	height: auto;
	vertical-align: middle;
}

/* Styles for vertical menu */
.side-menu {
	display: none;
	flex-direction: column;
	overflow: hidden;
  	transition: height 0.5s ease;
  	height: auto;
  	max-height: 100vh;
  	/* border: 5px solid red; */
	background-color: transparent; /*#a6c1ee #fbc2eb*/
	/* background-color: #a6c1ee; /* For browsers that do not support gradients */
	/* background-image: linear-gradient(to bottom, #aecaff, #ffbfec); background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%); */
	background-image: none;
	background-repeat: no-repeat;
	background-attachment: fixed; /* Use scroll instead of fixed */
	transition: 0.3s ease-out;
}

/* Collapsed: only first child visible */
.side-menu.collapsed {
	height: auto;
}

.menu-item.first {
	/* background-color: #6996e2; */
	transition: background-color 0.3s ease;
}

/* Collapse all except first */
.side-menu.collapsed .menu-item:not(.first) {
  height: 0;
  padding: 0;
  border: none;
  overflow: hidden;
}

/* Expanded: full viewport height */
.side-menu.expanded {
	height: 100vh;
}

/* Change vertical menu background color on scroll */
.side-menu.side-menu-scrolled {
	background-color: #6996e2;
	background-image: linear-gradient(to top, #ff9a9e 0%, #6996e2  100%);
}

.menu-item {
	position: relative;
	/* border: 5px solid blue; */
	padding: 2%; /* 1em */
	font-size: 3.75vw;
	font-weight: normal;
	text-transform: capitalize;
	text-align: center;
	vertical-align: middle;
	transition: height 0.3s ease, padding 0.3s ease;
	flex-shrink: 0;
}

.menu-item a {
	color: white; 
	text-decoration: none;
}

.menu-item a:hover {
	color: #ebebeb; 
	text-decoration: none;
}

.menu-item:first-of-type img {
	width: 15%;
	height: auto;
	vertical-align: middle;
}

.menu-item:nth-of-type(2) {
	padding-top: 4%;
}

.menu-item button {
   	position: absolute;
    top: 50%;
	transform: translateY(-50%);
    left: 3%;
	z-index: 2;
	font-size: 8vw;
	color: white;
	background-color: transparent;
	cursor: pointer;
}

.menu-item hr { 
	height: 1px;
	border-width: 0;
	color: #fff;
	background-color: #fff;
}

.divAdsTable .divTableBody .divTableRow:nth-child(1) .divAdsCell:only-child {
	display: block;
	text-align: center;
	padding: 1% 0;
	/* border: 1px solid red; */
}

.divAdsTable .divTableBody .divTableRow:nth-child(2) .divAdsCell:only-child {
	display: none;
	text-align: center;
	padding: 1% 0;
	/* border: 1px solid blue; */
}

.divBannerCell {
	font-size: 2vw;
	text-align: center;
	padding: 1% 0;
}

.divTable .divTableBody .divTableRow:nth-child(1) .divBannerCell:only-child {
	display: block;
	height: 90px;
}

.divTable .divTableBody .divTableRow:nth-child(2) .divBannerCell:only-child {
	display: none;
}

/* .divBodyTable {
	*margin-top: 6.5vw; * 6vw *
	border: 5px solid green;
} */

/* 1.6 Styles for footer */
.divSocialTable { 
	width: 15%;
	margin: 0 auto;
}

.divSocialTable .divTableBody .divTableRow .divFootCell {
	padding: 2.5%;
	text-align: center;
}

.divContactTable2 .divTableBody .divTableRow:nth-child(2) .divFootCell:only-child { /**** Rename this table *****/
	padding: 0;
}

.divAuthorTable {
	width: 100%;
	position: relative;
}

#divAnchorBox {
	width: auto;
	height: auto;
	position: fixed;
	right: 25px;
	bottom: 25px;
	z-index: 1;
	cursor: pointer;
	z-index: 555555;
}

#divAnchorBox IMG {
	width: auto;
	height: auto;
	vertical-align: bottom;
	opacity: 0.6;
	-webkit-filter: drop-shadow(2px 2px 2px #222);
  	filter: drop-shadow(2px 2px 2px #222);
}

#divChatBox {
	width: 5.5%;
	position: fixed;
	left: 25px;
	bottom: 25px;
	z-index: 555555 !important;
}

#divChatBox IMG {
	width: 100%;
	height: auto;
	vertical-align: text-bottom;
	opacity: 0.8;
	cursor: pointer;
}

.divChatTable .divTableBody .divTableRow .divTableCell IMG {
	width: auto;
	vertical-align: bottom;
	opacity: 0.7;
	-webkit-filter: drop-shadow(2px 2px 2px #222);
  	filter: drop-shadow(2px 2px 2px #222);
}

.divFootCell {
	width: auto;
	padding: 0.5%;
	font-size: 1vw;
	text-align: center;
}

.divFootCell a {
	color: white; /*#666*/
	text-decoration: none;
}

.divFootCell a:hover {
	color: white; /*#666*/
	text-decoration: underline;
}

#phplive_btn_1373998355 IMG { /* Put this style in images */
	width: 15.25%;
}

#google_translate_element div { /* Google Translate box */
	/* text-align: center; */
	/* margin: 0 auto; */
	position: relative;
	font-size: .8vw;
	box-sizing: border-box;
	color: white;
	/* border: 1px solid red; */
}

#google_translate_element div div { /* div wrapping select */
	box-sizing: border-box;
}

#google_translate_element select { /* Google Translate select */
	width: auto;
	padding: 0 2%; /*1.125%*/
	/* border: 1px solid white; */
	/* border-radius: 5px; */
	overflow: hidden;
	box-sizing: border-box;
	font-size: 1.125vw;
	color: white; /*#666*/
	background-color: transparent;
	-webkit-appearance: none; /* Here's the code we need to hide arrow */
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;	
}

#google_translate_element select option {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: #666;
}

#google_translate_element span { /* Google Translate image and link box */
    /* border: 1px solid green; */
	color: white;
}

#google_translate_element span IMG { /* Google Translate image */
	width: auto; /*2.75%*/
	
}

#google_translate_element span a { /* Google Translate link */
	font-size: .9vw;
	color: white;
}

#google_translate_element div div:after { /* Google Translate arrow */
	font-family: FontAwesome;
  	content: '\f107';
  	font-size: 1.5vw;
  	position: absolute;
  	top: 50%;
	transform: translateY(-50%);
  	right: 3%;
  	color: white; /*#666*/
  	pointer-events: none;
}

#siteseal IMG {
	width: 9.75%;
	vertical-align: middle;
}

/* 2. Styles for pages */

/* 2.1 Styles for Index */
.divMissionTable {
	width: 100%;
	/* margin-top: calc(6.5vw + 2%); */
	/* border: 5px solid blue;	 */
}

.divMissionCell {
	width: 100%;
	/* padding-bottom: 1%; */
	font-size: 1.75vw;
	/* border: 5px solid red; */
}

.divMissionContainer {
	position: relative;
	background-image: url('images/seo-marketing.jpg');
	background-attachment: scroll;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/* border: 5px solid blue; */
	/* border-radius: 4px; */
	/* color: white; */
	padding: 20% 0;
	width: 100%;
	/* opacity: 0; */
	-webkit-animation-name: fadeIn, mission; /* Safari 4.0 - 8.0 */
  	animation-name: fadeIn, mission;
	-webkit-animation-duration: 0.8s, 10s;
  	animation-duration: 0.8s, 10s;
	-webkit-animation-delay: 1s, 2s;
	animation-delay: 1s, 2s;
	-webkit-animation-timing-function: ease-in-out, ease-in-out;
	animation-timing-function: ease-in-out, ease-in-out;
	-webkit-animation-iteration-count: 1, infinite;
	animation-iteration-count: 1, infinite;
	-webkit-animation-play-state: running;
	animation-play-state: running;
	-webkit-animation-fill-mode: forwards, none;
	animation-fill-mode: forwards, none;
}

.divMissionContainer:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

.divMissionInner {
	position: absolute;
	width: 75%;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	text-align: center;
	line-height: 1.5;
	z-index: 1;
}

.divMissionInner h1 {
	font-size: 3vw;
	font-weight: bold;
	color: white;
}

.divMissionInner h2 {
	font-size: 2.25vw; /*1.5vw*/
	font-weight: normal;
	color: white;
}

/* .divIndexCell {
	border: 1px solid red;
} */

.divClientsTable {
	width: 100%;
	background-color: white; /* #D7BBF5 #CEEFFD */
}

.divClientsCaption {
	/* border: 5px solid blue; */
	padding: 1.5%;
	background-color: white; /* #D7BBF5 */
	text-align: center;
}

.divClientsCaption h2 {
	font-size: 2.75vw;
	color: #666; /* #A076F9 */
}

.divClientsCell {
	padding: 1.5%;
	text-align: center;
	/* color: #A076F9;
	font-weight: bold; */
}

.divClientsCell img {
	vertical-align: middle;
}

.divClientsCell img[src="images/logo_ysabel.png"] {
	width: 85%;
	height: auto;
}

.divClientsCell img[src="images/logo_forage.png"] {
	width: 45%;
	height: auto;
}

.divClientsCell img[src="images/logo_mantaray.png"] {
	width: 85%;
	height: auto;
}

.divClientsCell img[src="images/logo_wog.png"] {
	width: 45%;
	height: auto;
}

.divClientsCell img[src="images/logo_mind.png"] {
	width: 45%;
	height: auto;
}

.divClientsCell img[src="images/logo_iplay.png"] {
	width: 60%;
	height: auto;
}

.divClientsCell img[src="images/logo_sinet.png"] {
	width: 45%;
	height: auto;
}

.divClientsCell img[src="images/logo_fashon.png"] {
	width: 80%;
	height: auto;
}

.divIndexTable { width: 100%; }

.divIndexContainer {
	display: table;
	width: 100%;
	border-collapse: separate;
	border-spacing: 20px;
	/* box-sizing: border-box; */
	/* border: 5px solid red; */
}

.divIndexBox {
	display: table-cell;
	width: 30%;
	padding: 4%;
	border-radius: 10px;
	font-size: 1.25vw;
	text-align: center;
	background-color: white;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;	
}

.divIndexBox:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.divIndexBox img {
	width: 25%;
	height: auto;
	margin: 10%;
}

.divIndexBox h1 {
	font-size: 2.25vw;
	color: #0080ff;
}

.divIndexBox h2 {
	/* margin-bottom: 5px; */
	color: #444;
}

.divIndexBox h4 {
	color: #555;
}

.divServiceDescription {
	width: 100%;
	text-align: left;
}

.divServiceDescription ul {
	/* list-style: none; */
	margin-left: 0;
	padding-left: 20px;
	color: #888;
}

.divIndexBox a {
	color: #4477d5; /*#0066cc*/
	/* line-height: 1.5; */
}

.divIndexBox .fa-angle-right {
	color: #4477d5; /*#0066cc*/
	font-size: 1.25vw;
	/* line-height: 1.5; */
	vertical-align: baseline;
}

/* 2.5 Styles for About */
.divAboutTable {
	width: auto; /* calc(100% - 4%) */
	margin: 8.5% 2% 0 2%; /* margin: calc(6.5vw + 2%) 2% 2% 2%; */
}

.divAboutCell {
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: top;
}

.divTable .divTableBody .divTableRow:nth-child(1) .divAboutCell:only-child {
	padding: 0 0 1% 0;
	/* border: 5px solid red; */
}

.divTable .divTableBody .divTableRow:nth-child(2) .divAboutCell:only-child {
	padding: 1% 0 1% 0;
	/* border: 5px solid purple; */
}

.divTable .divTableBody .divTableRow:nth-child(3) .divAboutCell:only-child {
	padding: 1% 0 2% 0;
	/* border: 5px solid green; */
}

.weAreContainer {
	padding: 5% 10%;
	/* border: 5px solid orange; */
	background-color: white;
}

.weAreContainer h1 {
	margin-bottom: 0.25%;
	font-size: 6vw;
	font-weight: 900;
	text-transform: capitalize;
	background-color: #4158D0;
	background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
	background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;	
}

.weAreContainer h2 {
	font-size: 3vw;
	font-weight: 900;
	text-transform: capitalize;
	color: #222;
}

.weAreContainer p {
	font-size: 1.5vw;
	color: #222;
}

.companyContainer {
	width: 100%;
	/* border: 5px solid orange; */
	/* padding: 5%; */
	background-image: url('images/about.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
}

.companyBox {
	width: 100%;
	font-size: 1.5vw;
	color: white;
	text-align: left;
	padding: 5%;
	/* border: 5px solid white; */
	background-color: rgba(0, 0, 0, 0.5);
}

.companyBox h1 {
	text-align: center;
	color: white;
}

.companyBox a {
	color: white;
	text-decoration: underline;
}

.companyBox a:hover {
	text-decoration: none;
}

.companyBox a:active {
	text-decoration: underline;
}

.cardsContainer {
	width: 100%;
	display: table;
	/* padding: 0 5% 5% 5%; */
	/* border: 5px solid orange; */
	background-color: #222;
}

.cardsContainer a {
	color: white;
	text-decoration: underline;
}

.cardsContainer a:hover {
	text-decoration: none;
}

.cardsContainer a:active {
	text-decoration: underline;
}

.cardsContainer > h1 {
	display: table-caption;
	caption-side: top;
	width: 100%;
	padding: 2.5%;
	text-align: center;
	font-size: 2.5vw;
	color: white;
	/* border: 5px solid orange; */
	background-color: #222;
}

.cardLeftBox {
	width: 50%;
	display: table-cell;
	padding: 0 2.5% 5% 5%;
}

.cardRightBox {
	width: 50%;
	display: table-cell;
	padding: 0 5% 5% 2.5%;
}

/* Styles for Flip Card */
.flip-card {
	background-color: transparent;
	width: 100%;
	height: 100%;
	perspective: 1000px; /* Remove this if you don't want the 3D effect */
	/* border: 5px solid red; */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: left;
	transition: transform 0.8s;
	transform-style: preserve-3d;
	/* border: 5px solid blue; */
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
	/* position: absolute; */
	width: 100%;
	height: 100%;
	border-radius: 5px;
	transform: rotateX(0deg); /* This style fixes the bug of not hiding the back face */
	-webkit-backface-visibility: hidden; /* Safari */
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
	position: relative;
	background-color: #bbb;
	color: black;
}

/* Style the back side */
.flip-card-back {
	position: absolute;
	top: 0;
	left: 0;
	padding: 5%;
	font-size: 1vw;
	color: white;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
	overflow: hidden;
}

.flip-card-back1 { background: linear-gradient(-45deg, #24ff72, #9a4eff); }

.flip-card-back2 { background: linear-gradient(-45deg, #f321d7, #ffec61); }

.flip-card-back h3,
.flip-card-back h4 {
	text-align: center;
	color: white;
	font-weight: normal;
}

.flip-card-back h3 {
  font-size: 1.8em; /* 1.8 times the container font size */
}

.flip-card-back h4 {
  font-size: 1.4em; /* 1.4 times the container font size */
}

.flip-card-back a {
	color: white;
	text-decoration: underline;
}

.divWarningText {
	position: absolute;
	top: 0;
	left: 0;
    width: 100%;
    height: 100%;
	padding: 5%;
	border: none;
	background-color: rgba(0, 0, 0, 0.7);
}

/* Styles for Flip Card */
.divWarningText p {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 5%;
	right: 5%;
}

/* Styles for Profile Card */
.card {
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	padding: 5%;
	border-radius: 5px;
	font-size: 1vw;
	text-align: center;
	line-height: 2.5em;
}

.card1 { background: linear-gradient(-45deg, #24ff72, #9a4eff); /* background: linear-gradient(to right, #fc466b, #3f5efb); */ }

.card2 { background: linear-gradient(-45deg, #f321d7, #ffec61); }

.card img {
	width: 40%;
	height: auto;
	border-radius: 50%;
}

.social_media {
	display: flex;
	gap: 0.5rem; /* Adjust as needed: 0.5rem = 8px */
	flex-wrap: wrap; /* Optional: allows wrapping on smaller screens */
	justify-content: center;
}

.social_media a {
	font-size: 2vw;
	text-decoration: none;
}

.social_media a:hover {
	opacity: 0.7;
}

.social_media i {
	font-size: 2vw;
	color: white; /*#0080ff*/
	vertical-align: middle;
}

.social_media img {
	width: 85%; /*4.5%*/
	color: white;
	border-radius: 0;
	vertical-align: middle;
}

.contact_tab {
	width: fit-content;
	padding: 1.5%;
	font-size: 1.25vw;
	color: white;
	text-align: center;
	background-color: transparent;
	cursor: pointer;
}

.contact_tab:hover { opacity: 0.7; }

.card h3,
.card h4,
.card p {
	font-weight: normal;
	color: white;
}

.card h3 {
  font-size: 1.8em; /* 1.8 times the container font size */
}

.card h4 {
  font-size: 1.4em; /* 1.4 times the container font size */
}

.card p {
  font-size: 1.4em; /* 1.4 times the container font size */
}

/* 2.9 Styles for Terms, Privacy, Sitemap */
.divNeutralTable {
	width: 96%; /* (100% - 4%) */
	margin: 8.5% 2% 2% 2%; /* calc(6.5vw + 2%) 2% 2% 2% */
	background-color: white;
	/* border: 5px solid red; */
}

.divNeutralCell {
	padding: 5%;
}

.divCenterContainer {
	text-align: left;
	background-color: white;
	font-size: 1.25vw;
	/* border: 5px solid blue; */
}

.divCenterContainer h1 {
	font-size: 3.5vw;
	font-weight: bold;
	color: black;
}

.divCenterContainer h2 {
	color: #2C3333;
}

.divCenterContainer ul {
	list-style: none;
	line-height: 1.5;
}

/* 2.6 Styles for Help */
.divHelpTable {
	width: auto; /* calc(100% - 4%) */
	margin: 8.5% 2% 2% 2%; /* margin: calc(6.5vw + 2%) 2% 2% 2% */
}

.divHelpCell {
	background-image: url('images/help.jpg');
	background-attachment: scroll;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Styles for accordion */
.accordion { 
	color: white;
    background-color: rgba(0, 0, 0, 0.6);
	font-size: 1.25vw;
    cursor: pointer;
	width: 100%;
	text-align: left;
    padding: 1.5%;
    border: none;
	border-radius: 0px;
    outline: none;
    /*transition: 0.4s;*/
}

.accordion:first-of-type {
	border-radius: 5px 5px 0 0;
}

.accordion-before {
	border-radius: 0 0 5px 5px;
}

.accordion-after {
	border-radius: 0px;
}

.active, .accordion:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.accordion:after {
    content: '\002B'; /* Unicode character for "plus" sign (+) */
    color: white;
	font-size: 1.5vw;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212"; /* Unicode character for "minus" sign (-) */
}

.panel {
	font-size: 1.25vw;
    padding: 0 1.5%;
	color: white;
    background-color: rgba(0, 0, 0, 0.6);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.panel-before {
	border-radius: 0;
}

.panel-after {
	border-radius: 0 0 5px 5px;
}

.panel p { /* Styles for accordion */
	padding-top: 1.5%;
	padding-bottom: 1.5%;
}

/* 2.7 Styles for Contact */
.contact-container {
	display: -webkit-flex; /* Safari */
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
	flex-direction: row;
	gap: 4%; /* clamp(1rem, 2vw, 2rem) */
	width: 100%; /* max-width: calc(100% - 4%); */
	margin: 8.5% 0 2% 0;
	/* margin-bottom: 2%;
	margin-left: 0; */
	padding: 2%;
	font-size: 1.25vw;
	color: #666;
	background-color: white; /*#ebebeb*/
}

.contact-row:nth-child(1) {
	width: 100%;
}

.contact-row:nth-child(2) {
	width: 48%;
}

.contact-row:nth-child(3) {
	width: 48%;
}

.contact-row h1 {
	font-size: 2.75em;
	font-weight: bold;
	color: #444;
}

.contact-item {
	padding: 1.5% 0;
}

.contact-item:nth-child(7) {
	text-align: center;
}


.contact-item:nth-child(8) {
	text-align: center;
}

.contact-item i {
	font-size: 1.2em;
	margin-right: 2.5%;
	color: #666;
}

.contact-item a {
	color: #4477d5;
}

.contact-alert {
	display: none;
	text-align: center;
	color: red;
}

.g-recaptcha {
	display: inline-block;
}

.submit-wrapper {
	position: relative;
	width: auto;
	height: auto;
	text-align: center;
	margin: 0 auto;
	padding: 0;
	border: none;
}

#contact-form label.js-field {
    display: block;
    width: 100%;
	margin: 0 auto;
    position: relative;
}

#contact-form label.js-field span {
    position: absolute;
    display: block;
	top: 50%;
	transform: translateY(-50%);
	background-color: transparent;
	padding-left: 1.5%;
	padding-right: 1.5%;
	color: #666;
	font-size: 1.25vw;
    transition: .3s ease;
}

#contact-form input + span.test1 {
	transform: translateY(-50%);
	font-size: 1.25vw;	
}

#contact-form input + span.test2 {
	transform: translateY(-150%);
	font-size: 1.25vw;	
}

#contact-name,
#contact-email {
	width: 100%;
	padding: 1.5%;
	font-size: 1.25vw;
	color: #666;
	border-bottom: 1px solid #666;
	background-color: transparent;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
  	appearance: none;
}

#contact-question {
	width: 100%;
	padding: 1.5%;
	font-size: 1.25vw;
	color: #666;
	border: 1px solid #666;
	border-radius: 5px;
	background-color: transparent;
	vertical-align: text-bottom;
	resize: none;
	-webkit-appearance: none;
	-moz-appearance: none;
  	appearance: none;
}

#contact-name::placeholder,
#contact-email::placeholder,
#contact-question::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	font-size: 1.25vw;
	color: #666;
}
	
#contact-name::-ms-input-placeholder,
#contact-email::-ms-input-placeholder,
#contact-question::-ms-input-placeholder { /* Internet Explorer 10-11,  Microsoft Edge */
	font-size: 1.25vw;
	color: #666;
}

#contact-submit {
	width: 100%;
	background-color: #4477d5; /*#0080ff*/
	border: 2px solid #4477d5 ; /*#0080ff*/
	border-radius: 50px;
	color: #fff;
	padding: 0.75em 1.25em;
	text-align: center;
	text-decoration: none;
	font-size: 1.5vw;
	font-weight: normal;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	cursor: pointer;
  	-webkit-appearance: none;
  	-moz-appearance: none;
  	appearance: none;
}

#contact-submit:hover {
	color: #4477d5; /*#0080ff*/
	background-color: transparent;
}

.loader {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 1.125%;
	margin-top: -22.5px;
	border: 5px solid #f3f3f3; /* Light grey */
	border-top: 5px solid dodgerblue; /* Blue */
	border-radius: 50%;
	width: 45px;
	height: 45px;
	visibility: hidden;
	animation: spin 1s linear infinite;
}

/* 2.2 Styles for PubliAds */
.divPubliAdsTable {
	width: auto;
	margin: 8.5% 2% 2% 2%; /* calc(6.5vw + 2%) 2% 2% 2% */
}

/* .divPubliAdsCell {
	width: 100%;
} */

.divPubliAdsTable .divTableBody .divTableRow:nth-child(1) .divPubliAdsCell:only-child {
	padding: 0 0 1% 0;
}

.divPubliAdsTable .divTableBody .divTableRow:nth-child(2) .divPubliAdsCell:only-child {
	padding: 1% 0 1% 0;
}

.divPubliAdsTable .divTableBody .divTableRow:nth-child(3) .divPubliAdsCell:only-child {
	padding: 1% 0 0 0;
}

.divAnimationCell {
	width: 100%;
	height: 100%;
	padding: 1%;
	text-align: center;
	vertical-align: top;
}

.divTable .divTableBody .divTableRow:only-child .divAnimationCell:only-child {
	padding: 0.5% 1% 0 1%;
}

.divAnimationCell IMG {
	width: 100%;
}

.divSearchContainer { /* Styles for SEO */
	width: 100%;
	/* border: 1px solid #999; */
	/* box-sizing: border-box; */
	opacity: 0;
	-webkit-animation-name: fadeIn;
  	animation-name: fadeIn;
	-webkit-animation-duration: 0.8s;
  	animation-duration: 0.8s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-webkit-animation-play-state: running;
	animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.divSearchImageBox {
	width: 100%;
	/* box-sizing: border-box; */
}

.divSearchImageBox img {
	width: 100%;
	height: auto;
	vertical-align: text-bottom;
}

.divSearchContainer .divSearchImageBox:nth-child(2) {
	display: none;
}

.divSearchContainer .divSearchImageBox:nth-child(5) {
	display: none;
}

.divContentContainer {
	display: table;
	font-size: 1.25vw;
	/* box-sizing: border-box; */
}

.divContentLeft {
	display: table-cell;
	width: 66%;
	padding: 2.5%;
	background-color: white;
	color: #4B494A;;
}

.divContentLeftBox {
	width: 100%;
	box-sizing: border-box;
}

#results {
	display: block;
	margin-bottom: 3%;
}
	
.logo_link {
	font-size: 3vw;
	margin-bottom: 3%;
	vertical-align: middle;
	display: none;
}

.logo_link a {
	cursor: pointer;
}

.logo_link img {
	width: auto;
	height: auto;
	padding-right: 2%;
}
	
.text_link {
	display: block;
	cursor: pointer;
}

.divContentLeftBox a {
	color: #4B494A;
	text-decoration: none;
}

.fa-angle-right {
	color: #4B494A;
	font-size: 1vw;
}

.fa-caret-down {
	color: #4B494A;
	margin-left: 0.25%;
}

.divContentLeftBox h1 {
	color: #21147E;
}

.divContentLeftBox h1 a {
	color: #1558D6;
	text-decoration: none;
	cursor: pointer;
}

.divContentLeftBox h1 a:hover {
	text-decoration: underline;
}

.divContentLeftBox h2 {
	color: #4B494A;
}

.divContentLeftBox h3 {
	color: #4B494A;
	font-weight: normal;
}

.divContentLeftBox ul {
	padding-left: 2.5%;
}

.divContentRight {
	display: table-cell;
	width: 34%;
	background-color: white;
}

.divContentRight img { /* Styles for SEO */
	width: 100%;
	height: auto;
	vertical-align: top;
}

.divSEMContainer { /* Styles for SEM */
	position: relative;
	width: 100%;
	/* border: 1px solid #999; */
	opacity: 0;
	-webkit-animation-name: fadeIn;
  	animation-name: fadeIn;
	-webkit-animation-duration: 0.8s;
  	animation-duration: 0.8s;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-webkit-animation-play-state: running;
	animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.divSEMHeader {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

.divSEMHeader img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	box-sizing: border-box;
}

.divSEMHeader img:nth-child(1) {
	display: block;
}

.divSEMHeader img:nth-child(2) {
	display: none;
}

.divSEMContent {
	display: table;
	width: 100%;
	padding-top: 4.8%;
	box-sizing: border-box;
}

.divLeftContent {
	border-right: 1px solid #D6D6D6;
	/* border-bottom: 1px solid #D6D6D6; */
	border-left: none;
	display: table-cell;
	width: 30%;
	/* box-sizing: border-box; */
	font-size: 1.25vw;
	padding: 2%;
	background-color: #F5F5F5;
}

.divLeftContent h1 {
	font-size: 1.9vw;
	color: #666;
}

.divLeftContent h1 .fa-home {
	float: right;
	color: #0080ff;	
}

.divLeftContent hr {
	height: 1px;
	border-width: 0;
	color: #D6D6D6;
	background-color: #D6D6D6;
}

.divLeftContent ul {
	list-style-type: none;
}

.divRightContent {
	display: table-cell;
	width: 70%;
	/* box-sizing: border-box; */
	vertical-align: top;
}

.divRightContentImage {
	width: 100%;
}

.divRightContentImage img {
	width: 100%;
	height: auto;
	vertical-align: text-bottom;
}

.divRightContentTable {
	width: 100%;
	background-color: white;
}

.divRightContentTable h1 {
	padding: 2%;
	border-top: 1px solid #DBDBDB;
	border-bottom: 2px solid #838288;
	font-size: 1.25vw;
	font-weight: bold;
}

.divRightContentTable ul {
	list-style-type: none;
	font-size: 1.25vw;
}

.divRightContentTable ul li {
	padding: 1.25%;
	border-bottom: 1px solid #DBDBDB;
	color: #0080ff;
}

.divRightContentTable ul li:last-child {
	border-bottom: none;
}

.divRightContentTable ul li:hover { /* Styles for SEM */
	background-color: #F5F5F5;
}

.divSMMContainer { /* Styles for SMM */
	width: 100%;
	/* border: 1px solid #999; */
	/* box-sizing: border-box; */
	background-color: white;
	opacity: 0;
	-webkit-animation-name: fadeIn;
  	animation-name: fadeIn;
	-webkit-animation-duration: 0.8s;
  	animation-duration: 0.8s;
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-webkit-animation-play-state: running;
	animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.divSMMHeader {
	display: table;
	width: 100%;
	box-sizing: border-box;	
}

.divSMMHeader div:nth-child(1) {
	display: table-cell;
	width: 10%;
	padding: 1%;
	text-align: center;
}

.divSMMHeader div:nth-child(1) IMG {
	width: 100%;
	height: auto;
	cursor: pointer;
}

.divSMMHeader div:nth-child(2) {
	display: table-cell;
	width: 80%;
	padding: 1%;
	color: #212121;
	vertical-align: middle;
}

.divSMMHeader div:nth-child(2) a {
	color: #212121;
	text-decoration: none;
}

.divSMMHeader div:nth-child(2) h1 {
	font-size: 1.75vw;
	font-weight: bold;
	color: #212121;
}

.divSMMHeader div:nth-child(2) h2 {
	font-size: 1.5vw;
	font-weight: normal;
	color: #212121;
}

.divSMMHeader div:nth-child(3) {
	display: table-cell;
	width: 10%;
	padding: 1%;
	text-align: center;
	vertical-align: middle;
}

.divSMMHeader div:nth-child(3) .fa-ellipsis-h {
	font-size: 1.75vw;
	color: #212121;
}

.divSMMImage {
	width: 100%;
	box-sizing: border-box;
}

.divSMMImage IMG {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.divSMMSignUp {
	width: 100%;
	padding: 1.5% 4%;
	box-sizing: border-box;
	color: #0080ff;
	position: relative;
	transition: 0.5s ease-out;
}

.divSMMSignUp:hover {
	background-color: #0080ff;
}

.divSMMSignUp:hover h1 {
	color: white;
}

.divSMMSignUp:hover .fa-angle-right {
	color: white;
}

.divSMMSignUp h1 {
	display: inline;
	font-size: 1.75vw;
	color: #0080ff;
	vertical-align: middle;
}

.divSMMSignUp .fa-angle-right {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 4%;
	font-size: 2.5vw;
	color: #0080ff;
	vertical-align: middle;
	cursor: pointer;
}

.divSMMBody {
	width: 100%;
	padding: 0 4% 4% 4%;
	box-sizing: border-box;
	background-color: white;
}

.divSMMSocial {
	display: table;
	width: 100%;
	border-top: 1px solid #EFEFEF;
	box-sizing: border-box;	
}

.divSMMSocial div:nth-child(1) {
	display: table-cell;
	width: 10%;
	padding: 1% 0;
	text-align: left;
	vertical-align: middle;
}

.divSMMSocial div:nth-child(1) .fa-heart-o {
	font-size: 2.5vw;
	vertical-align: middle;
	color: #212121;
}

.divSMMSocial div:nth-child(2) {
	display: table-cell;
	width: 10%;
	padding: 1% 0;
	text-align: left;
	vertical-align: middle;	
}

.divSMMSocial div:nth-child(2) .fa-comment-o {
	font-size: 2.5vw;
	vertical-align: middle;
	color: #212121;
}

.divSMMSocial div:nth-child(3) {
	display: table-cell;
	width: 10%;
	padding: 1% 0;
	text-align: left;
	vertical-align: middle;	
}

.divSMMSocial div:nth-child(3) .fa-send-o {
	font-size: 2.5vw;
	vertical-align: middle;
	color: #212121;
}

.divSMMSocial div:nth-child(4) {
	display: table-cell;
	width: 70%;
	padding: 1% 0 1% 4%;
	text-align: right;
	vertical-align: middle;
}

.divSMMSocial div:nth-child(4) .fa-bookmark-o {
	font-size: 2.5vw;
	vertical-align: middle;
	color: #212121;
}

.divSMMContent {
	box-sizing: border-box;
	font-size: 1.25vw;
	color: #212121;
}

.bestinternetads {
	text-transform: lowercase;
}

.divSMMContent h1 {
	font-size: 1.9vw;
	color: #212121;
}

.divSMMContent ul { /* Styles for SMM */
	padding-left: 1.5%;
	margin-left: 0;
}

/* 2.3 Styles for WebAds */
.divWebAdsTable {
	position: relative;
	width: auto;
	margin: 8.5% 0 2% 0; /* calc(6.5vw + 2%) 2% 2% 2% */
}

.divWebAdsTable .divTableBody .divTableRow:nth-child(1) .divWebAdsCell:only-child {
	padding: 0 0 1% 0;
	/* border: 5px solid blue; */
}

.divWebAdsTable .divTableBody .divTableRow:nth-child(2) .divWebAdsCell:only-child {
	padding: 1% 0 1% 0;
	/* border: 5px solid red; */
}

.divWebAdsTable .divTableBody .divTableRow:nth-child(3) .divWebAdsCell:only-child {
	padding: 1% 0 0 0;
	/* border: 5px solid green; */
}




.front-end-services2 {
	display: -webkit-flex; /* Safari */
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
	flex-direction: row;

	justify-content: space-between;
	padding: 2%;         /* 2% space from left and right edges of parent */
	gap: 1%;               /* 2% space between children */


	width: 100%;
	/* padding: 2%; */
	font-size: 1.25vw; /* 1.33rem */
	color:#808080; /* #626f7f */
	background-color: white;
	border: 5px solid red;
}


/* Child 1: full width */
.front-end-service-row2:nth-child(1) {
  flex: 0 0 100%;
  margin-bottom: 2%;
  border: 5px solid blue;
}

/* Children 2–4: 3 per row */
.front-end-service-row2:nth-child(n+2):nth-child(-n+4) {
  flex: 0 0 calc((100% - 2% * 2 - 4%) / 3);
  box-sizing: border-box;
   border: 5px solid blue;
}

/* Child 5: same width as 2–4, but on its own row */
.front-end-service-row2:nth-child(5) {
  flex: 0 0 calc((100% - 2% * 2 - 4%) / 3);
  margin-top: 2%;
  box-sizing: border-box;
   border: 5px solid blue;
}

/* Children 8–9: 2 per row */
/* .front-end-service-row2:nth-child(n+8):nth-child(-n+9) {
  flex: 0 0 calc((100% - 2% - 4%) / 2); /* 2 items per row *
  box-sizing: border-box;
  border: 5px solid blue;
} */

.front-end-service-row2 h1,
.front-end-service-row2 h2 {
	color: #333;
}

.front-end-service-row2 img {
	width: 100%;
	height: auto;
	border-radius: 5px;
	vertical-align: text-bottom;
}

.front-end-service-row2 ul {
	direction: ltr;
	margin-left: 0;
	padding-left: 20px;
}


/* .front-end-service-row2:nth-child(1) {
	width: 25%;

} */

.front-end-container {
	background-color: white;
}

.front-end-services {
	display: -webkit-flex; /* Safari */
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
	flex-direction: row;
	width: 100%;
	padding: 3%;
	font-size: 1.25vw; /* 1.33rem */
	color:#808080; /* #626f7f */
	
	/* border: 5px solid red; */
	opacity: 0;
}

/* .front-end-service-row {
	border: 5px solid blue;
} */

.front-end-service-row:nth-child(1) {
	display: flex;
  	justify-content: center; /* Align to center */
	width: 100%;
}

.front-end-service-row:nth-child(2) {
	width: 48.5%;
	margin: 3% 1.5% 1.5% 0;
	text-align: right;
}

.front-end-service-row:nth-child(3) {
	width: 48.5%;
	margin: 3% 0 1.5% 1.5%;
	border-radius: 5px;
	text-align: left;
}

.front-end-service-row:nth-child(4) {
	width: 48.5%;
	margin: 1.5% 1.5% 1.5% 0;
	text-align: right;
}

.front-end-service-row:nth-child(5) {
	width: 48.5%;
	margin: 1.5% 0 1.5% 1.5%;
	text-align: left;
}

.front-end-service-row:nth-child(6) {
	width: 48.5%;
	margin: 1.5% 1.5% 0 0;
	text-align: right;
}

.front-end-service-row:nth-child(7) {
	width: 48.5%;
	margin: 1.5% 0 0 1.5%;
	text-align: left;
}

.front-end-service-row:nth-child(8) {
	width: 48.5%;
	margin: 3% 1.5% 0 0;
	text-align: right;
}

.front-end-service-row:nth-child(9) {
	width: 48.5%;
	margin: 3% 0 0 1.5%;
	text-align: left;
}

.front-end-service-row h1,
.front-end-service-row h2 {
	color: #333;
}

.front-end-service-row h1 {
	width: max-content;
	transform: translateX(-100%); /* Start off-screen left */
	font-variant: normal;
	text-align: left;
	/* border: 5px solid green; */
	animation: slideToCenter 1s ease-out forwards;
}

@keyframes slideToCenter {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
	
    transform: translateX(0);
    opacity: 1;
  }
}



.front-end-service-row h1.frontEndScrolled {
	-webkit-animation-name: slideToRight;
  	animation-name: slideToRight;
	-webkit-animation-duration: 1s;
  	animation-duration: 1s;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-webkit-animation-play-state: running;
	animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}




.front-end-service-row ul {
	direction: ltr;
	margin-left: 0;
	padding-left: 20px;
}

.front-end-service-row:nth-child(4) ul,
.front-end-service-row:nth-child(8) ul {
	direction: rtl;
	margin-right: 0;
	padding-right: 20px;
}

.front-end-service-row img {
	width: 100%;
	height: auto;
	border-radius: 5px;
	vertical-align: text-bottom;
}









.divFrontEndContainer {
	width: 100%;
	position: relative;
	background-image: url('images/frontend-development.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
}

.divFrontEndContainer:before {
	content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
	background-color: rgba(0, 128, 255, 0.5);
}

img[src="images/frontend-development.jpg"] {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.divFrontEndPicture {
	width: 50%;
	margin-right: auto;
	display: none;
}

.divFrontEndDescription {
	position: relative;
	display: table-cell;
	width: 50%;
	padding: 8% 5% 5% 5%;
	color: white;
	font-size: 1.25vw;
	/* vertical-align: top; */
	background-color: transparent;
	opacity: 0;
}

.fadeIn {
	-webkit-animation-name: fadeIn;
  	animation-name: fadeIn;
	-webkit-animation-duration: 0.8s;
  	animation-duration: 0.8s;
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-webkit-animation-play-state: running;
	animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.divFrontEndDescription h1 {
	position: absolute;
	top: 0;
	left: 5%;
	transform: translateX(0);
	width: 55%;
	padding: 1.5% 0 0 0;
	font-size: 2.5em; /*  3.5vw */
	font-weight: bold;
	font-variant: normal;
	/* font-variant-caps: small-caps; */
	text-align: center;
	color: white;
	/* text-shadow: 1px 1px 2px #000000; */
}

.divFrontEndDescription h1.frontEndScrolled {
	-webkit-animation-name: slideToRight;
  	animation-name: slideToRight;
	-webkit-animation-duration: 1s;
  	animation-duration: 1s;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-webkit-animation-play-state: running;
	animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.divFrontEndDescription h2 {
	color: white;
	font-size: 1.5vw;
	margin-bottom: 1.25%;
	font-weight: normal;
}

.divFrontEndDescription ul {
	padding-left: 2%;
	margin-left: 0;
	margin-bottom: 1.25%;
}

/* Back-End Profesional Services */
.divBackEndContainer {
	position: relative;
	width: 100%;
	background-color: #1e1e1e;
}

.divBackEndDescription {
	position: relative;
	display: table-cell;
	width: 50%;
	padding: 8% 5% 5% 5%;
	color: white;
	font-size: 1.25vw;
	opacity: 0;
}

.divBackEndDescription h1 {
	position: absolute;
	top: 0;
	right: 5%;
	transform: translateX(0);
	width: 50%;
	padding: 1.5% 0 0 0;
	color: #d4d4d4;
  	font-family: 'Courier New', monospace;
	font-size: 2.5em;
	font-weight: bold;
	font-variant-caps: small-caps;
	/* border: 5px solid red; */
	text-align: center;
	/* text-shadow: 1px 1px 2px #000000; */		
}

.divBackEndDescription h1.backEndScrolled {
	-webkit-animation-name: slideToLeft;
  	animation-name: slideToLeft;
	-webkit-animation-duration: 2s;
  	animation-duration: 2s;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-webkit-animation-play-state: running;
	animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.code-sim {
	color: #d4d4d4;
  	font-family: 'Courier New', monospace;
	line-height: 1.5;
	color: #d4d4d4;
}

.tag-bracket {
	color: #808080; /* light gray */ 	
}

.tag-name {
	color: #569CD6; /* Monokai: #F92672 (pinkish red), Abyss: #7EA4DF (cool blue), Solarized Dark: #268BD2 (blue) */
}

.code-sim h2 {
	display: inline;
	line-height: 1;
	font-variant-caps: small-caps;
	color: #d4d4d4;
}

.code-sim ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.code-sim ul li {
	padding-left: 1.5em; /* Simulates a tab-style indent */
}

/* Latest Work */
.portfolio-gallery-container {
	background-color: #c5d8ec; /* #D7BBF5 #ADE3EB #8CABFF #CDEEF3 #CEEFFD */
}

.portfolioGallery {
	background-color: #c5d8ec;
	opacity: 0;
}

.portfolioCaption {
	padding-top: 1.75%;
	text-align: center;
}

.portfolioCaption h2 {
	font-size: 2.5vw;
	font-weight: bold;
	color: #222;
}

.portfolioRow {
	display: flex;
	flex-wrap: wrap;
	padding: 0 10px 20px 10px;
}
  
/* Create four equal columns that sits next to each other */
.portfolioColumn {
	flex: 33.33%;
	max-width: 33.33%;
	padding: 0 10px;
}

.portfolioContainer {
	position: relative;
	width: 100%;
	margin-top: 20px;
	border-radius: 5px;
	overflow: hidden;
}

.portfolioOverlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	background-color: transparent;
	border-radius: 5px;
	text-align: center;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}

.portfolioOverlay a {
	display: block;
	position: relative;
    top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
	width: 50%;
	font-size: 1.5vw;
	color: transparent;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}

.portfolioOverlay a i {
	font-size: 1.5vw;
	vertical-align: middle;
}

.portfolioContainer:hover .portfolioOverlay {
	visibility: visible;
	background-color: rgba(0, 0, 0, 0.5);
}

.portfolioContainer:hover .portfolioOverlay a {
	color: white;
	text-decoration: none;
}

.portfolioContainer img  {
	width: 100%;
	height: auto;
	border-radius: 5px;
	background-color: #999; /* #0c3 */
	vertical-align: bottom;
}

/* 2.4 Styles for DesignAds */
.graphic-design-container {
	display: -webkit-flex; /* Safari */
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
	flex-direction: row;
	width: 100%; /* 96% max-width: calc(100% - 4%); */
	margin: 8.5% 0 2% 0; /* 8.5% 2% 2% 2% */
	font-size: 1.75vw;
	/* font-size: clamp(1.25rem, 1.75vw, 1.5rem); */
	color: #999;
	background-color: black;
}

.graphic-design-row {
	width: 100%;
	padding: 2% 2% 0 2%;
}

.graphic-design-row:last-of-type {
	padding: 2% 2% 2% 2%;
}



.graphic-design-services {
	display: -webkit-flex; /* Safari */
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
	flex-direction: row;
	width: 80%;
	margin: 0 auto;
	/* border: 5px solid red; */
}

.services-row {
	width: 25%;
	text-align: center;
	/* border: 5px solid blue; */
}

.services-row:nth-child(1),
.services-row:nth-child(2),
.services-row:nth-child(3),
.services-row:nth-child(4) {
	display: flex;
	justify-content: center;
	padding: 2.5%;
}

.services-row:nth-child(5),
.services-row:nth-child(6),
.services-row:nth-child(7),
.services-row:nth-child(8) {
	padding: 0 2.5%;
}

.services-row img {
	width: 50%;
	height: auto;
	/* border: 3px solid green; */
	align-self: center; 
	/* vertical-align: text-bottom; */
}

.graphic-design-row h1,
.graphic-design-row h2,
.graphic-design-row h3 {
	font-weight: normal;
	text-transform: capitalize;
	color: white;
}

/* .graphic-design-row h1 {
	 font-size: 2rem;
	/* font-size: clamp(2.5rem, 6vw, 4rem); *
}

.graphic-design-row h2 {
	font-size: 1.5rem;
	/* font-size: clamp(2rem, 5vw, 3.25rem); *
}

.graphic-design-row h3 {
	font-size: 1.17rem;
	/* font-size: clamp(1.5rem, 4vw, 2.5rem); *
} */

.graphic-design-row ul {
	margin-left: 0;
	padding-left: 20px;
}

.photo-grid {
	padding: 0 0 12px 0;
	border-radius: 5px;
	background-color: #333;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 6px;
}

.column { /* Create four equal columns that sits next to each other */
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 6px;
}

.column img {
	width: 100%;
	height: auto;
	margin-top: 12px;
	vertical-align: middle;
}

.column img:hover {
	opacity: 0.7;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1);
}

@media screen and (max-width: 1200px) {
	/* 2.7 Styles for Contact */
	.loader {
		border: 4px solid #f3f3f3; /* Light grey */
		border-top: 4px solid dodgerblue; /* Blue */
		width: 32.5px;
		height: 32.5px;
		margin-top: -16.25px;
	}
}

@media screen and (max-width: 800px) {
	/* 2. Styles for pages */

	/* 2.3 Styles for WebAds */
	.portfolioCaption {
		padding-top: 3.5%;
	}

	.portfolioCaption h2 {
		font-size: 4vw;
	}

	/* Responsive layout - makes a two column-layout instead of three columns */
	.portfolioColumn {
    	-ms-flex: 50%;
    	flex: 50%;
    	max-width: 50%;
  	}

	.portfolioOverlay a {
		font-size: 2.5vw;
	}
	
	.portfolioOverlay a i {
		font-size: 2.5vw;
	}

	/* 2.4 Styles for DesignAds */
	.graphic-design-container {
		font-size: 1.25vw;
	}

	/* Responsive layout - makes a two column-layout instead of four columns */
	.column {
		-ms-flex: 50%;
		flex: 50%;
		max-width: 50%;
	}

	/* 2.7 Styles for Contact */
	.loader {
		border: 3px solid #f3f3f3; /* Light grey */
		border-top: 3px solid dodgerblue; /* Blue */
		width: 25px;
		height: 25px;
		margin-top: -12.5px;
	}
}

@media only screen and (max-width: 650px) {

	.divTopMenuTable {
		display: none;
	}
	
	.side-menu {
		display: flex;
	}


	/* 1.6 Styles for footer */
	.gridFooter > div {
		padding: 3%;
		font-size: 3.75vw;
	}

	.gridFooter > div:nth-child(1) {
		width: 100%;
	}
	
	.gridFooter > div:nth-child(2) {
		width: 100%;
	}
	
	.gridFooter > div:nth-child(3) {
		width: 100%;
		text-align: center;
	}
	
	.gridFooter > div:nth-child(4) {
		width: 100%;
		text-align: center;
	}
	
	.gridFooter > div:nth-child(5) {
		width: 100%;
	}

	.gridFooter > div:nth-child(6) {
		width: 100%;
		text-align: center;
	}
	
	.gridFooter > div:nth-child(7) {
		width: 100%;
		padding: 3.5%;
		font-size: 3vw;
	}

	.gridFooter > div .divSiteMap {
		width: 100%;
	}

	.gridFooter .fa-facebook,
	.gridFooter .fa-instagram {
		margin-left: 3%;
		font-size: 7vw;
	}

	.gridFooter img[src="images/x-logo.png"] {
		width: 7%;
		margin-left: 3%;
	}

	#subscribeEmail {
		padding: 3%;
		font-size: 3.5vw;
	}

	#subscribeButton {
		padding: 3%;
		font-size: 3.5vw;
	}

	#snackbar {
		font-size: 3.5vw;
	}

	.divTable .divTableBody .divTableRow:only-child .divHorizontalCell:nth-child(1) { /* Styles for horizontal menu */
		width: auto;
		display: block;
		padding: 2% 0; /*2.125% 0*/
		margin: 0;
	}

	.divTable .divTableBody .divTableRow:only-child .divHorizontalCell:nth-child(1n+2) {
		display: none;
	}
  
	.divTable .divHorizontalCell img[src="images/logo_round.png"] {
		width: 15%;
	}

	/* .divAdsTable {
		margin-top: 17vw;
	} */

	.divAdsTable .divTableBody .divTableRow:nth-child(1) .divAdsCell:only-child {
		display: none;
		padding: 2% 0;
	}
	
	.divAdsTable .divTableBody .divTableRow:nth-child(2) .divAdsCell:only-child {
		display: block;
		padding: 2% 0;
	}
	
	.divBannerCell {
		font-size: 5vw;
		padding: 2% 0;
	}
	
	/* .divTable .divTableBody .divTableRow:nth-child(1) .divBannerCell:only-child {
		display: none;
	} */
	
	.divTable .divTableBody .divTableRow:nth-child(2) .divBannerCell:only-child {
		display: block;
	}

	/* .divBodyTable {
		margin-top: 18.5vw; /*16.5vw*
	} */
	
	.divSocialTable {
		width: 40%;
	}

	#divChatBox {
		width: 16%;
	}
	
	.divSocialTable .divTableBody .divTableRow .divFootCell {
		padding: 4%;
	}

	.divFootCell {
		padding: 1.75%;
		font-size: 2.75vw;
	}

	#phplive_btn_1373998355 IMG {
		width: auto;
	}
	
	#google_translate_element div { /* Google Translate box */
		font-size: 2.25vw;
	}
	
	#google_translate_element select { /* Google Translate select */
		/* width: 35% !important; */
		padding: 0 3%;
		font-size: 3.5vw;
	}
	
	/* #google_translate_element span IMG { /* Google Translate image *
		width: auto;
	} */
	
	#google_translate_element span a { /* Google Translate link */
		font-size: 2.5vw;
	}
	
	#google_translate_element div div:after { /* Google Translate arrow */
		font-size: 4vw;
	}
	
	#siteseal IMG {
		width: auto;
		display: block;
		margin: 2.5% auto 0 auto;
	}

	/* 2. Styles for pages */

	/* 2.1 Styles for Index */
	.divMissionContainer {
		/* opacity: 1; */
		padding: 50% 0;
		-webkit-animation-name: mission; /* Safari 4.0 - 8.0 */
		animation-name: mission;
		-webkit-animation-duration: 10s;
		animation-duration: 10s;
		-webkit-animation-delay: 2s;
		animation-delay: 2s;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
	}

	/* .divTable .divTableBody .divTableRow:only-child .divMissionCell:only-child {
		width: 100%;
		height: auto;
		padding: 0 2% 2% 2%;
		font-size: 5vw;
	} */

	/* .divMissionInner {
		padding: 3%;
	} */
	
	.divMissionInner h1 {
		font-size: 5vw;
	}
	
	.divMissionInner h2 {
		font-size: 5vw;
	}

	.divClientsCaption {
		padding: 5%;
	}
	.divClientsCaption h2 {
		font-size: 7vw;
	}

	.divClientsCell {
		display: block;
		padding: 5%;
	}
	
	.divIndexContainer {
		/* width: 100%; */
		border-collapse: collapse;
	}
	
	.divIndexBox {
		display: block;
		width: auto;
		margin: 3%;
		padding: 7%;
		font-size: 4vw;
		/* line-height: 1.5; */
	}
	
	.divIndexBox h1 {
		font-size: 7vw;
	}
	
	.divIndexBox .fa-angle-right {
		font-size: 4vw;
	}
	
	/* 2.5 Styles for About */
	.divAboutTable {
		/* width: 94%; calc(100% - 6%)*/
		margin: 22.5% 3% 0 3%; /* margin: calc(18.5vw + 3%) 3% 3% 3%; */
	}

	.divTable .divTableBody .divTableRow:nth-child(1) .divAboutCell:only-child {
		padding: 0 0 1.5% 0;
	}
	
	.divTable .divTableBody .divTableRow:nth-child(2) .divAboutCell:only-child {
		padding: 1.5% 0 1.5% 0;
	}
	
	.divTable .divTableBody .divTableRow:nth-child(3) .divAboutCell:only-child {
		padding: 1.5% 0 3% 0;
	}

	.weAreContainer {
		padding: 8% 8%;
	}
	
	.weAreContainer h1 {
		font-size: 10vw;
	}
	
	.weAreContainer h2 {
		font-size: 6vw;	
	}

	.weAreContainer p {
		font-size: 4vw;	
	}
	
	.companyBox {
		font-size: 4vw;
		padding: 8%;
	}
	
	.cardsContainer {
		width: 100%;
		display: block;
	}

	.cardsContainer > h1 {
		display: block;
		padding: 5%;
		font-size: 8vw;
	}
	
	.cardLeftBox {
		width: 100%;
		display: block;
		padding: 0 5% 2.5% 5%;
	}
	
	.cardRightBox {
		width: 100%;
		display: block;
		padding: 2.5% 5% 5% 5%;
	}
	
	.flip-card-back { /* Styles for Flip Card */
		padding: 5%;
		font-size: 4vw;
		/* overflow-y: scroll !important; */
	}

	.flip-card-back h3 {
		font-size: 1.6em; /* 1.6 times the container font size */
	}

	.flip-card-back h4 {
		font-size: 1.2em; /* 1.2 times the container font size */
	}

	/* Styles for Profile Card */
	.card {
		padding-top: 5%;
		font-size: 3vw;
	}
	
	.card h1,
	.card h2,
	.card h3 {
		margin: 0 5%;
	}

	.social_media a {
		font-size: 2vw;
	}
	
	.social_media i {
		font-size: 5vw;
	}

	.social_media img {
		width: 65%; /*6%*/
	}

	.contact_tab {
		padding: 2.25%;
		font-size: 4vw;
	}
	
	/* 2.9 Styles for Terms, Privacy, Sitemap */
	.divNeutralTable {
		width: 94%; /* calc(100% - 6%) */
		margin: 22.5% 3% 3% 3%; /* calc(18.5vw + 3%) 3% 3% 3% */
	}

	.divNeutralCell {
		padding: 3%;
	}

	.divCenterContainer {
		width: auto;
		padding: 8%;
		font-size: 4vw;
	}
	
	.divCenterContainer h1 {
		font-size: 10vw;
	}

	/* 2.6 Styles for Help */
	.divHelpTable {
		/* width: calc(100% - 6%); */
		margin: 22.5% 3% 3% 3%; /* calc(18.5vw + 3%) 3% 3% 3% */
	}

	 /* Styles for accordion */
	.accordion {
		font-size: 4vw;
		padding: 5%;
	}
		
	.accordion:after {
		font-size: 5vw;
	}
		
	.panel {
		padding: 0 5%;
	}
		
	.panel p {
		font-size: 4vw;
		padding-top: 5%;
		padding-bottom: 5%;
	}
	
	/* 2.7 Styles for Contact */
	.contact-container {
		flex-direction: column;
		gap: 0;
		width: 100%;
		margin: 22.5% 0 3% 0;
		/* margin-right: 0;
		margin-bottom: 3%;
		margin-left: 0; */
		padding: 3%;
		font-size: 1.125rem;
	}

	/* .contact-row {
		margin: 0 0.25%; */
		/* margin: 1%; */
		/* border: 5px solid purple;
	} */

	.contact-row:nth-child(1) {
		width: 100%;
		/* line-height: 1.6; */
	}

	.contact-row:nth-child(2) {
		width: 100%;
		margin-bottom: 3%;
	}

	.contact-row:nth-child(3) {
		width: 100%;
	}

	.contact-item {
		padding: 2.25% 0;
	}

	#contact-form label.js-field span {
		padding-left: 1.5%;
		padding-right: 1.5%;
		font-size: 1.125rem;
	}

	#contact-name,
	#contact-email {
		padding: 1.5%;
		font-size: 1.125rem;
	}

	#contact-question {
		padding: 1.5%;
		font-size: 1.125rem;
	}

	#contact-name::placeholder,
	#contact-email::placeholder,
	#contact-question::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
		font-size: 1.125rem;
	}
		
	#contact-name::-ms-input-placeholder,
	#contact-email::-ms-input-placeholder,
	#contact-question::-ms-input-placeholder { /* Internet Explorer 10-11,  Microsoft Edge */
		font-size: 1.125rem;
	}

	#contact-submit {
		padding: 0.75em 1em;
		font-size: 4vw;
	}

	.loader {
		border: 5px solid #f3f3f3; /* Light grey */
		border-top: 5px solid dodgerblue; /* Blue */
		width: 40px;
		height: 40px;
		margin-top: -20px;
		right: 3%;
	}

  	/* 2.2 Styles for PubliAds */
	.divPubliAdsTable { margin: 22.5% 3% 3% 3%; /* calc(18.5vw + 3%) 3% 3% 3% */ }

	/* .divPubliAdsCell {
		width: 100%;	
	} */
	
	.divPubliAdsTable .divTableBody .divTableRow:nth-child(1) .divPubliAdsCell:only-child {
		padding: 0 0 1.5% 0;
	}
	
	.divPubliAdsTable .divTableBody .divTableRow:nth-child(2) .divPubliAdsCell:only-child {
		padding: 1.5% 0 1.5% 0;
	}
	
	.divPubliAdsTable .divTableBody .divTableRow:nth-child(3) .divPubliAdsCell:only-child {
		padding: 1.5% 0 0 0;
	}
	
	.divTable .divTableBody .divTableRow:only-child .divAnimationCell:only-child {
		display: block;
		width: auto;
		height: auto;
		padding: 1% 2% 0 2%;
	}
	
	.divSearchContainer { /* Styles for SEO */
		opacity: 1;
		-webkit-animation: none !important;
		animation: none !important;
	}
	
	.divSearchContainer .divSearchImageBox:nth-child(1) {
		display: none;
	}
	
	.divSearchContainer .divSearchImageBox:nth-child(2) {
		display: block;
	}
	
	.divSearchContainer .divSearchImageBox:nth-child(4) {
		display: none;
	}
	
	.divSearchContainer .divSearchImageBox:nth-child(5) {
		display: block;
	}
	
	.divContentLeft {
		font-size: 4vw;
		padding: 5%;
	}
	
	.divContentLeftBox {
		width: 100%;
		padding: 5%;
		border: none;
		border-radius: 10px;
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 
		box-sizing: border-box;
	}
	
	#results {
		display: none;
	}
	
	.logo_link {
		display: block;
	}
	
	.text_link {
		display: none;
	}
	
	.divContentRight { /* Styles for SEO */ 
		display: none;
	}
	
	.divSEMContainer { /* Styles for SEM */
		opacity: 1;
		-webkit-animation: none !important;
		animation: none !important;
	}
	
	.divSEMHeader img:nth-child(1) {
		display: none;
	}
	
	.divSEMHeader img:nth-child(2) {
		display: block;
	}
	
	.divSEMContent {
		padding-top: 16.125%;
	}
	
	.divLeftContent {
		display: block;
		width: auto;
		font-size: 4vw;
		padding: 5%;
		border-right: none;
		border-bottom: 1px solid #D6D6D6;
		border-left: none; /*1px solid #D6D6D6*/
	}
	
	.divLeftContent h1 {
		font-size: 6vw;
	}
	
	.divRightContent {
		display: block;
		width: auto;
		font-size: 4vw;
	}
	
	.divRightContentImage {
		display: none;
	}
	
	.divRightContentTable h1 {
		font-size: 4vw;
		padding: 5%;
		border-top: none;
	}
	
	.divRightContentTable ul {
		list-style-type: none;
		font-size: 4vw;
	}
	
	.divRightContentTable ul li { /* Styles for SEM */
		padding: 5%;
	}

	.divSMMContainer { /* Styles for SMM */
		opacity: 1;
		-webkit-animation: none !important;
		animation: none !important;
	}
	
	.divSMMHeader div:nth-child(1) {
		width: 17%;
		padding: 2%;
	}
	
	.divSMMHeader div:nth-child(2) {
		width: 66%;
		padding: 2%;
	}
	
	.divSMMHeader div:nth-child(3) {
		width: 17%;
		padding: 2%;
	}

	.divSMMHeader div:nth-child(2) h1 {
		font-size: 5vw;
	}
	
	.divSMMHeader div:nth-child(2) h2 {
		font-size: 4vw;
	}
	
	.divSMMHeader div:nth-child(3) .fa-ellipsis-h {
		font-size: 5vw;
	}

	.divSMMSignUp {
		padding: 3% 5%;
	}
	
	.divSMMSignUp h1, .divSMMSignUp .fa-angle-right {
		font-size: 5vw;
	}
	
	.divSMMBody {
		padding: 0 5% 5% 5%;
	}
	
	.divSMMSocial div:nth-child(1) {
		width: 15%;
		padding: 4% 6% 4% 0;
	}
	
	.divSMMSocial div:nth-child(2) {
		width: 15%;
		padding: 4% 6% 4% 0;
	}
	
	.divSMMSocial div:nth-child(3) {
		width: 15%;
		padding: 4% 6% 4% 0;
	}
	
	.divSMMSocial div:nth-child(4) {
		width: 55%;
		padding: 4% 0;
	}
	
	.divSMMSocial div:nth-child(1) .fa-heart-o, .divSMMSocial div:nth-child(2) .fa-comment-o, .divSMMSocial div:nth-child(3) .fa-send-o, .divSMMSocial div:nth-child(4) .fa-bookmark-o {
		font-size: 7vw;
	}

	.divSMMContent {
		font-size: 4vw;
	}
	
	.divSMMContent h1 {
		font-size: 6vw;
	}
	
	.divSMMContent ul { /* Styles for SMM */
		padding-left: 5%;
	}
	
	/* 2.3 Styles for WebAds */
	.divWebAdsTable { margin: 22.5% 0 3% 0; /* calc(18.5vw + 3%) 3% 3% 3% */ }

	.divWebAdsTable .divTableBody .divTableRow:nth-child(1) .divWebAdsCell:only-child {
		padding: 0 0 1.5% 0;
	}
	
	.divWebAdsTable .divTableBody .divTableRow:nth-child(2) .divWebAdsCell:only-child {
		padding: 1.5% 0 1.5% 0;
	}

	.divWebAdsTable .divTableBody .divTableRow:nth-child(3) .divWebAdsCell:only-child {
		padding: 1.5% 0 0 0;
	}


	.front-end-services {
		padding: 5%;
		font-size: 4.25vw;
		opacity: 1;
	}

	.front-end-service-row:nth-child(1) {
		width: 100%;
		order: 1;
		text-align: left;
	}

	.front-end-service-row:nth-child(2) {
		order: 2;
		width: 100%;
		margin: 3% 0 1.5% 0;
		text-align: center;
	}

	.front-end-service-row:nth-child(3) {
		order: 3;
		width: 100%;
		margin: 1.5% 0 2.5% 0;
	}

	.front-end-service-row:nth-child(4) {
		order: 5;
		width: 100%;
		margin: 1.5% 0 2.5% 0;
		text-align: left;
	}

	.front-end-service-row:nth-child(5) {
		width: 100%;
		order: 4;
		margin: 2.5% 0 1.5% 0;
		text-align: center;
	}

	.front-end-service-row:nth-child(6) {
		width: 100%;
		order: 6;
		margin: 2.5% 0 1.5% 0;
		text-align: center;
	}

	.front-end-service-row:nth-child(7) {
		width: 100%;
		order: 7;
		margin: 1.5% 0 2.5% 0;
	}

	.front-end-service-row:nth-child(8) {
		width: 100%;
		order: 9;
		margin: 3% 0 0 0;
		text-align: left;
	}

	.front-end-service-row:nth-child(9) {
		width: 100%;
		order: 8;
		margin: 2.5% 0 0 0;
		text-align: left;
	}

	.front-end-service-row h1 {
		width: 100%;
		transform: translateX(0); /* Start off-screen left */
		animation: none;
	}

	.front-end-service-row:nth-child(4) ul,
	.front-end-service-row:nth-child(8) ul {
		direction: ltr;
		margin-right: 0;
		padding-right: 20px;
	}

	







	.divFrontEndContainer:before {
		background-color: transparent;
	}

	.divFrontEndPicture {
		width: auto;
		display: block;
	}
	
	.divFrontEndDescription {
		display: block;
		width: auto;
		padding: 8%;
		font-size: 4vw;
		background-color: rgba(0, 128, 255, 1);
		opacity: 1;
	}

	.fadeIn {
		-webkit-animation: none !important;
		animation: none !important;	
	}
	
	.divFrontEndDescription h1 {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		/* font-size: 10vw; */
		padding: 0 0 5% 0;
		text-align: left;
	}

	.divFrontEndDescription h1.frontEndScrolled {
		-webkit-animation: none !important;
		animation: none !important;
	}

	.divFrontEndDescription h2 {
		font-size: 5vw;
		margin-bottom: 5%;
	}
	
	.divFrontEndDescription ul {
		padding-left: 5%;
		margin-bottom: 5%;
	}

	/* Back-End Profesional Services */
	.divBackEndDescription {
		display: block;
		width: auto;
		padding: 8%;
		font-size: 4vw;
		opacity: 1;
	}
	
	.divBackEndDescription h1 {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		padding: 0 0 5% 0;
		text-align: left;
	}

	.divBackEndDescription h1.backEndScrolled {
		-webkit-animation: none !important;
		animation: none !important;
	}

	.portfolioGallery {
		opacity: 1;
	}

	.portfolioCaption {
		padding-top: 5.25%;
	}
	
	.portfolioCaption h2 {
		font-size: 6vw;
	}

	.portfolioColumn {
		flex: 100%;
    	max-width: 100%;
	}

	.portfolioOverlay a {
		font-size: 5vw;
	}
	
	.portfolioOverlay a i {
		font-size: 5vw;
	}
	
	/* 2.4 Styles for DesignAds */
	.graphic-design-container {
		width: 100%; /* 94% */
		margin: 22.5% 0 3% 0; /* 22.5% 3% 3% 3% */
		font-size: 4vw;
	}

	.graphic-design-row {
		padding: 5% 5% 0 5%;
	}

	.graphic-design-row:last-of-type {
		padding: 5% 5% 5% 5%;
	}

	.graphic-design-services {
		width: 100%;
	}

	.services-row {
		width: 50%;
	}

	.services-row:nth-child(1) {
		order: 1;
	}

	.services-row:nth-child(2) {
		order: 2;
	}

	.services-row:nth-child(3) {
		order: 5;
	}

	.services-row:nth-child(4) {
		order: 6;
	}

	.services-row:nth-child(5) {
		order: 3;
		padding-bottom: 5%;
	}

	.services-row:nth-child(6) {
		order: 4;
		padding-bottom: 5%;
	}

	.services-row:nth-child(7) {
		order: 7;
	}

	.services-row:nth-child(8) {
		order: 8;
	}

	.column {
		-ms-flex: 100%;
		flex: 100%;
		max-width: 100%;
	  }
}