*{

    font-size: 1em;  

}



body{

    background-color: mediumturquoise;

    width: 100%;

    font-family: Arial, Helvetica, sans-serif;  

    margin: 0; 

    padding: 0; 

}



header {

    width: 100%; 

    position: fixed;

    right: 0; 

    top: 0; 

    margin: 0; 

    z-index: 2; 

}



a {

    text-decoration: none; 

}



.headerlight{

    background-color: rgba(245, 245, 245, 0.9); 

    transition: 2s; 

    transition-timing-function: ease-in-out;

    -webkit-transition-timing-function: ease-in-out;

}



.headerdark{

    background-color: whitesmoke; 

    transition: 2s; 

    transition-timing-function: ease-in-out;

    -webkit-transition-timing-function: ease-in-out;

}



#logo {

    font-family: 'Poiret One', cursive;

    max-width: 400px; 

    max-height: 70px; 

    padding-left: 135px; 

    margin-top: 0; 

    padding-top: 0; 

    

}



#logo a{

    text-decoration: none; 

    text-decoration-style: none; 

}



#logo a:visted{ 

    text-decoration-style: none; 

}



#a{

    -webkit-text-stroke; 1px; 

    color: #33cccc; /*aqua*/

    font-size: 8em; 

    margin: 0; 

    width: 37.5%; 

    display: inline; 

}



#c{

    color: #33cccc; /*aqua*/

    -ms-transform: rotate(-18deg); /* IE 9 */

    -webkit-transform: rotate(-18deg); /* Chrome, Safari, Opera */

    transform: rotate(-18deg);

    font-size: 7.056em; 

    width: 26%; 

    max-height: 65px; 

    display: inline-block;

    margin-left: -70px; 

    margin-top: 0; 

}



#name{
    -webkit-text-stroke: 1.5px; 
    color: dimgray; 
    font-size: 1.6132em; 
    margin-left: 100px; 
    margin-top: -120px; 
}





#logotitle{

    font-size: 1.07547em; 

    color: dimgray; 

    letter-spacing: 1.15px; 

    margin-left: 100px; 

    margin-top: -25px; 

}



#logotitle span{

    color: mediumturquoise;

}



#logo:after{

    content: ''; 

    display: block; 

    clear: both; 

}



header nav{

    padding-top: 3%; 

    margin-bottom: 10px; 

    width: 30%; 

    float: right;

    display: inline;  

    clear: left; 

}



header nav a {

    text-decoration: none; 

    font-size: 1em; 

    color: dimgray; 

    display: inline; 

    text-align: left;

    padding-left: 15px;

    margin-left: 5px; 

    border-top-color: whitesmoke;

    -webkit-transition: border-top-color 2s;

    transition: border-top-color 2s;

}



header nav a:visted{

    color: dimgray; 

}



header nav a:active{

    color: dimgray; 

}



header nav a:hover{

    border-top-width: 5px; 

    border-top-style: solid; 

    border-top-color: mediumturquoise;

}



header nav:after{

    content: ''; 

    display: block; 

    clear: both; 

}



header::after{

    content: ''; 

    display: block; 

    clear: both; 

    

}



.hero {

    background-color: mediumturquoise; 

    position: relative; 

    font-family: Arial, Helvetica, sans-serif; 

    margin-top: 12%; 

    padding-top: 2%; 

    padding-bottom: 2%; 

    margin-bottom: 0;

    margin-left:0; 

    margin-right: 0;

    padding-left: 10%; 

    padding-right: 10%; 

}



#pagetitle{

    float: none; 

    font-weight: normal;

    text-align: center; 

    margin: 0; 

    font-size: 4em; 

    color: whitesmoke;

}



.bluebox, footer{

    width: 100%; 

    background-color: mediumturquoise;  

    padding-top: 2%; 

    padding-bottom: 2%; 

}



.bluebox, footer h2{ 

    font-weight: normal; 

    font-size: 3em; 

    text-align: center;

    margin-bottom: 0; 

    color: whitesmoke;

}



.bluebox, footer p{

    color: dimgray; 

    font-family: 'Arial', Helvetica, sans-serif; \

    font-weight: normal; 

    text-align: center; 

    font-size: 1.2em; 

    margin-top: .7%; 

}





