
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
@font-face {
    font-family: "BentonSans-Light";
    font-style: normal;
    font-weight: normal;
    src: url("BentonSans-Light.eot?") format("embedded-opentype"), local('?'), url("fonts/BentonSans-Light.otf"), url("fonts/BentonSans-Light.woff"), url("fonts/BentonSans-Light.ttf") format("truetype"), url("fonts/BentonSans-Light.svg") format("svg");
}

@font-face {
    font-family: "BentonSansBook";
    font-style: normal;
    font-weight: normal;
    src: url("BentonSans-Book.eot?") format("embedded-opentype"), local('?'), url("fonts/BentonSans-Book.otf"), url("fonts/BentonSans-Book.woff"), url("fonts/BentonSans-Book.ttf") format("truetype"), url("fonts/BentonSans-Book.svg") format("svg");
}

@font-face {
    font-family: "BentonSansRegular";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/BentonSans-Regular.eot?") format("embedded-opentype"), local('?'), url("fonts/BentonSans-Regular.otf"), url("fonts/BentonSans-Regular.woff"), url("fonts/BentonSans-Regular.ttf") format("truetype"), url("fonts/BentonSans-Regular.svg") format("svg");
}
@font-face {
    font-family: "BentonSansMedium";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/BentonSans-Medium.eot?") format("embedded-opentype"), local('?'), url("onts/BentonSans-Medium.otf"), url("fonts/BentonSans-Medium.woff"), url("fonts/BentonSans-Medium.ttf") format("truetype"), url("fonts/BentonSans-Medium.svg") format("svg");
}
@font-face {
    font-family: "BentonSansBold";
    font-style: normal;
    font-weight: normal;
    src: url("BentonSans-Bold.eot?") format("embedded-opentype"), local('?'), url("fonts/BentonSans-Bold.otf"), url("fonts/BentonSans-Bold.woff"), url("fonts/BentonSans-Bold.ttf") format("truetype"), url("fonts/BentonSans-Bold.svg") format("svg");
}

html{background:#000;}

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1.2vw;
    line-height: 1.3vw; margin: 0; padding:0;
}
html,
button,
input,
select,
textarea {
     font-family: "BentonSansRegular";
}
a:focus {
    outline: 0px dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}
/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: top;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #F2F2F2;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Parallax Scroll
   ========================================================================== */
body, html {
	height: 100%;
	min-height: 100%;
	 width:100%;   
}
body {
	height: auto !important; background: #fff url(../images/bg.png) no-repeat bottom center; background-size: 100%;
}
#preloader {
	display: none;
	width: 1px;
	height: 1px;
	visibility: none;
}
.no-js {
	padding-top: 0px;
}
h2 {
	margin-top: 0;
}
.loading {
	background: url('../img/ico_loading.gif') no-repeat center center;
}
.loading main {
	background: none;
}
section {
	width: 100%;
	
}
.loaded section{z-index:11;}
.loaded main.linezindexunder section{z-index:1;}
.loaded section,
.no-js section { 
    position: relative;
	/*opacity: 1;
	-webkit-transition: opacity 300ms ease-out;
	-moz-transition: opacity 300ms ease-out; 
	transition: opacity 300ms ease-out;*/
}
main {
	overflow-x: hidden;
}

.bcg {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
}


/* Slide 1 */
a{text-decoration: none;}

