@charset "utf-8";
@font-face {
font-family: 'GothamBold';
src: url('http://theseacemetery.com/css/fonts/gothambold.eot');
src: url('http://theseacemetery.com/css/fonts/gothambold.eot') format('embedded-opentype'),
url('http://theseacemetery.com/css/fonts/gothambold.woff') format('woff'),
url('http://theseacemetery.com/css/fonts/gothambold.ttf') format('truetype'),
url('http://theseacemetery.com/css/fonts/gothambold.svg#GothamBold') format('svg');
}
​
@font-face {
font-family: 'GothamMedium';
src: url('http://theseacemetery.com/css/fonts/gothammedium.eot');
src: url('http://theseacemetery.com/css/fonts/gothammedium.eot') format('embedded-opentype'),
url('http://theseacemetery.com/css/fonts/gothammedium.woff') format('woff'),
url('http://theseacemetery.com/css/fonts/gothammedium.ttf') format('truetype'),
url('http://theseacemetery.com/css/fonts/gothammedium.svg#gothammedium') format('svg');
}
​
@font-face {
font-family: 'GothamLight';
src: url('http://theseacemetery.com/css/fonts/gotham-light-1361523255.eot');
src: url('http://theseacemetery.com/css/fonts/gotham-light-1361523255.eot') format('embedded-opentype'),
url('http://theseacemetery.com/css/fonts/gotham-light-1361523255.woff') format('woff'),
url('http://theseacemetery.com/css/fonts/gotham-light-1361523255.ttf') format('truetype'),
url('http://theseacemetery.com/css/fonts/gotham-light-1361523255.svg#gotham-light-1361523255') format('svg');
}



