html, body { background-color:#000000; padding:0; margin:0; width:100%; height:100%; color:#ffffff; overflow-x: none; }

.barw {}
.perc {}
.perc2 {}

.green { color:#079b11; }
.blue { color:#29b7eb; }
.orange { color:#f28709; }
.yellow { color:#f7cd4a; }
.yellow2 { color:#f1a23c; }
.subtext { color:#595858; }
.bi { font-weight:bold; font-style:italic; }
.subtextbold { color:#000000; font-weight:bold; }

.bar_container { position:relative; max-width:1500px; margin-left:auto; margin-right:auto; }

.service_tile { display:inline-block; margin-right:20px; width:310px; height:335px; position:relative; background-repeat: no-repeat; cursor:pointer; vertical-align:top; margin-bottom:15px; }

.service_tile:hover .button { color:#000000; }
.service_tile:hover .description { color:#000000; }

.service_tile .title { text-align:left; width:220px; margin-top:20px; margin-left:25px; color:#000000; font-family:'Russo One'; font-size:28px; line-height:0.9; }

.service_tile .description { text-align:left; width:250px; margin-top:20px; margin-left:25px; color:#ffffff; font-family:'Poppins'; font-size:20px; line-height:1.2; }

.service_tile .number {position:absolute; left:40px; bottom:30px; color:#ffffff; font-family:'Russo One'; font-size:28px; font-size:22px; }
.service_tile .button { position:absolute; bottom:30px; right:30px; font-size:45px; cursor:pointer; }
.service_tile .button:hover { color:#000000; }


.infoicon { width:377px; height:379px; display:inline-block; margin-right:40px; position:relative; padding-bottom: 40px;  }

.infoicon .bgimage { position:relative; width:100%; height:100%; background-image: url('images/info_point_white.png'); background-position: center; background-repeat: no-repeat;  z-index:100; }

.infoicon .circle_container { display:table; width:96%; height:175px; font-family:'Russo One';  }
.infoicon .circle_container .info_container { display:table-cell; vertical-align:middle; text-align:center; }
.infoicon .circle_container .info_container .title { font-size:38px; line-height:0.9; }
.infoicon .circle_container .info_container .subtitle { color:#000000; font-size:24px; line-height:0.9; }

.infoicon .box_container { width:100%; font-family:'Poppins'; color:#000000; font-size:22px; line-height:1.2; text-align:left; }
.infoicon .box_container .description { padding:30px;; margin-top:60px; }

.large_arrow_button { color:#f7d09c; cursor:pointer; }
.large_arrow_button:hover { color:#f28709; }

.request_form {}

.request_form input[type="text"]  { padding:10px 15px 10px 15px; background-color:#f1a33c; border:2px solid #ffffff; font-size:24px; color:#000000; width:315px; font-family:'Roboto'; box-shadow: 2px 2px 5px #000000;  margin-bottom:20px; outline: none; }

.request_form .callback input[type="text"]  { padding:10px 15px 10px 15px; background-color:#f1a33c; border:2px solid #ffffff; font-size:24px; color:#000000; width:315px; font-family:'Roboto'; box-shadow: 5px 5px 10px #5f5f5f;  margin-bottom:20px; outline: none; }

.request_form textarea  { padding:10px 15px 10px 15px; background-color:#f1a33c; border:2px solid #ffffff; font-size:24px; color:#000000; width:650px; font-family:'Roboto'; box-shadow: 2px 2px 5px #000000; height:150px; outline: none; }

.request_form input::placeholder { 	color: black; }
.request_form textarea::placeholder { 	color: black; }

.request_form .button {cursor:pointer; font-family:'Russo One'; font-size:28px; color:#ffffff; text-shadow: 4px 4px 4px #000000; }
.request_form .button:hover { color:#f1a33c; }

.topmenu { padding-left:20px; }
.topmenu .button { display:inline-block; margin-right:20px; cursor:pointer; font-family:'Poppins'; font-size:16px; color:#ffffff; }
.topmenu .button:hover { color:#f7cd4a; }

.topmenu .button_select { display:inline-block; margin-right:20px; cursor:pointer; font-family:'Poppins'; font-size:16px; color:#f1a23c; }
.topmenu .button_select:hover { color:#f7cd4a; }

.bottommenu { vertical-align:top; border-left:1px solid #f1a33c; padding-left:20px; font-weight:600; }

.bottommenu .button { font-family:'Roboto'; font-size:18px; color:#858484; cursor:pointer; }
.bottommenu .button:hover { color:#f7cd4a; }

.bottommenu .button_select { font-family:'Roboto'; font-size:18px; color:#f1a23c; cursor:pointer; }
.bottommenu .button_select:hover { color:#f7cd4a; }

.footlink { cursor:pointer; }
.footlink .a { color:#ffffff; font-family:'Poppins'; font-size:20px; }
.footlink .b { color:#f1a23c; font-family:'Poppins'; font-size:20px; }
.footlink:hover .a { color:#f7cd4a; }
.footlink:hover .b { color:#f7cd4a; }

.footer_fb { display:inline-block; width:36px; height:36px; margin-right:5px; vertical-align:middle; cursor:pointer; }
.footer_fb .icon_rollover { display:none; }
.footer_fb:hover .icon { display:none; }
.footer_fb:hover .icon_rollover { display:block; }

.footer_x { display:inline-block; width:36px; height:36px; margin-right:5px; vertical-align:middle;  cursor:pointer; }
.footer_x .icon_rollover { display:none; }
.footer_x:hover .icon { display:none; }
.footer_x:hover .icon_rollover { display:block; }

#emailresponse { background-color:#f1a23c; padding:20px 40px 20px 40px; font-family:'Poppins'; font-weight:bold; font-size:22px; color:#000000; border-radius:10px; box-shadow:5px 5px 10px #000000; display:inline-block; }

#emailok { margin-top:10px; display:inline-block; border-radius:8px; border:2px solid #ffffff; padding:10px 20px 10px 20px; color:#ffffff; cursor:pointer; }
#emailok:hover { border:2px solid #000000; color:#000000;  }


/* sub pages */

/* top title */
.sub_toptitle { width:100%; height:108px; background-image: url('images/subheader_bg.png'); background-position: center; background-repeat: repeat-x; }
.sub_toptitle .container { display:table; height:100%; max-width:1500px; margin-left:auto; margin-right:auto; font-size:45px;  }
.sub_toptitle .container .title { display:table-cell; padding-top:20px;  text-align:center; vertical-align:middle; font-family:'Poppins'; font-weight:700; text-shadow: 4px 4px 4px #000000;  }

/* top banner *//
.sub_topbanner { width:100%; height:408px; border-top:8px solid #000000; border-bottom:1px solid #000000; text-align:center; background-image: url('images/corporate_email_services_header.png'); background-position: center; background-repeat: no-repeat; background-color:#000000; }
.sub_topbanner .container { display:block; height:100%; max-width:1500px; margin-left:auto; margin-right:auto; position:relative; }
.sub_topbanner .container .box_left { display:table; width:500px; height:100%; padding-left:40px;  }
.sub_topbanner .container .box_right { display:table; width:500px; height:100%; padding-right:40px; float:right;  }
.sub_topbanner .container .title { display:table-cell; vertical-align:middle; text-align:left; height:100%; width:100%; font-family:'Russo One'; font-size:36px; color:#ffffff; text-shadow: 4px 4px 4px #000000; }

/* content */
.sub_content { width:100%; position:relative; background-color:#ffffff; background-image: url('images/services_bg_pic.jpg'); background-position: top center; background-repeat: repeat-y; }
.sub_content .container { display:block; max-width:1500px; margin-left:auto; margin-right:auto; position:relative; text-align:center; }
.sub_content .container .box { padding:40px 20px 40px 20px; position:relative;  }
.sub_content .container .description { position:relative; z-index:100; max-width:650px; display:inline-block; vertical-align:middle; margin-right:40px; font-family:'Poppins'; font-size:24px; line-height:1.3; text-align:left; margin-bottom:20px; }
.sub_content .container .subtitle { font-family:'Russo One'; font-size:24px; color:#f1cb9a; line-height:0.8; padding-left:0px; }
.sub_content .container .title { font-family:'Russo One'; font-size:48px; color:#f1a23c; padding-bottom:30px; line-height:1; }


.bar8 { width:100%; height:25px; background-image: url('images/bar8.png'); background-position: center; background-repeat: no-repeat; }
.bar1 { width:100%; height:25px; background-image: url('images/bar1.png'); background-position: center; background-repeat: no-repeat; }

/***************************/

.services_menu {}
.services_menu .description { position:absolute; top:-30px; font-size:18px; color:#000000; width:300px; font-family:'Russo One'; display:none;}

.services_menu .button { display:inline-block; width:60px; height:60px; border:2px solid #000000; position:relative; box-shadow:4px 4px 4px #939393; margin-right:5px; background-position: center center; background-repeat: no-repeat; position:relative; cursor:pointer;  }
.services_menu .button:hover { background-color:#ffffff; }
.services_menu .button:hover .description { display:block; }

.services_menu .button_select { display:inline-block; width:60px; height:60px; border:2px solid #000000; position:relative; box-shadow:4px 4px 4px #939393; margin-right:5px; background-position: center center; background-repeat: no-repeat; position:relative; cursor:pointer; background-color:#f1a23c;  }
.services_menu .button_select:hover .description { display:block; }
	
.next_service { text-align:right; display:table-cell; padding-right:40px; color:#000000; font-size:20px; vertical-align:middle;font-family:'Russo One'; cursor:pointer; }
.next_service .title { color:#ffffff; font-size:24px;text-shadow: 2px 2px 2px #000000; }
.next_service .icon { margin-left:5px; display:inline-block; color:#ffffff;text-shadow: 2px 2px 2px #000000; font-size:34px;}

.next_service:hover .title { color:#f7cd4a; }
.next_service:hover .icon { color:#f7cd4a; }


.profile { display:inline-block; width:415px; margin:20px 20px 20px 20px; position:relative; background-color:#f3bb45; color:#000000; box-shadow: 6px 6px 8px #96959a; }
.profile .bar { width:100%; height:30px; background-image: url('images/profile_bar.png'); background-position: center; background-repeat: no-repeat;  }
.profile .titles { font-family:'Poppins'; font-size:20px; text-align:left; padding:10px 20px 20px 40px; }
.profile .name { font-family:'Russo One'; font-size:26px; line-height:1.0; }

.marquee {
  --gap: 1rem;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll 50s linear infinite;
}

.marquee__content .image{ display:table-cell; width:195px; height:168px; padding-right:80px; vertical-align:middle; }

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}