/*
        GRA 410 - Adv Digital Graphic Design for Web - SNHU
        Stylesheet
        Author: Claudia Lindsay
        Date:   from 03/09/2017 - still working on it

        Filename: style.css


*/


/*######################################*/
/*TYPOGRAPHY ###########################*/
/*######################################*/

@font-face{ 
	font-family: 'Lane';
	src: url('fonts/LANENAR_-webfont.eot');
	src: url('fonts/LANENAR_-webfont.eot?iefix') format('eot'),
	     url('fonts/LANENAR_-webfont.woff') format('woff'),
	     url('fonts/LANENAR_-webfont.ttf') format('truetype'),
	     url('fonts/LANENAR_-webfont.svg#webfont') format('svg');
}

html {
	-webkit-font-smoothing: antialiased;
}

html {
	font-size: 100%;
}

p {
    font-size: 1rem;
	line-height: 1.625em;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
}

a {
    font-size: 1em;
	line-height: 1.625rem;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    text-decoration:none;
    color:
}

a:hover {
    text-decoration:none;
}

h1,h2,h3 {
    font-family: 'Lane', sans-serif;
    font-weight: normal;
}

h1 {
    font-size:4.25rem;
    line-height:6.375rem;
}

h2 {
    font-size:2.5rem;
    line-height:3.125rem;
    margin-bottom:1.35rem;
}

h3 {
    font-size:1.6875rem;
    line-height:2.25rem;
}


h5 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:1rem;
    line-height: 1.625rem;
    font-weight:600;

}

ul {
    list-style:none
}

li {
    margin-top:1.625em;
}

li a {
    display:inline;
}

hr {
    margin-top:4.568rem;
    margin-bottom:4.568rem;
    border-color:#e5e5e5;
}

a {
    color:#e31869;
}


/*######################################*/
/*PRELOADER ############################*/
/*######################################*/

#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
    width:100%;
    height:100%;
	background-color:#fff; 
    z-index:9999; /* makes sure it stays on top */
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}

/* Loading animation: */

.spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/*######################################*/
/*Mobile Menu ##########################*/
/*######################################*/

.cbp-spmenu {
	background-color: #292929;
	position: fixed;
}

.cbp-spmenu h3 {
	color: white;
	font-size: 1.2rem;
	padding: 1.3rem;
    padding-left:2rem;
	margin: 0;
	font-weight: 700;
    float:left;
}

.cbp-spmenu a {
	display: block;
	color: #c4c4c4;
	font-size: 1rem;
	font-weight: 700;
    text-decoration:none;
    text-transform:uppercase;
}

.cbp-spmenu-vertical {
	width: 200px;
	height: 100%;
	top: 0;
	z-index: 1000;
}

.cbp-spmenu-vertical a {
	border-bottom: 1px solid #383838;
    padding:1rem;
    padding-left:2rem;
}

.cbp-spmenu-vertical a:hover {
    background-color:#383838;
}


.cbp-spmenu-right {
	right: -200px;
}

.cbp-spmenu-right.cbp-spmenu-open {
	right: 0px;
}

.cbp-spmenu,
.cbp-spmenu-push {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#hideRight {
    float:right; 
    text-decoration:none;
    border:none; 
    cursor:pointer;
    padding-right:2rem;
    margin-top:1.2rem;
    color:white;
    font-size:2rem;
    color:#c4c4c4;
}
#hideRight:hover {
    color:white;
}

#mobile_menu_content {
    border-top: 1px solid #383838;
    clear:both;
}

/*#####################################################################################################################*/
/* Top menu */
/*#####################################################################################################################*/

#nav_bar {
    height:4.875rem;
    background-color: #1c1c1c;
    position: fixed;
    top:0;
    z-index:800;
    width:100%;
    padding:1.1rem;
}

.logo {
    float:left;
}
.logo img {
    width:10.5rem;
    height:5.75rem;
}

#navigation ul {
    float:right;
    margin-top:0.5rem;
    padding:0;
}

#navigation ul li {
    float:left;
    margin-left:1.2rem;
    padding:0;
    margin-top:0;
    color:#c4c4c4;
}

#navigation li a{
    color:#c4c4c4;
    font-size: 0.875rem;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight:700;
    text-transform: uppercase;
    text-decoration:none;
   
}

#navigation li a:hover,
.mobile_nav_icon_open:hover {
    color:white;
}

.active a {
	color:white !important
}

.mobile_nav_icon_open {
    color:#c4c4c4;
    font-size:2rem;
    margin-top:-0.4rem;
    padding:0;
}

.mobile_nav_icon_open:hover {
    cursor:pointer;
}



/*#####################################################################################################################*/
/* Home */
/*#####################################################################################################################*/

#home {
    margin-top:4.875rem;
    padding-top:4.875rem;
    min-height: 42.25rem;
    padding-top:14.625rem;
    color:white;
    text-align:center;
}


