html {
  scroll-behavior: smooth;
}


body {
	background-color: #F0F0F0;
	font-family: 'montserrat', sans-serif;
    font-weight: 400;
    line-height: 1.4;
}
a, a:visited {
	color: #056DFF;
	text-decoration: none;
}


a:hover, a:focus, a:active {
	color: #cc0000;
}

/* Removing The Dotted Outline */

a:focus {
	outline: thin dotted;
}

a:hover, a:active {
	outline: 0;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
/* #region [ rgba(0,35,139,0.2)]  */ 

.anchor_item:before {
	content: "";
	display: block;
	padding-top: 90px; /* header height + empty space */
	margin-top: -64px; /* header height to degrees padding’s space */
	}


	.anchor_top {
		
		display: block;
position: absolute;
top:-150px;
		}

.site-header { 
margin:0;
padding: 0;
width: 100%; 
color: #000e4c;
		 /*
	position: fixed;    
    background-color: #F1F1EF;    
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.6); 
     */
}

.primary-text {	
max-width: 1240px;
width: 100%;
margin: 0;
padding-top: 0.8rem;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
  
.primary-text a  {
margin: 0 0 0.4rem 0; 
padding: 0;  
font-family: 'Gentium Book Basic', serif;
font-size: 1.2rem;   
letter-spacing: 0.6px;
font-weight: normal;
line-height: 1.4;   
display: block;
text-align: right;
color: white;
	}
	
#slide-navbar {	
	background-color: #F4F4F4;
  top: -74px;
	position: fixed;	
	width: 100%;
	display: block;
	transition: top 0.3s;
	z-index: 2;	
	padding-top: 0.6rem;
	border-bottom: 1px solid #989898;
	}

.slide-navbar-wrap {
	max-width: 1240px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		width: 100%;
	}

	.slide-navbar-wrap > div:nth-child(2) ul li a {
	margin: 0 0 0.4rem 0; 
	padding: 0;  
	font-family: 'Gentium Book Basic', serif;
	font-size: 1.2rem;   
	letter-spacing: 0.6px;
	font-weight: normal;
	line-height: 1.4;   
	display: block;
	text-align: right;
	color: #3D3D3D;
}

  
.logo {
margin: 0 0 0 1.6rem;
}

.logo a {
color: #000e4c;
}

.logo a:hover {
color: #cc0000;
}  
.logo h1 {
display: inline-block;
font-size: 1.2rem;
margin:0;
font-family: 'Gentium Book Basic', serif;
font-weight: normal;
line-height: 1.4;
}

.inline { 
	display: inline-block;
	margin: 0.4rem 0.6rem 0.4rem 0.6rem;
	}

.top-navigation {	
	display: none;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/

.hamburger {
position: relative;
min-width: 132px;
text-align: center;
display: inline-block; 
padding-top: 0.88rem;
}
  
.dropdown-content {  
display: none;   
position: absolute; 
min-width: 100%;
background-color: rgba(255, 255, 255, 0.938);  
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  
z-index: 99999;
right: 4px;
}
  
.dropdown-content a {
color: #3D3D3D;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
  
/* Change color of dropdown links on hover */
  .dropdown-content a:hover {
background-color: #f1f1f1}
  
.hamburger:hover .dropdown-content {
display: block;
}


/* #endregion*/

/* #region [ rgba(6,10,19,0.7)]  */ 

/* ---------------- Landing Header ---------------*/
.landing-container {
text-align:center;
}

.landing-header {
margin: 0;
width: 100%;
height: 600px;  
text-align: center; 
color: rgb(24, 24, 24);  
	
}
.header-text-wrap {
height: 480px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;   
}
.landing-header {
background: transparent url(img/03mobile.jpg) no-repeat scroll top center; 
}

.landing-header h1 {
margin: 0.8rem 0.4rem;
padding: 0;
font-size: 2.4rem;
letter-spacing: 1px;
line-height: 1.6;
font-weight: bold;
color: white;  
text-transform: uppercase;
letter-spacing: 2px;
}

.landing-header h2 {
margin: 0.5rem 0.5rem;
font-size: 1.1rem; 
padding: 0;  
letter-spacing: 0px;
line-height: 1.6;
font-weight: normal;
color: white;  
}

.landing-header h3 {
margin: 0.5rem 0.5rem;
font-size: 1.2rem; 
padding: 0;  
letter-spacing: 1px;
line-height: 1.6;
font-weight: bold;
}

.landing-header p {
  margin: 0.6rem 0 1rem 0; 
  padding: 0;  
  font-family: 'Gentium Book Basic', serif;
  font-size: 1.3rem;   
  letter-spacing: 1px;
  font-weight: normal;
  line-height: 1.6;     
}

/* ---------------- Main Landing ---------------*/

.main-landing {
grid-area: main;   
width:100%;
padding: 0;

}

.main-landing-container {
margin: 1.5rem 0.6rem;
max-width: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}

.main-landing h1 {  
  font-size: 2.2rem;
  line-height: 1.6;
  font-weight: normal;
  text-align: center;
  margin: 1.5rem 0;  
}

.main-landing h2, .gallery-header {  
  margin: 1rem 0 0.6rem 0;  
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.4; 
  text-align: center;  
  color: #3F3F3F;
}

.main-landing h3 { 
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: normal;
  text-align: center;
  margin: 0.9rem 0.6rem;
}


.main-landing h4 {
  margin: 0 0 0.6rem 0;
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: normal;
  text-align: center;  
}

.main-landing-container p {
  margin: 0 0.25rem 2rem 0.6rem;
  font-size: 0.94rem;
  line-height: 1.65;
  color: #1a1a1a;
  text-align: left;
}

.main-landing-container div {
  width: 100%;
}

.landing-frame {
  margin: 0.6rem 0.8rem;
  max-width: 370px;
  background-color: #fff;
  box-shadow: 0 0 12px 1px rgba(82, 82, 82, 0.4); 
  
}

.landing-center { 
  display: block;
  margin: 1rem auto 0.2rem auto;
}


/* ---------------- Middle Landing ---------------*/
.middle-photo-container {
	margin: 0;
	background: transparent url(img/p1mobile.jpg) no-repeat center center; 
	background-size: cover;
	background-attachment: fixed;
	min-height: 200px;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;	
	}

.middle-photo-container p{
padding: 0 0.4rem;
color:white;
font-size: 1.4rem;
line-height: 1.65;
font-weight: bold;
}

.four-frames-grid {
	display: grid; 
	grid-template-columns: 1fr;
	grid-auto-rows: auto;	
	grid-gap: 8px;	
	text-align: center;
	padding: 0.6rem 0.8rem;
	align-items:center;
	justify-content: center;

}

.four-frames-grid div  {
	justify-self: center;
}

.single-frame {
margin: 0.4rem 0;	
padding: 0;	
max-width: 320px;
background-color: #F4F4F4;
box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);

}

.single-frame-team {
	margin: 0.4rem 0;	
	padding: 0;	
	max-width: 260px;
	background-color: white;
	box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);	 
}

.single-frame h3, ..single-frame-team h3 {
	font-size: 1.1rem;
	line-height: 1.4;
	font-weight: bold;
	text-align: center;
	margin: 0.9rem 0.6rem;
}

.single-frame p, .single-frame-team p {
padding: 0 0.4rem;
font-size: 0.85rem;
line-height: 1.65;
font-weight: normal;
}


.another-photo-container {
margin: 0;	
background: transparent url(img/p6mobile.jpg) no-repeat center center; 
background-size: cover;
background-attachment: fixed;
min-height: 400px;
display: flex;
flex-flow: column nowrap;
justify-content: center;	
align-items: center;
}

.another-photo-container h2 {
	color:white;
	text-align: left;
}

.photo-container {
	padding: 0 0.6rem;
	text-align: left;
	max-width: 600px; 
 
}

.another-photo-container div:nth-child(1)  {
	max-height: 300px; 
}


.another-photo-container div:nth-child(2)  {
	margin: 0 0 2rem 0;
}

.video-container {
	padding: 1rem;
	text-align: left;
	max-width: 600px;
 min-height: 350px;
 margin: 1rem 0;
}


.another-photo-container p{
padding: 0 0.4rem;
color:white;
font-size: 0.95rem;
line-height: 1.65;
font-weight: normal;
}

/* ----------------Button ---------------*/

.text-button {
border: 1.5px solid white;
/*
height: 40px;
width: 140px;*/
max-width: 160px;
display: block;
}

.text-button a {
	color:white;
	width:100%;	
	height:100%;
	font-size: 0.75rem;
	text-transform: uppercase;	
	line-height: 1.4;
	padding: 0.6rem;
  display: block;
	text-align: center;
	margin: 0;
}

.text-button:hover{
	background-color:white;
	}

.text-button a:hover{
		color:gray;		
}

.white-wrap {
background-color: #FEFEFE;
width: 100%;
margin:0;
padding: 2rem 0 4rem 0;
}

.space {
padding: 2rem 0 4rem 0;
width: 100%
}

.two-columns-box {
	margin: 0 auto;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	max-width: 1280px;	
	
}

.two-columns-box-text{ 
	max-width: 800px;
	padding: 0.6rem;
}

.two-columns-box-text h3 {
	margin: 2rem 0;
	text-align: left;
}

.two-columns-box-text p {
font-size: 0.85rem;
text-align: left;

}

.two-columns-box-image{ 
	max-width: 736px;
	padding: 0.6rem;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	padding: 0 1rem;
}

.contacts-blocks {
	display: flex; 
flex-flow: column nowrap;  
justify-content: space-around;  
align-items: center; 
}

hr.line {
	margin: 0 auto;
	border-top: 1px solid gray;
	color: gray;
	max-width: 220px;
}




/* #endregion*/


/* ---------------- Gallery ---------------*/

.gallery-container {
  grid-area: gallery;  
  text-align: center;
}

.gallery-container h2{
margin: 1.2rem 2.8rem;
font-size: 1.6rem;
font-weight: bold;
line-height: 1.8;
text-align: center;
color: #3F3F3F;
}

.gallery-wrap {   
  max-width: 1080px;
  padding: 0 1rem;  
  margin: 0 auto; 
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.gallery {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;  
}

.gallery a img {  
  width: 100%;
  height: auto;
  border: 2px solid #fff;
  -webkit-transition: -webkit-transform .15s ease;
  -moz-transition: -moz-transform .15s ease;
  -o-transition: -o-transform .15s ease;
  -ms-transition: -ms-transform .15s ease;
  transition: transform .15s ease;
  
}

.gallery a:hover img {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  z-index: 5;
}




/* #region [ rgba(0,35,139,0.2)]  */ 

/* ---------------- Footer ---------------*/

.site-footer {    
    margin:0;
    padding: 0.6rem 0;  
    text-align: center;	
    font-size: 1rem;
    background-color: #21282E;
}

.site-footer p {
margin: 1rem 0;
color: #EFEFEF;
}

.site-footer a {
color: #EFEFEF;
}

.site-footer a:hover {
	color: #FFD505;
}
/* #endregion*/


/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* #region [ rgba(54,35,139,0.1)]  */ 





@media screen and (min-width: 480px) {  


		  
.primary-text p {
margin: 0; 
padding: 0;
font-size: 1.2rem;   
letter-spacing: 0.6px;
display: block;
}	
		
}

@media screen and (min-width: 500px) {  
	
	.inline { 
	display: inline-block;
	margin: 0.2rem 0.6rem 0.4rem 0.6rem;
	}

.landing-header {
background: transparent url(img/03.jpg) no-repeat scroll top center; 
}


.primary-text p {		
display: inline-block;
}	


.middle-photo-container {
	background: transparent url(img/p1.jpg) no-repeat center center; 	
}

.four-frames-grid {	
	grid-template-columns: 1fr 1fr;
}

.four-frames-grid div:nth-child(1), .four-frames-grid div:nth-child(3)  {
	justify-self: end;
}

.four-frames-grid div:nth-child(2), .four-frames-grid div:nth-child(4)  {
	justify-self: start;
}

.contacts-blocks {
flex-flow: row nowrap;  
justify-content: space-around;  
align-items: center; 
}

.another-photo-container div:nth-child(2)  {
	margin: 1rem 0 2rem 0;
}

}

/* #endregion*/

/* #region [ rgba(0,35,139,0.2)]  */ 

@media screen and (min-width: 600px) {  
.logo h1 {    
font-size: 1.6rem;
margin:0;    
line-height: 1.4;
}				

		

.landing-header h1 {
margin: 1.1rem 0.6rem;
padding: 0.5rem 1rem; 
font-size: 2.8rem;    
}

.landing-header h2 {
margin: 1.05rem 0.5rem;
font-size: 1.6rem;
font-weight: normal;
}

.landing-header h3 {
margin: 1.05rem 0.5rem;
font-size: 1.4rem;
font-weight: bold;
}

.landing-header p {
  margin: 0 0 0.8rem 0;              
  font-size: 1.5rem;     
  font-weight: normal;
  line-height: 1.6;        
  padding: 0; 
	}
	
.main-landing-container {
	margin: 1.5rem auto;
	max-width: 1080px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: stretch;
}

.main-landing h2 {  
	margin: 1rem 0;  
	font-size: 1.4rem;		
	line-height: 1.8; 
	padding: 0 0.4rem;		
}

.landing-frame {
margin: 0 0.8rem;
width: 100%; 
} 
	
.two-columns-box {
	margin: 0 auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	max-width: 1280px;	
}

.another-photo-container {
flex-flow: row nowrap;
justify-content: center;	
align-items: center;
}	

.single-frame-team, .single-frame {
margin: 0.4rem 0.4rem;	
padding: 0;		
}
.another-photo-container {
	background: transparent url(img/p6ipad.jpg) no-repeat center center; 
	}	

	.photo-container {
		padding: 1rem;
		text-align: left;
		max-width: 600px;
	 min-height: 350px;
	 margin: 1rem 0;
	}

	.another-photo-container div:nth-child(1)  {
		max-height: 800px; 
	}
	
	
	

}

/* #endregion*/

@media screen and (min-width: 720px) {  

	.hamburger {
		display: none; 
		}	


.top-navigation {	
	color: white;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;	
	width: 600px;
	margin-right: 6px;
	}
	
	.top-navigation ul {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	}
	
	.top-navigation ul li {
	margin: 0 0.4rem;
	}  
	
	.top-navigation ul li a {
		color:white;
		}  
	}

@media screen and (min-width: 800px) {  
.logo {
	margin: 0 0 0.4rem 4.6rem;
	}
}


@media screen and (min-width: 900px) {  
.another-photo-container div:nth-child(2)  {
	margin:0;
}
}

@media screen and (min-width: 1081px) {  

.logo h1 {    
font-size: 1.8rem;
margin:0;    
line-height: 1.4;
}

.another-photo-container {
	background: transparent url(img/p6.jpg) no-repeat center center; 
	}	

.four-frames-grid {
	display: grid; 
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-auto-rows: auto;	
	grid-gap: 6px;	
	text-align: center;
	padding: 0.6rem 0.8rem;
  align-items: stretch;

}

.single-frame {
	margin: 0.4rem 4px;	
	}

.four-frames-grid div:nth-child(1), .four-frames-grid div:nth-child(3)  {
		justify-self: center;
	}
	
.four-frames-grid div:nth-child(2), .four-frames-grid div:nth-child(4)  {
		justify-self: center;
	}
}