/*!
 * Gridpak Beta CSS
 *
 * Generator - http://gridpak.com/
 * Created by @erskinedesign
 */
 
body,
html,
div {
     margin: 0;
     padding:0;
     font-family:"Avenir Next","Avenir","Muli", sans-serif;
 }
 
 body
 {
 	background: #243347;
}
 
/*
Page is our center aligned 95% width container. We have set it's 'position' as relative
so that the Gridpak overlay will appear in the correct position. We have also updated
the gridpak.js file to use '.page' as it's container.
*/
.page {
     margin: 0 auto;
     max-width: 95%;
     overflow:hidden;
     position:relative;
}


/*
Work animation
*/

/* Common style */
.work figure {
	position: relative;
	float: left;
	overflow: hidden;
	min-width: 320px;
	/*max-width: 480px;*/
	max-height: 560px;
	width: 100%;
	background: #243347;
	text-align: center;
	cursor: pointer;
}

.work figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: .8;
}

.work figure figcaption {
	padding: 2em;
	color: #fff;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	  
	
}

.work figure figcaption::before,
.work figure figcaption::after {
	pointer-events: none;
}

.work figure figcaption,
.work figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}





/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.work figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.work figure h2 {
	font-weight: 400;
	margin-top:80px;
	margin-bottom:0px;
	text-transform: uppercase;
}

.work figure h2 span {
	font-weight: 800;
	
}

.work figure p {
	margin-top:0px;
	font-size: 18px;
}

/* Individual effects */

/*---------------*/
/***** Lily *****/
/*---------------*/

figure.effect-lily img {
	max-width: none;
	width: -webkit-calc(100% + 50px);
	width: calc(100% + 50px);
	opacity: .7;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px,0, 0);
	transform: translate3d(-40px,0,0);
}

figure.effect-lily figcaption {
	text-align: left;
}

figure.effect-lily figcaption > div {
	position: absolute;
	bottom: 230px;
	left: 0;
	padding: 2em;
	width: 60%;
	height: 15%;
}

figure.effect-lily h2,
figure.effect-lily p {
	-webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}

figure.effect-lily h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-lily p {
	color: rgba(255,255,255,1);
	opacity: 0;
	-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
	transition: opacity 0.2s, transform 0.35s;
}

figure.effect-lily:hover img
{
	opacity: .3;
}

figure.effect-lily:hover p {
	opacity: 1;
}

