/**
 * Basic layout, for animation examples, check demo.css
 */

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400i');

html, body
{
	margin: 0;
	padding: 0;
	overflow-x:hidden;
	overflow-y:hidden;
}

body
{

	color: #000000;
	
	font-family: Raleway, sans-serif;
	font-size: 14px;
	
	
}

a
{
	color: #d7e7f3;
	text-decoration: none;
	font-weight: 500;
	
	transition: color 0.25s ease;
}

a:hover
{
	color: #fff;
}

h1
{
	font-size: 4em;
	font-weight: 200;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: normal;
	
	-webkit-font-smoothing: subpixel-antialiased;
}

h2
{
	font-weight: 300;
	font-size: 1.3em;
	line-height: 1.5em;
	color: #779dba;
	
	-webkit-font-smoothing: subpixel-antialiased;
}

h3
{
	font-weight: 500;
	font-size: 1em;
	line-height: 1.5em;
	color: #d7e7f3;
	margin: 80px 0 0 0;
	
	-webkit-font-smoothing: subpixel-antialiased;
}

div.block
{
	position: relative;
	height: 80vh;
	padding: 20vh 15vw 0 15vw;
}

div.block svg
{
	position: absolute;
	bottom: 50px;
	width: 30px;
	
	animation: chevronAnimation 4s ease-in-out 0s infinite;
}

div.block svg path
{
	fill: #7e9aae;
}




/**
 * Simple keyframes animation for the chevron on the first slide
 */
@keyframes chevronAnimation {
	0% {
		transform: translate(0,0) scale(1.0,1.0);
	}
	50% {
		transform: translate(0,5px) scale(0.8,0.8);
	}
	100% {
		transform: translate(0,0) scale(1.0,1.0);
	}
}

/**
 * Responsiveness
 */
@media screen and (max-width: 1024px)
{	
	body
	{
		font-size: 18px;
		line-height: 27px;
	}
}

@media screen and (max-width: 800px)
{	
	h1 span
	{
		display: block;
	}
	
	div.block
	{
		height: 85vh;
		padding: 15vh 15vw 0 15vw;
	}
}

@media screen and (max-width: 420px)
{	
	body
	{
		font-size: 12px;
		line-height: 18px;
	}
}

@media screen and (max-width: 360px)
{	
	h1
	{
		font-size: 3em;
	}
}

#home{
	padding:0;
}

.playfair
{font-family: 'Playfair Display', serif !important;
}

.owl-carousel
{
	width:100vw;
	height:100vh;

}

.owl-slide
{
		width:100vw;
	height:100vh;
		background-size:100%;
		background-position:center center;
		position:relative;
}

.slide-text
{
	font-family: 'Playfair Display', serif;
	font-size:3vw;
	color:#FFF;
	position:absolute;
letter-spacing:0.1vw;
	top:40%;
	left:20%;
	
	transition:1s ease all;
}

.slide-line-1
{
	
	height:3px;
	background:#8CBF43;
	position:absolute;
letter-spacing:0.1vw;
	top:80%;
	left:10%;
	transition:1s ease all;
}

.slide-line-2
{
	
	height:3px;
	background:#8CBF43;
	position:absolute;
letter-spacing:0.1vw;
	top:20%;
	left:60%;
		transition:1s ease all;
}

#sl-1-1, #sl-2-1, #sl-3-1
{
	width:40%;
}

#sl-3-2, #sl-2-2, #sl-1-2
{
	width:25%;
}

#sl-1-t, #sl-2-t, #sl-3-t
{
	opacity:1;
}

#slide-1
{
	background-image:url(../img/home-page-header-1.jpg);
}


#slide-2
{
	background-image:url(../img/home-page-header-2.jpg);
}


#slide-3
{
	background-image:url(../img/home-page-header-3.jpg);
}

 .section-title {
     font-style: normal;
     font-family: Raleway, sans-serif !important;
     font-weight: 700;
     letter-spacing: 6px;
     font-size: 23px;
     color:#8CBF43;
	 transition:1s ease all;
}

#about-title, #tech-title, #mobile-tech-title, #business-title, #mobile-business-title, #mobile-csr-title{
	opacity:0;
}

 .page-section {
     height:100vh;
     width:100vw;
     position:relative;
}
 .section-line-with-title {
     width:33vw;
     height:20vh;
        padding-top:2.5vh;
     padding-left:2.5vw;
     position:absolute;
     left:0vw;
     bottom:15vh;
     z-index: 100;
	 
	 }

