/*

Nova Theme Version 1.0 - Responsive Under Construction Template

1 - General

2 - Windows - Right side / Left side 

 2.1 - Windows
   2.1.1 - About us disabled window 
   2.1.2 - Contact disabled window
	 2.1.3 - About us activated window
	 2.1.4 - Contact activated window
	 2.1.5 - General
 
3 - Loading

4 - Counter

5 - Subscribe form

6 - Menu

7 - Footer

8 - Theme switcher

9 - Top lines

10 - Title

11 - Contact Form

*/

/* 1 */

body {
  margin: 0;
  padding: 0;
  background-color: #282828;
  overflow-x: hidden;
}

.stopscroll, .stopscroll2{
position:fixed;
overflow: hidden;
}

textarea:focus,
input:focus,
button:focus { outline: 0 }
*::-moz-selection {
  color: #b3b3b3;
  background: #4d4c4c;
}
::selection {
  color: #b3b3b3;
  background: #4d4c4c;
}
.full-mob { display: none }
::-moz-placeholder {
  color: #727272;
  letter-spacing: 2px;
  font-weight: 300;
  font-family: 'Raleway', sans-serif;
  text-indent: 5px;
}
:-ms-input-placeholder {
  color: #727272;
  letter-spacing: 2px;
  font-weight: 300;
  font-family: 'Raleway', sans-serif;
  text-indent: 5px;
}
::-webkit-input-placeholder {
  color: #727272;
  letter-spacing: 2px;
  font-weight: 300;
  font-family: 'Raleway', sans-serif;
  text-indent: 5px;
}
#message span { font-family: 'Raleway', sans-serif }
.text { font-weight: 100; font-family: 'Muli', sans-serif }
.name,
.description,
.sub,
.menu li { font-family: 'Abel', sans-serif }
.title2,
.title { font-family: 'Roboto Slab', serif }
.numbers { font-family: 'Oswald', sans-serif }

/* 2 */

.wrap {
  display: table;
  margin: 0 auto;
}

/* 2.1 */

div.information_window {
  background-color: #282828;
  width: 50.2%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  overflow: hidden;
  overflow-x: hidden;
  transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  -webkit-transition: transform .3s ease;
  transition: transform .3s ease;
}

/* 2.2*/

div.contact_window {
  background-color: #282828;
  width: 49.8%;
  height: 100%;
  z-index: 10;
  top: 0;
  right: 0;
  overflow: hidden;
  transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  -webkit-transition: transform .3s ease;
  transition: transform .3s ease;
}

/* 2.3 */

div.information_window.active {
  transform: translateY(0%);
  -ms-transform: translateY(0%);
  -webkit-transform: translateY(0%);
}

/* 2.4 */

div.contact_window.active {
  transform: translateY(0%);
  -ms-transform: translateY(0%);
  -webkit-transform: translateY(0%);
}

/* 2.5 */

