/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/




/* CSS Reset________________________________________________________________________________________________________________ */




html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	z-index: 1;
	font: inherit;
	vertical-align: baseline;
	text-decoration: none;
	text-decoration-style: none;
	color: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
  background-color: #0b162b;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/*fonts_________________________________________________________________________________________________________________________________________________________________________________________*/


                @font-face {
                  font-family: 'FontAwesome';
                  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
                  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), 
                       url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), 
                       url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), 
                       url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
                  font-weight: normal;
                  font-style: normal;
                 }

                @font-face {
                    font-family: 'gotham_bold';
                    src: url('../fonts/gothamhtf-bold_0-webfont.eot');
                    src: url('../fonts/gothamhtf-bold_0-webfont.eot?#iefix') format('embedded-opentype'),
                         url('../fonts/gothamhtf-bold_0-webfont.woff2') format('woff2'),
                         url('../fonts/gothamhtf-bold_0-webfont.woff') format('woff'),
                         url('../fonts/gothamhtf-bold_0-webfont.ttf') format('truetype'),
                         url('../fonts/gothamhtf-bold_0-webfont.svg#gotham_htfbold') format('svg');
                    font-weight: normal;
                    font-style: normal;
                    }


               @font-face {
                   font-family: 'gotham_medium';
                   src: url('../fonts/Gotham-Medium.eot?#iefix') format('embedded-opentype'),
                        url('../fonts/Gotham-Medium.otf')  format('opentype'),
                        url('../fonts/Gotham-Medium.woff') format('woff'),  
                        url('../fonts/Gotham-Medium.ttf')  format('truetype'), 
                        url('../fonts/Gotham-Medium.svg#Gotham-Medium') format('svg');
                   font-weight: normal;
                   font-style: normal;
                   }



                @font-face {
                    font-family: 'geogrotesque_smbdsemibold';
                    src: url('../fonts/geogtq-sb-webfont.eot');
                    src: url('../fonts/geogtq-sb-webfont.eot?#iefix') format('embedded-opentype'),
                         url('../fonts/geogtq-sb-webfont.woff2') format('woff2'),
                         url('../fonts/geogtq-sb-webfont.woff') format('woff'),
                         url('../fonts/geogtq-sb-webfont.ttf') format('truetype'),
                         url('../fonts/geogtq-sb-webfont.svg#geogrotesque_smbdsemibold') format('svg');
                    font-weight: normal;
                    font-style: normal;

                    }

                @font-face {
                  font-family: 'geogrotesque-medium';
                  src: url('../fonts/Geogrotesque-Medium.eot?#iefix') format('embedded-opentype'),  
                       url('../fonts/Geogrotesque-Medium.otf')  format('opentype'),
                       url('../fonts/Geogrotesque-Medium.woff') format('woff'), 
                       url('../fonts/Geogrotesque-Medium.ttf')  format('truetype'), 
                       url('../fonts/Geogrotesque-Medium.svg#Geogrotesque-Medium') format('svg');
                  font-weight: normal;
                  font-style: normal;
                 }

                @font-face {
                  font-family: 'Geogrotesque-Bold';
                  src: url('../fonts/Geogrotesque-Bold.eot?#iefix') format('embedded-opentype'),  
                  url('../fonts/Geogrotesque-Bold.otf')  format('opentype'),
                  url('../fonts/Geogrotesque-Bold.woff') format('woff'), 
                  url('../fonts/Geogrotesque-Bold.ttf')  format('truetype'), 
                  url('../fonts/Geogrotesque-Bold.svg#Geogrotesque-Bold') format('svg');
                  font-weight: normal;
                  font-style: normal;
                 }
                @font-face {
                  font-family: 'HelveticaNeueLTCom-Roman';
                  src: url('../fonts/HelveticaNeueLTCom-Roman.eot?#iefix') format('embedded-opentype'),  
                  url('../fonts/HelveticaNeueLTCom-Roman.woff') format('woff'), 
                  url('../fonts/HelveticaNeueLTCom-Roman.ttf')  format('truetype'), 
                  url('../fonts/HelveticaNeueLTCom-Roman.svg#HelveticaNeueLTCom-Roman') format('svg');
                  font-weight: normal;
                  font-style: normal;
                 }
                @font-face {
                  font-family: 'Avenir_Roman';
                  src: url('../fonts/AvenirLTStd-Roman.eot?#iefix') format('embedded-opentype'),  
                  url('../fonts/AvenirLTStd-Roman.otf')  format('opentype'),
                       url('../fonts/AvenirLTStd-Roman.woff') format('woff'), 
                       url('../fonts/AvenirLTStd-Roman.ttf')  format('truetype'), 
                       url('../fonts/AvenirLTStd-Roman.svg#AvenirLTStd-Roman') format('svg');
                  font-weight: normal;
                  font-style: normal;
                 }

                @font-face {
                  font-family: 'AvenirLTStd-Black';
                  src: url('../fonts/AvenirLTStd-Black.eot?#iefix') format('embedded-opentype'),  
                  url('../fonts/AvenirLTStd-Black.otf')  format('opentype'),
                       url('../fonts/AvenirLTStd-Black.woff') format('woff'), 
                       url('../fonts/AvenirLTStd-Black.ttf')  format('truetype'), 
                       url('../fonts/AvenirLTStd-Black.svg#AvenirLTStd-Roman') format('svg');
                  font-weight: normal;
                  font-style: normal;
                 } 
                @font-face {
                  font-family: 'avenir_heavy';
                  src: url('../fonts/AvenirLTStd-Heavy.eot?#iefix') format('embedded-opentype'),  
                  url('../fonts/AvenirLTStd-Heavy.otf')  format('opentype'),
                       url('../fonts/AvenirLTStd-Heavy.woff') format('woff'), 
                       url('../fonts/AvenirLTStd-Heavy.ttf')  format('truetype'), 
                       url('../fonts/AvenirLTStd-Heavy.svg#AvenirLTStd-Roman') format('svg');
                  font-weight: normal;
                  font-style: normal;
                 } 















