@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Serif'), local('DroidSerif'), url(https://fonts.gstatic.com/s/droidserif/v6/0AKsP294HTD-nvJgucYTaIgp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
    font-family: 'museo_sans300';
    src: url('fonts/museosans_300-webfont.eot');
    src: url('fonts/museosans_300-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/museosans_300-webfont.woff') format('woff'),
         url('fonts/museosans_300-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'museo_sans700';
    src: url('fonts/museosans_700-webfont.eot');
    src: url('fonts/museosans_700-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/museosans_700-webfont.woff') format('woff'),
         url('fonts/museosans_700-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'museo_sans900';
    src: url('fonts/museosans_900-webfont.eot');
    src: url('fonts/museosans_900-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/museosans_900-webfont.woff') format('woff'),
         url('fonts/museosans_900-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

html					{width:100%; height:100%; margin:0px; padding:0px; background: #F5F5F5;}
body					{width:100%; height:100%; margin:0px; padding:0px; font-family: 'Droid Serif'; font-size:16px; color:#ffffff; line-height: 26px;}

a						{text-decoration:none; outline: none; color:#ffffff;}
a:hover					{text-decoration:underline;}

.clearer:after 			{content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0;}
.clearer 				{display: inline-block;}

#wrap					{position: relative; display: block; width: 100%;}
#wrap_top				{position: absolute; display: block; width: 100%; height: 900px; top: 0px; left: 0px; background-color: #202020; z-index: 10;}

#content				{position: relative; display: block; width: auto; height: auto; max-width: 1400px; margin: 0px auto 0px auto; z-index: 15;}
#footer					{position: relative; display: block; width: 100%; height: auto; padding: 30px 10px 30px 10px; box-sizing: border-box; color: #747474; font-size: 12px; line-height: 14px; text-align: center;}

#logo					{position: relative; display: block; width: auto; height: auto; text-align: center; padding: 50px 0px 50px 0px;}
#head					{position: relative; display: block; width: auto; height: auto; padding-bottom: 55px; text-align: center;}
#head img				{position: relative; display: block; width: 100%; height: auto; box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.17); margin: 0px auto 0px auto;}
#head_content			{position: absolute; display: block; width: 100%; height: 100%; top: 360px; left: 0px; text-align: center;}
#head_content h1		{position: relative; display: block; width: auto; height: auto; font-family: 'museo_sans900'; font-size: 172px; line-height: 159px; letter-spacing: -0.05em; margin-bottom: 40px;}
#head_content h1 em		{font-family: 'Droid Serif'; font-style: italic;}
#head_quote				{position: relative; display: block; width: auto; height: auto; max-width: 480px; margin: 0px auto 0px auto; text-align: center; font-family: 'Droid Serif'; font-size: 16px; line-height: 26px;}
#head_quote em			{font-style: italic;}

#boxh					{position: relative; display: block; width: auto; height: auto; color: #747474; margin: 0px auto 0px auto;}
#boxh .box				{position: relative; display: flex; border-bottom: 1px solid #AEAEAE; padding-bottom: 60px; margin-bottom: 60px;}
#boxh .boxl				{position: relative; flex-basis: 450px; flex-grow: 0; flex-shrink: 0; border-right: 1px solid #AEAEAE; padding-right: 100px;}
#boxh .boxr				{padding-left: 115px; flex: auto;}
#boxh .box:last-child	{border-bottom: 0px; padding-bottom: 0px;}

#boxh .boxl .title		{position: absolute; display: block; width: auto; height: auto; top: 0px; left: 0px;}
#boxh .boxl h2			{font-family: 'museo_sans900'; font-size: 80px; line-height: 80px; color: #404040; text-transform: uppercase; letter-spacing: -0.06em; margin-bottom: 35px;}
#boxh .boxl em			{display: block; font-family: 'Droid Serif'; font-style: italic; text-transform: none;}
#boxh .boxl p			{font-family: 'museo_sans300'; font-size: 16px; line-height: 29px;}
#boxh .boxl p strong	{font-family: 'museo_sans900';}
#boxh .boxr p			{margin-bottom: 30px; font-size: 16px; line-height: 26px;}
#boxh .boxr img			{margin-bottom: 60px; margin-top: 30px; width: auto; max-width: 100%;}
#boxh .boxr ul			{list-style-type: disc; margin-bottom: 30px; margin-left: -10px;}
#boxh .boxr ul li span	{padding-left: 10px;}

.button			{display: inline-block; color: #202020; background: url(images/arrow_right.svg) center right no-repeat; padding: 0px 30px 0px 0px;}
.button:hover	{color: #F45656; text-decoration: none;}

#boxh .boxl .button	{margin-top: 40px;}

.fixesd					{position: fixed; display: flex; top: 0; left: 0;}

.boxr .carousel.fade-carousel {
  position: relative;
  width: 100%;
  margin-bottom: 60px; padding-top: 30px;
}

.boxr .carousel.fade-carousel > img {
  position: absolute !important;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  margin-bottom: 0; 
  margin-top: 0; 
  max-width: auto;
  object-fit: cover;            
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  pointer-events: none;
  z-index: 1;
}

.boxr .carousel.fade-carousel > img.active {
  opacity: 1;
  pointer-events: auto;
}

/* Controls (only show on hover) */
.boxr .carousel.fade-carousel .carousel-prev,
.boxr .carousel.fade-carousel .carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  border: 0;
  color: #fff;
  padding: 10px 12px;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2; /* above images */
}
.boxr .carousel.fade-carousel:hover .carousel-prev,
.boxr .carousel.fade-carousel:hover .carousel-next {
  opacity: 1;
}
.boxr .carousel.fade-carousel .carousel-prev { left: 10px; }
.boxr .carousel.fade-carousel .carousel-next { right: 10px; }

@media only screen and (max-width : 1469px) {
	#wrap_top	{height: 700px;}
	#logo		{padding-top: 30px; padding-bottom: 30px;}
	#head img	{max-width: 1100px;}
	#head_content		{top: 270px;}
	#head_content h1	{font-size: 135px; line-height: 135px;}
	#boxh			{max-width: 1100px;}
	#boxh .boxl		{flex-basis: 350px; padding-right: 80px;}
	#boxh .boxr		{padding-left: 95px;}
	#boxh .boxl h2	{font-size: 70px; line-height: 70px;}
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
	#wrap_top	{height: 600px;}
	#head img	{max-width: 900px;}
	#head_content		{top: 210px;}
	#head_content h1	{font-size: 115px; line-height: 115px;}
	#boxh			{max-width: 900px;}
	#boxh .boxl		{flex-basis: 300px; padding-right: 60px;}
	#boxh .boxr		{padding-left: 75px;}
	#boxh .boxl h2	{font-size: 60px; line-height: 60px;}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	#logo		{padding-top: 20px; padding-bottom: 20px;}
	#head img	{max-width: 750px;}
	#wrap_top	{height: 500px;}
	#head_content		{top: 190px;}
	#head_content h1	{font-size: 90px; line-height: 90px; margin-bottom: 20px;}
	#boxh			{max-width: 750px;}
	#boxh .boxl .title	{position: relative;}
	#boxh .box		{display: block;}
	#boxh .boxl		{display: block; border-right: 0px; padding-left: 40px; padding-right: 40px; margin-bottom: 60px;}
	#boxh .boxr		{padding-left: 40px; padding-right: 40px;}
	#boxh .box:last-child {margin-bottom: 0px;}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	#logo img	{width: 140px; height: auto;}
	#head img	{max-width: 450px;}
	#wrap_top	{height: 330px;}
	#head_content		{top: 100px;}
	#head_content h1	{font-size: 55px; line-height: 55px; margin-bottom: 10px;}
	#head_quote			{font-size: 14px; line-height: 20px;}
	#boxh				{max-width: 450px;}
	#boxh .box			{padding-bottom: 50px; margin-bottom: 50px;}
	#boxh .boxl h2	{font-size: 50px; line-height: 50px; margin-bottom: 20px;}
	#boxh .boxr p	{margin-bottom: 20px;}
	#boxh .boxr img	{margin-top: 20px; margin-bottom: 50px;}
	#boxh .boxr ul	{margin-bottom: 20px;}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
	#logo	{padding-top: 10px; padding-bottom: 10px;}
	#logo img	{width: 120px; height: auto;}
	#head {padding-left: 10px; padding-right: 10px; padding-bottom: 20px;}
	#head img	{width: 100%;}
	#wrap_top	{height: 250px;}
	#head_content		{top: 20px;}
	#head_content h1	{font-size: 40px; line-height: 40px; margin-bottom: 10px;}
	#head_quote			{font-size: 12px; line-height: 18px;}
	#boxh				{max-width: none;}
	#boxh .boxl			{padding-left: 20px; padding-right: 20px;}
	#boxh .boxl h2	{font-size: 40px; line-height: 40px; margin-bottom: 20px;}
	#boxh .boxl h2 em	{display: block;}
	#boxh .boxr			{padding-left: 20px; padding-right: 20px;}
	#boxh .boxr img	{margin-top: 10px; margin-bottom: 30px;}
	#footer			{font-size: 10px;}
}