/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/*
 * Custom Style Sheet - Use this file to style your content
 */

/* Layout
----------------------------------------------------------------------------------------------------*/

.custom-logo {
  width: 160px;
  height: 60px;
  background: url(../../../images/yootheme/logo.png) 0 50% no-repeat;
    background-size: contain;
}

.frontpage-headline { 
  padding-bottom: 10px;
  font-weight: bold;
}

/* Bottom
----------------------------------------------------------------------------------------------------*/

#bottom-a .custom h3 { 
  margin-top: 7px;
  margin-bottom: 27px;  
  line-height: 30px;
  font-size: 24px;
}

#bottom-a .custom p {
  margin-top: 0;
  font-family: "OpenSansLight";
  font-size: 18px; 
  color: #fff;
}

/* Services page ---*/
.col-intro {
  float: left;
  text-align: center;
  width: 33%;
}

div.col-intro .inner { margin: 0 !important; padding: 0 18px !important; }

div.col-intro h4 {
  font-weight: normal;
  margin: 20px 0;
  text-transform: none;
}

div.col-intro p { color: #666; }

#ja-one-page .page-wrap { padding-top: 120px; }

/*  Process 
----------------------------------------------------------------------------------------------------*/
#process {width: 100%; height: auto;}

.planning {
  width: 150px;
  color: #333;
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  border: 1px solid #e8e8e8;
     padding: 0px 10px 0px 10px;

  
}

.planning h3 {
   background: #da7700 url(../images/numbers/one.png) no-repeat 50% 50%;
   color: #fff;
   border-radius: 90px;
   padding: 50px 20px 20px 20px;
   text-align: center;
   font-size: 18px;
   width: 90px;
   height: 60px;
   float: center;
   margin-left: 10px;  }

.design{
  width: 150px;
  color: #333;
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  border: 1px solid #e8e8e8;
     padding: 0px 10px 0px 10px;
     

}
.design h3 {
   background: #0071a5 url(../images/numbers/two.png) no-repeat 50% 50%;
   color: #fff;
   border-radius: 90px;
   padding: 50px 20px 20px 20px;
   text-align: center;
   font-size: 18px;
   width: 90px;
   height: 60px;
   float: center;
     margin-left: 10px;
     

  }
  
.design h3::Before{
  
  }
.design h3::After{
  
  
  }      
.build{
  width: 150px;
  color: #333;
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  border: 1px solid #e8e8e8;
     padding: 0px 10px 0px 10px;

}
.build h3 {
  background: #c63230 url(../images/numbers/three.png) no-repeat 50% 50%;
  color: #fff;
   border-radius: 90px;
padding: 50px 20px 20px 20px;
   text-align: center;
   font-size: 18px;
   width: 90px;
   height: 60px;
   float: center;
   margin-left: 10px;

  }

.process_content{
    width: 150px;
  color: #333;
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  border: 1px solid #e8e8e8;
     padding: 0px 10px 0px 10px;
}
.process_content h3 {
  background: #699332 url(../images/numbers/four.png) no-repeat 50% 50%;

    color: #fff;
   border-radius: 90px;
  padding: 50px 20px 20px 20px;
   text-align: center;
   font-size: 18px;
   width: 90px;
   height: 60px;
   float: center;
      margin-left: 10px;

  }

.launch{
  width: 150px;
  color: #333;
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  border: 1px solid #e8e8e8;
     padding: 0px 10px 0px 10px;
}

.launch h3 {
    background: #da7700 url(../images/numbers/five.png) no-repeat 50% 50%;

    color: #fff;
   border-radius: 90px;
   padding: 50px 20px 20px 20px;
   text-align: center;
   font-size: 18px;
   width: 90px;
   height: 60px;
   float: center;
      margin-left: 10px;


  }

.maintenance{
  width: 100px;
  color: #fff;
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  border: 1px solid #e8e8e8;
     padding: 0px 10px 0px 10px;

}

.maintenance h3 {
    background: #0071a5 url(../images/numbers/six.png) no-repeat 50% 50%;
    color: #fff;
   border-radius: 90px;
   padding: 50px 20px 20px 20px;
   text-align: center;
   font-size: 18px;
   width: 90px;
   height: 60px;
   float: center;
      margin-left: 10px;


  }
ul.list {
  list-style: square;  
    }
ul.list ul {
  }

h1.front-page-header  {
  color: #fff;
  font-size: 150%;
  align: left;
  margin-top: -110px;
  margin-bottom: 20px;
  top: 220px;
  z-index: 90;
  left: 265px;
  }
  
#arrow {
    position: relative;
    top: -18px;
    z-index: 120;
    width: 69px;
    height: 57px;
    left: 900px;
}
  
