/*
* ------------------------------------------------------------------
*
* Project: 
* Version: 1.0
* Created : 29/12/2018
* Template URI: 
* Author Name: Shelley C Antony
* Author URI: http://www.fshdesign.org/
* Description: Roofing
* Developer: Fsh Design
*
*
* -------------------------------------------------------------------
*/
/******SCPL****/
html {
  scroll-behavior: smooth;
}
.padding {
	padding: 15px;
}
.padding-left {
	padding-left: 10px;
}
.padding-right {
	padding-right: 10px;
}

.no-padding {
	padding-left: 0;
	padding-right: 0;
}
.margin-top {
	margin-top:15px;
}
.margin-bottom{
	margin-bottom:15px;
}
.padding-bottom{
	padding-bottom:15px;
}
.padding-bottom2{
	padding-bottom:30px;
}
.padding-bottom3{
	padding-bottom:60px;
}
.shadow {
	
	-webkit-box-shadow: 1px 1px 1px 1px #D6D6D6;
box-shadow: 1px 1px 1px 1px #D6D6D6;
}

:focus {
       outline:none;
}

.padding-top {
	padding-top: 15px;
}
.padding-top2 {
	padding-top: 30px;
}
.padding-top3 {
	padding-top: 60px;
}
.no-padding-left {
	padding-left:0;
}
.no-padding-right {
	padding-right:0;
}
.margin-centre {
	margin-right: auto;
	margin-left: auto;
}
.alignment {
	text-align: center;
	color: #FFF;
}
.alignment p {
	line-height: 25px;
	font-size: 15px;
}
.alignment h1 {
	/*margin-bottom: 47px;*/
	font-size: 43px;
}

.border {
	padding: 5px;
	border: 1px solid #FFFFFF;
}
.no-border {
	border: none;
}
.col-centered{
    float: none;
    margin: 0 auto;
}
.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

.color-text-white{
	color: #FFF;
}
.color-white{
	background-color: #FFF;
}
.color-text-black{
	color: #000;
}
.color-black{
	background-color: #000;
}
.color-blue{
	background-color: #2b85ea;
	}
.color-text-blue{
	color: #2b85ea;
	}
/******SCPL****/
/*------------------------------------------------------------------
1-14. portfolio block Styles / .portfolio-block
-------------------------------------------------------------------*/


.portfolio-block .title:after,
.portfolio-block .text-box:after,
 {
	content: "";
	position: absolute;
}




