@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i&display=swap);
/* Override UGG site */
body {margin: 0; padding: 0; border: 0;}
 #main {
    width: 100%;
     padding:0;
}
 .content-asset p {
    margin:0 auto;
}
 .breadcrumb {
    display:none;
}
/* Helpers */
/**************************/
 .margin-top-10 {
    padding-top:10px;
}
 .margin-bot-10 {
    padding-bottom:10px;
}

/* Colors */
/**************************/
 .white {
    color: #FFF;
}

.orange1 {
    color: #FFB240;
}

.orange2 {
    color: #CB9243;
}

.orange3
{
    color: #e5b065;
}

.navy1 {
    color: #273746;
}

.navy2 {
    color: #304250;
}

.navy3 {
    color: #516574;
}

.khaki {
    color: #B9B8A6;
}


 .blueslate {
    color: #487aa1;
 }
 .darkslate {
    color: #2a3a41;
}
 .slate {
    color: #455d68;
}
 .tan {
    color: #f0cda1;
}
.bluegray {
    color: #939fa4;
}

.lightbluegray {
    color: #d9e5e9;
}

/* Backgrounds */
/**************************/

.navy-1 {
    background-color: #273746;
    font-size:20px;
    line-height:40px;
}

.navy-2 {
    background-color: #304250;
    font-size:20px;
    line-height:40px;
}

.navy-3 {
    background-color: #516574;
    font-size:20px;
    line-height:40px;
}

.orange-1 {
    background-color: #FFB240;
    font-size:20px;
    line-height:40px;
}
.orange-2 {
    background-color: #CB9243;
    font-size:20px;
    line-height:40px;
}


/*Logo*/
/**************************/
 .yra {
     display: block;
     margin: auto;
     width: 300px;
}

 .yra-block {
    background-color:rgba(203, 146, 67, 0.8);
    background
    padding: 15px 0;
     display: block;
     margin: auto;
     width: 350px;
}

/* Typography */
/**************************/
 #parallax h1 {
     font-family: 'Playfair Display', serif;
     font-size:40px;
     letter-spacing:10px;
     line-height: 50px;
     text-align:center;
     color:white;
     font-weight:500;
     text-transform:uppercase;
     z-index:10;
     margin:0;
     text-shadow:2px 2px 5px #2a3a41;
}
 #parallax h2 {
     font-family: 'Playfair Display', serif;
     font-size:28px;
     text-align:center;
     font-weight:400;
     letter-spacing:3px;
     text-transform: uppercase;
}
#parallax h3 {
     font-family: 'Playfair Display', serif;
     font-size:20px;
     text-align:center;
     font-weight:600;
     letter-spacing:1px;
     text-transform: uppercase;
     line-height: 0px;
}
 #parallax span {
 	 width: 100%;
 	 display: block;
}
 #parallax p {
    font-family:'times', serif;
     font-weight:400;
     text-align: left;
}

/* Section - Block */
/**************************/
#parallax .content-center {
	 width: 100%;
     margin:0 auto;
     text-align: center;
     font-size: inherit;
}

#parallax .content-center p {
     text-align: center;
     font-size: 20px;
}

#parallax .content-center i {
     margin-right: 15px;
}

 #parallax .block {
     padding: 100px 9.2em;
     margin:0 auto;
     text-align:justify;
}

 #parallax .block img {
     margin: 0 auto;
     padding: 0;
     width: 150px;
     vertical-align: middle;
}

 #parallax .block-gray {
    background: #f2f2f2;
    padding: 60px;
}
 #parallax .section-overlay-mask {
    position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: black;
     opacity: 0.70;
}
/* Section - Parallax */
/**************************/
 #parallax .parallax-one {
     padding: 200px 0;
     overflow: hidden;
     position: relative;
     width: 100%;
     background-image: url(images/bg_01a.png), url(images/bg_01.jpg);
     background-attachment: fixed;
     background-size: cover;
     -moz-background-size: cover;
     -webkit-background-size: cover;
     background-repeat: no-repeat;
     background-position: top center;
}
 #parallax .parallax-two {
     padding: 110px 0;
     overflow: hidden;
     position: relative;
     width: 100%;
     background-image: url(images/bg_02.jpg);
     background-attachment: fixed;
     background-size: cover;
     -moz-background-size: cover;
     -webkit-background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
}
 #parallax .parallax-three {
     padding: 110px 0;
     overflow: hidden;
     position: relative;
     width: 100%;
     background-image: url(images/bg_03.jpg);
     background-attachment: fixed;
     background-size: cover;
     -moz-background-size: cover;
     -webkit-background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
}

/* Bio */
/**************************/
.bios-contain
{
  text-align: center;
  margin:0px auto;
}