.a-img,
.closeper a,
.closesn a { display: block }
.clear { clear: both }
.closeper a,
.closesn a {
  width: 100%;
  height: 13px;
  z-index: 3;
  position: relative;
}
.closeper a img,
.closesn a img {
  margin-top: 2px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.closeper a:nth-child(2),
.closesn a:nth-child(2) { display: none }
.sn-line { background-color: transparent }
.name {
  font-size: 15px;
  letter-spacing: 3px;
  color: #b7b7b7;
}
.description {
  font-size: 12px;
  margin-top: 25px;
  display: block;
  color: #b7b7b7;
  letter-spacing: 3px;
}
.top-line,
.sn-line,
.loading { width: 100% }
div.information_window,
div.contact_window { position: fixed }
.top-line,
.sn-line {
  position: absolute;
  z-index: 14;
}
#top {
  height: 13px;
  width: 100%;
}
div.content,
div.content2 {
  height: 100%;
  width: 103%;
  overflow: auto;
}
#skills ul { text-align: center }
.skills-line li {
  display: inline-block;
  padding: 0;
  margin: 5px 30px 10px 0;
  font: 12px/20px Arial, sans-serif;
}
.skills-line a {
  position: relative;
  display: block;
  padding: 6px 30px;
  text-decoration: none;
  color: #a3a3a3;
}
.column { margin-bottom: 40px }
.column img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.title2,
.title {
  text-transform: uppercase;
  color: #787a7a;
  font-size: 22px;
  font-weight: 200;
  letter-spacing: 9px;
  text-align: center;
}
.text {
  font-size: 12px;
  letter-spacing: 3px;
  word-spacing: 5px;
  font-weight: 200;
  color: #cccccc;
  line-height: 250%;
}
.photos .a-img {
  margin-left: 10px;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 10px;
}
.photos .a-hover {
  width: 180px;
  height: 250px;
  margin-top: -250px;
  opacity: 0;
  position: relative;
  z-index: 1;
  transition: opacity 0.3s;
}
.photos .a-img:hover .a-hover { 
  display: block;
  opacity: 1;
  position: relative;
  z-index: 1;
}
.a-sn {
  line-height: 18px;
  height: 34px;
  background: transparent;
  border: 1px solid #8e8e8e;
  color: #bfbfbf;
  width: 80px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.a-sn:hover {
  background-color: rgba(255,255,255,0.2);
  cursor: pointer;
}

/* 3 */

.loading {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 7000;
  background-color: #1b1b1b;
}
.loading img {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
}

/* 4 */

.square {
  width: 210px;
  height: 226px;
}
.numbers {
  margin-top: 59px;
  text-align: center;
  font-size: 73px;
  font-weight: 400;
  text-shadow: 2px 1px black;
}
.sub {
  margin-top: 83px;
  text-transform: uppercase;
  text-align: center;
  color: #a1a1a1;
  letter-spacing: 8px;
  font-size: 14px;
}
.backdays,
.backhrs,
.backmin,
.backsec {
  background-color: rgba(38,38,38,0.4);
  margin-right: 17px;
}

/* 5 */

.contact-message,
.contact-message1 {
  margin-left: 13px;
  font-size: 11px;
  margin-top: 1px;
  margin-bottom: 4px;
  letter-spacing: 2px;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  text-indent: 5px;
}
.warnings {
  font-size: 11px;
  margin-top: 15px;
  margin-bottom: 4px;
  border: 1px solid;
  letter-spacing: 2px;
  padding: 15px 0px 15px 0px;
  text-align: center;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
.subscribe-message {
  font-size: 11px;
  margin-top: 4px;
  letter-spacing: 2px;
}
#contact {
  display: table;
  margin: 0 auto;
  top: 83%;
  left: 50%;
}
#contact input {
  font-family: 'Raleway', sans-serif;
  width: 355px;
  height: 26px;
  color: #acacac;
  background-color: rgba(38,38,38,0.4);
  border: 1px solid #434343;
  letter-spacing: 2px;
  font-weight: 400;
  margin-right: 10px;
}
#contact input[type=text] {
  text-indent: 5px;
  letter-spacing: 3px;
}
#contact-form input[type=text] {
  text-indent: 5px;
  color: #828282;
  letter-spacing: 2px;
}
#contact-form textarea {
  text-indent: 5px;
  color: #828282;
  letter-spacing: 2px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 13px;
}
#contact button {
  background-color: rgba(38,38,38,0.4);
  color: #ff235a;
  height: 30px;
  width: 100px;
  text-align: center;
  border: 1px solid #434343;
  vertical-align: top;
  webkit-box-sizing: initial;
  transition: all 0.3s ease 0s;
}
#contact button:hover {
  border: none;
  cursor: pointer;
}

/* 6 */

