/*
Template Name:Computer Repair
File: Layout CSS
Author: Templates On Web
Author URI: http://templateonweb.com/
Licence: <a href="http://www.templateonweb.com/terms.php?v=content&contentid=152">Website Template Licence</a>
*/
/********************* middle ****************/
#middle{ 
 background-color:#f1f1f1;
 }
.middle_4{ 
 margin-top: -140px;
 }
.middle_2{ 
 padding-left:10px;
 }
.middle_2 h5{ 
 padding-bottom:10px;
 }
.middle_2 h5 a{ 
 color:#000;
 font-weight:bold;
 }
.middle_3{ 
 padding-top: 40px;
 }
/********************* middle_end ****************/
/********************* product ****************/
#product{ 
 padding-top: 20px;
 padding-bottom: 40px;
 }
.product_1{ 
 text-align:center;
 }
.product_2 p{ 
 padding:0px;
 margin:0px;
 }
.product_3{ 
 background-color: #ffffff;
 padding: 10px;
 transform-origin: 100% 50%;
 transform: skewY(-2deg);
 box-shadow: 0 0 2px 1px #e2dfdf;
 }
.product_3:hover{ 
 transform-origin: 100% 50%;
 transform: skewY(8deg);
 }
.product_3 h2{ 
 text-align:center;
 }
.product_3 h4{ 
 text-align: center;
 color: #999;
 }
.product_3 p{ 
 text-align:center;
 padding-bottom: 10px;
 }
.product_3 ul{ 
 text-align:center;
 }
.product_3 li{ 
 display: inline-block;
 padding-right:30px;
 }
.product_3 li a{ 
 font-size:18px;
 color:#999;
 }
.product_1 p{ 
 padding-bottom:10px;
 } 
/********************* product_end ****************/
/********************* work ****************/
#work{ 
 padding-top:30px;
 padding-bottom:30px;
 background-color: ghostwhite;
 }
.work_1{ 
 text-align:center;
 }
.work_3 img{ 
 border-radius: 30%;
 position:relative;
 box-shadow: 0 0 4px 7px #c5c2c2;
 }
.work_3 img:hover{ 
 box-shadow: 0 0 2px 5px #bd1700;
 }
.work_3{ 
 text-align:center;
 }
.work_3 h4{ 
 padding-top:30px;
 padding-bottom:10px;
 }
.work_3 h4 a{ 
 color: #000;
 }
.work_3 p{ 
 color: #8a8888;
 padding: 0px;
 margin: 0px;
 }
.work_4 h3{ 
 background-color: #bd1700;
 color: #fff;
 width: 40px;
 height: 40px;
 line-height: 39px;
 text-align: center;
 border-radius: 50%;
 position: absolute;
 left: 50%;
 margin-left: -20px;
 bottom: 32%;
 z-index: 10;
 }
.work_2{ 
 padding-top:40px;
 }
/********************* work_end ****************/
/********************* pricing ****************/
#pricing{ 
 padding-top: 30px;
 padding-bottom: 30px; 
 }
.pricing_2 h2{ 
 padding-bottom:15px; 
 }
.pricing_2 h5{ 
 color: #000;
 padding: 0px;
 margin: 0px;
 line-height: 20px; 
 }
.pricing_2 p{ 
 line-height:28px;
 color: #888585;
 }

