@charset "utf-8";
/*CSS FILE FOR CHIRPY CHICK DESIGNS for graphic design portfolio*/
    
    
}
#wrapper {
         background-image: linear-gradient(rgba(255,250,237), rgba(255,210,127))
         padding-top: 3%;
        }

#logo {
    padding-left: 80%;
    animation-delay: 7s;
}



}
.typewriter1 {
    text-align: center;
    margin-top: -20%;
  
}

.typewriter1 h1 {
  margin-top: -26%;
  margin-left: 11.5%;
  padding-bottom: .95%;
  font-family: Bradley hand, fantasy;
  font-style: bold;
  font-size: 5.4em;
  color: orange;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: 0rem solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .16em; /* Adjust as needed */
  animation: 
    typing 4s steps(60),
    blink-caret 0.5s;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 60% }
}

.typewriter2 {
    text-align: center;
    padding-left: 7.5%;
    font-size: 1.2em;

}

.typewriter2 h2 {
  margin-left: 25%;
  font-family: Bradley hand, fantasy;
  color: orange;
  opacity: 0; /* Ensures the content is not revealed until the animation */
  border-right: 0rem solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    view 3s steps(45);
    animation-delay: 4s;
    animation-fill-mode: forwards;
}

/* Standard syntax */
@keyframes view {
  from {opacity: 0;}
  to {opacity: 0.75;}
}

/* The typewriter cursor effect */
/*hidden*/
@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange
  }
}
/*end typewriter*/




.scale-up-center {
    margin-left:74%;
    margin-top: 2%;
    overflow: hidden;
}
	@-webkit-animation: scale-up-center 2s cubic-bezier(0.390, 0.575, 0.565, 1.250) 3s both;
	        animation: scale-up-center 2s cubic-bezier(0.390, 0.575, 0.565, 1.250) 3s both;
    padding-left: 83%;
    padding-top: 1%;
}

/* animation scale-up-center */
@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
            margin-left: 400px;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
            margin-left: 400px;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
   

@-webkit-keyframes logo {
  from {
    -webkit-transform: rotate(0) scale(.5);
    left: 120%;
  }
    
  50% {
    -webkit-transform: rotate(-720deg) scale(.5);
    left: 0;
  }

  to {
    -webkit-transform: rotate(0) scale(1);
  }
}



nav {
    padding-top: 0.5%;
	margin-right: 4%;;	
}

nav li {
	display: inline;
}

nav a {
	display: inline-block;
	text-decoration: none;
	font-size: 1.2em;
	color: #ffffff;
	padding: 10px 30px 10px;
    width: 12%;
	background: #ff932d;
	border-radius: 5px;
	border: 1px solid #c95e00;
	box-shadow: inset 0px 1px 0px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 1px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,0.3);
    

    
}

/*Nav transformation */
nav a {
  -webkit-transition: -webkit-transform .5s,
                      background-color 1s ease-in .5s;
  transition: transform .5s,
              background-color 1s ease-in .5s;
}

nav a:hover {
    background-color: red;
  -webkit-transform: scale(1.0);
  -ms-transform: scale(1.0);
  transform: scale(1.0);
}





body {
    text-align: center;

}



#outer_para {
    margin-bottom: 1%;
    margin-left: 12%;
    margin-right: 12%;
    padding-top: 1%;
    color: #104E8B;
    font-family: arial, tahoma, sans-serif;
    border:1px solid #ccc;
    margin-left: 9%;
    width:80%;
    margin-top: 3%;
    box-shadow:0 0 15px;
    border-radius:6px;
    text-align: center;
}

#para {
    margin-top: 0 auto;
    padding-left: 18%;
    width: 80%;
    font-family: bradley hand, fantasy, tahoma;
    font-size: 1.5em;
}

#para li {
    display: block;
    margin: 0 auto;
    padding-left: 1%;
    margin-left: 27%;
    text-align: left;
}

.container {
    margin-top: 3%;
    text-align: center;
    width:100%;
    vertical-align: middle;
}

.carousel-inner {
    text-align: center;
    vertical-align:middle;
    margin: 0 auto;
    max-height:450px;
    align-content: center;
}


align-content: center;
/*contact form*/

div#main {
width:830px;
height:650px;
margin:0 auto;
font-family:'Ubuntu',sans-serif
}

div#form_sample{
display:none;
text-align:center;
border:1px solid #ccc;
width:300px;
padding:0 50px 15px;
margin-top:20px;
box-shadow:0 0 15px;
border-radius:6px;
float:left
}

#main h1{
margin-top:40px
}

hr{
margin-top:-5px
}

label{
float:left;
font-size:16px
}

input[type="text"]{
width:100%;
margin-top:10px;
height:35px;
margin-bottom:25px;
padding:10px;
border:3px solid #104E8B;;
}