.m-info,
.m-contact {
  width: 50%;
  display: inline-block;
}
.m-info ul li a,
.m-contact ul li a {
  text-transform: uppercase;
  color: #a1a1a1;
  letter-spacing: 7px;
  font-size: 12px;
  cursor: pointer;
}
.m-info ul li a:hover,
.m-contact ul li a:hover {
  cursor: pointer;
  color: #c8c8c8;
}
.m-info {
  float: left;
  margin-top: 7px;
}
.m-contact {
  float: right;
  margin-top: 7px;
}
.m-info li {
  float: right;
  margin-right: 90px;
  list-style-type: none;
  z-index: 12;
  position: relative;
}
.m-contact li {
  float: left;
  margin-left: 60px;
  list-style-type: none;
  z-index: 12;
  position: relative;
}
#logo {
  height: 80px;
  position: absolute;
  width: 80px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
#logo img {
  margin-top: -13px;
	margin-left:2px;
  z-index: 12;
  position: relative;
}
.menu .m-info li::before {
  content: "";
  border-bottom: 1px solid #222222;
  width: 210%;
  position: absolute;
  height: 10px;
  margin-top: 18px;
  margin-left: -40px;
}
.menu .m-contact li::before {
  content: "";
  border-bottom: 1px solid #222222;
  margin-left: -75px;
  width: 210%;
  position: absolute;
  height: 10px;
  margin-top: 18px;
}
.m-info-win:before,
.m-contact-win:before {
  content: " ";
  width: 50%;
  height: 51px;
  margin-top: -6px;
  background-color: rgba(38,38,38,0.8);
  z-index: 11;
  display: block;
  position: absolute;
  cursor: pointer;
}

/* 7 */

#bottom {
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 22px;
  color: #a1a1a1;
  font-size: 12px;
}
#bottom a {
  margin-left: 6px;
  letter-spacing: 2px;
  color: #686868;
  margin-bottom: 3px;
  font-family: 'Abel', sans-serif;
}

/* 8 */

#switcher a {
  display: inline-block;
  width: 50px;
  height: 50px;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  margin-left: 5px;
}
#switcher a:hover {
  cursor: pointer;
  opacity: 0.5;
}
#switcher a:nth-child(1) { background-color: #f62358 }
#switcher a:nth-child(2) { background-color: #36b4a7 }
#switcher a:nth-child(3) { background-color: #f84141 }
#switcher a:nth-child(4) { background-color: #ef7c00 }

/* 9 */

#t_contact {
  float: right;
  width: 50%;
}
#t_contact,
#t_information { cursor: pointer }
#t_contact img,
#t_information img { margin-bottom: 4px }
#t_contact span,
#t_information span {
  display: table;
  margin: 0 auto;
}
#t_information {
  float: left;
  width: 50%;
}
.closeper,
.closesn { cursor: pointer }

/* 10 */

#message {
  display: table;
  margin: 0 auto;
  letter-spacing: 6px;
  top: 19.8%;
  left: 50%;
  text-transform: uppercase;
  font-size: 35px;
  color: #bfbfbf;
  letter-spacing: 7px;
  font-weight: 200;
}

/* 11 */

#form { display: block }
#formwrap {
  display: table;
  margin: 0 auto;
}
#form input {
  width: 550px;
  margin-top: 20px;
  background-color: transparent;
  border: none;
  height: 30px;
  letter-spacing: 2px;
  display: table;
  margin: 0 auto;
}
#form textarea {
  width: 550px;
  display: table;
  height: 100px;
  margin: 0 auto;
  display: table;
  margin: 0 auto;
  margin-top: 20px;
  background-color: transparent;
  border: none;
  font-weight: 300;
  letter-spacing: 2px;
  margin-bottom: 30px;
  overflow: hidden;
}
#contact-form button {
  display: table;
  margin: 0 auto;
  background: #434343;
  color: #ff235a;
  height: 30px;
  width: 150px;
  margin-bottom: 30px;
  text-align: center;
  border: 0;
  transition: all 0.3s ease 0s;
}
#contact-form button:hover {
  opacity: 0.75;
  cursor: pointer;
}

/* Desktop computers */

