/*
Theme Name: SLAS Web 
Description: A base theme for the SLAS website
Version: 1.0
Author: Nalantha Wanasundara
Description; The SLAS theme is developed for the sasklanka website.
*/

/* CSS Document */

body{
	margin: 0;
	padding: 0;
    background-color:#202020;
}

p{
	margin: 0 0 0 0;
    padding:10px;	
}

p, ul{
	font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size-adjust:0.488;
	font-weight:200;
	font-style:normal;
}
p{
  text-align:justify;
  border:20px;
}
a{ 
  text-decoration:none;
  color: inherit;
}
a.blue{ color: blue;}

img{
	border: 0;
}

h1, #pixels{
	font-family:"Museo 900", Verdana, serif;
	font-size-adjust:0.40;
	font-weight:700;
	font-style:normal;
	margin:0;
}

h2{
	font-size:calc(10px + 2.5vw)
	margin:0;
    padding-top:10px;
    padding-bottom:10px;

}

#h2-banner {
    font-family:"Comic Sans MS", Verdana, sans-serif;
    color:yellow;
}

#main-div{
   text-align: left;
   overflow: hidden;
   border-radius: 0px 0px 0px 0px;
   margin:auto;
   width:100%;
   padding:0;
   max-width:1600px;
}
#banner{
	background:url(images/Awurudu.jpg) 0% 0 no-repeat fixed;
	background-size:auto 150%;
	color: white;
	height: auto;
    min-height: 75vh;
	margin: 0 auto;
	padding: 0;
	width:100%;
}

#logo-main {
	width:15vw;
    max-width:200px;
	margin-top:15vh;
}

#logo-small {
	display:inline-block;
    align-items:center;
	margin:auto;
}

#logo-small-img {
	height:6vw;
    max-height:70px;
    min-height:50px;
}
#banner-overlay {
    background-color: #000000;
    opacity:0.6;
	/*background:linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.6)));*/
    transition: all 2s;
    max-height:100%;
    min-height:75vh;
}
div.top-div { 
    height:7vw; 
    max-height:70px; 
    background-color:#000000;
}
#h1-banner{font-size:calc(10px + 2.5vw);}
#h2-banner{font-size:calc(10px + 1vw);}

#news{
	background: url(images/Saskatoon.jpg) 50% 0 no-repeat fixed;
	background-size:cover;
	color: #000000;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
	width:100%;
}

#main-events {
  background:rgba(255,255,255,0.9);
  padding-bottom:10px;
}
#main-news {
  background:rgba(255,255,200,0.9);
   padding-bottom:10px;
}
#main-blog {background:rgba(255,255,255,0.9);}

#news .bg{
	background: url(images/IMG_2271.JPG) 50% 0 no-repeat fixed;
	height: 1300px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 900px;
	z-index: 200;
}

ul.blog {
    list-style: none; /* Remove HTML bullets */
    padding: 0;
    margin: 0;
}

ul.blog  li { 
    padding-left: 16px; 
    text-align:left;
}

#bottom{
	background: url(images/IMG_2238.JPG) 50% 0 no-repeat fixed;
	background-size:cover;
	color: white;
	height: 400px;
	padding: 0 0 0 0;
	background-size:cover;
}
/*
#footer{
	background: #ccc;
	height: auto;
	margin: 0 auto;
	padding: 0 0 0 0;
}
*/

.story{
	margin: 0 auto;
	overflow: auto;
	width: 100%;	
	text-align:center;
	height:100%;
}
#bottom-overlay {
    background-color:#000000;
    transition: all 3s;
    opacity:0.7;
	/*background:rgba(0,0,0,0.6);*/    
}

.banner-text, .news-text, .bottom-text{
	padding: 0 0 0 0;
	position: relative;
	width: 100%;
	margin:0;
    text-align:center;	
}


div.img-container{
   margin: 0px;
   position:relative;
   background-color: #ffffff;
   height:100%;

}

div.flex-box{
	position:relative;
	display: -webkit-flex; /* Safari */
	display: flex;
    -webkit-justify-content: space-around; /* Safari 6.1+ */
    justify-content:space-around;
}

div.home-news{
	width:33%;
	opacity:1;
	display:block;
	border-right: 2px solid #7a9c3d;
	margin-top:0;
    margin-bottom: 0;
	background:rgba(255,255,255,0.8);
    text-align:center;
}
div.home-news:last-child{
	border-right:none;
}
div.home-news img{
    max-width:400px;
    width: 30vw;
    height:auto;
    float: center;
    margin:auto;
}