/* border bars______________________________________________________________________________________________________________ */

#topbar{
    width: 100%;
    margin: 0px;
    padding: 0px;
    height: 10px;
    background-color: #17264f;
    z-index: 100;  
    }

#bottombar{
    width: 100%;
    margin: 0px;
    padding: 0px;
    height: 10px;
    background-color: #0c162a;
    z-index: 100;  
    }













/* Content Areas________________________________________________________________________________________________________________ */



#mainbody{
	height: 100%;
	width: 70%;
	margin:auto;
}




















/* Top box__________________________________________________________________________________________________________ */

#topboxbackground{
  width: 100%;
  height: 350px;
  background-image: url(../images/backgroundpic.jpg);
  background-size: cover;
  background-position: top;
     transition: all 0.3s ease 0s;
}
#topbox{
  width:70%;
  max-width: 1050px;
  height:355px;
  margin: auto;
  z-index: 0;
     transition: all 0.3s ease 0s;
  }


.topboxhead{
      display: block;
      font-size: 50px;
      color: #17264f;
      font-family: "gotham_bold" , sans-serif;
      line-height: 40px;
      padding-top: 46px;
      margin-left: -2px;
      transition: all .2s ease 0s;
      }

.topboxrule {
    margin-top: 7px;
    margin-bottom: 11px;
    height: 3px;
    width: 585px;
    background-color: #17264f;
    }

.topboxsubhead{
      display: block;
      font-size: 31px;
      color: #17264f;
      font-family: "gotham_medium" , sans-serif;
      line-height: 26px;
      margin-top: 0px;
      transition: all .2s ease 0s;
      margin-bottom: 27px;
      }


.topboxoptionbox {
    display: block;
    margin-top: 10px;
    width: 230px;
    height: 25px;
    padding: 18px;
    border-radius: 5px;
    background-color: #17264f;
    transition: all .1s ease 0s;
}

.topboxoptionboxtext {
    margin: 0px;
    font-size: 25.5px;
    color: #e4f0ff;
    font-family: "gotham_medium", sans-serif;
    line-height: 26px;
    transition: all .1s ease 0s;
    }


.topboxoptionbox:hover {
   background-color: #2a568a;
   transition: all .1s ease 0s;
   }

.topboxoptionbox:hover .topboxoptionboxtext {
   color: #ffffff;
   transition: all .1s ease 0s;
   }
















/* menu bar___________________________________________________________________________________________________________ */


