@font-face{
	font-family: LoveYaLikeASister;
	src: url('../fonts/LoveYaLikeASister.ttf');
}

body{
	font-family: LoveYaLikeASister;
	/*font-family: Arial, Helvetica, sans-serif;*/
	font-size: 15px;
	line-height: 1.5;
	padding: 0;
	margin: 0;
}

/* Global */

.container-main{
	width: 100%;
	margin: auto;
	overflow: hidden;
}

ul{
	margin: 0;
	padding: 0;
}

/* Header */

header{
	color:#8c8c8c;
	min-height: 108px;
	background: #ffffff;
	/*font-family: ;*/
	/*fixed menu*/
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 10;
	/*End of fixed menu*/
}

header #logo{
	float:left;
	margin-left: 10%;
	overflow: hidden;
	background: transparent;
}

header #logo #logo-img{
	max-width: 300px;
}

/* Header menu */

/*Normal menu*/
header .container-menu{
	float:right;
	min-height: 40px;
	position: relative;
	margin-right: 5%;
	margin-top: 20px;
	width: 50%;
}

header .container-menu nav li{
	display: inline;
	float:right;
	margin-right: 5%;
	font-weight: bold;
	margin-top: 8px;
	text-align: center;
}

header .container-menu nav a{
	text-decoration: none;
	color: #364e5a;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 20px;
}

header .container-menu nav i{
	font-size: 35px;
}

/*Mobile menu*/
.container-menu-mobile{
	display: none;
}

.toggle{
	display: none;
}

/* Showcase */

.container-main .showcase-main{
	width:100%;
	position: relative;
	max-height: 100%;
}


.container-main .showcase-main #showcase-img-back{
	width: 100%;
	height: 80%;
}

/*Abeceda letters with animation*/
.container-main .showcase-main #showcase-img-abeceda{
	width: 300px;
	position: absolute;
    top: 35px;
    right: 3%;
    animation: animate 1s linear;
}

@keyframes animate{
	0%
	{
		right: -800px;
	}
	50%
	{
		right: 2%;
	}
	100%
	{
		right: 3%;
	}
}

/*End of abeceda letters with animation*/

/*Main page*/
#why{
	text-align: center;
}

#why p{
	font-size: 16px;
	margin: 0 10% 0 10%;
}

/*End of main page*/

/*Title for all pages*/
#title{
	text-align: center;
}

/*End of title for all pages*/

/* Footer */
footer{
	overflow: hidden;
	color:#a6bdc9;
	text-align: center;
}

footer .outer{background:#9BD4F2; /*padding:12px*/}
footer .wrap{margin:0 auto; width: 100%;}
footer .sub{
    /*padding:12px;*/
    width:50%;
    height:70px;
    background:#9BD4F2;
    display:table-cell;
    border-right:solid #a175c4 1px;  
    text-align: center;
    font-size: 20px;
    padding-top: 10px;
}

footer .first{
	float:left;
	color: #EC70B3;
}

footer .second{
	float:right;
	color: #EC70B3;
	padding-top: 20px;
}

footer .sub:last-child{border:0px}


/* Media Queries */

/*Smaller monitor*/
@media(max-width: 1460px){
	.container-main .showcase-main #showcase-img-abeceda{
		width: 250px;
	}
}

/*Tablet - bigger*/
@media(min-width: 990px) and (max-width: 1100px){
	
	header{
		min-height: 80px;
	}

	header #logo{
		margin-left: 5%;
	}

	header #logo h1{
		font-size: 30px;
		margin-top: 10px;
	}
	
	header .container-menu{
		margin-right: 5%;
		width: 55%;
	}

	.container-main .showcase-main #showcase-img-abeceda{
		width: 200px;
	}

}

/*Tablet - smaller or phone*/
@media(max-width: 990px){ /*768px*/
	
	/*Needed for centering the all header divs*/
	header #container_header_wrap{
		width: 70%;
		margin: 0 auto;
		position: relative;
	}

	/*Center the logo*/
	header #logo{
		width: 320px;
	    position: absolute;
	    background-color : white;
	    display: block;
	    margin: 0 auto;
	    /*bottom: 0%;*/
	    margin-top: 0px;
	    text-align: center;
	    left: 0;
	    right: 0;
		overflow: hidden;
		background: transparent;
	}

	header #logo h1{
		font-size: 30px;
	}

	/*Menu navbar*/

	.container-menu nav li{
		display: none !important;
	}

	header .toggle{
		display: block;
	}

	.container-menu-mobile{
		display: block;
		width: 70%;
		margin: auto;
		background: #AFDEDC;
		position: relative;
		margin-top: 10px;
	}

	.container-menu-mobile nav ul{
		list-style: none;
	}
	
	.container-menu-mobile nav li{
		text-align: center;
	}

	.container-menu-mobile nav a{
		text-decoration: none;
		color: #364e5a;
		text-transform: uppercase;
		font-size: 18px;
		text-align: center;
		font-weight: bold;
	}

	.container-menu-mobile #list {
	    max-height: 0;
	    transition: max-height 0.15s ease-out;
	    overflow: hidden;
	    background: #9BD4F2;
	}

	/*First who will trigger:event for triger .. who should change*/
	.container-menu-mobile.active #list{
		max-height: 160px;
    	transition: max-height 0.25s ease-in;
	}


	/*Toggle design*/
	.toggle{
		display: block;
		/*position: absolute;
		width: 70%;
		margin: auto;
		float:right;*/
		min-height: 40px;
		background: #9BD4F2;
		text-align: right;
		color: #364e5a;
		font-size: 26px;
		position: relative;
	}

	.toggle #menu_title{
	}

	.toggle i{
	}

	#menu_click{
		position: absolute;
		margin: 0 auto;
	    margin-top: 0px;
	    text-align: center;
	    left: 0;
	    right: 0;
	}

	/*Showcase*/

	#showcase{
		text-align: center;
	}

	.container-main .showcase-main{
		float:none;
		text-align: center;
		width: 100%;
		/*padding-right: 20px;*/
	}

	.container-main .showcase-main #showcase-img-abeceda{
		display: none;
	}

	footer .sub{
		height: 100px;
	}
}


/*Small phone*/
@media(max-width: 500px){
	
	/*Override only width to 100%*/
	.container-main{
		width: 100%;
	}

	.container-main .showcase-main{
		width:100%;
	}

	header #container_header_wrap{
		width: 100%;
	}

	.container-menu-mobile{
		width: 100%;
	}

	.toggle{
		width: 100%;
		position: unset;
	}

	.container-main .showcase-main #showcase-img-abeceda{
		
	}

	footer{
		margin-left: 0;
		text-align: center;
		float: none;
	}
}