#desktop-logo, #desktop-logo-dark, #menu-logo
{
	width:9vw;
	height:9vh;
	position:fixed;
	left:2.5vw;
	top:5vh;
	z-index:50;
	transition:1s ease all;
	background-image:url(../img/masoom_logo_light.png);
	background-size:contain;
	background-position:left;
	background-repeat:no-repeat;
	
}
#menu-logo
{
	background-image:url(../img/masoom_logo_menu.png);
}
.logo-visible
{
	opacity:1;
}

.logo-invisible
{
	opacity:0;
}

#desktop-logo-dark
{
	background-image:url(../img/masoom_logo.png);
	opacity:0;
}



.section-line-ani
{
height:0.5vh;
background-color:#8CBF43;
margin-bottom:3vh;

}

#about-line, #tech-line, #mobile-tech-line, #business-line, #mobile-business-line, #mobile-about-line, #mobile-tech-line,  #mobile-business-line, #mobile-csr-line
{
	width:0;
transition:1s all ease;
}

 .col-1 {
     width:32.5vw;
     height:50vh;
     position:absolute;
     top:20vh;
     left:15vw;
     text-align:right;
     display:flex;
     justify-content:center;
     align-items:center;
}

#col-1-1
{
	opacity:0;
	left:10vw;
		transition:1s ease all;
}
 .col-2 {
     width:32.5vw;
     height:50vh;
     position:absolute;
     top:20vh;
     right:15vw;
     display:flex;
     justify-content:center;
     align-items:center;
}
#col-1-2
{
	opacity:0;
	right:10vw;
	transition:1s ease all;
}
 .title-text {
     font-family:Raleway;
     line-height:150%;
     font-weight: 500;
     font-size: 18px;
     font-style: italic;
     color:#8CBF43;
}
 .subtitle {
     font-family: Raleway, sans-serif !important;
     line-height:150%;
     font-weight: 700;
     font-size: 16px;
     letter-spacing:2px;
	 color:#000;
}
 .regular-text {
     font-family: Raleway, sans-serif !important;
     line-height:150%;
	 font-size:14px;
	 text-align:left;
	 color:#4E4D4D;
}
 #col-2-1 {
     width:40vw;
     height:100vh;
     position:absolute;
     left:0;
     top:0;
     background:#7F8080;
     display:flex;
     justify-content:center;
     align-items:center;
}
 #col-2-1-content {
     width:25vw;
     left:10vw;
     color:#FFF;
}
 #col-2-2 {
     width:60vw;
     height:100vh;
     position:absolute;
     right:0;
     top:0;
     background:#FFF;
     display:flex;
     align-items:center;
}
 #col-2-2-content {
     width:35vw;
     margin-left:5vw;
}

#about, #mobile-about
{
	background-color:#EEEEEE;
}

.tech-col-1
{
	width:50%;
	height:100vh;
	background:#CCCBCB;
	position:absolute;
	left:-10vw;
	top:0;
	transition:1s ease all;
}

#technology
{
	background-color:#EEEEEE;
}
.tech-col-2
{
width:50%;
	height:100vh;
position:absolute;
	right:0;
	top:0;
background:#CCCBCB;transition:1s ease all;
}

#t-c-1, #t-c-2
{
	height:46vh;
	width:60%;
	left:20%;
	top:27vh;
	position:absolute;
	
}

#tech-col-1-text, #tech-col-2-text
{
     font-family: Raleway, sans-serif !important;
     line-height:150%;
	 font-size:14px;
	 text-align:left;
	 color:#4E4D4D;
}
	
	#tech-col-1-excerpt
{
     font-family: 'Playfair Display', serif;
     line-height:150%;
	 font-size:20px;
	 text-align:left;
	 color:#4E4D4D;
}
	
#tech-col-1-arrow
{
	width:4vw;
	height:4vw;
	background-image:url(../img/right-arrow.png);
		background-size:50%;
		background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	right:-25%;
	top:40%;
	cursor:pointer;
}

#t-c-2
{
	display:none;
}

#t-p-1, #t-p-2
{
	width:100%;
	height:100%;
	position:absolute;
	background-size:cover;
	background-repeat:no-repeat;
}

