@font-face {
    font-family: 'Replica';
    src: url('fonts/Replica-Light.eot');
    src: url('fonts/Replica-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Replica-Light.woff2') format('woff2'),
        url('fonts/Replica-Light.woff') format('woff'),
        url('fonts/Replica-Light.ttf') format('truetype'),
        url('fonts/Replica-Light.svg#Replica-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Replica';
    src: url('fonts/Replica-Bold.eot');
    src: url('fonts/Replica-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Replica-Bold.woff2') format('woff2'),
        url('fonts/Replica-Bold.woff') format('woff'),
        url('fonts/Replica-Bold.ttf') format('truetype'),
        url('fonts/Replica-Bold.svg#Replica-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Replica';
    src: url('fonts/Replica-Regular.eot');
    src: url('fonts/Replica-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Replica-Regular.woff2') format('woff2'),
        url('fonts/Replica-Regular.woff') format('woff'),
        url('fonts/Replica-Regular.ttf') format('truetype'),
        url('fonts/Replica-Regular.svg#Replica-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}



/*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: .05rem solid #fff;
}


/*
 * Base structure
 */

html,
body {
  height: 100%;
  font-family: 'Replica';
  font-weight: 300;
  overflow: hidden;
  letter-spacing: 0.08em;
  font-size: 16px;
  line-height: 28px;

}

body {
  display: -ms-flexbox;
  display: flex;
  color: #FFF;

}


h1,h2,h3,h4,h5,h6 {font-weight: 300; letter-spacing: 0px;}

h1 b,h2 b,h3 b,h4 b,h5 b,h6 b,
h1 strong,h2 strong,h3 strong,h4 strong,h5 strong,h6 strong {font-weight: 300px;}






/* HOME */
.content {position: relative; height: 100%;}

.home-1,.home-2 {width:100%; height: 100%; left:0px; bottom:0px; position: absolute; display: table;}
.home-1 {}
.home-2 {background:#000; top:100%;position: relative;background: linear-gradient(to bottom , #000, transparent);background-color: rgba(0,0,0,0.2);width: 100%;height: 100%;}

.capt {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    color: #252525;
}


to-bottom {
    cursor: pointer;
    font-size: 24px;
    left: 50%;
    position: absolute;
}


.to-bottom:before {
    border-color: #c0c0c0 transparent transparent;
    border-style: solid;
    border-width: 40px;
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -40px;
    height: 0;
    width: 0;
    transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -webkit-animation-name: tobot; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: tobot;
    animation-duration: 2s;
    animation-iteration-count: infinite;

}
.to-bottom .fa {
    bottom: 0;
    left: -7px;
    position: absolute;
    text-align: center;
    top: -25px;

}



.to-bottom:hover:before {
    border-color: #FFF transparent transparent;
}




@-webkit-keyframes tobot {
    0%   {bottom:0px}
    50%  {bottom:-10px}
    100% {bottom:0px;}
}
@keyframes tobot {
    0%   {bottom:0px}
    50%  {bottom:-10px}
    100% {bottom:0px;}
}

/* HOME */



.logo-ppr,.navmn {display: inline-block;}


.logo-ppr {width:100%; max-width: 350px;}
.name-ppr {height: 30px;}

.navmn li {list-style: none;}
.navmn {padding:0px; margin:0px; margin-left: 30px; text-align: left;  }

.navmn a {display: block; transition: all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; background: linear-gradient(to left, transparent 50%, #ec3642 50%); background-size: 200% 100%; background-position: right bottom!important;
padding: 10px 20px 10px 5px;
}
.navmn a h1 {padding:0px; margin:0px; font-size: 10px;}
.navmn a:hover {background-position: left bottom!important;}

.itemcol {text-align: center;}

.bar-content {margin-top: 50px; width:100%;}

.bar-foot {width:100%; position: absolute; bottom:10px; text-align: center;}



.overlay {
	position: absolute;
    background: linear-gradient(to bottom , transparent, #000);
    background-color: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;}

.content-shop,
.content-factory,
.content-world,
.content-home {position: absolute; bottom:0px; top:0px; left:0px; right:0px; width:100%; z-index:2; overflow-x: auto;}

.content-shop {background:#000; display: none; }
.content-factory {background:#000; display: none; }
.content-world {background:#000; display: none; }
.content-home {

background: url(img/pworld1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

.content-home h1,.content-home h2, .content-home h3, .content-home h4, .content-home h5, .content-home h6 {color:#c0c0c0;}
.content-factory h1,.content-factory h2, .content-factory h3, .content-factory h4, .content-factory h5, .content-factory h6 {color:#63b378;}

.content-factory h1,.content-factory h2, .content-factory h3, .content-factory h4, .content-factory h5, .content-factory h6 {color:#fff;}



.content-foot {text-align: center; margin-top: 80px; font-size: 12px;}

.itemcol img {height: 140px; transition: all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s;}



.itemcol a {display: block; width:100%; padding-bottom: 20px; padding-top: 20px; transition: all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s;}

/*
.itemcol a:hover {background: #000;}
*/

.itemcol a:hover img {height: 160px;}



.linelogo {text-align: center; margin-bottom: 80px;}


.overlayhead  {
    position: absolute;
    background: linear-gradient(to bottom , transparent, #000);
    background-color: rgba(0,0,0,0.0);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}


.langsel img {width:30px;}
.langsel {position: absolute; top:20px; left: 20px; z-index: 999;}
.langsel {margin:0px; padding:0px;}
.langsel li {list-style: none; display: inline-block;}

.langsel a {-webkit-filter: grayscale(100%);
    filter: grayscale(100%); transition: all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s;}

.langsel a.active,
.langsel a:hover {-webkit-filter: grayscale(0%); filter: grayscale(0%);}






.head-factory {	background: url(img/pworld2.jpg) no-repeat center center fixed; }
.head-world {	background: url(img/pworld3.jpg) no-repeat center center fixed; }
.head-shop {	background: url(img/pworld3.jpg) no-repeat center center fixed; }

.conthead {color:#FFF; padding:100px 0px;}

.head {
	position: relative;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


.content-inside {margin-top: 90px;}

.content-inside p {margin-bottom: 25px;}



.head {text-align: center;}
.head img {width:100%; max-width: 430px; padding:20px 0;margin-bottom: 40px;}


a.implode {
	z-index: 99;
    background: #000;
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 50%;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 29px;
    transition: all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s;
    border:1px solid #000;
}

a.implode:hover {background:transparent; color:#000; text-decoration: none;}




.cover-container {
  max-width: 42em;
}




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

.logo-ppr {width:180px;}
.capt {vertical-align: top; padding-top: 50px;}
.itemcol img {height: 120px;}
.linelogo {text-align: center;margin-bottom: 40px;}
.itemcol a {padding:10px 0px;}

.head img {width:180px}
.conthead h1, .conthead h2, .conthead h3, .conthead h4 {font-size: 22px;}

}


.new-home .itemcol {position: relative; border:0px solid red; height: 180px;}
.new-home .itemcol a {padding:0px;}
.new-home .new-web {color:#FFF; text-transform: uppercase; font-size: 12px; position: absolute; width:100px; left:50%; margin-left: -54px; top:-10px;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 5s ease infinite;
}


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.itemcol small {color:#FFF; letter-spacing: 1px;}