textarea{
width:100%;
border:3px solid #104E8B;;
padding:10px;
margin-bottom:25px;
margin-top:10px;
height:100px;
resize:none
}

input[type="submit"]{
width:100%;
padding:10px 45px;
background-color:#104E8B;
border:none;
color:#fff;
font-size:18px;
font-weight:700;
cursor:pointer;
font-family:'Ubuntu',sans-serif
}

#border {
    margin: 4%;
    border:1px solid #ccc;
    margin-left: 4%;
    width:90%;
    padding:0 50px 15px;
    box-shadow:0 0 15px;
    border-radius:6px;
}

/*end contact form*/

/*Portfolio*/

#blue_border {
    color: #104E8B;
    font-family: arial, tahoma, sans-serif;
    border:1px solid #ccc;
    margin-left: 9%;
    width:80%;
    padding:0 50px 100px;
    margin-top: 9%;;
    box-shadow:0 0 15px;
    border-radius:6px;
    
}
#Porth1 {
     color: #104E8B;
     font-family: arial, tahoma, sans-serif;
}

.grid-container {
  padding-top: 2%;
  margin:0 auto; 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 80%;
  padding-top: 20px;
  grid-gap: 120px 100px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 5px;
  font-size: 30px;
  text-align: center;
  width: 270px;
}

#main {
    padding-top: 25px;
    font-family: bradley hand, fantasy, tahoma;
    font-size: 1.5em;
    color: #104E8B;
    }
}
#column_left: {
}

#column_right  {
    font-family: bradley hand, fantasy, tahoma;

}

#column_right h1 {
    font-size: 3em;  
}

#column_right h2 {
    font-size: 2em;  
}

#column_right h3 {
    font-size: 1em;  
    line-height: 0.75em;
    padding-left: 5%;
    margin: -0.1%;
}

#column_right p {
    line-height: 1.0em;
    padding-top: 10px;
}

#column_right a {
    line-height: 1.0em;
    padding-top: 10px;
    font-size: 1.5em;
}

/*Grid on portfolio*/
.zoom {
  padding: 25px;
  transition: transform .2s; /* Animation */
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(2.0); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

#education {
    height: 400px;
    margin: 3%;
    border:1px solid #ccc;
    margin-left: 4%;
    width:90%;
    padding:0 50px 15px;
    box-shadow:0 0 15px;
    border-radius:6px;
}

.education {
    color: #104E8B;
    font-family: arial, tahoma, sans-serif;
    padding-top: 8%;
   
}



/* Clear floats after the columns */

/*Education*/
#column_left_Education {
   float: left;
   width: 50%;
}


#column_right_Education {
  float: left;
  width: 50%;
  margin-top: 7%;
  padding-bottom: 5%;
}

.row_Education:after {
  content: "";
  display: table;
  clear: both;
}

/*end portfolio*/

/*resume*/


#download {
    font-size: 4em;
    text-align: center;
    padding-bottom: 0.5%;
    padding-top: 1%;
}
#line_break {
    padding-top: 3%;
}

section  {
    color: #104E8B;
    font-family: arial, tahoma, sans-serif;
    border:1px solid #ccc;
    margin-left: 11%;
    width:80%;
    padding:0 50px 15px;
    margin-top: 3%;;
    box-shadow:0 0 15px;
    border-radius:6px;
  
}
 
section li {
    margin-left: 2%;
    list-style-type: none;
    font-size: 14px;
}

.grid-item R {
    width: 70%;
}

.grid-item_R ul{
    padding: 1%;

}

.grid-item_R li {
  text-align: justify;
}

.grid-item_R img {
    margin: 0 auto;
}

.work grid-container_R {
     width:90%;
     margin-left: 15%;
}

.work {
    text-align:justify;
    font-size: 10px;  
}
/*
.work grid-container_R {
     width:90%;
     margin-left: 20%;
}


.work img {
    margin-left: 1%;
    margin-top: 5%;  
}
/*
.work grid-item_R {
    font-family: arial, tahoma, sans-serif;
    width:70%;
    font-size: 20px; 
}
.grid-item ul {
    padding-left: 1%;
    margin-left: 0%;
}
  */  

section .line {
      border-bottom: solid 3px #104E8B; 
      padding-bottom: 10px;
      padding-top: 10px;
}


.line {
    border-bottom: solid 3px #104E8B; ;
}
}
  /* Additional css `propery: value;` pairs here */
}
/*footer*/
foot {
    padding-top: 15%;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    padding-top: 10px;
}

foot h2 {
    text-align: center;
    color: #104E8B;
    font-family: bradley hand, fantasy, tahoma;
}

#foot {
    text-align: center;
    font-size: 1.3em;
    font-family: bradley hand, fantasy, tahoma;
    color: #104E8B;
    width:100;
    line-height: 1.3em;
    padding-bottom: 25px;
    padding-bottom: 25px;
}

