@import url(https://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic);
/**
h1 { font-family: 'Lobster', cursive; }
**/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900&subset=latin,cyrillic);
/**
h1 { font-family: 'Roboto', sans-serif; }
**/
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300&subset=latin,cyrillic-ext);
/**
h1 { font-family: 'Roboto Condensed', sans-serif; }
**/

/*============= START =============*/
/*========= 01. GENERAL  ==========*/
/*=================================*/
html,
body {
  height: 100%;
  background-color: rgba(13,71,161,1); }
  
section {
  overflow: hidden; }
  
.overlay-section {
  min-height: 700px; }

.bg-purple {
  color: #000 !important;
  background-color: #ECEFF1 !important; }

[data-bg-image] {
  background-size: cover; }
/*============== END ==============*/



/*============= START =============*/
/*============ Slide Out  =========*/
/*=================================*/
.navbar-fixed-top {
  z-index: 5!important;
}


.nav li.nav-item a {
    font-weight: 500;
    color: rgba(63, 81, 181, 1);
    text-shadow: 1px 1px 2px rgba(150, 150, 150, 0);
}
.nav li.nav-item a:hover {
    color: rgba(63, 81, 181, 0.3);
    text-shadow: none;
    transition: 2s;
}

.nav-crumb{
    position:relative;
    top:20px;
    z-index: 6;
    margin-left: 0px;
    line-height: 1;
    font-family: 'Roboto Condensed', sans-serif;
    color: #b0bec5;
}

.menu-cover .btn {
    border: none;
    color: #01579b;
    font-size: 24px;
    width: 60px;
    height: 60px;
    line-height: 48px;
    border-radius: 100%;
    display: inline-block;
    text-align: center;
}

.slide-out-overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	z-index: 9999;
	display: none;
}
.slide-out {
	width: 380px;
	height: auto;
	/*overflow-y: scroll;*/
	position: fixed;
	top: 0;
	bottom: 0;
	right: -400px;
	background: #fff;
	z-index: 100;
	box-shadow: -2px 0 10px rgba(0,0,0,.4);
	-webkit-transition: .25s;
	-moz-transition: .25s;
	-o-transition: .25s;
	-ms-transition: .25s;
	transition: .25s;
    
}
.slide-out.open {
	right: 0;
}
.slide-out-header {
	padding: 30px;
	padding-top: 20px;
	color: #fff;
}
.slide-out-header a {
	color: #fff;
}
.slide-out-header a:hover {
	opacity: .75;
}
.slide-out-close {
	font-size: 24px;
}
.slide-out-header .open-search, .slide-out-header .slide-out-share {
	font-size: 24px;
	margin-left: 12px;
}
.slide-out-header img {
	width: 100px;
	height: 100px;
	border-radius: 100%;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.3);
	float: left;
	margin-top: 24px;
}
.slide-out-header .content {
	margin-left: 118px;
	padding-top: 18px;
	margin-top: 24px;
	margin-bottom: 24px;
}
.slide-out-header .content h5 {
	margin-bottom: 0;
	color: #fff;
}
.slide-out-header .content span {
	line-height: 32px;
	font-weight: 500;
    color: #fff;
}
.slide-out-widgets {
	padding: 30px;
	padding-top: 50px;
}
.slide-out-widget {
	margin-bottom: 60px;
}

.slide-out-widgets a {
    border: none; 
    display: block;
}

.slide-out-widget h4 {
	margin-bottom: 24px;
	color: #111;
}
@media all and (max-width: 768px) {
	.slide-out {
		width: 100%;
		right: -110%;
	}
}
/*============== END ==============*/



/*============= START =============*/
/*============  HOME  =============*/
/*=================================*/
#home {
    position: relative;
    height: 100%;
    width: 100%;     
}

#home h1 {
    font-family: 'Lobster', cursive; 
    color: #ffea00;
}

#home .circusfestival img {
    position: absolute; 
    top: 30%; 
    left: 36%;
    width: 100px; 
    margin-top: -50px; 
    margin-left: -50px;
}
#home .circusukr img {
    position: absolute; 
    top: 17%; 
    left: 45%;
    width: 100px; 
    margin-top: -50px; 
    margin-left: -50px;
}
#home .academy img {
    position: absolute; 
    top: 17%; 
    right: 45%;
    width: 100px; 
    margin-top: -50px; 
    margin-right: -50px;
}
#home .circuscolgo img {
    position: absolute; 
    top: 30%; 
    right: 36%;
    width: 100px; 
    margin-top: -50px; 
    margin-right: -50px;
}