figure.effect-lily:hover img,
figure.effect-lily:hover h2,
figure.effect-lily:hover p {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-lily:hover p {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
	-webkit-transition-duration: 0.35s;
	transition-duration: 0.35s;
}


/* Reusable column setup */
.col {
    border:0px solid rgba(0,0,0,0);
    float:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -moz-background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;
	/*margin-bottom: 12px;*/
}
/*
.search {
    font-family: "Avenir";
	font-size:16px;
	padding:5px;
	margin-left:14%;
	margin-top:-38px;
	padding-bottom:10px;
	color:#eee;
	height:2%px;
	background-color:rgba(255,255,255,0.1);
	z-index:1;
	position:absolute;
	text-align:center;
	border-radius: 7px;
}
*/

.faux-browser:before {
	font-family: "Avenir";
	padding-top:9px;
	color:#777;
    content: "";
	text-align:center;
	background-color:rgba(255,255,255,0.15);
    height: .6em;
    display: block;
    position: relative;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    max-width:95%;
    margin-left:2.5%;
    margin-right:2.5%;
}







 
 

.teamtweets{
	height:560px; 
    background: 
      /* top, transparent red */
      linear-gradient(
        rgba(10,30,55,0), 
        rgba(8,8,8,.8)97%
      ),
      /* your image */
      url(../images/ttweets.jpg);
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:top;
  }	
  
.cor{
	height:560px;
  background: 
    /* top, transparent red */
    linear-gradient(
      rgba(3,3,3,0), 
      rgba(8,8,8,.8)97%
    ),
    /* your image */
    url(../images/cor.jpg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:top;
}	


.gameon{
	height:560px;
    background: 
      /* top, transparent red */
      linear-gradient(
        rgba(33,88,107,0.0), 
        rgba(8,8,8,.8)97%
      ), 
	  url(../images/gameon.jpg);
      
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:top;
  }
  
  .ansp{
  	height:560px;
      background: 
        /* top, transparent red */
        linear-gradient(
          rgba(33,88,107,0.0), 
          rgba(8,8,8,.8)97%
        ), 
  	  url(../images/ansp.jpg);
      
  	  background-repeat:no-repeat;
  	  background-size:cover;
  	  background-position:top;
    }
	
    .dps{
    	height:560px;
        background: 
          /* top, transparent red */
          linear-gradient(
            rgba(39,150,212,0.0), 
            rgba(8,8,8,.8)97%
          ), 
    	  url(../images/daynumbers.jpg);
      
    	  background-repeat:no-repeat;
    	  background-size:cover;
    	  background-position:top;
      }	
 
.title{
            font-family: Muli;
            font-weight: 400;
        font-size: 18px;
       color:#333;          
        }
        
#content-1, #content-2, #content-3, #content-4, #content-5, #content-6
        { font-family: Muli;
        font-weight: 400; 
        font-size: 18px;
       color:#333;
            position: absolute;
            display: inline-block;
            margin-left: 5px;
        }


.header{
	height:115px;
	border-bottom:5px;
	border-bottom-color:#fece0d;
	border-bottom-style: solid;
	font-weight:700;
	font-size:48px;
	color:#243347;
	padding-left:36px;
	padding-top:20px;
	background:#fff;
}

.header a{
	color:#243347;
	 text-decoration:none;
}

.header a:hover{
    text-decoration:none;
	color:#364c6b;
	
}

.header .nav{
	font-weight:500;
	font-size:20px;
	color:#383838;
	padding-top:24px;
	float:right;
	padding-right:36px;
    position:relative;
}

.header .nav a{
	font-weight:500;
	font-size:20px;
	color:#383838;
	background-color:#eee;
	float:right;
	padding:10px;
	margin-right:3px;
}

.nav a:hover{
      text-decoration:none;
	  background-color:#364c6b;
	  color:#fff;
}

.nav a:visited{
      text-decoration:none;
      
}





.content {
	padding-bottom:100px;
		min-height:100%;
		position:relative;
	}


.project_title{
	margin-top:400px;
	font-size:30px;
	color:#fff;
	font-weight:600;
	
}

.project_title a{
    text-decoration:none;
	color:#fff;
	
}

.project_title a:hover{
    text-decoration:none; 
        color:#fece0d;
	  position: relative;
	  -webkit-transition: background .2s ease-in;
	  -moz-transition: background .2s ease-in;
	  -o-transition: background .2s ease-in;
	  transition: background .2s ease-in;
	  
	  -webkit-transition: background .2s ease-out;
	  -moz-transition: background .2s ease-out;
	  -o-transition: background .2s ease-out;
	  transition: background .2s ease-out;
	
}

.project_desc{
	font-weight:400;
	font-size:18px;
	color:#fff;
  
}



.thumb{
	height:auto;
  background: 
    /* top, transparent red */
    linear-gradient(
      rgba(0,0,0,0), 
      rgba(10,10,10,0.1)87%
    );
	margin-top:50px;
}

.thumb2{
	height:auto;
  background: 
    /* top, transparent red */
    linear-gradient(
      rgba(0,0,0,0), 
      rgba(10,10,10,0.1)87%
    );
	margin-top:50px;
}
.thumb img{
	height:422px;
	position:relative;
    margin-left:2.5%;
    margin-right:2.5%;
    margin-bottom:1.5%;
}

.thumb2 img{
	height:422px;
	position:relative;
    margin-left:2.5%;
    margin-right:2.5%;
    margin-bottom:1.5%;
    z-index: 0;
}


 .thumb2 .container{
    background-image: url('../images/dailycharge_video2.png');
    background-repeat:no-repeat;
    background-size:100%;
    height:auto;
	position:relative;
    margin-left:2.5%;
    margin-right:2.5%;
    margin-bottom:1.5%;
    padding-bottom: 11.5%;
    }


.container video{
    z-index: 1;
    position: relative;
    display: inline;
    left:35%;
    width:30%;
    height: 58%;
    margin-top:11.4%;
    object-fit: none;

}

#project_title{
	margin-top:42px;
	font-weight:400;
	font-size:30px;
	color:#fff;
}

#project_desc{
	font-weight:400;
	font-size:16px;
	color:#fff;
      
}

