/* Thomsoon.com - OnePage CSS Responsive
-- version 1.0
-- Copyright (c) 2014 Thomsoon.com
-- licensed under the MIT
--
-- http://www.thomsoon.com/
--
*/

@media (max-width: 1280px) and (min-width: 1024px) {


.start-page .content{
  width: 800px;
/*  background: yellow;
*/}

.start-page .content .text{
  width: 800px;
}

.start-page h1{
  letter-spacing: 9px;
  font-size: 28px;
}

.start-page .content .arrow-down{
  position: absolute;
  bottom: 20px;
  width: 35px;
  height: 47px;
}

.start-page .content .text .logo{
  width: 800px;
/*  background: green;
*/}

.preloader .item{
  position:absolute;
  width:50px;
  height:50px;
  left:47%;
  top:50%;
}

.menu-content{
  width:800px;
/*  background: orange;
*/}

.about-us .content{
  width:800px;
/*  background: green;
*/}

.about-us .content .title{
  width: 800px;
}

.about-us p{
  width:200px;
}

.about-us h1{
/*  color: blue;
*/  letter-spacing: 8px;
  font-size: 28px;
}

.about-us h2{
  letter-spacing:2px;
}

.portfolio .portfolio-margin {
  width:816px;
}

.portfolio .portfolio-margin .c-filter{
  width: 800px;
  height: 60px;
  margin-left: ;
  margin-top: 100px;
}

.c-filter ul{
  width: 800px;
  margin-left: 0;
}

.c-filter__links a{
  padding: 0 23px 0 24px;
}

.portfolio .portfolio-margin h1{
  font-size: 28px;
  letter-spacing: 8px;
}

.grid li{
  width: 392px;
  height: 295px;
  margin: 0px 8px 16px 8px;
}
.grid img{
  width: 100%;
  height: 100%;
}

.grid .text {
  position: absolute;
  width: 392px;
  height:100%;
  background: black;
  z-index: 2;
  opacity:0;
    -webkit-transition: all 0.6s ease-in;
  -moz-transition: all 0.6s ease-in;
  -ms-transition: all 0.6s ease-in;
  -o-transition: all 0.6s ease-in;
  transition: all 0.6s ease-in;
}

.grid .text:hover {
  opacity:1;
}

.grid p {
  font-size: 18px;
  text-align:center;
  line-height:26px;
  margin-top:115px;
  font-weight: bold;
  letter-spacing:1px;
  color: #FFF;
}

.grid p .description {
  width: 392px;
  font-size: 12px;
  margin-top:20px;
  text-align: center;
  line-height:20px;
  font-weight: 400;
  color: #FFF;
  position:relative;
}

.contact{ 
  margin:0 auto;
}

.contact .content {
  width:800px
}

#contact h1{
  font-size: 28px;
  letter-spacing: 8px;
}

.contact .content p{
  width: 800px;
}

.footer{
  position: relative;
}

}

@media (max-width: 1023px) and (min-width: 769px) {


.start-page .content{
  width: 600px;
/*  background: orange;
*/}

.start-page .content .text{
  width: 600px;
}

.start-page h1{
  font-size: 25px;
  letter-spacing:8px;
}

.start-page .content .text .logo{
  width: 600px;
/*  background: purple;
*/}

.preloader .item{
  position:absolute;
  width:50px;
  height:50px;
  left:47%;
  top:50%;
}

.start-page .content .arrow-down{
  position: absolute;
  bottom: 20px;
  width: 35px;
  height: 47px;
}

.menu-content{
  width:600px;
  background: pink;
}

.about-us .content{
  width:600px;
/*  background: blue;
*/}

.about-us .content .title{
  width: 600px;
}

.about-us p{
  width:200px;
}

.about-us h2{
  letter-spacing:2px;
}


.about-us h1{
  font-size: 25px;
  letter-spacing: 8px;
}

.portfolio .portfolio-margin {
  width:616px;
  margin:0 auto;
}

.portfolio .portfolio-margin .c-filter{
  width: 600px;
  height: 60px;
  margin-top: 100px;
  }

.c-filter ul{
  width: 600px;
  margin-left: 0;
}

.c-filter__links a{
  padding: 0 9px 0 10px;
}

.portfolio .portfolio-margin h1{
  font-size: 25px;
  letter-spacing: 8px;
}

.grid li{
  width: 292px;
  height: 223px;
  margin: 0px 8px 16px 8px;
}
.grid img{
  width: 100%;
  height: 100%;
}

.grid .text {
  position: absolute;
  width: 292px;
  height:100%;
  background: black;
  z-index: 2;
  opacity:0;
    -webkit-transition: all 0.6s ease-in;
  -moz-transition: all 0.6s ease-in;
  -ms-transition: all 0.6s ease-in;
  -o-transition: all 0.6s ease-in;
  transition: all 0.6s ease-in;
}

.grid .text:hover {
  opacity:1;
}

.grid p {
  font-size: 18px;
  text-align:center;
  line-height:26px;
  margin-top:80px;
  font-weight: bold;
  letter-spacing:1px;
  color: #FFF;
}

.grid p.description {
  font-size: 12px;
  width:292px;
  margin-top:20px;
  text-align:center;
  line-height:20px;
  font-weight: 400;
  color: #FFF;
  position:relative;
}

.contact{ 
  margin:0 auto;
}

#contact h1{
  font-size: 25px;
}

