@import url(reset.css);
@import url(plugins.css);


/* COLORS
-------------------------
   Blue      : #30c2ff
   Gray      : #2f2f2f
   Lightgray : #909090
   Darkgray  : #0c0c0c
------------------------- */


body{font:100% "Trebuchet MS", Arial, "sans-serif"; background:#2f2f2f url(../img/global/pattern.png);}

/* Global styles */
.clear{clear:both;}
.submit, input[type="submit"]{cursor:pointer;}


#container{}
.wrap{width:980px; margin:0 auto;}


/* Header
---------------------------------------------------------------- */
header{padding:20px 0 25px;}

   /* Logo */
   #logo{padding:0 0 25px;}
      #logo img{display:block; margin:0 auto;}

   /* Menu */
   #menu{width:100%; padding:5px 0; background:url(../img/global/black.png);}
      #menu ul{text-align:center;}
      #menu li{display:inline; padding:0 20px; line-height:25px;}
      #menu li a{color:#909090; font:bold 16px Georgia, "serif"; text-transform:uppercase; text-decoration:none;}
      #menu li a:hover{color:#fff;}
      #menu li.active a{color:#30c2ff; font-style:italic;}




/* Main
---------------------------------------------------------------- */
#main{padding:0 0 40px;}

aside{padding:10px 15px; background:url(../img/global/black.png); outline:none;}
aside p{padding:5px 0 10px; color:#909090; font-size:12px; line-height:16px;}
aside p a{color:#d0d0d0; text-decoration:none;}
aside p a:hover{color:#fff;}


   /* ----- Home page (news) ----- */
   .news article{clear:both; margin:0 0 40px;}
      /* Side */
      .news aside{float:left; width:290px; height:230px;}
      .news aside h1{padding:0 0 10px; color:#30c2ff; font:18px/24px Georgia, serif; text-transform:uppercase;}
      /* Image and its caption */
      .news figure{float:right;}
         .news .img{padding:15px; background:url(../img/global/black.png);}
         .news figcaption{width:615px; height:25px; line-height:25px; margin:10px 0 0; padding:0 15px; font-size:12px; color:#909090; background:url(../img/global/black.png);}
         .news figcaption .date{float:right;}


   /* ----- Biography ----- */
   /* Slider */
   .slider{position:relative; float:left; overflow:hidden; width:425px; height:540px; padding:15px; background:url(../img/global/black.png);}
      .slider figure img{display:block; margin:0 0 15px;}
      .slider .bx-pager{position:absolute; z-index:10; bottom:35px; left:0; display: flex; justify-content: center; width:100%; text-align:center;}
      .slider .bx-pager a{display: block; width:10px; height:10px; margin:0 7px; background:#444; overflow:hidden; white-space:nowrap; text-indent:100%; text-decoration:none;}
      .slider .bx-pager a:hover{background-color:#555;}
      .slider .bx-pager .active{background-color:#888;}
   /* Side */
   .biography aside{float:right; width:465px; height:550px; overflow:auto;}


   /* ----- Portfolio ----- */
   .portfolio{display: flex; flex-flow: row wrap; justify-content: center; max-width: 1280px; margin: 0 auto; padding:0 20px; margin-left:auto; margin-right:auto;}
      .portfolio article{position:relative; width:230px; height:180px; margin:0 5px 5px 0; padding:5px; background:url(../img/global/black.png);}
      .portfolio figcaption{display:none;}
      .portfolio figcaption{position:absolute; top:5px; left:5px; width:230px; height:180px; text-align:center; background:url(../img/global/blue.png);}
      .portfolio figure span{position:relative; top:44%; padding:6px 8px; color:#30c2ff; font:16px/26px Georgia, serif; text-transform:uppercase; background:#222;}
      .portfolio a:hover figcaption{display:block;}


   /* ----- Video ----- */
   .video iframe{display:block; margin:0 auto; padding:10px; background:url(../img/global/black.png);}
   .video .caption{clear:both; line-height:25px; margin:15px 0 0; padding:0 8px; color:#909090; font-size:12px; background:url(../img/global/black.png);}


   /* ----- Links ----- */
   .links ul{display: flex; flex-flow: row wrap; max-width: 1020px; margin: 0 auto; justify-content: center; margin:0 auto;}
      .links li{display: block; margin:0 20px 40px;}
      .links li a{display:block; padding:7px; background:url(../img/global/black.png);}
      .links li a:hover{background-image:url(../img/global/blue.png);}
      .links li img{display:block;}


   /* ----- Contact ----- */
   .contact .form .left{float:left;}
   .contact .form .right{float:right;}
      .contact .form p{margin:0 0 15px;}
      .contact .form .text{width:350px; height:24px; padding:4px 8px; color:#fff; font:15px "Trebuchet MS", "sans-serif"; text-transform:uppercase; border:none; background:url(../img/global/black.png); resize:none; outline:none;}
      .contact .form .text:focus{color:#30c2ff;}
      .contact .form textarea.text{width:570px; height:156px; padding:8px;}
      .contact .form .submit{margin:0 0 10px 395px; padding:10px 15px; color:#111; font:15px "Trebuchet MS", "sans-serif"; text-transform:uppercase; background:url(../img/global/blue.png); border:none;}
      .contact .form .submit:hover{color:#fff;}
      .contact .form .submit:active{color:#30c2ff; background:url(../img/global/black.png);}
      .contact .message{margin:15px 0 0; padding:5px 10px; text-align:center; color:#fff; font-size:16px; text-transform:uppercase; background:url(../img/global/black.png);}
      .contact .message p{margin:0;}
      .contact .message.error{background:#ce0e0e;}
      .contact .message.success{background-image:url(../img/global/blue.png);}
      .contact .img{clear:both; margin:30px 0 0; padding:10px; background:url(../img/global/black.png);}



/* Footer
---------------------------------------------------------------- */
footer{position:fixed; bottom:0; left:0; width:100%; height:20px; background:#0c0c0c;}
   #credits{color:#909090; font:10px/20px Arial, "sans-serif"; text-align:right; padding:0 20px 0 0;}
   #credits img{position:relative; top:-15px; float:right; margin:0 0 0 10px;}




/* Small devices
---------------------------------------------------------------- */
@media handheld, only screen and (max-width:1000px){
   #container{padding-bottom:40px;}
   .wrap{width:100%; margin:0}
   section{width:100%;}
   #main img{width:100%; max-width:100%; height:auto;}

   /* Home */
   .news article{width:85%; margin:0 5% 50px;}
   .news aside{float:none; width:100%; height:auto; padding:10px 2.5%;}
   .news figure{float:none; width:100%; height:auto; margin:10px 0 0;}
   .news .img{padding:10px 2.5%;}
   .news figcaption{width:100%; margin:5px 0 0; padding:0 2.5%;}
   /* Biography */
   .biography .slider, .biography aside{float:none; width:85%; margin:0 5% 20px; padding:15px 2.5%}
   .biography .slider .bx-wrapper{margin:0 auto;}
   .biography .slider img{height:100%; width:auto !important; max-width:auto !important;}
   /* Video */
   .video iframe{display:block; width:100%; margin:0 auto; padding:1.5% 0;}
   .video .caption{width:92%; margin:15px auto 0;}
   /* Contact */
   .contact .form{margin:0 5%; width:90%;}
   .contact .form .submit{display:block; margin:0 auto 20px;}
   .contact .form .text, .contact .form textarea.text{width:98%;}
   .contact .form .left, .contact .form .right{float:none;}
   .contact .img{width:85%; margin-left:5%; margin-right:5%; padding:2.5%;}
}