// START EDIT OR UPDATE THIS FILE

img{max-width:100%;}

/* ------------------ a links --------------------- */
a { text-decoration: none; transition:all .3s;  }
a:hover{text-decoration: none; color:$accent; transition:all .3s;  }
a:focus {   outline:none;}

/* ============ text styles and paragraph ==============  */
body, form {font-size:14px; font-family:'Roboto', Arial, Helvetica; }
p{padding:0px; margin:0; margin-bottom:10px;}
ol, ul, li{margin: 0; padding: 0; }
.panel p{margin-bottom:7px}

/* ================== heading texts ==================  */
h1,h2,h3,h4,h5,h6 {margin:0; font-weight:normal}


.section-heading{text-align:center; margin-bottom:0px;}
.section-title{font-size:36px; font-weight:400; color:$primary;
	span{color:$accent;}
}

.title-text{padding-bottom:10px; padding-top:15px; }
	.title-text:first-child{padding-top:0;}

/* ================== common sections ==================  */
.section-modify{ background-color:$bg;
	.inner-block{background-color:#d3e8e7; border-radius:0 0 10px 10px; padding:20px;}
}
.section-content{background-color:$bg; padding-top:30px;}


/* ================ heading separator ================ */
.separator{margin:20px 0; max-width:300px; display: inline-block; position: relative;
	i{color:$element;}
}
.separator::before, .separator::after {
    content: "";
    position: absolute;
    border-bottom: 1px solid $element;
    top: 12px;
    width: 100px;
}
.separator::before{right:100%; margin-right: 15px;}
.separator::after{left:100%; margin-left: 15px;}

/* ================ Intro text ================ */
.intro-text-wrap{ color:#fff; text-align:center; margin-top:60px; text-shadow:0 0 7px rgba(#666, .5);
	.intro-title{font-size:32px; margin-bottom:15px; }
	.intro-lead{ font-size:18px; margin-bottom:15px;}
	i{font-size:42px;}
}

.spinner{width:40%;}

/* --------------------- blok ---------------------- */
.blok-header{padding:14px 15px; @include linearGradient($lightblue, #0899af); color:#fff; height:42px; border-radius:$radius-sm; margin-bottom:15px;
	a{color:rgba(#fff, .75)}
	.title{font-size:15px;}
	.pull-right{margin-top:-3px;}
}



/* ---- scroll top btn ---- */
.topHome {position: fixed; color:#fff;  background-color:rgba(0,0,0,.3); padding:7px; bottom:1%;    right: 1%;z-index: 5;}

/* ---- fixed widget btn ---- */
.widget-contact{z-index:9999; box-shadow:0 0 7px rgba(0,0,0,.5);
position:fixed;  right:-300px; width:300px; top:50%; transform:translateY(-50%);
border:1px solid #ddd; background-color:#fff;
}
.widget-contact.active{ animation: movement 500ms; animation-fill-mode: forwards;}
.widget-contact.hidewidget{ animation: backmove 500ms;}
.btn-widget-contact{box-shadow:0 0 7px rgba(0,0,0,.5); cursor:pointer;
	position:absolute; right:100%; top:0;
	padding:7px; width:40px; height:40px; background-color:$primary2; color:#fff; border-radius:6px 0 0 6px;
}
.widget-contact-body{padding:15px; position:relative}
@keyframes movement{
  from{right:-300px;}
  to{right:0px;}
}
@keyframes backmove{
  from{right:0px;}
  to{right:-300px;}
}


/* ---- fixed widget btn ---- */
.widget-feedback{z-index:9999; box-shadow:0 0 15px rgba(0,0,0,.5); position:fixed;  left:-500px; width:500px; top:50%; transform:translateY(-50%); 
border:1px solid #ddd; background-color:#fff;
}
.widget-feedback.active{animation: movement_two 500ms; animation-fill-mode: forwards; }
.widget-feedback.hidewidget2{animation: backmove_two 500ms; animation-fill-mode: forwards; }

.btn-widget-feedback{box-shadow:0 0 7px rgba(0,0,0,.5); cursor:pointer; text-align:center;
	position:absolute; left:463px; top:220px;
	padding:7px 15px;  height:40px; width:110px; background-color:$primary; color:#fff; border-radius:0 0 6px 6px;
}
.widget-feedback-body{padding:30px; position:relative}

@keyframes movement_two{
  from{left:-500px;}
  to{left:0px;}
}

@keyframes backmove_two{
  from{left:0px}
  to{left:-500px}
}

/* ================== SECT-FEATURES ==================  */
.section-page-content{ padding-top:30px; }


/* ================== blog post listng ================ */
.post-list{margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #ccc;
	.title{margin-bottom:10px;}
	.meta{padding-bottom:5px;}
	p {text-indent:0; padding:0;}
	.img-holder{overflow:hidden;text-align:center; float:left; margin-right:15px;}
	img{width:250px; height:180px; object-fit: cover; padding:2px; background-color: #FFF; border: 1px solid #ddd; }
}

/* ================== single article ================ */
.article{
	p{line-height:1.6; }
	img{vertical-align:baseline; margin-top:10px; margin-bottom:10px; border:1px solid #ddd; background-color:#fff; padding:3px; }
	img[align='left'], img.pull-left{margin-right:15px;}
	img[align='right'], img.pull-right{margin-left:15px;}
	 ul {margin:15px; }
	 ul ul {margin:7px; margin-left:30px;}
}

/* ================== my tooltip ================ */
.mytip {
    display: block;
    font-size: 10pt;
    position: absolute;
    background-color: #333;
    border-radius:4px;
    padding: 2px 6px;
    color: #fff;
}