#contact p{
  font-size: 20px;
}

.contact .content {
  width:600px
}

.contact .content p{
  width: 600px;
}

.footer{
  position:relative;
}

}
/*-----------------smallest-------------------------*/

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


.start-page .content{
  width: 400px;
}

.start-page .content .text{
  width: 400px;
}

.start-page h1{
  font-size: 25px;
}

.start-page .content .text .logo{
  width: 400px;
  margin:0 auto 70px;
/*  background: purple;
*/}

.preloader .item{
  position:absolute;
  width:50px;
  height:50px;
  left:45%;
  top:50%;
}

.start-page .content .arrow-down{
  position: absolute;
  bottom: 50px;
  width: 25px;
  height: 35px;
}

.about-us .content{
  width:400px;
}

.about-us p.title{
  font-size: 15px;
  line-height: 20px;
}

.about-us h1{
  font-size: 25px;
}

.menu-content{
  width: 400px;
}

.menu-content ul{
  width: 350px;
}

.menu-content li a{
  font-size: 10px;
  padding: 0 0px 0 10px;
}

.about-us .content .title{
  width: 400px;
}

.about-us p{
  width:200px;
}


.about-us h2{
  letter-spacing:2px;
}

.portfolio .portfolio-margin {
  width:400px;
}

.portfolio .portfolio-margin .c-filter{
  width: 400px;
  height: 40px;
  margin-top: 50px;
}

.c-filter ul{
  width: 400px;
  margin-left: 0;
}

.c-filter ul a{
  font-size: 10px;
}

.c-filter__links a{
  line-height: 40px;
   padding:0 7px 0 7px;
}

.portfolio .portfolio-margin {
  width:400px;
  margin:0 auto;
}

.portfolio .portfolio-margin h1{
  font-size: 25px;
}

.grid li{
  width: 400px;
  height: 300px;
  margin-left: 0px
}
.grid img{
  width: 100%;
  height: 100%;
}

.grid .text {
  position: absolute;
  width: 400px;
  height:100%;
  background: black;
  z-index: 2;
  opacity:0;
    -webkit-transition: all 0.6s ease-in;
  -moz-transition: all 0.6s ease-in;
  -ms-transition: all 0.6s ease-in;
  -o-transition: all 0.6s ease-in;
  transition: all 0.6s ease-in;
}

.grid .text:hover {
  opacity:1;
}

.grid p {
  font-size: 18px;
  text-align:center;
  line-height:26px;
  margin-top:120px;
  font-weight: bold;
  letter-spacing:1px;
  color: #FFF;
}

.grid p.description {
  font-size: 12px;
  width:400px;
  margin-top:20px;
  text-align:center;
  line-height:20px;
  font-weight: 400;
  color: #FFF;
  position:relative;
}

.clear { 
    clear:both; 
}

.contact{ 
  margin:0 auto;
}

.contact .content {
  width:400px
}

.contact .content p{
  width: 400px;
  font-size: 15px;
  line-height: 20px;
}

#contact h1{
  font-size: 25px;
}

#contact p{
  font-size: 15px;
}

.footer{
  position:relative;
}


