@charset "utf-8";
/* CSS Document */

/* font-face */
@font-face {
    font-family: "Montserrat Regular";
    src: url(../webfonts/Montserrat-Regular.ttf) format('truetype');
}

@font-face {
    font-family: "Montserrat Medium";
    src: url(../webfonts/Montserrat-Medium.ttf)  format('truetype');
}


@font-face {
    font-family: "Raleway Light";
    src: url(../webfonts/Raleway-Light.ttf) format('truetype');
}

@font-face {
    font-family: "Raleway Regular";
    src: url(../webfonts/Raleway-Regular.ttf) format('truetype');
}

@font-face {
    font-family: "Raleway Medium";
    src: url(../webfonts/Raleway-Medium.ttf) format('truetype');
}

@font-face {
    font-family: "Khand Light";
    src: url(../webfonts/Khand-Light.ttf) format('truetype');
}

@font-face {
    font-family: "Khand Regular";
    src: url(../webfonts/Khand-Regular.ttf) format('truetype');
}

@font-face {
    font-family: "Khand Medium";
    src: url(../webfonts/Khand-Medium.ttf) format('truetype');
}

@font-face {
    font-family: "Khand Semibold";
    src: url(../webfonts/Khand-Semibold.ttf) format('truetype');
}

@font-face {
    font-family: "BebasNeuewebfont";
    src: url(../webfonts/BebasNeuewebfont.ttf) format('truetype');
}

@font-face {
    font-family: "Rajdhani Light";
    src: url(../webfonts/Rajdhani-Light.ttf) format('truetype');
}

@font-face {
    font-family: "Rajdhani Regular";
    src: url(../webfonts/Rajdhani-Regular.ttf) format('truetype');
}

@font-face {
    font-family: "Rajdhani Medium";
    src: url(../webfonts/Rajdhani-Medium.ttf) format('truetype');
}

@font-face {
    font-family: "Rajdhani SemiBold";
    src: url(../webfonts/Rajdhani-SemiBold.ttf) format('truetype');
}

@font-face {
    font-family: "Oswald Light";
    src: url(../webfonts/Oswald-Light.ttf) format('truetype');
}

@font-face {
    font-family: "Oswald Regular";
    src: url(../webfonts/Oswald-Regular.ttf) format('truetype');
}

@font-face {
    font-family: "Oswald Bold";
    src: url(../webfonts/Oswald-Bold.ttf) format('truetype');
}

/* body */
body {
	font: "Segoe UI", sans-serif;
	font-size: 16px 1rem;
	background-color: #FFF;	
	margin: auto;	
}

ul, ol, dl {
	padding: 0;
	margin: 0;
	display: inline;
}

h1, h2, h3, h4, h5, h6, p {	}

/* body */
body {
	font: "SourceSansPro-Regular", sans-serif;
	font-size: 16px 1rem;
	background-color: #FFF;	
	margin: auto;
}

/* Scrollbar */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #184690 #FFF;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px; 
}

*::-webkit-scrollbar-track {
  background: #FFF;
}

*::-webkit-scrollbar-thumb {
  background-color: #184690;
  border-radius: 1rem;
  border: 4px solid #FFF;  
}

/* links */
a img { border: none; }

a:link {
	color: inherit;
	text-decoration: none;
	cursor: pointer; 
}

a:visited {
	color: inherit;
	text-decoration: none;
}

a:hover, a:active, a:focus {
	color: inherit;
	text-decoration: none;
}

/* arrow */
#arrow {	
    position: fixed;
	bottom: 1rem;
    right: 1rem;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
	z-index: 97;
}

#arrow:hover { bottom: 2rem; }


/* lang */
.lang:link, lang:visited {
	color: #363743;
	text-decoration: none;
	cursor: pointer;  
}

.lang:hover, lang:active, lang:focus {
	color: #F63;
	text-decoration: none;
	border-bottom: #F63 1rem solid;
}

.blank {
	float: left;
	width: 100%;
	height: 4rem;
	display: inline-block;
}

#blanktop {
	float: left;
	width: 100%;
	height: 2.8rem;
	display: inline-block;
}


/* top-bar */
#top-bar {
	float: left;
	width: 98%;
	height: auto;
	background: #fff;
	display: inline-block;
	text-align: right;		
	padding: 0.5% 1% 0 1%;		
}

.top-bar-button {
	width: auto;
	height: auto;
	color: #184690;
	display: inline-block;
	text-align: center;
	font-family: "Khand Regular";
	font-size: 1.05rem;
	padding: 0.5rem;
}

.top-bar-button:hover {	
	color: #00a5fe;	
}

/* format */
.fullframe {
	float: left;
	width: 100%;
	height: auto;
	background: #FFF;
	display: inline-block;
	text-align: center;		
}

.frame {	
	width: 70%;
	height: auto;
	display: inline-block;	
}

/* connect */
#connect {	
	background: #d5dce6;	
}

/* footer */
#footer {	
	background: #184690;	
}

#foot-logo {
	width: 25%;
	height: auto;
	margin: 1rem 0 1rem 0;
}

.soc-icons {
	width: 3.5%;
	height: auto;
	background-color: #FFF; 
	display: inline-block;
	border-radius: 0.5rem;
	margin: 1% 0.5% 1% 0.5%;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%; 	
}

.soc-icons:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

#socico-1 { background-image: url(../index_files/ico_face.png) ;}
#socico-2 { background-image: url(../index_files/ico_linked.png);}
#socico-3 { background-image: url(../index_files/ico_youtube.png);}

.soc-icons:hover { background-color: #00a5fe; }

.soc-iconsk {
	width: 5%;
	height: auto;
	background-color: #FFF; 
	display: inline-block;
	border-radius: 0.5rem;
	margin: 1% 0.5% 1% 0.5%;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%; 	
}

.soc-iconsk:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

#socico-1 { background-image: url(../index_files/ico_face.png) ;}
#socico-2 { background-image: url(../index_files/ico_linked.png);}
#socico-3 { background-image: url(../index_files/ico_youtube.png);}

.soc-iconsk:hover { background-color: #00a5fe; }