body,html,#largeScreen{
			margin: 0;
			padding: 0;
			overflow-y: hidden;
			overflow-x: auto;
		}
		
		#container{
			transition: 0.5s -webkit-filter linear;
			height: 100vh;
			width: 100%;
			max-width: 177.777vh;
			margin: 0 auto;
			position: relative;
		}
		#container:before{
			background-image: url('../images/background_left.png');
			background-size: 100% 100%;
			position: fixed;
			content: " ";
			left: 0;
			width:calc(50vw - 88.885vh);
			height: 100%;
		}
		#container:after{
			background-image: url('../images/background_right.png'); 
			background-size: 100% 100%;
			position: fixed;
			content: " ";
			right: 0;
			width:calc(50vw - 88.885vh);
			height: 100%;
		}
		#background_image{
			height: 100vh;
			width: 100%;
			position: absolute;
		}
		.imageButton{
			cursor: pointer;
			border-radius: 1000px;
			position: absolute;
			width:16%;
			height:16%;
			margin-top:50px;
		}
		

		.imageButton img.cw{
			animation: spin 5s linear infinite;
			animation-play-state: paused;
		}

		.imageButton img.ccw{
			animation: ccwspin 5s linear infinite;
			animation-play-state: paused;
		}	
		.imageButton img{
			border-radius: 1000px;
			transition: box-shadow 1s;
			position: absolute;
			width: 100%;

		}

		.imageButton:hover img{
			animation-play-state: running;	
			animation-duration: 5s !important;
		}

		.imageButton:hover img:first-of-type{
			
			box-shadow: #12bcfa 0 0 20px -7px;
		}

		.imageButton .buttonLabel{
			color: #000000;
			font-family: 'Droid Sans', cursive;
			width: 100%;
			text-align: center;
			margin-left: 50%;
			margin-top: 50%;
			transform: translate(-50%,-50%);
			font-size: 2.5vh;
			padding: 0 30px;
		}

		#circle1{
			top:16%;
			left:19%;
		}
		#circle2{
			top:16%;
			right:19%;
		}

		#circle3{
			bottom:25%;
			left:19%;
		}

		#circle4{
			bottom:25%;
			right:19%;
		}
		#logo{
			position: absolute;
			width: 16%;
			top:0%;
			left:50%;
			transform: translateX(-50%);
		}

		#footer{
			position: absolute;
			bottom:0%;
			left:50%;
			transform: translateX(-50%);
			padding: 0;
		}

		#contact_us{
			position: relative;
			height: 6vw;		
			width: 28.4832vw;
		}


		#contact_us img {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
		}

		#contact_us:hover #contact_us_bg{
			/*animation: contactUsBgHover 1s linear infinite;*/
		}

		#contact_us:hover #contact_us_icon{
			/*opacity: 1;
			animation: contactUsIconHover 1s linear infinite;*/
		}
		#contact_us_bg{
			animation: contactUsBg 2.5s linear;
			height: 20%;
			transition: all 1s;
		}

		#contact_us:hover #contact_us_bg{
			height: 100%;

		}

		#contact_us_icon{
			transition: all 1s;
			
			height: 60%;
			width: unset !important;
			transform: translate(-50%,-40%) !important;
			cursor: pointer;
			/*animation: contactUsIcon 2.5s linear;*/
		}

		.small_logo{
			transform: translateX(-80%);
			background-color: rgba(0,0,0,0.1);
			width:40px;
			height: 40px;
			border-radius: 1000px;
			margin-top: 15px;
			margin-left: 0px;
			float: left;
		}

		.small_logo img{
			margin-top: 20%;
			height: 60%;
			margin-left: auto;
			margin-right: auto;
			margin-left: 30%;
		}

		#circleCenter{
			top:30%;
			left: 37%;
			width: 26%;
		}

		#circleCenter .buttonLabel{
			font-family: 'Droid Sans', sans-serif !important;
			font-size: 20px;
		}

		#circleCenter img{
			border-radius: 1000px;
			box-shadow: #1fffff 0 0 0px -5px;
			animation-duration: 30s;
			animation-play-state: running;	
		}

		#circleCenter:hover img{
			animation-duration: 30s !important;
		}
		

		#particles-js{
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  
		  /*background-color: rgba(100,200,150,0.3);*/
		  background-image: url('');
		  background-size: cover;
		  background-position: 50% 50%;
		  background-repeat: no-repeat;
		}

		.popup{

			border-radius: 0;
			width: 100%;
			max-width:177.77vh;	
			height: 100vh ;
			opacity: 1;
			max-width: 177.77vh;
			margin:0 auto;
			margin-left: calc(50vw - 88.885vh);
			position: absolute;
			top:0;
			bottom:0;
			background-color: rgba(255,255,255,0.5);
			transform: none;
			padding: 0;
			animation: popup 0.5s linear;
	  		
		}

		.popup .title{
			font-family: Arial;
			padding-left: 30px;
			line-height: 50px;
			color: #fff;
			margin-top: 80px;
			animation: popupChild 0.3s ease-in forwards;
		}

		.popup .popup_content{
			color: #666;
			font-family: "Droid Sans", cursive;
			line-height: 25px;
			top:75px;
			-moz-top:auto	;
			position: absolute;
			width:calc(50% - 125px);
			max-height: calc(100vh - 75px);
			padding: 0 50px;
			margin:0;
			float:left;
		}

		.popup .tile_1{
			
			overflow: hidden;
			bottom: 0px;

			
		}

		.popup .tile_1 img{
			
			max-width: 100%;
			/*height: 100%;*/
		}

		.popup .tile_2{
			/*padding-top: 50%;*/
			overflow-y: auto;
			margin-left:calc(50% - 25px); 
			bottom:0;
		}

		.popup .tile_2_content{
			
			
		}

		.popup  .slideUp {
			animation: slideUp 0.5s linear forwards;
		}

		.popup  .slideDown {
			animation: slideDown 0.5s linear forwards;
		}

		.popup  .slideUpHide {
			animation: slideUp 0.5s linear forwards;
		}

		.popup  .slideDownHide {
			animation: slideDown 0.5s linear forwards;
		}

		.popup .menu{
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			/*margin-left: 10px;*/
			z-index: 1;
		}

		.popup .content_title{
			position: absolute;
			left: 0;
			margin-left: 25px;
			bottom: 0px;
			transform: rotate(-90deg);
			z-index: 1;
			font-family: Jura;
			color:#666;
			transform-origin: left;
    		transform: translateY(-50%) rotate(-90deg) ;

		}

		.popup .menuContents{
			color:#fff;
		}

		.popup .menuContents li{
			font-family: "Droid Sans";
			cursor: pointer;
			transition: color 0.5s,font-size 0.25s;
		}

		.popup .menuContents li:hover{
			color:#999;
			font-size: 17px;
		}

		.popup .menuContents ul{
			margin-left: 50%;
			transform: translate(-50%,-50%);
			text-align: center;
			margin-top: 25%;
			list-style: none;
			line-height: 35px;
			font-family: Jura;
			font-size: 20px;
		}
		.popup .menuContents:after{
			margin-left: -25px;
			background-color: rgba(255,255,255,0.9);
			height: 75px;
			width: calc(100% + 25px);
			content: " ";
			display: block;
			top: 100%;
			position: absolute;
			max-width: 177.77vh;


		}

		.popup .scroll{
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			margin-right: 10px;
		}

		.popup .scroll ul li{
			cursor: pointer;
			color: #333;
			font-size: 20px;
		}

		.popup .scroll ul li:before{
			display: block;
			/*transition: padding-left 0.5s,width 0.5s;*/
			padding-left: 10px;
			width:15px;
			content: "\25cb";
			
		}
		.popup .scroll ul li.active:before{
			content: "\26ab";
			padding-left: 9px;
			width: 16px !important;
		}

		.popup img{
			max-width: 100%;
		}
		

		.textInput{
			width: 100%;
			padding: 5px;
			border-radius: 5px;
			border:1px #666 solid;
			background-color: rgba(255,255,255,0.1);
		}

		.submit{
			padding: 15px 30px;
			font-size: 16px;
			background: rgba(0,0,0,0.2);
			border:none;
			color: #333;
			border-radius: 7px;
		}

		.success{
			padding: 6px;
			border-radius: 5px;
			color: #069;
			background: rgba(200,225,255,0.5);
			border: 1px solid #09c;
			width: 100%;
			display: block;
		}

		.erro,.error{
			padding: 6px;
			border-radius: 5px;
			color: #600;
			background: rgba(255,200,200,0.5);
			border: 1px solid #600;
			width: 100%;
			display: block;
		}
		/*.popup > *{

			animation: popupChild 0.7s ease-in forwards;

		}*/



		.lineUp{
			position: fixed;
			height: 150px;
			width: 1px;
			animation: moveUp 1s linear forwards;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b3dced+0,27363b+50,bce0ee+100&0+0,1+50,0+100 */
			background: -moz-linear-gradient(top,  rgba(179,220,237,0) 0%, rgba(39,54,59,1) 50%, rgba(188,224,238,0) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  rgba(179,220,237,0) 0%,rgba(39,54,59,1) 50%,rgba(188,224,238,0) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  rgba(179,220,237,0) 0%,rgba(39,54,59,1) 50%,rgba(188,224,238,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b3dced', endColorstr='#00bce0ee',GradientType=0 ); /* IE6-9 */

		}

		.lineRight{
			position: fixed;
			width: 150px;
			height: 1px;
			animation: moveRight 1s linear forwards;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b3dced+0,27363b+50,bce0ee+100&0+0,1+50,0+100 */
			background: -moz-linear-gradient(left,  rgba(179,220,237,0) 0%, rgba(39,54,59,1) 50%, rgba(188,224,238,0) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(left,  rgba(179,220,237,0) 0%,rgba(39,54,59,1) 50%,rgba(188,224,238,0) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to right,  rgba(179,220,237,0) 0%,rgba(39,54,59,1) 50%,rgba(188,224,238,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b3dced', endColorstr='#00bce0ee',GradientType=1 ); /* IE6-9 */

		}


		.blur,.menuContents:after{
			-webkit-filter: blur(10px);
			-moz-filter: blur(10px);
			-o-filter: blur(10px);
			-ms-filter: blur(10px);
			filter: blur(10px);
			overflow: hidden;

		}

		.nav-icon {
		  margin: 0em;
		  width: 30px;
		  cursor: pointer;
		}

		.nav-icon:after, 
		.nav-icon:before, 
		.nav-icon div {
		  background-color: #666;
		  -o-border-radius: 3px;
		  -moz-border-radius: 3px;
		  -ms-border-radius: 3px;
		  -webkit-border-radius: 3px;
		  border-radius: 3px;
		  content: '';
		  display: block;
		  height: 3.75px;
		  margin: 5.25px 0;
		  -moz-transition: all .2s ease-in-out;
		  -webkit-transition: all .2s ease-in-out;
		  transition: all .2s ease-in-out;
		}
		.nav-icon[active]:before {
		  transform: translateY(9px) rotate(135deg);
		  -moz-transform: translateY(9px) rotate(135deg);
		  -webkit-transform: translateY(9px) rotate(135deg);
		}

		.nav-icon[active]:after {
		  transform: translateY(-9px) rotate(-135deg);
		  -moz-transform: translateY(-9px) rotate(-135deg);
		  -webkit-transform: translateY(-9px) rotate(-135deg);
		}

		.nav-icon[active] div {
		  -moz-transform: scale(0);
		  -webkit-transform: scale(0);
		  transform: scale(0);
		}

		@keyframes slideUp { 
			0%{ opacity: 0;margin-top: 500px} 
			100%{opacity: 1; margin-top: 0px;}
			
		}

		@keyframes slideDown { 
			0%{ opacity: 0;margin-top: -500px} 
			100%{opacity: 1; margin-top: 0px;}
		}

		@keyframes slideUpHide { 
			0%{opacity: 1; margin-top: 0px;}
			100%{ opacity: 0;margin-top: 500px} 
		}

		@keyframes slideDownHide { 
			
			0%{opacity: 1; margin-top: 0px;}
			100%{ opacity: 0;margin-top: -500px} 
			
		}

		@keyframes moveUp { 
			0%{ opacity: 0;} 
			50% { opacity: 0.30; } 
			100%{opacity: 0; margin-top: -300px;display: none;}
			
		}

		@keyframes moveRight { 
			0%{ opacity: 0;} 
			50% { opacity: 0.30; } 
			100%{opacity: 0; margin-left: 300px;display: none;}
			
		}

		@keyframes popup { 
			0%{ width: 0;height: 10;opacity: 0;top:random(0, 100)vh;} 
			30% { width: 50vh;height: 50vh } 
			80%{border-radius: 400px;width: 177.77vh;height: 100vh }
			100%{border-radius: 0;width: 100%;max-width:177.77vh;	height: 100vh ;opacity: 1;top:0;transform: none;margin-left: 0;}
		}

		@keyframes popupChild { 
			0%{ opacity: 0; margin-top: -50px;} 
			50% { opacity: 0;margin-top: -50px;} 
			100%{opacity: 1;margin-top: 0;}
		}

		@keyframes contactUsBg { 
			0%{ height:0; } 
			20% { height: 100%; } 
			80%{height:100%; }
			100%{height:20%; }
		}

		@keyframes contactUsIcon { 
			0%{ opacity:0; } 
			20% { opacity: 1; } 
			80%{opacity:1; }
			100%{opacity:0; }	
		}

		@keyframes contactUsIconHover { 
			0%{ transform: translate(-50%,-40%) rotate(0); } 
			5% { transform: translate(-50%,-40%) rotate(-5deg); } 
			10%{transform: translate(-50%,-40%) rotate(5deg); }
			15% { transform: translate(-50%,-40%) rotate(-5deg); } 
			20%{transform: translate(-50%,-40%) rotate(5deg); }
			25% { transform: translate(-50%,-40%) rotate(-5deg); } 
			30%{transform: translate(-50%,-40%) rotate(5deg); }
			35%{transform: translate(-50%,-40%) rotate(0deg); }
			
			100%{transform: translate(-50%,-40%) rotate(0deg); }
		}


		@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
		@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
		@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

		@-moz-keyframes ccwspin { 100% { -moz-transform: rotate(-360deg); } }
		@-webkit-keyframes ccwspin { 100% { -webkit-transform: rotate(-360deg); } }
		@keyframes ccwspin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }
	

@media only screen and (orientation:portrait){
	*{
		font-family: 'Droid Sans';
	}
	#largeScreen,.line{
		display: none;
	}
	#smallScreen{
		display: block;
	}

	.popup{
		display: none;
	}

	.navigation {
  /* critical sizing and position styles */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  
  /* non-critical appearance styles */
  list-style: none;
  background: #111;
}

/* Navigation Menu - List items */
.nav-item {
  /* non-critical appearance styles */
  width: 200px;
  border-top: 1px solid #111;
  border-bottom: 1px solid #000;
}

.nav-item a {
  /* non-critical appearance styles */
  display: block;
  padding: 1em;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  color: white;
  font-size: 1.2em;
  text-decoration: none;
  transition: color 0.2s, background 0.5s;
}

.nav-item a:hover {
  color: #c74438;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
}

/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
  /* Critical position and size styles */
  height: 100vh;
  width: 100%;
  background-color: white; /* Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  overflow:auto;
  /* non-critical apperance styles */
  padding: 5em 1em 1em 1em;
  
  background-size: 200%;
}

.header {
  /* Critical position and size styles */
  height: 4em;
  margin-left: 0;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  transition: left 0.2s;
  background-color: #fff;
  /* non-critical apperance styles */
}

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px; top: 15px;
  z-index: 3;
  
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
  background-size: contain;
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: left 0.2s;
}

.nav-trigger:checked + label {
  left: 215px;
}

.nav-trigger:checked ~ .site-wrap {
  left: 200px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
.nav-trigger:checked ~ .header {
  left: 200px;
  right:unset;
}

/* Additional non-critical styles */

h1, h3, p {
  
  margin: 0 auto 1em;
}

code {
    padding: 2px;
    background: #ddd;
}

/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}

}

