* {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html {	
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin:0;
	padding:0;
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
}
body {
	width: 100%;
	height: 100%;
	margin:0;
	padding:0;
}
h1, h2, h3 {
	font-size: 2.143rem;
}
.content {
	position:relative;
	width:100%;
	height:100%;
}
.logo {
	display: block;
	width: 14.54%;
	padding-bottom: 20%;
	margin: 0 auto;
	background: url('Logo_szao.png');
	background-position:center;
	background-size:contain;
	background-repeat: no-repeat;
}
.section {
	font-size:1.714rem;
	font-weight:100;
}
.first-screen {
	width:100%;
	background: url('header-line.jpg');
	background-repeat: no-repeat;
	background-position: center -3%;
	background-size: contain;
	/*border-top:10px solid #a6e261;*/
}
.sector-header {
	overflow:hidden;
	width:100%;
	
}
.sector-header>div,
.sector-header>a {
	float:left;
	width:33.33333%;
}
.sector-header>div {
	padding: 2em 0 0 0;
}
.big-title {    
	position: absolute;
    top: 0;
    width: 100%;
	height:15%;
    padding: 2% 0 0 0;
	font-weight:900;
	text-transform:uppercase;
	color: #0088ac;
	/*-webkit-box-sizing: content-box;
    -moz-box-sizing:content-box;
    box-sizing: content-box;*/
}
.line-color {
	-webkit-transition: all ease-in-out 300ms;
	-moz-transition: all ease-in-out 300ms;
	-o-transition: all ease-in-out 300ms;
	transition: all ease-in-out 300ms;
}
.line-color.line-color-green {
	border-color:  #a6e261 ;	
}
.line-color.line-color-green {
	border-color:  #3cc4cc;	
}
.fp-section {
	overflow:hidden;
}
#myVideo{
	position: absolute;
	right: 0;
	bottom: 0;
	top:0;
	width: 50%;
	height: 100%;
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
	background-image: /* our video */;
	background-position: center center;
	background-size: contain;
	z-index:11;
}
.row {
	position:absolute;
	width:92%;
	height:33%;    
	display: inline-flex;
    align-items: center;
}
.row.row-2 {
	top: 55%;
}
.row-lines {
	overflow:hidden;
	position:absolute;
	top:38%;
	width:92%;
	height:20%; 
}
.text-cell {
	position:relative;
	width:38%;
	float:left;
	padding: 1em;
	border-radius:2em;
	background: rgb(253, 230, 180);
    text-align: center;
}
.text-number {
	position:absolute;
	top:-1em;
	left:-1em;
	width:1.4em;
	line-height:1.4em;
	border-radius:100%;
	font-weight:900;
	color: #0088ac;
	border:1px solid #0088ac;
}
.row .line-cell, .row .line-right-cell, .row .line-left-cell {
	height:100%;
	width:20%;
	float:left;
	padding:0 2em;
}
.line-cell .material-icons,
.line-left-cell .material-icons {
	position:absolute;
    right: -0.55em;
    bottom: -0.55em;
	color:rgb(253, 230, 180);
}
.row .line-right-cell,
.row .line-left-cell,
.row-lines .line-left-cell,
.row-lines .line-right-cell {
	width:14%;
	height:100%;
}
.line-cell>div {
	position:relative;
	height:50%;
	border-bottom:0.1em solid rgb(253, 230, 180);
}
.row .line-right-cell>div,
.row .line-left-cell>div,
.row-lines .line-left-cell>div,
.row-lines .line-right-cell>div {
	height:50%;
}
.row .line-right-cell>div:last-child {
	border-top:0.1em solid rgb(253, 230, 180);
	border-right:0.1em solid rgb(253, 230, 180);
	border-radius: 0 2em 0 0;
}
.row .line-left-cell>div:first-child {
	position:relative;
	border-bottom:0.1em solid rgb(253, 230, 180);
	border-left:0.1em solid rgb(253, 230, 180);
	border-radius: 0 0 0 2em;
}

