@charset "utf-8";
body {
/*	background: url(../images/bg.jpeg) #000 repeat;*/
	background-color: #DD213A;
	
	font-family: 'Roboto', sans-serif;
	font-size: 17px;
	font-weight: 400;
	color: #fff;
	
}

h1,h2,h3,h4,h5,h6{font-weight:900;}
p{
	margin-bottom:20px;
	line-height: 150%;
	font-weight:700;
}





.nav {
  height: 100vh;
  position: fixed;
  right: 10px;
  text-align: center;
  top: 0;
  width: 50px;
  z-index: 99999;
}

.nav ul {
	margin: 0;
	padding: 0;
	display: inline-block;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.nav ul li {
	margin: 0px 0;
	padding: 5px 0px;
}
.nav ul li a {
	width: 15px;
	height: 15px;
	display: block;
	border-radius: 100%;
	background:transparent;
	overflow: hidden;
	font-size: 0px;
	position: relative;
	border: 0px solid #dadada;
	transition: 0.2s all ease-in-out;
	-moz-transition: 0.2s all ease-in-out;
	-webkit-transition: 0.2s all ease-in-out;
	-ms-transition: 0.2s all ease-in-out;
	-o-transition: 0.2s all ease-in-out;
	 border-width: 2px; 
	border-style: solid;
	border-color: #fff;
}
.nav ul li a.active{border-color: #fff !important; background-color: #fff;}

.banner-wrapper{
	text-align: center;
	padding: 100px 0 200px 0;
}
.banner-wrapper h1{
	font-family: 'Raleway', sans-serif;
	font-size: 105px;
	font-weight: 900;
	display: inline-block;
	text-transform: uppercase;
	margin: 0;
	line-height: 100%;
	color: #fff;
	text-shadow: 3px 1px rgba(0,0,0,0.2);
	
	
}

.banner-wrapper h1 span{display:block; font-size: 100px;}



.container{
	position:relative;
	margin: 0 auto;
	max-width: 1000px;
	padding: 0px 15px;
	z-index: 9999;
	min-height: 300px;
	
}


/*Content*/
.content{position: relative; }
.content p a{text-decoration:underline;}
.content h2{font-size: 36px; margin: 10px 0px; transition: all 0.2s ease-in-out; }
.more-content h2{font-size: 50px; margin: 10px 0px; transition: all 0.2s ease-in-out; text-align:center;}
.content figure{
	width: 300px; 
	height: 300px;
	display: inline-block;
	border-radius: 100%;
	overflow: hidden;
	padding: 8px;
	background: #fff;
	transition: all 0.2s ease-in-out;
	position: relative;
}

.content figure img{
  -webkit-filter: grayscale(1);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
	transition: all 0.2s ease-in-out;
}

.content figure img{border-radius:100%;}


.svg-animate{
	position:absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	z-index: 9999;
	margin-top: -20px;
	margin-left:-20px;
	transition: opacity 1s ease-in-out;
	border-radius: 0 !important;
	
	opacity: 0;
}

.skew-wrapper:hover .svg-animate{
	opacity: 1;
}



/*Change on responsive*/
.content .right-content{float:left; margin:30px 400px 0px 0px; padding-bottom:100px;} 
.content .left-content{float:right; position: absolute; right: 0; top: 0;}


@media (max-width:1200px) {
	.content .right-content{float:left; margin:30px 400px 0px 0px; padding-bottom:0px; padding-top:30px;} }

.wrapper .skew-wrapper:nth-child(even) .content .right-content{float:right; margin:30px 0px 0px 400px;}
.wrapper .skew-wrapper:nth-child(even) .content .left-content{float:right; position: absolute; right: inherit; top: 0; left: 0;}


/*More Content*/
.more-content{display:none;}
.video-content{
	border:8px solid #fff;
	margin-bottom: 100px;
}



.wrapper .skew-wrapper {
	height: auto;
    position: relative;
    width: 100%;
	padding: 0px 0px 225px 0px;
/*	background: url(../images/bg.jpeg) #000 repeat;*/
	
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	
}
.skew-wrapper-next{background: url(../images/bg.jpeg) #000 repeat;}
.wrapper .skew-wrapper.skew-wrapper-last{
	height:127px;
	display: none;
	
}
.wrapper .skew-wrapper:last-child{padding-bottom: 60px;}

.wrapper .skew-wrapper::before {
    top: 0;
    transform: skewY(-10deg);
    transform-origin: left top 0;
}

.wrapper .skew-wrapper:nth-child(even)::before {
	transform: skewY(10deg);
	transform-origin: right top 0;
}

.wrapper .skew-wrapper::before {
    background: inherit;
    content: "";
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1;
}



.wrapper .skew-wrapper .skew-line{
    height: 5px;
    position: absolute;
    width: 100%;
    z-index: 1;
	background: #fff;
}

.wrapper .skew-wrapper .skew-line{
	
	top: 0;
    transform: skewY(-10deg);
    transform-origin: left top 0;
}

.wrapper .skew-wrapper:nth-child(even) .skew-line {
	transform: skewY(10deg);
	transform-origin: right top 0;
}

/*Global active state*/

/*hover state*/
/*.wrapper .skew-wrapper:hover h2,*/
.wrapper .skew-wrapper.is-active h2,
.wrapper .skew-wrapper.is-active a{
	color:#fff;
	cursor:pointer;
}
/*.wrapper .skew-wrapper:hover .content figure,*/
.wrapper .skew-wrapper.is-active .content figure{
	background: #fff;
}

.wrapper .skew-wrapper:hover .content figure img,
.wrapper .skew-wrapper.is-active .content figure img{
   -webkit-filter: grayscale(0);
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}



/*Theme 'bg-1'*/
.skew-wrapper.bg-1 .skew-line,
.skew-wrapper.bg-1.is-active, 
.skew-wrapper.bg-1{background: #FEC400;}
.skew-wrapper.bg-1 a{color: #FEC400;}


/*Theme 'bg-2'*/
.skew-wrapper.bg-2 .skew-line,
.skew-wrapper.bg-2.is-active,
.skew-wrapper.bg-2{background: #152D85;}
.skew-wrapper.bg-2 a{color: #152D85;}


/*Theme 'bg-3'*/
.skew-wrapper.bg-3 .skew-line,
.skew-wrapper.bg-3.is-active,
.skew-wrapper.bg-3{background: #CF236F;}
.skew-wrapper.bg-3 a{color: #CF236F;}


/*Theme 'bg-4'*/
.skew-wrapper.bg-4 .skew-line,
.skew-wrapper.bg-4.is-active,
.skew-wrapper.bg-4{background: #F62C14;}
.skew-wrapper.bg-4 a{color: #F62C14;}


/*Theme 'bg-5'*/
.skew-wrapper.bg-5 .skew-line,
.skew-wrapper.bg-5.is-active,
.skew-wrapper.bg-5{background: #FEC400;}
.skew-wrapper.bg-5 a{color: #FEC400;}


/*Theme 'bg-6'*/
.skew-wrapper.bg-6 .skew-line,
.skew-wrapper.bg-6.is-active,
.skew-wrapper.bg-6{background: #152D85;}
.skew-wrapper.bg-6 a{color: #152D85;}

/*Theme 'bg-7'*/
.skew-wrapper.bg-7 .skew-line,
.skew-wrapper.bg-7.is-active,
.skew-wrapper.bg-7{background: #CF236F;}
.skew-wrapper.bg-7 a{color: #CF236F;}

/*Theme 'bg-8'*/
.skew-wrapper.bg-8 .skew-line,
.skew-wrapper.bg-8.is-active,
.skew-wrapper.bg-8{background: #F62C14;}
.skew-wrapper.bg-8 a{color: #F62C14;}

/*Theme 'bg-9'*/
.skew-wrapper.bg-9 .skew-line,
.skew-wrapper.bg-9.is-active,
.skew-wrapper.bg-9{background: #FEC400;}
.skew-wrapper.bg-9 a{color: #FEC400;}


/*Theme 'bg-11'*/
.skew-wrapper.bg-11 .skew-line,
.skew-wrapper.bg-11.is-active,
.skew-wrapper.bg-11{background: #CF236F;}
.skew-wrapper.bg-11 a{color: #CF236F;}


/*Theme 'bg-10'*/
.skew-wrapper.bg-10 .skew-line,
.skew-wrapper.bg-10.is-active,
.skew-wrapper.bg-10{background: #152D85;}
.skew-wrapper.bg-10 a{color: #152D85;}
.chotu{
	max-width:600px;
	margin:0 auto;}





.padinging{
	padding-bottom:100px;}



/*social*/

.social {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 30px;
    z-index: 999999;
    display: block;
	text-align:center;
}

.logo {
    position: absolute;
    top: 15px;
   left: 15px;
    width: 50px;
    z-index: 9999;
    display: block;
}

.logo img{
	width: 100%;
	
}
.social-back {
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
    cursor: pointer;
}
.social-icons {
    display: none;
}
.social-icons.show {
    display: block;
}
.social-icons .facebook,
.social-icons .twitter,
.social-icons .copyright {
   width: 30px;
   height: 30px;
   margin-bottom: 8px;
   display:inline-block;
}

.social img{
	width:100%;
}

@media(max-width : 768px){
	
	.social {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 30px;
    z-index: 9999;
    display: block;
}

	.logo {
    position: absolute;
    top: 15px;
   left: 15px;
    width: 35px;
    z-index: 3;
    display: block;
}

.social-back {
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
    cursor: pointer;
}

.social-icons .facebook,
.social-icons .twitter,
.social-icons .copyright {
   width: 30px;
   height: 30px;
   margin-bottom: 8px;
}
}

.footer-wrapper {
    width: 100%;
    bottom: 0;
    left: 0;
	
    text-align: center;
    font-size: 12px;
	font-weight:600;
	background-color:#000;
    z-index: 10;
    padding: 20px 5%;
}
.footer-wrapper a {
    color: #fff;
}
.copy {
    float: left;
}
.credits {
    float: right;
    cursor: pointer;
}



.creditsModal {
    padding: 20px;
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000000;
    top: 0;
    left: 0;
    text-align: center;
    display: none;
}
.modal-content {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: relative;
    font-size: 14px;
}
.modal-content span {
    display: block;
    padding: 4px 0px
}
.modalClose {
    display: inline-block;
    ;
    font-size: 30px;
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
}