/**
 * Address `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

/**
 * Address margins handled incorrectly in IE 6/7.
 */

body {
    margin: 0;
}

/*Background*/
#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
  z-index: -1000;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}
/*html*/
html {
	height: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}
body {
	font-size: 1em;
	line-height: 1.4;
	width: 100%;
	height: 100%;
}
.wrapper {
	width: 800px;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}


/* Header
-----------------------------------------------------------------------------*/
.header {
	height: 50px;
}

.header-top {height:68px;max-width: 800px;
            margin: auto;
            background: white;
            border-bottom-style:solid; border-bottom-color:yellow;border-bottom-width:5px;}

.header-top p {font-weight:500; font-size:18px;
                float:right;
                padding-right: 16px;
                padding-top:2px;
                letter-spacing:-1px;
                color: grey;}


.header-top img {padding-left: 13px;padding-top:13px;}

.menus_top{    opacity:1;
               position:relative;
               top:-16px ;
               width: 800px;
                             }
               
.menus_top nav ul {	margin: 1em 100px ;width: 800px;}
                                    
.menus_top nav li {		   height:30px;
							font-size: 16px; 
                            font-weight:100; width:16%;
                            background-color:grey;
                            text-align:center;
                            padding-top:5px;
                            float:left;
                            transition: all .5s;
                            margin-left:1px;
                            margin-right:0px;list-style: none;}

.menus_top nav li:hover{background-color:black;
                                    }

.menus_top nav ul a {    color:white;
                            text-decoration:none;
                                                        }


/* Middle
-----------------------------------------------------------------------------*/
.content {
	padding: 0 0 100px;
}
.content-about {
	background-color: white;
	margin-top: 58px;
	padding: 0 0 420px;
}



/* Footer
-----------------------------------------------------------------------------*/
.footer {
	width: 800px;
	margin: -100px auto 0;
	height: 100px;
	background-color:yellow;
	position: relative;
}
.rodape { width:800px; margin:auto ;padding-top:5px;height:35px;}
.rodape ul { margin:auto; height:35px;}
.rodape ul li { padding-left:0px;padding-top:6px;height:20px;list-style-type:none; float:clear;}
.rodape ul li img {height:20px;padding-top:5px;}
.rodape ul li p {float:right;position:relative; top:-40px;padding-right:13px;color:grey;}
.rodape ul li p a {text-decoration:none; color:grey}

.rodape ul li p:hover {color:black;}

/*Elements*/

.COSMICO {width:150px; margin:0 auto; background-color:yellow;height:30px;position:relative;top:70px;}

.COSMICO p { letter-spacing:-1px; text-align: center;position:relative; top:5px; color:grey}

h1 {     max-width:800px;
         font-size: 140px; 
         text-align:center; color:white; 
         font-weight:100;
         line-height:0.8;
         margin-left:13px;
         opacity:0.8;
         letter-spacing:-5px;position:relative; top:-5px;}

.circle {   width: 100px;
            height: 100px;
            background-color:yellow;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px; 
            margin:auto; 
            transition: all .2s;
            font-size:50px; font-weight:100;
            letter-spacing:-3px;
            position:relative; top:-50px;}

.circle:hover{ background-color:white;
            width: 120px;
            height: 120px;
            -webkit-border-radius: 60px;
            -moz-border-radius: 60px;
            border-radius: 60px; font-size:60px;
            }


.circle p { text-align:center;
            padding-top:10px; 
            }

.circle a {text-decoration:none;color:grey;}

.navegador {height:5px;max-width: 250px;
            background: yellow;
            color:grey;
            margin-left:70px;
            position:relative;
            top:30px;
            float:clear;}

.navegador p {  height:35px;
                margin-left:70px;
                padding-top:0px;
                padding-bottom:10px;
                font-size:20px;
                position:relative;
                top:60px;
                float:clear;}

