/*------------------------------------------------------------------
[Table of contents]
	1.  Body
	2.  Common Class
	3.  Home Section
	4.  About Section
	5.  News Section
	6.  Portfolio Section
	7.  Service Section
	8.  Blog Section
	9.  Contact Section
	10. Single Blog
	11. Domains
	12. Tables
	13. Accordion
	14. VPS
	15. Responsive
-------------------------------------------------------------------*/
@font-face {
  font-family: 'Vazirmatn', Arial, sans-serif;
  src: url('../fonts/Roboto-Regular-webfont.html') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Vazirmatn', Arial, sans-serif;
  src: url('../fonts/Roboto-Bold-webfont.html') format('woff');
  font-weight: normal;
  font-style: normal;
}

/*----------------------
	1. Body
------------------------*/
*{margin:0;padding:0;}
html, body {
  color: #fff;
  background: #15212a;
  font-family: 'Vazirmatn', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  height: 100%;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  width: 100%;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 10px;
  font-family: 'Vazirmatn', Arial, sans-serif;
}
li,a,span,p {
  font-family: 'Roboto-Regular';
}
p:last-child {
  margin-bottom: 0;
}
span, a, button, button.button, img, input, .owl-nav > div {
  transition: all 0.3s ease 0s;
}
a:focus {
  color: inherit;
  outline: none;
  text-decoration: none;
}
a{
  color: #fff;
}
a, a:hover {
  text-decoration: none;
}
p{
    text-align:justify;
}
ul, ol {
  list-style: none;
  margin: 0;
}
img {
  max-width:100%;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  opacity: 1;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  opacity: 1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  opacity: 1;
}
.button{
  background-color: #ecf0f1;
  border: 2px solid #405715;
  text-transform: uppercase;
  padding: 4px 25px;
  color: #000;
  direction: rtl;
}
.button i{
  position: relative;
  top: 2px;
}
.button:hover{
  background-color: #405715;
  color: #fff;
}
.scroll-to-top {
    background-color: #0000ff;
    display: none;
    width: 40px;
    height: 40px;
    font-size: 25px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    position: fixed;
    left: 20px;
    bottom: 45px;
    z-index: 999;
    border: none;
    border-radius: 50%;
    -webkit-transition: display 0.7s linear;
    -o-transition: display 0.7s linear;
    transition: display 0.7s linear;
}

.scroll-to-top i{
    position: relative;
    top: 3px;
}
/*----------------------
	2. Common Class
------------------------*/
.no-padding{
    padding:0px;
}
.no-border{
    border:none;
}
.fix {
  overflow:hidden;
}
.ps-scrollbar-x-rail,
.ps-scrollbar-y-rail {
  display: none !important;
}
/* Preloader */
#loading{
	background-color: #fff;
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 999;
	margin-top: 0px;
	top: 0px;
}
.loading-center{
	width: 100%;
	height: 100%;
	position: relative;
	}
.loading-center-absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 200px;
	width: 200px;
	margin-top: -100px;
	margin-left: -100px;
	-ms-transform: rotate(-135deg); 
   	-webkit-transform: rotate(-135deg); 
    transform: rotate(-135deg);
}
.object{
	-moz-border-radius: 50% 50% 50% 50%;
	-webkit-border-radius: 50% 50% 50% 50%;
	border-radius: 50% 50% 50% 50%;
	position: absolute;
	border-bottom: 5px solid transparent;
	border-right: 5px solid transparent;
	
	-webkit-animation: animate 2s infinite;
	animation: animate 2s infinite;	
}
.object_one{
	left: 75px;
	top: 75px;
	width: 50px;
	height: 50px;
	border-top: 5px solid #0063B1;
	border-left:  5px solid #0063B1;
}						
.object_two{
	left: 65px;
	top: 65px;
	width: 70px;
	height: 70px;
	-webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
	border-top: 5px solid #6B69D6;
	border-left:  5px solid #6B69D6;
}	
.object_three{
	left: 55px;
	top: 55px;
	width: 90px;
	height: 90px;
	-webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
	border-top: 5px solid #C30052;
	border-left:  5px solid #C30052;
}
.object_four{
	left: 45px;
	top: 45px;
	width: 110px;
	height: 110px;
	-webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
	border-top: 5px solid #27AE5F;
	border-left:  5px solid #27AE5F;
}
.object-center{
    margin: 0 auto;
}
@-webkit-keyframes animate {
50% {
	-ms-transform: rotate(360deg) scale(0.8); 
   	-webkit-transform: rotate(360deg) scale(0.8); 
    transform: rotate(360deg) scale(0.8); 
  }
}

