@font-face {
  font-family: 'GESSTwoLight-Light';
  src: url('../fonts/GESSTwoLight-Light.ttf');
  src: url('../fonts/GESSTwoLight-Light.svg');
  src: url('../fonts/GESSTwoLight-Light.eot');
  src: url('../fonts/GESSTwoLight-Light.woff');
}

html,body{
  width: 100%;
  height: 100%;
}

body{
  font-family: 'GESSTwoLight-Light';
  position: relative;
  direction: rtl;
  margin: 0;
  background: rgb(253,253,254);
  background: -moz-radial-gradient(circle, rgba(253,253,254,1) 0%, rgba(232,232,232,1) 100%);
  background: -webkit-radial-gradient(circle, rgba(253,253,254,1) 0%, rgba(232,232,232,1) 100%);
  background: radial-gradient(circle, rgba(253,253,254,1) 0%, rgba(232,232,232,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdfdfe",endColorstr="#e8e8e8",GradientType=1);
}

*{ box-sizing: border-box;}

/* Let's get this party started */
::-webkit-scrollbar {
    width: 6px;
    background: #35b9b7;
}

/* Track */
::-webkit-scrollbar-track {
    border-radius: 0px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #fff;
}
::-webkit-scrollbar-thumb:window-inactive {
  background: #fff;
}

.content{
  width: 600px;
  margin: auto;
  position: relative;
  top: 30px;
/*  transform: translateY(-50%);
*/}

.content .form{
  width: 100%;
  margin-bottom: 40px;
}

.content .form .form-group{
  display: block;
}
.form-group #image {
    margin-bottom:5px;
}
.content .form .form-input{
  width: 100%;
  height: 40px;
  border: 1px solid #2ebebd;
  border-radius: 7px;
  margin-bottom: 7px;
  background: none;
  outline: 0;
  padding: 7px;
  font-family: 'GESSTwoLight-Light';
  font-size: 16px;
}

.content .form textarea.form-input{
  height: 100px;
}

.content .form button{
  background: #430398;
  color: #fff;
  width: 100%;
  height: 40px;
  display: block;
  border: 0;
  border-radius: 5px;
  font-family: 'GESSTwoLight-Light';
  cursor: pointer;
  font-size: 18px;
  transition: 0.3s;
}

.content .form button:hover{
  background: #2ebebd;
  color: #fff;
}

.content .title{
  color: #55565a;
  font-size: 18px;
  margin: 0 0 10px 0;
}

.content .inner-block h3{
  color: #2ebebd;
  font-size: 18px;
  margin: 0 0 5px 0;
}
.content .inner-block p{
  color: #55565a;
  font-size: 18px;
  margin: 0 0 20px 0;
}


.footer{
  background: url(../images/footer.png) no-repeat;
  background-size: cover;
  padding: 50px 0 20px 0;
/*  position: absolute;
  bottom: 0;
*/  width: 100%;
}

.footer a{
  display: table;
  width: 170px;
  height: auto;
  margin-right: 100px;
}

.footer a img{
  width: 100%;
}

/*
  screen page css
*/



.content.content-sc{
  top: 0;
  background: #35b9b7;
  padding: 30px;
  position: relative;
  height: 310px;
}

.content.content-sc .inner-block{
  height: 100%;
  overflow-y: scroll;
  padding: 0 0 20px 10px;
}

.content.content-sc:after{
  content: '';
  position: absolute;
  bottom: -288px;
  width: 100%;
  height: 288px;
  right: 0;
  left: 0;
  background: url(../images/cont.png) no-repeat;
  background-size: contain;
}

.content.content-sc .inner-block h3 , .content.content-sc .inner-block p{
  color: #fff;
}

.content.content-sc .title{
    color: #fff;
}

.footer.footer-sc{
  background: none;
}

@media (max-width: 1024px){
  .content{
    top: 50%;
    transform: translateY(-50%);
  }
  .content.content-sc{
    height: 950px;
    top: 0;
    transform: translateY(0);
  }

}

@media (max-width: 768px){

  .footer{
    padding: 25px 0;
  }
  .footer a {
    width: 140px;
  }
  .content.content-sc{
    height: 600px;
  }

}

@media (max-width: 480px){
  .content{
    width: 100%;
    padding: 0 15px;
  }
  .content .title{
    font-size: 25px;
  }

  .footer {
    background: none;
  }
  .footer a {
    width: 140px;
    margin: auto;
  }

  .content.content-sc {
    height: 410px;
  }
}