/* ==========================================================================
   Base styles
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
    height: 100%;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #6A8BB0;
    text-shadow: none;
}

::selection {
    background: #6A8BB0;
    text-shadow: none;
}



/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/*----- Text styles -----*/

body
{background: #F0F3F7;
color: #fff;
font-family: 'Open Sans', 'Helvetica Neue', 'Arial',sans-serif;
font-weight:300;
font-size:16px;
margin:0;
height: 100%;
}

p
{margin: 5px 1em 5px 0;
line-height: 25px;}

a
{text-decoration: none;
color: #222222;
outline: 0;
transition: color .3s ease;
&:hover {
    color: #4fb3e8;
    -webkit-transition: all .1s ease-in-out;
       -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
         -o-transition: all .1s ease-in-out;
            transition: all .1s ease-in-out;
           }
}

strong
{font-weight: bold;}

body {
  font-size: 100%;
}

body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6 {
  font-size-adjust: 0.5;
}
.tac{
	text-align:center;
}

#page {
  font-size: 1em;
  /* equivalent to 16px */
  line-height: 1.25;
  /* equivalent to 20px */
}

@media (min-width: 43.75em) {
  #page {
    font-size: 1em;
    /* equivalent to 16px */
    line-height: 1.375;
    /* equivalent to 22px */
  }
}

h1 {
  font-size: 2em;
  color:#fff;
  font-weight:300;
  /* 2x body copy size = 32px */
  line-height: 1.25;
  /* 45px / 36px */
}

@media (min-width: 43.75em) {
  h1 {
    font-size: 2.5em;
    /* 2.5x body copy size = 40px */
    line-height: 1.125;
  }
}

@media (min-width: 56.25em) {
  h1 {
    font-size: 3em;
    /* 3x body copy size = 48px */
    line-height: 1.05;
    /* keep to a multiple of the 20px line height and something more appropriate for display headings */
  }
}

h2 {
  font-size: 1.625em;
  font-weight:300;
  /* 1.625x body copy size = 26px */
  line-height: 1.15384615;
  /* 30px / 26px */
}

@media (min-width: 43.75em) {
  h2 {
    font-size: 2em;
    /* 2x body copy size = 32px */
    line-height: 1.25;
  }
}

@media (min-width: 56.25em) {
  h2 {
    font-size: 2.25em;
    /* 2.25x body copy size = 36px */
    line-height: 1.25;
  }
}

h3 {
  font-size: 1.375em;
  /* 1.375x body copy size = 22px */
 font-weight:300;
 /*color:#fff;*/
  line-height: 1.13636364;
  /* 25px / 22px */
}

@media (min-width: 43.75em) {
  h3 {
    font-size: 1.5em;
    /* 1.5x body copy size = 24px */
    line-height: 1.25;
  }
}

@media (min-width: 56.25em) {
  h3 {
    font-size: 1.75em;
    /* 1.75x body copy size = 28px */
    line-height: 1.25;
    font-weight: 300;  
  }
}

h4 {
  font-size: 1.125em;
  /* 1.125x body copy size = 18px */
  line-height: 1.11111111;
}

@media (min-width: 43.75em) {
  h4 {
    line-height: 1.22222222;
    /* (22px / 18px */
  }
}


h6 { font-size: 1em; font-weight:300;}

img {
	max-width: 100%;
	height: auto;
}

h4{
	/*color:#E9E9E9;*/
	font-weight:300;
}

ul{ 
	list-style:none inside;
}

/*--color sections--*/
.lightbg{
	background-color:#F0F3F7;
	color:#222222;
}
.lightbg h1{
    color:#222;
}
.darkbg{
	background-color:#0E141B;
	color:#fff;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header-container{
	position:fixed;
	top:0px;
	left:0px;
	background-color:#000;
	color:#fff;
	height:58px;
	width:100%;
	/*box-shadow:         0px 3px 11px rgba(50, 50, 50, 0.6);*/
	z-index:100;
	padding:0;
	margin-left:0px;
}