#home .kharkiv img {
    position: absolute; 
    top: 50%; 
    left: 33%;
    width: 100px; 
    margin-top: -50px; 
    margin-left: -50px;
}
#home .circuscom img {
    position: absolute; 
    top: 50%; 
    left: 50%;
    width: 300px; 
    margin-top: -150px; 
    margin-left: -150px;
    z-index: 1!important;
}


#home .circuscom h4 {
    position: absolute; 
    top: 50%; 
    left: 50%;
    display: block; 
    width: 260px;
    margin-top: 10px; 
    
    z-index: 5!important;
    text-align: center;
    
}



#home .odessa img {
    position: absolute; 
    top: 50%; 
    right: 33%;
    width: 100px; 
    margin-top: -50px; 
    margin-right: -50px;
}


#home .dp img {
    position: absolute; 
    bottom: 30%; 
    left: 36%;
    width: 100px; 
    margin-bottom: -50px; 
    margin-left: -50px;
}
#home .zp img {
    position: absolute; 
    bottom: 17%; 
    left: 45%;
    width: 100px; 
    margin-bottom: -50px; 
    margin-left: -50px;
}
#home .lviv img {
    position: absolute; 
    bottom: 17%; 
    right: 45%;
    width: 100px; 
    margin-bottom: -50px; 
    margin-right: -50px;
}
#home .kr img {
    position: absolute; 
    bottom: 30%; 
    right: 36%;
    width: 100px; 
    margin-bottom: -50px; 
    margin-right: -50px;
}









@media (max-width: 1024px) {
#home .circusfestival img {
    top: 30%; 
    left: 29%;
}
#home .circusukr img { 
    top: 17%; 
    left: 41%;
}
#home .academy img { 
    top: 17%; 
    right: 41%;
}
#home .circuscolgo img {
    top: 30%; 
    right: 29%;
}


#home .kharkiv img { 
    top: 50%; 
    left: 25%;
}
#home .odessa img {
    top: 50%; 
    right: 25%;
}


#home .dp img {
    bottom: 30%; 
    left: 29%;
}
#home .zp img {
    bottom: 17%; 
    left: 41%;
}
#home .lviv img { 
    bottom: 17%; 
    right: 41%;
}
#home .kr img {
    bottom: 30%; 
    right: 29%;
}
}





/*============== END ==============*/



/*============= START =============*/
/*======== HOME WORK CASE =========*/
/*=================================*/
#wrapp-tabs {
    position: relative;
}

.wrapp-nav-tabs {
    position: absolute; 
    top: 30px; 
    z-index: 5;
    padding-left: 100px;
}
.wrapp-nav-tabs li a {
    font-size: 12px;
    color: #ffbb33!important;
}
.wrapp-nav-tabs li a.active {
    color: #FF8800!important;
}
.wrapp-nav-tabs li a:focus {
    color: #FF8800!important;
}
.wrapp-nav-tabs li a:hover {
    color: #FF8800!important;
}

@media (max-width: 640px) {
.wrapp-nav-tabs {
    top: 0px; 
    padding-left: 20px;
}
.wrapp-nav-tabs li a {
    font-size: 18px;
    color: #ffbb33!important;
}
.wrapp-nav-tabs li a.active {
    color: #FF8800!important;
}
.wrapp-nav-tabs li a:focus {
    color: #FF8800!important;
}
.wrapp-nav-tabs li a:hover {
    color: #FF8800!important;
}
}


#wrapp-tabs .parallax {
    min-height: 500px;
}

#wrapp-tabs h3 {
    font-family: 'Roboto Condensed', sans-serif;
}

#wrapp-tabs h3 {
    font-family: 'Roboto Condensed', sans-serif;
}

#wrapp-tabs p{
    font-family: 'Roboto Condensed', sans-serif;
    display: block; 
    min-height: 116px; 
    max-height: 116px; 
    overflow: hidden;
}

#wrapp-tabs button {
    margin-left: 0;
}


@media (max-width: 640px) {
.text-tab {
    padding-left: 50px!important;
    padding-right: 50px!important;
}
}

/*============== END ==============*/



/*============= START =============*/
/*======= HOME OUR VECTOR =========*/
/*=================================*/
#wrapp-our-vector h3{
    display: block; 
    min-height: 60px; 
    max-height: 60px; 
    overflow: hidden;
}

#wrapp-our-vector p{
    font-family: 'Roboto Condensed', sans-serif;
    display: block; 
    min-height: 200px; 
    max-height: 200px; 
    overflow: hidden;
}


#wrapp-our-vector .col-md-6{
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
}
#wrapp-our-vector .col-md-6:hover{
    background-color: #cfd8dc;
    transition: 3s; 
}