@keyframes animate {
50% {
	-ms-transform: rotate(360deg) scale(0.8); 
   	-webkit-transform: rotate(360deg) scale(0.8); 
    transform: rotate(360deg) scale(0.8); 
  }	
}
.strikethrough {
    background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
}
.text-red{
    color: #b31010;
}
/*--
	Menu
----------------------*/
.navbar {
  background-color: #ecf0f1;
  margin-bottom: 0;
}

.navbar .logo{
  margin: 10px;
}

.navbar-collapse {
  background-color: #3498db;
  position: absolute;
  left: -1px;
  right: -1px;
  z-index: 16;
  margin: 0 !important;
}

.navbar-collapse.in {
  display: inline-block;
  overflow-y: visible;
}

.nav {
  padding: 10px 0;
  float: none;
}

.navbar-nav > li > a {
  font-size: 21px;
  color: #0c151c;
}

.nav > li > a:focus, .nav > li > a:hover {
  background-color: transparent;
  color: #0c151c;
}

.navbar-nav > li > a > i{
  position: relative;
  top: 4px;
  left: 6px;
}

.navbar-nav > li.mobile{
  display: none;
}

.nav > li {
  float: none;
  display: inline-block;
}

.navbar-toggle {
  background-color: #ecf0f1;
  border-color: #ecf0f1;
}

.navbar-toggle .icon-bar {
  background-color: #000;
}

.quick-nav{
  float: left;
  margin-top: 5px;
  background-color: transparent !important;
}

#domain .row{
    padding: 40px 0;
}

#domain .header{
    margin-bottom: 20px;
}

#domain .header .image{
    height: 90px;
    line-height: 90px;
}

#domain .header .image img{
    width: 64px;
    margin-bottom: 10px;
    vertical-align: middle;
}

#domain .price, #domain .price li{
    direction: ltr;
    margin-top: 10px;
    text-align: center;
}

#domain .price li{
    background-color: #a5215e;
    color: #fff;
    font-size: 17px;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 8px;
    cursor: pointer;
    -webkit-transition: border-radius 1s;
    transition: border-radius 1s;
}

#domain .price li:hover{
    border-radius: 0;
}

#domain .carousel-indicators{
    position: initial;
    width: 100%;
    margin: 10px 0;
}

#domain .carousel-indicators li{
    border: 2px solid #a5215e;
}

#domain .carousel-indicators .active{
    background-color: #a5215e;
}

#services{
    background-color: #15212a;
    background-image: url("../img/background/cpupath.svg");
    background-repeat: repeat;
}

#services .item{
  margin-bottom: 30px;
}

.service{
  background-color: #ecf0f1;
  color: #000;
  padding: 20px 30px;
  border-radius: 10px;
}

.service .header{
  margin-bottom: 20px;
}

.service .header .image{
  height: 90px;
  line-height: 90px;
}

.service .header .image img{
  width: 64px;
  margin-bottom: 10px;
  vertical-align: middle;
}

.service .header h4{
  font-size: 19px;
}

.service .content i{
  font-size: 17px;
  margin-left: 5px;
}

.service .content p:last-child{
  padding-top: 15px;
}

.yellow-background{
  color: #000;
  background-color: #ecf0f1;
    background-image: url("../img/background/motpath.svg");
    background-repeat: repeat;
}

.yellow-background .section-title{
  border-right-color: #000;
}

.yellow-background .section-title h1::before{
  background-color: #000;
}

#features .item{
    margin-bottom: 30px;
}

.feature{
    background-color: #fff;
    color: #000;
    padding: 20px 30px;
    border-radius: 10px;
}

.feature .header{
    margin-bottom: 20px;
}

.feature .header .image{
    height: 90px;
    line-height: 90px;
}

.feature .header .image img{
    width: 64px;
    margin-bottom: 10px;
    vertical-align: middle;
}

.feature .content p{
    text-align: center;
    color: #6a6a6a;
}

footer{
  padding: 30px;
  background-color: #0c151c;
}

footer .contact-info a{
    color: #fff;
}
footer .contact-info a:hover, footer .contact-info a:focus{
    color: #fff;
}

footer .social{
    margin-bottom: 10px;
}

footer .social i{
    background-color: #a5215e;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    -webkit-transition: border-radius 1s;
    transition: border-radius 1s;
}
footer .social i:hover{
    border-radius: 50%;
}

