/* ----------- Reset
*/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,figure{border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}
table{border-collapse:separate;border-spacing:0;margin-bottom:1.4em;}
caption,th,td{text-align:left;font-weight:400;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:;}
a img{border:none;}

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
        }
.clearfix { display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* stop commented backslash hack */


/* ----------------------------
*/


body {
        font-family: 'Trebuchet MS', sans-serif;
        font-size: 18px;
        color: #2c2c2c;
}

body, html {
        height: 100%;
}


@font-face {
   font-family: Pecita;
   src: url(Pecita.otf);
}

@font-face {
   font-family: Sansation-Regular;
   src: url(Sansation-Regular.ttf);
}

h2 {
	font: 70px Sansation-Regular, Tahoma, Helvetica, Arial, Sans-Serif;
        font-size: 27px;
        text-align: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        background: url(../images/bottom-border.gif) bottom center no-repeat;
        text-transform: uppercase;
	text-shadow: 0px 2px 3px #555;
        letter-spacing: 1.2px;
        font-weight: 400;
}

h3 {
        font-size: 22px;
        margin-bottom: 40px;
        line-height: 30px;
}

h4 {
        font-family: 'Pecita', Courier;	
        /*font-style: italic;*/
        text-align: center;
        font-size: 18px;
	color: #6C2BE4;
}

h5 {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 8px;
}

h6 {
	font: 70px Sansation-Regular, Tahoma, Helvetica, Arial, Sans-Serif;
        font-size: 27px;
        text-align: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        text-transform: uppercase;
	text-shadow: 0px 2px 3px #555;
        letter-spacing: 1.2px;
        font-weight: 400;
}


h7 {
        font-family: 'Pecita', Courier;	
        /*font-style: italic;*/
        text-align: center;
        font-size: 18px;
	color: BLACK;
}
/*--------------------------------------------*/
 ul.rounded {
    margin: 5;
    padding: 0;
    width: 200px;
    background: #ababab;
    border-radius: 1em; /* default=1; 0.5 for corner effects */
    box-shadow: 12px 2px 8px #666;
  }
  ul.rounded li {
    display: block;
    margin: 0 0 1px;
    padding: 4px 120px; /* default=12 modify 2nd param; extra effects*/
    background: #dedede;
    transition: 0.2s;
  }
  ul.rounded li:first-child {
    border-radius: 1em 1em 0 0;
  }
  ul.rounded li:last-child {
    border-radius: 0 0 1em 1em;
  }
  ul.rounded li:hover {
    padding-left: 20px;
    background: #efefef;
  }
/*--------------------------------------------*/


p {
        line-height: 30px;
        margin-bottom: 20px;
}

a {
        color: #009cff;
        -webkit-transition: color 0.2s ease-out;
        -moz-transition: color 0.2s ease-out;
        -o-transition: color 0.2s ease-out;
        -ms-transition: color 0.2s ease-out;
        transition: color 0.2s ease-out;
        border-bottom: 1px solid #d2d2d2;
        text-decoration: none;
}

a:hover {
        color: #03629f;
}

em {
        font-style: italic;
}

.date {
        font-family: 'Andale Mono', serif;
        font-style: italic;
        display: block;
        color: #6c6c6c;
}

.notAvailable {
        border-bottom: 1px solid #d2d2d2;
        text-decoration: line-through;
        color: #bababa;
}

#wrapper {
        width: 100%;
        height: 100%;
}

.logo {
        width: 100%;
        background: #6C2BE4;
        margin-bottom: 30px;
}

.logo img {
        width: 100%;
        height: auto;
        margin: 20px 0;
}


#circle {
	border-radius:50% 50% 50% 50%;  
	width:90px;
	height:90px;
	float: none;
}

#content {
        width: 85%;
        float: left;
}

#nav {
        width: 15%;
        background: #eff0f1;
        position: fixed;
        right: 0;
        top: 0;
        height: 100%;
}

#nav ul {
        list-style: none;
        margin-left: 15%;
}

#nav ul li {
        margin-bottom: 20px;
}

#nav ul li a {
        text-decoration: none;
        color: #020202;
        -webkit-transition: color 0.2s ease-out;
        -moz-transition: color 0.2s ease-out;
        -o-transition: color 0.2s ease-out;
        -ms-transition: color 0.2s ease-out;
        transition: color 0.2s ease-out;
        font-size: 16px;
        border: none;
}

#nav ul li a:hover {
        color: #009cff;
}

.copyright {
        position: absolute;
        bottom: 20px;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 12px;
        margin: 0;
}

#home .section {
        border-bottom: none;
}

#home .section p {
        text-align: center;
}

#content ul li {
        margin-bottom: 10px;
}

.section {
        padding: 40px 0 20px;
        width: 100%;
        border-bottom: 1px solid #d2d2d2;
}

.block {
        width: 50%;
        margin: 0 auto;
}

