a.phMenuItem
{
	font-weight: bold;
}


/** index page styles **/

#news_1
{
	padding: 22px 0;
	border-left: 7px solid #2364a6;
	
	/* background-image: url(../images/for_garden_2023_small.jpg); */
	/* background-image: url(../images/for_arch_2023_small_red_2.jpg); */
	background-image: url(../images/photos/showroom_confico_bedricha_smetany_24_06.jpg);
	background-position: right -15em;
    background-repeat: no-repeat;
    background-size: 50%;
    min-height: 14em;
}
#news_1 div
{
	width: 65%;
	float: left;
	border-right: none;
	margin-right: 10%;
}
#news_1 h3
{
	color: #2364a6;
    font-size: 1.3em;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.6em;
    margin-bottom: 0.5em;
	margin-top: 0.1em;
	text-transform: uppercase;
}
#news_1 h3 span
{
	font-weight: 600;
}
#news_1 p
{
	letter-spacing: 0.02em;
	font-size: 1em;
	margin-bottom: 0;
	line-height: 1.6em;
    margin-bottom: 0.5em;
}
#news_1 p span
{
	font-weight: 700;
}
#news_1 img
{
	margin-top: 0.5em;
	max-width: 415px;
	width: 45%;
}








#mainColumn h2 a
{
	color: black;
	text-decoration: none;
	cursor: pointer;
}
#mainColumn h2 a:hover
{
	text-decoration: none;
}
#mainColumn h3 a
{
	color: white;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.3em;
}
#mainColumn h3 a:hover
{
	text-decoration: none;
}

.animIndex2Paper
{
	min-height: 1200px;
}

#mainPaper.animPaper2Roofs
{
	min-height: 727px;
	padding-top: 48px;
	
}
#mainPaper.animPaper2Roofs > *
{
	opacity: 0;
}
#roofs > *
{
	transition: opacity 0.2s;
	opacity: 1;
}

#roofs, #news, #news_1, #biopergolas, #pergolas, #awnings, #floors
{
	width: 100%;
	
}
#floors > div
{
	background-size: cover;
}
#floors p
{
	margin-bottom: 2em;
	width: 70%;
	
}
#floors ul li
{
	list-style-type: circle;
}


#awnings, #news
{
	padding-top: 0;
}
#news
{
	height: 433px;
	overflow: hidden;
}
.animPaper2Roofs h3, #roofs h3, #biopergolas h3, #pergolas h3, #floors h3
{
	margin-left: 49px;
}
#mainColumn #floors h3 a
{
	color: black;
}
#mainColumn #floors .floorMillboard h3 a
{
	color: white;
}
#news .halfCol
{
	padding-left: 49px;
}

#roofsTerrazza .hover, #roofsGlasoase .hover, 
#pergolaArtares .hover, #pergolaPergotex .hover, #pergolaViva .hover,
.floorMillboard .hover, #floorMerbau .hover, #floorFiberon .hover
{
	background-color: white;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	padding: 1em 3em 5em 49px;
    line-height: 1.8em;
    font-size: 1.05em;
	
	position: absolute;
	display: block;
	opacity: 0;
	
	bottom: -100px;
	transition: bottom 0.3s, opacity 0.3s;
	
	width: 100%;
}
.floorMillboard .hover, #floorMerbau .hover, #floorFiberon .hover
{
	padding: 2em 2em 6em 49px;
}
#roofsTerrazza:hover .hover,#roofsGlasoase:hover .hover, 
#pergolaArtares:hover .hover, #pergolaPergotex:hover .hover, #pergolaViva:hover .hover,
.floorMillboard:hover .hover, #floorMerbau:hover .hover, #floorFiberon:hover .hover
{
	bottom: 0;
	opacity: 0.9;
}
#roofsTerrazza:hover h3,#roofsGlasoase:hover h3, 
#pergolaArtares:hover h3, #pergolaPergotex:hover h3, #pergolaViva:hover h3,
.floorMillboard:hover h3, #floorMerbau:hover h3, #floorFiberon:hover h3
{
	margin-top: 1.5em;
}