@media (max-width: 640px) {
#wrapp-our-vector .card {
    padding: 50px!important;   
}
}


#wrapp-our-vector .modal-content span{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.5;
}

@media (max-width: 640px) {
#wrapp-our-vector div.modal-content {
    padding: 10px 10px!important;       
}
#wrapp-our-vector div.modal-content span {
    text-align: left!important;
    text-justify: none!important;       
}
}

@media (max-width: 480px) {
#wrapp-our-vector div.modal-content {
    padding: 10px 10px!important;       
}
#wrapp-our-vector div.modal-content span {
    text-align: left!important;
    text-justify: none!important;       
}
}


/*============== END ==============*/



/*============= START =============*/
/*======= HOME READY WORK =========*/
/*=================================*/
#ready-work p{
    font-family: 'Roboto Condensed', sans-serif;
    display: block; 
    min-height: 110px; 
    max-height: 110px; 
    overflow: hidden;
}

@media (max-width: 640px) {
#ready-work .card {
    padding: 25px!important;   
}
}
/*============== END ==============*/



/*============= START =============*/
/*========== HOME QUOTE ===========*/
/*=================================*/
#quote h3{
    font-weight: 500;
    color: #000;
}

#quote h5{
    color: #000;
}

#quote i{
    color: #000;
}

#quote .wrapp-avatar {
    position: relative; 
    width: 150px; 
    height: 150px; 
    -webkit-box-shadow: 0 0px 10px 1px rgba(0,0,0,0.3) inset;
    box-shadow: 0 0px 10px 1px rgba(0,0,0,0.3) inset;
}

#quote img {
    position: absolute; 
    top: 20px; 
    left: 10px;
}

@media (max-width: 640px) {
#quote .card {
    padding: 15px!important;   
}
}
/*============== END ==============*/






/*============= START =============*/
/*=========    Portolio ==========*/
/*=================================*/
.portfolio-wrapper {
	position: relative;
}
.portfolio-filters {
	position: absolute;
	top: -86px;
	right: 0;
}
.portfolio-filters .button {
	margin-left: 20px;
}
.portfolio {
	margin: 0 -20px;
	margin-top: 60px;
}
.portfolio .item {
	width: 25%;
	padding: 20px;
}
.portfolio .item img {
	width: 100%;
	height: auto;
}
.portfolio .item .overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
}
.portfolio .item:hover .overlay {
	opacity: 1;
	visibility: visible;
}
.portfolio .item .overlay .background {
	background: #2BBBAD;
	background: rgba(124,77,255,.9);
	width: 100%;
	height: 100%;
	cursor: url('../images/cursor.png') 43 43, crosshair;
	box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.portfolio .item .overlay .meta {
	background: #fff;
	text-align: center;
	position: absolute;
	bottom: 20px;
	left: 0;
	width: 100%;
	width: calc(100% - 40px);
	margin: 0 20px;
	padding: 8px 0;
}
.portfolio .item .overlay .meta .title {
	font-size: 14px;
	line-height: 26px;
	text-transform: uppercase;
	font-weight: 500;
	display: block;
	color: #232323;
}
.portfolio .item .overlay .meta .category {
	font-size: 14px;
	line-height: 26px;
	font-style: italic;
	font-weight: 500;
	color: #666;
}
.portfolio-load-more {
	text-align: center;
	margin-top: 48px;
}
@media all and (max-width: 1024px) {
	.portfolio .item {
		width: 50%;
		padding: 20px;
	}
	.portfolio-filters {
		position: static;
		text-align: center;
	}
	.portfolio-filters .button {
		margin-left: 12px;
		margin-bottom: 12px;
	}
	.portfolio {
		margin-top: 12px;
	}
}
@media all and (max-width: 768px) {
	.portfolio .item {
		width: 100%;
		padding: 20px;
	}
}
/*============== END ==============*/








/* ==========================================================================
   08. Social Icons
   ========================================================================== */
.social-icon {
	display: inline-block;
	width: 42px;
	height: 42px;
	line-height: 42px;
	font-size: 16px;
	color: #0D47A1!important;
    background: #fff;
	transition-property: background-color, color;
    transition-duration: 1s;
    transition-timing-function: ease-out;
	border-radius: 100%;
	box-shadow: 0 4px 12px rgba(0,0,0,.13);
	margin: 0 4px;
	text-align: center;
}

.social-icon:hover {
	background-color: #eceff1;
    transition: 3s;
    
}




/*============= NEWS  =============*/
/*=================================*/
#news{
    background: url(../img/backgrounds/bg-page-afish.jpg) no-repeat center top fixed;
    /*background-size*/
    -moz-background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    -o-background-size:cover;
    /*    -webkit-background-size: length_x length_y;*/
    background-size:cover;
    width:100%;
    overflow: hidden;
}
/* Small devices (tablets, up to 768px) */
@media (max-width: 480px) { 
#news{
    padding: 10px!important;    
}
#news .container {
    padding: 20px!important;
}
}
/*============== END ==============*/



