.hidden {display: none;}

#head {height: 55px; padding: 5px 10px; border-bottom: 1px solid #AAA; text-align: center; }
#head .head-wrapper {max-width: 1200px; margin: 0 auto;}
#head .head-logo {display: inline-block; vertical-align:middle; float: left;}
#head .head-logo img {height: 40px;}
#head .head-menu-right {display: inline-block; vertical-align:middle; float: right; z-index: 100;}
#head .head-menu-right p { line-height: 30px;}

#main {max-width: 1200px; margin: 20px auto;}
.title-text { margin: 20px 0; text-align: center; font-size: 1.5em;}
.desc-text { margin: 10px;}


.progress-menu {display: flex; padding: 5px 10px; background: #fff; position: sticky; top: 0; z-index: 5; box-shadow: 0px 15px 15px -10px #ccc;}
.progress-menu .button-wrapper {width: 55px;}
.progress-menu .bar-wrapper {flex: auto;}
.progress-menu .bar-wrapper .ui.progress {margin: 0;}
.progress-menu .bar-wrapper .ui.progress .bar {transition-duration: 300ms; display: block; height: 36px;}

.form-buttons {margin:10px 0; padding:10px; text-align: center; background: #fff; position: sticky; bottom: 0; box-shadow: 0px -15px 15px -10px  #ccc;}

.block-item {margin: 10px; padding:10px; border: 1px solid #AAA; border-radius: 3px;}

.mail-preview {margin: 10px 0; padding: 10px; background: #EEE; border-radius: 3px;}



.player-wrap {padding: 5px; margin-bottom: 20px; background: #fff; border: 0 solid #ccc; border-width: 1px 0; position: sticky; top: 0; z-index: 100;}
.player {min-height: 30px; display: flex;}
.player>div {padding: 0 5px;}
.player>div#waveWrapper {flex-grow: 1;}

/* Стили для блока с текущим временем и максимальным временем */
.player #time-display {
    width: 100%;
    text-align: center;
    margin-top: 5px;
    font-size: 14px;
    color: #333;
    overflow: hidden;
}

#time-display {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#current-time {
    text-align: left;
}

#total-time {
    text-align: right;
}

#settings-panel {
    padding: 10px;
}

#settings-panel h3 {
    margin-bottom: 10px;
}

.setting-block {
    margin-bottom: 20px;
}

#settings-panel label,
#settings-panel input,
#settings-panel span,
#settings-panel .rewind-buttons {
    margin-bottom: 10px;
}

#settings-panel .rewind-buttons button {
    margin-right: 5px;
}

.frame-block {margin-bottom: 10px; padding-bottom: 10px; border-bottom:1px solid #ccc; position: relative;}
.frame-block .frame {width:40%;  margin:0 20px 0 0; display: inline-block; position: sticky; top: 70px; }
.frame-block .frame img {width:100%; border:1px solid #ccc;}
.frame-block .text {width: calc(60% - 30px); display: inline-block; vertical-align:top;}

.frame-block .text .highlight {background: rgba(128, 0, 128, 0.1); }

.img-wrap {position: relative;}
.img-wrap .actions {position: absolute; top: 10px; right: 10px; font-size: 1.5em; display: none;}
.img-wrap .actions a {padding: 5px 3px 5px 5px; display: inline-block; position: absolute; background: #000; color: #fff;}
.img-wrap .actions a.delete {top:0; right: 0;}

.img-wrap:hover .actions {display: block;}


/* Марджин для плавного скрола */
.p-time {scroll-margin: 100px;}


.land-block-wrapper {font-size: 16px;}
.land-block.centered {max-width: 1200px; margin: 0 auto; padding: 40px 10px;}
.land-block .name {font-size: 4em; line-height: 1em;}
.land-block .slogan {margin: 0 0 40px 0; font-size: 2em; line-height: 1em; font-style: italic; font-weight: bold;}
.land-block .desc {}

.bg-blue {background-color: #2085D0; color: #fff;}

/*
Alegreya SC: CSS classes
*/

.alegreya-sc-regular {
  font-family: "Alegreya SC", serif;
  font-weight: 400;
  font-style: normal;
}

.alegreya-sc-medium {
  font-family: "Alegreya SC", serif;
  font-weight: 500;
  font-style: normal;
}

.alegreya-sc-bold {
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  font-style: normal;
}

.alegreya-sc-extrabold {
  font-family: "Alegreya SC", serif;
  font-weight: 800;
  font-style: normal;
}

.alegreya-sc-black {
  font-family: "Alegreya SC", serif;
  font-weight: 900;
  font-style: normal;
}

.alegreya-sc-regular-italic {
  font-family: "Alegreya SC", serif;
  font-weight: 400;
  font-style: italic;
}

.alegreya-sc-medium-italic {
  font-family: "Alegreya SC", serif;
  font-weight: 500;
  font-style: italic;
}

.alegreya-sc-bold-italic {
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  font-style: italic;
}

.alegreya-sc-extrabold-italic {
  font-family: "Alegreya SC", serif;
  font-weight: 800;
  font-style: italic;
}

.alegreya-sc-black-italic {
  font-family: "Alegreya SC", serif;
  font-weight: 900;
  font-style: italic;
}


/*
Raleway: CSS class for a variable style
<uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 100 to 900
*/

.raleway-normal {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}


/*
PT Sans Caption: CSS classes
*/

.pt-sans-caption-regular {
  font-family: "PT Sans Caption", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.pt-sans-caption-bold {
  font-family: "PT Sans Caption", sans-serif;
  font-weight: 700;
  font-style: normal;
}




@media (max-width: 1199.98px) {
	/* .video-player-wrap {left: calc((100% - 933px) / 2); z-index: 100;} */
}

@media (max-width: 700px) {
    #head {height: auto; overflow: auto; }
	#head .head-logo {display: block; text-align: center; float: none;}

	.frame-block .frame {width:100%;  margin:10px 0; position: relative; top: 0;}
    .frame-block .text {width:100%; padding:10px;}
}

@media (max-width: 550px) {
    
}


@media print {
    .frame-block .frame {position: relative; top: 0;}
    .noprint {display: none;}
}