/* HTML Elements */

* {
	margin:0;
	padding:0;
	outline:none;
	}


html {
/*Firefox scrollbar fix*/
	}
	
body {
/*Firefox scrollbar fix*/
	}

body  {
	  vertical-align:baseline; color:#317187 !important; font-family:'Raleway', Arial !important; font-size:16px; }
	  
	  body  
	  { overflow-x:hidden
	  }

ul,li
{
  border:0;
  font-size:100%;
  margin:0 auto;
  padding:0;
}

textarea {
	font-family:'Lato-Regular', Arial !important;
	}

input {
	 font-family:'Lato-Regular', Arial !important;
	}

select {
	font: 12px; font-family:'Lato-Regular', Arial !important;
	}

a { text-decoration:none;}
a:hover { text-decoration:underline;}


ul{
	margin:0px auto;
	padding:0px;
}

li{
	
}

a:visited img {
	border:0;
	}

a:link img {
	border:0;	}

img {
	border:0;
	}
	




@-webkit-keyframes mymove1 {
   from {right: 0px;}
    to {right: 400px;}
}

@keyframes mymove1 {
   from {right: 0px;}
    to {right: 400px;}
}


@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 400px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 400px;}
}

.holdall    { float:left; width:100%; height:100%; position:fixed; top:0; left:0 }
.halfzone   { width:50%; position:absolute; height:100%; top:0; left:0; overflow:hidden; }
.imgbg  { position:absolute; width:auto; left:50%; top:50%; height:100%; min-width:100%; 
                    transform: translateY(-50%) translateX(-50%); z-index:1;
     -webkit-transform: translateY(-50%) translateX(-50%); }
.halfzoner   { width:50%; position:absolute; height:100%; top:0; right:0; overflow:hidden; }

.leftzone  { position:absolute; width:auto; right:0; top:50%; margin:0 -420px 0 0;
               transform: translateY(-50%); -webkit-transform: translateY(-50%); z-index:2; 
               -webkit-animation: mymove1 0.5s forwards;  
                     -webkit-animation-delay: 0.5s; 
                      animation: mymove1 0.5s forwards;
                      animation-delay: 0.5s;
}

.leftzone a   { display:inline-block; width:360px; background:rgba(0,0,0,0.5); padding:20px 20px 20px 40px; 
                   text-align:center; text-decoration:none !important;  outline: none; 
     
	-ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;

    
}

.rightzone  { position:absolute; width:auto; right:100%; top:50%; margin:0; z-index:2;  margin:0 0 0 -420px; 
               transform: translateY(-50%); -webkit-transform: translateY(-50%); 
   
               -webkit-animation: mymove 0.5s forwards;  
                     -webkit-animation-delay: 0.5s; 
                      animation: mymove 0.5s forwards;
                      animation-delay: 0.5s;
}

.rightzone a   { display:inline-block; position:relative; width:360px; background:rgba(0,0,0,0.5); padding:20px 40px 20px 20px; 
                    text-align:center; text-decoration:none !important;  outline: none; 

    -ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;


}

.leftzone a i  { position:absolute; font-size:24px; color:#fff; height:30px; line-height:30px; left:20px;
 
                top:50%;  transform: translateY(-50%); z-index:2;
     -webkit-transform: translateY(-50%);}

.leftzone a:hover   {  background:rgba(0,0,0,0.8); 
                       -webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
}

.leftzone a:hover i  {  color:#e89922;  left:10px; text-decoration:none !important; 

                        -webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
}

.rightzone a i  { position:absolute; font-size:24px; color:#fff; height:30px; line-height:30px; right:20px; 
                top:50%;  transform: translateY(-50%); z-index:2;
     -webkit-transform: translateY(-50%);}

.rightzone a:hover   {  background:rgba(0,0,0,0.8); 

                        -webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
}


.rightzone a:hover i  {  color:#e89922;  right:10px; text-decoration:none !important; 

                         -webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
}


.leftzone a img    { max-width:100% }
.rightzone a img    { max-width:100% }

.vision    { position:absolute; z-index:20; background:#fff; padding:10px; top:5%; left:50%; width:155px; height:155px; border-radius:50%; 
             transform: translateY(-5%)  translateX(-50%); 
     -webkit-transform: translateY(-5%)  translateX(-50%);
     -webkit-box-shadow: 0 0 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 5px 0px rgba(0,0,0,0.5);
box-shadow: 0 0 5px 0px rgba(0,0,0,0.5);
}

.vision img    { position:absolute; z-index:21; background:#fff; padding:10px; top:50%; left:50%; width:auto; height:auto;  
             transform: translateY(-50%)  translateX(-50%); 
     -webkit-transform: translateY(-50%)  translateX(-50%);
}


@media (max-width: 767px)  
{
    .vision    {  width:130px; height:130px;  }

    .vision img    { max-width:100px}


    .halfzone   { width:100%;  height:50%; }

    .halfzoner   { width:100%; height:50%; top:50%; }

    .leftzone   {  right:auto; left:50%; top:100%; width:80%; margin:0;  
                    transform: translateY(-100%) translateX(-50%); 
     -webkit-transform: translateY(-100%) translateX(-50%);
    

}

      .leftzone a   {  padding:0; width:100%; }

.rightzone   { right:auto; left:50%; top:0; width:80%; margin:0; 
                    transform: translateY(0%) translateX(-50%); 
     -webkit-transform: translateY(0%) translateX(-50%);
    

}

.rightzone a  { padding:0; width:100% }

   
.rightzone a i   { display:none }
.leftzone a i   { display:none }


.leftzone a img    { max-width:90%; margin:5% }
.rightzone a img    { max-width:90%; margin:5% }

@-webkit-keyframes mymove {
    from {left: 50%; }
    to {left: 50%;}
}

@keyframes mymove {
    from {left: 50%; }
    to {left: 50%; }
}

}

@media (max-width: 360px) {
        .vision    {  width:110px; height:110px;  }

    .vision img    { max-width:80px}


}