#pricing .panel
{
    text-align: center;
}
#pricing .panel-footer {
 font-size: 16px;
 padding: 25px 15px;
}
#pricing .panel:hover { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px 5px rgba(130, 130, 130, 0.35); }
#pricing .the-price
{
    background-color: rgb(167, 22, 2);
    box-shadow: 0 1px 0 #dcdcdc, inset 0 1px 0 #fff;
    padding: 20px;
    margin: 0;
    color: #fff;
}
#pricing .the-price h1
{
    line-height: 1em;
    padding: 0;
    margin: 0;
	color:#fff;
}
#pricing .subscript
{
    font-size: 25px;
}
/* CSS-only ribbon styles    */
#pricing .cnrflash
{
    /*Position correctly within container*/
    position: absolute;
    top: -9px;
    right: 4px;
    z-index: 1; /*Set overflow to hidden, to mask inner square*/
    overflow: hidden; /*Set size and add subtle rounding  		to soften edges*/
    width: 100px;
    height: 100px;
    border-radius: 3px 5px 3px 0;
}
#pricing .cnrflash-inner
{
    /*Set position, make larger then 			container and rotate 45 degrees*/
    position: absolute;
    bottom: 0;
    right: 0;
    width: 145px;
    height: 145px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -o-transform: rotate(45deg); /* Opera */
    -moz-transform: rotate(45deg); /* Firefox */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -webkit-transform-origin: 100% 100%; /*Purely decorative effects to add texture and stuff*/ /* Safari and Chrome */
    -ms-transform-origin: 100% 100%;  /* IE 9 */
    -o-transform-origin: 100% 100%; /* Opera */
    -moz-transform-origin: 100% 100%; /* Firefox */
    background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.1) 50%), linear-gradient(0deg, transparent 0%, rgba(1,1,1,.2) 50%);
    background-size: 4px,auto, auto,auto;
    background-color: #aa0101;
    box-shadow: 0 3px 3px 0 rgba(1,1,1,.5), 0 1px 0 0 rgba(1,1,1,.5), inset 0 -1px 8px 0 rgba(255,255,255,.3), inset 0 -1px 0 0 rgba(255,255,255,.2);
}
#pricing .cnrflash-inner:before, .cnrflash-inner:after
{
    /*Use the border triangle trick to make  				it look like the ribbon wraps round it's 				container*/
    content: " ";
    display: block;
    position: absolute;
    bottom: -16px;
    width: 0;
    height: 0;
    border: 8px solid #800000;
}
#pricing .cnrflash-inner:before
{
    left: 1px;
    border-bottom-color: transparent;
    border-right-color: transparent;
}
#pricing .cnrflash-inner:after
{
    right: 0;
    border-bottom-color: transparent;
    border-left-color: transparent;
}
#pricing .cnrflash-label
{
    /*Make the label look nice*/
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    padding-bottom: 5px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(1,1,1,.8);
    font-size: 0.95em;
    font-weight: bold;
    text-align: center;
}
#pricing small{
 font-size: 115%;
}
#pricing .table>tbody>tr>td{
 font-size: 16px;
}
#pricing .table>tbody>tr.active>td{ 
   background-color: #267b6e;
   color: #fff;
 }
/********************* pricing_end ****************/
/********************* news ****************/
#news{ 
 padding-top:30px;
 padding-bottom:30px;
 background-color: #fbfbfb;
 }
.news_1{  
 text-align:center;
 }
.news_3 h3{ 
 padding-top: 40px;
 font-weight:bold;
 padding-bottom:10px;
 }
.news_3 ul{
 border-top:1px solid #f0f0f0;	
 border-bottom:1px solid #f0f0f0;
 padding-top:10px;
 padding-bottom:8px;
 }
.news_3 li{ 
 display:inline;
 padding-right:10px;
 color: #7d7777;
}
.news_3 i{ 
color: #bd1700;
}
.news_3 p{ 
 padding:0px;
 margin:0px;
 padding-top:10px;
 padding-bottom:10px;
 color: #7d7777;
}
.news_4 a{ 
 font-size:18px;
 color: #9a1502;
}
.news_4 i{ 
 padding-left:10px;
 vertical-align: middle;
}
.news_3 img{ 
 position:relative;
 }
.news_5 p{ 
 height: 60px;
 width: 45px;
 background-color: #bd1700;
 text-align:center;
 position:absolute;
 left: 17%;
 margin-left: -20px;
 bottom: 45%;
 z-index: 10;
 color: #fff;
 padding-top: 3px;
}
.news_main{  
 box-shadow:1px 2px 10px rgba(0,0,0,.10);
 padding: 10px;
 }
.news_2{ 
 padding-top:30px;
 }
/********************* news_end ****************/
/********************* team ****************/
#team{ 
 padding-top:30px;
 padding-bottom:30px;
 }
.team_1{ 
 text-align: center;
 }
.team_1 h2{ 
 letter-spacing: 2px;
 font-weight: bold;
 color: #474d4b;
 padding-bottom: 5px;
 }
.team_1 p{ 
 padding-bottom:30px;
 }
.team_4{ 
 text-align:center;
 background: #fff;
 box-shadow: 0 0 3px #424141;
 }