.homeImages {
        width: 100%;
        position: relative;
}

.homeImages img {
        width: 33.33333333333%;
        height: auto;
        float: left;
}

.homeImages .downArrow {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -35px;
        width: auto;
        float: none;
}

.centeredBlock {
        width: 100%;
        margin-bottom: 40px;
}

.centeredBlock img {
        width: 90%;
        height: auto;
        display: block;
        margin: 0 auto;
}

.twoColumnBlock {
        width: 100%;
        margin-bottom: 20px;
}

.twoColumnBlock .col {
        width: 46%;
        padding: 0 2%;
        float: left;
}

.twoColumnBlock .col img {
        width: 96%;
        height: auto;
        margin-bottom: 20px;
}

.socialIconBlock {
        width: 100%;
        margin-bottom: 20px;
}

.socialIconBlock .col {
	width: 33.3333333333%;
        float: left;
}

.socialIconBlock .col img {
        width: 35px;
        height: auto;
}

.socialIconBlock .col a {
        -webkit-transition: opacity 0.2s ease-out;
        -moz-transition: opacity 0.2s ease-out;
        -o-transition: opacity 0.2s ease-out;
        -ms-transition: opacity 0.2s ease-out;
        transition: opacity 0.2s ease-out;
        width: 35px;
        display: block;
        margin: 0 auto 2px;
        border: none;
}

.socialIconBlock .col a:hover {
        opacity: .4;
        border-bottom: 2px solid #d2d2d2;
        margin-bottom: 0;
}

blockquote {
        width: 95%;
        padding-left: 5%;
        background: url(../images/quote.gif) top left repeat-y;
        color: #838282;
        font-style: italic;
}

.skills {
        padding-bottom: 40px;
        border-bottom: 1px solid #d2d2d2;
        width: 100%;
        margin-bottom: 20px;
}

.skill3 {
        padding-bottom: 0 !important;
        border-bottom: none !important;
}

.skills .col {
        width: 46%;
        padding: 0 2%;
}

.skill1 .col, .skill3 .col {
        float: left;
}

.skill2 .col {
        float: right;
}

.skills .col ul {
        display: table;
}

.skill1 .col ul {
        margin: 18% auto 0;
}

.skill2 .col ul {
        margin: 29% auto 0;
}

.skill3 .col ul {
        margin: 25% auto 0;
}

.skills .col img {
        width: 96%;
        height: auto;
}


/* --------------------------------------------------------- Media Queries
*/


@media screen and (max-width: 1400px) {

        #content {
                width: 78%;
        }

        #nav {
                width: 22%;
        }
        
        blockquote {
                width: 90%;
                padding-left: 10%;
                background: url(../images/quote.gif) top left repeat-y;
        }
        
        .skill1 .col ul {
                margin-top: 0;
        }
        
        .skill2 .col ul {
                margin-top: 20%;
        }
        
        .skill3 .col ul {
                margin-top: 0;
        }
        
        .twoColumnBlock {
                margin-bottom: 0px;
        }
        
        .twoColumnBlock .col {
                float: none;
                width: 100%;
                padding: 0;
                margin-bottom: 40px;
        }
        
        .twoColumnBlock .col img {
                width: 80%;
                display: block;
                margin: 0 auto 20px;
        }

}


@media screen and (max-width: 1200px) {

}


@media screen and (max-width: 1024px) {

        #content {
                width: 75%;
        }

        #nav {
                width: 25%;
        }
        
        .block {
                width: 60%;
        }
}

@media screen and (max-width: 900px) {
        
        .skills .col {
                float: none;
                width: 100%;
                padding: 0;
        }
        
        .skills .col img {
                width: 80%;
                display: block;
                margin: 0 auto 20px;
        }
        
        .skill2 .col ul {
                margin-top: 0;
        }
        
        .twoColumnBlock .col img {
                width: 100%;
        }
        
        .centeredBlock img {
                width: 100%;
                height: auto;
        }
        
}

@media screen and (max-width: 640px) {

        #content, #nav {
                width: 100%;
                float: none;
                position: static;
                height: auto;
        }

        #nav {
                padding-bottom: 15px;
        }

        #nav ul {
                width: 80%;
                margin: 0 auto 5px;
                display: block;
        }
        
        .logo {
                padding: 10px 0;
        }

        .logo img {
                width: 65%;
                margin: 0 auto;
                display: block;
        }

        #nav ul li {
                display: inline-block;
                width: 31.333333333%;
        }

        #nav ul li a {
                text-align: center;
                display: block;
        }
        
        .homeImages .downArrow {
                width: 50px;
                height: auto;
                margin-left: -25px;
        }

        .block {
                width: 75%;
        }

        .homeImages img {
                width: 50%;
        }

        .copyright {
                position: static;
        }
        
        blockquote {
                width: 88%;
                padding-left: 12%;
                background: url(../images/quote.gif) top left repeat-y;
        }
        

}