.row-lines>div {
	float:left;
}
.row-lines .line-cell {
	width:72%;
	height:100%;
}
.row-lines .line-cell>div {
	height:50%;
	border-bottom:0.1em solid rgb(253, 230, 180);
}
.row-lines .line-left-cell>div:last-child {
    margin-top: -0.1em;
	border-top:0.1em solid rgb(253, 230, 180);
	border-left:0.1em solid rgb(253, 230, 180);
	border-radius: 2em 0 0 0;	
}
.row-lines .line-right-cell {
	padding:0 2em 0 0;
}
.row-lines .line-left-cell {
	padding:0 0 0 2em;
}
.row-lines .line-right-cell>div:first-child {
	border-bottom:0.1em solid rgb(253, 230, 180);
	border-right:0.1em solid rgb(253, 230, 180);
	border-radius: 0 0 2em 0;
}


.slide-3 {
	background: url('pic-8.jpg');
	background-size: cover;
	background-position:center 0%;
}
.width-50-3 {
	margin:0 auto;
	padding:0em 1em;
	width:50%;
	background: rgba(255, 255, 255, 0.8);
	border-radius:2em;
	border:0.5em solid #fde6b4;
}
.round-s {
	position:absolute;
	width:12em;
	height:12em;
	border:0.1em solid #ffb109;
	border-radius:100%;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.51);
}
.round-s.round-s-1 {
	top:42%;
	left:3%;
	background:url('slide-3-1.jpg');
	background-size:cover;
}
.round-s.round-s-2 {
	bottom:2%;
	right:5%;
	background:url('slide-3-2.jpg');
	background-size:cover;
}
.round-s.round-s-3 {
	top:-22%;
	right:-4%;
	background:url('slide-3-3.jpg');
	background-size:cover;
}
.fp-controlArrow:hover {
	-webkit-filter: brightness(1.1);
	filter: brightness(1.1);
}
.seventh-screen .fp-controlArrow.fp-prev,
.fouth-screen .fp-controlArrow.fp-prev,
.second-screen .fp-controlArrow.fp-prev{
	left:0.4em;
	border-width: 36px 24px 36px 0;
    border-color: transparent rgb(255, 177, 9) transparent transparent;
}
.seventh-screen .fp-controlArrow.fp-next,
.fouth-screen .fp-controlArrow.fp-next,
.second-screen .fp-controlArrow.fp-next  {
	right:0.4em;
    border-width: 36px 0 36px 24px;
    border-color: transparent transparent transparent rgb(255, 177, 9);
}

.pointer {
	position:absolute;
	top:-7em;
	left:-8em;
	width:8em;
	height:3em;
	font-family: 'Bad Script', cursive;
	font-size: 80%;
	line-height:1.4;
	color: #ffb109;
	text-align:center;
	-moz-transform: rotate(-20deg)  scale(2);
    -ms-transform: rotate(-20deg)  scale(2);
    -webkit-transform: rotate(-20deg)  scale(2); 
    -o-transform: rotate(-20deg)  scale(2);
    transform: rotate(-20deg)  scale(2);
	-webkit-transition:all cubic-bezier(1, -0.9, 0.1, 1.81) 500ms 50ms;
	-moz-transition:all cubic-bezier(1, -0.9, 0.1, 1.81) 500ms 50ms;
	-o-transition:all cubic-bezier(1, -0.9, 0.1, 1.81) 500ms 50ms;
	transition:all cubic-bezier(1, -0.9, 0.1, 1.81) 500ms 50ms;
	opacity:0.5;
    display: inline-flex;
    align-items: center;
	justify-content:center;
}

.pointer.pointer-1:after,
.pointer.pointer-2:after,
.pointer.pointer-3:after {
    content: "";
    position: absolute;
    bottom: -4.8em;
    left: 46%;
    width: 3em;
    height: 5em;
    border-radius: 0 0 0 100%;
    border-left: 0.2em solid #DEDEDE;
    border-bottom: 0.1em solid #FFB109;
    z-index: 0;
}

