/*************************CSS minhtringuyen.fr*************************/
@font-face {
    font-family: "ChunkFiveRegular";
    /*src: url('Chunkfive.ttf');*/
	src: url('http://www.midwinter-dg.com/blog_demos/css3-buttons/chunkfive-webfont.eot');
    src: url('http://www.midwinter-dg.com/blog_demos/css3-buttons/chunkfive-webfont.eot?iefix') format('eot'),
         url('http://www.midwinter-dg.com/blog_demos/css3-buttons/chunkfive-webfont.woff') format('woff'),
         url('http://www.midwinter-dg.com/blog_demos/css3-buttons/chunkfive-webfont.ttf') format('truetype'),
         url('http://www.midwinter-dg.com/blog_demos/css3-buttons/chunkfive-webfont.svg#webfont6hibqX7I') format('svg');
	font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "KeepCalm";
    src: url('/fonts/KeepCalm-Medium.ttf');
}

html, body {
	margin: 0;
	padding: 0;
    font-family: 'Open Sans', sans-serif;
	color: #000;
}

.font-black {
    color: #000;
}
.font-white {
    color: #fff;
}

.f-nav{
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}

.wrap-container {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(/images/fond-ponton.jpg) no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/fond-ponton.jpg', sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/fond-ponton.jpg', sizingMethod='scale');
    /*background-color : rgba(0, 0, 0, 0.27);*/
}

.wrap-center {
    text-align: center;
}

.img-circle {
    border-radius: 50%;
}

#picture {
    width: 105px;
    vertical-align: top;
    display: block;
    margin: 0 auto;
    padding-top: 10px;
}

h1#name {
    display: block;
    margin: 0 auto;
    font: 50px 'KeepCalm';
    width: 280px;
    text-align: justify;
    text-shadow: #000000 2px 2px, #000000 -2px 2px, #000000 -2px -2px, #000000 2px -2px;
}

.content-right {
    width: 100%;
    padding: 0 10px 0 10px;
}

/*.wrap-center .content:before {
    content: "[";
    font-size: 140px;
    display: inline-block;
    margin-top: -34px;
    vertical-align: top;
}
.wrap-center .content:after {
    content: "]";
    font-size: 140px;
    display: inline-block;
    margin-top: -34px;
    vertical-align: top;
}*/
.content-right div {
    display: inline-block;
    width: 50%;
    padding-bottom: 20px;
    padding-top: 20px;
    text-align: justify;
    vertical-align: top;
    font-size: 20px;
}

.content-right p, .content-left p {
    width: 89%;
    display: inline-block;
}

.content-left {
    width: 100%;
    padding: 0 10px 0 10px;
}

.content-left div {
    display: inline-block;
    padding-bottom: 20px;
    padding-top: 20px;
    text-align: justify;
    vertical-align: top;
    font-size: 20px;
}

.separator {
    border-bottom: 2px solid;
    margin: 0 10px 0 10px;
}

.icon-left {
    width: 40px;
    height: 40px;
    padding-top: 5px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    border: 2px solid black;
    border-radius: 50%;
}

footer {
    background: rgba(0, 0, 0, 0.8);
    /*background-color: #ffc600;*/
    min-height: 90px;
    padding: 10px 0 10px 0;
    text-align: center;
}

footer .social {
    font-size: 50px;
}

footer .twitter {
    color: #33CCFF !important;
}

footer .facebook {
    color: #3b5998 !important;
}

footer .linkedin {
    color: #0e76a8 !important;
}

footer .skype {
    color: #00AFF0 !important;
}

footer .envelope {
    color: #FFF !important;
}

footer .soundcloud {
    color: #ff7700 !important;
}


@media (min-width: 320px) {
	.wrap-container {
	    width: 100%;
        height: auto;
        margin: 0 auto;
	}
	.wrap-center {
		margin: 0 auto;
		display: block;
		width: 100%;
		padding: 0;
	}

    .content-right div, .content-left div {
        width: 100%;
        padding-left: 1%;
        padding-right: 1%;
    }
    .separator {
        margin: 0 20px 0 20px;
    }

    .icon-left {
        display: block;
        margin: 5px auto;
    }
    .container p {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .wrap-container {
        height: 600px;
    }
    .wrap-center {
        padding-top: 240px;
    }
    .icon-left {
        display: inline-block;
    }
    .container p {
        width: 89%;
    }
    .content-right div, .content-left div {
        width: 50%;
        padding-left: 20px;
        padding-right: 20px;
    }
    h1#name {
        cursor: crosshair;
        margin: 0;
        padding-top: 7px;
        display: inline-block;
    }
    #picture {
        display: inline-block;
    }
}