header{
position:relative;
width:auto;
max-width:1000px;
margin: auto;
}
.logo{
    float: left;
    padding-top: .67em;
    max-width: 49%;
    white-space: nowrap;
}

@media (min-width: 43.75em) {
  .logo {
    padding-top: .35em;
  }
}

@media (min-width: 56.25em) {
  .logo {
    padding-top: .1em;
  }
}





.logo h2{
	margin:.1em 0 0 0 ;
}
header a{
	color:#fff;
}


nav{
	float:right;
	height:54px;
}

nav ul{
list-style-type:none;
margin:0;
padding:18px 0 0 0;
float:right;

} 

nav li{
display:inline;
padding-left:1em;
text-transform: uppercase;
color:#EFEFEF;
}



	/*---Tiny Nav---*/

.tiny-nav{
	visibility:hidden;
	text-align:center;
    height:54px;
    float: right;
    max-width: 49%;
}
    
.tiny-nav a{
		min-width:32px;
		height:54px;
	}
.tiny-nav ul{
    display: inline;
    float: right;
}


.videobutton{
    
}
.photogbutton{
}
.contactbutton{
}
.fa-video-camera{
    color:#fff;
}
.fa-camera{
    color:#fff;
}
.fa-phone{
    color: #fff;
}
@media screen and (max-width: 600px){
	
	.full-nav{
		display:none;
	}
	.tiny-nav{
		visibility:visible;
	}
	.tiny-nav a{
		min-width:32px;
		height:28px;
	}
	
	
	nav{
        
		height:32px;
		/*width:250px;*/
		line-height:32px;
		float:right;
		
	}
   nav ul{
       padding-top: .7em;
   }

}

/*-----Main Container-----*/



.homebg{
	min-height: calc(100% + 58px);
	background-image:url(../img/bg/fportbwmobile.jpg);
    background-color: #000;
	background-repeat:no-repeat;
	background-position:60% center;
	background-size:cover;
    background-attachment: fixed;
}
@media screen and (min-width: 599px){
    .homebg{
    background-image:url(../img/bg/fportbw.jpg);
    }
}


.elevator-speech article{
  /*background-color: rgba(0, 0, 0, 0.1);*/
  margin-left: 1em;
  padding-left: 1em;
}
/*.homebg h3{
    text-shadow: 0px 0px 5px rgba(150, 150, 150, 1);
}*/

.elevator-speech{
	
	padding:2em 0 0 0;
	color:#fff;
}
@media screen and (min-width: 599px){
    .elevator-speech{
        padding-top: 7em;
    }
}
.elevator-speech h4{
    font-weight: 400;
}
.thumb-title{
	padding-top:2em;
}
.thumb-title h3{
	margin:2em 0 0 0;
}


/*-----Video Container-----*/



.video-container{
    margin-bottom: 0px;
	/*min-height:100vh;*/
	/*background-color:#0E141B;*/
}
.vidblurb, .photoblurb{
	margin:3em 0 3em 0em;
}
@media screen and (min-width: 600px){
    .vidblurb, .photoblurb{
	margin:6em 0 6em 0em;
}
}

.vidblurb li{
	color:#e9e9e9;
}
.options{
	height:7em;
	
}
.options h2{
	padding-top:.67em;
}
.options-list{
	background-color: #26364A;
}
.oplists{
    min-width: 200px;
}