#roofsTerrazza button, #roofsGlasoase button, 
#pergolaArtares button, #pergolaPergotex button, #pergolaViva button,
.floorMillboard button, #floorMerbau button, #floorFiberon button,
#news button
{
	position: absolute;
    bottom: 0;
    right: 45px;
    opacity: 0;
    transition: bottom 0.3s, opacity 0.3s;
}
#news button
{
	right: calc(50% + 45px);
}
#roofsTerrazza:hover button, #roofsGlasoase:hover button, 
#pergolaArtares:hover button, #pergolaPergotex:hover button, #pergolaViva:hover button,
.floorMillboard:hover button, #floorMerbau:hover button, #floorFiberon:hover button,
#news:hover button
{
	opacity: 1;
	bottom: 27px;
}

.animPaper2Roofs p, #roofs p, #biopergolas p, #pergolas p, #awnings p, #floors p
{
	padding-left: 2.1em;
	font-family: 'Open Sans', sans-serif;
	font-weight: 200;
	max-width: 70%;
	line-height: 1.8em;
	margin-bottom: 3em;
}
#awnings p
{
	max-width: 90%;
	margin-right: 2em;
}
#awnings #desc
{
	padding-left: 49px;
	background-image: none;
}
#awnings #desc h2
{
	margin-top: 48px;
}
#awnings #desc p
{
	margin-bottom: 0;
}
#awnings div
{
	height: 250px;
	margin-left: 0;
	
	background-repeat: no-repeat;
	background-size: auto 100%;
}
#awnings #livona
{
	background-image: url(../images/aw_livona.jpg);
}
#awnings #topas
{
	background-image: url(../images/aw_topas.jpg);
}
#awnings #zenara
{
	background-image: url(../images/aw_zenara.jpg);
}
#awnings #kubata
{
	background-image: url(../images/aw_kubata.jpg);
}
#awnings #smaila
{
	background-image: url(../images/aw_smaila.jpg);
}
#awnings #opal
{
	background-image: url(../images/aw_opal.jpg);
}
#awnings #seminaLife
{
	background-image: url(../images/aw_semina_life.jpg);
}
#awnings #semina
{
	background-image: url(../images/aw_semina.jpg);
}
#awnings #cassita
{
	background-image: url(../images/aw_cassita.jpg);
}

#awnings,
#awnings > div,
#awnings > div > div
{
	position: relative;
	overflow: hidden;
}
#awnings .hoverLabel
{
	position: absolute;
	background: rgba(255,255,255,0.7);
	width: 100%;
	height: 100%;
	bottom: -100%;
}
#awnings .hoverLabel h3, #awnings .hoverLabel span
{
	font-family: 'Open Sans', sans-serif;
    color: black;
	display: block;
}
#awnings .hoverLabel h3
{
	font-weight: 400;
    font-size: 1.5em;
	margin: 0 0 0 48px;    
}
#awnings .hoverLabel h3 a
{
	color: black;
}
#awnings .hoverLabel h3 a:hover
{
	text-decoration: underline;
	color: black;
}
#awnings .hoverLabel span
{
	font-weight: 300;
    font-size: 1em;
    margin: 2em 0 0 48px;
}

.hoverLabel button
{
	right: 3em;
	bottom: 2em;
    position: absolute;
}
#awnings .hoverLabel button span
{
	margin: 0;
}


