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

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

body {
  font-family: 'Famtree-Light';
  position: relative;
  direction: rtl;
  background: url(../images/bgall.png) no-repeat #f0eeed;
  background-size: cover;
}

*{ box-sizing: border-box;}

/* Let's get this party started */
::-webkit-scrollbar {
    width: 6px;
    background: #7d7bfa;
}
 
/* Track */
::-webkit-scrollbar-track {
    border-radius: 0px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #fff;
}
::-webkit-scrollbar-thumb:window-inactive {
  background: #fff; 
}

.pattern{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /*background: url(../images/pat.png);*/
}

/*.pattern:before{*/
/*  content: '';*/
/*  position: absolute;*/
/*  top: 0;*/
/*  right: 100px;*/
/*  background: url(../images/intro.png)no-repeat;*/
/*  width: 650px;*/
/*  height: 650px;*/
/*  background-size: contain;*/
/*}*/

.content{
  width: 75%;
  margin: auto;
  margin-top: 40px;
}

.content .form{
  width: 100%;
}

.content .form .form-group {
  padding: 0 20px;
  display: block;
  text-align: center;
  margin-bottom: 10px;
}

div#imageDetails {
  width: 600px;
  margin: auto;
}

.content .form .form-input{
  width: 100%;
  height: 40px;
  border: 1px solid #7d7bfa;
  border-radius: 7px;
  margin-bottom: 7px;
  background: none;
  outline: 0;
  padding: 7px;
  font-family: 'Famtree-Light';
  font-size: 16px;
}

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

.content .form button{
  background: #413f64;
  /*color: #8a8bff;*/
  color: #fff;
  width: 49%;
  height: 40px;
  display: inline-block;
  border: 0;
  border-radius: 5px;
  font-family: 'Famtree-Light';
  cursor: pointer;
  font-size: 18px;
  transition: 0.3s;

}

.content .form button:hover{
  background: #4a4a7c;
  color: #fff;
}

.content .title{
  color: #55565a;
  font-size: 20px;
  margin: 0 0 20px 0;
  text-align: center;
}

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


.footer {
  text-align: right;
  margin-right: 200px;
}


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

.footer a img{
  width: 100%;
}

/*
  screen page css
*/

.pattern.pattern-sc:after{
  background: url(../images/left-sc.png)no-repeat;
  background-size: contain;
}

.content.content-sc{
  top: 0;
  background: #7d7bfa;
  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;
}


.comp input{

  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
  -webkit-font-smoothing: antialiased;
  resize: none;
  opacity: 0;
}

label.comp {
  width: 33%;
  display: inline-block;
  padding: 10px;
  position: relative;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  min-width: 190px;
}

label.comp img {
  height: 350px;
}

/*.comp {*/
/*    color: #000;*/
/*    text-align: center;*/
/*    width: 30%;*/
/*    height: 40px;*/
/*    cursor: pointer;*/
/*    display: inline-block;*/
/*    border: 1px solid #35b9b7;*/
/*    position: relative;*/
/*    border-radius: 10px;*/
/*    line-height: 40px;*/
/*    margin-bottom: 15px;*/
/*}*/

.comp input[type=radio]:checked {
  width: 100%;
  height: 240px;
  top: 50px;
  right: 0px;
  position: absolute;
  z-index: -1;
  outline: 0;
}

label.comp img {
  height: 220px;
  border: 1px solid #b1acac;
  padding: 10px;
}


@media (max-width: 1440px){
  label.comp img{
    height: 260px;
  }

  .comp input[type=radio]:checked{
    height: 170px;
  }
}

@media (max-width: 1024px){

  label.comp img{
    height: 200px;
  }

  .comp input[type=radio]:checked{
    height: 130px;
  }


  .content.content-sc{
    height: 950px;
    top: 0;
    transform: translateY(0);
  }
  .pattern.pattern-sc:before{
      right: 50px;
  }
  .footer {
    margin-right: 40px;
  }
}

@media (max-width: 768px){

  div#imageDetails {
    margin-top: 100px;
    width: 100%;
  }

  label.comp{
    width: 100%;
    display: block;
  }

  .form-group{
    margin-bottom: 30px;
  }

  .pattern:after,.pattern:before{
    top: -30px;
  }
  .footer{
    padding: 25px 0;
    text-align: center;
    margin-right: 50px;
    margin-top: 40px;
  }
  .footer a {
    width: 140px;
  }
  .content.content-sc{
    height: 600px;
  }
  .pattern.pattern-sc:before{
      right: 0px;
  }  
  .pattern.pattern-sc:after{
      left: 0px;
  }

  label.comp img{
    height: 125px;
  }

}

@media (max-width: 480px){

  label.comp{
    width: 100%;
  }
  .content{
    width: 100%;
    padding: 0 15px;
  }
  .content .title {
    font-size: 18px;
    text-align: center;
    margin-top: 30px;
  }


  .pattern:before{
    width: 120px;
    height: 180px;
    right: 0;
  }
  .pattern:after{
    left: 25px;
    width: 117px;
    height: 280px;
  }
  .footer {
    background: none;

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

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

  .footer img{
    width: 80%;
    margin-left: 10px;
  }
}