#t-p-1
{
	background-image:url(../img/3Q8A0378.jpg);
}

#t-p-2
{
	background-image:url(../img/3Q8A0457.jpg);
	background-position:right;
	display:none;
}

#tech-col-2-arrow
{
		width:4vw;
	height:4vw;
	background-image:url(../img/left-arrow.png);
		background-size:50%;
		background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	left:-25%;
	top:40%;
	cursor:pointer;
}

 #tech-line-old {
     width: 30vw;
     height: 0.5vh;
     position: absolute;
     left:30vw;
     top: 53vh;
     background: #8CBF43;
     z-index: 10;
}
 #col-3-1 {
     width:20vw;
     height:100vh;
     background:#FFF;
     position:absolute;
     left:-5vw;
	 opacity:0;
     top:0;
     padding-top:20vh;
     z-index:5;
	 transition: all 1s ease;
}
 #col-3-2 {
     width:75vw;
     height:80vh;
     background-color:#CCCBCB;
     position:absolute;
     right:-5vw;
  top:10vh;
     z-index:1;
	 opacity:0;
	 transition: all 1s ease;
}
 .business-option {
     width:15vw;
     height:7.5vh;
     margin-left:5vw;
     display: flex;
     align-items: flex-end;
     cursor:pointer;
transition:0.5s ease all;
font-weight:normal;
}
 .business-option:hover {
color:#8CBF43 !important;
}
#food-option
{
color:#8CBF43;
}
 .business-info-text {
     width:50vw;
     position:absolute;
     left:10vw;
     top:17.5vh;
transition:0.5s ease all;
font-size:14px;
color:#000;
line-height:140%;
font-family: Raleway, sans-serif !important;

}
 .business-selection-line {
     height:0.5vh;
     width:0%;
     margin-left:5vw;
     background:#8CBF43;
transition:0.5s ease all;

}
#food-line
{
width:100%;
}
 .business-photo-box {
     width:50vw;
     height:60vh;
     position:absolute;
     right:0;
     bottom:-25vh;
transition:1s ease all;
background-size:100%;
background-repeat:no-repeat;
opacity:0;
}

#food-photo{
background-image:url("http://kandachar.com/masoom-dev/wp-content/uploads/2018/05/food-division-image-01.jpg");
opacity:0;
}
#wind-photo{
background-image:url("http://kandachar.com/masoom-dev/wp-content/uploads/2018/05/wind-energy-image-01.jpg");
opacity:0;
}
#infra-photo{
background-image:url("http://kandachar.com/masoom-dev/wp-content/uploads/2018/05/infrastructure-image-01.jpg");
opacity:0;
}
#food-text, #wind-text, #infra-text
{
opacity:0;
}

.mySlides
{
	transition: 2s ease all;
}

 #csr-title-box {
     width:50vw;
     height:30vh;
	 top:7.5vh;
     background:#FFF;
     display:flex;
     align-items:center;
     justify-content:center;
     text-align:left;
	 position:absolute;
	 left:1vw;
transition:1s ease all;
	 color:#000;
	 opacity:0;
}
 .subtitle-csr {
     font-family: Raleway, sans-serif !important;
     line-height:150%;
     font-weight: 700;
     font-size: 14px;
     letter-spacing:2px;
}
 #col-4-1 {
     width:50vw;
     height:70vh;
     background:#CCCBCB;
     position:absolute;
     left:-10vw;
     top:30vh;
     z-index:2;
     padding-top:12.5vh;
	 transition:0.5s ease all;
}
 #col-4-2 {
     width:50vw;
     height:100vh;
     background:#FFF;
     position:absolute;
     right:-10vw;
     top:0vh;
     z-index:1;
	 transition:0.5s ease all;
}
 .csr-option {
     width:35vw;
     height:10vh;
     margin-left:15vw;
     display: flex;
     align-items: flex-end;
     color:#4E4D4D;
     font-size:120%;
	 font-weight:normal;
cursor:pointer;
transition:0.5s ease all;
}
 .csr-option:hover {
color:#FFF !important;
}
 .csr-info-text {
     width:30vw;
     height:60vh;
     position:absolute;
     left:10vw;
     top:60vh;
	 transition:0.5s ease all;
}

.csr-image
{
	width:50vw;
	height:50vh;
	position:absolute;
	top:0;
	right:0;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}