div.home-news div {
	text-align:center;
	position:relative;
	width:initial;	
	padding-top:20px;
	padding-bottom:20px;
    color:#000000;
}
div.home-news h2{
	color:#000000;
	color:red;
	text-transform: uppercase;
	font-size:calc(16px + 0.5vw);
	/*text-shadow: 1px 1px 1px #ffffff;*/
	margin:2px;
}
div.home-news h3{
	color:#000000;
	margin:10px;
	font-weight: normal;
	font-family: Exo2-Regular; 
	font-size: calc(12px + 0.3vw);
}

.button-home {
	background-color:#000000;
	color:#ffffff;
	font-size:calc(8px + 0.6vw);
    border: none;
	padding-top: 0.5%;
	padding-bottom: 0.5%;
	padding-left: 2%;
	padding-right: 2%;
	border-radius: 5px;
	cursor: pointer;
	white-space: nowrap;
    position: absolute;
    bottom:10px;
}

#bottom-text-left,
#bottom-text-right {
	width:50%;
    max-width:500px;
	margin-top:5%;
}

div.info{
	background-color:#ffffff;
	padding:10px 0px 10px 0px;
	opacity:0.8;
	text-align:center;
	width:100%;
    overflow: hidden;
}
div.info h1, div.info div h1, div.people h1, div.partners h1{
    text-transform: uppercase;
	margin:5px;
	padding:0px;
	/*color:red;*/
}
div.info p{
	margin:0px;
	padding:0px;
	margin-left:10px;
	margin-right:10px;
}
div.info div.main{ 	width:95%;}
div.info div.sub{
	width:40%;
	padding:10px;
	display:inline-block;
	vertical-align:top;
}

/* News page */
div.news-container div{
	background-color:white;
}

div.divPage{
	text-align:center;
	display:none;
	background-color:gray;
	width:100%;
	padding:0.5%; /*0px*/
    transition-delay: 4s;
   transition: opacity 0s linear;
   -moz-transition: opacity 2s linear;
   -webkit-transition: opacity 2s linear;
}
.pageNumber {
  cursor: pointer;
  height: 15px;
  width: auto;
  margin: 0px;
  margin-right:10px;
  border-radius: 45%;
  display: inline-block;
  opacity:0.5;
  font-size:calc(10px + 1vw)
}


div.divPageSub{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.news{
  background-color: #f1f1f1;
  width: 32%;
  text-align: center;
  margin-left: 0.5%;
  margin-right: 0.5%;
  margin-top:10px;
  margin-bottom: 10px;
  padding-bottom:20px;
  border-radius: 20px 20px 20px 20px;
}

.divPageBlog{
    background-color:#ffffff;
	width:96%;
	border-radius: 20px 20px 20px 20px;
	padding-bottom:20px;
}

.divPageSub h1,
.divPageBlog h1{
  font-size:calc(11px + 1vw); 
  padding-top:10px;
}

.divPageSub img,
.divPageBlog img{
	margin:auto;
	max-width:100%;
	height:auto;
	display:block;
}

p.author {
	margin:0px;
	padding:0px;
	padding-left:20px;
	color:#000000;
	font-size: 12px;
}

#prevPage, #nextPage{
  cursor: pointer;
  position: absolute;
  top: 14%;
  width: auto;
  padding: 10px;
  color: black;
  font-weight: bold;
  font-size: 32px;
  transition: 0.6s ease;
  z-index:10;
  opacity:0;
}

#nextPage{ right:0px;}
#prevPage { left:0px;}
#prevPage:hover, .nextPage:hover { background-color: rgba(0,0,0,0.8);}

.truncate-text {
   margin:0;
   width:94%;
   padding-top:0px;
   font-size:12px;
   overflow: hidden;
   position: relative; 
   line-height: 18px;
   max-height: 56px; 
   text-align: justify;
   padding-right:10px;
   padding-left:10px;
   transition:height 0.3s ease-out;
}
.truncate-text p{
   	margin:0;
	padding:0;
	padding-bottom:50px;
}
.truncate-text:before {
   content: '...';
   position: absolute;
   right: 0;
   bottom: 0;
}
.truncate-text:after {
   content: '';
   position: absolute;
   right: 0;
   width: 1em;
   height: 1em;
   margin-top: 0.2em;
   background: white;
}

.readMoreButton{
	color:#ff0000;
	display:none;
	position:absolute;
	bottom:10px;
	right:10px;
}

.full-text{height:auto;}
.full-text:after{content:'';}

/* contact page */

div.contact{
	width:80%;
}
.contact table{
	width:100%;
	text-align:left;
}
.contact table td{vertical-align:top;}
.contact td.text{width:25%;}
.contact td.fill{width:50%;}
.contact input{width:90%;}
.contact input[type="checkbox"]{ width:initial;}
.contact input.button { width:initial;}
.contact textarea{
	width:90%;
    resize:none;
	height:100px;
}

