li {list-style-type: none;}
body {overflow-x:hidden;background:#2c3e50}
#ho_adv{display:none !important;}
@font-face {font-family:bigone; src: url(../fonts/bigone.ttf); }

.red::-webkit-scrollbar { background:transparent;overflow-x:hidden; width:5px; }
.red::-webkit-scrollbar-thumb { background-color:#c0392b; border:solid transparent; }

.blue::-webkit-scrollbar { background:transparent;overflow-x:hidden; width:5px; }
.blue::-webkit-scrollbar-thumb { background-color:#3276b1; border:solid transparent; }

.green::-webkit-scrollbar { background:transparent;overflow-x:hidden; width:5px; }
.green::-webkit-scrollbar-thumb { background-color:#16a085; border:solid transparent;}

.orange::-webkit-scrollbar { background:transparent;overflow-x:hidden; width:5px; }
.orange::-webkit-scrollbar-thumb { background-color:#f1c40f; border:solid transparent;}

.gray::-webkit-scrollbar { background:transparent;overflow-x:hidden; width:5px; }
.gray::-webkit-scrollbar-thumb { background-color:#74889d; border:solid transparent;}

.header_two { width:100%; min-height:50px; text-align:center; margin-bottom: -30px; }
.header_two h1{ font-family:'bigone', 'sans-serif'; font-size:45px; color:#c0392b; padding-top: 50px;margin-top:-50px;letter-spacing:3px;}
.header_explane { width:100%; min-height:50px; text-align:center;}
.header_explane h2{  font-family: 'Roboto', 'sans-serif'; font-size:25px; color:#fff;}
.header_explane em {color:#c0392b; font-style:normal; }
.context em {color:#c0392b; font-style:normal; }
.context h3 { color:#fff; font-size:25px; font-weight:100;padding-left: 20px; }

/* header */ 

/* enter */

.color_ground {background:#34495e;}
.hintsadd{position:fixed; left:70px;top:70px;}
.hintsadd:before{content:url(../images/arrowupleft1.png);}
.hintsmenu{position:fixed; right:70px;top:70px;}
.hintsmenu:after{content:url(../images/arrowupright.png);}
.hintssocial{position:fixed; left:70px;bottom:70px;}
.hintssocial:before{content:url(../images/arrowdownleft.png);}
.hintslogin{position:fixed; right:70px;bottom:70px;}
.hintslogin:after{content:url(../images/arrowdownright.png);}
.hints {
font-family: 'Roboto', 'sans-serif';
font-size:30px;font-weight:100;color:white;display:none;opacity:0;
  -webkit-transition: all ease 1.5s;
  -moz-transition: all ease 1.5s;
  -ms-transition: all ease 1.5s;
  -o-transition: all ease 1.5s;
  transition: all ease 1.5s; 
  }
  
.arrows {position:fixed;background-size:cover;z-index:9;opacity:0.7}  
.arrows:hover {opacity:1;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s; 
  }
  .arrows:active {opacity:1;}
.arrowup { left:50px;top:30%; 
-webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  }
  .arrowup  h3{ opacity:0;font-size:15px; color:#fff;  padding:0; top:-70px;left:-55px;position:relative;letter-spacing:3px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
    -webkit-transition: all ease 1.5s;
  -moz-transition: all ease 1.5s;
  -ms-transition: all ease 1.5s;
  -o-transition: all ease 1.5s;
  transition: all ease 1.5s; 
  }
  .arrowdown {cursor:pointer; left:-10px;bottom:30%; 
-webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  }
    .arrowdown h3{ opacity:0;font-size:15px; color:#fff;  padding:0; top:-95px;left:-60px;position:relative;letter-spacing:3px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
    -webkit-transition: all ease 1.5s;
  -moz-transition: all ease 1.5s;
  -ms-transition: all ease 1.5s;
  -o-transition: all ease 1.5s;
  transition: all ease 1.5s; 
  }
  .arrowadd { right:-10px;top:30%; 
-webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  }
  .arrowadd  h3{ opacity:0;font-size:15px; color:#fff;  padding:0; top:-80px;left:-55px;position:relative;letter-spacing:3px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
    -webkit-transition: all ease 1.5s;
  -moz-transition: all ease 1.5s;
  -ms-transition: all ease 1.5s;
  -o-transition: all ease 1.5s;
  transition: all ease 1.5s; 
  }
 .arrowdate { right:50px;bottom:30%; 
-webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  }
.arrowdate  h3{ opacity:0;font-size:15px; color:#fff;  padding:0; top:-95px;left:-55px;position:relative;letter-spacing:3px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
    -webkit-transition: all ease 1.5s;
  -moz-transition: all ease 1.5s;
  -ms-transition: all ease 1.5s;
  -o-transition: all ease 1.5s;
  transition: all ease 1.5s; 
  }
  
  #downgo {position:fixed; top:300px;}
  
  
#enter_begin {width: 100%; height:100%; background:#34495e; margin:0 auto; text-align:center;vertical-align:middle; z-index:999; position:fixed}
#enterfm { width: 40%; height:20%; margin: 0 auto; text-align:center; vertical-align:middle;}
#entersex { width: 60%; height:40%; margin: 120px auto; text-align:center; vertical-align:middle;}
#entersex img { display:inline;width: 30%; background-size:cover}
#enterask {width: 40%; height:20%; margin: 0 auto; text-align:center; vertical-align:middle;}
#enterask  h3{ font-family: 'Roboto', 'sans-serif'; color: white;font-size:45px; margin-top:130px;font-weight:100;} 
#enterfm h1 { font-family:'bigone', cursive; font-size: 260px;color: white;margin: 40px -21px;}
#enterfm h4 { font-family: 'Roboto', 'sans-serif'; color: white;font-size:35px; margin-bottom:-60px; letter-spacing: 33px; text-align:center; vertical-align:middle; padding-left:25px; font-weight:100;}
/* left menu blog*/

.menu-outer_left > nav ul { top:15%; }
.menu-outer_left {
  overflow: hidden;
  position: fixed;
  top: 0;
  font-family: 'Roboto', 'sans-serif';
  z-index: 998;  
  font-weight: 100;
  width: 20%;
  right: 100%;
  margin-right: -100px;
  height: 150%;
  background: rgba(255,255,255,1);  
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s; 
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  -o-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);}
.menu-icon_left {
  z-index: 999;
  position: absolute;
  top: 58px;
  right: 15px;
  width: 30px;
  pointer-events: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;}
.menu-icon_left .bar_left {
  background: #c0392b;
  width: 100%;
  height: 5px;
  margin: 0 0 5px;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;}
nav ul {
  position:absolute;
  width:100%;
  padding: 0;
  right: 0; /*prevents possible click when not oppened*/
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;}
  
.menu-outer_left:hover .bar_left { background:rgba(100,200,240,.9); }
.menu-outer_left:hover {
  background: #fff;
  right: 80%;
  margin-right: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);}
.menu-outer_left:hover > .menu-icon_left { opacity: 0;}
.menu-outer_left:hover > nav ul { left: 0;}


/* right menu site*/

.menu-outer_left .inchoose {text-decoration: line-through}
.inchoose:hover {background: #fff}
.menu-outer .inchoose {text-decoration: line-through}
.menu-outer > nav ul { top:15%; }
.menu-outer {
  overflow: hidden;
  position: fixed;
  top: 0;
  font-family: 'Roboto', 'sans-serif';
  font-weight: 100;
  z-index: 998;  
  width: 20%;
  left: 100%;
  margin-left: -100px;
  height: 150%;
  background: rgba(255,255,255,1);  
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s; 
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);}
.menu-icon {
  z-index: 999;
  position: absolute;
  top: 58px;
  left: 15px;
  width: 30px;
  pointer-events: none;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;}
.menu-icon .bar {
  background: #c0392b;
  width: 100%;
  height: 5px;
  margin: 0 0 5px;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;}
  
nav ul h2{
font-size:22px;text-align:center
}  
nav ul {
  position:absolute;
  width:100%;
  padding: 0;
  left: 10%;; /*prevents possible click when not oppened*/
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;}
nav li {
  list-style:none;
  text-align: center;
  text-transform: uppercase;}
  nav li:hover { background:#eee}
nav li a {
  font-size: 25px;
  color: #c0392b;
  text-decoration: none;
  margin: 0 auto;
  padding: 20px;
  display:block;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;}
.menu-outer_left .bar_left:first-child {
  margin:8px auto;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);}
.menu-outer_left .bar_left:last-child {
  margin:-26px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);}
  
.menu-outer:hover > .menu-icon { opacity: 0;}
.menu-outer:hover > nav ul { left: 0;}
nav li a:hover { color: #c0392b;}
.menu-outer:hover {
  background: #fff;
  left: 80%;
  margin-left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);}
  
/* bottom registration menu */

.closing {right: 150px;
position: relative;
top: -80px;
float: right;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.closing h4 {color:#fff !important}
.closing-down {left: -955px !important;top: 360px !important;}
.red-triangle{border-top: 71px solid transparent;border-bottom: 71px solid transparent;border-left: 71px solid #c0392b;width: 0;height: 0;position: relative;left: -250px;top: 8px;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
.butt {background-color:#c0392b; border: none;  color:white;  font-weight: normal;  line-height: 1.4;border-radius:none; padding: 10px 55px;  -webkit-font-smoothing: subpixel-antialiased; }
#menu_registr { width:100%; height:100px; background:#fff; bottom:0;  right:-100%; z-index:50;
  position:fixed;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s; }
#triangle_bot { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 100px solid transparent;}
.t_left_bot{
background: #fff;
margin: 6px 0 0 -85px;
 width: 0; 
 height: 0; 
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);}

.butt :hover > a{color:white;}
#menu_registr:hover { right:-10%;}
#menu_registr:hover  > #reg_men h4{ opacity:0; color:#fff; 
-webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;  }

#menu_registr h4{ font-family: 'Roboto', 'sans-serif'; font-size:45px; text-align:center; color:#c0392b; position: absolute; top: -75px;left: -85px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s; }  
  
  

#registrationAdd {float: right;width: 50px;position: relative;top: -310px;left: -140px;}
#registrationAdd h1 {margin: -138px 0 0 -190px;
font-size: 20px;
background: #c0392b;
color: white;
padding: 39px 50px;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;}
.triangleRegistration {
border-top: 2000px solid transparent;
border-bottom: 2000px solid transparent;
border-left: 2000px solid #fff;
width: 0;
height: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
margin: 20px 0;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
/* background: blue; */
left: 1255px;
position: relative;
top: -2500px;
}
#registrationAdd h1:hover ~ .triangleRegistration {left: -355px;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;}
.triangleRegistration:hover {left: -605px;}


.reg-triangle {
border-top: 71px solid transparent;
border-bottom: 71px solid transparent;
border-left: 71px solid #c0392b;
width: 0;
height: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
left: -250px;
top: 8px;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}


.registr-form {
width: 550px;
height: 250px;
position: relative;
z-index: 222;
top: 550px;
left: -1900px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}


.registr-form h3{font-size:25px;padding: 0 25px 0 10px;}

.form-wrapper-01 p {
font-size: 18px;
line-height: 1.72222;
margin: -37px 29px 0 0;
text-align: right;
}

.form-wrapper-01 {
	margin: 0;
	padding: 10px 0;
	position: relative;
}

.form-wrapper-01 .inputbox {
	border: 2px solid #999;
color: #34495e;
background:#fff;
font-size: 15px;
line-height: 1.467;
padding: 8px 12px 8px 32px;
height: 42px;
-webkit-appearance: none;
margin:10px;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;
	
}
.login-form .form-wrapper-01 .inputbox {
	width:98%;
}
.form-wrapper-01 .name {
	background: url(../images/user.png) 10px 13px no-repeat;
}
.form-wrapper-01 .email {
	background: url(../images/email.png) 10px 15px no-repeat;
}
.form-wrapper-01 .password {
	background: url(../images/password.png) 10px 10px no-repeat;
}
.form-wrapper-01 a.button {
	background: none repeat scroll 0 0 #14B9D5;
	color: #FFFFFF;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 100;
padding: 10px 58px;
}
.form-wrapper-01 .button:hover {
	opacity:0.8;
}
.form-wrapper-01 a.button > i {
	font-size:20px;
}
.select-block { margin: 10px 10px 0;color:#999}
.select-block-right { margin: 10px 10px 0;color:#999;}


/* bottom footer menu */ 


.pluso-more {display:none !important;}
.pluso-facebook, .pluso-google ,.pluso-twitter,.pluso-vkontakte{background-image: none !important;position: relative !important;top: -98px !important;left: -55px !important;}

.triangle_social {border-top: 30px solid transparent;border-bottom: 30px solid transparent;border-left: 50px solid #c0392b;width: 0;height: 0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
margin: 20px 0;
-moz-transition: all ease .5s;  -ms-transition: all ease .5s;  -o-transition: all ease .5s;
 transition: all ease .5s;}
#menu_footer ul {text-align: center;vertical-align: middle;float: right;width: 30%;margin-right: -145px; }
#menu_footer li { display: inline-block;margin: 0 20px;width: 15%;position:relative;left:0px; -moz-transition: all ease .5s;  -ms-transition: all ease .5s;  -o-transition: all ease .5s;
 transition: all ease .5s;}
#fot_men li:nth-child(odd) {
 -webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180eg);
margin: 0 -2px 0 -45px;}
#menu_footer li  img:nth-child(even) { 
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180eg);}
#menu_footer li  img:nth-child(odd) { 
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90eg);
margin: -72px 0 0 0;
padding-top: 104px;
width: 40px;
background-size: cover; }
#warning { position:relative;left:200px;float:left; width:50%;}
.t_left_fot {
background:#fff;
float: right;
margin: 6px -85px 0 0;
 width: 0; 
 height: 0; 
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);}
#menu_footer { width:100%; height:100px; background:#fff; bottom:0;  left:-100%; z-index:50;
  position:fixed;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s; }
#triangle_fot { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 100px solid transparent;}

#menu_footer:hover { left:-10%;}

#menu_footer h4{ font-family: 'Roboto', 'sans-serif'; font-size:45px; text-align:center; color:#c0392b; position: absolute; top: -10px;right: 60px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform:rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s; }
#menu_footer:hover  > #fot_men h4{ opacity:0; color:#fff; 
-webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s; }
 
#warning  h1{ color:#2c3e50; font-size:15px;} 
#warning  em{font-size: 25px;float: left;color: red;padding-right: 5px;}

/* header section */

#ground { width:100%; margin:0 auto; display:block;}
#top_header { width:100%; height:120%; margin:0 auto; display:block; background-color:#2c3e50}
#top_logo {width:35%; height:40%; margin:0 auto; display:block;  padding-top:50px;}
#top_logo h1 {font-family: 'bigone', cursive;font-size: 290px;color: white;margin: -10px -55px 40px 0;text-align: center;letter-spacing: 20px;}
#logo_must { margin: -60px -21px;}
#logo_must  img{ background-size:contain; -webkit-background-size: contain; -moz-background-size: contain; -ms-background-size: contain; -o-background-size: contain; width:640px; display: block}
#top_text {width:100%;height:20%; margin:100px auto;}
#top_text ul { width:100%; margin:30px auto; text-align:center;}
#top_text li { margin: -10px 0 -40px 0; }
#top_logo_min{width:40%; height:20%; margin:0 auto; }

#top_text h2 { font-family: 'Roboto', 'sans-serif'; color: white;font-size:35px;letter-spacing:25px;word-spacing:5px; }
#top_text em{color:#c0392b; font-size:35px;font-style:normal}
#logo_menu_min h3{ font-family: 'Roboto', 'sans-serif'; font-size:25px; text-align:center }
#top_logo_min h1 {font-family: 'bigone', cursive;font-size: 65px;color: #34495e;margin-left: 5px;margin-bottom: -30px;text-align: center;letter-spacing: 2px;}
#top_text li:first-child h2{ letter-spacing:12px; font-size:25px;word-spacing:5px;}
#top_text li:first-child em{ letter-spacing:12px; font-size:25px;word-spacing:5px;}
#top_text li:nth-child(2) h2{ font-size:98px;letter-spacing:32px; word-spacing:-5px; padding-left:10px}
#top_text li:nth-child(2) em{ font-size:98px;letter-spacing:32px; }

/* history section */

#history { width:100%; margin:0 auto; background:#34495e;height:780px; overflow:hidden; }
.color_history {background:#3a4f64; }
#triangle { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 100px solid transparent;}
.t_right {	float: right; margin: -135px -50px 0 0; width: 0; height: 0; 
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
top: 780px;
position: relative;
}
.t_left{	

float: left; 
margin: -135px 0 0 -50px; width: 0; height: 0; 
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
top: 780px;
position: relative;
}
#redtriangle {
width: 0;
height: 0;
 -webkit-transition: all ease .5s;  -moz-transition: all ease .5s;  -ms-transition: all ease .5s;  -o-transition: all ease .5s;
 transition: all ease .5s;
border-top: 130px solid transparent;
border-bottom: 130px solid #c0392b;
border-left: 130px solid transparent;
position: absolute; } 
.color_reddR {margin: 0 0 0 73%;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
z-index: 1;}
.color_reddL {margin: 65px 0 0 -2%;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(180deg);
z-index: 1;}
#main_contain { width:80%; height:100%; margin: 0 auto;}
#about_contain {width:50%; min-height:50%; margin: 0 auto;  float:left;overflow: hidden; position: relative;}
#rules_contain {width:50%; min-height:50%; margin: 0 auto; float:right;overflow: hidden; position: relative;}
.bottom_ {padding-top:50px}

#about_contain:hover > .color_reddR { margin: 0 0 0 555px;}
#rules_contain:hover > .color_reddL { margin: 65px 0 0 -80px;}

/* gender,blog section */

#gender { width:100%; margin:0 auto; background:#3a4f64;height:780px;overflow:hidden;}
.color_gender {background:#43586c;}
#blog_contain { width:100%; min-height:50%; margin: 50px auto 0;} 
#blog_contain ul { width:100%; margin: 50px auto 0;} 
#blog_contain li {width: 90%; height: 450px; display: inline-block;border: 1px solid #fff;margin: 5px;overflow:hidden; text-align:center}
#blog_contain a:first-child{float:left;width: 50%;}
#blog_contain a:last-child{float:right;width: 50%;}
#smal_triangle { border-top: 180px solid transparent; border-bottom:180px solid #16a085; border-left: 180px solid transparent;}
.s_right{
float: right;
width: 0;
height: 0;
margin: -231px 0 0 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
z-index: -2;
 -webkit-transition: all ease .5s;  -moz-transition: all ease .5s;  -ms-transition: all ease .5s;  -o-transition: all ease .5s;
  transition: all ease .5s;
   }
.s_left{
background:#43586c; 
float: left;
width: 0;
height: 0;
margin: -140px 0 0 90px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
z-index: -2;
 -webkit-transition: all ease .5s;  -moz-transition: all ease .5s;  -ms-transition: all ease .5s;  -o-transition: all ease .5s;
  transition: all ease .5s;}

#blog_contain li:hover > h4{ color:white}
#blog_contain li:hover > .s_left { margin: 200px 0 0 90px;   -webkit-transition: all ease .5s;  -moz-transition: all ease .5s;  -ms-transition: all ease .5s;  -o-transition: all ease .5s;
  transition: all ease .5s;  }
#blog_contain li:hover > .s_right {margin: 291px 0 0 0;  -webkit-transition: all ease .5s;  -moz-transition: all ease .5s;  -ms-transition: all ease .5s;  -o-transition: all ease .5s;
  transition: all ease .5s;  }  

