/*************************
ESSENTIALS
*************************/

@font-face{
    font-family: "rage";
    src: url('../font/rage.ttf') format("truetype");
}

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    color: #fff;
    font-family: 'Quicksand', cursive;
    font-size: 17pt;
}

#fixedBg {
    background-image: url(../img/photography_@2X.png);
    background-color: #000;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -999;
}

.iantoFont {
    font-family: "rage", cursive;
}

/*************************
HEADER
*************************/

header {
    margin: 0;
    top: 0;
    width: 100%;
    position: relative;
/*
    background-image: url('../img/gallery/First%20Snow%20Preseli.jpg');
    background-repeat: no-repeat;
    background-size: cover;
*/
    background-color: rgba(0, 0, 0, 0.2);
}

header h1 i {
    font-family: "quicksand", monospace;
    font-size: 30pt;
    position: relative;
    color: #ff0770;
    top: -20px;
}

#iantoText {
    margin: 0;
    padding-top: 30px;
    position: relative;
    font-family: "rage", cursive;
    font-size: 40pt;
    text-align: center;
    color: #000;
}


/*************************
NAVIGATION
*************************/

nav {
    width: 100%;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

nav a {
    color: #fff;
    text-decoration: none;
    list-style: none;
    margin: 0;
}

#navMenu {
    background-color: rgba(0, 0, 0, 0.79);
    padding: 0;
    margin: 0;
}

#navMenu a {
    padding: 15px;
    font-family: "rage", cursive;
    font-size: 26pt;
    border-bottom: 1px dashed #fff;
}

#navMenu a:last-child {
    border: 0;
}

#navMenu li i{
    margin: 0 15px 0 0;
}

.container {
    position: relative;
    top: 0;
    right: 0;
    padding: 5px;
    cursor: pointer;
    float: right;
    z-index: 9999;
}

.activeNav {
    display: block;
}

.hiddenNav {
    display: none;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #000;
    margin: 5px 0;
    transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-6px, 6px) ;
    transform: rotate(-45deg) translate(-6px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

/*************************
SECTIONS
*************************/

#containerPhotos .box {
    background-color: rgba(0, 0, 0, 0.58);
}

#containerPhotos {
    z-index: -999;
}

.drawing {
    width: 100%;
    display: block;
}
/*************************
ABOUT
*************************/

/*
#iantoMe {
    width: 100%;
    text-align: center;
}
*/

/*********** Ianto image   *****/

#iantoPic {
    position: relative;
    top: 70px;
    width: 250px;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    background-image: url(../img/logo/ianto.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    margin-bottom: 2.8em;
}

#about {
    width: 100%;
    background-color: rgba(255, 255, 255, 0);
    color: #000;
}

#aboutContain {
    padding: 5%;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

#aboutContain h2 { 
    margin: 0;
    font-family: 'rage', cursive;
    color: #000;
    font-size: 40pt;
    text-align: center;
}

#aboutContain img {
    width: 200px;
    margin-right: auto;
    margin-left: auto;
}

#aboutContain p {
    font-family: 'Eczar', serif;
    text-align: justify;
    word-spacing: 3px;
    margin-bottom: 3em;
}

/***************
SLIDER
***************/

#sliderContainer{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 0px;
    text-align: center;
    margin-bottom: 0em;
}

.slide-viewer {
    position: relative;
    overflow: hidden;
    height: 350px;
}

.slide-group {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}

.slide img {
    width: 1000px;
    height: 750px;
}

.slide:first-child {
    display: block;
}

.slide-buttons {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.42);
    cursor: pointer;
}

.activeSlide {
    color: #ff0770;
}

/*************************
GALLERY
*************************/

.gallery {
    width: 100%;
    position: relative;
}


/*************************
GALLERY.HTML ACCORDION
*************************/

.tab-panel {
    margin-bottom: 0em;
    position: relative;
    width: 100%;
}

.tab-panel a  {
    margin: 0;
    float: left;
    width: 50%;
    height: 200px;
}

.tab-panel a img {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.tab-panel.active {
    color: #ff4500;
    display: block;
}

/*************************
PHOTOS CATEGORIES
*************************/
.photos {
    width: 100%;
    clear: both;
    position: relative;
/*    background-color: rgba(0, 0, 0, 0.37);*/
}

.photos-category {
    width: 100%;
    height: 180px; 
    position: relative;
    box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    display: block;
}

.photos-category h2 {
    margin: 0;
    width: 100%;
    position: absolute;
    top: 30px;
    text-align: center;
    font-family: "rage", cursive;
    font-size: 46pt;
    z-index: 999;
    color: #fff;
}

.photos-category img {
    width: 100%;
    height: 100%;
    display: inline-block;
    filter: brightness(50%);
    -webkit-filter: brightness(50%);
    -moz-filter: brightness(40%);
/*    margin-top: -0px;*/
}

#nature img {
    background-image: url(../img/gallery/Early%20Summer%20Rose.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#buildings img{
    background-image: url(../img/gallery/Another%20View%20Carew%20Castle.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#portraits img{
    background-image: url(../img/gallery/At%20the%20Edge%20Fest,%20Solva.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#sea img{
    background-image: url(../img/gallery/Amroth%20Beach%20Pembrokeshire.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#bandw img{
    background-image: url(../img/gallery/Moored%20on%20the%20Cleddau.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#streetLife img{
    background-image: url(../img/gallery/From%20The%20Old%20Bridge%20Pontypridd.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.photos a:nth-child(6) div {
    margin-bottom: 1em;
}

/*************************
CONTACT FORM
*************************/

#mail {
    width: 100%;
    margin: 0 0 2em 0;
    padding: 10px 0;
    position: relative;
}

#form {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: 'Raleway', sans-serif;
}
.form-style {
    text-align: left;
}

.form-style label{
    width: 100%;
    margin: 10px 0 0 0;
}


input {
    width: 100%;
    height: 25px;
    font-size: 16px;
    font-family: 'Raleway', sans-serif;
}

input[type=submit] {
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    cursor: pointer;
    color: #222;
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    width: 60px;
    height: 30px;
    transition: 1s;
}

#sButton {
    width: 100%;
    text-align: center;
}

#sButton:hover input[type=submit], #sButton:hover .fa {
    color: #fff;
}

#sButton .fa {
    background-color: rgba(0, 0, 0, 0);
}

textarea {
    width: 100%;
    height: 100px;
    font-size: 16px;
    font-family: 'Raleway', sans-serif;
}

/*************************
FOOTER
*************************/

footer {
    background-color: #576575;
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;
    width: 100%;
    clear: both;
}

footer .fa {
    color: #333;
    font-size: 23pt;
    text-decoration: none;
    padding: 10px;
    border-radius: 50%;
    background-color: #fff;
    transition: 1s;
}

footer .fa:first-child {
    width: 28px;
}

footer .fa:hover, footer .fa:active, footer .fa:focus {
    background-color: #ff0770;
    color: #fff;
}

#footerCopyright {
    position: relative;
    font-size: 13pt;
    padding: 15px 0;
    background-color: rgba(0, 0, 0, 0.88);
    width: 100%;
}

#footerCopyright i {
    font-family: 'rage', cursive;
    font-size: 20pt;
}

#footerCopyright a {
    text-decoration: none;
    color: #999;
}

#footerCopyright a:hover {
    text-decoration: underline;
}