@media only screen and (min-width: 800px) { 
  #line {
    top: 45%;
    left: 50%;
    margin: -100px 0 0 -446px;
    width: 100%;
  }
  #formwrap,
  .wrap { margin-top: 100px }
  div.content,
  div.content2 { width: 103% }
  .text,
  #skills {
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }
  .photos {
    width: 100%;
    text-align: center;
  }
  #switcher {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 10px;
    z-index: 5000;
  }
  #contact { margin-top: 20px }
  html,
  body {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    min-height: 100%;
  }
  .square { float: left }
  #contact {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  #line,
  #message,
  #contact,
  #bottom { position: fixed }
  #message {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

/* Small Desktop computers */

@media only screen and (max-width: 930px) and (min-width: 590px) { 
  .square {
    width: 182px;
    height: 203px;
  }
  #line { margin: -100px 0 0 -390px }
  .numbers {
    margin-top: 50px;
    font-size: 68px;
  }
}
@media only screen and (max-width: 1120px) { 
  #formwrap,
  .wrap { margin-top: 77px }
  #contact form { margin-bottom: 20px }
  .text {
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }
  .content .photos,
  #skills {
    width: 70%;
    margin: 0 auto;
    text-align: center;
  }
  .content2 .photos {
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  #switcher {
    position: fixed;
    bottom: 0;
    right: 0;
  }
  div.information_window,
  div.contact_window {
    width: 100%;
    z-index: 30;
  }
  .closeper a:nth-child(1),
  .closesn a:nth-child(1) { display: none }
  .closeper a:nth-child(2),
  .closesn a:nth-child(2) { margin-left: -45% }
  .sn-line {
    width: 100%;
    z-index: 2000;
  }
  .m-info:before { margin-left: 5px }
  .m-contact:before { margin-left: 248px }
  .closeper a:nth-child(2),
  .closesn a:nth-child(2) {
    display: inline-table;
    float: left;
    clear: both;
  }
}

/* Tablets */

@media only screen and (max-width: 800px) { 
  #contact button {
  margin-bottom:30px;
  }
  .m-info,
  .m-contact { display: none }
  #logo { margin-top: -10px }
  div.content,
  div.content2 { width: 103% }
  #t_information,
  #t_contact {
    width: 60px;
    height: 27px;
  }
  #t_information { background-color: #494848 }
  #t_contact { right: 0 }
  .full-mob {
    display: block;
    margin-top: 5px;
  }
  .full-desk { display: none }
  .menu li { display: none }
  .m-info:before { display: none }
  .m-contact:before { display: none }
  #message {
    margin-top: 85px;
	margin-bottom: 45px;
    font-size: 35px;
  }
  .square:nth-child(4) { margin-bottom: 40px }
  #line { margin: 20px 0 0 -14px }
  .square:nth-child(1),
  .square:nth-child(2),
  .square:nth-child(3),
  .square:nth-child(4) {
    display: inline-block;
    width: 100%;
    height: 120px;
    margin-right: 0;
    margin-bottom: 30px;
  }
  .square:nth-child(4) { margin-bottom: 50px }
  .sub {
    margin: 0 auto;
    margin-top: 22px;
  }
  .numbers {
    font-size: 40px;
    margin-top: 10px;
  }
}

/* Big smartphones */

@media only screen and (max-width: 620px) { 
  #message a { display: block }
  div.content,
  div.content2 { width: 105% }
  #form input { width: 95% }
  #form textarea { width: 95% }
}

/* Small Smartphones */

@media only screen and (max-width: 490px) { 
  .square:nth-child(1),
  .square:nth-child(2),
  .square:nth-child(3),
  .square:nth-child(4) { height: 70px }
  .numbers {
    font-size: 24px;
    margin-top: 4px;
  }
  .sub {
    margin-top: 10px;
    font-size: 11px;
  }
  .title,
  .title2 { font-size: 16px }
  #message { font-size: 30px }
  #contact input {
    width: 190px;
  }
  #contact button {
  width:50px;
  }
}