body,html{width:100%;height:100%}
body{font-family:'Source Sans Pro'}


.btn-xl{padding:1.25rem 2.5rem}

.content-section{padding-top:3rem;padding-bottom:1rem}

.content-section-heading h2{font-size:3rem}

.content-section-heading h3{font-size:1rem;text-transform:uppercase}
h1,h2,h3,h4,h5,h6{font-weight:700}

.text-faded{color:rgba(255,255,255,.7)}

.map{height:30rem}
@media (max-width:992px){
.map{height:75%}
}

.map iframe{pointer-events:none}

.scroll-to-top{position:fixed;right:15px;bottom:15px;display:none;width:50px;height:50px;text-align:center;color:#fff;background:rgba(52,58,64,.5);line-height:45px}

.scroll-to-top:focus,
.scroll-to-top:hover{color:#fff}

.scroll-to-top:hover{background:#343a40}

.scroll-to-top i{font-weight:800}

.masthead{
	min-height:30rem;
	position:relative;
	display:table;
	width:100%;
	height:auto;
	padding-top:8rem;
	padding-bottom:8rem;
	
	background:linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 100%),url(../img/bg-masthead.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover
	}
	
	.masthead2{
	min-height:30rem;
	position:relative;
	display:table;
	width:100%;
	height:auto;
	padding-top:8rem;
	padding-bottom:8rem;
	
	background:linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 100%),url(../img/support.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover
	}

.masthead h1{
	font-size:4rem;
	margin:0;
	padding:0
	}
	
.masthead2 h1{
	font-size:4rem;
	margin:0;
	padding:0
	}

	@media (min-width:992px)
	{
.masthead{
	height:100vh
	}
	
.masthead2{
	height:100vh
	}

.masthead h1{
	font-size:5.5rem}
}

.masthead2 h1{
	font-size:5.5rem}
}
#sidebar-wrapper{
		position:fixed;
		z-index:2;
		right:0;
		width:250px;
		height:100%;
		-webkit-transition:all .4s ease 0s;
		-moz-transition:all .4s ease 0s;-ms-transition:all .4s ease 0s;-o-transition:all .4s ease 0s;
		transition:all .4s ease 0s;
		transform:translateX(250px);
		background:#1d809f;
		border-left:1px solid rgba(255,255,255,.1)}

.sidebar-nav{position:absolute;top:0;width:250px;margin:0;padding:0;list-style:none}

.sidebar-nav li
.sidebar-nav-item a{display:block;text-decoration:none;color:#fff;padding:15px}

.sidebar-nav li a:hover{text-decoration:none;color:#fff;background:rgba(255,255,255,.2)}

.sidebar-nav li a:active,
.sidebar-nav li a:focus{text-decoration:none}

.sidebar-nav>.sidebar-brand{font-size:1.2rem;background:rgba(52,58,64,.1);height:80px;line-height:50px;padding-top:15px;padding-bottom:15px;padding-left:15px}

.sidebar-nav>.sidebar-brand a{color:#fff}

.sidebar-nav>
.sidebar-brand a:hover{color:#fff;background:0 0}
#sidebar-wrapper
.active{right:250px;width:250px;-webkit-transition:all .4s ease 0s;-moz-transition:all .4s ease 0s;-ms-transition:all .4s ease 0s;-o-transition:all .4s ease 0s;transition:all .4s ease 0s}

.menu-toggle{position:fixed;right:15px;top:15px;width:50px;height:50px;text-align:center;color:#fff;background:rgba(52,58,64,.5);line-height:50px;z-index:999}

.menu-toggle:focus,
.menu-toggle:hover{color:#fff}

.menu-toggle:hover{background:#343a40}

.service-icon{background-color:#fff;color:#1d809f;height:7rem;width:7rem;display:block;line-height:7.5rem;font-size:2.25rem;box-shadow:0 3px 3px 0 rgba(0,0,0,.1)}

.callout{padding:15rem 0;background:linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 100%),url(../img/bg-callout.jpg);background-position:center center;background-repeat:no-repeat;background-size:cover}

.callout h2{font-size:3.5rem;font-weight:700;display:block;max-width:30rem}

.portfolio-item{display:block;position:relative;overflow:hidden;max-width:530px;margin:auto auto 1rem}

.portfolio-item .caption{display:flex;height:100%;width:100%;background-color:rgba(33,37,41,.2);position:absolute;top:0;bottom:0;z-index:1}

.portfolio-item .caption .caption-content{color:#fff;margin:auto 2rem 2rem}

.portfolio-item .caption .caption-content h2{font-size:.8rem;text-transform:uppercase}

.portfolio-item .caption .caption-content p{font-weight:300;font-size:1.2rem}
@media (min-width:992px){
.portfolio-item{max-width:none;margin:0}

.portfolio-item .caption{-webkit-transition:-webkit-clip-path .25s ease-out,background-color .7s;-webkit-clip-path:inset(0);clip-path:inset(0)}

.portfolio-item .caption .caption-content{transition:opacity .25s;margin-left:5rem;margin-right:5rem;margin-bottom:5rem}
.portfolio-item img{-webkit-transition:-webkit-clip-path .25s ease-out;-webkit-clip-path:inset(-1px);clip-path:inset(-1px)}

.portfolio-item:hover img{-webkit-clip-path:inset(2rem);clip-path:inset(2rem)}

.portfolio-item:hover 
.caption{background-color:rgba(29,128,159,.9);-webkit-clip-path:inset(2rem);clip-path:inset(2rem)}
}
footer
.footer{padding-top:5rem;padding-bottom:5rem}
footer
.footer 
.social-link{display:block;height:4rem;width:4rem;line-height:4.3rem;font-size:1.5rem;background-color:#1d809f;transition:background-color .15s ease-in-out;box-shadow:0 3px 3px 0 rgba(0,0,0,.1)}
footer
.footer .social-link:hover{background-color:#155d74;text-decoration:none}
a{color:#1d809f}
a:active,a:focus,a:hover{color:#155d74}

.btn-buy{
	background-color:#23ddbd!important;
	border-color:#23ddbd!important;
	color:#fff!important;
	padding: 10px;
	margin: 0px;
	min-width: 100px;
	border-radius:0px;
	l;
	}


	

.btn-primary{
		background-color:#23ddbd!important;
		border-color:#23ddbd!important;
		color:#fff!important;
		padding: 10px;
		margin: 20px;
		min-width: 100px
		}


.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover{
	background-color:#29a38e!important;
	border-color:#29a38e!important
	}

.btn-secondary{background-color:#ecb807!important;border-color:#ecb807!important;color:#fff!important}

.btn-secondary:active,.btn-secondary:focus,.btn-secondary:hover{background-color:#ba9106!important;border-color:#ba9106!important}

.btn-dark{color:#fff!important}

.btn{box-shadow:0 3px 3px 0 rgba(0,0,0,.1);font-weight:700}

.bg-primary{background-color:#23ddbd!important}

.text-primary{color:#1d809f!important}

.text-secondary{color:#ecb807!important}


/* Bordered form */
form {
	box-sizing: border-box;
	margin: auto;
	border-radius: 10px;
    border: 3px solid #23ddbd;
    padding: 20px; 
    max-width: 500px;
    height: auto;
   	background-color: #FFFFFF;
}






/* Full-width inputs */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}


/* Set a style for all buttons */
button {
    background-color: #23ddbd;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}




/* Add a hover effect for buttons */
button:hover {
    opacity: 0.6;
}


/* Extra style for the cancel button (red) */
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}


/* Center the image inside this container */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}


/*  imge left inside this container */
.imgcontainer2 {
	float: left;
}


/* image container height */
.imgcontainer2 img {
	max-height: 100px;
	max-width: 370px;
}

/* Center the image inside this container */
.imgcontainer4 {
    text-align: center;
	margin: 0px 0 0px 0;
	
}

/* left-Center the image inside this container */
.imgcontainer5 {
    text-align: center;
	margin: 0px 0 0px 0;
	
}

/* left-Center the image inside this container */
.imgcontainer6 {
    text-align: center;
	margin: 60px 30px 40px 0px;
	
	
}

/* Avatar image */
img.avatar {
    width: 65%;
}

/* Avatar 1 image */
img.avatar1 {
    width: 95%;
}

/* Avatar 2 image */
img.avatar2 {
	width: 100%;
	
}

/* Avatar 3 image */
img.avatar3 {
	width: 35%;
	
}


/* Add padding to containers */
.container {
    padding: 16px;
}


/* The "Forgot password" text */
span.psw {
    float: right;
    padding-top: 16px;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 200px) {
    span.psw {
        display: block;
        float: none;
    }

    .cancelbtn {
        width: 100%;
    }

}


/* Main Box */
.topbox {
	box-sizing: border-box;
	margin: auto;
	border-radius: 10px;
    border: 3px solid #23ddbd;
    padding: 20px; 
   
    height: auto;
   	background-color: #FFFFFF;
}


.customheight{
	min-height: 100px;
}


.logo-link{
	padding: 0px;
}


/*  image left inside this container */
.imgcontainer3A {
	height: 100%;
}

/*  image left inside this container */
.imgcontainer3B {
	margin: auto;
}


/* image container height */
.imgcontainer3B img {
	max-width: 100%;
	height: auto-center;
}


/* Mid Box */
.midbox {
	box-sizing: border-box;
	margin: auto;
    padding: 20px; 
   
    height: auto;
   	background-color: #FFFFFF;
}


/* Card */
.card {
  height: 100%;
  border-radius: 10px;
  border: 3px solid #23ddbd;
}


/* Context Boxes */
.contextbox {
  height: 100%;
  border-radius: 10px;
  border: 3px solid #23ddbd;
  background-color: #FFFFFF;
}

.contextbox1 {
  min-height: 540px;
  max-height: 100%;
  border-radius: 10px;
  border: 3px solid #23ddbd;
  background-color: #FFFFFF;
}

.contextbox2 {
  min-height: 650px;
  max-height: 100%;
  border-radius: 10px;
  border: 3px solid #343a40;
  background-color: #ffffff;
}


/* icon box custom */
.icon-box-custom img{
	max-width: 100%;
	
}


/* video */

.video{
		position: absolute;
		top: 0;
		left: 0;
		min-width: 100%;
		min-height: 100%;
	}

	
/* banner */
.banner{
    background-size: cover;
	min-height: 900px;
    position: relative;
	top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}


/* mouse */
.mouse {
    width: 25px;
    height: 45px;
    border: 2px solid #fff;
    position: absolute;
    bottom: 40px;
    left: 50%;
    margin-left: -12.5px;
    border-radius: 12px;
}

@-webkit-keyframes rotateplane {
    0%   {top:10px;}

    25%  {top:14px;}

    50%  {top:19px;}

    75%  {top:24px;}

    100% {top:28px;}

}

@-moz-keyframes rotateplane {
    0%   {top:10px;}

    25%  {top:14px;}

    50%  {top:19px;}

    75%  {top:24px;}

    100% {top:28px;}

}

@-o-keyframes rotateplane {
    0%   {top:10px;}

    25%  {top:14px;}

    50%  {top:19px;}

    75%  {top:24px;}

    100% {top:28px;}

}

.mouse::after {
    content: "";
    position: absolute;
    height: 5px;
    width: 5px;
    background-color: #fff;
    border-radius: 100%;
    left: 50%;
    top:10px;
    margin-left: -2.5px;
    transition:all 0.3s ease-in;
 
     -webkit-animation-name: rotateplane; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    animation-name: rotateplane;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

/* full width background */
.fullwidth{
	min-height:50rem;
	position:relative;
	display:table;
	width:100%;
	height:auto;
	padding-top:8rem;
	padding-bottom:8rem;
	
	background:linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 100%),url(../img/support.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover
	}

/* full width background */
.fullwidth3{
	min-height:50rem;
	position:relative;
	display:table;
	width:100%;
	height:auto;
	padding-top:8rem;
	padding-bottom:8rem;
	
	background:linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 100%),url(../img/chep.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover
	}

.fullwidth1{
	min-height:50rem;
	position:relative;
	display:table;
	width:100%;
	height:auto;
	padding-top:0rem;
	padding-bottom:0rem;
	
	background:linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 100%);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover
	}
	
/* Service Box */
.service-box{
  
    padding: 60px 30px 80px;
    
}

/* Price Style */
.amount{
    font-size: 70px;
	font-weight: bold;
	color: #23ddbd;
	
}

.btn-primary1{
	background-color:#23ddbd!important;
	border-color:#23ddbd!important;
	color:#fff!important;
	min-height:100%;
	min-width:100%;
	
	}

.btn-primary1:active,
.btn-primary1:focus,
.btn-primary1:hover{
	background-color:#29a38e!important;
	border-color:#29a38e!important
	}

	
.btn-primary2{
	background-color:#808080!important;
	border-color:#808080!important;
	color:#fff!important;
	padding: 10px;
	margin: 20px;
	min-width: 100px
	}

.btn-primary2:active,
.btn-primary2:focus,
.btn-primary2:hover{
	background-color:#29a38e!important;
	border-color:#29a38e!important
	}

	.content-section2{
		padding-top:1rem;
		padding-bottom:1rem;
		min-width: 992px
	}

	.content-section2-heading h2{font-size:3rem}
	
	.content-section2-heading h3{font-size:1rem;text-transform:uppercase}
	h1,h2,h3,h4,h5,h6{font-weight:700}
	

	.topcontainer{
		margin-left: 10px;
		min-width: 100%;
		padding-bottom: 0px;
		padding-top: 0px;
		background: rgba(255, 255, 255, 0.671);
		
	}

	.topcontainer > div{
		background: none;		
	}

	#pricebox{
		margin: 10px;
		height: 250px;
		background-color: #343a40;
		position: relative;
		overflow: hidden;
		
	}
	
	#pricebox div {
		position: absolute;
		width: 350px;
		height: 350px;
		border-radius: 100%;
		background-color:#f8f9fa;
		
	}
	
	.top { top: -220px; }
	.bottom { bottom: -220px; }
	.left { left: -175px; }
	.right { right: -175px; }


	
	/* Style inputs */
	input[type=text], select, textarea {
		width: 100%;
		padding: 12px;
		border: 1px solid #ccc;
		margin-top: 6px;
		margin-bottom: 16px;
		resize: vertical;
	}
	
	input[type=submit] {
		background-color: #23ddbd;
		color: white;
		padding: 12px 20px;
		border: none;
		cursor: pointer;
	}
	
	input[type=submit]:hover {
		background-color: #45a049;
	}
	

	
	/* Create two columns that float next to eachother */
	.column {
		float: left;
		width: 50%;
		margin-top: 6px;
		padding: 20px;
	}
	
	/* Clear floats after the columns */
	.row:after {
		content: "";
		display: table;
		clear: both;
	}
	
	/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 600px) {
		.column, input[type=submit] {
			width: 100%;
			margin-top: 0;
		}
	}

	.icon-box i {
    color: #23ddbd;
    font-size: 65px;
}
	.icon-box-custom img{
		max-width: 75%;
	}
.ser-text {
    font-size: 24px;
}
.icon-box, .icon-text {
    padding: 20px 0px 0px;
}

.btn-buy-holder{
	background-color:#23ddbd!important;
	border-color:#23ddbd!important;
	color:#fff!important;
	padding: 10px;
	margin: 0px;
	width: 100%;
}