#project_desc a#line{
	font-weight:400;
	font-size:16px;
	color:#fff;
}

#project_desc a#line:visited{
	font-weight:400;
	font-size:16px;
	color:#fff;
	text-decoration:none;
}

#project_desc a#line:hover{
	font-weight:400;
	font-size:16px;
	color:#fff;
	text-decoration:none;
	background-color:#fece0d;
}

.projectpage .nav a{
	font-weight:500;
	font-size:20px;
	color:#383838;
	background-color:#eee;
	float:left;
	padding:7px;
	margin-top:15px;
	width:180px;
	text-align:center;
    text-decoration:none;
    
}

.projectpage .nav2 a{
    font-weight:500;
	font-size:14px;
	color:#eee;
	background-color:#1C2838;
	float:left;
    clear:left;
	padding:7px;
	margin-top:30px;
   
	width:120px;
	text-align:center;
    text-decoration:none;
    
}

.projectpage .nav3 a{
    font-weight:500;
    font-size:14px;
	color:#eee;
	background-color:#1C2838;
	float:left;
	padding:7px;
    margin-left:5px;
	margin-top:30px;

	width:90px;
	text-align:center;
    text-decoration:none;
    
}

.projectpage .nav a:hover{
      text-decoration:none;
	  background-color:#1C2838;
	  color:#fff;
  	-webkit-transition-delay: 0.05s;
  	transition-delay: 0.05s;
  	-webkit-transition-duration: 0.35s;
  	transition-duration: 0.35s;
}

.projectpage .nav2 a:hover{
      text-decoration:none;
      background-color:#364c6b;
	  color:#fff;
  	-webkit-transition-delay: 0.05s;
  	transition-delay: 0.05s;
  	-webkit-transition-duration: 0.35s;
  	transition-duration: 0.35s;
}

.projectpage .nav3 a:hover{
      text-decoration:none;
      background-color:#364c6b;
      color:#fff;
  	-webkit-transition-delay: 0.05s;
  	transition-delay: 0.05s;
  	-webkit-transition-duration: 0.35s;
  	transition-duration: 0.35s;
}


.nav a:visited{
      text-decoration:none;
      
}


.footer {
background-color:#1b2736 ;
    height:100%;
color:#fff;
    padding-bottom:15px;
    margin-top:140px;
}


.footer .latesttweet {
    height:200px;
padding: 2em;
    font-size:18px;
    

}

.footer .latesttweet a.twitter-timeline {
    color:#fff;
    font-family:"Avenir";
}


.footer .social {
    width:100%;
    height:185px;
    padding: 2em;
    text-align: center;
    padding-top: 75px;
}

.footer .social p{
    
    color:#4A607D;
    font-weight:500;
    text-align:center;
    font-size: 12px;
    clear:right;
}


.footer .social .box {
    height:40px;
    width:40px;
    background-color:#243347;
    position:relative;
    text-align:center;
    vertical-align:middle;
    margin-left:10px;
    display:inline-block;   
}

.footer .social .box img{
    height:40px;
    width:40px;   
}

.footer .social .box a{
    height:40px;
    width: 40px;
     background-color:#243347;
    float:right;
    vertical-align:middle;
    margin-left:0px; 
}

.footer .social .box a#instagram:hover{
    background-color:#517fa4;
    height:100%;
    width: 100%;
}

.footer .social .box a#dribbble:hover{
    background-color: #ea4c89;
    height:100%;
    width: 100%; 
}

.footer .social .box a#twitter:hover{
    background-color: #55acee;
    height:100%;
    width: 100%; 
}

.footer .social .box a#linkedin:hover{
    background-color: #0077b5;
    height:100%;
    width: 100%; 
}