footer .awards img{
    height: 100px;
}
/* Section, Page, Table & Table Cell */
.section, .page {
  bottom: 0;
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
  transition: all 1s ease 0s;
  z-index: 1;
}
.section.active, .page {
  opacity: 1;
  z-index: 11;
}
.table, .table-cell {
  display: table;
  height: 100%;
  margin: 0;
  width: 100%;
}
.table-cell {
  display: table-cell;
  vertical-align: middle;
}
.section-wrapper, .page-wrapper {
  padding-bottom: 100px;
  padding-top: 100px;
}
/* Close Section */
.close-section {
  cursor: pointer;
  display: block;
  height: 60px;
  opacity: 0;
  position: fixed;
  right: 20px;
  text-align: center;
  top: 0;
  width: 60px;
  z-index: -99999;
}
.close-section i {
  display: block;
  font-size: 22px;
  line-height: 60px;
}
.close-section.active {
  opacity: 1;
  z-index: 111;
}
/* Section Title */
.section-title {
  border-left: 5px solid #fff;
  display: block;
  float: left;
  margin-bottom: 70px;
  padding: 10px 15px;
  width: 100%;
}
.section-title h1 {
  float: left;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 36px;
  margin-bottom: 0;
  margin-right: 30px;
  padding-right: 30px;
  position: relative;
}
.section-title h1::before {
  background: #fff none repeat scroll 0 0;
  content: "";
  height: 16px;
  position: absolute;
  right: 0;
  top: 12px;
  width: 2px;
}
.section-title p {
  float: left;
  font-size: 20px;
  font-weight: 500;
  line-height: 36px;
}
/* Sub Section Title */
.title-label-2 {
  border-left: 3px solid #000;
  display: block;
  float: left;
  margin-bottom: 40px;
  padding: 5px 10px;
  width: 100%;
}
.title-label-2 i {
  display: block;
  float: left;
  font-size: 24px;
  line-height: 28px;
  margin-right: 10px;
  opacity: 0.4;
}
.title-label-2 i.devicons{
    font-size:36px;
}
.title-label-2 h2 {
  font-size: 18px;
  line-height: 30px;
  margin-bottom: 0;
  overflow: hidden;
}
/* Owl Nav */
.owl-nav {
  position: absolute;
  left: 0;
  top: -75px;
}
.owl-nav > div {
  cursor: pointer;
  display: block;
  float: left;
  height: 30px;
  line-height: 28px;
  margin-left: 5px;
  text-align: center;
  width: 30px;
}
.owl-nav > div i{}
.owl-nav > div:hover {
  opacity: .5;
}
.slider {
    direction: ltr;
    -webkit-appearance: none;
    height: 15px;
    background: #485e1f;
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    border-radius: 0;
    background: #485e1f;
    cursor: pointer;
}
.slider::-moz-range-thumb {
    width: 17px;
    height: 17px;
    border-radius: 0;
    background: #a5215e;
    border-color: #a5215e;
    cursor: pointer;
}
/*----------------------
	3. Home Section
------------------------*/
.home-wrapper {
  display: inline-block;
}
/* Hero Content */
.hero-content {
  background: #28a717 none repeat scroll 0 0;
  padding: 30px 15px;
}
.hero-content img {
  border: 10px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  height: 220px;
  width: 220px;
}
.hero-content .caption{}
.hero-content .caption h1 {
  color: #fff;
  font-size: 19px;
  letter-spacing: 0;
  margin-top: 34px;
  text-transform: capitalize;
}
.hero-content .caption span {
  color: #fff;
  display: block;
  font-size: 20px;
  letter-spacing: 0;
  margin-bottom: 16px;
  text-transform: capitalize;
}
.hero-content .social {}
.hero-content .social a {
  color: #fff;
  display: inline-block;
  font-size: 14px;
  line-height: 30px;
  margin: 0 2px;
  padding: 0 5px;
}
.hero-content .social a:hover {
  opacity: .5;
}
.hero-content .social a i{}
.home-wrapper .tile{
    padding: 15px 15px;
    margin:5px;
}
.home-wrapper .tile div.title {
    margin-bottom:0px;
    text-align:left;
}
.home-wrapper .tile-discount {
    background-color: #AA00FF;
}
.home-wrapper .tile-discount .code{
    padding-top:5px;
    /*font-size:28px;*/
    /*letter-spacing:1.5px;*/
    line-height: 1.7;
}
.home-wrapper .tile-domain{
    background-color:#FA6800;
}

