body{ 
	margin: 0; padding: 0; font-size: 1.3em; 
	font-family: 'Lato', sans-serif;
	clear: both;
	background: white; color: rgb(128,128,128);
	}

h1,h2,h3,h4,h5,h6, label { text-align: center; padding: 2% 0; margin: 0; }
h2 { font-size: 44px; }


ul { list-style-type: none; padding: 0; margin: 0; }
li { display: inline-block; padding: 0; margin: 0; }
 
a { text-decoration: none;  transition: 0.3s; }
a, a:visited { color: #a00f54; }
div { margin: 0; padding: 0; }
p { margin: 0; padding: 2%; }
img.logo { width: 250px; }

#about-baae, #services, #social,#fend2,#top,#about-baae, #developemnt, .dev, #media .container, footer #contact, #sloganbox  { width: 1170px; display: block; margin: auto; padding: 0; }

h1,h2,h3,h4,h5,h6 { width: 100%; }
header, content, #home, #about-baae, #media, #services, #contact, #media,#serv-bg, footer, h1,h2,h3,h4,h5,h6 { display: block; margin: auto; }

header { display: block;  box-shadow: 0 10px 20px #b5b5b5; z-index: 1000;}
header #top { font-size: 12px; border-bottom: 1px solid #b5b5b5; margin: 0 auto; height: 20px; padding: 10px 0 0 0;}
header #top a { color: #a00f54; }
header #top p#left { float: left; margin: 0; padding: 0;}

/* stickyMenu styling */
header .stickyMenu { background-color: #fff; z-index: 100; }
header .stickyMenu .content { width: 1190px; margin: 0 auto; }
header .stickyMenu.fixed { max-width: 100%; }

.btn-menu { display: block; float: right; width: 35px; padding: 28px 0; margin-right: 28px; cursor: pointer; }
.bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #b5b5b5; margin: 6px 0; transition:  0.4s; display: block; }

.active .bar1 {
	-webkit-transform: rotate(-45deg) translate(-9px, 6px);
	transform: rotate(-45deg) translate(-9px, 6px);
}
  
.active .bar2 { opacity: 0;}

.active .bar3 {
	-webkit-transform: rotate(45deg) translate(-8px, -8px);
	transform: rotate(45deg) translate(-8px, -8px);
}

/* stickyMenu fixed size reduction */
header .stickyMenu.fixed a#logo { margin: 10px 10px 5px 0; }
header .stickyMenu.fixed a#logo img.logo { width: 200px; height: 40px; }
header .stickyMenu.fixed ul#navi { padding: 10px 0; }
header .stickyMenu.fixed .btn-menu { padding: 10px 0; }
/* END stickyMenu fixed size reduction */

header ul { text-align: right; }
header ul li { display: inline-block; }
header ul#top-cont { padding: 10px 0 10px 10px; font-size: 10px; float: right; }
header ul#top-cont li { padding-left: 10px; }

header a#logo { display: inline-block; margin: 15px 10px 10px 0;}
a#logo img.logo { transition: height .5s; }

header ul#navi { display: block; padding: 18px 0; float: right; max-width: calc(100% - 320px); transition: padding .5s; }
header ul#navi li { padding: 0 10px; }
header ul#navi li a { font-size: 1em; display: inline-block; color: #b5b5b5; padding: 10px 0;1px 1px 0 rgba(20, 20, 20, 0.1);}
header ul#navi li a:hover { color: #a00f54; }

/* Video */
content .main-video{ width: 66%; margin: 0 auto; text-align: center; position: relative; }
content	.main-video > video { width: 100%; padding-top: 56.20608899297424%; }

#unmute,  #play {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	background-color: rgba(120, 120, 120, .2);
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	cursor: pointer;
	transition: background-color .5s;
	transform: translate(-50%, -50%);
}
#unmute svg, #play svg { width: 40px; fill: #fff; vertical-align: middle; opacity: .5; transition: opacity .5s; }
#unmute:hover, #play:hover { background-color: rgba(120, 120, 120, .5); }
#unmute:hover svg, #play:hover svg { opacity: 1; }

  video.video-js{
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  }

/* End Video */

#home { padding: 0; box-shadow: 0 16px 20px #b5b5b5; }
#home #promo { background-color: #635164; box-shadow: 0 10px 20px #b5b5b5; 

 background: rgba(99,81,100,1);
background: -moz-linear-gradient(90deg, rgba(59,44,60,1) 0%, rgba(99,81,100,1) 33%, rgba(99,81,100,1) 66%, rgba(59,44,60,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(59,44,60,1) 0%, rgba(99,81,100,1) 33%, rgba(99,81,100,1) 66%, rgba(59,44,60,1) 100%);
background: linear-gradient(90deg, rgba(59,44,60,1) 0%, rgba(99,81,100,1) 33%, rgba(99,81,100,1) 66%,rgba(59,44,60,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3b2c3c",endColorstr="#3b2c3c",GradientType=1); 

}

#home #developement #press { display: block; z-index: 1000; margin: auto;} 
#home #developement #press .post { width: 65%; margin: auto;} 
#home #developement #press .post p { font-size: 14px; text-align: center; margin: 0; padding:0;  }
#home #developement #press h2 { display: inline-block; text-align: center; padding: 2% 2% 2% 0; font-size: 34px;}
#home #developement #press .post h3 { display: inline-block; text-align: center; padding: 1% 1% 1% 0; font-size: 24px;}
#home #developement #press .post p a {font-size: 20px; padding: 1%; color: black; text-decoration: underline; margin: auto; background:  white; border-radius: 10px; text-align : left}
#home #developement #press .post p a img { width: 400px; height: 280px; margin: 1% ; float: left}
#home #developement #press .post p a:hover{text-decoration: none;}
#home #developement #press .post p a.pdf { margin: 1% ; position: bottom right; z-index: 2000;}


#about, #media, #services, #contact { padding: 3%;}
#about, #services { height: 1080px }
#home #developement { padding: 1%; text-align: center; }
#home #developement {
background: rgb(128,128,128);
background: -moz-linear-gradient(0deg, rgba(128,128,128,1) 0%, rgba(181,181,181,1) 80%);
background: -webkit-linear-gradient(0deg, rgba(128,128,128,1) 0%, rgba(181,181,181,1) 80%);
background: linear-gradient(0deg, rgba(128,128,128,1) 0%, rgba(181,181,181,1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#808080",endColorstr="#878787",GradientType=1); 
}
#home #developement .dev-r, #home #developement .dev-l {  display: inline-block; width: 50%; float: left; }
#home #developement .dev-l { text-aling: center; float: left; }
#home #developement a { text-aling: center; display: inline-block; padding: 5%; margin: auto auto; background: #635164; }
#home #developement p { padding: inherit 2%; }
#developement img { display: inline-block; text-align: center; width: 936px; height: 536px; padding: 0; margin: 0 auto; border-radius: 2%; box-shadow: 0 10px 20px #b5b5b5; float: none}

#home #developement embed, #home #developement iframe{ width: 1170px; height: 740px; margin: auto; display: block; }

#about { box-shadow: 0 10px 20px #b5b5b5; margin-bottom: 0;}
#about .logo { z-index: 10;}
#about #about-baae { display: block; margin: auto; z-index: 100;}
#about-txt { box-shadow: 0 -10px 20px #b5b5b5; margin: 2% 30%; border-radius: 10px; }
#about #about-baae #about-txt p{font-size: 18px;padding: 10%}

#serv-bg { box-shadow: 0 10px 20px #b5b5b5; padding: 0 0 3% 0; }
#serv-bg #services { padding: 0; }
#serv-bg #services h2 { padding-top: 5%; }
#serv-bg #services .boxy { box-shadow: 0 -10px 20px #b5b5b5; margin: 2% 30%; border-radius: 10px; }
#serv-bg #services p{ font-size: 18px;padding: 10% }
#media {height: 1080px; position: rlative;}
#media .container{ box-shadow: 0 -10px 20px #b5b5b5; padding: 1% }
#media .container:after{ content: ''; clear: both; display: block; }

#media ol.vjs-playlist-item-list {}
#media ol.vjs-playlist-item-list li{ width: 24%; height: 150px;  margin-right: 1%; padding: 0; background-color: black}

#media ol.vjs-playlist-item-list li picture{ width: 105%; height: 150px; overflow: hidden;transition: 0.3s; }
#media ol.vjs-playlist-item-list li picture:hover{ width: 100%; overflow: hidden; opacity: 0.5; }
#media ol.vjs-playlist-item-list li picture.vjs-playlist-now-playing:hover{ opacity: 1; }
.vjs-playlist-ad-overlay { display: none; }

#media .video-container { }
#media .playlist-container { }
#media .vjs-playlist .vjs-playlist-name,#media .vjs-playlist-title-container { white-space: wrap; text-shadow: 0; }
#media .vjs-playlist { background: transparent;}


footer { width: 100%; background: #a00f54; height: 100vh;  box-shadow: 0 -10px 20px #b5b5b5;
/* background: rgb(160,15,84);
background: -moz-linear-gradient(0deg, rgba(160,15,84,1) 0%, rgba(187,75,129,1) 45%, rgba(185,71,126,1) 83%, rgba(160,15,84,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(160,15,84,1) 0%, rgba(187,75,129,1) 45%, rgba(185,71,126,1) 83%, rgba(160,15,84,1) 100%);
background: linear-gradient(0deg, rgba(160,15,84,1) 0%, rgba(187,75,129,1) 45%, rgba(185,71,126,1) 83%, rgba(160,15,84,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a00f54",endColorstr="#a00f54",GradientType=1); */

 background: rgb(52,40,52);
background: -moz-linear-gradient(0deg, rgba(52,40,52,1) 0%, rgba(99,81,100,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(52,40,52,1) 0%, rgba(99,81,100,1) 100%);
background: linear-gradient(0deg, rgba(52,40,52,1) 0%, rgba(99,81,100,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#342834",endColorstr="#635164",GradientType=1); 

}
footer #contact { margin: auto;  text-align: center; padding: 2% 0; text-shadow: 0 1px 0 #a00f54; 
padding: 2% 0 0 0}
footer #contact #social  { width: 50%; box-shadow: 0 -5px 10px #b5b5b5; border-radius: 10px; padding: 2%; margin: 2% auto; background: white; text-shadow: 0 0 0 rgb(159, 159, 159);}
footer #contact #social p {font-size: 18px; padding: 10%: width: 20% }

footer #contact #social ul {  margin: 2% auto; }
footer #contact #social ul li { display: block; margin: auto; }
footer #contact #social ul li.p {}
footer #fend2 { font-size: 12px; width: 100%; background: white; box-shadow: 0 -10px 20px #b5b5b5; padding-top: 10px ; position: absolute; bottom: 0; }
footer #fend2 img.logo { width: 150px; height: 30px;}
footer #fend2 #fend { width: 1170px; margin: auto; }
footer #fend2 ul#nav2 { width: 40%; float: right; }
footer #fend2 ul#nav2 li { padding: 1% 0 1% 2%; line-height: 40px; vertical-align: middle; display: inline-block; text-align: right;}

#about img { display: block; margin: auto; }

#about h2, #media h2, #services h2,  { text-shadow: 0 1px 0 rgb(159, 159, 159);}
#home #developement h2{ text-shadow: 0 1px 0 rgb(189, 189, 189);}

.botbar {margin: auto;display: block; width: 200px; height: 10px;}
/*.b {font-weight: 700;} */


.clear { clear: both }
/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  padding-top: 25px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
 /* max-width: 1200px;*/
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  z-index: 20000;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

overflow-hide {overflow: hide;}

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

	header .stickyMenu .content {
		width: 100%;
	}

	header ul#navi {
		max-width: 100%;
		background-color: #fff;
	}

	header ul#navi li a {
		text-align: left;
	}
	
#about-baae, #services, #social,#fend2,#top,#about-baae, #developemnt, .dev, #media .container, footer #contact, #sloganbox  { width: 100%; display: block; margin: auto;  }

header a#logo { display: inline-block; margin: 20px 10px 10px 0;}

#about-txt, #service{ padding-left: 3%; padding-right: 3%; margin: 2% 2%;}
#serv-bg #services .boxy { margin: 2% auto; width: 468px}
.boxy p { }

#media { height: auto; }
#media ol.vjs-playlist-item-list li { width: 49%;}
#media ol.vjs-playlist-item-list li picture { width: 100%;}

#home #developement embed, #home #developement iframe {display: none }
#home #developement h2 {font-size: 24px}

.modal { width: 100%;}
.modal .video-container video{}
.modal-content { width: 70%; }

  video.video-js{
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  }
#services, #home #developement, footer {  }
content .main-video{ width: 100%; margin: 0 auto; text-align: center; position: relative; }
header ul#navi li a{ text-align: center;}
#developement img { display: inline-block; width: 736px; height: 436px; padding: 0; margin: 0 auto; border-radius: 2%;box-shadow: 0 10px 20px #b5b5b5; float: none; text-align: center;}
.dev {text-align: center;}
}

@media only screen and (max-width: 575px) {
#about-baae, #services, #social,#fend2,#top,#about-baae, #developemnt, .dev, #media .container, footer #contact, #sloganbox  { width: 100%; display: block; margin: auto; padding: 0;}
#serv-bg #services {}
#serv-bg #services .boxy { margin: 2% auto; width: 80% }

#media ol.vjs-playlist-item-list li { width: 100%;}
#media ol.vjs-playlist-item-list li picture { width: 100%; }

footer #contact #social { width: 90%; }

#home #developement embed, #home #developement iframe {display: none; }
#home #developement h2 {font-size: 24px}

.modal { width: 100%; padding: 0%; }

.modal-content { width: 65%; }
#services{height: 680px }
 footer {height: 680px }
header #top { font-size: 10px; text-align: center;}
header ul#navi li a{ text-align: center;}
#home #developement img { display: inline-block; width: 436px; height: 266px; padding: 0; margin: 0 auto; border-radius: 2%;box-shadow: 0 10px 20px #b5b5b5;}
}