/*============= VIEW =============*/
/*============= NEWS  =============*/
/*=================================*/
#view_news{
    background: url(../img/backgrounds/bg-page-afish.jpg) no-repeat center top fixed;
    /*background-size*/
    -moz-background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    -o-background-size:cover;
    /*    -webkit-background-size: length_x length_y;*/
    background-size:cover;
    width:100%;
    overflow: hidden;
}

#view_news .section-header {
    margin-bottom: 0px!important;
}

#view_news .section-header  h2{
    font-size: 22px;
}

#view_news .card {
    background: none!important; 
}

#view_news p{
    line-height: 1.5; font-size: 16px; 
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #000;
}


/* Small devices (tablets, up to 768px) */
@media (max-width: 480px) { 
#view_news{
    padding: 10px!important;    
}
#view_news .container {
    padding: 20px!important;
}
#view_news .section-header  h2{
    font-size: 16px;
    line-height: 1.2;
}   
#view_news p {
    font-size: 12px;
}
}
/*============== END ==============*/




/*============= GALLERY  =============*/
#gallery{
    background: url(../img/backgrounds/bg-page-afish.jpg) no-repeat center top fixed;
    /*background-size*/
    -moz-background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    -o-background-size:cover;
    /*    -webkit-background-size: length_x length_y;*/
    background-size:cover;
    width:100%;
    overflow: hidden;
    min-height: 500px;
}

/* Small devices (tablets, up to 768px) */
@media (max-width: 480px) { 
#gallery{
    padding: 10px!important;    
}
}


#gallery .item{ 
    
    height: 200px;
    overflow: hidden;
}

/*============== END ==============*/







#bg_popup{
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
  
#popup {
    margin-top: 100px;
    left: 50%;
    margin-left: -100px;
    width: 200px;
    position: relative;
}
  
.close2{
    position:absolute;
    top:-20px;
    right:-20px;
    z-index: 99999;
}





/*============= circus_with_animals.php  =============*/
/*=================================*/
#circus_with_animals{
    background: url(../img/backgrounds/bg-page-afish.jpg) no-repeat center top fixed;
    /*background-size*/
    -moz-background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    -o-background-size:cover;
    /*    -webkit-background-size: length_x length_y;*/
    background-size:cover;
    width:100%;
    overflow: hidden;
}
/* Small devices (tablets, up to 768px) */
@media (max-width: 480px) { 
#circus_with_animals{
    padding: 10px!important;    
}
#circus_with_animals .container {
    padding: 20px!important;
}
}
/*============== END ==============*/

/*=== view_circus_with_animals.php =============*/
#view_circus_with_animals{
    background: url(../img/backgrounds/bg-page-afish.jpg) no-repeat center top fixed;
    /*background-size*/
    -moz-background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    -o-background-size:cover;
    /*    -webkit-background-size: length_x length_y;*/
    background-size:cover;
    width:100%;
    overflow: hidden;
}

#view_circus_with_animals .section-header {
    margin-bottom: 0px!important;
}

#view_circus_with_animals .section-header  h2{
    font-size: 22px;
}

#view_circus_with_animals .card {
    background: none!important; 
}

#view_circus_with_animals p{
    line-height: 1.5; font-size: 16px; 
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #000;
}


/* Small devices (tablets, up to 768px) */
@media (max-width: 480px) { 
#view_circus_with_animals{
    padding: 10px!important;    
}
#view_circus_with_animals .container {
    padding: 20px!important;
}
#view_circus_with_animals .section-header  h2{
    font-size: 16px;
    line-height: 1.2;
}   
#view_circus_with_animals p {
    font-size: 12px;
}
}
/*============== END ==============*/



/*============= circus_on_the_ice.php  =============*/
/*=================================*/
#circus_on_the_ice{
    background: url(../img/backgrounds/bg-page-afish.jpg) no-repeat center top fixed;
    /*background-size*/
    -moz-background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    -o-background-size:cover;
    /*    -webkit-background-size: length_x length_y;*/
    background-size:cover;
    width:100%;
    overflow: hidden;
}
/* Small devices (tablets, up to 768px) */
@media (max-width: 480px) { 
#circus_on_the_ice{
    padding: 10px!important;    
}
#circus_on_the_ice .container {
    padding: 20px!important;
}
}
/*============== END ==============*/