.theme_name  h1{ font-family: 'Roboto', 'sans-serif'; font-size:28px; color:#fff; text-align:center;padding-bottom:30px; border-bottom:1px solid #fff }
#blog_contain  em {color:#16a085; font-style:normal; }
.theme_preview h3 {font-size:18px; color:#fff; padding-left: 10px; z-index: 3; position: relative;} 
#blog_contain h4{ z-index:2; padding:10px 30px; font-size:15px;top:55px;position:relative}  
.green h1{color:#16a085}
.white h1 {color:#fff; }
/* news section */

#news { width:100%; margin:0 auto; background:#43586c;height:780px;overflow:hidden}
.color_news {background:#54687d;top:780px;}
#news_contain { width:90%; min-height:50%; margin:0 auto; text-align:center; vertical-align:middle;overflow:hidden; position: relative;padding-top:50px;}
#news_contain ul {margin-left: -40px; padding-top: 30px;}
#news_contain li {margin:0 auto; width:18%; min-height:185px; text-align:center; vertical-align:middle; display:inline-block; position:relative; margin: 0px 15px 25px 15px;z-index:2;}
#news_contain  img{ width:150px; background-size:cover}
.down_triangle {
width: 0;
height: 0;
margin: -220px 0 0 270px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
z-index: 1;
 -webkit-transition: all ease .5s;  -moz-transition: all ease .5s;  -ms-transition: all ease .5s;  -o-transition: all ease .5s;
  transition: all ease .5s;
 border-top: 580px solid transparent;
border-bottom: 580px solid #44a8cb;
border-left: 580px solid transparent;
position:absolute; } 
.upper_triangle {width: 0;height: 0;
margin: -290px 0 0 525px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
z-index: 1;
 -webkit-transition: all ease .5s;  -moz-transition: all ease .5s;  -ms-transition: all ease .5s;  -o-transition: all ease .5s;
  transition: all ease .5s;
 border-top: 580px solid transparent;
border-bottom: 580px solid #44a8cb;
border-left: 580px solid transparent;
position:absolute;} 

#news_contain :hover > .upper_triangle { margin: -290px 0 0 820px;}
#news_contain :hover > .down_triangle { margin: -245px 0 0 -50px;}
   
.news_name h1 {font-family: 'Roboto', 'sans-serif'; font-size:20px; color:#fff; text-align:center; border-bottom:1px solid #fff; padding-bottom:10px; margin-top:0px}
#news_contain em {color:#44a8cb; font-style:normal; }
.bluec h1 {color:#44a8cb}   
 
/* interesting section */ 
   
#interest_contain { width:90%; min-height:50%; margin: 50px auto 0; text-align:center; vertical-align:middle;}
#interest_contain ul {margin-left: -40px; overflow:hidden; position: relative;z-index:3}
#interest_contain li {margin:0 auto; width:23%; min-height:150px; text-align:center; vertical-align:middle; display:inline-block; position:relative; margin: 30px 10px; border:1px solid #51657b; z-index:3}
#upp_triangle { margin: -300px 33%; text-align:center; vertical-align: middle; width: 0;height: 0; z-index: 1; position:absolute;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
 -webkit-transition: all ease .5s;  -moz-transition: all ease .5s;  -ms-transition: all ease .5s;  -o-transition: all ease .5s;
transition: all ease .5s;
border-top: 380px solid transparent;
border-bottom: 380px solid transparent;
border-left: 380px solid #f1c40f;}
#interesting { width:100%; margin:0 auto; background:#54687d;height:780px;overflow:hidden}
.color_interest {background:#74889d;top:730px}  

#interest_contain ul:hover > #upp_triangle  { margin: -500px 33%;} 

.int_name h1 {font-family: 'Roboto', 'sans-serif'; font-size:20px; color:#fff; text-align:center; border-bottom:1px solid #fff; padding-bottom:25px; margin-top:25px}
#interest_contain em {color:#f1c40f; font-style:normal; }
.carrot h1 {color:#f1c40f}

/* footer section */

#footer { width:100%; margin:0 auto; background:#74889d;height:700px;}
.color_footer { background:#74889d;}
#footer_contain { width:90%; margin:0 auto;  text-align:center; vertical-align:middle;  }
#footer_contain ul {margin-left: -40px; }
#footer_contain  li{  margin:0 auto; width:33%; min-height:200px; text-align:center; vertical-align:middle; display:inline-block; position:relative; margin: 30px 5%; border: 1px solid #fff}
#footer_contain  em{color:#fff; font-style:normal;}
 
.whitefot h1 {color:#fff} 

/* @ media */

@media screen and (max-width: 600px), screen and (max-height: 600px) {
  nav ul {font-size:.75em;}
  nav ul a {padding: 10px;}
}

@media screen and (max-width: 600px), screen and (max-height: 600px) {
  nav ul {font-size:.75em;}
  nav ul a {padding: 10px;}
}