#menubararea{
  overflow: visible;
  width:100%;
  height: 70px;
  z-index: 100;
  background-color: #2a568a;
  }

  .menubar{
    width: 70%;
    max-width: 1050px;
    margin: auto;
  }



    .menutext{
      position: absolute;
    	font-size: 14px;
    	color: #b8cbe2;
    	font-family: 'avenir_heavy' , sans-serif;
    	line-height: 17px;
      margin-left: 16px;
      margin-top: 15px;
    	transition: all .2s ease 0s;
        }

    .menutextbox{
    	display: inline-block;
    	font-size: 20px;
    	font-family: sans-serif;
    	width: 120px;
      height: 70px;
      margin-bottom: 0px;
      border-radius: 0px;
    	transition: all .2s ease 0s;
      background-color: #2a568a; 
        }

    .menutextbox:hover{
      margin-top: -30px;
      height: 100px;
      border-radius: 15px 15px 0px 0px;
      transition: all .2s ease 0s;
      background-color: #17264f;
     }

    .menutextbox:hover .menutext{
         transition: all .2s ease 0s;
         color: #ffffff;
     }

    .menutextboxspace{
      display: inline-block;
      width: 3px;
      height: 70px;
      background-color: #17264f;
    }
   
    .menubox{
	    right: 0px;
	    position: relative;
	    text-align: right;
      max-width: 1054px;
      margin-top: 0px;
    }

  

  .menubreak{
  display:inline-block;
}


#smallmenubararea{display:none;}





















/* Player Area_________________________________________________________________________________________________________ */


#playerarea{
  padding-top: 50px;
  background-color: #17264f;

}



#radio_frame{
    padding-top: 13px;
    width: 97%;
    max-width: 1050px;
}


.adcexpand{
  width: 70%;
  max-width: 1050px;
  height: 100px;
  margin: auto;
  display: block;
}

.adchide{
  width: 70%;
  height: 0px;
  display: none;
}


















/* Demo Area_________________________________________________________________________________________________________ */

#demoareabackground{
  width: 100%;
  height: auto;
  background-color:  #17264f;
  z-index: 200;
}
  
.demoarea{

   width: calc(70% + 6px);
   max-width: 1050px;
   margin: auto;
   padding-top: 0px;
   padding-bottom: 30px;
   padding-left: 8px; 
   z-index: 200;
}






    .demoreeltext{
	    display: block;
	    font-size: 30px;
	    color: #000000;
	    font-family: sans-serif;
	    line-height: 40px;
	    margin: 16px;
	    margin-top: -83px;
	    margin-left: 281px;
	    transition: all .2s ease 0s;
        }

        .demoreeltext:hover{color:#357cff;
         transition: all .2s ease 0s;}


    .bottomtext{
	    margin: 5px;
	    margin-left: 283px;
        margin-top: -16px;
        margin-bottom: 34px;
	    display: block;
	    font-size: 20px;
	    color: #000000;
	    font-family: sans-serif;
	    line-height: 30px;
        }






     #democon1{}
     #democon2{}
     #democon3{}
     #democon4{}
     #democon5{}
     #democon6{}
     #democon7{}
     #democon8{}
     #democon9{}

  .democonstyle{
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 32%;
    height: 11.7vw;
    max-width: 350px;
    max-height: 175px;
    transition: all .2s ease 0s;
    overflow: visible;
    }
  


  .democonstyle:hover img{
    transition: all .2s ease 0s;
    padding: 0px;
   -webkit-filter: brightness(150%) blur(3px);;
    filter: brightness(150%) blur(3px);
   
    }



    .vodemobox{
      position: absolute;
      width: calc(100% - 6px);  
      height: calc(100% - 6px);
      overflow: visible;
      transition: all 0.2s ease 0s;

      }

    .democonstyle:hover .vodemobox{
      box-shadow: 0px 0px 2px 1px #b5e4ff;
      }
      
      }

  .videoplaycircle {
  height: 50%;
  width: 50%;
  background-color: #bbb;
  border-radius: 50%;
  position: absolute;
  display: inline-block;}

  .vodemosubbox{
    position: absolute;
    bottom: 0px;
    font-size: 20px;
    line-height: 25px;
    color: #000000;
    font-family: "gotham_bold" , sans-serif;
    padding: 10%;
    opacity: 0;
    transition: all 0.2s ease 0s;
    }

   .democonstyle:hover .vodemosubbox{
    transition: all 0.2s ease 0s;
    opacity: 1;
    text-shadow: 0px 0px 5px #ffffff, 0px 0px 10px #ffffff, 0px 0px 25px #ffffff;
    }