.texto_DATA {       background:yellow; font-size: 12px;
                    color: grey;height:15px; 
                    padding-top:5px;padding-left: 13px;padding-right: 13px;
			        margin-left:70px;
                    margin-right:70px;
                    position:relative;
                    text-align:right;
                    top:90px}

.texto_TITULO {     font-size: 90px;line-height:80px; font-weight:100;
                    margin-left:70px;margin-right:70px;letter-spacing:-5px;
                    margin-bottom:30px;
                    padding-bottom:0px;padding-top:10px;
			         }


.texto_ENTRADA {    font-size: 24px;line-height:30px;margin-top:30px;margin-left:70px;margin-right:70px;margin-bottom:50px
			         }




.texto_CAPITULO { 	 padding-left:10px;padding-top:10px;height:30px;background-color:#FFFF99; color: black;
			        margin-left:70px; margin-right:70px; 
                    font-family:'Open Sans', sans-serif;
                    font-weight:600; 
                    clear:both;}
                    

.youtube {text-align: center;clear:both;}



.texto_TEXTO { 	    color: #777;
			        margin-left:70px; margin-right:70px; 
                    font-family:'Open Sans', sans-serif;
                    font-weight:400; 
                    clear:both;}
                    
.texto_TEXTO a {color:red;}


.texto_CODIGO { 	    color: red;
			        margin-left:70px; margin-right:70px; 
                    font-family:'Open Sans', sans-serif;
                    font-weight:400; 
                    clear:both;}






.youtube {text-align: center;clear:both;}


.texto_LEGENDA { 	color: grey; 
                    background-color:#FFFFCC;
			        font-size:12px; 
                    margin-left:70px; 
                    margin-right:70px; 
                    margin-top:-20px;padding-top:5px;padding-left:10px;font-family:'Open Sans', sans-serif;
                    height:20px; font-weight:500; 
                    clear:both;}
                    

.youtube {text-align: center;clear:both;}


.imagem_conteudos img {width:650px;border-style:solid; border-width:1px;border-color:grey;
                        }

.imagem_conteudos {     text-align:center; 
                        }


.bolas {width:300px;}

    .portfolio {    width:680px;
                    height:900px;margin-right:70px;
                    margin-left:70px;
                    float:clear;
                }

    .projectos {    width:150px;
                height:150px;
                float:left;
                text-align:center;
                background-color:yellow;
                -webkit-border-radius: 75px;
                -moz-border-radius: 75px;
                border-radius: 75px; 
                margin:5px;
                border:none;
                font-size:16px;
                transition: all .5s;
                
                }


    .projectos:hover {
                        background-color: black;
                        color: yellow;
                        font-size:24px;
                        }

.projectos p {  text-align:center;
				margin-top: 35px;

                }

.assignement_1{ width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:600;
                transition: all .5s;  
                background-image:url(../img/week1/generic_week_1.jpg);background-size:cover;
                }

.assignement_1 a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;  
                            }

.assignement_1 a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;
                            }

.assignement_1:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }

.assignement_2 { width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:600;
                transition: all .5s;  
                background-image:url(../img/week2/makerkid.jpg);background-size:cover
                }

.assignement_2 a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;  
                            }

.assignement_2 a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;
                            }

.assignement_2:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }

.assignement_3 { width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:600;
                transition: all .5s;  
                background-image:url(../img/week3/fablamp.jpg);background-size:cover;
                }

.assignement_3 a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;  
                            }

.assignement_3 a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;
                            }

.assignement_3:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }


.assignement_4 { width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:600;
                transition: all .5s;  
                background-image:url(../img/week4/fab_isp.jpg);background-size:cover
                }

.assignement_4 a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;  
                            }

.assignement_4 a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;
                            }

.assignement_4:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }









.assignement_5 { width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:600;
                transition: all .5s;  
                background-image:url(../img/week5/vasco_3d.jpg);background-size:cover
                }

.assignement_5 a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;    
                            }

.assignement_5 a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;
                            }

.assignement_5:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }






.assignement_6 { width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:100px;
                transition: all .5s;  
                background-image:url(../img/week6/100x100_week6.jpg);background-size:cover
                }

