@font-face {
	font-family: BebasNeue Regular;
	src: url('../fonts/BebasNeue-Regular.ttf');
}

@font-face {
	font-family: BebasNeue Book;
	src: url('../fonts/BebasNeue Book.otf');
}

@font-face {
	font-family: GreatVibes Regular;
	src: url('../fonts/GreatVibes-Regular.ttf');
}

@font-face {
	font-family: AvantGardeMdITC;
	src: url('../fonts/avantgardeitcbybt-book.ttf');
}

@font-face {
	font-family: Myriad Roman;
	src: url('../fonts/Myriad Roman.ttf');
}
@font-face {
	font-family: Helvetica Neue;
	src: url('../fonts/Helvetica-Neue-Bold_22498.ttf');
}

@font-face {
	font-family: Helvetica;
	src: url('../fonts/helveticaneue-light-001.ttf');
}


html,
body,
div,
h1,
p,
a,
video {
  margin: 0;
  padding: 0;
}

html,
body {  
  text-align:center;
  overflow-x: hidden;
  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
}

.main-page-wrapper {
	margin-top: 0px;
	background-image: url("../images/header-top.png"); 
	background-color: #ffffff;
	height: 100px; 
	background-position: bottom; 
	background-repeat: no-repeat;
	background-size: cover; 
	margin-bottom: 0;
	z-index: 3;
	position: relative;
	max-width: 100%;
}

.header-link{
	position: absolute;
	top: 15px;
	right: 50px;
	z-index: 2;
	height: 85px;
}

.header-logo{
	position: absolute;
	top: 15px;
	left: 150px;
	z-index: 1;
	height: 150px;
}

.st{
	position: absolute;
    left: 0;
    top: 0;
}

a:link, a:visited, a:hover, a:active  {
    color: #ffffff;
    text-decoration: none;
}

.sf{
	position: absolute;
    right: 0;
    bottom: 0;
}

.s1 {
	background-image: url("../images/services (1).png");
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover; 
	margin-bottom: 0;
	height:550px;
	
}

.s1-h{
	visibility: hidden;
}

div.s1:hover .s1-h{ 	
	visibility: visible;	
}

.s2 {
	background-image: url("../images/services (2).png"); 
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover; 
	margin-bottom: 0;
	height:550px;
}

.s2-h{
	visibility: hidden;
}

div.s2:hover .s2-h{ 	
	visibility: visible;	
}

.s3 {
	background-image: url("../images/services (3).png");
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover; 
	margin-bottom: 0;
	height:550px;
}

.s3-h{
	visibility: hidden;
}

div.s3:hover .s3-h{ 	
	visibility: visible;	
}

.s4 {
	background-image: url("../images/services (4).png"); 
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover; 
	margin-bottom: 0;
	height:550px;
}

.s4-h{
	visibility: hidden;
}

div.s4:hover .s4-h{ 	
	visibility: visible;	
}

.s5 {
	background-image: url("../images/services (5).png");
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover; 
	margin-bottom: 0;
	height:550px;
}

.s5-h{
	visibility: hidden;
}

div.s5:hover .s5-h{ 	
	visibility: visible;	
}

.s6 {
	background-image: url("../images/services (6).png"); 
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover; 
	margin-bottom: 0;
	height:550px;
}

.s6-h{
	visibility: hidden;
}

div.s6:hover .s6-h{ 	
	visibility: visible;	
}

.s7 {
	background-image: url("../images/services (7).png");
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover; 
	margin-bottom: 0;
	height:550px;
}

.s7-h{
	visibility: hidden;
}

div.s7:hover .s7-h{ 	
	visibility: visible;	
}

.s8 {
	background-image: url("../images/services (8).png"); 
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover; 
	margin-bottom: 0;
	height:550px;
}

.s8-h{
	visibility: hidden;
}

div.s8:hover .s8-h{ 	
	visibility: visible;	
}

.s9 {
	background-image: url("../images/services (9).png");
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover; 
	margin-bottom: 0;
	height:550px;
}

.s9-h{
	visibility: hidden;
}

div.s9:hover .s9-h{ 	
	visibility: visible;	
}

.s10 {
	background-image: url("../images/services (10).png"); 
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover; 
	margin-bottom: 0;
	height:550px;
}

.s10-h{
	visibility: hidden;
}

div.s10:hover .s10-h{ 	
	visibility: visible;	
}

.s11 {
	background-image: url("../images/services (11).png");
	background-position: center top; 
	background-repeat: no-repeat;
	background-size: cover; 
	margin-bottom: 0;
	height:550px;
}

.s11-h{
	visibility: hidden;
}

div.s11:hover .s11-h{ 	
	visibility: visible;	
}


.s12 {
	background-image: url("../images/services (12).png"); 
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover; 
	margin-bottom: 0;
	height:550px;
}

.s12-h{
	visibility: hidden;
}

div.s12:hover .s12-h{ 	
	visibility: visible;	
}