sup {
    vertical-align: super;
    font-size: 10px;
}



    /* 1. 1 Column Grid 0px - 319px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    100%
    
    ----------------------------------------------------------------------------- */

@media screen and (min-width: 320px) and (max-width: 568px)  {
    
    .title{
            display:none;          
        }
        
#content-1, #content-2, #content-3, #content-4, #content-5, #content-6
        {display:none; 
        }
    
    
    
    .header .nav{
			font-weight:500;
			font-size:18px;
			color:#383838;
        padding-top: 10px;
			margin-top:-15px;
			float:right;
			padding-right:0px;
		    position:relative;

		}
    
    
    .header{
    height:35px;
	border-bottom:5px;
	border-bottom-color:#fece0d;
	border-bottom-style: solid;
	font-weight:700;
	font-size:26px;
	color:#383838;
    padding:10px 3.5%;
}

.header a{
	color:#383838;
	 text-decoration:none;
}

.header a:hover{
    text-decoration:none;
	color:#364c6b;
	
}

        
    	
    

		.header .nav a{
			font-weight:500;
			font-size:18px;
			color:#383838;
			float:right;
			margin-right:3px;
		}

		.nav a:hover{
		      text-decoration:none;
			  background-color:#364c6b;
			  color:#fff;
		}

		.nav a:visited{
		      text-decoration:none;
      
		}
		
		.work figure {
			position: relative;
			float: left;
			overflow: hidden;
			min-width: 320px;
			max-width: 100%;
			max-height: 420px;
			width: 100%;
			background: #2F363D;
			text-align: center;
			cursor: pointer;
		}
        
        figure.effect-lily figcaption > div {
    position: absolute;
	bottom: 190px;
	left: 0px;
	padding: 2em;
	width: 70%;
	height: 15%;

    font-size:14px;
}
        
        .projectpage .nav a{
    font-weight:500;
	font-size:20px;
	color:#383838;
	background-color:#eee;
	float:left;
	padding:7px 0px 7px 0px;
	margin-top:15px;
	width:100%;
	text-align:center;
    text-decoration:none;
    
}

.stadiumstatus{
    height:500px;
    background: 
      /* top, transparent red */
      linear-gradient(
        rgba(33,88,107,0.0), 
        rgba(33,88,107,1)97%
      ), 
	  url(../images/sstatus.jpg);
      
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:top;
  }
 

.teamtweets{
	height:500px; 
    background: 
      /* top, transparent red */
      linear-gradient(
        rgba(10,30,55,0), 
        rgba(10,30,55,1)97%
      ),
      /* your image */
      url(../images/ttweets.jpg);
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:top;
  }	
  
.cor{
	height:500px;
  background: 
    /* top, transparent red */
    linear-gradient(
      rgba(3,3,3,0), 
      rgba(3,3,3,.5)97%
    ),
    /* your image */
    url(../images/cor.jpg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:top;
}	


.gameon{
	height:500px;
    background: 
      /* top, transparent red */
      linear-gradient(
        rgba(33,88,107,0.0), 
        rgba(33,88,107,1)97%
      ), 
	  url(../images/gameon.jpg);
      
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:top;
  }
  
  .ansp{
  	height:500px;
      background: 
        /* top, transparent red */
        linear-gradient(
          rgba(33,88,107,0.0), 
          rgba(33,88,107,1)97%
        ), 
  	  url(../images/ansp.jpg);
      
  	  background-repeat:no-repeat;
  	  background-size:cover;
  	  background-position:top;
    }
    
    .project_title{
    margin-top:330px;
	font-weight:600;
	font-size:30px;
	color:#fff;
	
}

 .footer .social {
    height:315px;
    padding: 2em;
border-top: 1px  #243347 solid;
        margin-top:20px;
}
    
.footer .social .box {
    height:40px;
    width:100%;
    background-color:#243347;
    position:relative;
    float:right;
    text-align:center;
    vertical-align:middle;
    margin-left:10px;
    margin-top:10px;
}
   
    .footer .social .box a {
    height:40px;
    width:100%;
    position:relative;
    text-align:center;
    vertical-align:middle;
    
}
   
    .footer .social .box img{
     height:40px;
    width: 40px;
        float:center;
}

   .footer .social p{
    display: inline-block;
        float:none;
    color:#4A607D;
    font-weight:500;
}




	}

    @media screen and (min-width: 320px) and (max-width: 769px)  {
        
        .header .nav {
        padding-top: 10px;
        }
   .title{
            display:none;          
        }
        
#content-1, #content-2, #content-3, #content-4, #content-5, #content-6
        {display:none; 
        }
        
        .col {
            margin-left:0%;
        	
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        
         #project_desc .nav a {
            width:100%;
            margin-top:30px;
            text-align: center;
            
        }
        
		.work figure {
			position: relative;
			float: left;
			overflow: hidden;
			min-width: 320px;
			max-width: 100%;
			max-height: 420px;
			width: 100%;
			background: #2F363D;
			text-align: center;
			cursor: pointer;
		}
        
                    .footer .social {
    height:100%;
    padding: 2em;
    border-top: 1px  #243347 solid;
    text-align: center;
}
        
        .footer .social p {
            text-align: center;
}
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        */
        
        .span_1,
		.projectpage {
            margin-left:0;
            width:100%;
        }
		
        .span_2,
		.projectpage {
            margin-left:0;
            width:100%;
        }
		
        .span_3,
		.projectpage {
            margin-left:0;
            width:100%;
        }
        
            #project_title{
    		margin-top:30px;
                margin-bottom: 15px;
			font-weight:600;
			font-size:30px;
			color:#fff;
		}
		
        #project_desc .nav {
            margin-top:30px;
            text-align: center;
        }
        
        .projectpage .nav2 a{
    font-weight:500;
	font-size:14px;
	color:#eee;
	background-color:#1C2838;
	float:left;
    clear:left;
	padding:10px;
	margin-top:30px;
   display: inline-block;
            width:120px;
	text-align:center;
    text-decoration:none;
    
}