/* CSS Document */
html, form{ width:100%; height:100%;}
body{ width:100%; height:100%; margin:0; padding:0;}
a{-webkit-transition: all 0.2s;  -moz-transition: all 0.2s;  -o-transition: all 0.2s;  transition: all 0.2s;}
a, a img{ text-decoration:none; outline:none;}
.clr{ clear:both; height:0;}
::-webkit-input-placeholder {color:#979a9b;}
:-moz-placeholder {color:#979a9b;}
::-moz-placeholder {color:#979a9b;}
:-ms-input-placeholder {color:#979a9b;}

body,input,textarea,select,option{font-family: 'GothamMedium', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
label{cursor: pointer;}
textarea,input,select{  border-radius: 0;}
input[type="submit"],button{  cursor: pointer;  -webkit-appearance: none;  border-radius:0;}
.hidden{  display: none;}
img{    outline: none;    border: none;    display: inline;    vertical-align: middle;}
*,*:after,*::before {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  margin: 0;  padding: 0;  text-decoration: none;  list-style-type: none;  outline: none;}



section.screen{ width: 100%; height: 100%; position: absolute; top:0; left:0; overflow: hidden; display:none;}
.container{ width: 100%; height: 100%; position: relative; }

#firstScreen{ display:block; background: #fff;}
.tableContent{ width:100%; height:100%; display:table;}
.tableContentCol{ display:table-cell; text-align: center; vertical-align:middle;}
.tableContentCol img{ display:block; margin:0 auto 95px auto;}
.tableContentCol a{ display:inline-block; color:#000; font-size:15px;padding:10px;font-weight: bold;}

#secondScreen{ background: rgba(255,255,255,0.9); }
#secondScreen .tableContentCol{ color:#000; font-size:16px; line-height:27px;}
#secondScreen .tableContentCol div{ position:relative;}
#secondScreen .tableContentCol div::before{ width:110px; height:5px; background:#000; position:absolute; top:-30px; left:50%; display:block; content:""; margin-left:-55px;}
#secondScreen .tableContentCol div::after{ width:110px; height:5px; background:#000; position:absolute; bottom:-30px; left:50%; display:block; content:""; margin-left:-55px;}
#secondScreen .tableContentCol a.more{color:#000; font-size:10px;background:url(http://theseacemetery.com/images/arrow.png) no-repeat center right; position: absolute; top:50%; right:80px; padding-right:25px;font-weight: bold;}

#thirdScreen{ background: #000;}
.video{ display: block; height: 100%; width: auto; position:absolute;}

#thirdScreen a.logo{ position: absolute;  display: block; width: 813px; height: 155px; top:30px; left: 50%; margin-left:-406px; background: url(http://theseacemetery.com/images/logoWhite.png);}


.topShadow{ width: 100%; height: 402px; background: url(http://theseacemetery.com/images/topShadow.png) repeat-x top center; position: absolute;}
.bottomShadow{ width: 100%; height: 316px; background: url(http://theseacemetery.com/images/bottomShadow.png) repeat-x bottom center; position: absolute;bottom:0;}

.menu{ position: absolute; bottom:50px; width: 100%; left:0; text-align: center;}
.menu a.mainLink, .menu span{ display: inline-block; font-size: 14px; color: #fff; font-family:Arial, sans-serif; font-weight: bold; border-top:5px solid #fff; padding:5px 0; margin:0 35px; position: relative;}
.menu a.mainLink::after, .menu span::after{ height: 5px; background: #fff; position: absolute; display: block; content:""; width: 0; bottom:-5px;-webkit-transition: all 0.2s;  -moz-transition: all 0.2s;  -o-transition: all 0.2s;  transition: all 0.2s;}
.menu a.mainLink:hover::after, .menu span:hover::after{ width: 100%;}
.menu a.fb{ display: none; width: 22px; height: 23px; background: url(http://theseacemetery.com/images/fb.png) no-repeat top; position: absolute; top:-28px; left: 0;}
.menu a.tw{ display: none; width: 22px; height: 23px; background: url(http://theseacemetery.com/images/tw.png) no-repeat top; position: absolute; top:-28px; right: 0;}

.menu span:hover a.fb, .menu span:hover a.tw{ display: block; }

.langMenu{ position: absolute; top:25px; right:25px; font-size:10px;color:#a9bad2;}
.langMenu a{color:#a9bad2; padding:0 5px; display: block; float: left;}
.langMenu a.active{ color: #fff;}
.langMenu span{ display: block; float: left;}

#player { width:750px; height:430px;}

.lb{ width: 100%; height: 100%; position: absolute; z-index: 99; background: rgba(0,0,0,0.9); display: none;}
.lbContent{ position: relative; width: 750px; margin:100px auto; }
.closeLb{ display: block; color:#fff; position: absolute; top:0; right:-55px;font-size:12px; font-weight: bold; display: none;}


.toolTipBox{ width: 100%; height: 100%; position: absolute;}
.toolTipBoxContent{ width: 100%; height: 100%; position: relative; }
.toolTipBoxContent a{ display: block; position: absolute; }
.thumbContainer{ width: 100%; height: 100%; position: relative; display: none;}

.videoThumb{ position: absolute; width: 290px; height: 160px; border: 3px solid #fff; overflow: hidden;}
.videoThumb video{ width:100%; height: auto; }
.videoThumb.right{ top:-100px; left: 110%; }
.videoThumb.left{ top:-100px; right: 110%; }

.toolTip1 {width: 1.5%;height: 10%;top: 61%;left: 0.3%;}
.toolTip2 {width: 2.5%;height: 18%;top: 55%;left: 2%;}
.toolTip3 {width: 1.3%;height: 13%;top: 58%;left: 5.5%;}
.toolTip4 {width: 3.1%;height: 23%;top: 50%;left: 7%;}
.toolTip5 {width: 2.7%;height: 19.1%;top: 53.1%;left: 12%;}
.toolTip6 {width: 1.5%;height: 15%;top: 57%;left: 15.5%;}
.toolTip7 {width: 3.5%;height: 28%;top: 47%;left: 17.2%;}
.toolTip8 {width: 2.3%;height: 19%;top: 53%;left: 21.3%;}
.toolTip9 {width: 3.9%;height: 34%;top: 45%;left: 25%;}
.toolTip10 {width: 2.1%;height: 20%;top: 53%;left: 30%;}
.toolTip11 {width: 4%;height: 28%;top: 47.8%;left: 34.5%;}
.toolTip12 {width: 2.6%;height: 19%;top: 53.8%;left: 40%;}
.toolTip13 {width: 4%;height: 30%;top: 46.8%;left: 44.6%;}
.toolTip14 {width: 2.5%;height: 19%;top: 53.8%;left: 48.8%;}
.toolTip15 {width: 3.8%;height: 27%;top: 47.5%;left: 53%;}
.toolTip16 {width: 2.5%;height: 18%;top: 54.5%;left: 58%;}
.toolTip17 {width: 1.6%;height: 15%;top: 56.5%;left: 61%;}

.logo_mobil, .paylastitle, .mob_more { display:none !important}

@media all and (min-width: 1366px) and (max-width: 1680px) {
	
.toolTip1 {width: 1.5%;height: 10%;top: 61%;left: 0.3%;}
.toolTip2 {width: 2.7%;height: 18%;top: 55%;left: 3%;}
.toolTip3 {width: 2%;height: 13%;top: 58%;left: 7.8%;}
.toolTip4 {width: 3.7%;height: 23%;top: 50%;left: 10%;}
.toolTip5 {width: 2.7%;height: 19.1%;top: 53.1%;left: 17.5%;}
.toolTip6 {width: 2%;height: 15%;top: 57%;left: 22%;}
.toolTip7 {width: 5%;height: 28%;top: 47%;left: 24.2%;}
.toolTip8 {width: 3.4%;height: 19%;top: 53%;left: 30%;}
.toolTip9 {width: 5.7%;height: 34%;top: 45%;left: 35%;}
.toolTip10 {width: 3.2%;height: 20%;top: 53%;left: 42%;}
.toolTip11 {width: 4%;height: 28%;top: 47.8%;left: 49.5%;}
.toolTip12 {width: 3.5%;height: 19%;top: 53.8%;left: 56.6%;}
.toolTip13 {width: 5.3%;height: 30%;top: 46.8%;left: 62.8%;}
.toolTip14 {width: 3.0%;height: 19%;top: 53.8%;left: 69.4%;}
.toolTip15 {width: 4.8%;height: 27%;top: 47.5%;left: 75%;}
.toolTip16 {width: 2.5%;height: 18%;top: 54.5%;left: 83%;}
.toolTip17 {width: 2.2%;height: 15%;top: 56.5%;left: 86.2%;}
	
}

@media all and (min-width: 1680px) and (max-width: 1920px) {
	
	.toolTip1 {width: 1.5%;height: 10%;top: 61%;left: 0.3%;}
.toolTip2 {width: 2.7%;height: 18%;top: 55%;left: 3%;}
.toolTip3 {width: 2%;height: 13%;top: 58%;left: 7.8%;}
.toolTip4 {width: 4%;height: 23%;top: 50%;left: 10.2%;}
.toolTip5 {width: 3.5%;height: 19.1%;top: 53.1%;left: 17.5%;}
.toolTip6 {width: 2.5%;height: 15%;top: 57%;left: 22.5%;}
.toolTip7 {width: 5%;height: 28%;top: 47%;left: 25.2%;}
.toolTip8 {width: 3%;height: 19%;top: 53%;left: 31%;}
.toolTip9 {width: 5.7%;height: 34%;top: 45%;left: 36%;}
.toolTip10 {width: 3.2%;height: 20%;top: 53%;left: 43%;}
.toolTip11 {width: 4.8%;height: 28%;top: 47.8%;left: 50.5%;}
.toolTip12 {width: 3.5%;height: 19%;top: 53.8%;left: 58.2%;}
.toolTip13 {width: 6%;height: 30%;top: 46.8%;left: 64.5%;}
.toolTip14 {width: 3.0%;height: 19%;top: 53.8%;left: 71.4%;}
.toolTip15 {width: 4.8%;height: 27%;top: 47.5%;left: 77.5%;}
.toolTip16 {width: 3.5%;height: 18%;top: 54.5%;left: 85%;}
.toolTip17 {width: 2.2%;height: 15%;top: 56.5%;left: 89%;}
	
}
@media only screen and (max-width: 680px) {

body,input,textarea,select,option{font-family: 'GothamBold', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}

.video, .topShadow, .bottomShadow, .toolTipBox, .audios, .langeng, .langMenu span {display:none !important}

section.screen{  height:auto; position:relative; overflow:visible }
#firstScreen {height:10%; display:block;}
#secondScreen { height:90%; display:block;}
#thirdScreen { height:100%; background:url(http://theseacemetery.com/images/bg_mobil.png) no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
#thirdScreen a.logo{ position: absolute;  display: block; width: 100%; height: auto; top:30px; left:0; margin-left:auto;background:none; text-align:center}
.logo_mobil {  width:90%; display:block !important; max-width:531px; margin:0 auto}

.menu{ position: absolute; bottom:0px; width: 100%; left:0; text-align: center;}
.menu a.mainLink, .menu span{ display:block; float:left; width:49%; margin:0.5%; padding:20px 0; background:#FFFFFF; color:#172d53; border:0 }
.menu span{ background:none }
.menu a.mainLink::after, .menu span::after{ height: auto; background: #fff; position: absolute; display: block; content:normal; width: 0; bottom:auto;-webkit-transition: all 0.2s;  -moz-transition: all 0.2s;  -o-transition: all 0.2s;  transition: all 0.2s;}
.menu a.mainLink:hover::after, .menu span:hover::after{ width: 49%;}
.menu a.fb{ display: block; width: 25px; height: 25px; position: absolute; top:8px; left: 70px; }
.menu a.tw{ display: block; width: 25px; height: 25px; position: absolute; top:8px; left: 105px; right:auto}
.menu.tr a.fb{ display: block; width: 25px; height: 27px; background: url(../images/fb2.png) no-repeat top center fixed;   -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; position: absolute; top:10px; left: 105px; }
.menu.tr a.tw{ display: block; width: 26px; height: 27px; background: url(../images/tw2.png) no-repeat top center fixed;   -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; position: absolute; top:10px; left: 70px; right:auto}
.paylastitle { display: block !important; line-height: 23px; height: 23px;  position: absolute; top:10px; left: 10px; color:#fff}
.langMenu{position: absolute;top: 0;right: 0;font-size:10px;color: #172d53;padding: 20px;background: #fff;}
.langMenu a{color: #172d53 !important; font-size:14px}
.tableContentCol img{display:block;    margin: 20px auto 0;width: 90%;}
#secondScreen .tableContentCol div::before{ top: auto; position:relative; margin:10px auto; left:auto }
#secondScreen .tableContentCol div::after{ bottom:auto; position:relative; margin:10px auto; left:auto }
.tableContentCol {}
#secondScreen .tableContentCol{ color:#000; font-size:13px; line-height:15px;}

#secondScreen .tableContentCol a.more{color:#fff; font-size:15px;background: #000; bottom:0;  top:auto; right:auto; padding-right:0;font-weight: bold; height:80px; line-height:80px; width:100%; left:0}

.mob_more {width:auto !important; margin:0 !important; display:inline-block !important}
#secondScreen .tableContentCol div {margin:-80px auto 0; width:96%; ;font-family: 'GothamBold';}



}


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


#secondScreen .tableContentCol{ color:#000; font-size:11px; line-height:13px;}




}