#edu-image
{
	background-image:url(../img/csr-education-1.jpg);
}

#health-image
{
	background-image:url(../img/csr-health.jpg);
}

#human-image
{
	background-image:url(../img/csr-humanitarian.jpg);
}

#culture-image
{
	background-image:url(../img/csr-cultural.jpg);
}

#health-image, #human-image, #culture-image
{
	display:none;
}

 .csr-selection-line {
     height:0.5vh;
     width:00%;
     margin-left:15vw;
     background:#8CBF43;transition:0.5s ease all;
}


#edu-line
{
	width:80%;
}

#culture-text, #health-text, #human-text
{
	display:none;
	
}

 .logo-img {
     width:6.5vw !important;
     margin-top:2.5vh !important;
     margin-left:2.5vw !important;
}
.gather-menu-icon
{
color:#8CBF43 !important;
}
.gather-overlay > .logo
{
display:none;
}

.gather-overlay
{
background-color:#8CBF43 !important;
opacity:1 !important;
}

.menu-title
{
    font-size: 32px !important;
    font-weight: 400  !important;
    color: #333333  !important;
    font-family: "Crimson Text"  !important;
text-transform: capitalize !important;
font-style: italic !important;
transition:0.5s ease all !important;
}

.menu-title:hover
{
    color: #FFFFFF !important;
}
.gather-overlay .menu nav > ul > li {
    border-color: rgba(255,255,255,0.0);
}
 .double-slider-title {
     font-family: Raleway, sans-serif !important;
     line-height:150%;
     font-weight: 500;
     font-size: 18px !important;
     font-style: italic;
     color:#8CBF43;
text-align:left !important;
}

.double-slider-description, .double-slider-sub-title
{
text-align:left !important;
color:rgb(78, 77, 77) !important;
}

.double-slider.double-slider-right .double-slider-text-container, .double-slider.double-slider-right .double-slider-image-container {
    float: right;
    height: 100vh;
}

#md_double_slider-5b1699d6a240a .double-slider-image-container li div {
    background-size: cover;
    height: 100vh !important;
}



.double-slider .double-slider-image-container ul li div {
    background-position: center;
height:100vh !important;
}

@keyframes growWidthRight{
  0% {
   width:0%;
  }

  100% {
width:100%;
  }
}


.button_container {
  position: fixed;
  top: 5%;
  right: 2%;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  transition: opacity 0.25s ease;
}
.button_container:hover {
  opacity: 0.7;
}
.button_container.active .top {
  transform: translateY(10px) translateX(0) rotate(45deg);
  background: #fff;
}
.button_container.active .middle {
  opacity: 0;
  background: #fff;
}
.button_container.active .bottom {
  transform: translateY(-10px) translateX(0) rotate(-45deg);
  background: #fff;
}
.button_container span {
  background: #8CBF43;
  border: none;
  height: 3px;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  transition: all 0.35s ease;
  cursor: pointer;
}
.button_container span:nth-of-type(2) {
  top: 10px;
}
.button_container span:nth-of-type(3) {
  top: 20px;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  background: #8CBF43;
  transition: all 0.5s ease;
  z-index: 50;
}

.overlay.open {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
.overlay.open:before {
  left: 0;
}
.overlay.open:after {
  right: 0;
}
.overlay.open li {
  animation: fadeInRight 0.5s ease forwards;
  animation-delay: 0.15s;
}
.overlay.open li:nth-of-type(2) {
  animation-delay: 0.25s;
}
.overlay.open li:nth-of-type(3) {
  animation-delay: 0.35s;
}
.overlay.open li:nth-of-type(4) {
  animation-delay: 0.45s;
}
.overlay.open li:nth-of-type(5) {
  animation-delay: 0.55s;
}
.overlay.open li:nth-of-type(6) {
  animation-delay: 0.65s;
}
.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  font-family: 'Vollkorn', serif;
  font-weight: 400;
  text-align: center;
  z-index: 100;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  height: 16.67%;
  height: calc(100% / 6);
  min-height: 50px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
transition:0.5s ease all;
}

.overlay ul li a:hover
{
	color:#000;
}