.bio {
  display: inline-block;
  width: 32%;
  padding: 30px;
  background-color: #273746;
  margin: 15px auto;
  vertical-align: top;
  font-size:20px;
  line-height:40px;
}

.bio-title {
    font-style: italic;
    font-size: 4px;
    line-height: auto;
    margin: 0px;
    padding: 0px;
    line-height:25px;
}

.bio img {
     display: block;
     padding: 15px 0px 25px;
     border-radius: 50%;
     margin: auto;
     width: 200px;
}
/* Gallery */
/**************************/
*{box-sizing: border-box; -webkit-box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 16px/1.3 sans-serif; }

/*
PURE RESPONSIVE CSS3 SLIDESHOW GALLERY by Roko C. buljan
http://stackoverflow.com/a/34696029/383904
*/

.portfolio {
    position: relative;
    overflow: hidden;
    height: 620px;
}

/* SLIDER */

.portfolio .slides {
    height: 100%;
    white-space: nowrap;
    font-size: 0;
    transition: 0.8s;
}

/* SLIDES */

.portfolio .slides img {
  height: relative;
  margin: 0 auto;
  position: relative;
  width: 100%;
}



.portfolio .slides > * {
    font-size: 1rem;
    display: inline-block;
    white-space: normal;
    vertical-align: top;
    height: 100%;
    width: 100%;
    background: none 50% no-repeat;
    background-size: cover;
}

/* PREV/NEXT, CONTAINERS & ANCHORS */

.portfolio .arrows {
    position: absolute;
    z-index: 1;
    top: 50%;
    width: 100%;
    height: 0;
}

.portfolio .arrows > div+div {
    visibility: hidden; /* Hide all but first P/N container */
}

.portfolio .arrows a {
    background: #FFB240;
    position: absolute;
    width:       60px;
    height:      60px;
    line-height: 60px; /* If you want to place numbers */
    text-align: center;
    opacity: 0.7;
    -webkit-transition: 0.3s;
                    transition: 0.3s;
    -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
    left: 0;
}
.portfolio .arrows a:hover {
    opacity: 1;
}
.portfolio .arrows a+a {
    left: auto;
    right: 0;
}

/* NAVIGATION */

.portfolio .bullets {
    position: absolute;
    z-index: 2;
    bottom: 0;
    padding: 10px 0;
    width: 100%;
    text-align: center;
}
.portfolio .bullets > a {
    display: inline-block;
    width:       30px;
    height:      30px;
    line-height: 30px;
    text-decoration: none;
    text-align: center;
    background: rgba(255, 178, 64, 1);
    -webkit-transition: 0.3s;
                    transition: 0.3s;
}
.portfolio .bullets > a+a {
    background: rgba(255, 255, 255, 0.5); /* Dim all but first */
}
.portfolio .bullets > a:hover {
    background: rgba(255, 255, 255, 0.7) !important;
}

/* NAVIGATION BUTTONS */
/* ALL: */
.portfolio >s:target ~ .bullets >* {      background: rgba(255, 255, 255, 0.5);}
/* ACTIVE */
#s1:target ~ .bullets >*:nth-child(1) {background: rgba(255, 255, 255,   1);}
#s2:target ~ .bullets >*:nth-child(2) {background: rgba(255, 255, 255,   1);}
#s3:target ~ .bullets >*:nth-child(3) {background: rgba(255, 255, 255,   1);}
#s4:target ~ .bullets >*:nth-child(4) {background: rgba(255, 255, 255,   1);}
#s5:target ~ .bullets >*:nth-child(5) {background: rgba(255, 255, 255,   1);}
#s6:target ~ .bullets >*:nth-child(6) {background: rgba(255, 255, 255,   1);}
/* More slides? Add here more rules */

/* PREV/NEXT CONTAINERS VISIBILITY */
/* ALL: */
.portfolio >s:target ~ .arrows >* {      visibility: hidden;}
/* ACTIVE: */
#s1:target ~ .arrows >*:nth-child(1) {visibility: visible;}
#s2:target ~ .arrows >*:nth-child(2) {visibility: visible;}
#s3:target ~ .arrows >*:nth-child(3) {visibility: visible;}
#s4:target ~ .arrows >*:nth-child(4) {visibility: visible;}
#s5:target ~ .arrows >*:nth-child(5) {visibility: visible;}
#s6:target ~ .arrows >*:nth-child(6) {visibility: visible;}
/* More slides? Add here more rules */

/* SLIDER ANIMATION POSITIONS */