@media screen and (max-width: 1365px) {

	.header-link{
		position: absolute;
		top: 10px;
		left:800px;
		z-index: 2;
	}
	
	
}

@media screen and (max-width: 1280px) {
	.header-link{
		position: absolute;
		top: 15px;
		left:700px;
		z-index: 2;
	}
	.header-logo{
		position: absolute;
		top: 15px;
		left: 80px;
		z-index: 1;
		width:150px;
	}
}

@media screen and (max-width: 1024px) {
	.header-link{
		position: absolute;
		top: 15px;
		left:350px;
		z-index: 2;
	}
	.s1, .s2, .s3, .s4, .s5, .s6, .s7, .s8, .s9, .s10, .s11, .s12 {		
		height:300px;
		width:50%;
	}
	
	.st, .sc, .sf{
		width:250px;
	}
}

@media screen and (max-width: 991px) and (min-width: 801px) {
	.s1, .s2, .s3, .s4, .s5, .s6, .s7, .s8, .s9, .s10, .s11, .s12 {		
		height:300px;
		width:50%;
	}
	
	.st, .sc, .sf{
		width:250px;
	}
	
	.header-link{
		position: absolute;
		top: 15px;
		right: 200px;
		z-index: 2;
		height:55px;
	}
	
	.header-logo{
		position: absolute;
		top: 25px;
		left: 20px;
		z-index: 1;
		height:80px;
		width:80px;
	}
	
	.main-page-wrapper {
		z-index: 3;
		position: relative;
		height: 70px;
		/*background: url(../images/yellow-gradient-red-linear.jpg) no-repeat center center / cover;*/
		/*background-attachment: fixed;*/
	}
}

@media screen and (max-width: 800px) and (min-width: 768px) {
	.s1, .s2, .s3, .s4, .s5, .s6, .s7, .s8, .s9, .s10, .s11, .s12 {		
		height:300px;
		width:50%;
	}
	
	.st, .sc, .sf{
		width:250px;
	}
	
	.header-link{
		position: absolute;
		top: 15px;
		right: 200px;
		z-index: 2;
		height:55px;
	}
	
	.header-logo{
		position: absolute;
		top: 25px;
		left: 20px;
		z-index: 1;
		height:80px;
		width:80px;
	}
	
	.main-page-wrapper {
		z-index: 3;
		position: relative;
		height: 70px;
		/*background: url(../images/yellow-gradient-red-linear.jpg) no-repeat center center / cover;*/
		/*background-attachment: fixed;*/
	}
}

@media screen and (max-width: 767px) {
	.s1, .s2, .s3, .s4, .s5, .s6, .s7, .s8, .s9, .s10, .s11, .s12 {		
		height:300px;
		
	}
	
	.st, .sc, .sf{
		width:250px;
	}
	
	.header-link{
		position: absolute;
		top: 15px;
		right: 200px;
		z-index: 2;
		height:55px;
	}
	
	.header-logo{
		position: absolute;
		top: 25px;
		left: 20px;
		z-index: 1;
		height:80px;
		width:80px;
	}
	
	.main-page-wrapper {
		z-index: 3;
		position: relative;
		height: 70px;
		/*background: url(../images/yellow-gradient-red-linear.jpg) no-repeat center center / cover;*/
		/*background-attachment: fixed;*/
	}
}

@media screen and (max-width: 667px) {
	.s1, .s2, .s3, .s4, .s5, .s6, .s7, .s8, .s9, .s10, .s11, .s12 {		
		height:300px;
		
	}
	
	.st, .sc, .sf{
		width:200px;
	}
	
	.header-link{
		position: absolute;
		top: 15px;
		right: 200px;
		z-index: 2;
		height:55px;
	}
	
	.header-logo{
		position: absolute;
		top: 25px;
		left: 20px;
		z-index: 1;
		height:80px;
		width:80px;
	}
	
	.main-page-wrapper {
		z-index: 3;
		position: relative;
		height: 70px;
		/*background: url(../images/yellow-gradient-red-linear.jpg) no-repeat center center / cover;*/
		/*background-attachment: fixed;*/
	}
}

@media screen and (max-width: 414px) {
	.s1, .s2, .s3, .s4, .s5, .s6, .s7, .s8, .s9, .s10, .s11, .s12 {		
		height:300px;
		width:100%;
	}
	
	.st, .sc, .sf{
		width:230px;
	}
	
	.header-link{
		position: absolute;
		top: 15px;
		left: 110px;
		padding-right:30px;
		z-index: 2;
		height:55px;
	}
	
	.header-logo{
		position: absolute;
		top: 25px;
		left: 20px;
		z-index: 1;
		height:80px;
		width:80px;
	}
	
	.main-page-wrapper {
		z-index: 3;
		position: relative;
		height: 70px;
		/*background: url(../images/yellow-gradient-red-linear.jpg) no-repeat center center / cover;*/
		/*background-attachment: fixed;*/
	}
}