/*----------------iPad------------------------*/

}
/* iPad (portrait) */
@media (min-width: 320px) and (max-width: 579px) {

.start-page .content{
  width: 300px;
}

.start-page .content .text{
  width: 300px;
  height: 170px;
}

.start-page h1{
  font-size: 25px;
}

.start-page .content .text .logo{
  width: 300px;
  margin:0 auto 70px;
  height: 10px;
}

.preloader .item{
  position:absolute;
  width:50px;
  height:50px;
  left:45%;
  top:50%;
}

.start-page .content .arrow-down{
  position: absolute;
  bottom: 20px;
  width: 25px;
  height: 10px;

  -webkit-animation: bounce-fade 1.2s infinite; /* Safari 4+ */
  -moz-animation:      bounce-fade 1.2s infinite; /* Fx 5+ */
  -o-animation:        bounce-fade 1.2s infinite; /* Opera 12+ */
   animation:          bounce-fade 1.2s infinite; /* IE 10+ */
}

@-webkit-keyframes bounce-fade {
    0%   { opacity: 0; bottom: 20px; }
    100% { opacity: 1; bottom: 10px; }
}
@-moz-keyframes bounce-fade {
    0%   { opacity: 0; bottom: 20px; }
    100% { opacity: 1; bottom: 10px; }
}
@-o-keyframes bounce-fade {
    0%   { opacity: 0; bottom: 20px; }
    100% { opacity: 1; bottom: 10px; }
}
@keyframes bounce-fade {
    0%   { opacity: 0; bottom: 20px; }
    100% { opacity: 1; bottom: 10px; }
}

.menu{
  background: transparent;
  border-bottom: 0px;
  z-index:1000;
}
.menu-content{
  width: 300px;
}

.menu-content ul{
  display:none;
}

.about-us .content{
  width:300px;
}

.about-us p.title{
  font-size: 15px;
  line-height: 20px;
  margin-top: 60px;
}

.about-us .content h1{
  font-size: 25px;
  margin-top: 60px;
  color: black;
}

.about-us .content .title{
  width: 300px;
}

.about-us p{
  width:200px;
}

.about-us h2{
  letter-spacing:2px;
}

.portfolio .portfolio-margin {
  width:300px;
}

.portfolio .portfolio-margin .c-filter{
  width: 300px;
  height:40px;
  margin-top: 30px;
}

.c-filter ul{
  width: 170px;
  height: 40px;
  margin-left: 23%;
}

.c-filter ul a{
  font-size: 10px;
}

.c-filter__links a{
  line-height: 20px;
/*  background: purple;
*/  padding:0 0 0 0;
}

.portfolio .portfolio-margin h1{
  font-size: 25px;
  margin-top: 60px;
}

.grid li{
  width: 300px;
  height: 225px;
  margin-left: 0px
}
.grid img{
  width: 100%;
  height: 100%;
}

.grid .text {
  position: absolute;
  width: 300px;
  height:100%;
  background: black;
  z-index: 2;
  opacity:0;
    -webkit-transition: all 0.6s ease-in;
  -moz-transition: all 0.6s ease-in;
  -ms-transition: all 0.6s ease-in;
  -o-transition: all 0.6s ease-in;
  transition: all 0.6s ease-in;
}

.grid .text:hover {
  opacity:1;
}

.grid p {
  font-size: 18px;
  text-align:center;
  line-height:26px;
  margin-top:80px;
  font-weight: 400;
  letter-spacing:1px;
  color: #FFF;
}

.grid p.description {
  font-size: 12px;
  width:300px;
  margin-top:20px;
  text-align:center;
  line-height:20px;
  font-weight: 400;
  color: #FFF;
  position:relative;
}

.clear { 
    clear:both; 
}

.contact{ 
  margin:0 auto;
}

.contact .content {
  width:300px;
}

.contact .content p{
  width: 300px;
  font-size: 15px;
  line-height: 20px;
}

#contact h1{
  font-size: 25px;
  margin-top: 60px;
}

#contact p{
  font-size: 15px;
}

.footer{
  position:relative;
}

.start-page .content {
  width:300px;
  height:100%;
}

.start-page, .start-page .opacity{
  height:100%;
}
.start-page .content .text {
  width:300px;
}

h1 {
  font-size:36px;
}

.about-us h1 {
  margin-top:0;
}

.about-us .content{
  width:300px;
}

}