.bgimage {
    background: url(../images/bg.jpg) no-repeat center center scroll; 
    background-size: cover;
    
}


/*#####################################################################################################################*/
/* bio */
/*#####################################################################################################################*/

#bio {
    padding-top: 7.4rem;
    padding-bottom: 4.125rem;
    color:black;
    background-color:white;
    text-align:center;
    position:relative;
    z-index:710;
}

#bio_intro {
    margin-bottom:1.8rem
}

.claudia_photo {
    height:30.875rem;
}

#claudia1 {
    height:30.875rem;
    width:50%;
    background: url(../images/person1.jpg) no-repeat center top;
    background-size: cover;
    float:left;
}


.claudia_info {
    text-align:left;
    display:inline-block;
    width:50%;
    float:right;
    height:30.875rem;
    padding-left:5.625rem;
    padding-top:5.2rem;
    padding-right:5.625rem;
}

.claudia_info h5 {
    margin-bottom: 1.2rem;
}

.claudia_info h3 {
    margin-bottom: 1.4rem;
}

.claudia_info p {
    margin-bottom: 2.8rem;
}

.social_icon{
    color:#d9dce3;
    font-size:2rem;
    transition: all 0.3s ease-in-out;
}

.social_icon:hover {
    cursor:pointer;
}

.social_icons ul, .social_icons ul li {
	display: block;
	list-style: none;
	padding: 0;
}

.social_icons ul li {
	margin-right: 0.4rem;
	margin-left: 0.4rem;
}

.social_icons ul li:first-child {
	margin-left:0;
}

.social_icons ul li:last-child {
	margin-right:0;
}

.social_icons ul li {
    float:left;
}

.inner {
    text-align:center;
    position:relative;
    margin:0 auto;
    margin-top:1.6rem;
}

.nav-link {
    margin:0.3rem;
    height:1rem;
    width:1rem;
    background-color:white;
    border:solid 3px #d9dce3;
    border-radius:100%;
    display:inline-block;
    text-align:center;
    text-indent:-10000rem;
    transition: all 0.3s ease-in-out;
}

.nav-link:hover {
    border:solid 3px #d9dce3;
    border-radius:100%;
    text-align:center;
    text-indent:-10000rem;
    cursor:pointer;
}


/*#####################################################################################################################*/
/* My other sides */
/*#####################################################################################################################*/

#claus {
    padding-top: 35.9rem;
    padding-bottom: 2.9rem;
    color:black;
    background-color:white;
    text-align:center;
    border-bottom: solid 1px #e5e5e5;

}

#claus_intro {
    margin-bottom: 4rem;
}

.sides_photo {
    padding:2rem;
    margin:0 auto;
    width: 16rem;
}

.claus_sides {
    text-align:center;
	
}

.social_icons.center {
    display:inline-block;
    margin-top:-0.5rem;
    margin-bottom:4rem;
}


/*#####################################################################################################################*/
/* About */
/*#####################################################################################################################*/

#about {
    padding-top: 7.2rem;
    padding-bottom: 1rem;
    color:black;
    background-color:white;
    text-align:center;
    border-bottom: solid 1px #e5e5e5;
    position:relative;
    z-index:700;
}

.intro {
    margin-bottom:5rem;
}

.about_icons {
    margin-bottom:2.9rem;
}

.about_icon {
    font-size: 4rem;
}


/*#####################################################################################################################*/
/* Portfolio */
/*#####################################################################################################################*/

#portfolio {
    padding-top: 3.4rem;
    padding-bottom: 2.125rem;
    color:black;
    background-color:white;
    text-align:center;
    position:relative;
    display:block;
    border-bottom: solid 1px #e5e5e5;
    z-index:700;
}

#portfolio_intro {
    margin-bottom: 1rem;
    margin-top: 4.5rem;
}

.portfolio_item {
    margin-bottom:1.5rem;
}

.portfolio_item a img {
    transition: all 0.3s ease-in-out;
}

.portfolio_item a:hover img{
    opacity:0.8;
    cursor: url(../images/cursor.png), auto;
    animation: pulse .5s;
}


/* Portfolio - subpage - print materials, packaging design and student projects */
/*#####################################################################################################################*/

#portfolio_subpage {
    padding-top: 7.4rem;
    padding-bottom: 4.125rem;
    color:black;
    background-color:white;
    text-align:center;
}

.portfolio_item_description {
    text-align:left;
}

.portfolio_item_icons {
    text-align:center;
}

.portfolio_item_title {
    text-align:center;
    margin-bottom: 1.6rem;
}

/*.portfolio_item_images, .portfolio_item_video {
    margin-bottom:1rem;
    padding-right:2rem;
}

.portfolio_item_video iframe{
	width:100%;
	height:25rem;
}*/