.home-wrapper .footer, .home-wrapper .footer p{
    margin-top:10px;
}
/*----------------------
	4. About Section
------------------------*/
/* About Image */
.about-image img {
  display: block;
  height: 250px;
  margin: 0 auto;
  width: 250px;
}
/* About Content */
.about-me {
  margin-top: 25px;
}
.about-me h2 {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 20px;
  text-transform: capitalize;
}
.about-me h2 span {
  font-size: 25px;
  font-weight: 700;
}
.about-me p {
  margin-bottom: 20px;
}
.about-me a.button {
  border: 1px solid #fff;
  display: block;
  float: right;
  margin-left: 30px;
  padding: 5px 13px 5px 15px;
}
.about-me a.button:last-child {
  margin-left: 0;
}
.about-me a.button i {
  margin-left: 15px;
}
.about-me a.button span{}
.about-me a.button:hover {
  background: #fff;
  color: #0063B1;
}
/* About Bottom */
.about-bottom{
  margin-top: 50px;
}
.about-bottom > div:nth-child(2n+1) {
  clear: both;
}
/* Personal Information */
.per-info {
  margin-top: 70px;
}
.per-info ul {
  overflow: hidden;
  width: 100%;
}
.per-info ul li {
  line-height: 35px;
  margin-bottom: 5px;
}
.per-info ul li:last-child {
  margin-bottom: 0;
}
.per-info ul li span {
  display: block;
  float: right;
  margin-left: 30px;
  position: relative;
  text-transform: uppercase;
  width: 100px;

}
.per-info ul li span::before {
  content: ":";
  font-size: 20px;
  position: absolute;
  left: 0;
  top: -4px;
}
/* Skills */
.skills {
  margin-top: 70px;
}
.skill-slider {
  float: left;
}
/* SIngle Skill */
.sin-skill {
  display: block;
}
.sin-skill .chart {
  display: block;
  height: 120px;
  margin: 0 auto;
  position: relative;
  width: 120px;
}
.sin-skill .chart .percent {
  background: #fff none repeat scroll 0 0;
  border-radius: 50%;
  color: #0063b1;
  display: block;
  font-size: 20px;
  height: 90px;
  left: 15px;
  line-height: 90px;
  position: absolute;
  text-align: center;
  top: 15px;
  width: 90px;
}
.sin-skill h3 {
  display: block;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 0;
  margin-top: 15px;
  text-align: center;
  text-transform: uppercase;
}
/* Hobbies */
.hobbies {
  margin-top: 70px;
}
.hobbies ul {
  display: block;
  margin: 0 -10px -10px;
  overflow: hidden;
  width: 100%;
}
.hobbies ul li {
  display: block;
  float: right;
  padding: 10px;
  width: 33.33%;
}
.hobbies ul li .hobbie {
  background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
  height: 85px;
  position: relative;
  text-align: center;
  cursor: pointer;
}
.hobbies ul li .hobbie i {
  display: block;
  font-size: 30px;
  line-height: 85px;
}
.hobbies ul li .hobbie span {
  display: block;
  left: 0;
  line-height: 85px;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 0;
  transform: scale(0);
}
.hobbies ul li .hobbie:hover i {
  transform: scale(0);
}
.hobbies ul li .hobbie:hover span {
  transform: scale(1);
}
/* Testmonial */
.testimonial {
  margin-top: 70px;
}
.testimonial-slider {
  float: left;
  width: 100%;
}
/* Single Testmonial */
.sin-test{}
.sin-test p {
  font-size: 20px;
  font-style: italic;
}
.sin-test .image {
  margin-top: 30px;
  text-align: right;
}
.sin-test .image img {
  background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
  float: right;
  margin-left: 15px;
  padding: 5px;
  width: 65px;
}
.sin-test .image h4 {
  display: block;
  font-size: 20px;
  font-weight: 100;
  margin-bottom: 5px;
  margin-top: 10px;
  overflow: hidden;
  text-transform: capitalize;
}
.sin-test .image span {
  font-weight: 300;
  font-size: 18px;
}
/*----------------------
	5. News Section
------------------------*/
.news-wrapper {
  width: 100%;
}
/* Single News */
.single-news {
  margin-bottom: 40px;
  padding: 0 50px 0 30px;
  position: relative;
  width: 100%;
}
.single-news::before {
  background: #fff none repeat scroll 0 0;
  content: "";
  height: 150%;
  left: 10px;
  margin-top: 15px;
  position: absolute;
  top: -150%;
  width: 2px;
}
.single-news::after {
  background: #fff none repeat scroll 0 0;
  border: 5px solid #2d7d9a;
  border-radius: 50px;
  content: "";
  height: 20px;
  left: 1px;
  position: absolute;
  top: 0;
  width: 20px;
  z-index: 1;
}
.single-news:last-child {
  margin-bottom: 0;
}
.single-news .date {
  background: #fff none repeat scroll 0 0;
  color: #2d7d9a;
  display: block;
  float: left;
  font-size: 15px;
  font-weight: 600;
  line-height: 16px;
  margin-bottom: 10px;
  margin-top: 9px;
  padding: 4px 15px;
  position: relative;
}
.single-news .date::before {
  border-bottom: 10px solid transparent;
  border-right: 10px solid #fff;
  border-left: 10px solid transparent;
  content: "";
  height: 0;
  left: -20px;
  position: absolute;
  top: 0;
  width: 0;
}
.single-news .details {
  width: 100%;
}
.single-news h3 {
  font-size: 20px;
  font-weight: 400;
}
.single-news h3 span {
  font-weight: 700;
  letter-spacing: 0;
}
.single-news p {}
/*----------------------
	6. Portfolio Section
------------------------*/
.portfolio-wrapper{}
/* Single Portfolio */
.single-portfolio {
  padding: 0;
}
.portfolio-hover {
  background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
  bottom: 0;
  color: #fff;
  left: 0;
  opacity: 0;
  padding: 30px;
  position: absolute;
  right: 0;
  top: 0;
}
.single-portfolio:hover .portfolio-hover {
  opacity: 1;
}
.portfolio-hover:hover {
  color: #fff;
}
.portfolio-hover h2 {
  font-size: 22px;
  font-weight: 400;
  margin-top: 100px;
  opacity: 0;
  text-transform: uppercase;
  transition: all 0.6s ease 0s;
}
.portfolio-hover p {
  display: block;
  margin-top: 40px;
  opacity: 0;
  text-transform: capitalize;
  transition: all 1s ease 0s;
}
.single-portfolio:hover .portfolio-hover h2 {
  margin-top: 60px;
  opacity: 1;
}
.single-portfolio:hover .portfolio-hover p {
  margin-top: 0px;
  opacity: 1;
}
/*----------------------
	7. Service Section
------------------------*/
.service-wrapper{}
/* Single Service */
.single-service {
  margin-bottom: 30px;
}
.single-service .head {
  margin-bottom: 10px;
}
.single-service .head i {
  border: 1px solid #fff;
  display: block;
  float: right;
  font-size: 18px;
  line-height: 34px;
  margin-left: 15px;
  text-align: center;
  width: 36px;
}
.single-service:hover .head i {
  background: #fff;
  border: 1px solid #fff;
  color: #27AE5F;
}
.single-service .head h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 36px;
  margin: 0;
  overflow: hidden;
  text-transform: uppercase;
}
.single-service .content {}
.single-service .content p {
  line-height: 22px;
}
/*----------------------
	8. Blog Section
------------------------*/
.blog-wrapper{}
/* Single Blog */
.sin-blog {
  margin-top: 30px;
  position: relative;
}
.sin-blog:nth-child(1), .sin-blog:nth-child(2) {
  margin-top: 0;
}
/* Blog Image */
.blog-image {
  display: block;
  overflow: hidden;
  position: relative;
}
.blog-image::before {
  background: #000 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.3;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.blog-image img {
  -webkit-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
  width: 100%;
}
.sin-blog:hover .blog-image::before {
  opacity: 0.6;
}
.sin-blog:hover .blog-image img {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}
/* Blog Content */
.blog-content {
  bottom: 0;
  right: 15px;
  padding: 30px;
  position: absolute;
  z-index: 2;
}
.blog-content h2 {
  font-size: 24px;
  font-weight: 400;
}
.blog-content h2 a {
  color: inherit;
}
.blog-content h2 a:hover {
  color: #6B69D6;
}
/* Blog Meta */
.blog-content .blog-meta{}
.blog-content .blog-meta a, .blog-content .blog-meta span {
  display: block;
  float: right;
  margin-left: 30px;
}
.blog-content .blog-meta a i, .blog-content .blog-meta span i {
  margin-left: 5px;
}
.blog-content .blog-meta a:hover {
  color: #6B69D6;
}
.blog-content .blog-meta span{}
.blog-content .blog-meta span i{}
/*----------------------
	9. Contact Section
------------------------*/
.contact-wrapper{}
/* Contact Map */
#contact-map {
  height: 350px;
  margin-bottom: 70px;
  width: 100%;
  background: #fff;
}
/* Contact Information */
.contact-info{}
.contact-info p {
  margin-bottom: 20px;
  overflow: hidden;
  width: 100%;
}
.contact-info p i {
  display: block;
  float: left;
  line-height: 24px;
  margin-right: 10px;
  font-size: 20px;
  width: 24px;
}
.contact-info a{
    color: #000;
}
.contact-info a:hover, .contact-info a:focus{
    color: #000;
}
.contact-info .social{}
.contact-info .social a {
  color: #fff;
  display: inline-block;
  font-size: 14px;
  line-height: 30px;
  margin: 0 2px;
  padding: 0 5px;
  float: left;
}
.contact-info .social a:hover {
  opacity: .5;
}
.contact-info .social a i{}
/* Contact Form */
.contact-form{}
.contact-form form {
  float: left;
  overflow: hidden;
  width: 100%;
}
.contact-form form input[type="text"],
.contact-form form input[type="email"],
.contact-form form textarea {
  background-color: #ecf0f1;
  border: 2px solid #405715;
  color: #000;
  display: block;
  margin-bottom: 15px;
  min-height: 36px;
  padding: 6px 15px;
  width: 100%;
}
.contact-form form textarea {
  height: 80px;
}
.contact-form .result{
    text-align:center;
}
/*----------------------
	10. Single Blog
------------------------*/
.blog-wrapper{}
/* Single Blog */
.single-blog {}
/* Blog Image */
.single-blog-image {
  display: block;
  overflow: hidden;
}
.single-blog-image img {
  width: 100%;
}
/* Blog Content */
.single-blog-content {
  margin-bottom: 20px;
  padding: 30px;
}
.single-blog-content h2 {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 15px;
}
/* Blog Meta */
.single-blog-content .blog-meta {
  margin-bottom: 15px;
}
.single-blog-content .blog-meta a, .single-blog-content .blog-meta span {
  display: block;
  float: right;
  margin-left: 30px;
}
.single-blog-content .blog-meta a i, .single-blog-content .blog-meta span i {
  margin-left: 5px;
}
.single-blog-content .blog-meta a:hover {
  color: inherit;
  text-decoration: underline;
}
.single-blog-content .blog-meta span{}
.single-blog-content .blog-meta span i{}
.single-blog-content p {
  margin-bottom: 15px;
}
.single-blog-content p:last-child {
  margin-bottom: 0;
}
/* Blog Comments */
.comment-wrapper {
  padding: 0 30px;
  margin-bottom: 50px;
}
.comment-wrapper h2 {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 30px;
}
.comment-list{}
.sin-comment {
  margin-bottom: 50px;
}
.sin-comment:last-child {
  margin-bottom: 0;
}
.sin-comment.child-comment {
  padding-right: 100px;
}
.comment-avatar {
  border: 5px solid rgba(0, 0, 0, 0.3);
  border-radius: 50px;
  float: right;
  margin-left: 20px;
  overflow: hidden;
  width: 80px;
}
.comment-avatar img {
  width: 100%;
}
.comment-content {
  position: relative;
}
.author-name {
  clear: both;
  display: block;
  float: right;
  font-weight: 600;
  line-height: 15px;
  margin-bottom: 5px;
}
.author-name:hover {
  color: #fff;
  text-decoration: underline;
}
.comment-reply {
  background-color: rgba(0, 0, 0, 0.3);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  padding: 0 7px;
  position: absolute;
  left: 0;
  text-transform: capitalize;
  top: 0;
}
.comment-reply:hover {
  background-color: #fff;
  color: #6B69D6
}
.comment-time {
  clear: both;
  float: right;
  font-size: 15px;
  margin-bottom: 5px;
}
.comment-content p {
  overflow: hidden;
  width: 100%;
  text-align: right;
}
/* Blog Comment Form */
.comment-form-wrapper {
  padding: 0 30px;
}
.comment-form-wrapper h2 {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 30px;
}
.comment-form{}
.comment-form form {
  float: left;
  overflow: hidden;
  width: 100%;
}
.comment-form form input[type="text"],
.comment-form form input[type="email"],
.comment-form form textarea {
  background-color: transparent;
  border: 1px solid #fff;
  color: #fff;
  display: block;
  margin-bottom: 15px;
  min-height: 36px;
  padding: 6px 15px;
  width: 100%;
}
.comment-form form textarea {
  height: 80px;
}
.comment-form form input[type="submit"] {
  background-color: transparent;
  border: 1px solid #fff;
  height: 36px;
  line-height: 36px;
  padding: 0 30px;
  text-transform: uppercase;
  float: right;
}
.comment-form form input[type="submit"]:hover {
  background-color: #fff;
  color: #6B69D6;
}