div.directors-flex-box{
    width:100%;
    margin-right:0px;
    margin-left:0px;
    padding-right:0px;
    padding-left:0px;
    position:relative;
	display: -webkit-flex; /* Safari */
	display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    
}

span.page-link {
    font-size:calc(10px + 0.75vw);
    color: brown;
}

h1.entry-title {
    width:100%;
    display:block;
    text-align:center;
    margin:auto;
    padding:0;
}

div.directors-flex-box div.directors {
    
    padding-left:auto;
    padding-right:auto;
    margin:auto;
    margin-top:10px;
}
div.directors-img {
    display:inline-block;
	width: 20vw;
	height: 20vw;
	min-width:200px;
	min-height:200px;
	max-width:300px;
	max-height:300px;
	background-repeat: no-repeat;
    background-size: cover;    
    box-shadow: 0px 0px 4px #000000;
    border-radius: 10px 10px 10px 10px;
}

div.directors-text{
	width: 20vw;
	min-width:220px;
    max-width:330px;
    text-align:center;
    font-size:calc(14px + 0.5vw);
    padding-top:10px;
    padding-left:0;
    padding-right:0;
    margin:auto;
}

div.directors-text p {
   font-size:calc(14px + 0.5vw);
   font-weight: bold;
   text-align:center;
}

div.post-text img{ max-width:95vw; height:auto;}
/* footer*/
div.footer{
	margin:auto;
	display:block;
	color:#ffffff;
	background-color: #000000;
	width:100%;
	height:initial;
	opacity:1;
	padding:0;
	/*border-radius: 30px 30px 30px 30px;*/
	text-align:center;
	border-top: 6px solid #ffffff;
	border-bottom: 6px solid #ffffff;
}
div.footer h1{
    font-size:calc(12px + 0.9vw);
}
div.footer div{
	display:inline-block;
	vertical-align:top;
}
div.footer div.foot-right{ 
     width:58%;
	 padding-top:1%;
}
div.footer div.foot-left{ 
     width:40%;
	 padding-top:1%;
}
div.footer ul li{
	list-style:none;
	font-size:calc(12px + 0.7vw);
}
div.footer ul li a{
	text-decoration:none;
	color:#ffffff;
	padding:20px
}
div.footer img{
	height:7vw;
	max-height:40px;
	min-height:20px;
}
div.footer div.copy{
	text-align:left;
	color:#ffffff;
	padding:10px;
	position:relative;
	display:block;
	width:100%;
}


@media screen and (max-width : 450px){
	#banner{height: 50vh;}
    #logo-small-img { height:6vh; }
	div.home-news{ 
	    max-width:100%;
		margin-top:5px;
		text-align:center;
		border-right: none;
		border-bottom: 2px solid #7a9c3d;
	}
	div.home-news div{ 	    
		display: block;
		vertical-align: middle;
		margin:auto;
		padding-top:0px;
	}
    div.home-news img{ 
      width: 100vw;
      max-width:100vw;
   }
	div.home-news .text{
		max-width:100%;
	}
}
@media only screen and (max-width: 1000px) and (min-width: 768px)  {
  .news {
     width: 48%;
  }
  div.flex-box{ display: block;	text-align:center;}
  div.home-news{ width:100%;}
  div.home-news img{ 
      width: 100vw;
      max-width:70vw;
  }
  #bottom-text-left,
  #bottom-text-right {
	max-width:99vw;
    width:100%;
  }
  /*
  div.flex-box{ display: block;	}
	div.home-news{ width:100%;}
	div.home-news:last-child{border-bottom:none;}
    .button-home {position:relative;}
	div.home-news h2,
	div.home-news h3{text-align:center;}
  div.home-news img{ max-width:100vw;}*/
}

@media screen and (min-width : 450px) and (max-width: 768px){
	#banner{height: 50vh;}
    div.home-news img{ 
      width: 100vw;
      max-width:80vw;}
/*	div.home-news{ 
	    max-width:100%;
		text-align:left;
		border-right: none;
		border-bottom: 2px solid #7a9c3d;
	}
	div.home-news div{ 	    
		display: inline-block;
		vertical-align: middle;
		text-align:center;
	}
	div.home-news .img{
		max-width:40%;
	}
	div.home-news .text{
		max-width:59%;
		text-align:center;
	}*/

}