@media only screen and (orientation:landscape){
	#largeScreen,.line{
		display: block;
	}
	#smallScreen{
		display: none;
	}

}

@media only screen and (max-width: 1100px){
	.popup{
		margin-left: 0;
	}
}

img{
	max-width: 100%;
}
p{
	font-family: "Droid Sans";
	text-align: justify;
}

#left-menu 
{
	position:absolute;
	top:70px;
	left:29%;
	background:#fff;
	display:inline-block;
	padding:10px;
	width:50%;
}

#left-menu a 
{
	text-decoration:none;
	color:#444;
	font-family: "Droid Sans";
}

.navbar {
    overflow: hidden;
    font-family: Arial;
	color:#444;
}

.navbar a {
    font-size: 16px;
    color: #333 !important;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    overflow: hidden;
	float:left;
	margin-right:30px;
}

.dropdown .dropbtn {
    font-size: 18px;    
    border: none;
    outline: none;
    color: #444;
    padding: 14px 16px;
    background-color: inherit;
	font-weight:700;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #eee;
	color:#444;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    width: 700px;
    left: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    height:400px;
}

.dropdown-content .header {
    background: #fefefe;
    padding: 16px;
    color: #444;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 30%;
    padding: 10px;
    background-color: #fefefe;
    height: 250px;
}

.column a {
    float: none;
    color: black;
    padding: 5px;
    text-decoration: none;
    display: block;
    text-align: left;
	font-size:14px;
	text-transform:none;
}

.column a:hover {
    background-color: #ddd;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

h3#sub-menu-head 
{
	font-size:14px;
}

.column ul 
{
	padding:0px;
	margin:0px;
	padding-left:30px;
}

.column ul li
{
	margin-top:10px;
	font-size:13px;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column {
        width: 100%;
        height: auto;
    }
}

#content-div
{
	position:absolute; 
	width:70%; 
	margin-left:15%; 
	top:150px; 
	overflow-y:scroll; 
	overflow-x:hidden; 
	height:500px;
	font-family: 'Droid Sans', cursive;
	line-height:24px;
	font-size:14px;
}

#content-div img 
{
	width:100%;
	margin-bottom:15px;
}

a.menu-item
{
	padding-top:12px;
	display:inline-block;
	font-weight:700;
	font-size:18px;
	margin-right:30px;
}

#column2
{
	width:40%;
}

.client 
{
	width:33%;
	float:left;
	padding:5px;
	margin-right:30px;
	min-height:140px;
}