/**
=============================================================
[Main Stylesheet]

Template:     Hostsun
Version:      1.0
Created:      02.02.2019
Primary use:  Hostsun Responsive, Hosting, Domain and Technology Template

@Author: kode4everyone

* This file contains the styling for the actual theme, this
is the file you need to edit to change the look of the
theme.

====================[Table of contents]======================

* 1.0 - Footer css start
* 2.0 - Copyright css start
* 3.0 - Aside Heading css start
* 4.0 - Aside outer wrap css start
* 5.0 - Aside Search css start
* 6.0 - Aside Category css start
* 7.0 - Aside Tags css start
* 8.0 - Aside Recent Post css start

[Color codes]

Background:	#fafafb (Sliver)
Content:	#939393 (Light Gray)
Header h1:	#343434 (Grey Black)
Header h2:	#343434 (Black)
Footer:		#939393 (Gray)

a (standard):	#343434 (black)
a (visited):	#2bcb6b (Lime)
a (active):	#2bcb6b (Lime)

[Typography]
  
Body copy:		16px/ 'Lato', sans-serif;
Headers:		'Open Sans', sans-serif;
Input, textarea:	'Open Sans', sans-serif;

=============================================================
**/

/*
  ==============================================================
    Footer css start
  ==============================================================
*/
.keo_footer_bg{
	background-color: #fafafb;
	padding: 45px 0px 55px;
}
.widget_hdg{
	font-size: 35px;
	font-family: 'Century-Gothic-Bold', sans-serif;
    font-weight: 600;
    margin-bottom: 20px !important;
}
/*Col 1*/
.keo_foo_about>ul{
	list-style: none;
}
.keo_foo_about>ul>li{
   font-size: 20px;

}
.keo_foo_about>ul>li>span{
	margin-right: 10px;
	font-weight: 600;
}
.keo_foo_about>ul>li>p{
    margin-bottom:5px;
    font-size: 20px;
}
.keo_foo_about>ul>li>a{
	text-decoration: underline;
	color: #939393;
}
.keo_foo_get_touch{
    width: 75%;
}
/*Col 2*/

/*Col 3*/

/*
  ==============================================================
    Copyright css start
  ==============================================================
*/
.keo_copyright_bg{
	padding: 25px 0px;
}

.keo_copyright_menu>ul>li>a{
	color: #fff;
	padding: 0px 10px;
	
}
.keo_copyright_menu>a{
    font-size: 8px;
}
.keo_social_link ul{
	list-style: none;
}
.keo_social_link ul li a{
	color: #e2fdef;
	margin-left: 6px;
}
.keo_social_link ul li a:hover{
	color: #ffffff;
}
/*
  ==============================================================
    Aside Heading css start
  ==============================================================
*/
.keo_aside_hdg{
	font-size: 18px;
	margin-bottom: 18px;
}
/*
  ==============================================================
    Aside outer wrap css start
  ==============================================================
*/
.keo_aside_outer{
	padding: 30px 30px 35px;
}
.aside_border_pdg{
	border-bottom: 1px solid #dbdbdb;
	padding-bottom: 35px;
}
.aside_mrgn{
	margin-bottom: 40px;
}
/*
  ==============================================================
    Aside Search css start
  ==============================================================
*/
/*
  ==============================================================
    Aside Category css start
  ==============================================================
*/

/*
  ==============================================================
    Aside Tags css start
  ==============================================================
*/

/*
  ==============================================================
    Aside Recent Post css start
  ==============================================================
*/