.team_4 h3{ 
 color:#000;
 font-weight:bold;
 letter-spacing:2px;
 padding-top:15px;
 }
.team_4:hover h3{ 
 color:#fff;
 }
.team_4:hover p{ 
 color:#fff;
 }
.team_4:hover a{ 
 color:#fff;
 }
.team_4 p{ 
 color: #000;
 padding: 0px;
 margin: 0px;
 padding-bottom: 3px;
 }
.team_4:hover{
 background: #bd1700;
 }
.team_4 ul{
 padding-bottom:13px;
}
.team_4 li{
 display:inline; 
 padding-right:10px;
}
.team_4 li a{
 color:#000;
 font-size:20px;
}
/********************* team_end ****************/



@media screen and (max-width : 767px){
.middle_4 {
 margin-top: 0px;
}
#center .kb_caption h1 {
 font-size: 14px;
}
#center .kb_caption p {
 font-size: 7px;
 letter-spacing: 0px;
 padding: 0px;
 margin: 0px;
 padding-top: 4px;
}
#center .kb_caption h4 {
 padding: 0px;
 margin: 0px;
}
.button {
 padding: 2px 20px 2px 20px;
 margin-top: 0px;
 font-size: 10px;
}
.carousel-caption.kb_caption.kb_caption_right {
 padding-bottom: 10px;
}
#middle {
 text-align: center;
 padding-top: 20px;
 padding-bottom: 20px;
}
.middle_3 {
 padding-top: 0px;
}
.work_3 p {
 padding-bottom: 10px;
}
#pricing {
 padding-top: 20px;
 padding-bottom: 20px;
 text-align: center;
}
.pricing_2 p {
 padding-bottom: 10px;
}
#news {
 padding-top: 20px;
 padding-bottom: 20px;
 text-align: center;
}
.news_5 p {
 bottom: 56%;
}
#team {
 padding-top: 20px;
 padding-bottom: 20px;
 text-align: center;
}
.team_1 p {
 padding-bottom: 3px;
 padding-left: 10px;
 padding-right: 10px;
}
}

@media (min-width:768px) and (max-width:991px) {
#center .kb_caption h1 {
 font-size: 18px;
}
#center .kb_caption p{  
 font-size:13px;
}
.button{ 
 font-size:13px;
}
.middle_1 img{  
 width:100%;
}
.middle_2 p{ 
 padding:0px;
 margin:0px;
}
#center .carousel-caption.kb_caption.kb_caption_right{ 
 top:10%
}
.middle_3 {
 padding-top: 10px;
}
#middle {
 padding-top: 20px;
 padding-bottom: 20px;
}
.work_4 h3 {
 bottom: 50%;
}
.news_3 h3 {
 font-size: 16px;
}
.news_5 p {
 bottom: 57%;
}
.news_3 li {
 padding-right: 2px;
}
#team {
 padding-top: 10px;
 padding-bottom: 30px;
}
.team_4 h3 {
 letter-spacing: 0px;
}
#pricing .the-price h1 {
 font-size: 13px;
}
#pricing .subscript {
 font-size: 18px;
}
}


@media (min-width:992px) and (max-width:1200px) {
#center .kb_caption h1 {
 font-size: 18px;
}
#center .kb_caption p{  
 font-size:13px;
}
.button{ 
 font-size:13px;
}
.middle_1 img{  
 width:100%;
}
.middle_2 p{ 
 padding:0px;
 margin:0px;
}
#center .carousel-caption.kb_caption.kb_caption_right{ 
 top:10%
}
.middle_3 {
 padding-top: 10px;
}
#middle {
 padding-top: 20px;
 padding-bottom: 20px;
}
.work_4 h3 {
 bottom:35%;
}
.news_3 h3 {
 font-size: 16px;
}
.news_5 p {
 bottom: 47%;
}
.news_3 li {
 padding-right: 2px;
}
#team {
 padding-top: 10px;
 padding-bottom: 30px;
}
.team_4 h3 {
 letter-spacing: 0px;
}
#pricing .the-price h1 {
 font-size: 13px;
}
#pricing .subscript {
 font-size: 18px;
}
}
 
 
@media (min-width:1201px) and (max-width:1325px) {

 }