.pointer.pointer-4:after {
	content: "";
    position: absolute;
    bottom: 1em;
    right: 86%;
    width: 3.5em;
    height: 0.3em;
    border-radius: 0 0 0 100%;
    border-bottom: 0.2em solid #eee;
    border-left: 0.1em solid #eee;
    z-index: 0;
}
.pointer.pointer-4 {
    top: -1.5em;
    left: 52em;
}
.sector  {
	/*overflow:hidden;*/
	height:85%;
    width: 100%;
    position: absolute;
    bottom: 0;
}
.ul-style {
	
}
.ul-style li {
	margin:2em 0;
}
.width-50 {
	width:50%;
	height: 100%;
	float:left;
}
.width-100 {
	width:100%;
	height: 100%;
}
.text {
	padding:2em;
}
.pic {
	
}
.pic-1 {
	background: url('pic-1.jpg');
	background-size:contain;
	background-position: bottom right;
	background-repeat: no-repeat;
}
.pic-2 {
	background: url('pic-2.jpg');
	background-size:contain;
	background-position:  bottom center;
	background-repeat: no-repeat;
}
.fouth-screen {
	background: url('pic-3.jpg');
	background-size:contain;
	background-position:  bottom left;
	background-repeat: no-repeat;
}
.pic-3{
	background: url('pic-4.jpg');
	background-size:contain;
	background-position:  bottom right;
	background-repeat: no-repeat;
}
.pic-5{
	background: url('pic-5.jpg');
	background-size:contain;
	background-position:  bottom left;
	background-repeat: no-repeat;
}
.pic-6{
	background: url('pic-6.jpg');
	background-size:contain;
	background-position:  bottom right;
	background-repeat: no-repeat;
}
/*.pic-7{
	background: url('pic-7re.jpg');
	background-size:contain;
	background-position:  bottom right;
	background-repeat: no-repeat;
}*/
.eighth-screen {
	background: url('pic-7cl.jpg');
	background-size:contain;
	background-position:  bottom right;
	background-repeat: no-repeat;
}
.second-screen {
}
.img-block-1 {
	margin:1em 0 0 0;
	height:10em;
}
.img-block-2 {
	margin:2em 0 0 0;
	height:10em;	
}
.img-block-3, .img-block-4 {
	margin:2em 0 0 0;
	height:9em;
}
.img-block-3 img {
	height:70%;
	border:1px solid #eee;
}
 .img-block-4 img {
	 height:100%;
	border:1px solid #eee;
 }