#news
{
	font-family: 'Open Sans', sans-serif;
}
#news div
{
	height: 100%;
	margin: 0;
}
#newsImage
{
	background-image: url(../images/bt_code.jpg);
	background-size: cover;
    background-position: 0 0;
}
.animPaper2Roofs h3, #roofs h3, #news h3, #biopergolas h3, #pergolas h3, #awnings h3, #floors h3
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	color: white;
	font-size: 1.5em;
	margin-top: 1.5em;
	position: absolute;	
}
#news h3
{
	font-weight: 700;
	color: #2364a6;
	font-size: 1.9em;
	margin-top: 5.5em;
    margin-bottom: 0.2em;
    position: relative;	
}
#news p
{
	font-weight: 300;
	font-size: 1.6em;
}
#news p br
{
	display: none;
}

#roofsTerrazza, #roofsGlasoase, 
#floors .floorMillboard, #floorMerbau, #floorFiberon,
#pergolas > div, #biopergolas > div
{
	margin: 0;
	width: 50%;
	height: 433px;
	background-repeat:no-repeat;
	background-color: black;
	overflow: hidden;
	position: relative;
	
	transition: background-size 0.4s ease-out;
	background-position: center center;	
}
#roofsTerrazza, 
#floorMillboard, #floorMillboard1, #floorMillboard2, #floorMerbau,
#pergolaArtares, #pergolaPergotex, #pergolaViva
{
	float: left;
}
#roofsGlasoase, 
#pergolaViva, #floorFiberon, #floorMillboard3
{
	float: right;
}
#roofsTerrazza::before, #roofsGlasoase::before, 
#pergolaArtares::before, #pergolaPergotex::before, #pergolaViva::before, 
.floorMillboard::before, #floorMerbau::before, #floorFiberon::before
{
	margin: 0;
	width: 100%;
	height: 433px;
	background-repeat:no-repeat;
	background-color: silver;
	
	overflow: hidden;
	position: relative;
	
	transition: transform 0.4s ease-out;
	background-position: center center;
}
#roofsTerrazza::before, #roofsGlasoase::before
{
	background-position: center -70px;
}
#roofsTerrazza:hover::before, #roofsGlasoase:hover::before, 
#pergolaArtares:hover::before, #pergolaPergotex:hover::before, #pergolaViva:hover::before, 
.floorMillboard:hover::before, #floorMerbau:hover::before, #floorFiberon:hover::before
{
	transform: scale(1.05);
	
}
#floors .floorMillboard, #floorMerbau, #floorFiberon,
#pergolas #pergolaArtares, #pergolas #pergolaPergotex, #pergolas #pergolaViva
{
	width: calc(100% / 3);
}

.floorMillboard::before
{
	content: "";
	background-image: url(../images/photos/millboard_board3.jpg);
	float: right;
	background-size: cover;
}
#floorMillboard1::before
{
	background-image: url(../images/photos/millboard_podlaha_14_big.jpg);	
}
#floorMillboard2::before
{
	background-image: url(../images/photos/millboard_podlaha_8_big.jpg);	
}
#floorMillboard3::before
{
	background-image: url(../images/photos/millboard_podlaha_13_big.jpg);	
}
#floorMerbau::before
{
	content: "";
	background-image: url(../images/photos/merbau_board.jpg);	
	float: left;
	background-size: cover;
}
#floorFiberon::before
{
	content: "";
	background-image: url(../images/photos/fiberon_1s.jpg);	
	float: left;
	background-size: cover;
}

#roofsTerrazza::before
{
	content: "";
	background-image: url(../images/roofsTerrazza2.jpg);	
	float: left;
}

#roofsGlasoase::before
{
	content: "";
	background-image: url(../images/roofsGlasoase2.jpg);
	float: right;
}
#pergolaArtares::before
{
	content: "";
	background-image: url(../images/pergolaArtares.jpg);	
	float: left;
	background-position: center -18px;
}
#pergolaPergotex::before
{
	content: "";
	background-image: url(../images/pergolaPergotex2.jpg);	
	float: left;
	background-position: center -18px;
}
#pergolaViva::before
{
	content: "";
	background-image: url(../images/pergolaViva2.jpg);
	float: right;
	background-position: center -68px;
}


/** end of index page styles **/