/* footer________________________________________________________________________________________________________________ */




      
      .footerbackgroundbox{
       width: 100%;
       display: block;
       margin: auto;
       padding-top: 20px;
       padding-bottom: 30px;
       background-color: #17264f;
       }

       .footerbox{
        width: 550px;
        display: block;
        margin: auto;
        }

      .footeritem{
    	display: inline-block;
    	font-size: 14px;
    	color: #5b80b6;
    	font-family: 'Avenir_Roman', sans-serif;
    	line-height: 20px;
    	transition: all .2s ease 0s;
        } 

       .footertextbox{
    	display: inline-block;
    	font-family: sans-serif;
    	height: 40px;
    	margin-right: 20px;
      margin-left: 20px;
    	transition: all .2s ease 0s;
        }



















/* about________________________________________________________________________________________________________________ */

.abouttitle{
    font-size: 25.5px;
    color: #ffffff;
    font-family: "gotham_medium", sans-serif;
    line-height: 26px;
    margin-bottom: 30px;
    }

.aboutbody{
      font-size: 14px;
      color: #b8cbe2;
      font-family: 'Avenir_Roman', sans-serif;
      line-height: 16px;
      margin-right: 5%;
      }

.galleryimage{
  width: auto;
  height: 200px;
  display: inline-block;
  margin: 3px;
  }

.imagegallerylargebackground{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #000000;
  
  transition: all .2s ease 0s;
}

            .imagegallerylargebackgroundhide{opacity: 0; pointer-events: none;   transition: all .2s ease 0s;}

            .imagegallerylargebackgroundexpand{opacity: .7;  pointer-events: auto;  transition: all .2s ease 0s;}

.galleryimagelarge{
  position: fixed;
  bottom: 15%;
  width: auto;
  display: block;
  margin: auto;
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
}

.gallerysubtitle{
  font-size: 16px;
  color: #ffffff;
  font-family: 'Avenir_Roman', sans-serif;
  line-height: 16px;
  position: fixed;
  top: 87%;
  width: auto;
  display: block;
  margin: auto;
  max-width: 80%;
  max-height: 10%;
  width: auto;
  height: auto;
  }


            .gallerysubtitlehide{opacity: 0; pointer-events: none;   transition: all .2s ease 0s;}

            .gallerysubtitleexpand{opacity: 1;  pointer-events: auto;  transition: all .2s ease 0s;}



.galleryimagelargetall{
  position: fixed;
  bottom: 15%;
  width: auto;
  display: block;
  margin: auto;
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
}



          .galleryimagelargehide{
           opacity: 0;
           pointer-events: none;
           transition: all .2s ease 0s;
           }



          .galleryimagelargeexpand{
            opacity: 1;
            pointer-events: auto;
            transition: all .2s ease 0s;
          }
















/* audiobook________________________________________________________________________________________________________________ */

.audiobookdemobox {
    display: block;
    margin-top: 10px;
    height: 25px;
    padding: 18px;
    border-radius: 5px;
    background-color: #2a568a;
    transition: all .2s ease 0s;
    margin-bottom: 140px;
    float: left;
  }

.audiobookdemoboxtext {
    margin: 0px;
    font-size: 25.5px;
    color: #e4f0ff;
    font-family: "gotham_medium", sans-serif;
    line-height: 26px;
    transition: all .1s ease 0s;
    }


 .audiobookdemobox:hover {
   background-color: #61a3d4;
   transition: all .2s ease 0s;
   }

.audiobookdemobox:hover .audiobookdemoboxtext {
   color: #ffffff;
   transition: all .2s ease 0s;
   }


















/* writer / editor________________________________________________________________________________________________________________ */


.canonlinkbox {
    display: block;
    margin-top: 10px;
    width: 230px;
    padding: 18px;
    border-radius: 5px;
    background-color: #2a568a;
    transition: all .2s ease 0s;
    margin-bottom: 40px;
}




.linkboxtext {
    margin: 0px;
    font-size: 16.5px;
    color: #e4f0ff;
    font-family: "gotham_medium", sans-serif;
    line-height: 22px;
    transition: all .1s ease 0s;
    }


 .canonlinkbox:hover {
   background-color: #61a3d4;
   transition: all .2s ease 0s;
   }

