@import url('https://fonts.googleapis.com/css?family=Open+Sans|Megrim');



/*==---BROWSER RESET CODE TO HELP ELIMINATE INCONSISTENCIES BETWEEN BROWSERS---===*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, .columns, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
.columns, header, hgroup, menu, nav, section {
	display: block;
}
/*==---END BROWSER RESET CODE---===*/


/* CLEARFIX to remove float */
div:after, article:after, .columns:after, header:after, nav:after, section:after {
		content:'';
		display: block;
		clear: both;
		}

html{
       height: 100%;
       min-height: 100%;
       margin: 0;
       padding: 0;
       font-size: 16px;
       -webkit-transition:  all .6s ease-in-out;
		-moz-transition:  all .6s ease-in-out;
		 -ms-transition:  all .6s ease-in-out;
		  transition:  all .6s ease-in-out;
		}

BODY {	
		height: 100%;
		min-height: 100%;
		margin:0;
		padding:0;
		font-size: 100%;
		font-family: "Lato",  sans-serif; 
		color: rgb(50,50,50);
		background:rgb(255,255,255);
		-webkit-transition:  all .6s ease-in-out;
		-moz-transition:  all .6s ease-in-out;
		 -ms-transition:  all .6s ease-in-out;
		  transition:  all .6s ease-in-out;
		}
		
		
/*TYPOGRAPHY*/

H1 {
		font-size: 400%;
		font-family: "Megrim";
		color:rgb(120,160,200);
		text-align: center;
		}
h2{ 
		font-size: 300%;
		}
H3 {
		font-size: 200%;
		}
H4{		
		font-size: 180%;
		}
p {		
		font-size: 140%
		font-weight: 300;
 		}


	
/*===============--LINKS--===============*/

a {
		font-weight: 600;
		color: rgb(80,180,135);
		-webkit-transition: .6s ease-in-out;
		-moz-transition: .6s ease-in-out;
		-ms-transition: .6s ease-in-out;
 		transition: .6s ease-in-out;
 		text-decoration: none;
		}


a:hover {
		color: rgb(50,50,50);
		-webkit-transition: .6s ease-in-out;
		-moz-transition: .6s ease-in-out;
		-ms-transition: .6s ease-in-out;
		transition: .6s ease-in-out;
		}



/*============--MAIN CONTENT--============*/


	
.topmenu {
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		height: 50px;
		border: 0;
		border-bottom: 2px;
		border-style: dotted;
		border-color:rgba(200, 200,200, 1);
		background:rgb(190,220,255);
		z-index: 500;
		}

.topmenu .content{
		position: relative;
		left:0;
		width: 95%;
		max-width: 1400px;
		height:50px;
		margin: 0 auto;
		padding: 0;
		}

.topmenu h1 {
		position: absolute;
		left: 0;
		text-align: left;
		font-size: 250%;
		font-weight: 400;
		font-family: "Lato";
		color: rgb(80,80,80);
		z-index: 0;
		}


.topmenu .logo{
		float: left;
		width: 100px;
		height:100px;
		margin-top: 0;
		padding: 0;
		border:solid 2px rgba(20,20,20,0);
		border-top: 0;
		background: rgb(225,240,255);
		background-size: contain;
		background-repeat: no-repeat;
		-webkit-transition: all 0.9s ease;
        transition: all 0.9s ease;
		}
		@media screen and (max-width: 414px){
			.topmenu .logo{
				float: left;
				width: 100px;
				height:50px;
				}
		}

.topmenu .logo  h1  {
		position: relative;
		margin: 0 auto;
		margin-top: 50%;
		padding:0;
		text-align: center;
		font-family: Megrim;
		font-size: 190%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		transform: translateY(-50%);
		}
		@media screen and (max-width: 414px){
			.topmenu .logo h1{
				margin-top: 20px;
				font-size: 100%
				}
			}

.topmenu  .logo h1 span{
		visibility: hidden;
		font-size: 0.001%
		}

.topmenu ul{
		display: block;
		position: absolute;
		right:0;
		margin: 0;
		padding: 10px 0;
		border: 0;
		}	
		
.topmenu li {
		position: relative;
		top: 0;
		display: inline;
		margin:  0;
		padding: 0 5px;
		list-style: none;
		font-weight: 400;
		font-family: "Lato";
		font-size: 1rem;
		text-align: right;
		}
		@media screen and (max-width: 414px){
			.topmenu li{
				margin-top: 20px;
				font-size: 0.5rem
				}
			}

.topmenu li a{
		font-weight:400;
		color: rgb( 50,50,50);
		text-decoration: none;
		text-transform: uppercase;
		}

.topmenu li a:hover{
		font-weight:400;
		text-decoration: none;
		text-transform: uppercase;
		color: rgb(20,20,20);
		}

.titlepage {
		position: relative;
		top: 40px;
		margin: 0;
		height: auto;
		min-height: 100%;
  		background-position: 50% 50%;
  		background-repeat: no-repeat;
  		background-attachment: scroll;
  		background-size: cover;
		background-image: url(../images/Header.jpg); 
		}

.titlepage .content{
		position: relative;
		top:0;
		height: 100%;
		min-height: 100%;
		width: 90%;
		margin: 0 auto;
		max-width: 1000px;
		}

		
.titlepage h1{
		display:block;
		position: relative;
		top: 50vh;
		margin: 0 auto;
		text-align: center;
		color: rgb(255,255,255);
		transform: translateY(-50%);
		}	
		
.titlepage h1:after{
		display: block;
		content: '\2B07';
		margin: auto;
		text-align: center;
		color: rgb(230,240,250);
		font-size: 200%;
		animation-name: arrow;
    	animation-duration: 2s;
    	animation-timing-function: ease-in-out;
    	animation-iteration-count: infinite;
		}
		
