@charset "utf-8";

@font-face {
	font-family: 'SF-Compact-Display-Medium';
	src:
		local('SF-Compact-Display-Medium'),
		url('fonts/SF-Compact-Display-Medium.otf') format('opentype');
		
}
@font-face {
	font-family: 'SF-Compact-Display-Regular';
	src:
		local('SF-Compact-Display-Regular'),
		url('fonts/SF-Compact-Display-Regular.otf') format('opentype');
}

html { font-size: 1rem; }
body { font-size: 1rem; } /* =16px */
h1 { font-size: 2.2rem; } /* =35px */
h2 { font-size: 1.8rem; } /* =28px */
h4 { font-size: 1.6rem; } /* =25px */

body {
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	
	-webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
	
	min-width:1200px;
	font-family:"SF-Compact-Display-Medium";
	background-repeat: repeat;
	background-image:url(images/background.jpg);
	padding: 0;
	margin: 0;
	color: #333;
	
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-smooth: auto;
    
}

/*------------------------------------------------------------------feedback----------------------------------------------------*/

.form-area-flex {
	
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	
	-webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
	
	-webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
	
	width: auto;
	height: auto;
	
	}

.form-fields {
	height: 30px;
	width: 400px;
	font-size: 1.6rem;
	border: 4px solid #ccc; /* Параметры границы */
    background: #fff; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
}
.form-fields:hover {
	height: 30px;
	width: 400px;
	font-size: 1.6rem;
	border: 4px solid #ccc; /* Параметры границы */
    background: #f3f3f3; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
}

.form-message {
	height: 300px;
	width: 400px;
	min-width: 400px;
	max-width: 600px;
	font-size: 1.6rem;
	border: 4px solid #ccc; /* Параметры границы */
    background: #fff; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
}
.form-message:hover {
	height: 300px;
	width: 400px;
	min-width: 400px;
	max-width: 600px;
	font-size: 1.6rem;
	border: 4px solid #ccc; /* Параметры границы */
    background: #f3f3f3; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
}
p.form-p {
	font-size: 0.875rem;
	padding: 0 0 0 0px;
    margin-top: 24px;
	
}

.form-button-send {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    
    width: 428px;
    height: 40px;
    padding: 8 8 8 8px;
    margin-top: 40px;
    font-size: 1rem;
    background-color: #1FB400;
	color: #FFF;
	border: none;
}
.form-button-send:hover {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    
    width: 428px;
    height: 40px;
    padding: 8 8 8 8px;
    margin-top: 40px;
    font-size: 1rem;
    background-color: #003CFF;
	color: #FFF;
	border: none;
}
.form-button-send:active {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    
    width: 428px;
    height: 40px;
    padding: 8 8 8 8px;
    margin-top: 40px;
    font-size: 1rem;
    background-color: #0c74bc;
	color: #FFF;
	border: none;
}


/*------------------------------------------------------------------my flex----------------------------------------------------*/

.flex-container,.sidebar-flex,.content-flex,.flex-container-social{
	
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	
}
.flex-container{
	width:auto;
	height:auto;
	
	-webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -webkit-flex-direction:row;
    -ms-flex-direction:row;
    flex-direction:row;
	
	-webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
	
	min-width:1200px;
	min-height:1000px;
	
}
.sidebar-flex{
	
	-webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
	
	-webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
	
	width: 400px;
	min-width:400px;
	height: auto;
	background-color: #003CFF;
	box-shadow: 0.1em 0.1em 5px rgba(122,122,122,0.5);
}
.content-flex{
	
	-webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
	
	width: 770px;
	min-width:770px;
	height: auto;
	background-color: #fff;
	box-shadow: 0.1em 0.1em 5px rgba(122,122,122,0.5);
}
.flex-container-social{
	
	-webkit-justify-content:space-around;
    -ms-flex-pack:distribute;
    justify-content:space-around;
	
	-webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
     align-items:center;
	
	-webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -webkit-flex-direction:row;
    -ms-flex-direction:row;
     flex-direction:row;
	
	width: 200px;
	height: 100px;
	min-width:200px;
	min-height:100px;
	
}

ul{
	width: auto;
	
}

/*------------------------------------------------------------------my flex----------------------------------------------------*/


/*------------------------------------------------------------------my navigation----------------------------------------------*/
li.stay {
	font-size:18px;
	padding: 12px 0px 12px 0px;
	display: block; 
	width: 400px;  
	text-decoration: none;
	text-align:center;
	color: #FFF;
	background-color: #0037D3;

}
nav ul{
	list-style: none; 
	margin-bottom: 15px; 
}
nav a, nav a:visited {
	font-size:18px;
	padding: 12px 0px 12px 0px;
	display: block; 
	width: 400px;  
	text-decoration: none;
	text-align:center;
	color: #FFF;
	background-color: #003CFF;
}
nav a:hover, nav a:active, nav a:focus {
	background-color: #0037D3;
	color: #FFF;
	
}
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
/*------------------------------------------------------------------my navigation----------------------------------------------*/