.projectpage .nav3 a{
    font-weight:500;
    font-size:14px;
	color:#eee;
	background-color:#1C2838;
	float:left;
	padding:10px;
    margin-left:5px;
	margin-top:30px;
 display: inline-block;
	width:120px;
	text-align:center;
    text-decoration:none;
    
}
    }



    /* 2. 3 Column Grid 320px - 1159px
    ----------------------------------------------------------------------------- 
    
    Span 1:    33.3333333333%
    Span 2:    66.6666666667%
    Span 3:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 769px) and (max-width: 1159px) {
        
        .work figure {
    position: relative;
	float: left;
	overflow: hidden;
	min-width: 320px;
	max-width: 480px;
	max-height: 420px;
	width: 100%;
	background: #243347;
	text-align: center;
	cursor: pointer;
}
        
       
        
        
        .row {
            margin-left:-12px;
			
        }
    
		.col {
            margin-left:0%;
			padding:0px;
        	
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        
            .footer .social .box {
     height:40px;
    width: 40px;
    background-color:#243347;
    position:relative;
    text-align:right;
    vertical-align:middle;
    margin-left:10px;
    margin-bottom:10px;
    display:inline-block;
    
}
        
    .footer .social {
    height:220px;
    
}
        
    .footer .social p{
    color:#4A607D;
    font-weight:500;
    text-align:center;
    font-size: 12px;
    clear:left;
    

}
        
        .span_1 {
            width:33.3333333333%;
			
        }
        .span_2 {
            width:66.6666666667%;
        }
        .span_3 {
            margin-left:0;
            width:100%;
		
        }
    }

    /* 3. 3 Column Grid 1160px - Infinity 
    ----------------------------------------------------------------------------- 
    
    Span 1:    33.3333333333%
    Span 2:    66.6666666667%
    Span 3:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 1160px) {
        
        .col {
            margin-left:0%;
        	
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        
        
        
        .span_1 {
            width:33.3333333333%;
        }
        .span_2 {
            width:66.6666666667%;
        }
        .span_3 {
            margin-left:0;
            width:100%;
        }
    }