/*!

 */



.navbar-inverse {background-color: #2C3E50;}

.navbar-inverse .navbar-nav > li > a {
	color: #fff;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
	color: #9d9d9d;
	background-color: #233140;
}

.page-scroll > .navbar-brand {
	padding-top: 0;
	padding-bottom: 0
}

.navbar-brand > img {
	width: auto;
height: 100%
}

.navbar-inverse .navbar-toggle {
	border-color: gray;
}


/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children 
of those sections to manage the look and feel of the site. */

.intro-section {
	padding-top: 150px;
	text-align: center;
	background: #fff url(../img/theatre-curtain.jpg) repeat fixed top center;
	background-size: contain;
	padding-bottom: 90px;
}

.about-section {
   /* height: 100%; */
    padding-top: 90px;
	  padding-bottom: 90px;
    text-align: center;
	  background: #f2f2f2 url(../img/logo.png) repeat;
	  background-attachment: fixed;
}

.actors-section {
    height: 100%;
    padding: 150px 0;
    text-align: center;
		background: #fff url(../img/visitliverpool.jpg) no-repeat fixed top center;
		background-size: cover;
}

.services-section {
    padding: 150px 0;
    text-align: center;
	background: #fff url(../img/background_4.png) no-repeat fixed top center;
	background-size: contain;
}

.contact-section {
    background: inherit;
}


html, body {
	margin: 0px; /** Отступы со всех сторон равны 0px **/
	padding: 0px; /** Отступы со всех сторон равны 0px **/
	font-family: Arial, Helvetica, 'sans-serif'; /** Шрифты по умолчанию **/
}


/* Первый блок главная страница  */

.btn {transition: all 0.3s ease-in-out;}

 #intro .container {
	 border: 4px solid darkorange;
	 border-radius: 8px;
}



 /* голубой фон с градиентом */
.bluephone {
    width:100%;
	  height: 600px;
}

 /* парень с пальцами вверх */   
.liked { position: absolute;
    top: 100px;
    z-index: 5;
    height: 500px;
    width: 416px;    
}

.logo-gosteatr-small {position: absolute;
    height: 175px;
    width: 205px;
    left:0;
    top:0;
}


/* Первый красивый заголовок*/
.title01 {
    position: absolute;
    font-weight: bold;
		color: #FE6602;
        font-family: 'Aclonica',serif;
        margin: 20px auto; 
        text-shadow: 0 1px 0 #000000, 0 2px 0 #888888, 0 3px 0 #777777, 0 4px 0 #FFFFFF, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135; 
    z-index: 10;
    width: 600px;
}

.txt0 {
float:right;
width:450px;
position: relative;
top: 70px;
}

.txt0 h3 {
   color: #fff;
	font-family: 'ChunkFiveRegular';
        margin: 20px auto; 
        text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.txt0 li {text-align:left; font-size:20px; text-shadow:3px 3px 10px red,-3px -3px 10px yellow; color: #f2f2f2;}

/* =================================== О спектакле =============================================== */
 

#about .container {
	border: 4px solid darkorange;
	border-radius: 8px;
	box-shadow: 0 0 10px 15px rgba(221, 221, 221, 1);
}

#about .row {
	background: #B74000 url('../img/textura.png') repeat;
	background-attachment: fixed
}

#about > div:nth-child(1) > div {  padding-top: 30px;}

#about h2 {
  font-weight: bold;
  text-shadow:4px 4px 5px #AAAAAA; color:#000;
}

#about .col-lg-6 {}

#about p {
    text-align: justify;
    font-family: "Palatino Linotype";
    font-weight: bold;
    font-size: 20px;
  line-height: 1.2;
}

.about-first {
         background-color: #f2f2f2;
     margin: 10px;
     padding: 1px 7px 5px;
     border: 4px solid darkorange;
     border-radius: 8px;

}
 .about-first, .portfolio-item   {
     min-height:320px;
 }


/* класс для карточки c актером*/

.cards{
  display: inline-block;
  width: 240px;
  height: 390px;
  text-decoration: none;
  text-indent: 0;
  list-style-type: none;
  padding-left: 0;
  vertical-align: top;
  background-color: white;
}

.cards:hover { cursor: pointer}
.cards:focus {outline: none;}
.cards:active {cursor: wait;}

.cards > *:first-child {
  display: block;
  width: 240px;
  height: 280px;
  /* background: transparent url('../img/rr_card.png') no-repeat scroll top center; */
  background-size: 100%;
  padding: 42px 30px 10px 31px;
}

.cards *:first-child img {
  width: 185px;
  height: 240px;
}

.cards > *:last-child {
  padding: 16px 25px 8px;
  text-align: center;
  font-family: Arial, sans-serif;
	color: darkblue;
  text-transform: uppercase;
  font-weight: bold;
}

.cads-block {
  background-color: white;
  margin-top: 2rem;
  text-align: center;
  border: 4px solid darkorange;
  border-radius: 8px;
  padding-bottom: 30px;
}


/*  ============= =  Сервис и доставка   =================== */

#services h1{
  font-weight: bold;
  padding-bottom: 30px;
  text-shadow:3px 3px 10px red,-3px -3px 10px yellow;color: #101921;
}