.assignement_6 a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;  
                            }

.assignement_6 a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;text-shadow:none
                            }

.assignement_6:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }







.assignement_7 { width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:100px;
                transition: all .5s;  
                background-image:url(../img/week7/100x100_week_7.jpg);background-size:cover
                }

.assignement_7 a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;  
                            }

.assignement_7 a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;text-shadow:none
                            }

.assignement_7:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }





.assignement_8 { width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:100px;
                transition: all .5s;  
                background-image:url(../img/week8/100x100_week_8.jpg);background-size:cover
                }

.assignement_8 a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;  
                            }

.assignement_8 a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;text-shadow:none
                            }

.assignement_8:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }


.assignement_9 { width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:100px;
                transition: all .5s;  
                background-image:url(../img/week9/150x150_week_9.jpg);background-size:cover
                }

.assignement_9 a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;  
                            }

.assignement_9 a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;text-shadow:none
                            }

.assignement_9:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }



.assignement_10 { width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:100px;
                transition: all .5s;  
                background-image:url(../img/week10/week10_150x150.jpg);background-size:cover
                }

.assignement_10 a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;  
                            }

.assignement_10 a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;text-shadow:none
                            }

.assignement_10:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }

.assignement_11 { width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:100px;
                transition: all .5s;  
                background-image:url(../img/week11/week11_150x150.jpg);background-size:cover
                }

.assignement_11 a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;  
                            }

.assignement_11 a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;text-shadow:none
                            }

.assignement_11:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }


.assignement_12 { width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:100px;
                transition: all .5s;  
                background-image:url(../img/week12/week12_150x150.jpg);background-size:cover
                }

.assignement_12 a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;  
                            }

.assignement_12 a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;text-shadow:none
                            }

.assignement_12:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }




.assignement_13 { width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:100px;
                transition: all .5s;  
                background-image:url(../img/week13/week13_150x150.jpg);background-size:cover
                }

.assignement_13 a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;  
                            }

.assignement_13 a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;text-shadow:none
                            }

.assignement_13:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }


.assignement_14 { width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:100px;
                transition: all .5s;  
                background-image:url(../img/week14/week14_150x150.jpg);background-size:cover
                }

.assignement_14 a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;  
                            }

.assignement_14 a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;text-shadow:none
                            }

.assignement_14:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }


.assignement_15 { width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:100px;
                transition: all .5s;  
                background-image:url(../img/week15/week15_150x150.jpg);background-size:cover
                }

.assignement_15 a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;  
                            }

.assignement_15 a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;text-shadow:none
                            }

.assignement_15:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }


.assignement_16 { width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:100px;
                transition: all .5s;  
                background-image:url(../img/week16/week16_150x150.jpg);background-size:cover
                }

.assignement_16 a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;  
                            }

.assignement_16 a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;text-shadow:none
                            }

.assignement_16:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }










.assignement_17 { width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:100px;
                transition: all .5s;  
                background-image:url(../img/week17/week17_150x150.jpg);background-size:cover
                }

.assignement_17 a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;  
                            }

.assignement_17 a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;text-shadow:none
                            }

.assignement_17:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }



.final_project { width:200px;
                height:200px;
                float:left;
                text-align:center;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px; 
                margin:5px;
                border:none;
                font-size:35px;font-weight:100px;
                transition: all .5s;  
                background-image:url(../img/final_project/final_project_150x150.jpg);background-size:cover
                }

.final_project a        {   text-decoration:none; 
                            color:yellow;text-shadow:2px 2px 0px black;
                            font-size:40px;
                            font-weight:100; position:relative;top:75px;
                            transition: all .5s;  
                            }

.final_project a:hover  {  text-decoration:none; 
                            color: yellow;;font-size:30px;
                            font-weight:600;text-shadow:none
                            }

.final_project:hover    {   background-image:none;
                            background-color: black;
                            color: yellow;
                            font-size:30px;
                            }