.portfolio-block .over,
.portfolio-block.style5 .holder,
.portfolio-text .holder{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.portfolio-block {
	float: left;
	width: 100%;
	overflow: hidden;
	letter-spacing: 2px;
}

.portfolio-block a {
	color: #8f8f8f;
}

.portfolio-block a:hover {
	text-decoration: none;
}

.portfolio-block .box {
	position: relative;
	margin: 0 30px 30px 0;
}

.portfolio-block .box:hover .over {
	opacity: 1;
	visibility: visible;
}

.portfolio-block .box:hover .over-frame {
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}

.portfolio-block .box-holder {
	padding-top: 100%;
}

.portfolio-block .box-holder.half {
	padding-top: 50%;
}

.portfolio-block .holder {
	width: 100%;
	height: 100%;
	display: table;
	vertical-align: middle;
}

.portfolio-block .frame {
	padding: 19px 0 0;
	width: 100%;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}

.portfolio-block .over {
	opacity: 0;
	z-index: 99;
	text-align: center;
	visibility: hidden;
	text-transform: uppercase;
	background: rgba(0, 0, 0, .7);
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	font: 600 12px/20px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.portfolio-block .over .plus {
	height: 40px;
	display: block;
	font-size: 120px;
	font-weight: 100;
	margin: 0 0 16px;
	font-family: "Raleway", Georgia, "Times New Roman", Times, serif;
}

.portfolio-block .over .plus.small {
	font-size: 80px;
	height: 36px;
	margin: -17px 0 12px;
}

.portfolio-block .over:hover {
	text-decoration: none;
}

.portfolio-block .over.capitalize {
	text-transform: lowercase;
	text-transform: capitalize;
}

.portfolio-block .over-frame {
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
	-webkit-transform: translateY(80px);
	-ms-transform: translateY(80px);
	transform: translateY(80px);
	display: block;
}

.portfolio-block .over-frame.no-animate {
	-webkit-transition: all 0s ease;
	transition: all 0s ease;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}

.portfolio-block .title {
	color: #fff;
	display: block;
	margin: 0 0 10px;
	padding: 0 0 14px;
	position: relative;
	text-transform: capitalize;
	font: 600 18px/30px "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.portfolio-block .title:after {
	bottom: 0;
	left: 50%;
	margin: 0 0 0 -14px;
	width: 28px;
	height: 4px;
}

.portfolio-block .title.upper {
	text-transform: uppercase;
}

.portfolio-block .heading {
	color: #fff;
	display: block;
	margin: 0 0 15px;
	text-transform: capitalize;
	font: italic 300 48px/50px "Lato", Georgia, "Times New Roman", Times, serif;
}

.portfolio-block .heading.upper {
	text-transform: uppercase;
}

.portfolio-block img {
	width: 100%;
}

.portfolio-block .search {
	bottom: 0;
	right: 57px;
	color: #fff;
	font-size: 26px;
	padding: 13px 0 0;
	text-align: center;
	position: absolute;
	width: 57px;
	height: 57px;
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
}

.portfolio-block .search:hover {
	color: #2a2a2a;
	background: #f8f8f8;
}

.portfolio-block .link {
	right: 0;
	bottom: 0;
	color: #2a2a2a;
	font-size: 25px;
	padding: 16px 0 0;
	text-align: center;
	position: absolute;
	width: 57px;
	height: 57px;
	background: #f8f8f8;
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
}

.portfolio-block .link:hover {
	color: #fff;
	text-decoration: none;
	background: #e74c3c;
}

.portfolio-block .btn {
	border-width: 2px;
	font-weight: 700;
}

.portfolio-block .btn:hover {
	color: #000;
	background: #fff;
	border-color: #fff;
}

.portfolio-block .text-box {
	z-index: 100;
	position: relative;
	padding: 11px 18px 6px;
	background: #f8f8f8;
}

.dark .portfolio-block .text-box {
	background: #191919;
}

.portfolio-block .text-box:after {
	left: 21px;
	top: -14px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 7px 16px 7px;
	border-color: transparent transparent #f8f8f8 transparent;
}

.dark .portfolio-block .text-box:after {
	border-color: transparent transparent #191919 transparent;
}

.portfolio-block .img-box {
	overflow: hidden;
	position: relative;
}

.portfolio-block.style2 .over {
	top: 100%;
	opacity: 1;
	visibility: visible;
}

.portfolio-block.style2 .box:hover .over {
	top: 0;
}

.portfolio-block.style3 .box:hover .over {
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
}

.portfolio-block.style4 .link,
.portfolio-block.style4 .search {
	right: 50%;
	bottom: 50%;
}

.portfolio-block.style4 .link {
	margin: 0 -37px -30px 0;
}

.portfolio-block.style4 .search {
	margin: 0 20px -30px 0;
}

.portfolio-block.style4 .search.center {
	margin: 0 -28px -30px 0;
}

.portfolio-block.style5 .title {
	color: #2a2a2a;
}

.portfolio-block.style5 .over {
	opacity: 1;
	background: none;
	visibility: visible;
}

.portfolio-block.style5 .holder {
	top: auto;
	height: auto;
	display: block;
}

.portfolio-block.style5 .frame {
	padding: 0;
	display: block;
}

.portfolio-block.style5 .over-frame {
	background: #fff;
	-webkit-transition: all .25s linear;
	transition: all .25s linear;
	padding: 28px 20px 29px 28px;
	transform: translateY(160px);
	-ms-transform: translateY(160px);
	-webkit-transform: translateY(160px);
	position: relative;
}

.portfolio-block.style5 .over-frame:before {
	position: absolute;
	content: "";
	top: -14px;
	bottom: auto;
	left: 28px;
	right: auto;
}

.portfolio-block.style5 .over-frame:before {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 14px 14px 14px;
	border-color: transparent transparent #fff transparent;
}

.portfolio-block.style5 img {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
}

.portfolio-block.style5 .box:hover .studio-over {
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}

.portfolio-block.style5 .box:hover img {
	filter: grayscale(0);
	-webkit-filter: grayscale(0);
}

.portfolio-block.style6 .title {
	color: #000101;
}

.dark .portfolio-block.style6 .title {
	color: #8f8f8f;
}

.portfolio-block.style6 .title a {
	color: #000101;
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
}

.dark .portfolio-block.style6 .title a {
	color: #8f8f8f;
}

.portfolio-block.style6 .title a:hover {
	color: #fff;
	text-decoration: none;
}

.portfolio-block.style6 .box:hover .text-box {
	background: #2a2a2a;
}

.portfolio-block.style6 .box:hover .text-box:after {
	border-color: transparent transparent #2a2a2a transparent;
}

.portfolio-block.style6 .box:hover .title {
	color: #fff;
}

.portfolio-block.style6 .box:hover .title a {
	color: #fff;
}

.portfolio-block.style6 .box:hover .title a:hover {
	color: #000101;
}
.portfolio-block .over .plus {
	color: #ffffff;
}

.portfolio-block .title:after {
	background: #e74c3c;
}

.portfolio-block .search {
	background: #e74c3c;
}

.portfolio-block .link:hover {
	background: #e74c3c;
}

.portfolio-block .portfolio-btn:hover {
	background: #e74c3c;
	border-color: #e74c3c;
}

.portfolio-text .btn:hover {
	background: #e74c3c;
	border-color: #e74c3c;
}

#button {
    margin: 0 auto;
}
#frame {
    min-width: 320px;
width: 320px;
    height: 100vh;
    border: 1px;
    padding: 0px 0;
    overflow: hidden;
    box-shadow: 0 0 0 5px #f4f4f4, 0 0 0 6px #c2c2c2;
}
/*::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb {
    background: #ccc;
}*/
#screen {
    border: solid #fff 1px;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    
}
.body {
            height: 100vh;
        }
/*:-webkit-scrollbar-track {
    background: #f9f9f9;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.05);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.05);
}*/
#screen::-webkit-scrollbar {
width: 6px;
height: 15px;
}

#screen::-webkit-scrollbar-button {
background: #f60d2b;
}

#screen::-webkit-scrollbar-track-piece {
background: #004b84;
}

#screen::-webkit-scrollbar-thumb {
background: #f60d2b;
}
.navbar {
    margin-bottom: 0px;
    background-color: #888194;
}
.btn-tabs{
    background-color: transparent;
    color: #fff;
    font-size: 26px;
}