/*===================== 
	Color information
	
	-
	-
	-
	-
		 
=======================*/
/*===================== 
	CSS reset/normalize 
=======================*/

/**Correct `block` display not defined in IE 8/9.**/
article,aside,details,figcaption,figure,footer,header,hgroup,
main,nav,section,summary {display: block;}
pre {white-space: pre-wrap;}
small { font-size: 80%;}


/*===================== 
	   Font 
=======================*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

/*===================== 
	base styles 
=======================*/

html {
    font-family: 'Open Sans', Arial, sans-serif;
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
	}

body {
    margin: 0;
    padding: 0;
	}
	
/* clear floats */ 
.group:before,
.group:after {content: ""; display: table;} 
.group:after {clear: both;}
.group {zoom: 1;}	
.clear { clear: both;}

.hide{
    display: none;
}
	
/*===================== 
	typography 
=======================*/

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	}
	h1 {
        font-size: 55px;
        text-align: center;
        padding:3% 2%;
        font-weight: 100;
    }
    h2 {
        font-size: 40px;
        padding:2%;
        font-weight: 100;
    }
    h3 {
        font-size: 34px;
        padding:2% 0 0 0;
        margin:0 0 2% 0;
        font-weight: 100;
        border-bottom: #333 solid 4px;
    }
    h4 {
        font-size: 28px;
        padding:2%;
        font-weight: 200;
    }

p {
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
	margin: 0;
    padding:0 2% 2% 2%;
    color:#000;
	}

.bold {
    font-weight: bold;
	}

/*===================== 
	link styles 
=======================*/

a.link:focus {outline: thin dotted;/*reset*/
	}
	
a.link,
a.link:link, 
a.link:visited, 
a.link:active {
	outline: 0;/*reset*/
    color: inherit; 
    text-decoration:underline;
	}
	a.link:hover  {
		outline: 0;/*reset*/
		text-decoration: none;
		}  

/*===================== 
	header styles 
=======================*/

.header-wrap {
	width: 100%;
	margin: 0;
    padding: 0;
	}

header {
	width: 100%;
    position: relative;
	}

header img{
    width: 100%;
    position: relative;
}
#mobile-header{
    display: none;
}

/*===================== 
	nav styles 
=======================*/
nav#mobile{display: none;}
nav.primary {
    margin: 0;
    padding:0;
    width:100%;
    position: fixed;
    z-index: 10;
    background: rgba(255,255,255,.75);
	}
	nav.primary ul {
        max-width: 780px;
        margin: 0 auto;
        padding 0;
		}
		nav.primary ul li {
            display: block;
            float: left;
            list-style-type: none;
			}
			nav.primary ul li a {
                font-size: 14px;
                color:#333;
                text-decoration: none;
                padding: 10px 20px;
                display: block;
                text-transform: uppercase;
				}	
			nav.primary ul li a:hover {
                color:#aaa;
				}

/*===================== 
	content styles 
=======================*/
.infobox{
    width:42%;
    padding: 3% 0 3% 5%;
    display: inline-block;
    float:left;
}
img.logo{
    width:60%;
    display: block;
    margin: auto;
    padding:4% 1%;
}
.square_wrap{
    display: block;
    width:92%;
    margin:3% auto 32% auto;
}
img.square{
    display: inline-block;
    float:left;
    margin: 0;
    padding:0;
    width:20%
}
.girls{
    display: block;
    float: left;
    width:40%;
    margin: 0 0 0 5%
}
.guys{
    display: block;
    float: left;
    width:40%;
}
.girls img, .guys img{
    width: 100%;
    box-shadow: 0px 0px 7px 1px #999;
    margin: 4% 1%;
} 
.line{
    width: 1px;
    height: 2800px;
    background-color: #000;
    margin: 7% 3% 0 3%;
    float: left;
}
/*===================== 
	layout styles 
=======================*/

.left {float: left;}
.right {float: right;}

#proposal{
    background:URL('/images/bg.jpg')fixed top center no-repeat;
    background-size:cover;
    margin:-5px 0 0 0 !important;
} 
#party{
    background: url('/images/crossword.png') repeat;
}

#info{
    background: url('/images/brushed_bg.png') repeat;
}

#photos,#proposal{
    width: 100%;
	margin: 0;
    padding:0;
    }
    #photos img{
        width:15%;
        display: inline-block;
        float:left;
        margin:2%;
        border: 7px solid #fff;
        box-shadow: 0px 0px 8px 1px #999;
    }
.container {
	max-width: 1100px;
	margin: 0 auto;
	}
	
.col-1-6 { width: 16%;}
.col-1-5 { width: 20%;}
.col-1-4 { width: 24%;}
.col-1-3 { width: 33%;}
.col-1-2 { width: 49%;}
.col-2-3 { width: 65%;}
.col-3-4 { width: 75%;}

/*===================== 
	footer styles 
=======================*/

footer {
	margin: 0;
	width: 100%;
	min-width: 1024px;
	}
	
a.footerlink:link,
a.footerlink:visited, 
a.footerlink:active {
	text-decoration: none; 
	font-size:13px;
	color: #222;
	}
	a.footerlink:hover {
		text-decoration:none; 
		font-size:13px;
		color: #fff;
		}

.footertext {
	font-size:13px; 
	color:#666;
	}

.smallfootertext {
	font-size:10px; 
	color:#666;
	}

.divfooter {
	width:490px; 
	text-align:center; 
	margin:0 auto;
	}

/*===================== 
	Responsive styles 
=======================*/

@media screen and (max-width: 1050px){
    .line{height: 2200px;}
}
@media screen and (max-width: 800px){
    nav.primary ul li a {
        font-size: 12px;
        padding: 10px 10px;

    }	
    nav.primary ul {
        max-width: 580px;
    }
    .line{height: 1900px;}
    
      
}
@media screen and (max-width: 700px){
    #proposal{
        background:URL('/images/rp.png')repeat;
    } 
    .hide{
        display: block;
    }
    .show{
        display: none;
    }
    h1 {font-size: 32px;}
    h2 {font-size: 28px;}
    h3 {font-size: 24px;}
    h4 {font-size: 18px;}
    
    .line{height: 1600px;}
}
@media screen and (max-width: 600px){
    nav.primary{display: none;}
    
    #mobile-header{
        display: block;
        font-size: 32px;
        position: fixed;
        z-index: 10;
    }
    #mobile-header a{
        color:#333;
        text-decoration: none;
    }

    .infobox{
        width:80%;
        padding: 3%;
        margin: 0 auto;    
        display: block;
        float:none;
    }
    .girls, .guys{
    display: block;
    float: none;
    width:60%;
    margin: 3% auto;
    }
    
    .line{display: none;}

}