/*----------------------
	11. Domains
------------------------*/

.domains-form form {
  overflow: hidden;
  width:100%
}
.domains-form form input,
.domains-form form input,
.domains-form form textarea,
.domains-form form select {
  background-color: transparent;
  border: 2px solid #405715;
  color: #000;
  display: block;
  min-height: 36px;
  padding: 6px 15px;
  height: 38px;
  text-align:center;
}
.domains-form form textarea {
  height: 80px;
}
.domains-form form input[type="text"]{
    direction:ltr;
}
.domains-form form button {
  background-color: transparent;
  border: 2px solid #405715;
  color: #000;
  line-height: 34px;
  padding: 0 30px;
  text-transform: uppercase;
}
.domains-form form input[type="submit"]:hover, .domains-form form button:hover {
  background-color: #405715;
  color: #fff;
}

.domains-form form button i{
    position: relative;
    top: 5px;
}

/*----------------------
	12. Tables
------------------------*/
.table-responsive{
    width: 100%;
    border: none;
}
table.table > thead > tr > th{
    border-bottom: none;
}
table.table > tbody > tr > td{
    border-top: 2px solid #405715;
}
table.table > tbody > tr > td:first-child{
    width: 200px;
}
table th, table td{
    text-align:center;
    background-color: #ecf0f1;
    color:#000;
    margin-bottom: 15px;
    min-height: 36px;
    height: 38px;
}
table tr.buy td:not(:first-child):hover{
    background-color:#405715;
}
table tr.buy td a{
    display:block;
    color: #000;
}
table tr.buy td a i{
    vertical-align:middle;
}
table tr.buy td:hover a{
    color: #fff;
}
table td.row-buy a{
    display:block;
    color: #000;
}
table td.row-buy a i{
    vertical-align:middle;
}
table td.row-buy:hover{
    background-color:#405715;
}
table td.row-buy:hover a{
    color: #fff;
}
@media(max-width:768px){
    table.price th{
        display:none;
    }
    table.price td{
        display: block;
        border:none !important;
        text-align:right;
        margin-bottom:0px;
        padding-right: 15px;
        width: 100% !important;
    }
    table.price td:first-child{
        margin-top:5px;
    }
    table.price td.no-head{
        text-align: center;
        padding: 0;
    }
    table.price td:nth-child(n):before{
        content: attr(data-th)": ";
    }
    table.price td.no-head:before{
        content: "";
    }
    table.price tr{
        border: 2px solid #405715;
    }
    table td.row-buy{
        background-color:#405715;
    }
    table td.row-buy a{
        color: #fff;
        margin: 15px;
        padding: 7px;
    }
}

