﻿ h1 {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 20px;
}
text-center {
    text-align: center;
}

h1, h2, h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

h1, h2, h3, h4, h5, h6  {
        font-family: "Open Sans", sans-serif;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;}
/*fixed HTML error - Element style not allowed as child of element div in this context. - created separate 
    CSS class ".repair_parameter_table" for tables in repair sections*/
.repair_parameter_table {
    width: 100%;
}

    .repair_parameter_table,
    .repair_parameter_table th,
    .repair_parameter_table td {
        border: 1px solid black;
        border-collapse: collapse;
    }

        .repair_parameter_table th,
        .repair_parameter_table td {
            padding: 5px;
            text-align: center;
        }

        .repair_parameter_table tr:nth-child(even) {
            background-color: #eee;
        }

        .repair_parameter_table tr:nth-child(odd) {
            background-color: #fff;
        }

        .repair_parameter_table th {
            background-color: #2179c1;
            color: white;
        }
       
        .repair_parameter_table td.repair_lefted_column {
                text-align: left;
                vertical-align: top;
        }
     .repair_ul li {
        list-style-type: none;
        margin: 10px 0px;
    }

    .repair_ul li.li_sub {
        padding-left: 20px;
        list-style-type: circle;
        list-style-position: inside;
    }
        .lead {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
}
   
      .custom_contayner {
          position: relative;
          height: 100%;
          width: 100%;
          left: 0;
          -webkit-transition:  left 0.4s ease-in-out;
          -moz-transition:  left 0.4s ease-in-out;
          -ms-transition:  left 0.4s ease-in-out;
          -o-transition:  left 0.4s ease-in-out;
          transition:  left 0.4s ease-in-out;
      }
      .custom_contayner.open-sidebar {
          left: 240px;
      }
      
      .swipe-area {
          position: absolute;
          width: 50px;
          left: 0;
      top: 0;
          height: 100%;
          z-index: 0;
		 
		background: -moz-linear-gradient(top,  #000000 0%, #333333 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  #000000 0%,#333333 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  #000000 0%,#333333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
        text-align:center;
        padding-top:4.5em;
      }
      #sidebar {
 		background: -moz-linear-gradient(top,  #000000 0%, #333333 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  #000000 0%,#333333 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  #000000 0%,#333333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
        overflow:hidden;
        padding-top:2em;
        text-align:center;
          position: absolute;
          width: 250px;
          height: 100%;
          left: -250px;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
      }
      #sidebar ul {
          margin: 0;
          padding: 0;
		  padding-top: 30px;
          list-style: none;
      }
      #sidebar ul li {
          margin: 0;
      }
      #sidebar ul li a {
          padding: 15px 20px;
		color: white;
		font-size: 16px;
			font-weight: 300;
          text-decoration: none;
          display: block;
         -webkit-transition:  background 0.3s ease-in-out;
          -moz-transition:  background 0.3s ease-in-out;
          -ms-transition:  background 0.3s ease-in-out;
          -o-transition:  background 0.3s ease-in-out;
          transition:  background 0.3s ease-in-out;
      }
      #sidebar ul li:hover a {
          color: #55acee;
      }
   
	  #sidebar ul li a.active {
		color: #55acee;
	}
      .main-content {
          width: 90%;
          height: 85vh;
          padding: 10px;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          position: relative;
      }
      .main-content .content{
          box-sizing: border-box;
          -moz-box-sizing: border-box;
      padding-left: 60px;
      width: 95%;
      height:70vh;
      overflow-y:auto;
      overflow-x:hidden;
      margin-bottom:2%;
      }
      .main-content .content h1{
          font-weight: 100;
      }
      .main-content .content p{
          width: 100%;
          line-height: 160%;
      }
      .main-content #sidebar-toggle {
          background: grey;
          border-radius: 3px;
          display: block;
          position: relative;
          padding: 10px 7px;
          float: left;
          margin-left:10px;
      }
      .main-content #sidebar-toggle .bar{
           display: block;
          width: 18px;
          margin-bottom: 3px;
          height: 2px;
          background-color: #fff;
          border-radius: 1px;   
      }
      .main-content #sidebar-toggle .bar:last-child{
           margin-bottom: 0;   
      }


    /* Social Links
---------------------------------- */
.social-links {
    padding: 0;
    list-style: none;
    margin:  0 0 15px 0;
}

    .social-links li {
        margin: 10px 25px 10px 0;
        display: inline-block;
        font-size: 36px;
    }

        /*.social-links li a {
            color: white;
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
        }*/

        .social-links li.twitter a:hover {
            color: #55acee;
        }

        .social-links li.skype a:hover {
            color: #00aff0;
        }

        .social-links li.linkedin a:hover {
            color: #0976b4;
        }

        .social-links li.googleplus a:hover {
            color: #dd4b39;
        }

        .social-links li.youtube a:hover {
            color: #b31217;
        }

        .social-links li.flickr a:hover {
            color: #ff0084;
        }

        .social-links li.facebook a:hover {
            color: #3b5998;
        }

        .social-links li.pinterest a:hover {
            color: #cb2027;
        }



.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.scrollBtn{
    text-align:center;
	color: white;
    font-size: 30px;
	font-weight: 300;
    text-decoration: none;
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
    cursor: pointer;
    display: block;
    visibility:hidden;
}




#relatedLinksContainer{
    overflow:hidden;
    margin-top:0 !important;
    padding:0 !important;
    display:block;
    position:relative;
    height:70%;
}

    #relatedLinksContainer li {
        padding:0;
    }


.relatedLinks:hover{
    color:white !important;
}

body{
    height:100%;
    overflow-x:hidden;
}

@media (max-width:1450px) and (min-width:1200px) {
    .main-content .content{
        width:87%;
    }
}


@media (max-width:1200px) and (min-width:992px) {
     .swipe-area{
        padding-top:8.5em;
    }
      #sidebar{
        padding-top:7em;
    }
       .content{
        padding-top: 8%;
    }
    .scrollBtnUp{
        top:25%;
    }
    .open-sidebar .main-content .content{
        width:90%;
    }
     .custom_contayner .main-content .content{
        width:100%;
    }

}

@media (max-width:992px) and (min-width:767px) {
    .main-content .content {
        margin-top:4em;
        height:55vh;
    }
    .swipe-area{
        padding-top:9em;
    }
     #sidebar{
        padding-top:6em;
    }
     .scrollBtnUp{
        top:30%;
    }
     .open-sidebar .main-content .content{
        width:80%;
    }
     .custom_contayner .main-content .content{
        width:100%;
    }
}



@media (max-width:767px) and (min-width:318px){
     .swipe-area{
        padding-top:5em;
    }
      #sidebar{
        padding-top:3em;
    }
      .main-content .content {
        margin-top:1em;
        height:55vh;
    }
}

@media (max-width:318px) {
    .swipe-area{
        padding-top:8.5em;
    }
    #sidebar{
        padding-top:5em;
    }
    .main-content .content {
        margin-top:4em;
        height:53vh;
    }
    .open-sidebar.custom_contayner {
          width:0px;
      }
    .open-sidebar .main-content .content
    {
        padding:0;
    }
}


@media (min-height:695px)
{
    #relatedLinksContainer {
        height:70%;
    }

}

@media (max-height:695px) and (min-height:545px)
{
    #relatedLinksContainer {
        height:61%;
    }

}

@media (max-height:545px) and (min-height:350px){
    #relatedLinksContainer {
        height:40%;
    }
}

@media (max-height:350px) {
    #relatedLinksContainer {
        height:25%;
    }
}





