/*
Theme Name: Carolyn
Theme URI: 
Author: Kirsty Marks
Author URI: https://www.kirstymarks.com
Description: My theme, simples

Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready, accessibility-ready
Text Domain: Kirsty Marks Photography
*/

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family: diavlolight;
	vertical-align:baseline;
}
@font-face {
    font-family: 'diavlobold';
    src: url('fonts/diavlo_bold_ii_37.eot');
    src: url('fonts/diavlo_bold_ii_37.eot?#iefix') format('embedded-opentype'),
         url('fonts/diavlo_bold_ii_37.woff2') format('woff2'),
         url('fonts/diavlo_bold_ii_37.woff') format('woff'),
         url('fonts/diavlo_bold_ii_37.ttf') format('truetype'),
         url('fonts/diavlo_bold_ii_37.svg#diavlobold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'diavlolight';
    src: url('fonts/diavlo_light_ii_37.eot');
    src: url('fonts/diavlo_light_ii_37.eot?#iefix') format('embedded-opentype'),
         url('fonts/diavlo_light_ii_37.woff2') format('woff2'),
         url('fonts/diavlo_light_ii_37.woff') format('woff'),
         url('fonts/diavlo_light_ii_37.ttf') format('truetype'),
         url('fonts/diavlo_light_ii_37.svg#diavlolight') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'diavloblack';
    src: url('fonts/diavlo_black_ii_37.eot');
    src: url('fonts/diavlo_black_ii_37.eot?#iefix') format('embedded-opentype'),
         url('fonts/diavlo_black_ii_37.woff2') format('woff2'),
         url('fonts/diavlo_black_ii_37.woff') format('woff'),
         url('fonts/diavlo_black_ii_37.ttf') format('truetype'),
         url('fonts/diavlo_black_ii_37.svg#diavloblack') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {margin: 0; padding: 0;}
strong {font-weight: bold;}
.clearfix {clear:both;}
.menu { position: absolute; z-index: 12; top: 0; left: 70px; width: 370px;}
.menu .logo {float: left; width: 100%; height: 245px;position:relative; margin-bottom: 50px;}
.mobile_menu {display:none;}
.menu .main_menu {float: left; width: 100%; position:relative;}
.menu .main_menu ul {list-style-type:none;}
.menu .main_menu ul li a {text-decoration: none;color: #c9d7c4; font-family: diavloblack; font-size: 20px;}
.menu .main_menu ul li.current_page_item a:before { content: ">>"; float: left; margin-left: -25px;}
.menu .main_menu ul li.current_page_item a {color: #ffffff!important;}

.portfolio-wrap {padding: 10%;}
.left .portfolio-wrap {list-style-type:none;}
.left .portfolio-wrap  li a {text-decoration: none;color: #c9d7c4; font-family: diavloblack; font-size: 16px;}
.current:before { content: ">>"; float: left; margin-left: -25px;}
.left .portfolio-wrap li.current_page_item a {color: #ffffff!important;}

.full-width {width: 100%; background-color: #26353c; color: #ffffff;}
.full-width .container {width: 980px; margin: 0 auto; padding: 20px 0;}
.full-width .container h1 {margin-bottom: 30px;
    font-family: diavlobold;
    color: #ffffff;
    font-size: 40px;
}
.full-width .container p {  margin-bottom: 20px;
    font-family: diavlolight;
    color: #ffffff;
    font-size: 16px;
    font-style: italic; }


.main-slider-wrap {background-color: #26353c; min-height: 10px;}
.menu-inner {position: absolute; z-index: 12; top: 0;  width: 35%;   }
.menu-inner .logo { width: 80%; margin: 0 auto;}

.image {width: 65%; float: right; position: relative; display: inline-block;}
.information {position: absolute; display:block; height: 50%; width: 50%; margin: 80px; background-color: #000000; color: #ffffff;}

.portfolio-back {background-color: #26353c; width: 100%;}
.portfolio-back .left {float: left; width: 25%;background-color: #26353c; }
.portfolio-back .right {float: left; width: 75%; background-color: #a0b2a4;}
.portfolio-back .right p {margin-bottom: 20px; font-family: diavlolight; color: #26353c; font-size: 16px; font-style:italic;}
.portfolio-back .right .fullwidthcontent {padding: 60px;}
.fullwidthcontent ol {padding-left: 30px; padding-bottom: 20px;}
.portfolio-back .right .fullwidthcontent ul {padding-left: 30px; padding-bottom: 20px; list-style-type: disc;}
.portfolio-back .right .fullwidthcontent h1 {margin-bottom: 30px; font-family: diavlobold; color: #26353c; font-size: 40px;}
.portfolio-back .right ul {list-style-type:none;}
.portfolio-back .right .thumbnail { float: left; position: relative; transition: all 1s;}
.portfolio-back .right .thumbnail:hover > .detailswrapper {display:block; transition: all 1s; opacity: 1; }
.portfolio-back .right .detailswrapper {position: absolute; height: 100%; display: block;width: 100%;
background-color: rgba(0,0,0,.70);  color: #fff; display: none; opacity: 0; transition: all 1s;}
.portfolio-back .right .detailswrapper .content { padding: 20px; background-color: rgba(0,0,0,.70); margin: 20px; height: 75%; width: 75%; border: 1px solid #4a534c;}
.portfolio-back .right .detailswrapper .content h3 {font-family: diavloblack; font-size: 14px; color: #dddddd; margin-bottom: 20px;}
.portfolio-back .right .detailswrapper .content p {font-family: diavlobold; font-size: 14px; color: #b4b4b4; font-style:italic;}
.portfolio-back .right .thumbnail img {width: 100%;}
#portfolio-list .portfolio-item {float:left; width: 33.3333%;}
#portfolio-list .portfolio-item {}
#portfolio-wrapper {background-color: #a0b2a4;}

#testimonials {z-index: 12;}
#testimonials  {list-style-type:none;}
#testimonials li a {
    text-decoration: none;
    color: #c9d7c4;
    font-family: diavloblack;
    font-size: 16px;
}
img {display: block; max-width: 100%;}
.alternative {display:none;}
.footer, .footer-alternative { width: 100%; background-color: #000000; float: left; color: #ffffff; min-height: 150px;}
.footer .container, .footer-alternative .container {width: 980px; margin: 0 auto; }
.footer .container h3 , .portfolio-back .left .content h3, .footer-alternative .container h3 {text-align: center;font-family: diavlobold; color: #c9d7c4; font-size: 20px; margin-bottom: 20px;}
.footer .container .social-icon, .footer-alternative .container .social-icon, .portfolio-back .left .content .social-icon{margin: 0 auto;}
.footer .left-area, .footer-alternative  .left-area {float: left; width: 25%;}
.footer .right-area, .footer-alternative .right-area {float: left;width: 75%; }
.portfolio-back .right  .content-wrapper {padding: 50px;}
.portfolio-back .right  .fullwidthcontent .thepostcontent{}
.thepostcontent h2, .content-wrapper h1 {margin-bottom: 30px;font-family: diavlobold;color: #26353c;font-size: 40px;}
.post-categories {position: relative;display: inline-table;}
.post-categories:after { content: ""; clear: both; display: block;}
.post-categories ul li {float: left;}
.post-categories ul li a,.content-wrapper h1 a {text-decoration: none; color: #26353c;}
.post-categories ul li {display: inline;}
.footer .right-area h3, .footer-alternative .right-area h3, .portfolio-back .left .content h3 {text-align:center;}
.footer .right-area p, .footer-alternative .right-area p, .portfolio-back .left .content p {font-family: diavlolight; color: #fff;font-style:italic; font-size: 15px;}
.footer .right-area .testimonial-person, .footer-alternative .right-area .testimonial-person, .portfolio-back .left .content .testimonial-person {float : right; margin: 10px 0;font-family: diavlobold; color: #ffffff; font-size: 14px; }
.footer .left-area .content, .footer-alternative .left-area .content, .footer-alternative .right-area .content, .footer .right-area .content, .portfolio-back .left .content {padding: 30px;}
.alternative {display:none;}
.footer .right-area .testimonials-content {width: 75%; margin: 0 auto;}

.testimonials .lSAction > .lSPrev, .testimonials .lSAction > .lSNext {top: 20px;}
.testimonials .lSAction > a {background-image:url('./img/controls-other.png');}

#image-gallery ul {height: 800px;}

@media only screen 
and (max-device-width : 980px) {
.full-width .container, .footer .container{width: 90%;}	
.footer {min-height: 350px;}
}
@media only screen 
and (max-device-width : 695px) {
.full-width .container, .footer .container{width: 90%!important;}	
.footer {min-height: 350px;}
}
@media only screen 
and (max-device-width : 680px) {
.menu .main_menu {display:none;}
.mobile_menu {display: block;}
.portfolio-back .left {display:none;}
.portfolio-back .right {width: 100%;}
.alternative {display:block;}
}
@media only screen 
and (max-device-width : 440px) {
.main_menu, .menu {display:none;}
.footer .left-area {width: 100%;}
.menu .logo{width: 70%;}
.footer .right-area {width: 90%;}

}