.img-block-1 img {
	width:24%;
	height:65%;
	border:1px solid #eee;
}
.img-block-1 img:hover {
	border:1px solid #0088ac;
}
.img-block-2 a {
    position: relative;
    display: inline-block;
    height: 70%;
    width: 24%;
}
.img-block-2 a:nth-child(odd) {
	width: 30%;
}
.img-block-2 a:nth-child(even) {
	width: 18%;
}
.img-block-2 a:nth-child(odd) img {
	position:relative;
	width:100%;
	height:86%;
	z-index:2;
    box-shadow: 3px 3px 3px rgba(43, 42, 42, 0.46);
}
.img-block-2 a:nth-child(even)  img {
	position:relative;
	top:0;
	margin-left:-50%;
	width:120%;
	height:70%;
	z-index:1;
}
.img-block-2 a img {
	border:1px solid #fff;
}
.img-block-2 a:hover img {
	border-color: #0088ac;
}
.bottom-sector {
	height:40%;
	width:40%;
	position:absolute;
	bottom:0;
	left:20%;
}
.bottom-sector .gold-text {
	width:40%;
	float:left;
	padding:15% 1em 0 0;
	color:#fff;
	text-align:right;
	font-weight:600;
	text-transform:uppercase;
}
.bottom-sector .gold-circle {
	position:relative;
	top: -10%;
    width: 60%;
    height: 140%;
	float:left;
	background:#fff;
	border:10px solid #ffb109;
	border-radius:100%;
	color: #ffb109;
	text-align:center;
	font-weight:600;
    display: inline-flex;
    align-items: center;
}
.bottom-sector .gold-circle>div {
	position: relative;
    left: 9%;
    width: 82%;
    line-height: 1.2;
}
#form {
    /*position: absolute;
    top: -0.15em;
    left: 50%;*/
    width: 10em;
    margin: 0 auto 1.4em auto;
}
#form label {
	position:absolute;
	top:0.15em;
	margin-left:0.15em;
}
#form label i {
	color: #ccc;
}
#form input {
	width:100%;
	padding:0.5em 1em 0.5em 3em;
	border:1px solid #ccc;
	background:#fff;
	text-transform:uppercase;
	font-weight:100;
}
#form input:active {
	border:1px solid #ccc;
}
.sector-teach {
    width: 70%;
    height: 50%;
    margin-top: 2em;
}
.sector-teach>div {
	width:55%;
	padding:0 3em 2em 3em;
}
.eighth-screen .width-50 {
	height:75%;
}
.eighth-screen .text {
	padding-left:0;
    display: inline-flex;
    align-items: flex-end;
	flex-wrap:wrap;
}
.eighth-screen .text>div {
	width:100%;
	padding:0.5em 0 0.5em 3em;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
.regalies {
	position:absolute;
	top:40%;
	left:65%;
	border:5px solid #c2eaeb;
	border-radius:20px;
	padding:0.5em 1em;
	text-transform: uppercase;
	text-decoration:underline;
	font-size: 1.286rem;
	font-weight:600;
	color:#555;
	-moz-transform: rotate(6deg); 
    -ms-transform: rotate(6deg); 
    -webkit-transform: rotate(6deg); 
    -o-transform: rotate(6deg);
    transform: rotate(6deg);
	-webkit-transition: all ease-in-out 150ms;
	-moz-transition: all ease-in-out 150ms;
	-o-transition: all ease-in-out 150ms;
	transition: all ease-in-out 150ms 150ms;
}
.regalies:after {
    content: "";
    position: absolute;
    top: -100%;
    left: -170%;
    width: 100%;
    height: 400%;
    padding: 200%;
	-moz-transform: rotate(-18deg); 
    -ms-transform: rotate(-18deg); 
    -webkit-transform: rotate(-18deg); 
    -o-transform: rotate(-18deg);
    transform: rotate(-18deg);
}
.regalies:hover {
	cursor: pointer;
	text-decoration:none;
	border-color:#fde6b4;	
	color: #999;	
	-moz-transform: rotate(18deg) scale(1.2); 
    -ms-transform: rotate(18deg) scale(1.2); 
    -webkit-transform: rotate(18deg) scale(1.2); 
    -o-transform: rotate(18deg) scale(1.2);
    transform: rotate(18deg) scale(1.2);
}
.regalies:hover .regalies-line, .regalies:hover .regalies-line:before  {
	background:#fde6b4;
}
.regalies:hover .regalies-line {
	height:8em;
}
.regalies:hover .regalies-line:before  {
	width:12em;
}
.regalies:hover .regalies-line:after {
	opacity:1;
}
.regalies .regalies-line {
	position: absolute;
	bottom:-8em;
	left:50%;
	height:0em;
	width:2px;
	background:#c2eaeb;
	-webkit-transition: all ease-in-out 300ms 200ms;
	-moz-transition: all ease-in-out 300ms 200ms;
	-o-transition: all ease-in-out 300ms 200ms;
	transition: all ease-in-out 300ms 200ms;
}
.regalies .regalies-line:after {
	content: "";
    position: absolute;
    bottom: -4.9em;
    left: -11.6em;
    height: 0.8em;
    width: 0.8em;
    border: 1px solid #fde6b4;
    border-radius: 100%;
	background:#fff;
	opacity:0;
	-webkit-transition: all ease-in-out 300ms 500ms;
	-moz-transition: all ease-in-out 300ms 500ms;
	-o-transition: all ease-in-out 300ms 500ms;
	transition: all ease-in-out 300ms 500ms;
} 
.regalies .regalies-line:before {
	content: "";
	position: absolute;
	bottom:0;
	left:-12em;
	height:2px;
	width:0em;
	background:#c2eaeb;
	
	-ms-transform-origin: 100% 0;
	-webkit-transform-origin: 100% 0;
	-moz-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    transform-origin: 100% 0;
	
	-moz-transform: rotate(-22deg); 
    -ms-transform: rotate(-22deg); 
    -webkit-transform: rotate(-22deg); 
    -o-transform: rotate(-22deg);
    transform: rotate(-22deg);
	
	
	-webkit-transition: all ease-in-out 300ms 300ms;
	-moz-transition: all ease-in-out 300ms 300ms;
	-o-transition: all ease-in-out 300ms 300ms;
	transition: all ease-in-out 300ms 300ms;
	
}
.regalies .regalies-line .bio {
	position: absolute;
	width:36em;
	overflow:hidden;
	right:14em;
	bottom:-230%;
	
	-moz-transform: rotate(-18deg)  scale(1.8); 
    -ms-transform: rotate(-18deg)  scale(1.8); 
    -webkit-transform: rotate(-18deg)  scale(1.8); 
    -o-transform: rotate(-18deg)  scale(1.8);
    transform: rotate(-18deg)  scale(1.8);
	
	-webkit-transition: all ease-in-out 300ms 300ms;
	-moz-transition: all ease-in-out 300ms 300ms;
	-o-transition: all ease-in-out 300ms 300ms;
	transition: all ease-in-out 300ms 500ms;
	
	text-transform:none;
	font-weight:100;
	font-size:1rem;
	color: #000;
	
	opacity:0.05;
}
.regalies:hover .regalies-line .bio {
	width:36em;
	
	-moz-transform: rotate(-20deg)  scale(0.9);
    -ms-transform: rotate(-20deg)  scale(0.9);
    -webkit-transform: rotate(-20deg)  scale(0.9); 
    -o-transform: rotate(-20deg)  scale(0.9);
    transform: rotate(-20deg)  scale(0.9);
	opacity:1;
}
.buttom {
	padding:1em 2em;
	text-transform: uppercase;
	text-decoration:none;
	text-shadow:1px 1px 1px #111;
	font-weight:900;
	font-size: 70%;
	font-style: normal;
	color:#fff;
	border-radius:10px;
	box-shadow: 0px 2px 10px 0px rgba(17, 17, 17, 0.6);
	background: url('TV-Set-Pattern.png'), rgb(60,196,204);
	background: url('TV-Set-Pattern.png'), -moz-linear-gradient(top, rgba(60,196,204,1) 0%, rgba(66,150,170,1) 100%);
	background: url('TV-Set-Pattern.png'), -webkit-linear-gradient(top, rgba(60,196,204,1) 0%,rgba(66,150,170,1) 100%);
	background: url('TV-Set-Pattern.png'),linear-gradient(to bottom, rgba(60,196,204,1) 0%,rgba(66,150,170,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3cc4cc', endColorstr='#4296aa',GradientType=0 );
	-webkit-transition: all ease-in-out 300ms;
	-moz-transition: all ease-in-out 300ms;
	-o-transition: all ease-in-out 300ms;
	transition: all ease-in-out 300ms;
}
.buttom:hover {
	-webkit-filter: brightness(1.2);
	filter: brightness(1.2);	
}
.buttom.green {
background: url('TV-Set-Pattern.png'), rgb(166,226,97);
background: url('TV-Set-Pattern.png'), -moz-linear-gradient(top,  rgba(166,226,97,1) 0%, rgba(122,188,66,1) 100%);
background: url('TV-Set-Pattern.png'), -webkit-linear-gradient(top,  rgba(166,226,97,1) 0%,rgba(122,188,66,1) 100%);
background: url('TV-Set-Pattern.png'), linear-gradient(to bottom,  rgba(166,226,97,1) 0%,rgba(122,188,66,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6e261', endColorstr='#7abc42',GradientType=0 );
}
.footer {
    overflow: hidden;
    position: absolute;
    bottom: 10px;
    width: 100%;
    padding: 0 2% 1% 2%;
    height: 7em;
}
.footer >div {
	float:left;
}
.footer-logo {
	width:10%;
	height:100%;
	background: url('Logo_szao.png');
	background-position:center;
	background-repeat:no-repeat;
	background-size:contain;
}
.footer-text {
    width: 90%;
    height: 100%;
    display: inline-flex;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 0 2em;
}
.table-style {
	width:80%;
	margin:0 auto;
	font-size:1rem;    
	border-collapse: collapse;
    border-spacing: 0;
	text-align:center;
}
.table-style tr td {
	padding:0.3em 1em;
	border:1px solid rgb(196, 236, 238);
}
.table-style tr td:first-child {
    text-align: left;
}
.table-style tr:first-child {
	background: #f7f7f7;
}
.widter {
	position:relative; 
	width:140%;
}
@media (min-height: 310px) {
	 html {
		 font-size:7px;
	 }
 }
@media (min-height: 480px) {
	 html {
		 font-size:8px;
	 }
 }
@media (min-height: 512px) {
	 html {
		 font-size:10px;
	 }
 }
@media screen and (min-height: 640px){
	 html {
		 font-size:12px;
	 }
 }
@media screen and (min-height: 720px){

	@media (min-width: 960px){
		 html {
			 font-size:12px;
		 }	
	}
	@media (min-width: 1280px){
		 html {
			 font-size:14px;
		 }		
	}
}
 @media screen and (orientation: portrait) {
	html {
		 font-size:18px !important;
	}
	.width-50 {
		width:100%;
		height:50%;
		float:none;
	}
	.width-50.text {
		padding:1em !important;
	}
	.big-title {
		padding: 2em 1% 0 1% !important;
	}
	.bottom-sector {
		height: 25%;
		width: 90%;
		position: absolute;
		top: 0;
		left:0;
	}
	.bottom-sector .gold-text {
		color:#000;
	}
	.sector-header>div,
	.sector-header>a {
		float:none;
		width:100%;
	}
	.sector-header>div {
		padding:1em 2em;
		text-align:center;
	}
	.logo {
		padding-bottom: 40%;
		margin: 5em auto;
	}
	.widter 	{
		width:100%;
	}
	.sector-teach {
		height: 20%;
	}
	.sector-teach>div {
		width:100%;
	}
	.eighth-screen .width-50.text {
		height: 30%;
	}
	.eighth-screen .width-50.pic {
		height:50%;
	}
	.row {
		display: block;
		top:0;
		width:100%;
		position:relative;
	}
	.text-cell {
		width:98%;
		margin:2em 0;
		float:none;
	}
	.line-cell, .line-right-cell,
	.line-left-cell, .row-lines{
		display:none;
	}
	.width-50-3 {
		width:98%;
		clear:both;
	}
	.round-s {
		position: relative;
		top:0 !important;
		left:0 !important;
		right:0 !important;
		bottom:0 !important;
	}
	.round-s-1, .round-s-2 {
		margin: 0 5%;
		flex-basis: 40%;		
	}
	.round-s-3  {
		margin: 0 30% 5% 30%;
		flex-basis: 40%;
	}
	.round-composition {
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: -10%;
	}
	.regalies {
		top: 20%;
		right: 5%;
		left: inherit;
	}
	.regalies .regalies-line .bio {
		right: -5em;
	}
	#form {
		width:20em;
	}
	#form input {
		font-size: 2.143rem;
	}
	#form label i {
		font-size: 2.571rem;
		line-height:1.6;
	}
	@media screen and (min-height: 720px){
		@media (min-width: 720px){
			 html {
				 font-size:17px !important;
			 }			
		}
	}
 }