.contentsec {     width: 80%;  margin: 0 auto; position: relative;}
.footer{padding:1.5vw 0 3vw 0; width:100%; position: fixed; bottom: 0; left:0; color:#fff; background: #000 url(../images/bg1.png) no-repeat bottom center; background-size: 100%; z-index: 11; transition: height 1.5s ease; height:3vh;     transition-delay: 0.2s;}
.footer.fheight{height:28vh;}
.footer.fpos_rel{/*position: relative;*/}
.footer-wrapper{position: relative; width:90%; margin: 0 auto;}
.column2{display: flex;  align-items: center;text-align: left; width:66%; margin: 0 auto; }

.columnwidth20{width:14%;}
.columnwidth20 img{width:11vh;}
.columnwidth50{width:80%; font-size: 1.5vw;line-height: 1.8vw;}
.smalltext{font-size:0.7vw; margin:2vw 0;}
.copyright{width:100%; font-size: 0.7vw;}
.width55{width:54%; display: inline-block;}
.width45{width:45%; display: inline-block; text-align: right;}
.width45 img{width:13vw; vertical-align: middle;}
.fhead1{font-family: "BentonSansBold";}
.columnwidth50 a{font-family: "BentonSansMedium";}

.footer_sec { position: fixed; bottom:0; left:0; width:100%; padding: 5px 0; font-size:0.8vw; z-index: 111;}
.footer_wrapper1{ padding:0 5%; width:90%;}
.footer_socialshare{ display:inline-block; width:48%; color:#fff;}
.footer_links{display:inline-block; width:50%; text-align:right; margin:0 -8% 0 24px;}
.footer_links a{ padding:0 5px; color:#fff;}
.footer_socialshare img{ width:23px; margin:0 2px; vertical-align:middle;}

.color_blue{ color:#00A1E4;}
.color_blue1{ color:#0066B3;}
.color_green { color: #76b828;}
.color_orange {   color: #fa9100;}
.color_yellow{color:#fdb913;}
.color_yellow1{color:#F0AB00;}
.color_purple {  color: #ab218e;}

.bs, .bcg, .bcg1, .bcg2 {background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;z-index: 11; }

/* Slide 2 */

.rline{ display:none;}
.vid .rline{ display:block;}

.patr{position: absolute; top:0; right:0;}
.patl{position: absolute; top:0; left:0;}
.pabr{position: absolute; bottom:0; right:0;}
.pabl{position: absolute; bottom:0; left:0;}

.logo{position: absolute; left:-4.9vw; top:1vw;}
.logo img{width:5vw;}
.download_icon{position: absolute; right:-6vw; top:1vw; z-index: 111;}
.download_icon img{width:2.2vw;}

section#slide-1 {    min-height: 130vh; margin: 0vh 0 0 0; padding: 0 0 29vh 0;}
section#slide-1.no-padding{ }
#dvContent0{  display: block; width: 100%; height: 100%; position: relative; min-height: 50vh; margin: 0vw 0 0 0;text-align: left; }
#dvContent1{  display: block; width: 100%; height: 100%; position: relative;text-align: left; margin: -14vw 0 0 0.05vw;}
#dvContent2{  display: block; width: 100%; height: 100%; position: relative;text-align: left;  margin: -0.1vw 0 0 0.16vw;}
#dvContent3{  display: block; width: 100%; height: 100%; position: relative;text-align: left;  margin: -1.5vw 0 -14vw 0.09vw;}


#dvContent0{height:100vh;}
#dvContent0.hauto{ }
.bg0 {  position: absolute; bottom: 0; height: 33vw;}

.f_ani{opacity: 0;}
.bg0 { width:100%;}
.bg0.grow1, .bg0.grow1pos-rel{position: relative;}
.stemsec{width:70vw; margin: 0 auto; position: relative;}
.stemimg{width:70vw; }
.stem1{margin:0vw 0 0 0;}
.leaf1{position: absolute; width: 19.3vw; left: 51.79vw; top:-7.8vw;transform: scale(0); }
.leaf2{position: absolute; width: 6.3vw; left: 49vw; top: 20.5vw; transform: scale(0); transform-origin: top; }
.stem3{margin:-14.25vw 0 0 0;}
.stemorange, .stempurple, .stemblue{transform: scale(0); transform-origin: bottom;}

.leftani{ position: absolute; left: 40vw;
    width: 25vw;
    overflow: hidden;
    top: 17.6vw;
    height: 3vw;}
.leftaniimg{width:22vw;}

.pgrow1{transform: scale(0);}

.leaf3{position: absolute; width: 6.3vw; left: 34.5vw; top: 26.7vw; transform: scale(0); transform-origin: left; }

.head1{ position: absolute; left: 6vw; top:-3vw; font-family: "BentonSansMedium"; font-weight: normal;font-size: 4.9vw;line-height: 5vw;  text-align: left; transform: translateX(-2000px);}
.head1a{font-size: 2.4vw;  line-height: 2.8vw;font-family: "BentonSansRegular";
    position: absolute;   left: 6vw;top: 12vw;}
.lefttext{position: absolute; left:0.5vw; top:8.5vw; text-align: right; font-size: 1.34vw;line-height: 1.5vw;  width:31vw;}
.righttext{position: absolute; right: -3vw;  top: 0.5vw; text-align: left; font-size: 1.3vw; line-height: 1.5vw;  width: 37vw;}
.head2 {font-size: 1.5vw; line-height: 1.8vw; font-family: "BentonSansBold";}
.stemsec2, .width100{width:100%; height: 100%;}
strong{font-family: "BentonSansMedium"; font-weight: normal;}

.icon1{position: absolute; left: 36vw; top:5vw;}
.icon1 img{width:9.5vw;}

.icon2{position: absolute; left: 17vw; top:-1.2vw;}
.icon2 img{width:14vw;}

.left_circlesec{position: absolute; left: 19.1vw; top: 19vw; width: 15vw; height: 12vw; z-index: 1; }
.iconline{width:15vw;}
.circle_icon{width:15vw; transform: scale(0); }
.icon3{position: absolute; left: 1.2vw;  top: 1.5vw; overflow: hidden;}
.icon3img{width:6vw;}
.slidedown{transform: translateY(-100%);}

.right_circlesec{position: absolute; left: 33.3vw; top: 15vw; width: 15vw; height: 12vw; z-index: 1;}
.icon4{position: absolute; left: 6.8vw;  top: 2vw;  width: 6vw;  height: 6vw;}
.icon4img{width:6vw;}

.lefttextblock{position: absolute; left: 4.1vw;  top: 26vw;  z-index: 0;  width: 29vw; }
.righttextblock{position: absolute; left: 43vw; top: 16vw; width: 29vw; z-index: 0;}
.lefttextblock:before {  content: " ";  position: absolute;  right: 0;  top: -2.4vw;  width: 11vw;  height: 3vw;  background: #eee;	border-radius: 0 2.8vw 0vw 0vw;}
.grayblock{ background: #eee; border-radius: 2vw;}
.twrapper {    padding: 2vw 1.5vw 1.8vw;}
.righttextblock .twrapper {    padding: 2vw 1.5vw 1.5vw 6.2vw;}
.text2{ font-size: 1.3vw; line-height: 1.5vw; font-family: "BentonSansBold";}
.text3{font-size: 1.9vw; margin:1.5vw 0 0.5vw 0; font-family: "BentonSansBold"; }
.text4{font-size: 0.9vw; line-height: 1.1vw; margin: 0 0 1vw 0; font-family: "BentonSansBook";}
sup{line-height: 0.6vw;}

.lefttext1{position: absolute; left:-1vw; top:15vw; text-align: right; font-size: 1.34vw;line-height: 1.5vw;  width:33vw;}
.icon5{position: absolute; left: 35.5vw; top:12vw;}
.icon5 img{width:17.5vw;}

.quote{background: #fff; border-radius: 2vw; width: 45vw; position: absolute; left: 10vw; top: 32vw; font-family: "BentonSansBook"; padding: 1.7vw;
    border: 0.1vw solid #0070ad;}
.quote:before{ content: " "; position: absolute; width: 4vw; height: 3vw; left: 1.7vw; top: -1.5vw; background: url(../images/quote.png) no-repeat top left; background-size: 3vw;}
.qtext1{ font-size:1.4vw; line-height: 1.8vw; margin:0 0 0.7vw 0; }
.qtext2{color:#8a8c8e; font-size:0.85vw; line-height: 1.1vw;}
.slideup{opacity: 0;}

.lani{opacity: 0;}
body.loaded .lani{opacity: 1;}
#dvContent5, #dvContent5m{z-index: 11;}
#dvContent6{z-index: 1; align-items: center;}

#myartvideo{    width: 70%; display: none;}
.sec1.vid #myartvideo{    }
.videoshow #myartvideo{   display: block;margin: 0 auto;}

.plaxEl {z-index: 11;}
/* Slide 3 */

.downarrow{position:absolute;  right: 3.5vw;  top: -4vw;  width: 2.3vw;}
.m_scroll_arrows
{
  display: block;
  width: 5px;
  height: 5px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
  border-right: 4px solid #0066B3;
  border-bottom: 4px solid #0066B3;
  margin: 0 0 3px 4px;
  width: 10px;
  height: 10px;
}


.unu
{
  margin-top: 1px;
}

.unu, .doi, .trei
{
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;
  
}

.unu
{
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  animation-delay: alternate;
}

.doi
{
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
  animation-delay: .2s;
  animation-direction: alternate;
   margin-top: -6px;
}

.trei
{
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
  animation-delay: .3s;
  animation-direction: alternate;
  margin-top: -6px;
}
@-webkit-keyframes mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}


.animatable {
  
  /* initially hide animatable objects */
  visibility: hidden;
  
  /* initially pause animatable objects their animations */
  -webkit-animation-play-state: paused;   
  -moz-animation-play-state: paused;     
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;   
  animation-play-state: paused; 
}

/* show objects being animated */
.animated {
  visibility: visible;
  
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}

.animated.rightblock1  {
	-webkit-animation: bounceInRight 1s 1 0.5s linear both;
	-moz-animation: bounceInRight 1s 1 0.5s linear both;
	-o-animation: bounceInRight 1s 1 0.5s linear both;
	animation: bounceInRight 1s 1 0.5s linear both;
}
.animated.leftblock1  {
	-webkit-animation: bounceInLeft 1s 1 0s linear both;
	-moz-animation: bounceInLeft 1s 1 0s linear both;
	-o-animation: bounceInLeft 1s 1 0s linear both;
	animation: bounceInLeft 1s 1 0s linear both;
}
.animated.leftblock2  {
	-webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
}
.animated.slideInLeft {
	-webkit-animation-name: slideInLeft;
	-moz-animation-name: slideInLeft;
	-o-animation-name: slideInLeft;
	animation-name: slideInLeft;
}
.animated.slideInLeft1{
	-webkit-animation: slideInLeft1 0.5s 0s 1 linear both;
	-moz-animation: slideInLeft1 0.5s 0s linear both;
	-o-animation: slideInLeft1 0.5s 0s linear both;
	animation: slideInLeft1 0.5s 0s linear both;	
}
.animated.slideInLeft2{
	-webkit-animation: slideInLeft1 0.5s 0s 1 linear both;
	-moz-animation: slideInLeft1 0.5s 0s linear both;
	-o-animation: slideInLeft1 0.5s 0s linear both;
	animation: slideInLeft1 0.5s 0s linear both;	
}
.animated.slideInLeft3{
	-webkit-animation: slideInLeft1 0.5s 0s 1 linear both;
	-moz-animation: slideInLeft1 0.5s 0s linear both;
	-o-animation: slideInLeft1 0.5s 0s linear both;
	animation: slideInLeft1 0.5s 0s linear both;	
}

.sec3 .plaxEl.skrollable-after .fullwidth{/*display: flex;*/}
.coloraniblock .animated.color_green {
	-webkit-animation: bounceInLeft0 1.5s 1 0.7s both linear;
	-moz-animation: bounceInLeft0 1.5s 1 0.7s both linear;
	-o-animation: bounceInLeft0 1.5s 1 0.7s both linear;
	animation: bounceInLeft0 1.5s 1 0.7s both linear;}
.coloraniblock .animated.color_pink {
	-webkit-animation: bounceInLeft1 1.5s 1 0.5s both linear;
	-moz-animation: bounceInLeft1 1.5s 1 0.5s both linear;
	-o-animation: bounceInLeft1 1.5s 1 0.5s both linear;
	animation: bounceInLeft1 1.5s 1 0.5s both linear;}
.coloraniblock .animated.color_blue {
	-webkit-animation: bounceInLeft2 1.5s 1 0.1s both linear;
	-moz-animation: bounceInLeft2 1.5s 1 0.1s both linear;
	-o-animation: bounceInLeft2 1.5s 1 0.1s both linear;
	animation: bounceInLeft2 1.5s 1 0.1s both linear;}
.animated.color_green .ctext {
	-webkit-animation: widthani 0.5s 1 1s linear both;
	-moz-animation: widthani 0.5s 1 1s linear both;
	-o-animation: widthani 0.5s 1 1s linear both;
	animation: widthani 0.5s 1 1s linear both; opacity: 1;
}
.animated.color_pink .ctext {
	-webkit-animation: widthani 0.5s 1 1s linear both;
	-moz-animation: widthani 0.5s 1 1s linear both;
	-o-animation: widthani 0.5s 1 1s linear both;
	animation: widthani 0.5s 1 1s linear both; opacity: 1;
}
.animated.color_blue .ctext {
	-webkit-animation: widthani 0.5s 1 1s linear both;
	-moz-animation: widthani 0.5s 1 1s linear both;
	-o-animation: widthani 0.5s 1 1s linear both;
	animation: widthani 0.5s 1 1s linear both; opacity: 1;
} 
.animated.moveUp1, .animated.moveUp {
	-webkit-animation-name: moveUp;
	-moz-animation-name: moveUp;
	-o-animation-name: moveUp;
	animation-name: moveUp;
}
.animated.bounceIn {
	-webkit-animation-name: bounceIn;
	-moz-animation-name: bounceIn;
	-o-animation-name: bounceIn;
	animation-name: bounceIn;
}

@-webkit-keyframes widthheight {
	0% {width:0px;height:0px; top:30%;	}		
	100% {	width:100%;height:194%; top:-28%;	}
}

@-moz-keyframes widthheight {
	0% {width:0px;height:0px;top:30%;	}		
	100% {	width:100%;height:194%;top:-28%;	}
}

@-o-keyframes widthheight {
	0% {width:0px;height:0px;top:30%;	}		
	100% {	width:100%;height:194%;top:-28%;	}
}
@keyframes widthheight {0% {width:0px;height:0px;top:30%;	}100% {	width:100%;height:194%;top:-28%;	}}

@-webkit-keyframes heightani {	0% {height:0px;	}	100% {	height:100%;	}}
@-moz-keyframes heightani {	0% {height:0px;	}	100% {	height:100%;	}}
@-o-keyframes heightani {	0% {height:0px;	}	100% {	height:100%;	}}
@keyframes heightani {0% {height:0px;	}	100% {	height:100%;	}}

@keyframes widthani {0% {width:0px;	}	100% {	width:100%;	}}
@-webkit-keyframes widthani {0% {width:0px;	}	100% {	width:100%;	}}
@-moz-keyframes widthani {0% {width:0px;	}	100% {	width:100%;	}}
@-o-keyframes widthani {0% {width:0px;	}	100% {	width:100%;	}}
@keyframes widthani {0% {width:0px;	}	100% {	width:100%;	}}

@-webkit-keyframes heightani1 {0% {height:0px;	}	100% {	height:65%;	}}
@-moz-keyframes heightani1 {0% {height:0px;	}	100% {	height:65%;	}}
@-o-keyframes heightani1 {0% {height:0px;	}	100% {	height:65%;	}}
@keyframes heightani1 {0% {height:0px;	}	100% {	height:65%;	}}

@-webkit-keyframes bounceInLeft0 {
	0% {opacity: 1;	-webkit-transform: translateX(0%);	}	
	50% {opacity: 1;	-webkit-transform: translateX(0%); margin-top:0; height: 33vh;}
	100% {	opacity: 1;-webkit-transform: translateX(0%); 	margin-top:-4vh;height: 12vh;}
}

@-moz-keyframes bounceInLeft0 {
	0% {opacity: 1;	-moz-transform: translateX(0%);}	
	50% {opacity: 1;	-moz-transform: translateX(0%);margin-top:0; height: 33vh;}
	100% {	opacity: 1;-moz-transform: translateX(0%);	margin-top:-4vh;height: 12vh;	}
}

@-o-keyframes bounceInLeft0 {
	0% {opacity: 1;	-o-transform: translateX(0%);}	
	50% {	opacity: 1;	-o-transform: translateX(0%);margin-top:0;height: 33vh;	}
	100% {	opacity: 1;-o-transform: translateX(0%);	margin-top:-4vh;height: 12vh;	}
}

@keyframes bounceInLeft0 {
	0% {opacity: 1;	transform: translateX(0%);	}
	50% {	opacity: 1;	transform: translateX(0%);margin-top:0;height: 33vh;	}
	100% {	opacity: 1;	transform: translateX(0%);margin-top:-4vh;height: 12vh;	}
}
@-webkit-keyframes bounceInLeft1 {
	0% {opacity: 1;	-webkit-transform: translateX(-100%);	}	
	50% {opacity: 1;	-webkit-transform: translateX(100%); margin-top:0; height: 33vh;}
	100% {	opacity: 1;-webkit-transform: translateX(100%); 	margin-top:-12vh;height: 12vh;}
}

@-moz-keyframes bounceInLeft1 {
	0% {opacity: 1;	-moz-transform: translateX(-100%);}	
	50% {opacity: 1;	-moz-transform: translateX(100%);margin-top:0; height: 33vh;}
	100% {	opacity: 1;-moz-transform: translateX(100%);	margin-top:-12vh;height: 12vh;	}
}

@-o-keyframes bounceInLeft1 {
	0% {opacity: 1;	-o-transform: translateX(-100%);}	
	50% {	opacity: 1;	-o-transform: translateX(100%);margin-top:0;height: 33vh;	}
	100% {	opacity: 1;-o-transform: translateX(100%);	margin-top:-12vh;height: 12vh;	}
}

@keyframes bounceInLeft1 {
	0% {opacity: 1;	transform: translateX(-100%);	}
	50% {	opacity: 1;	transform: translateX(100%);margin-top:0;height: 33vh;	}
	100% {	opacity: 1;	transform: translateX(100%);margin-top:-12vh;height: 12vh;	}
}
@-webkit-keyframes bounceInLeft2 {
	0% {opacity: 1;	-webkit-transform: translateX(-100%);	}	
	50% {opacity: 1;	-webkit-transform: translateX(200%); margin-top:0; height: 33vh;}
	100% {	opacity: 1;-webkit-transform: translateX(200%); 	margin-top:-12vh;height: 12vh;	}
}

@-moz-keyframes bounceInLeft2 {
	0% {opacity: 1;	-moz-transform: translateX(-100%);}	
	50% {opacity: 1;	-moz-transform: translateX(200%);margin-top:0; height: 33vh;}
	100% {	opacity: 1;-moz-transform: translateX(200%);	margin-top:-12vh;height: 12vh;	}
}

@-o-keyframes bounceInLeft2 {
	0% {opacity: 1;	-o-transform: translateX(-100%);}	
	50% {	opacity: 1;	-o-transform: translateX(200%);margin-top:0;height: 33vh;	}
	100% {	opacity: 1;-o-transform: translateX(200%);	margin-top:-12vh;height: 12vh;	}
}

@keyframes bounceInLeft2 {
	0% {opacity: 1;	transform: translateX(-100%);	}
	50% {	opacity: 1;	transform: translateX(200%);margin-top:0;height: 33vh;	}
	100% {	opacity: 1;	transform: translateX(200%);margin-top:-12vh;height: 12vh;	}
}
@-webkit-keyframes bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.3);
	}
	50% {
		-webkit-transform: scale(1.05);
	}

	70% {
		-webkit-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes bounceIn {
	0% {
		opacity: 0;
		-moz-transform: scale(.3);
	}

	50% {
		-moz-transform: scale(1.05);
	}

	70% {
		-moz-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-moz-transform: scale(1);
	}
}

@-o-keyframes bounceIn {
	0% {
		opacity: 0;
		-o-transform: scale(.3);
	}

	50% {
		-o-transform: scale(1.05);
	}

	70% {
		-o-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-o-transform: scale(1);
	}
}

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(.3);
	}

	50% {
		transform: scale(1.05);
	}

	70% {
		transform: scale(.9);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@-webkit-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
	}
	60% {
		-webkit-transform: translateX(20px);
	}

	80% {
		-webkit-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-2000px);
	}

	60% {
		-moz-transform: translateX(20px);
	}

	80% {
		-moz-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-2000px);
	}

	60% {
		opacity: 1;
		-o-transform: translateX(20px);
	}

	80% {
		-o-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes bounceInLeft {
	0% {
		opacity: 0;
		transform: translateX(-2000px);
	}

	60% {
		transform: translateX(20px);
	}

	80% {
		transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@-webkit-keyframes slideInLeft1 {
	0% {opacity: 0;	margin-left: -100%;	}
	100% {opacity: 1; margin-left: 0%;}
}

@-moz-keyframes slideInLeft1 {
	0% {opacity: 0;margin-left: -100%;	}
	100% {opacity: 1; margin-left: 0%;	}
}

@-o-keyframes slideInLeft1 {
	0% {opacity: 0;	margin-left: -100%;	}
	100% {	opacity: 1;	margin-left: 0%;}
}

@keyframes slideInLeft1 {
	0% {opacity: 0;	margin-left: -100%;	}
	100% {	opacity: 1;	margin-left: 0%;}
}
@-webkit-keyframes bounceInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(2000px);
	}

	60% {
		-webkit-transform: translateX(-20px);
	}

	80% {
		-webkit-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(2000px);
	}

	60% {
		-moz-transform: translateX(-20px);
	}

	80% {
		-moz-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes bounceInRight {
	0% {
		opacity: 0;
		-o-transform: translateX(2000px);
	}

	60% {
		-o-transform: translateX(-20px);
	}

	80% {
		-o-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes bounceInRight {
	0% {
		opacity: 0;
		transform: translateX(2000px);
	}

	60% {
		transform: translateX(-20px);
	}

	80% {
		transform: translateX(5px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@-webkit-keyframes fadeOut {
	0% {
		opacity: 1;
	}
	
	100% {
		opacity: 0;
	}
}
@-moz-keyframes fadeOut {
	0% {
		opacity: 1;
	}
	
	100% {
		opacity: 0;
	}
}

@-o-keyframes fadeOut {
	0% {
		opacity: 1;
	}
	
	100% {
		opacity: 0;
	}
}

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

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
@media only screen and (min-width:1025px) and (max-width: 3600px) and (min-height: 300px) and (max-height: 660px){
	#dvContent0{ }
}
@media screen and (min-width: 1600px) and (max-width: 3600px) and (min-height: 680px) and (max-height: 800px){
	#dvContent0{height:96vh;}
	//#dvContent0{height:72vh;}
	.bg0 {  position: absolute; bottom: 0;}
}
@media screen and (min-width: 767px) and (max-width: 1024px){
    .stemimg.leaf1 {top: -6.7vw !important;}
    .stemimg.leaf2 {top: 40.5vw !important;}
    .qtext1 {   font-size: 3.5vw !important;   line-height: 3.8vw !important;}
    .qtext2 {   font-size: 2.8vw !important;    line-height: 3.4vw !important;}
}
@media screen and (min-width: 200px) and (max-width: 1024px){
	
	.mobilehide{display:none !important;}
	.mobileshow{display:block !important;}
	html{ height: auto !important; overflow: visible !important;}
	body{overflow-y: visible !important; overflow-x: hidden !important;  height: 100% !important;}
	section#slide-1{padding:0px;}
	.lefttext, .righttext, .lefttext1 {font-size: 3.34vw;  line-height: 3.6vw; width: 55%;}
	.text2, .text3, .text4  {font-size: 3.34vw;  line-height: 3.5vw;}
	.head2{font-size: 3.5vw;  line-height: 3.8vw; }
	.qtext1 { font-size: 15px;  line-height: 18px;}
	.qtext2{font-size: 11px;line-height: 13px;}
	.footer{position:relative; padding: 1.5vw 0 8vw 0;}
	.footer_sec { background:#000; font-size: 8px;}
	.footer_socialshare, .footer_links {  width: 100%; text-align: center; margin:2px 0px;}
	.footer_socialshare img {width: 16px;}
	.footer.fheight {   height: 18vh;}
	.downarrow {  position: fixed;   right: 7.5vw;  top: auto;  bottom: 15vw;}
	#dvContent0{height:95vh; padding: 25px 0 0 0;}
	#dvContent0.hauto{height: auto;  min-height: 52vw;}
	.bg0 {  position: absolute; bottom: 0; height: 50vw;}
	.contentsec {  width: 100%; overflow: hidden;}
	.stemsec, .stemimg {   width: 100vw;}
	.gleaf{    width: 127vw; bottom: 55px;  }
	.pgrow{left: -33% !important;}
	.stemimg.leaf1 { width: 31vw !important; left: 62.75vw; top:-11.7vw;}
	.stemimg.leaf2 {  width: 9vw !important; left: 63vw; top: 33.5vw;  z-index: -1;}
	.ml1{left: -21.7vw;}
	.ml2{left: -22.5vw;}
	.ml3{left: -28.7vw; width: 115vw;   top: -8vw;}
	.ml4{left: -20.9vw; top: 14vw;}
	.ml5{left: -22.8vw;}
	#dvContent1 {  margin: -15.4vw 0 0 0.3vw}
	.head1 { left: 5vw; top: 1vh; font-size: 5.8vw;line-height: 6.4vw;}
	.head1a {  font-size: 2.8vw;  line-height: 3.4vw;  left: 5.2vw;top: 23vw;}
	.widthanimation2, .widthanimation4  {width:100%;}
	.lefttext {  left: 32.5vw;  top: 12.5vw; text-align: left; opacity: 0;  }
	.righttext{left: 32.5vw;}
	.stemsec br{display: none;}
	.icon1 img {width: 11.5vw;}
	.icon1 {  left: 10vw;  top: 13vw;}
	.icon2 img {width: 16vw;}
	.icon2 {left: 8vw;}
	#dvContent2 { margin: -1.1vw 0 0 -0.36vw;}
	.grayblock {  background: transparent;  border-radius: 0;}
	.lefttextblock  {  left: 30vw;  top: 133vw;  width: 65%;}
	.righttextblock {  left: 26vw;  top: 65vw;  width: 65%;}
	.right_circlesec { left: 1.3vw; top: 67vw; width: 24vw;height: 16vw;}
	.lefttextblock:before{display:none;}
	.circle_icon {width: 24vw;}
	.icon4 { left: 10.8vw; top: 3vw; width: 11vw; height: 11vw;}
	.icon4img {   width: 10vw;}
	.left_circlesec { left: 9vw; top: 135vw; width: 20vw; height: 14vw;}
	.left_circlesec .circle_icon {  width: 28vw;}
	.icon3 { left: 3vw; top: 3vw;}	
	.icon3img { width: 10vw;}
	#dvContent3 { margin: -1.5vw 0 -3px -1.2vw;}
	.lefttext1 {  left: 32vw; top: 24vw; text-align: left;}
	.icon5 { left: 7.5vw; top: 23.5vw;}
	.quote { width: 56vw; left: 32.4vw; top: 82vw; padding: 3.7vw;}
	.quote:before { width: 9vw; height: 8vw; left: 3.7vw; top: -3.5vw; background-size: 7vw;}
	.quote:after { width: 9vw; height: 8vw; right: 3.7vw; bottom: -3.8vw; transform: rotate(180deg);  content: " "; position: absolute; background: url(../images/quote.png) no-repeat top left; background-size: 7vw;}
	.column2{width:90%;}
	.columnwidth20 {   width: 16%;}
	.columnwidth20 img {  width: 10vw;}
	.width55{width:100%;}
	.columnwidth50 {  width: 80%; font-size: 12px; line-height: 13px;}
	.smalltext { font-size: 9px; line-height: 11px;}	
	.copyright { font-size: 9px;  line-height: 10px;}
	.width45 img {width: 22vw;}
	.righttextblock.fani.fadein1 {
	-webkit-animation: fadeIn 0.5s 1 0s both linear;
	-moz-animation: fadeIn 0.5s 1 0s both linear;
	-o-animation: fadeIn 0.5s 1 0s both linear;
	animation: fadeIn 0.5s 1 0s both linear; opacity: 1;}
	.logo img {width: 60px;}
	.logo {left:10px;  top: 10px;}

}

.mobilehide{display:block;}
	.mobileshow{display:none;}
	
	
	
	
	
	
	