/*----------------------
	13. Accordion
------------------------*/

.panel, .panel-default > .panel-heading{
    background-color:transparent;
    border: none;
    border-radius:0px;
}
.panel-default > .panel-heading{
    background-color: #485e1f;
    border:2px solid #405715;
}
.panel-default > .panel-collapse{
    background-color: #ecf0f1;
}
.panel-title{
    font-size:inherit;
    color:#FFF;
    cursor:pointer;
}
.panel-title i{
    vertical-align:middle
}
.panel-body{
    padding: 10px 0px 0px 0px;
}

.panel-default > .panel-heading .collapsed span.pull-right i:before{
    content: "\e64b";
    font-family: 'themify';
}

/*----------------------
	14. VPS
------------------------*/

.vps-price-slider ul{
    padding: 10px;
}
.vps-price-slider ul li{
    direction: ltr;
    text-align: left !important;
}
.vps-price-slider ul p{
    direction: ltr;
    text-align: center;
}
.vps-price li{
    text-align: center !important;
}

/*----------------------
	15. Responsive
------------------------*/

/* Large desktop :1200px. */
@media only screen and (min-width: 1200px) {
    .container {
        width: 970px;
    }
}
/* Normal desktop :992px. */
@media only screen and (min-width: 992px) and (max-width: 1169px) {
    .hero-content {
        margin-bottom: 30px;
    }
    .single-portfolio:hover .portfolio-hover h2 {
        margin-top: 45px;
    }

}
@media only screen and (min-width: 991px){
    .navbar{
        height: 170px;
    }
}
/* Tablet desktop :768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .navbar{
        height: 160px;
    }
    .hero-content {
        margin-bottom: 30px;
    }
    .about-image img {
        margin: 0 auto;
    }
    .hobbies ul li {
        width: 20%;
    }
    .resume-wrapper.education {
        margin-bottom: 70px;
    }
    .sin-blog:nth-child(2) {
        margin-top: 30px;
    }

}
/* Large Mobile :480px. */
@media only screen and (max-width: 767px) {
    header{
      height: 200px;
    }

    .navbar-header{
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .navbar-brand img{
      height: 85px;
    }

    .nav {
      background-color: #ecf0f1;
      margin-top: 0;
      margin-bottom: 0;
      left: 0%;
      right: 0%;
    }

    .nav > li.mobile{
      display: block;
    }

    .nav > li {
      display: block;
    }

    .quick-nav{
      display: none;
    }

    .navbar .person {
      position: absolute;
      top: 100px;
    }

    .container {
        width: 390px;
    }
    .section-wrapper, .page-wrapper {
        padding: 70px 0;
    }
    .section-title h1 {
        font-size: 30px;
        line-height: 30px;
        margin-right: 20px;
        padding-right: 20px;
    }
    .section-title h1::before {
        top: 8px;
    }
    .section-title p {
        line-height: 30px;
    }
    .home-wrapper {
        display: block;
        margin: 0 auto;
    }
    .hero-content {
        margin-bottom: 30px;
    }
    .navigation ul {
        margin-left: -10px;
        margin-right: -10px;
    }
    .navigation ul li {
        height: 86px;
        width: 86px;
    }
    .navigation ul li a .icon {
        font-size: 30px;
        line-height: 86px;
    }
    .navigation ul li a .devicons{
        font-size: 45px;
    }
    .navigation ul li a .icon-bg {
        bottom: -50px;
        font-size: 50px;
        height: 50px;
        right: -50px;
        width: 50px;
    }
    .navigation ul li a .text {
        top: 0px;
        font-size: 18px;
        line-height: 86px;
    }
    .about-image img {
        height: 200px;
        width: 200px;
        margin: 0 auto;
    }
    .resume-wrapper.education {
        margin-bottom: 70px;
    }
    .single-resume {
        padding: 0 50px 0 0;
    }
    .single-portfolio:hover .portfolio-hover h2 {
        margin-top: 80px;
    }
    .single-service:last-child {
        margin-bottom: 0 ;
    }
    .sin-blog:nth-child(2) {
        margin-top: 30px;
    }
    footer .awards {
        margin: 20px 0;
    }
    .single-blog-content {
        padding: 30px 0;
    }
    .comment-wrapper, .comment-form-wrapper {
        padding: 0;
    }
    .sin-comment.child-comment {
        padding-right: 0;
    }
    form input, form select{
        margin-bottom: 15px;
    }
}
/* small mobile :320px. */
@media only screen and (max-width: 479px) {
    .container {
        width: 275px;
    }
    .section-title h1 {
        display: block;
        float: none;
        font-size: 24px;
        line-height: 24px;
        margin: 0;
        padding: 0;
    }
    .section-title h1::before {
        display: none;
    }
    .section-title p {
        font-size: 17px;
        line-height: 24px;
    }
    .title-label-2 i {
        font-size: 20px;
        line-height: 24px;
    }
    .title-label-2 h2 {
        font-size: 20px;
        line-height: 24px;
    }
    .about-me a.button + a.button {
        margin-top: 15px;
    }
    .per-info ul li span {
        margin-right: 20px;
        width: 85px;
    }
    .hobbies ul li {
        width: 100%;
    }
    .portfolio-hover h2 {
        font-size: 18px;
        margin-top: 50px;
    }
    .single-portfolio:hover .portfolio-hover h2 {
        margin-top: 30px;
    }
    .portfolio-hover p {
        margin-top: 20px;
    }
    .blog-content {
        padding: 10px 15px;
    }
    .blog-content h2 {
        font-size: 18px;
    }
    .blog-content .blog-meta a, .blog-content .blog-meta span {
        font-size: 17px;
    }
    .single-blog-content h2 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .single-blog-content .blog-meta a, .single-blog-content .blog-meta span {
        font-size: 17px;
        margin-right: 10px;
    }
    .comment-wrapper h2, .comment-form-wrapper h2 {
        font-size: 18px;
    }
    .comment-avatar {
        float: none;
        margin-bottom: 20px;
        margin-right: 0;
    }

}