.parters-widget{
    margin-top: 15px;
    border: 1px solid;
}
.parters-widget h6{
    border-bottom: 1px solid;
    padding: 10px 0;
}
.phone_button{
    position: fixed;
    right: -21px;
    bottom: 15px;
    visibility: hidden;
}
.circlephone{
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    border: 2px solid red;
    width: 100px;
    height: 100px;
    bottom: -12px;
    right: 23px;
    position: absolute;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    opacity: .5;
    -webkit-animation: circle-anim 2.4s infinite ease-in-out !important;
    -moz-animation: circle-anim 2.4s infinite ease-in-out !important;
    -ms-animation: circle-anim 2.4s infinite ease-in-out !important;
    -o-animation: circle-anim 2.4s infinite ease-in-out !important;
    animation: circle-anim 2.4s infinite ease-in-out !important;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all 0.5s;
}
.circle-fill{
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    background-color:red;
    width: 75px;
    height: 75px;
    bottom: 0px;
    right: 35px;
    position: absolute;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid transparent;
    -webkit-animation: circle-fill-anim 2.3s infinite ease-in-out;
    -moz-animation: circle-fill-anim 2.3s infinite ease-in-out;
    -ms-animation: circle-fill-anim 2.3s infinite ease-in-out;
    -o-animation: circle-fill-anim 2.3s infinite ease-in-out;
    animation: circle-fill-anim 2.3s infinite ease-in-out;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all 0.5s;
}
.img-circle{
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    width: 50px;
    height: 50px;
    bottom: 12px;
    right: 44px;
    position: absolute;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid transparent;
    opacity: .7;
}
.img-circleblock{
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    width: 45px;
    height: 45px;
    background-image: url(../img/phone_button.png);
    background-position: center center;
    background-repeat: no-repeat;
    animation-name: tossing;
    -webkit-animation-name: tossing;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}


@-webkit-keyframes tossing {
    0%{
        transform: rotate(-8deg);
    }
    50%{
        transform: rotate(8deg);
    }
    100%{
        transform: rotate(-8deg);
    }
}
@-o-keyframes tossing {
    0%{
        transform: rotate(-8deg);
    }
    50%{
        transform: rotate(8deg);
    }
    100%{
        transform: rotate(-8deg);
    }
}
@-moz-keyframes tossing {
    0%{
        transform: rotate(-8deg);
    }
    50%{
        transform: rotate(8deg);
    }
    100%{
        transform: rotate(-8deg);
    }
}
@keyframes tossing {
    0%{
        transform: rotate(-8deg);
    }
    50%{
        transform: rotate(8deg);
    }
    100%{
        transform: rotate(-8deg);
    }
}

@-webkit-keyframes circle-anim {
    0%{
        -webkit-transform: rotate(0deg) scale(0.5) skew(1deg);
        -webkit-opacity: .3;
    }
    30%{
        -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
        -webkit-opacity: .5;
    }
    100%{
       -webkit-transform: rotate(0deg) scale(1) skew(1deg);
        -webkit-opacity: .1;
    }
}
@-o-keyframes circle-anim {
    0%{
        transform: rotate(-8deg);
        opacity: .3;
    }
    50%{
        transform: rotate(8deg);
        opacity: .5;
    }
    100%{
        transform: rotate(-8deg);
        -o-opacity: .1;
    }
}
@-moz-keyframes circle-anim {
    0%{
        moz-transform: rotate(0deg) scale(0.5) skew(1deg);
        opacity: .3;
        -moz-opacity: .3;
    }
    50%{
        -moz-transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .5;
        -moz-opacity: .5;
        -o-opacity: .5;
    }
    100%{
        -moz-transform: rotate(0deg) scale(1) skew(1deg);
        opacity: .1;
        -moz-opacity: .1;
        -o-opacity: .1;
    }
}
@keyframes circle-anim {
   0%{
        transform: rotate(0deg) scale(0.5) skew(1deg);
        opacity: .3;
    }

    30%{
        transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .5;
    }
    100%{
        transform: rotate(0deg) scale(1) skew(1deg);
        opacity: .1;
    }
}

@-webkit-keyframes circle-fill-anim {
    0%{
        -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .7;
    }
    50%{
        -webkit-transform: rotate(0deg) scale(1) skew(1deg);
        opacity: .7;
    }
    100%{
        -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .7;
    }
}
@-o-keyframes circle-fill-anim {
    0%{
        transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .7;
    }
    50%{
        transform: rotate(0deg) scale(1) skew(1deg);
        opacity: .7;
    }
    100%{
        transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .7;
    }
}
@-moz-keyframes circle-fill-anim {
    0% {
        -moz-transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .7;
    }
    50%{
        -moz-transform: rotate(0deg) -moz-scale(1) skew(1deg);
        opacity: .7;    
    }
    100%{
        moz-transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .7;
    }
    
}
@keyframes circle-fill-anim {
    0%{
        transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .7;
    }
    50%{
        transform: rotate(0deg) scale(1) skew(1deg);
        opacity: .7;
    }
    100%{
        transform: rotate(0deg) scale(0.7) skew(1deg);
        opacity: .7;
    }
}