.bluebox, footer span{

    color: whitesmoke; 

    font-size: 1.25em; 

}





#list1, #list2{

    float: left; 

    width: 30%; 

    display: inline-block;

}



#list1 {

    margin-left: 20%; 

    padding-bottom: 2%; 

}



#list2{

    margin-right: 20%; 

    padding-bottom: 2%; 

}



.feature{

    height: auto; 

    background-color: white;

    padding-left: 10%; 

    padding-right: 10%;

    padding-top: 2%; 

    padding-bottom: 2%; 

    width: auto;

    margin-bottom: 200px;

    z-index: 1; 

    position: relative;

}



.feature p{

    color: dimgray; 

}



.featuretext h2{

    font-size: 2.5em; 

    color: mediumturquoise; 

    font-weight: normal; 

}



.featuretext{

    float: left; 

    width: 60%;

}



.left{



    padding-left: 5%;

    width: 35%;

}



.featuresection{

    padding-bottom: 20px;

}

.featuresection:after{

    content: ''; 

    display: block; 

    clear: both; 

}



.featuretext a{

    text-decoration: none; 

    color: mediumturquoise;

}



.featuresection img{

    height: auto; 

    float: left;

}



.indent {

    padding-left: 4em; 

}

.indenttwo{

    padding-left: 6em; 

}

.indentthree{

    padding-left: 8em; 

}

.smallindent{

    padding-left: 2em; 

}



.threeimages img{

    border: 1px solid #ddd;

    border-radius: 4px;

    padding: 5px;

    width: 30%;   

}



.leftimg{

    border: 1px solid #ddd;

    border-radius: 4px;

    padding: 5px;

    width: 32%; 

    float: left;

    margin-right: 3%; 

}



.leftimg :after{

    clear: left;

}



.bigimg{

    border: 1px solid #ddd;

    border-radius: 4px;

    padding: 5px;

    width: 32%; 

    margin-right: 3%; 

    width: 75%; 

    margin-left: 15%; 

}





.rightimg{

    border: 1px solid #ddd;

    border-radius: 4px;

    padding: 5px;

    float: right;

    margin-left: 3%; 

}



.rightimg :after{

    clear: right;

}





.feature h1{

    color: dimgray; 

    font-size: 3em; 

    font-weight: lighter; 

    margin: 0; 

}



.feature ul{

    margin-left: 1.5em; 

    overflow: hidden; /*keeps the bullets from floating under images*/

}



.feature ul li{

    color: dimgray;

    margin-left: 2em; 

    list-style-position: inside;

    

}



.feature h2{

    color: dimgray; 

    font-size: 2em; 

    font-weight: lighter;

    padding-top: 2.5%; 

    margin: 0;

}



.feature h3{

    color: dimgray; 

    font-size: 1.5em; 

    font-weight: lighter; 

    margin: 0; 

}



.feature p a, ul li a{

    color: dimgray; 

    font-weight: bold;

}



.feature p a:hover, ul li a:hover{

    color: lightgray;

        -webkit-transition-duration: 0.4s; /* Safari */

        transition-duration: 0.4s;

}



#wireframe{

    background-image: url(homewireframe.jpg); 

    width: 550px; 

    height: 718px; 

    margin-top: 3%; 

    margin-bottom: 3%; 

    margin-left: 21%;

}



#wireframe:hover{

    background-image: url(wireframevisualdesign.jpg);

    width: 550px; 

    height: 718px; 

    transition-duration: 1s;

}



a.button{

    display: inline-block;

    background-color: white; 

    color: dimgrey;

    border-color: dimgray; 

    border-style: solid;

    border-width: 1px; 

    border-radius: 3px;

    padding: 12px;

    margin-right: 10px; 

    margin-top: 10px;

    margin-bottom: 10px;

     -webkit-transition-duration: 0.4s; /* Safari */

    transition-duration: 0.4s;

}



a.button:hover{

    color:lightgray;

    border-color: lightgrey;

}



footer{

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    height:170px;

    z-index:0;

    background-color:mediumturquoise;

}