section{
		position: relative;
		top: 0;
		height: auto;
		min-height: 400px;
		margin: 0;
		padding: 8rem 0;
		}

@-webkit-keyframes arrow {
   	 	0% {transform: translateY(0);}
   	 	50% {transform: translateY(10px), rotate(90deg)}
    	100%{transform: translateY(0);}
   		 }

@-moz-keyframes arrow {
    	0% {transform: translateY(0);}
    	50% {transform: translateY(10px);}
    	100%{transform: translateY(0);}
    	}

@-0-keyframes arrow {
    	0% {transform: translateY(0);}
    	50% {transform: translateY(10px);}
    	100%{transform: translateY(0);}
    	}

@keyframes arrow {
   		0% {transform: translateY(0);}
    	50% {transform: translateY(10px);}
    	100%{transform: translateY(0);}
    	}

section h3{
		margin: 0 auto;
		padding: 0;
		text-align: center;
		}

section p{
		margin: 1em auto;
		text-align: center;
		line-height: 150%;
		color: rgb(30,30,30);
		}
		
article{
		position: relative;
		top: 1em;
		width: 75%;
		margin: 0 auto;
		padding:  4% 0;
		border: dotted 0;
		border-color:rgba(200,235,210,1) ;
		}

section h2{
		text-align: center;
		font-size: 1.5em;
		}
		
section p{
		text-align: center;
		}

.narrow{
		max-width: 700px;
		margin: 0  auto;
		}

.wide{
		max-width: 900px;
		}







/******************** .columns ********************/


.columns{
		position: relative;
		top: 2em;
		height: auto;
		margin: 0;
		padding: 0 ;
		z-index: 0;
		}

.columns .content{
		position: relative;
		top: 0;
		width: auto;
		max-width: 1400px;
		height: auto;
		margin:  0 auto;
		padding: 0;
		}

.columns img{
		width: 100%;
		height: auto;
		max-width: 270px;
		opacity: 1;
		}

.columns img:hover{
		opacity: 0.7;
		}

.columns p{
		color: rgb(20,20,20);
		font-weight: 300;
		}


/*==========-------.columns SECTIONS------===========*/


.columns .one-half { 
 		position: relative;
		float:left; 
		width: 49.5%;
		height: auto;
		min-height: 200px;
		margin: 0;
		margin-right: 0;
		padding: 0;
		border-right: dotted 2px rgba(55,55,55,.05);
		}
		@media screen and (max-width: 414px){
		.columns .one-half{
			float:none; 
			width: 100%;
			height: auto;
			padding: 0;
			padding-left: 0;
			padding-right: 0;
			border-right: 0;
			}
		}

.columns .one-half:nth-child(3){
		border-right: 0;
		}
				
.columns .one-half .content {
 		position: relative;
 		width: 100%;
 		margin: auto;
 		padding: 2em 0;
 		border-bottom: 2px solid;
 		border-color: rgba(55,55,55,.06);
 		}
		
.columns .one-half h1{
		padding: 0 5%;
		font-size: 150%;
		}
		
.columns .one-half p {
		padding: 0 5%;
		font-size: 110%;
		text-align: justify;
		}

.columns .one-fourth{
		position: relative;
		float: left;
		width:25%;
		height: auto;
		min-height: 350px;
		margin:0;
		padding: 0;
		border-right: 0 solid;
		border-color: rgba(55,55,55,.5);
		}
		@media screen and (max-width: 834px){
			.columns .one-fourth, .columns .one-fourth-last{
				float: left;
				width: 50%;
				height: auto;
				min-height: 100px;
				padding:0;
				border-right: 0;
				border-bottom: 1px dotted;
				border-color: rgba(255,255,255,.15);
				}
		}
		@media screen and (max-width: 414px){
			.columns .one-fourth,
			.columns .one-fourth-last{
				float:none; 
				width: 100%;
				height: auto;
				padding: 0;
				padding-left: 0;
				padding-right: 0;
				border-right: 0;
				}
		}

.columns .one-fourth:nth-child(7) {
		border-right: 0;
		}

.columns .one-fourth .content{
 		position: relative;
 		width: 100%;
 		margin: auto;
 		padding: 2em 0;
 		}

.columns .one-fourth h1 {
		padding: 0 8%;
		font-size: 130%;
		}

.columns .one-fourth p{
		padding: 0 8%;
		text-align: justify;
		color: rgb(50,50,50);
		font-size: 100%;
		}
		
				
/*=========----CREATING HOVER EFFECT ON SOCIAL MEDIA ICONS---===========*/


.columns .socialmediabox{
		position: relative: 
		top: 0;
		width: 130px;
		margin: 0 auto;
		padding: 0;
		padding-bottom: 4em;
		}
		
.columns .socialmediabox h1{
		top: 0;
		left: 0;
		font-size: 200%;
		}

.columns .socialmedia{
		position: relative;
		display: inline-block;	
   		width: 40px;
   		height: 40px;
   		margin: 2rem 10px;
		}

.columns  .socialmedia .top{
		opacity: 1;
		position: absolute; top: 0 left: 0;
		width: 40px;
		height: 40px
		-moz-transition: opacity .9s ease-in-out; 
		-webkit-transition: opacity .9s ease-in-out; 
		transition: all .9s ease-in-out;
		-o-transition: all .9s ease-in-out;
		z-index:1;
		}

.columns .socialmedia .top:hover{
		opacity: 0;
		width: 40px;
		height: 40px
		}

.columns .socialmedia .bottom{
		position: absolute; top: 0 left: 0;
		width: 40px;
		height: 40px
		z-index:0;
		}