a 
{ 
	text-decoration: none; 
	/*color:#B8860B;*/
}
a:hover
{
	/*color:#A0522D;*/
}



body
{


}



/* flex боксы */

.flex_center
{

    
    /*margin-top:5px;*/
	/*border:2px dotted red;*/
	display: flex; 
	flex-direction: row; /*слева направо*/
	flex-wrap: nowrap; /*однострочный*/
	justify-content: center; /*элементы выравниваются по центру*/
	-webkit-justify-content: center; /* Safari */
	align-items: stretch; /*Flex-элементы заполняют всю высоту (или ширину) от поперечного начала к поперечному концу flex-контейнера.*/
	align-content: center; /*строки выравниваются по центру контейнера;*/

}

.flbox1
{
    width: 150px;
    -webkit-flex-grow:1;
            flex-grow:1;

    border:2px solid #bebebe; 
    margin: 10px;
    padding: 0 20px 20px;
    border-radius: 20px;
    background-color: rgba(237, 237, 237, 0.60);        
}

/* end flex боксы */



.fbox
{
    border:2px solid #bebebe;
    padding: 0 15px 15px 15px;
    border-radius: 20px;
    margin: auto 15%;
    background-color: rgba(232, 232, 232, 0.8);
}

.fbox2
{
    padding: 0 15px 15px 15px;
    margin: auto 15%;
}
.fbox3
{
    border:2px solid #7cfc00;
    padding: 15px;
    margin: auto 15%;
}

/* Шрифты */
.font1
{
    
    font-size: 3.7em;
    font-weight: bold;
    /*line-height: 2;   */
    color: #000;
}

.font2
{
    font-size: 2.7em;
    /*line-height: 1;   */
    color: #000;
}

.font3
{
    
    font-size: 1.8em;
   /* line-height: 1;  */ 
    color: #000;
}

.font4
{
    
    font-size: 1.6em;
    /*line-height: 1;   */
    color: #000;
}

.font5
{
    
    font-size: 1.5em;
    /*line-height: 1;   */
    color: #000;
}

.ta1
{
    text-align:center;
}
.ta2
{
    text-align:left;
}


/* end Шрифты */

#container

{
	/*border:2px solid #7cfc00;*/
	/*width: 970px;*/
	/*position: relative;*/
/*	margin: 0 auto;*/
    font-family: "PT Sans Narrow", "PT Sans", Arial, Helvetica;
    text-align: center;
}


#menu li {
	display:inline-block;
	margin: 10px;
	color: #000;
	background:#fff;
	background: rgba(255,255,255, 0.5);
	-webkit-border-radius: 5px;
            border-radius: 5px;
}
#menu li.active{
	background:#666;
	background: rgba(0,0,0, 0.5);
	color: #fff;
}
#menu li a{
	text-decoration:none;
	color: #000;
}
#menu li.active a:hover{
	color: #000;
}
#menu li:hover{
	background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
	padding: 5px 18px;
	display:block;
}
#menu li.active a{
	color: #fff;
}
#menu{
	position:fixed;
    top:0;
    left:0;
	height: 40px;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin:0;
}



#section0
{
    background: url(../img/tetra.png) no-repeat 50% 0;
    background-size: cover;
    background-attachment: fixed;
  
}


#section1
{

    height:100%; background: url(../img/puzzle2.png) no-repeat 50% 0;
    background-size: cover;
    background-attachment: fixed;
    
}


#section2
{

    height:100%; background: url(../img/puzzle.png) no-repeat 50% 0;
    background-size: cover;
    background-attachment: fixed;
    
}

#section3
{

    height:100%; background: url(../img/tetra.png) no-repeat 50% 0;
    background-size: cover;
    background-attachment: fixed;
    
}

/*---Модальные окна---*/

form {
    text-align: center;
    padding: 10px 10px;
    border-radius: 5px;
}


.modal1 
{
    border:1px solid #888888;
    background: #c7c7c7;   
    display: inline-block;
    padding: 0 20px;
    border-radius: 5px;
    color: #000;
    font-size: 0.9em;
}


.bt2 {
    margin-top: 10px;
    background: #ffffff;
    font-weight: bold;
    color: #000000;
    padding: 10px 10px 5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    text-align: center;
    /*display: inline-block;*/
    border-radius: 5px;    
}


/*- Размер модального окна (Получить код)-*/
body .am-expanded.am-modal.modal2 {
    top: 30%;
    width: 400px;
    margin-left: -200px;

}

body .am-expanded.am-modal.modal2 .am-expanded.am-back {

    width: 400px;
    border-radius: 10px;
}
/*- end Размер модального окна (Получить код)-*/

/*- Размер модального окна (Войти)-*/
body .am-expanded.am-modal.modal3 {
    top: 30%;
    width: 400px;
    margin-left: -200px;

}

body .am-expanded.am-modal.modal3 .am-expanded.am-back {

    width: 400px;
    border-radius: 10px;
}
/*- end Размер модального окна (Войти)-*/


/*---end Модальные окна---*/

.bt1
{	
	cursor: pointer;
    display: inline;
	border:2px solid #000; 
	border-radius: 7px;
/*	text-align:center;*/
	padding: 2px 20px;
	color:#000;
	font-size:1.8em;
/*width: 200px;*/
}

.bt2
{	
	cursor: pointer;
    display: inline;
	border:1px solid #000; 
	border-radius: 5px;
/*	text-align:center;*/
	padding: 3px 20px;
	color:#000;
	font-size:1.0em;
/*width: 200px;*/  

}

.shadow
{
	
}

.shadow:hover
{
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(0, 0, 0, 0.60);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(0, 0, 0, 0.60);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(0, 0, 0, 0.60);
    outline: 0;
   

}

#pass_box
{
	width:200px;
	height:30px;
    border: 1px #CCCCCC solid;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    background-color: #FFFFFF;
    background-image: none;
    color :#000000;
    font-weight: normal;
    font-size: 20px;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
}

#pass_box:focus
{
    border-color: #A0522D;
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(160,82,45,0.60);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(160,82,45,0.60);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(160,82,45,0.60);
    outline: 0;
}

@media only screen and (min-width: 720px) and (max-width: 969px)
{
.font1
{
    font-size: 2.0em;
}    

.font2
{
    font-size: 1.5em;
}

.font3
{
    
    font-size: 1.1em;
}

.font4
{
    font-size: 0.9em;
}

.font5
{
     font-size: 0.9em;

}
    
.bt1
{	
	font-size:0.9em;
}
    
    
}

@media only screen and (min-width: 480px) and (max-width: 719px)
{
.font1
{
    font-size: 1.5em;
}    

.font2
{
    font-size: 1.2em;
}

.font3
{
    
    font-size: 1.0em;
}

.font4
{
    font-size: 0.8em;
}

.font5
{
     font-size: 0.8em;

}    
.bt1
{	
	font-size:0.8em;
}
    
}

@media only screen and (max-width: 479px)
{

.font1
{
    font-size: 1.3em;
}    

.font2
{
    font-size: 1.0em;
}

.font3
{
    
    font-size: 0.8em;
}

.font4
{
    font-size: 0.6em;
}

.font5
{
     font-size: 0.6em;

}    
.bt1
{	
	font-size:0.6em;
}    

#menu
{	
	font-size:0.6em;
}        
    
}