.script{
	background-image: url(../img/icons/note-paper.svg);
	background-size:contain;
	background-repeat: no-repeat;
	padding-left: 2em; 
    white-space: nowrap;
}
.voice{
	background-image: url(../img/icons/microphone.svg);
	background-size:contain;
	background-repeat: no-repeat;
	padding-left: 2em; 
    white-space: nowrap;
}
.music{
	background-image: url(../img/icons/music.svg);
	background-size:contain;
	background-repeat: no-repeat;
	padding-left: 2em; 
    white-space: nowrap;
}
.editing{
	background-image: url(../img/icons/computer-case.svg);
	background-size:contain;
	background-repeat: no-repeat;
	padding-left: 2em; 
    white-space: nowrap;
}
.multi{
	background-image: url(../img/icons/video-camera.svg);
	background-size:contain;
	background-repeat: no-repeat;
	padding-left: 2em; 
    white-space: nowrap;
}
.green{
	background-image: url(../img/icons/green.svg);
	background-size:contain;
	background-repeat: no-repeat;
	padding-left: 2em; 
    white-space: nowrap;
}
.portable{
	background-image: url(../img/icons/green-m.svg);
	background-size:contain;
	background-repeat: no-repeat;
	padding-left: 2em; 
    white-space: nowrap;
}
.dvd{
	background-image: url(../img/icons/vynil.svg);
	background-size:contain;
	background-repeat: no-repeat;
	padding-left: 2em; 
    white-space: nowrap;
}
.social-vid{
	background-image: url(../img/icons/facebook.svg);
	background-size:contain;
	background-repeat: no-repeat;
	padding-left: 2em; 
    white-space: nowrap;
}
.video-seo{
	background-image: url(../img/icons/camera.svg);
	background-size:contain;
	background-repeat: no-repeat;
	padding-left: 2em; 
    white-space: nowrap;
}

.have-a-look{
    padding-top: 6em;
    padding-bottom: 1.2em;
}



/*-----Video Gallery-----*/



.p-gallery-item, .gallery-item {
    height: auto;
    width: 100%;
    
    float: left;
    margin: 0;
    position: relative;
}
@media (min-width: 599px) {
    .p-gallery-item, .gallery-item {
        width:50%;
    }
}
@media (min-width: 1000px) {
    .p-gallery-item, .gallery-item {
        width:33.3%;
    }
}
@media (min-width: 1200px) {
    .p-gallery-item, .gallery-item {
        width:25%;
    }
}


    .gallery-item:first-child {
        margin: 0 0 -6px 0;
        
    }

.gallery-item img {
    width: 100%;
    height: auto;
    text-align:center;
}


.gallery-item a{
	height:100%;
}

.gallery-item:hover .img-title {
    /*opacity: 1;*/
}

.select-vid .gallery-item{
    width:26%;
    border: solid 3px #000;
    background-color: #000;
    margin: 1em 20px 0 0;
}

.img-title {
    position: absolute;
    top: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    /*opacity: 0;*/
    display: none; /* comment this out for CSS hover */
    background-color: #000000;
    /*transition: all 0.5s ease;*/
}

    .img-title h3, .img-title p {
        position: absolute;
        color: #fff;
        top: 17%;
        width: 100%;
        text-align: center;
    }
    

/*----- Photo Container -----*/

.photobg{
	min-height:100vh;
	
}
/*.photo-center{
    max-width: 70%;
   /* margin-left: auto;
    margin-right: auto;
}*/





.p-gallery-item {
    height: auto;
    /*width: 25%;*/
    float: left;
    margin: 0;
    position: relative;
}

    .p-gallery-item:first-child {
        margin: 0 0 -5px 0;
        
    }

.p-gallery-item img {
    width: 100%;
    height: auto;
    text-align:center;
}


.p-gallery-item a{
	height:100%;
}

.p-gallery-item:hover .img-title {
    /*opacity: 1;*/
}

/*----- Contact -----*/

.contactbg{
	background-color: #F0F3F7;
	min-height:67vh;
}
.contact{
    padding-top: 2em;
   
}
.btn {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  color: #ffffff;
  font-size: 28px;
  background: #0E141B;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #1F2C3A;
  text-decoration: none;
}

#map-canvas {
        width: 100%;
        height: 400px;
      }

.mail {
    margin-top: 2em;    
}

.social{
	
	padding-bottom: 2em;
}
.fa-facebook-official{
    color: #43609C;
    margin-right: .2em;
}
.fa-youtube-play{
    color: #DB2724;
    margin-right: .2em;
}
.fa-flickr{
    color: #ED1983;
}





.main-bg {
    
    background-blend-mode:color-dodge;
}