/*------------------------------------------------------------------my defoult link color----------------------------------------------*/
a:link {
	color: #003CFF;
}
a:visited {
	color: #ff0000;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}
/*------------------------------------------------------------------my defoult link color----------------------------------------------*/

/*------------------------------------------------------------------my link color----------------------------------------------*/
a.navigation:link {
	color: #fff;
}
a.navigation:visited {
	color: #fff;
}
a.navigation:hover, a:active, a:focus { 
	text-decoration: none;
}
/*------------------------------------------------------------------my link color----------------------------------------------*/
/*------------------------------------------------------------------social----------------------------------------------------*/
.be,.be:hover,.db,.db:hover,.dd,.dd:hover {
	
	
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

}
.be {
	width: 54px;
	height: 54px;
	background: #FF0000;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	background-image: url(images/be.png);
}
.be:hover {
	width: 54px;
	height: 54px;
	background: #FFF453;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	background-image: url(images/be.png);
	background-position: right 54px;
	
}
.db {
	width: 54px;
	height: 54px;
	background: #FFF;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	background-image: url(images/db.png);
	
}
.db:hover {
	width: 54px;
	height: 54px;
	background: #FFF;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	background-image: url(images/db.png);
	background-position: right 54px;
}
.dd {
	width: 54px;
	height: 54px;
	background: #FFF;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	background-image: url(images/dd.png);
}
.dd:hover {
	width: 54px;
	height: 54px;
	background: #FFF;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	background-image: url(images/dd.png);
	background-position: right 54px;
}
.be:hover,.db:hover,.dd:hover {
	transition:all 0.3s ease;
	
	-webkit-animation: swing 1s ease;
    animation: swing 1s ease;
    
	-webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}
/*------------------------------------------------------------------social----------------------------------------------------*/

p.disclaimer {
	font-family:"SF-Compact-Display-Regular";
	font-size: 0.625rem;
	line-height:180%;
    color:#ccc;
	
	
}

p {
	font-family:"SF-Compact-Display-Regular";
	text-indent: 0px;
    font-size: 1rem;
	line-height: 180%;
	padding-right: 50px;
	padding-left: 50px;
	padding-top: 0px;
	padding-bottom: 0px;
	color:#333;
	
}
p.caption {
	font-size: 1.25px;
	
}
p.contentText {
	font-family:"SF-Compact-Display-Regular";
	text-indent: 25px;
	font-size: 1rem;
	line-height: 180%;
	padding-bottom: 10px;
	
}
p.contentText_bullet {
	font-family:"SF-Compact-Display-Regular";
	line-height: 180%;
	padding-bottom: 0px;
	
}
p.copyright{
	color: #fff;
	font-size: 0.9rem;
}
p.update{
	color: #ff0000;
	font-size: 40px;
}

a img { 
	border: none;
}
img { max-width: 100%; height: auto; overflow: hidden; }

h1, h2, h3, h4, h5, h6  {
	padding-right: 50px;
	padding-left: 50px;
	padding-top: 5px;
	padding-bottom: 0px;
	color:#333;

}


.breaker{
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	height:200px;
	width:770px;
	}
	
.topbreaker{
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	height:40px;
	width:770px;
	}

/*------------------------------------------------------------------my flex 1200 px----------------------------------------------------img{max-width:100%;height:auto;}*/
/*

@media (min-width: 640px) { body {font-size:1rem;} }
@media (max-width: 640px) { body {font-size:1.2rem;} } 
@media (min-width: 960px) { body {font-size:1.4rem;} }

*/ 
 

@media (max-width:1200px){
img{width:100%;height:auto;}

p {
	font-family:"SF-Compact-Display-Regular";
	font-size: 1.6rem;
	line-height:180%;
	padding-bottom: 10px;
	min-width:600px;
	
}
	
p.contentText {
	font-family:"SF-Compact-Display-Regular";
	text-indent: 1.625rem;
	font-size: 1.6rem;
	line-height:170%;
	padding-bottom: 10px;
	min-width:600px;
	
}

p.caption {
	font-size: 2.4rem;
	
}

.align-gallery {
	
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	
	-webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
	
	}
	
	

body {
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	
	-webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
	
	
	font-family:"SF-Compact-Display-Medium";
	background-repeat: repeat;
	background-image:url(images/background.png);
	padding: 0;
	margin: 0;
	color: #333;
	
	font-smooth: auto;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	min-width:auto;
    
}

.flex-container{
	width:auto;
	height:auto;
	min-width:auto;
	
	-webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
	
	-webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
	
}

.sidebar-flex{
	
	-webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
	
	-webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
	
	width: auto;
	height: auto;
	background-color: #003CFF;
	box-shadow: 0.1em 0.1em 5px rgba(122,122,122,0.5);
}
.content-flex{
	
	-webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
	
	width: auto;
	height: auto;
	background-color: #fff;
	box-shadow: 0.1em 0.1em 5px rgba(122,122,122,0.5);
	min-width:770px;
}

/*------------------------------------------------------------------my navigation----------------------------------------------*/
li.stay {
	font-size: 2rem;
	padding: 12px 0px 12px 0px;
	display: block; 
	width: 600px;  
	text-decoration: none;
	text-align:center;
	color: #FFF;
	background-color: #0037D3;
}

nav ul{
	list-style: none; 
	margin-bottom: 15px; 
}

nav a, nav a:visited {
	font-size: 2rem;
	padding: 12px 0px 12px 0px;
	display: block; 
	width: 600px;  
	text-decoration: none;
	text-align:center;
	color: #FFF;
	background-color: #003CFF;
}

nav a:hover, nav a:active, nav a:focus {
	background-color: #1D58FF;
	color: #FFF;
}

ul, ol, dl { 
	padding: 0;
	margin: 0;
}
/*------------------------------------------------------------------my navigation----------------------------------------------*/

/*------------------------------------------------------------------my flex 1200 px----------------------------------------------------*/


/* CSS Rotate */
.rotate {
	
	-webkit-animation-name: spin;
    -webkit-animation-duration: 8000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 8000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 8000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
 
    animation-name: spin;
    animation-duration: 8000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
/* CSS Rotate */