/*!
 * Start Bootstrap - Modern Business (https://startbootstrap.com/template-overviews/modern-business)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-logomodern-business-nav/blob/master/LICENSE)
 */

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Lobster&family=Oswald:wght@300&display=swap');
 
 body {
  background:url(../images/bg.jpg) fixed top;
}

/* Preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:rgba(255,255,255,0.9);
  /* change if the mask should have another color then white */
  z-index: 3001;
  /* makes sure it stays on top */
}

#status {
  width: 170px;
  height: 179px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(../images/loader.png);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}
/* Preloader end*/

.h1, h1 {
    font-size:38px;
	color: #195d68;
	font-family: 'Oswald', sans-serif;
}

.wrapper{background:#ffffff;}

header{background:#ffffff;}

header > div:nth-child(1){background:#034f61; color:#ffffff; text-align:right; padding:5px;}
header > div:nth-child(2){padding:10px 3%;}

.navigation{background:#06758e;}


.navigation ul{
  padding:0;
  margin:0;
}

.navigation > ul > li{
  list-style-type:none;
  display:inline-block;
  margin:0;
  padding:0;
  position:relative;
  width:9.7%;
  border-right:solid 1px #ffffff;
}

.navigation > ul > li a{
display:block;
text-align:center;
color:#ffffff;
font-size:12px;
font-weight:bold;
padding:8px 10px;
text-decoration:none;
text-transform:uppercase;
background:none;
transition:ease all 0.5s;
}

.navigation ul li:last-child{border-right:0;}

.navigation ul li a:hover{
background:#034f61;
color:#ffffff;
}

.navigation ul li:hover .navcontent{display:block; position:absolute; z-index:3001; width:200px; padding:0; margin:0 auto; color:#ffffff; top:35px; left:0;}

.navcontent{display:none;}

.navcontent > ul{padding:0; margin:0;}
.navcontent > ul > li{list-style-type:none; display:block; background-color:#ffffff; margin:0; padding:1px 0;}
.navcontent > ul > li > a{text-align:left; color:#bd0e1b; border-bottom:solid 1px #cccccc; padding:5px 3px;}
.navcontent > ul > li > a:hover{background-color:#cccccc; color:#000000;}

.togglemenu, .togglecontent, .togglecontentmain{display:none;}

.bg-dark {
    background-color: #034f61!important;
}

.content{text-align:justify; color:#676666; padding:0 30px;}

.fa1 {
  padding: 4px;
  font-size: 18px!important;
  width: 26px;
  height: 26px;
  border-radius:50%;
  text-align: center;
  text-decoration: none;
  margin: 0 2px;
  float:left!important;
  color:#000000!important;
}

.fa1:hover, .fa1:active {
    opacity: 1;
	color:#ffffff!important;
	background:#000000;
	transition:ease all 0.5s;
	text-decoration:none;
	
	-moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -ms--transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  -ms-transition: all 0.6s;
  transition: all 0.6s;
	
}

.fa1-facebook, .fa1-twitter, .fa1-youtube, .fa1-search-plus {
  background: #ffffff;
  color:#000000!important;
}

.fa2 {
  padding: 10px;
  font-size: 44px!important;
  width: 44px;
  height: 44px;
  border-radius:50%;
  text-align: center;
  text-decoration: none;
  margin: 0 2px;
  float:left!important;
  color:#000000!important;
}

.fa2:hover, .fa2:active {
    opacity: 1;
	color:#ffffff;
	transition:ease all 0.5s;
	text-decoration:none;
}

.fa2-facebook, .fa2-twitter, .fa2-youtube, .fa2-search-plus {
  color:#ffffff!important;
}

.tab-content>.active {
    display: block!important;
}

nav > .nav.nav-tabs{

  border: none;
    color:#fff;
    background:#272e38;
    border-radius:0;

}
nav > div a.nav-item.nav-link,
nav > div a.nav-item.nav-link.active
{
  border: none;
    padding: 10px 25px;
    color:#fff;
    background:#272e38;
    border-radius:0;
}

nav > div a.nav-item.nav-link.active:after
 {
  content: "";
  position: relative;
  bottom: -51px;
  left: -10%;
  border: 15px solid transparent;
  border-top-color: #20aac6 ;
}
.tab-content{
  background: #fdfdfd;
    line-height: 25px;
    border: 1px solid #ddd;
    border-top:5px solid #20aac6;
    padding:30px 25px;
}

nav > div a.nav-item.nav-link:hover,
nav > div a.nav-item.nav-link:focus
{
  border: none;
    background: #20aac6;
    color:#fff;
    border-radius:0;
    transition:background 0.20s linear;
}

.img-portfolio{
	margin:0 0 20px;
}

.img-portfolio:hover .img{

}

.img-portfolio > .image > h5, .img-portfolio .book > .image > h5{
	display:block;
	height:40px;
	margin:0 auto 10px;
	padding:5px 0;
	color:#3a3a3a;
	font-size:16px;
	text-align:center;
}

.img-portfolio > .image > span, .img-portfolio .book > .image > span{
	text-align:center;
	overflow:hidden;
	width:100%;
	height:280px;
	margin:auto;
	display:block;	
}

.book > .image > span{
	height:350px!important;
}

.img-portfolio > .image > span > a > .img, .img-portfolio .book > .image > span > a > .img{
	object-fit:cover;
	width:90%;
	height:100%;
	border:solid 1px #b3c1bb;
	padding:5px;
}

.img-portfolio > .image > h5, .img-portfolio .book > .image > h5{
	background:#ffffff;
	width:90%;
	height:50px;
	font-size:14px;
	margin:0 auto;
}

.img-portfolio > .image > div, .img-portfolio .book > .image > div{
	background:#ffffff;
	width:90%;
	font-size:14px;
	margin:0 auto;
	padding:3px 0;
	font-weight:bold;
	color:#4b40f5;
	text-align:center;
}

.img-portfolio > .image > div > a, .img-portfolio .book > .image > div > a{color:#900; text-decoration:underline;}


#next {
    background: none;
    color: #797474;
    font-weight: bold;
    border: solid 1px #797474;
    padding: 2px 10px;
    outline: none;
    margin: 0 auto;
    display: block;
}

.member > span > a {color:#ffffff; font-weight:bold; display:block; padding:6px 10px; margin-bottom:10px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,2989d8+45,1e5799+69&0+0,0.8+0,1+19,1+73,0.8+76,0+100 */
background: -moz-linear-gradient(left, rgba(30,87,153,0.8) 0%, rgba(35,108,180,1) 19%, rgba(41,137,216,1) 45%, rgba(30,87,153,1) 69%, rgba(30,87,153,1) 73%, rgba(30,87,153,0.8) 76%, rgba(30,87,153,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(30,87,153,0.8) 0%,rgba(35,108,180,1) 19%,rgba(41,137,216,1) 45%,rgba(30,87,153,1) 69%,rgba(30,87,153,1) 73%,rgba(30,87,153,0.8) 76%,rgba(30,87,153,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(30,87,153,0.8) 0%,rgba(35,108,180,1) 19%,rgba(41,137,216,1) 45%,rgba(30,87,153,1) 69%,rgba(30,87,153,1) 73%,rgba(30,87,153,0.8) 76%,rgba(30,87,153,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc1e5799', endColorstr='#001e5799',GradientType=1 ); /* IE6-9 */
}

.download{border:6px #8ca2a7; border-style:double; padding:10px; margin:14px auto;}
.download > span > a{background:#545454; display:block; text-decoration:none; width:100px; text-align:center; padding:5px 5px; margin:10px auto; font-size:13px; font-weight:bold; color:#ffffff; transition:ease all 0.5s;}
.download > span > a:hover{background:#034f61;}

@media (min-width: 992px){
.container {
    max-width: 1250px;
	padding:0;
}
}

@media (max-width: 990px){
.container {
    max-width: 920px;
}
.navigation{display:none;}
}

@media(max-width:800px) {
.content{padding:0 5px;}
.togglewrapper{position:fixed; left:0; z-index:2000; top:-10px;}
.togglemenu{display:block; padding:4px; margin-top:10px; border-radius:5px;}
.togglemenu span{border:solid 1px #ffffff; width:30px; display:block; margin:5px 0;}
.togglecontentmain{display:none; position:relative;}
.togglecontentmain > img{position:absolute; left:240px; z-index:3000; top:-30px;}
.togglecontent{position:absolute; display:block; z-index:1000; width:250px; left: 0; top:-30px; background-color:#627d84; color:#ffffff; padding:4px; animation-name: example; animation-duration: 0.5s;}
/* The animation code */
@keyframes example {
    from {left:-200px;}
    to {left: 0;}
}
.togglecontent > span a{display:block; color:#ffffff; border-bottom:solid 1px #ffffff; font-size:14px; padding:2px 0 0 20px; text-transform:uppercase; text-decoration:none; font-family: 'Caveat'; transition:ease all 0.5s;}
.togglecontent > span a:hover{display:block; background-color:#ffffff; color:#000000;}

}