/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

/* NEW CSS */
body { font-family:'Open Sans', sans-serif; color:#000; font-size:16px; font-weight:400; background-color:#fff; position:relative; }
a { font-family:'Open Sans', sans-serif; color:#000; font-size:17px; text-decoration:none; }
a:hover { font-family:'Open Sans', sans-serif; color:#000; font-size:16px; text-decoration:none;}

a, img, input, button, textarea, select { outline:none; }

* { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
.clearfix:after { clear:both; content:""; display:block; font-size:0; height:0; visibility:hidden;}

#wrapper { position:relative; margin:auto; overflow: hidden; width: 100%}

.wrapper { width:980px; margin:auto; position:relative; z-index:1; }

.fl { float:left}
.fr { float:right}

button, a, .trans {
	-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease;
}

a.btn { font-family:'Open Sans', serif; position:relative; background: #fff; height: 44px; line-height: 44px; padding: 0 25px; color: #000; display: inline-block; border-radius: 10px;}
a.btn:hover {font-size: 16px; color: #fff; background:#2A579A;}
a.btn-news { color: #fff; background: #2A579A; margin-top: 35px;}
a.btn-news:hover {background: #cfa256;}
a.btn-info { color: #fff; background: #2A579A; width: 265px;	display: block;	margin-left: auto; margin-right: auto; text-align: center;}
a.btn-info:hover {background: #cfa256;}



.content p { padding-bottom:16px}


/* HEADER */
#header  { position:fixed; left:0; top:0; right:0; z-index:11; border-bottom: 1px solid rgba(255,255,255,0.3); padding: 10px 0}
#header .wrapper { width:1200px;}

#header .logo { float:left}
#header .logo img { display:block; }

#header .menu { float:right;  }
/* #header .menu ul { } */
#header .menu li { float:left; list-style-type:none; margin-left: 20px; margin-top:20px}
#header .menu li a { color: #fff; padding-bottom: 10px;}
#header .menu li a:hover, #header .menu li a.active { color:#cfa256; }
#header .menu-link {font-size: 18px;}
div.menu ul li a { position: relative; }
div.menu ul li a:after{ position: absolute;  bottom: 0;  left: 0;  right: 0;  margin: auto;  width: 0%; content: '.';  color: transparent;  background: #cfa256;  height: 1px;}
div.menu ul li a:hover:after { width: 100%;}



#header .toggle-nav { display:none; float:right; position:relative; z-index:12; width:40px; height:40px; top:13px; margin-right:0  }
#header .toggle-nav i { position:absolute; display:block; height:2px; background:#fff; width:30px; right:5px; }

#header .toggle-nav i:nth-child(1) { top:10px; }
#header .toggle-nav i:nth-child(2) { top:19px; }
#header .toggle-nav i:nth-child(3) { top:28px; }

#header .toggle-nav.active i:nth-child(1) { top:19px; -webkit-transform:rotateZ(45deg); -moz-transform:rotateZ(45deg); -o-transform:rotateZ(45deg); transform:rotateZ(45deg); }
#header .toggle-nav.active i:nth-child(2) { background:transparent; }
#header .toggle-nav.active i:nth-child(3) { top:19px; -webkit-transform:rotateZ(-45deg); -moz-transform:rotateZ(-45deg); -o-transform:rotateZ(-45deg); transform:rotateZ(-45deg); }


#header.downscroll { background-color: #2A579A; box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.15);}





.block { padding: 60px 0}
.block-news {padding-top: 0px;}
.block .block-header { font-weight: bold; font-size: 36px; padding: 30px 0; text-align: center}
.block .block-content h3 {font-size: 28px;}
.block .block-content p {padding: 15px 0; font-size: 20px;}





/* FIRST SCREEN */
.bg-parallax { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; min-height: 90vh; overflow: hidden; position: relative; padding-top: 120px}
.bg-parallax:before {
    background-color: rgba(0, 0, 25, 0.6);
    content: ""; position: absolute;
    height: 100%; width: 100%;
    left: 0; top: 0; z-index: 0;
}
.bg-parallax:after { content:''; background: url(../images/waves-bottom.png); background-position:100% 0; height: 200px; width: 100%; position: absolute; left: 0; bottom: -15px;}


.bg-parallax .logo { text-align: center; padding-bottom: 50px}
.bg-parallax .slogan { text-align: center; font-size: 36px; color: #fff; font-weight: normal; padding-bottom: 50px}
.bg-parallax .button { text-align: center; }


.p-anim { left: 60%; position: absolute; width: 50%; bottom: 0}
.p-anim div { position: absolute;; bottom: 0; overflow: hidden; border-radius: 15px 15px 0 0}
.p-anim div img { display: block}
.p-anim .p-center { z-index:3; left: 130px}
.p-anim .p-left { z-index:1; left: 0;}
.p-anim .p-right { z-index:1; left:380px }



.file-list { padding-top: 40px}
.file-list .file-item { float: left; width: 48%; margin-bottom: 6%; position: relative}
.file-list .file-item:nth-child(2n) { float: right; width: 47%;}

.file-list .file-item .over { background: #2A579A; color: #fff; position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; opacity: 0; text-align: center; text-transform: uppercase; font-weight: bold}
.file-list .file-item:hover .over {opacity: 1}


.file-list .file-item a { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1}
.file-list .file-item .icon-thumb { background: url(../images/dots.png); position: relative}

.file-list .file-item .icon { float: left; width: 50%; text-align: center; padding:10px 0}
.file-list .file-item .thumb { float: right; padding: 5px 0 5px 0; background: #2A579A}
.file-list .file-item .thumb img { left: -5px; position: relative; display: block}
.file-list .file-item .name { text-align: center; padding: 10px 0 0 0;  font-weight: bold}

#scroll-work { background: linear-gradient(0.25turn, #2A579A, #ebf8e1, #cfa256);; color: #000; overflow: hidden;}

#scroll-work .left-part { width:50%; }
#scroll-work .block-header { text-align: left}

#scroll-about { background-image: url("../images/map.png"); background-repeat: no-repeat; background-position: 50% 20%; }
#scroll-about-info { background-image: url("../images/map.png"); background-repeat: no-repeat; background-position: center; background-size: auto; }
#scroll-about h3 { color:#b2b3b6; font-size: 36px; text-align: center}
#scroll-about blockquote { padding-left: 20px; border-left:10px solid #2A579A; font-size: 36px; font-weight: bold; max-width: 680px; margin:60px auto; line-height: 1.2}


#scroll-about .comment { border-top: 1px solid #e2e3e4; max-width: 680px; padding: 40px 0 40px 90px; margin:160px auto 0 auto; background-image: url("../images/icon-comment.svg"); background-position: 0 50%; background-repeat: no-repeat; background-size: auto 60px; text-align: left}
#scroll-about .comment p { font-size:14px}
#scroll-about .comment-info { max-width: 680px; padding: 40px 0 40px 90px; margin:160px auto 0 auto;  background-position: 0 50%; background-repeat: no-repeat; background-size: auto 60px; text-align: left}

#scroll-contact { background: #f5f5f5}


#scroll-contact .address { float: left; color: #808080; font-size: 15px; padding: 20px 0 20px 50px; background-image: url("../images/icon-location.svg"); background-repeat: no-repeat; background-size: auto 40px; background-position: 0 50%}
#scroll-contact .contact { float:right; text-align: right}
#scroll-contact .contact .phone {color: #808080; font-size: 15px; }
#scroll-contact .contact .email { padding-top: 15px; font-size: 24px; color: #2A579A }



#scroll-contact .line { padding: 20px 0; border-top:1px solid #e2e2e2}
#scroll-contact .line .logo { float: left}
#scroll-contact .line .info { float:left; margin-left: 20px; color:#808080; font-size: 15px; line-height: 1.2; padding-top:25px}

/* WEB FORM */
.web-form { margin:auto; }

.web-form .col { float:left; width:48%}
.web-form .col:nth-child(2) { float:right; width:48%}

.web-form .field { padding:20px 0}
.web-form .field label { display:block; padding-bottom:10px}
.web-form .field input { background:#eee; padding:0 10px;  border:none; border:1px solid #eee; height:50px; width:100%; color:#999; font-size:14px; font-weight:400}
.web-form .field textarea { background:#eee; padding:10px; border:none; border:1px solid #eee; min-height:150px; width:100%; color:#999; font-size:14px; font-weight:400; display:block;}

.web-form .checkbox {  padding:10px 0; }
.web-form .agree { font-size:12px; padding:10px 0 }
.web-form .agree a { color:#f09d03; text-decoration:underline; font-size:12px;}

.web-form .field.col { float:left; width:49%}
.web-form .field.col:nth-child(2n) { float:right}

.web-form .button { padding-top:10px; text-align:right}
.web-form .button button { height:50px; border:2px solid #e09900; color:#e09900; padding:0 20px; font-size:20px; background:none; overflow: hidden; position: relative; cursor: pointer}
.web-form .button button:hover { border-color:transparent; background:#eee; padding-right: 34px}

.web-form .button button:after { content:''; display: inline-block; width: 14px; height: 14px; background-image: url("../images/right-arrow-orange.svg"); background-repeat: no-repeat; background-position: 50% 50%; margin-left: 5px; position: absolute; right: 100px; top: 15px; opacity: 0; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease;}
.web-form .button button:hover:after { right: 10px; opacity: 1}


/* POP */
.no-scroll { overflow:hidden}
.no-scroll #header { display:none}

.pop-overlay { display:none; position:fixed; left:0; right:0; top:0; bottom:0; z-index:100; }
.pop-overlay.scroll { overflow-y:scroll}
.pop-overlay .overlay { position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.8); z-index:1;}
.pop-overlay .pop-wrapper { width:480px; left:50%; top:100px; transform:translate(-50%, 0); padding-bottom:40px; z-index:100; position:relative; }
.pop-overlay .pop-wrapper .close { position:absolute; right:-30px; top:-40px; color:#fff; font-size:36px; transform:rotate(45deg);}
.pop-overlay .pop-wrapper .pop-header { background:#fff; position:relative; text-align:center; padding:20px 20px 0 20px }

.pop-overlay .pop-wrapper .border { border:1px solid #000;  }

.pop-overlay .pop-wrapper .pop-header .logo { text-align:center}
.pop-overlay .pop-wrapper .pop-header .logo img{ height:80px }


.pop-overlay .pop-wrapper .pop-content { padding:20px; background:#fff }



/* FOOTER */




/* RESPONSIVE */

@media (max-width:1200px) {
	.wrapper { width:100% !important; padding:0 10px}
}

/* Portrait tablet to landscape and desktop */
@media (min-width:768px) and (max-width:979px) {
	.wrapper { width:100% !important; padding:0 10px}

}



/* Landscape phone to portrait tablet */
@media (max-width:767px) {
	.wrapper { width:100% !important; padding:0 10px;}

	#header .menu { position: absolute; background: #2A579A; width: 280px; right: -280px; top:81px}
	#header .menu li { display:block; float:none; margin:0; text-align:center; border-bottom: 1px solid rgba(255,255,255,0.3); border-left: 1px solid rgba(255,255,255,0.3)}
	#header .menu li a { display:block; padding: 10px;}

	#header .menu.active { right: 0 }

	#header .toggle-nav { display:block}

	.bg-parallax { height: 100vh}
	.bg-parallax .logo img { height:160px}
	.bg-parallax .slogan { font-size:22px}

	#scroll-about h3 { font-size: 22px}
	#scroll-about blockquote { font-size: 22px }

	.file-list .file-item { float: none !important; width: 100% !important; margin-bottom: 6%; }

	#scroll-work .left-part { width: 100%}
	.p-anim {
		position: relative;
		bottom: 0;
		height: 270px; width: 320px; margin: auto; left:auto
	}

.p-anim div img { display: block}
.p-anim .p-center { z-index:3; left: 50px}
.p-anim .p-center img { height: 270px;}

.p-anim .p-left { z-index:1; left: 0;}
.p-anim .p-left img { height: 170px;}

.p-anim .p-right { z-index:1; right:0; left: auto}
.p-anim .p-right img { height: 170px;}

	#scroll-contact .address { float: none; }
	#scroll-contact .contact { float:none; text-align: left}

	#scroll-contact .line .logo { float:none; text-align: center}
	#scroll-contact .line .info { float:none; text-align: center; margin: 10px 0 0 0; padding-top: 15px;}
}

/* Landscape phones and down */
@media (max-width:480px) {
	.wrapper { width:100% !important; padding:0 10px;}


	.file-list .file-item .thumb { display:none}
	.file-list .file-item .icon { float:none; width: 100%}

	.block .block-header { font-size:32px;}

	.pop-overlay .pop-wrapper { width:calc(100% - 20px);   }
	.pop-overlay .pop-wrapper .close {  right:0; }
}


/* NEWS */
/* accordion */

.visually-hidden {	position: absolute !important;	clip: rect(1px 1px 1px 1px);	/* IE6, IE7 */	clip: rect(1px, 1px, 1px, 1px);	padding: 0 !important;	border: 0 !important;	height: 1px !important;	width: 1px !important;	overflow: hidden;}
.accordion {	width: 100%;	margin-bottom: 10px;}
.accordion__control {	display: flex;	align-items: center;	justify-content: space-between;	list-style: none;	padding: 20px;}
.accordion__control::-webkit-details-marker {	display: none;}
.accordion__title {	margin: 0;}
.accordion__icon {	position: relative;	display: inline-block;	width: 30px;	height: 30px;	border-radius: 100%;	background-color: #2A579A;}
.accordion__icon::before {	content: "";	position: absolute;	left: 50%;	top: 50%;	width: 50%;	height: 2px;	background-color: #fff;	transform: translate(-50%, -50%);}
.accordion__icon::after {	content: "";	position: absolute;	left: 50%;	top: 50%; width: 2px;	height: 50%;	background-color: #fff; transform: translate(-50%, -50%);}
.accordion__content {	padding: 20px;}
.accordion[open] .accordion__icon {	transform: rotate(45deg);}

/* @media (min-width: 768px) {
	.post-item {
		 flex-basis: 50%;
		 flex-shrink: 0;
	}
} */
@media (min-width: 960px) {
	.post-item {
		 flex-basis: 33.333333333%;
	}
}