#nav li {
  -webkit-animation: transition 5s infinite; /* Safari 4+ */
  -moz-animation:    transition 5s infinite; /* Fx 5+ */
  -o-animation:      transition 5s infinite; /* Opera 12+ */
  animation:         transition 5s infinite; /* IE 10+, Fx 29+ */
}

view {
  -webkit-animation: transition 5s infinite; /* Safari 4+ */
  -moz-animation:    transition 5s infinite; /* Fx 5+ */
  -o-animation:      transition 5s infinite; /* Opera 12+ */
  animation:         transition 5s infinite; /* IE 10+, Fx 29+ */
}

typing{
  -webkit-animation: transition 5s infinite; /* Safari 4+ */
  -moz-animation:    transition 5s infinite; /* Fx 5+ */
  -o-animation:      transition 5s infinite; /* Opera 12+ */
  animation:         transition 5s infinite; /* IE 10+, Fx 29+ */
}

scale-up-center {
  -webkit-animation: transition 5s infinite; /* Safari 4+ */
  -moz-animation:    transition 5s infinite; /* Fx 5+ */
  -o-animation:      transition 5s infinite; /* Opera 12+ */
  animation:         transition 5s infinite; /* IE 10+, Fx 29+ */
}

#logo {
  -webkit-animation: transform 5s infinite; /* Safari 4+ */
  -moz-animation:    transform 5s infinite; /* Fx 5+ */
  -o-animation:      transform 5s infinite; /* Opera 12+ */
  animation:         transform 5s infinite; /* IE 10+, Fx 29+ */
}

blink-caret {
  -webkit-animation: transform 5s infinite; /* Safari 4+ */
  -moz-animation:    transform 5s infinite; /* Fx 5+ */
  -o-animation:      transform 5s infinite; /* Opera 12+ */
  animation:         transform 5s infinite; /* IE 10+, Fx 29+ */
}


@media only screen (min-width: 501px) and (max-width: 876px) {
    
.typewriter1 h1  {
        width: 93%;
        font-size: 1.0em;
        text-align: center;
    }
.typewriter2 h2{
        text-align: center;
        padding-right: 5%;
        font-size: 0.5em;
    }

 nav {
       
        margin: 0 auto;
        padding-top: 4%;
        padding-bottom: 4%;
        width: 100%;
    }
    
nav li {
	display: inline-block;
    width: 100%;
    margin: 0 auto;
    padding-top: 2%;
}

nav a {
    margin:0 auto;
    display: inline-block;
    text-decoration: none;
	font-size: 1.0em;
    text-align: center;
	color: #ffffff;
    width: 100%;
	background: #ff932d;
	border-radius: 5px;
	border: 1px solid #c95e00;
	box-shadow: inset 0px 1px 0px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 1px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,0.3);
        
    }  
}

@media only screen and (max-width: 901px) {
    
#wrapper {
        display: block;
        margin: 0 auto;
        max-width: 500px;
}

header#ccd_logo {
        text-align: center;
        max-width: inherit;
        margin: 0 auto;
    } 
.scale-up-center{
    padding-top: 2%;
    text-align: center;
     width: 50%;
    margin: 0 auto;
    }
    
 
#responsive_title: {
        display: contents;
        color: orange;
    }
 
#responsive_nav {
       display: block;
        width: 100%;
    }
   
nav#nav_top {
        position: relative;
        display: block;
        width: 100%;
    }

.typewriter1 h1  {
        width: 75%;
        font-size: 1.5em;
        text-align: center;
    }
.typewriter2 h2{
        text-align: center;
        padding-right: 5%;
        font-size: 0.9em;
    }

nav {
        padding-top: 2%;
        padding-bottom: 2%;
    }
nav li {
	display: block;
    width: 70%;
    margin: 0 auto;
    padding-top: 2%;
}

nav {
  position: relative;
  clear: both;
}
nav a {
    padding: 0px;
    display: block;
    text-decoration: none;
	font-size: 1.2em;
	color: #ffffff;
    width: 90%;
	background: #ff932d;
	border-radius: 5px;
	border: 1px solid #c95e00;
	box-shadow: inset 0px 1px 0px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 1px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,0.3);
    }

.container.myCarousel {
       text-align: center;
    }
    
#column_left_Education {
   float: left;
   width: 100%;
}


#column_right_Education {
  float: left;
  width: 100%;
  margin-top: 7%;
  padding-bottom: 5%;
}
   #education {
    height: 600px;
    margin: 3%;
    border:1px solid #ccc;
    margin-left: 4%;
    width:90%;
    padding:0 50px 15px;
    box-shadow:0 0 15px;
    border-radius:6px;
} 
#para li {
    display: block;
    margin: 0 auto;
    padding-left: 1%;
    margin-left: 10%;
    text-align: left;
}

   .grid-item_R img {
    margin: 0 auto;
    width: 70%;
} 
}