#s1:target ~ .slides {transform: translateX(   0%); -webkit-transform: translateX(   0%);}
#s2:target ~ .slides {transform: translateX(-100%); -webkit-transform: translateX(-100%);}
#s3:target ~ .slides {transform: translateX(-200%); -webkit-transform: translateX(-200%);}
#s4:target ~ .slides {transform: translateX(-300%); -webkit-transform: translateX(-300%);}
#s5:target ~ .slides {transform: translateX(-400%); -webkit-transform: translateX(-400%);}
#s6:target ~ .slides {transform: translateX(-500%); -webkit-transform: translateX(-500%);}
/* More slides? Add here more rules */


/* YOU'RE THE DESIGNER! 
   ____________________
   All above was mainly to get it working :)
   CSSgal CUSTOM STYLES / OVERRIDES HERE: */

.portfolio{
    color: #fff;    
    text-align: center;
}
.portfolio .slides h2 {
    margin-top: 40vh;
    font-weight: 200;
    letter-spacing: -0.06em;
    word-spacing: 0.2em;
    font-size: 3em;
}
.portfolio a {
    border-radius: 50%;
    margin: 0 3px;
    color: rgba(0,0,0,0.8);
    text-decoration: none;
}

/* Form */
/**************************/
 #parallax .contact {
 	margin: 0 auto;
 	padding: 0;
	font-family:'Times', serif;
	font-weight:400;
 	width: 60%;
}

 #parallax .contact input, textarea {
	 width: 100%;
	 padding: 12px 20px;
	 margin: 8px 0;
	 display: block;
	 border: 1px solid #ccc;
	 border-radius: 4px;
	 box-sizing: border-box;
 	font-size:16px;
 }
 #parallax .contact button {
     width: 100%;
     background-color: #FFB240;
     border: none;
     color: white;
     margin: 10px 0 0;
     padding: 15px 32px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-family:'Times', serif;
     font-size: 16px;
     border-radius: 4px;
}
 #parallax .contact button:hover {
     background-color: #CB9243;
}

/* Footer */
/**************************/
  #parallax .footer {
     min-height: 50px;
     color: #d9e5e9;
     position: relative;
     background: #2a3a41;
     padding: 10px;
     text-align: center;
}
  #parallax .footer p {
     color: #939fa4;
     font-size: 14px;
     line-height: 20px;
}
/* Extras */
/**************************/
 #parallax .line-break-double {
    border:3px double;
     width: 450px;
     margin:30px auto;
}

 #parallax .line-break-single {
    border:1px solid;
     width: 200px;
     margin:30px auto;
}
/* Media Queries */
/**************************/
 @media screen and (max-width: 959px) and (min-width: 768px) {
     #parallax .block {
        padding: 40px;
         width:620px;
    }
     .bio {
      display: inline-block;
      width: 620px;
      padding: 30px;
      margin: 15px auto;
      vertical-align: top;
    }
    .portfolio {
    position: relative;
    overflow: hidden;
    height: 350px;
    }
}
 @media screen and (max-width: 767px) {

    #parallax .parallax-one {
     padding: 200px 0;
     overflow: hidden;
     position: relative;
     width: 100%;
     background-image: url(images/bg_01b.png), url(images/bg_01.jpg);
     background-attachment: fixed;
     background-size: 854px 480px;
     -moz-background-size: 854px 480px;
     -webkit-background-size: 854px 480px;
     background-repeat: no-repeat;
     background-position: top center;
}

    .yra {
         display: block;
         margin: auto;
         width: 250px;
    }

     .yra-block {
        padding: 15px 0;
         display: block;
         margin: auto;
         width: 275px;
    }

	 #parallax h1 {
	     font-size:30px;
	     line-height: 40px;
	}
	 #parallax .block img {
	     margin: 0 auto;
	     padding: 0;
	     width: 90px;
	     vertical-align: middle;
	}
     #parallax .block {
        padding: 30px;
         width:420px;
    }
     #parallax .block {
        padding: 30px;
    }
     #parallax .contact {
     	width: 85%;
     }

     #parallax .parallax-one, #parallax .parallax-two, #parallax .parallax-three {
        padding-top:100px;
         padding-bottom:100px;
    }
     .bio {
      display: inline-block;
      width: 360px;
      padding: 30px;
      margin: 15px auto;
      vertical-align: top;
    }
    .portfolio {
    position: relative;
    overflow: hidden;
    height: 200px;
    }

}
 @media screen and (max-width: 479px) {
     #parallax .block {
        padding: 30px 15px;
         width:290px;
    }
     #parallax .line-break-double {
        border:3px double;
         width: 240px;
         margin:30px auto;
    }

     #parallax .line-break-single {
        border:1px solid;
         width: 125px;
         margin:30px auto;
    }
    .portfolio {
    position: relative;
    overflow: hidden;
    height: 200px;
    }

}