/*----------------------------------------------------------------------------------------------------------------------
Project:    gbo.club
Author:     Roman V. Narykov (Roksi Kharkov)
roksi.com.ua © 2021
----------------------------------------------------------------------------------------------------------------------*/

*{	-webkit-transition: .7s ease-out;
 	-moz-transition: .7s ease-out;
 	-o-transition:  .7s ease-out;
 	transition: .7s ease-out;
}

/*================================
TYPOGRAPHY
================================*/
body {
    font-family: 'Raleway', sans-serif;
    line-height: 1.8em;
}

.bigicon {font-size: 3em}
h2{font-size: 42px}
h3{font-size: 28px}
h4{font-size: 18px; line-height: 1.4em}
.black{color: #000000}
.work {text-align: left; color: #000000}
span.telephones {font-weight:700; color:#fff; text-shadow: 2px 2px 4px #000; font-size:1.2em}

/*================================
DEFAULT STYLE & FORMATING
================================*/
ul{padding: 0; text-align: left; margin: 0.5em; margin-left: 1em; color:#000}
a{color: #ea9312}
a:hover{color: #999999; text-decoration: none}
img{max-width: 100%}

#services{text-align: center}
#services .left{text-align: left}
.col-md-4, .col-md-6{padding-bottom: 50px}
.col-md-3 {padding: 0}

.sectionhead{
    text-align: center;
    padding-top: 100px;
    padding-bottom: 50px;
}

hr.separetor{
    width: 80px;
    color: #363942;
    border-top: 2px solid #ea9312;
}

.btn-default{
    background: none;
    border: none;
    text-transform: uppercase;
    margin: 50px 0;
    color: #222222;
    letter-spacing: 1px;
	font-weight:700;
}

.btn-default:hover{
    background: none;
    color: #ea9312;
}

.btnicon, .brandicon{
    margin-right: 10px;
}

/*================================
HERO AREA
================================*/
#hero{
    color: #fff;
    text-shadow: 1px 1px 2px #000000;
    text-align: center;
    background: url(../images/bg.jpg)no-repeat; /*your background image*/
    background-size: cover;
    max-height: 920px;
    overflow: hidden;
}
.herocontent{
    padding-top: 60px;
    width: 100%;
    max-width: 920px;
}
.heroshot{
    margin-top: 20px;
    width: 100%;
    max-width: 1200px;
}
.red{
    color: #f00;
}
.grey{
    color: #ccc; line-height: 1.4;
}

/*================================
CLIENTS SECTION
================================*/
#clients{
    padding-top: 30px;
}
#clients h4{
    padding-top: 10px;
}

#clients .col-md-4{
    padding-bottom: 0;
}

#clients ul{float: right}

#clients li{
    display: inline;
    margin-right: 20px;
}

#clients li img{
    margin-bottom: 1em;
}

#clients li:last-child{
    margin-right: 0px;
}

/*================================
ABOUT SECTION
================================*/
#about { padding-top: 60px }

.myapps { margin-top: 25px }
.myapps li { display: inline }
.myapps li img { max-width: 280px; margin-top: 1em }
.myapps li h2 { color:black }
.myapps li p { color: #222222 }

.article { 
	margin-top: 1em; 
	margin-bottom: 2em; 
	color: #000000; 
	text-align: center;
}

/*================================
PORTFOLIO SECTION
================================*/
#portfolio{
    background: #eeeeee url(../images/grey1.jpg) no-repeat 0 0;
    margin-top: 50px;
    padding: 30px 0;
    text-align: center;
}

#portfolio img{    
    border: 5px solid #fff;
}

/*================================
TESTIMONIAL SECTION
================================*/
.clientsphoto img{
    width: 80px;
    float: left;
    margin-right: 20px;
    border-radius: 50%;
}

.clientsphoto img:hover{
    border-radius: 15%;
}

blockquote{
    margin: 0 0.5em 0 0;
    padding: 0 0 10px 0;
    border: none;
}

blockquote p{   
    font-style: italic;
    font-size: 14px;
    font-weight: 500;
}

.quote{overflow: hidden}
.quote h5{margin-bottom: 5px;}

/*================================
FOOTER SECTION
================================*/
footer{
    text-align: center;
    padding: 50px 0;
    background: #0d182e url(../images/master.png) no-repeat 100% 100%;
}

footer p, footer .bigicon {color: #ffffff}
footer h3 {color: #269abc; font-weight:700; margin-bottom:1em}

.footerlinks {margin: 30px 0;}
.footerlinks li{
    display: inline;
    padding: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.footersocial {margin-top: 30px;}

.footersocial li{
    display:inline;
    padding: 0 15px;
    font-size: 2em;
}

.footersocial li a {color: #7e7e7e;}
.footersocial li a:hover {color: #ea9312;}

/*================================
FOLLOW BUTTON
================================*/
.dribbble-follow-button {
	display: inline-block;
    margin-top: 15px;
}

.dribbble-follow-button .label, .dribbble-follow-button .count {
    font: bold 11px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #222222;
    border: 1px solid #ccc;
    text-decoration: none;
    display: inline-block;
    position: relative;
    border-radius: 3px;
}

.dribbble-follow-button .label {
    padding: 2px 8px 2px 1px;
    white-space: nowrap;
    background: #e3e3e3;
    background: linear-gradient(top, white, #dedede);
}

.dribbble-follow-button .label i {
    height: 18px;
    width: 18px;
    float: left;
    background: url(../images/icon.png) no-repeat top left;
	margin: 0 5px 0 5px;
}

.dribbble-follow-button .label:hover {
    border-color: #bbb;
    background: #fff;
    color: #333;
}

.dribbble-follow-button .label:active {            
     box-shadow: 0 1px 5px rgba(0,0,0,.15) inset;
}

.dribbble-follow-button .count {
    margin-left: 5px;
    padding: 0 3px;
    color: #333;
    border-color: #bbb;
    font-weight: normal;
    background: white;
}

.dribbble-follow-button .count:hover {
    text-decoration: underline;
}

.dribbble-follow-button .count > * {
	top: 50%;
	left: 0;
	margin: -4px 0 0 -4px;
	border: 4px solid transparent;
	border-right-color: #aaa;
	border-left: 0;
	position: absolute;
}

.dribbble-follow-button .count u {
    margin-left: -3px;
    border-right-color: white;
}

@media (max-width: 767px){
    .shots img{margin-bottom: 15px; max-width: 90%}
}