@keyframes fadeInRight {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.menu-link
{  font-family: 'Playfair Display', serif;
}

label {
  width: 200px;
  display: block;
}


p {
  width: 200px;
}

.contact-block-class
{
	padding:0;
}


form
{
	width:100%;
	position:absolute;
	top:20%;
	left:20%;
}

#col-5-1
{
	width:50vw;
	height:100vh;
	position:absolute;
	left:0;
	top:0;
}

#col-5-2
{
	width:50vw;
	height:100vh;
	position:absolute;
	right:0;
	top:0;
	background-image:url(../img/contact-bg.jpg);
	background-position:right;
	background-size:cover;
	background-repeat:no-repeat;	transition:0.5s all ease;
}

input, textarea
{
	    width: 30vw !important;
    border: none;
    border-bottom: #8CBF43 2px solid;
    padding: 1%;
	     font-family: Raleway, sans-serif !important;
     line-height:150%;
	 font-size:14px;
	 text-align:left;
	 color:#4E4D4D;
	
}



button
{
	border:none;
	background-color:#FFF;
width:20%;
padding:1%;
text-align:center;
		     font-family:Raleway;	 font-size:14px;

	 color:#4E4D4D;
}

#address-container
{
	width:60%;
	position:absolute;
	left:20%;
	top:65%;
	 font-family: Raleway, sans-serif !important;	 font-size:14px;
line-height:150%;
	 color:#4E4D4D;	transition:0.5s all ease;
}

#form-container
{
		transition:0.5s all ease;
}

#address-text, #phone-text
{

	width:50%;
}

#phone-text
{
	position:absolute;
	left:55%;
	top:0;
}

#footer
{
	width:100vw;
	position:absolute;
	bottom:20vh;
	left:0;
	height:8vh;
	background-color:#8CBF43;
	z-index:100;
	transition:0.5s all ease;
}

#social-media-icons
{
}

.business-photo-slider, .business-photo-slider-2 {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.business-photo-slider li, .business-photo-slider-2 li  {
  position: absolute;

}

.business-photo-slider li img, .business-photo-slider-2 li img 
{width:100%;
height:100%;
}

.business-photo-slider li:nth-child(4), .business-photo-slider-2 li:nth-child(6) {
  animation: xfade 8s 0s infinite;
}
.business-photo-slider li:nth-child(3), .business-photo-slider-2 li:nth-child(5) {
  animation: xfade 8s 1.5s infinite;
}
.business-photo-slider li:nth-child(2), .business-photo-slider-2 li:nth-child(4) {
  animation: xfade 8s 3s infinite;
}

.business-photo-slider-2 li:nth-child(3) {
  animation: xfade 8s 4.5s infinite;
}

.business-photo-slider-2 li:nth-child(2) {
  animation: xfade 8s 6s infinite;
}

#myVideo {
     
    height: 100%;
}

@keyframes xfade{
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
}

.menu-open
{
	opacity:0;
}

#copyright-text
{
	color:#FFF;
	font-family: Raleway, sans-serif !important;
     line-height:150%;
	 font-size:14px;
	 text-align:left;
	 margin-left:2.5%;
	 margin-top:1.25%;
}

#social-media-icons
{
	width:20vw;
	position:absolute;
	height:100%;
	right:0;
	top:0;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#FFF;
	font-family: Raleway, sans-serif !important;
     line-height:150%;
	 font-size:14px;
	 text-align:left;
}

.social-media-icon
{
	height:100%;
	width:3vw;
	display:inline-block;
	background-size:60%;
	background-position:center center;
	background-repeat:no-repeat;
}

#icon-1
{
	background-image:url(../img/social-media-icon-01.png);
}
#icon-2
{
	background-image:url(../img/social-media-icon-02.png);
}
#icon-3
{
	background-image:url(../img/social-media-icon-03.png);
}

.mobile
 {
	 display:none;
 }
 
 @media (pointer: coarse) {
	.mobile
 {
	 display:block;
 }
 .desktop
 {
	 display:none;
 }
 
 #mobile-home{
	padding:0;
}

.owl-carousel
{
	width:100vw;
	height:100vh;

}

.owl-slide
{
		width:100vw;
	height:100vh;
		background-size:100%;
		background-position:center center;
		position:relative;
}

.slide-text
{
	font-family: 'Playfair Display', serif;
	font-size:7vw;
	color:#FFF;
	position:absolute;
letter-spacing:0.1vw;
	top:40%;
	left:10%;
	line-height:10vw;
	transition:1s ease all;
}

.slide-line-1
{
	
	height:3px;

	position:absolute;
letter-spacing:0.1vw;
	top:80%;
	left:10%;
	transition:1s ease all;
}

.slide-line-2
{
	
	height:3px;

	position:absolute;
letter-spacing:0.1vw;
	top:20%;
	left:60%;
		transition:1s ease all;
}

#sl-1-1, #sl-2-1, #sl-3-1
{
	width:60%;
}

#sl-3-2, #sl-2-2, #sl-1-2
{
	width:25%;
}

#sl-1-t, #sl-2-t, #sl-3-t
{
	opacity:1;
}

#slide-1
{

	background-size:cover;
}


#slide-2
{
background-size:cover;
}


#slide-3
{
background-size:cover;
}

#desktop-logo, #desktop-logo-dark
{
	width:15vw;
	height:12.5vh;
	position:fixed;
	left:5vw;
	top:0vh;
	
}

#menu-logo
{
	display:none;
}

#desktop-logo-dark
{
	opacity:0;
}

#address-text  .playfair
{
        font-family: 'Playfair Display', serif !important;
}

.button_container {
  position: fixed;
  top: 5%;
  right: 5%;
  height: 32px;
  width: 40px;
  cursor: pointer;
  z-index: 100;
  transition: opacity 0.25s ease;
}

.overlay ul li {
  display: block;

  min-height: auto;
    height: 18.5%;
  position: relative;
  opacity: 0;
}

.overlay ul li a
{
	  display: flex;
  align-items:center;
  justify-content:center;
text-align:center;
}

.menu-link{
	height:60px;
  
 }
 
  .col-1 {
     width:70vw;
     height:50vh;
     position:absolute;
     top:17.5vh;
     left:5vw;
     text-align:left;
     display:block;
}

 .col-2 {
     width:32.5vw;
     height:50vh;
     position:absolute;
     top:40vh !important;
     right:15vw;
     display:flex;
     justify-content:center;
     align-items:center;
}

#col-1-1
{
	opacity:0;
	left:0vw;
		transition:1s ease all;
}
 .col-2 {
     width:90vw;
     height:50vh;
     position:absolute;
     top:45vh;
     left:5vw;
     display:block;
}
#col-1-2
{
	opacity:0;
	right:0vw;
	transition:1s ease all;
}

 .section-line-with-title {
     width:33vw;
     height:20vh;
        padding-top:2.5vh;
     padding-left:2.5vw;
     position:absolute;
     left:0vw;
     bottom:5vh;
     z-index: 100;
	 
	 }
	 
	 .mobile-dot {width:20px;height:20px;margin:5px 7px;background:#D6D6D6;display:inline-block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}
 
 #mobile-tech-dots
 {

	 text-align:center;
	 position:absolute;
	 top:70vh;
	 width:70vw;
 }
 
 .mobile-dot.active {background:#8CBF43}
 
 #mobile-tech-box
 {
	 width:80vw;
	 margin-left:-5vw;
 }
 
  .title-text {
     font-family:Raleway;
     line-height:150%;
     font-weight: 500;
     font-size: 4vw;
     font-style: italic;
     color:#8CBF43;
}

 .col-1 {
     width:80vw;
     height:50vh;
     position:absolute;
     top:15vh;
     left:0vw;
     text-align:left;
     display:block;
     justify-content:center;
     align-items:center;
}

#col-1-1
{
	opacity:0;
	left:7.5vw !important;
		transition:1s ease all;
		font-size:4vw;
}
 
 #mobile-tech-col-1-text, #mobile-tech-col-2-text, .mobile-regular-text , .mobile-title-text, .regular-text
{
     font-family: Raleway, sans-serif;
     line-height:150%;
	 font-size:3.5vw;
	 text-align:left;
	 color:#4E4D4D;
}
	
	#mobile-tech-col-1-excerpt
{
     font-family: 'Playfair Display', serif;
     line-height:150%;
	 font-size:4vw;
	 text-align:left;
	 color:#4E4D4D;
}

.mobile-title-text
{
	color:#8CBF43;     line-height:130%;
	 font-size:4vw; font-weight:bold; text-align:center;
}


#tech-info-2{
	display:none;
	transition:0.5s ease all;
}
#mobile-business-text
{
	width:100vw;
	height:60vh;
	position:absolute;
	left:0;
	top:0;
}
	.mobile-regular-text {
text-align:justify;
}

.mobile-business-text-container
{
	width:80vw;
	height:40vh;
	position:absolute;
	left:10vw;
	top:12.5vh;

}
#mobile-business-image
{
	width:100vw;
	height:35vh;
	position:absolute;
	left:0;
	top:65vh;

}
#mobile-business-dots
{
	width:100vw;
	height:10vh;
	position:absolute;
	left:0;
	top:55vh;

	display:flex;
	align-items:center;
	justify-content:center;
}

.mobile-button
{
	width:50vw;
padding:2vw;
margin: 0 auto;
background-color:#8CBF43;
color:#FFF;
font-size:4vw; font-weight:bold; text-align:center;
}

#mobile-business-2, #mobile-business-3
{
	display:none;
}

.mobile-business-image
{
	width:100%;
	height:100%;
}

#b-m-i-2, #b-m-i-3
{
	display:none;
}
 
 #csr-mobile-options
{
	width:100vw;
	height:40vh;
	position:absolute;
	left:0;
	top:15vh;
}

.csr-mobile-option
{
	width:80vw;
	height:6.5vh;
	margin-left:10vw;
	   line-height:130%;
	 font-size:4vw; font-weight:bold;  text-transform:uppercase;
	 transition:0.5s ease all;
}

.csr-mobile-option.active{color:#8CBF43;  }

#csr-text-box
{
	width:80vw;
	height:30vh;
	position:absolute;
	top:40vh;
	left:10vw;


 }
 
 .csr-image-box
 {
	 width:100vw;
	 height:30vh;
	 position:absolute;
	 top:70vh;
	 left:0;
 	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}

#mobile-edu-image
{
	background-image:url(../img/csr-education-1.jpg);
}

#mobile-health-image
{
	background-image:url(../img/csr-health.jpg);
}

#mobile-human-image
{
	background-image:url(../img/csr-humanitarian.jpg);
}

#mobile-culture-image
{
	background-image:url(../img/csr-cultural.jpg);
}

#mobile-health-image, #mobile-human-image, #mobile-culture-image
{
	display:none;
}
 
 #m-c-t-2, #m-c-t-3, #m-c-t-4
 {
	 display:none;
 }
 
 
 #contact
 {
	 height:auto;
 }
 
#mobile-contact-form
{
	width:100vw;
	height:50vh;
	position:absolute;
	top:15vh;
 	left:0vw;
}

input, textarea
{
	    width: 80% !important;
    border: none;
    border-bottom: #8CBF43 2px solid;
    padding: 1%;
	     font-family: Raleway, sans-serif !important;
     line-height:150%;
	 font-size:3.5vw;
	 text-align:left;
	color:#4E4D4D;
	
}

form
{
	width:100%;
	position:absolute;
	top:20%;
	left:10%;
}

#mobile-contact-photo
{
	height:20vh;
	width:100vw;
	position:absolute;
	top:0;
	left:0;
	background-image:url(../img/contact-bg.jpg);
	background-position:right;
	background-size:cover;
	background-repeat:no-repeat;
}

#mobile-submit
{
	background-color:#8CBF43;
width:80%;
text-align:center;
		     font-family: Raleway, sans-serif !important;	 font-size:4vw;

	 color:#FFF;
}


#mobile-address-container
{
	width:80%;
	position:absolute;
	left:10%;
		top:60%;
	font-family: Raleway, sans-serif !important;	 font-size:3.5vw;
line-height:150%;
	 color:#4E4D4D;	transition:0.5s all ease;
}

#mobile-footer
{
	width:100vw;
	height:7.5vh;
	background:#8CBF43;
	position:absolute;
	top:92.5vh;
	left:0;
	display:flex;
	justify-content:center;
	align-items:center;
	color:#FFF;
	font-size:4vw;
}

.logo-invisible
{
	opacity:0 !important;
}


 }
 
.dark-logo
{
	opacity:1 !important;
}

.contact-underline

{
	border-bottom:#8CBF43 2px solid;
	text-transform:none;
}

#gallery-link
{
	padding:5%;
	position:absolute;
	left:22.5%;
	margin-top:-57.5% !important;
	font-size:1.2em;
	font-weight:bolder;
}   


.external-link a, .external-link button {
  color: #333333;
  
  display: inline-block;
  border: 3px solid transparent;
  position: relative;
  cursor: pointer;
  letter-spacing: 0.07em;
}