section#bottom-a .testimonal blockquote {
  color: #f7f7f7;
  font-size: 14px;
  font-weight: 100;
  text-align: left;
  text-style: normal;
  font-family: "MavenProRegular", Arial, Helvetica sans-serif;
  
  }
      

section#bottom-a .testimonal blockquote small {
  color: #fff;
  font-size: 11px;
  font-weight: 100;  
  font-family: "MavenProRegular", Arial, Helvetica sans-serif;
    text-align: right;
  
  }  
  
.span6testimonial {float: left;  padding: 10px;}    

.left_div {
  width: 40%;
  float: left;
  
  }
  
.right_div {
  width: 56%;
  float: right;
  
  }  

  
/* Only Phones */
@media (max-width: 767px) {
   .planning, 
   .design,
   .build,
   .process_content,
   .launch,
   .maintenance,
   .left_div,
   .right_div
    {
     width: 41%;

     
     }
  .planning h3, 
   .design h3,
   .build h3,
   .process_content h3,
   .launch h3,
   .maintenance h3 {
      padding: 50px 20px 20px 20px;
     font-size: 18px;
     
     }
     
     
}

/* Only Phones (Landscape) */
@media (min-width: 480px) and (max-width: 767px) {
 .planning, 
   .design,
   .build,
   .precess_content,
   .launch,
   .maintenance,
   .left_div,
   .right_div
   {
     width: 41%;

     
     }
       .planning h3, 
   .design h3,
   .build h3,
   .process_content h3,
   .launch h3,
   .maintenance h3 {
       padding: 50px 20px 20px 20px;
     font-size: 18px;

     
     }

}

/* Only Phones (Portrait) */
@media (max-width: 479px) {
 .planning, 
   .design,
   .build,
   .process_content,
   .launch,
   .maintenance,
   .left_div,
   .right_div
    {
     width: 90%;
     
     }
       .planning h3, 
   .design h3,
   .build h3,
   .process_content h3,
   .launch h3,
   .maintenance h3 {
        padding: 50px 20px 20px 20px;
     font-size: 18px;

     
     }

}

.buynow {
  margin: 10px 0;
}

.buynow .pricetable {
  margin: 0 auto;
  width: 100%;
  padding-left: 8px;
}

.buynow .pricetable .plan {
  border-radius: 4px;
  box-shadow: 0 1px 10px rgba(0,0,0,.15);
  background: #fcfcfc;
  text-align: center;
  border-bottom: 1px solid #ddd;
  padding-bottom: 15px;
}

.buynow .pricetable .plan-column-left {
  width: 240px;
  float: left;
  margin-top: 15px;

}
.buynow .pricetable .plan-column-right {
  width: 240px;
  float: left;
  margin-top: 15px;

}


.buynow .pricetable .plan-column-middle {
  width: 280px;
  float: left;
  margin-left: -1px;
  margin-right: -1px;
  position: relative;
}

.buynow .pricetable .plan-column-middle span {
  display: block;
  font-weight: normal;
  font-size: 15px;
  text-transform: capitalize;
  margin-top: 2px;
  color: rgba(255,255,255,.8);
}

.buynow .pricetable .plan-name {
  padding: 22px;
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
}

.buynow .pricetable .plan-column-middle .plan-name {
  padding: 20px 22px 17px;
  border-radius: 4px 4px 0 0;
}

.buynow .pricetable .plan-column-middle .plan {
  height: 640px;
}

.buynow .pricetable .plan-column-left .plan {
  height: 640px;
}

.buynow .pricetable .plan-column-left .plan-name {
  border-radius: 4px 0 0 0;
}

.buynow .pricetable .plan-column-right .plan-name {
  border-radius: 0 4px 0 0;
}

.buynow .pricetable .plan-price {
  font-size: 34px;
  font-weight: normal;
  background: #f6f6f6;
  padding: 30px 0;
  border-bottom: 1px solid #ddd;
  box-shadow: 0 1px 0 rgba(255,255,255,1);
  text-shadow: 0 1px 0 rgba(255,255,255,1);
}

.buynow .pricetable .plan .cta, .buynow .pricetable .digistore_continue {
  display: block;
  width: 160px;
  font-size: 17px;
  border-radius: 4px;
  padding: 10px;
  margin: 15px auto;
}

.buynow .pricetable .digistore_continue {
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,1);
  box-shadow: inset 0 0 0 rgba(0,0,0,0);
  border: 0 none;
  text-transform: uppercase;
  padding: 12px 35px 10px;
}

.buynow .pricetable .plan-item {
  padding: 10px 0;
  border-top: 1px solid #ddd;
  margin: 0 25px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1);
}

.buynow .pricetable .plan-item-large {
  padding: 10px;
  border-top: 1px solid #ddd;
  margin: 0 25px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1);
}

.buynow .pricetable .plan-item-large b {
  font-size: 18px;
}