.audiobookdemobox:hover .audiobookdemoboxtext {
   color: #ffffff;
   transition: all .2s ease 0s;
   }















/* Contact Form________________________________________________________________________________________________________________ */


 #contactform{
      display: block;
      vertical-align:top;
      width: 100%;
      height: 100%;
      margin-left: 8px;
      padding: 0px;
      pointer-events: auto;
      }


 #emailbox{
      padding-top: 20px
      }

 .contactformtext{
      color: #98b3d4;
      font-size: 15px;
      line-height: 18px; 
      font-family: 'avenir_roman', helvetica, sans-serif;
      margin-top: 32px;
      margin-bottom: 5px;
      }

 .contactformtitletext{
      color: #98b3d4;
      font-size: 16px;
      line-height: 22px;
      font-family: 'avenir_roman', helvetica, sans-serif;

      }


 .contactformtitletextbold{
      display: inline-block;
      color: #ffffff;
      font-family: 'avenir_heavy', helvetica, sans-serif;
      }

 .contactformtextcomments{
      color: #98b3d4;
      font-size: 15px;
      line-height: 18px; 
      font-family: 'avenir_roman', helvetica, sans-serif;
      margin-top: 56px;
      margin-bottom: 12px;
      }

 .formbutton {
    border-style: none;
    border-radius: 5px 5px 5px 5px;
    background: #2a568a;
    display: block;
    margin-top: 20px;
    margin-bottom: 27px;
    width: 163px;
    height: 39px;
    color: #ffffff;
    font-size: 16px;
    font-family: 'gotham_medium', helvetica, sans-serif;
    transition: all 0.1s ease 0s;
  }



      .formbutton:hover{
        background-color: #61a3d4;
        transition: all 0.1s ease 0s;
      }
      
      .formfield{
        width: 300px;
        width: 65%; 
        height: 30px; 
        border-radius: 5px 5px 5px 5px; }

      .textfield{
        width: 550px;
        width: 80%;
        height: 200px;
        border-radius: 5px 5px 5px 5px; }
       
      placeholder{
         color:  #565656;  
      }
      ::-webkit-input-placeholder {
         color:  #565656;  
          
      }

      :-moz-placeholder { /* Firefox 18- */
         color:  #565656;  
      }

      ::-moz-placeholder {  /* Firefox 19+ */
         color: #565656;  
      }

      :-ms-input-placeholder {  
         color: #565656;  
      }



/*--------------------------------------------------------------
# Site Construction 
--------------------------------------------------------------*/
#introduction {
width:100%;
background-color: #a34949;
}

#player {
    width: 68%;
    max-width: 1012px;
    background-color: #17264f;
    padding-right: 2%;
    margin: auto;
    transition: all .2s ease 0s;
    overflow: hidden;
}

#portfolio {
width:100%;
background-color: #E3E3E3;
padding: 1.67em 0;
}

.content-wrap {
  width: 80%;
  margin: 0 auto;
}

.clear {
clear:both;
}








/*--------------------------------------------------------------
# Video Player
---------------------------------------------------------------*/

.playerboxexpand{
  height: 100%;
  padding-bottom: 1%;
  transition: all .2s ease 0s;
}


.playerboxhide{
  height: 0px;
  padding-bottom: 0px;
  transition: all .2s ease 0s;
}

.vid-container {
  position: relative;
  padding-bottom: 52%;
  padding-top: 30px; 
  height: 0; 
}

.vid-container iframe,
.vid-container object,
.vid-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 101.2%;
}
.vid-list-container {
  width: 92%;
  overflow: hidden;
  margin-top: 20px;
  margin-left:4%;
  padding-bottom: 20px;
}

.vid-list {
  width: 1344px;
  position: relative;
  top:0;
  left: 0;
}
.vid-item {
  display: block;
  width: 148px;
  height: 148px;
  float: left;
  margin: 0 15px 0 0;
  padding: 10px;
  cursor: pointer;
}

.thumb {
  overflow:hidden;
  height: 71px;
}

.thumb img {
  width: 100%;
  position: relative;
  top: -13px;
}

.vid-item .desc {
  color: #21A1D2;
  font-size: 15px;
  margin-top:5px;
}

.thumbs {
  border-bottom: 1px solid #C1C1C1; 
}