.portfolio_item_slider {
    margin-bottom:5rem;
}

.slider_container{
    padding-right:2rem;
}

.portfolio_item_controls {
    color:#d9dce3;
    font-size:2rem;
    transition: all 0.3s ease-in-out;
    line-height:3.125rem;
    margin-bottom:1.35rem;
    margin-top:0.3rem;
    margin-left:0.3rem;
    margin-right:0.3rem;
    display:inline-block;
}

.portfolio_item_controls:hover {
    cursor:pointer
}

/*.portfolio_item_tasks ul li {
    font-size: 1rem;
	line-height: 1.625em;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    margin:1rem;
    margin-left:0rem;
}

.portfolio_item_tasks ul li:before {
    font-family: 'rapid-icon-font';
    content: '\e10e';
    margin-right:1rem;
    font-size:1rem;
    top:1rem;
}

.fullwidth {
    margin-bottom:2rem;
}

.portfolio_item_tasks.fullwidth {
    text-align:left;
}*/

/*#####################################################################################################################*/
/* resume */
/*#####################################################################################################################*/

#resume {
    padding-top: 7.4rem;
    padding-bottom: 4.4rem;
    color:black;
    background-color:white;
    text-align:center;
    position:relative;
    z-index:700;
}

#resume_intro {
    margin-bottom: 4rem;
}
.resume_details {
    text-align:left;
    margin-top:3rem;
    padding-right:1rem;
}

.image_back {
    position:relative;
    left:0;
    top:0;
    z-index:29;
}

#resume_column_left,
#resume_column_right {
    margin-top:2rem;
}

/*######################################*/
/*BUTTON SUBMIT  ############################*/
/*######################################*/

.cta1 {
    display:inline-block;
	font-family: 'Source Sans Pro', sans-serif;
	font-size:1rem;
	font-weight:700;
	font-style:normal;
	padding-top:1rem;
    padding-bottom:1rem;
	padding-left:2em;
    padding-right:2rem;
    line-height:1rem;
	text-decoration:none;
    text-transform:uppercase;
	text-align:center;
    border:solid 2px;
    border-top-left-radius:0.3rem;
	border-top-right-radius:0.3rem;
	border-bottom-right-radius:0.3rem;
	border-bottom-left-radius:0.3rem;
    transition: all 0.3s ease-in-out;
}

.cta1:visited, .cta1:active {
    text-decoration:none;
}

.cta1:focus {
    outline:none;
    text-decoration:none;
}

/*#####################################################################################################################*/
/* Thanks section */
/*#####################################################################################################################*/

#thanks-section {
    text-align:center;
    background-color:black;
    width:100%;
    padding-top:0rem;
    padding-bottom:0.5rem;
    z-index:700;
}

#thanks-section h2 {
    color:white;
}


/*#####################################################################################################################*/
/* Contact */
/*#####################################################################################################################*/

#contact {
    padding-top: 7.4rem;
    padding-bottom: 6.7rem;
    color:black;
    background-color:white;
    text-align:left;
    border-bottom: solid 1px #e5e5e5;
    position:relative;
    z-index:700;
}

input {
    float:left;
    padding-left: 1.2rem;
    padding-top: 0.1rem;
    width:100%;
    height: 3.25rem;
    font-family: 'Source Sans Pro', sans-serif;
    font-size:1rem;
    font-weight:300;
    color: #444;
    background: white;
    border-radius: 0.3rem;
    border:solid 2px #d8d8d8;
    margin-bottom:2rem;
}

textarea {
    float:left;
    padding-left: 1.2rem;
    padding-top: 1rem;
    width:100%;
    height: 8rem;
    font-family: 'Source Sans Pro', sans-serif;
    font-size:1rem;
    font-weight:300;
    color: #444;
    background: white;
    border-radius: 0.3rem;
    border:solid 2px #d8d8d8;
    margin-bottom: 1.625rem;
}

input:focus, textarea:focus {
    outline: none;
}

button {
    background-color:white;
    margin-bottom:2rem;
}

#contact_info1, #contact_info2 {
    margin-bottom: 2.3rem;
}

#message {
    display:none;
    background-color:#fff9da;
    border-radius: 0.3rem;
}

#alert {
    padding-bottom:2rem;
    padding-top:2rem;
    padding-left:2rem;
    padding-right:2rem;
}

.unordered li {
    margin:0 !important;
}

/*#####################################################################################################################*/
/* Footer */
/*#####################################################################################################################*/

#footer {
    padding-top: 3.4rem;
    padding-bottom: 2.4rem;
    background-color:#1c1c1c;
    text-align:left;
    position:relative;
    z-index:700;
}

#footer p {
	color:#d9dce3;
	float:left;
}

#footer .social_icons {
	float:right;
	margin-top:0;
	padding-top:0;
}

#footer .social_icons li {
	margin-top:0;
}