@media screen and (max-width : 768px){
    div.top-div { height:6vh;}
    #banner{ 
        background:url(images/Awurudu_small.jpg) 0% 0 no-repeat fixed;
        background-size:auto 120%;
        min-height:40vh;
    }
    #banner_overlay{ min-height:40vh;}
    #news{ background: url(images/Saskatoon_small.jpg) 50% 0 no-repeat fixed;}
    #bottom{ 	
        background: url(images/SaskLanka_kids_small.JPG) 50% 0 no-repeat fixed;
        background-size:auto 120%;
    }
   
	div.img-container {text-align:center;}
	div.flex-box{ display: block;	}
	div.home-news{ width:100%;}
	div.home-news:last-child{border-bottom:none;}
    .button-home {position:relative;}
	div.home-news h2,
	div.home-news h3{text-align:center;}
  

	#bottom-text-left,
    #bottom-text-right {
		width:100%;
        max-width:99vw;
		margin-top:5%;
    }
	.divPageSub{
	    width:98%;
	    display:block;
	}
	.divPageSub div.news{ width:96%;}
	div.footer{
		padding:0px;
		font-size:calc(14px);
    }
    div.contact{ width:100%; }
	div.footer div.foot-left ul,
	div.footer div.foot-right ul{margin:0; padding:0;}
	div.footer div.foot-right{ width:90%}
    div.footer div.foot-left{ width:90%;}
	div.footer ul li a{padding:0;padding: 10px 10px 10px 10px;}
	div.footer div.copy{ width:90%}
}

/* -------------------- responsive menu begin --------------------------*/

div.clr{
    clear:both;
}

div.menu, a.navicon, ul.nav ul, 
ul.nav li, ul.nav a, ul.nav li:hover ul a {
	position:relative;
	margin:0;
	padding:0px;
	background:#000000;/*#7a9c3d;*/
	text-decoration:none;
	color:#ffffff;
    background:rgba(0,0,0,0.9);
    background-color:rgba(0,0,0,0.9);
}

div.menu{
	position:fixed;
	width:100%;
    max-width:1600px;
	height:auto;
	margin:auto;
	front-align:right;
	z-index:10;
	/*box-shadow: 0px 0px 8px 2px #000000;*/
}
ul.nav{
	list-style:none;
	text-shadow: 1px 1px 1px #0E0E0E;
	float:right;
    padding: 2px 0px;
	font-size:calc(10px + 0.3vw);
	text-transform: uppercase;
}
ul.nav li{
	float:left;
	margin:0px;
	position:relative;
	padding: 4px 0px;
}
ul.nav a{
	display:block;
	padding:0px 10px;
	border-right: 1px solid #ffffff;
}

ul.nav li:last-child a {border-right: none;}

/*--- DROPDOWN ---*/
ul.nav ul{
	list-style:none;
	position:absolute;
	padding:15px 0px 5px 10px;
    display:none;
	box-shadow: 0px 0px 8px 2px #000000;
	z-index:100;
	text-transform: none;
	width:100%;
}


ul.nav ul li{ 
	width:100%;
    margin:0;
	padding:10px 0px; 
}
ul.nav ul li.sub{ text-transform: initial;}
ul.nav ul a{
	white-space:nowrap; 
	border-right: none;
	margin:0;
}
ul.nav li:hover ul{ display: block; right: 0;}
ul.nav li:hover { background:#000000;}
ul.nav li:hover a{ background:#000000;}
ul.nav li:hover ul li:hover a{ background:#000000;}
ul.nav li:hover ul li:hover{ background:#000000;}

a.navicon {
	display:none;
	color:#ffffff;
    float:right;
	font-family: Exo2-Bold;
	font-size:32px;
	text-decoration: none;
	border-left: 1px solid #ffffff;
	padding: 2px 10px 2px 10px;
}

@media screen and (max-width : 768px){
	/*Make dropdown links appear inline*/
	ul.nav {
		font-size:calc(12px + 0.3vw);
        display:none;
		float:right;
		width:100%;
	}
	ul.responsive{ display: block;}
    ul.nav ul{
        width:100%;
		background: gray;
        position:static;
        text-align:center;
		padding:0px;
    }  
	ul.nav a{border-right: none;}
    ul.nav li:hover ul a, ul.nav li:hover ul li{ 
	    background:gray;
    }	
	/*Create vertical spacing*/
	ul.nav li, ul.nav ul li {
		display:block;
        width:100%
    }
	/*Make all menu links full width*/
	ul.nav li a, ul.nav ul li a {
        display:block;
		width: 100%;
        text-align:center;
        padding: 10px 0px;
	}
	/*Display 'show menu' link*/
	a.navicon { display:block; }
	
}
/*---------responsive menu end ----------------*/