#services .btn {
  margin: 30px;
  padding: 15px 20px;
  font-size: xx-large;
}

#services .text-center {
  font-size: 1.5em;
  text-shadow:4px 4px 5px #AAAAAA; color:#000;}

/*  =======    Футер он же контакты      ========== */

footer {
  color: white;
}
footer h3 {
  margin-bottom: 30px;
}

footer p {
  font-size: 18px;
  font-family: 'Helvetica Neue', Helvetica;
}

footer a {
  color:  lightskyblue;
}

footer .footer-above {
  padding-top: 50px;
  background-color: #2C3E50;
}
footer .footer-col {
  margin-bottom: 50px;
}
footer .footer-below {
  padding: 25px 0;
  background-color: #233140;
}


/*  Сылки на картинке с увеличительным стеклом при наведении */

.portfolio-item {
padding-top:35px;
text-align:center;

}
 .portfolio-link {
  display: inline-block;
  position: relative;
  margin: 0 auto;
}

 .portfolio-link .caption {
  background: rgba(181, 42, 0, 0.8);
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all ease 0.5s;
}

 .portfolio-link .caption:hover {
  opacity: 1;
}

 .portfolio-link .caption .caption-content {
  position: absolute;
  width: 100%;
  height: 20px;
  font-size: 20px;
  text-align: center;
  top: 53%;
  margin-top: -12px;
  color: white;
}

 .portfolio-link .caption .caption-content i {
  margin-top: -12px;
}

 .portfolio-link .caption .caption-content h3,
 .portfolio-link .caption .caption-content h4 {
  margin: 0;
}




/* Кастомизируем кнопки */ 
 
 
 .btn-outline {
  color: white;
  font-size: 20px;
  border: solid 2px white;
  background: orangered;
  transition: all 0.3s ease-in-out;
  margin-top: 15px;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active,
.btn-outline.active {
  color: #18BC9C;
  background: white;
  border: solid 2px white;
}

.btn-success {
  color: white;
  background-color: #18BC9C;
  border-color: #18BC9C;
  font-weight: 700;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  color: white;
  background-color: #128f76;
  border-color: #11866f;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
  background-color: #18BC9C;
  border-color: #18BC9C;
}
.btn-success .badge {
  color: #18BC9C;
  background-color: white;
}
#contact .btn-social {
  display: inline-block;
  height: 50px;
  width: 50px;
  border: 2px solid white;
  border-radius: 100%;
  text-align: center;
  font-size: 20px;
  line-height: 45px;
  background-color: transparent;
}
.btn:focus,
.btn:active,
.btn.active {
  outline: none;
}
#contact .btn-social:hover {
  color: #2C3E50;
  background-color: orangered;
}


/* ////////////////////////////////////// Адаптивность \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */


/* Устройства с большим экраном (компьютеры, 1200px и выше) */
@media (min-width: 1200px) {

	.liked {
		left: 300px;
	}

}



/* Устройства со средним экраном (ноутбуки и компьютеры, 992px и выше) */
@media (min-width: 992px) {

	.title01 {
		font-size: 6em;
		top:-25px;
		left: 300px;
	}

	.txt0 h3 {font-size: 4em }

  /*  Эффект при наведени на карточку */

  .cads-block .cards:nth-child(even) > *:first-child {
    margin-top: 40px;
  }

  .cards > *:first-child {transition: margin-top .5s ease-in-out;}

  .cads-block .cards:nth-child(odd):hover > *:first-child {
    margin-top: 40px;
  }

  .cads-block .cards:nth-child(even):hover > *:first-child {
    margin-top: 0;
  }


}

/* Устроства с маленьким экраном (планшеты, 768px и выше) */
@media (min-width: 768px) {

	.navbar {
		padding: 20px 0;
		-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
		-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
		transition: background .5s ease-in-out,padding .5s ease-in-out;
	}

	.top-nav-collapse {
		padding: 0;
	}

	#intro .container {
		background: url('../img/phone01.jpg') no-repeat fixed top center;
		background-size: cover;
		height: 608px;
		background-color: transparent;
	}

	.bluephone {
		background: transparent url('../img/grad01.png') no-repeat scroll top right;
		background-size: contain;
	}
 
}


/* стили для md-устройств с шириной viewport, находящейся в диапазоне 992px - 1199px */
@media (min-width: 991px) and (max-width: 1199px) {
	.liked {
		left: 80px;
	}
}


/* стили для sm-устройств с шириной viewport, находящейся в диапазоне 768px - 991px */
@media (min-width: 768px) and (max-width: 991px) {

	.title01 {
		left: 80px;
		top: -5px;
	}

}


/* стили для xs-устройств с шириной viewport менее 768px */
@media (max-width: 767px) {

	.title01 {
		left: 70px;
		top: 5px;
	}

	.txt0 h3 {
		margin-bottom: 60px;
	}

}

/* xs-размер (<=575px) */
@media (max-width: 575px) {

	#intro  .title01 {
		left:-10%;
		width: 300px;
}
	#intro  .logo-gosteatr-small {
		display: none;
	}

}